/* =====================================================================
   Hotel Mobile — modern design layer (loaded AFTER style.css to override).
   Cohesive palette, typography, sidebar, cards, tables, forms, buttons.
   ===================================================================== */
:root{
  --brand:#6366f1; --brand-d:#4f46e5; --brand-l:#eef0ff;
  --ink:#1f2733; --muted:#6b7280; --line:#edeff4;
  --bg:#f5f7fb; --card:#ffffff;
  --side-bg:#1b2030; --side-bg2:#151a26; --side-ink:#9aa4bf;
  --ok:#10b981; --warn:#f59e0b; --danger:#ef4444;
  --radius:14px; --shadow:0 1px 2px rgba(16,24,40,.04),0 6px 18px rgba(16,24,40,.06);
  --shadow-lg:0 12px 34px rgba(16,24,40,.14);
}
body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif!important;
  background:var(--bg)!important; color:var(--ink); font-size:14px; -webkit-font-smoothing:antialiased; letter-spacing:.1px; }
h1,h2,h3,h4,h5,h6,.page-title{ color:var(--ink); font-weight:700; letter-spacing:-.2px; }
a{ color:var(--brand-d); }

/* ---------- Topbar ---------- */
.topbar{ background:var(--card)!important; box-shadow:0 1px 0 var(--line),0 2px 10px rgba(16,24,40,.04)!important; border:0!important; }
.topbar .topbar-left{ background:transparent!important; border:0!important; border-right:1px solid var(--line)!important; overflow:hidden; }
.logo{ display:inline-flex!important; align-items:center; height:70px; }
.logo .hm-logo-img{ height:38px; width:auto; margin-right:10px; flex:0 0 auto; }
.logo .brand-name{ color:var(--ink); font-weight:800; font-size:18px; letter-spacing:-.4px; line-height:70px; white-space:nowrap; }
.logo .brand-name b{ color:var(--brand); }
/* collapsed menu: the logo box is only 70px — show just the logo mark, centered */
.enlarged #wrapper .topbar .topbar-left .logo{ justify-content:center; }
.enlarged #wrapper .topbar .topbar-left .logo .brand-name{ display:none!important; }
.enlarged #wrapper .topbar .topbar-left .logo .hm-logo-img{ margin-right:0; height:36px; }
.navbar-custom .nav-user img{ border:2px solid var(--brand-l); width:38px; height:38px; object-fit:cover; }
.navbar-custom .nav-user .hm-avatar{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#a5b0ff,var(--brand)); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; letter-spacing:.5px; border:2px solid var(--brand-l); }
.button-menu-mobile i{ color:var(--ink)!important; font-size:22px; }

/* ---------- Sidebar (light variant) ---------- */
.left.side-menu{ background:#ffffff!important; border:0!important; border-right:1px solid var(--line)!important; box-shadow:1px 0 0 rgba(16,24,40,.02); }
/* colors apply in BOTH expanded + collapsed states */
#sidebar-menu .menu-title{ color:#98a2b3!important; }
#sidebar-menu>ul>li>a{ color:#475067!important; border-radius:11px!important; transition:all .18s ease; }
#sidebar-menu>ul>li>a i{ color:#9aa3b8!important; transition:color .18s; }
#sidebar-menu>ul>li>a:hover{ background:var(--brand-l)!important; color:var(--brand-d)!important; }
#sidebar-menu>ul>li>a:hover i{ color:var(--brand-d)!important; }
#sidebar-menu>ul>li.mm-active>a,#sidebar-menu>ul>li>a.active{ background:linear-gradient(90deg,var(--brand),var(--brand-d))!important; color:#fff!important; box-shadow:0 8px 18px rgba(99,102,241,.32); }
#sidebar-menu>ul>li.mm-active>a i{ color:#fff!important; }
/* layout/spacing only when EXPANDED — leave the theme's icon-only rules untouched when collapsed */
body:not(.enlarged) #sidebar-menu .menu-title{ text-transform:uppercase; font-size:10.5px; font-weight:700; letter-spacing:1.4px; padding:20px 22px 8px!important; }
body:not(.enlarged) #sidebar-menu>ul>li>a{ font-weight:500; font-size:14px; padding:11px 16px!important; margin:3px 12px!important; display:flex!important; align-items:center; }
body:not(.enlarged) #sidebar-menu>ul>li>a i{ font-size:18px!important; margin-right:12px; min-width:22px; text-align:center; }
/* ===== COLLAPSED sidebar (body.enlarged): clean icon buttons + hover tooltip ===== */
.enlarged #wrapper .left.side-menu{ width:70px!important; }
.enlarged #wrapper .left.side-menu .logo .brand-name{ display:none!important; }
.enlarged #wrapper #sidebar-menu .menu-title{ display:none!important; }
.enlarged #wrapper .left.side-menu #sidebar-menu>ul>li{ position:relative; }
.enlarged #wrapper .left.side-menu #sidebar-menu>ul>li>a{
  display:flex!important; align-items:center!important; justify-content:center!important;
  width:46px!important; height:46px!important; padding:0!important; margin:5px 12px!important; border-radius:13px!important;
}
.enlarged #wrapper .left.side-menu #sidebar-menu>ul>li>a i{ margin:0!important; font-size:20px!important; min-width:auto!important; }
.enlarged #wrapper .left.side-menu #sidebar-menu>ul>li>a span{
  display:none!important; position:absolute; left:62px; top:50%; transform:translateY(-50%);
  background:#1b2030; color:#fff!important; padding:7px 12px; border-radius:9px; font-size:12.5px; font-weight:500;
  white-space:nowrap; box-shadow:0 10px 24px rgba(16,24,40,.28); z-index:1200; pointer-events:none;
}
.enlarged #wrapper .left.side-menu #sidebar-menu>ul>li>a:hover span{ display:block!important; }
.enlarged #wrapper .left.side-menu #sidebar-menu>ul>li:hover>a{ width:46px!important; }

/* ---------- Content ---------- */
.content-page,.content{ background:var(--bg)!important; }
.page-title-box{ padding:8px 0 20px!important; border:0!important; }
.page-title-box .page-title{ font-size:21px; }
.breadcrumb{ background:transparent!important; padding:2px 0!important; margin:0; font-size:12.5px; }
.breadcrumb-item.active{ color:var(--muted); }

/* ---------- Cards ---------- */
.card{ background:var(--card); border:1px solid var(--line)!important; border-radius:var(--radius)!important; box-shadow:var(--shadow)!important; margin-bottom:24px; }
.card .card-body{ padding:22px; }
.card-title,.header-title{ font-weight:700!important; color:var(--ink); }

/* ---------- Buttons ---------- */
.btn{ border-radius:10px!important; font-weight:600; font-size:13.5px; padding:.5rem 1.05rem; transition:all .16s ease; box-shadow:none; }
.btn:focus,.btn.focus{ box-shadow:0 0 0 3px rgba(99,102,241,.25)!important; }
.btn-primary{ background:var(--brand)!important; border-color:var(--brand)!important; }
.btn-primary:hover{ background:var(--brand-d)!important; border-color:var(--brand-d)!important; transform:translateY(-1px); box-shadow:0 8px 18px rgba(99,102,241,.38); }
.btn-success{ background:var(--ok)!important; border-color:var(--ok)!important; }
.btn-danger{ background:var(--danger)!important; border-color:var(--danger)!important; }
.btn-sm{ border-radius:8px!important; padding:.32rem .72rem; font-size:12.5px; }
.btn-info{ background:#0ea5e9!important; border-color:#0ea5e9!important; color:#fff!important; }
.btn-info:hover{ background:#0284c7!important; border-color:#0284c7!important; color:#fff!important; }
.btn-warning{ background:#f59e0b!important; border-color:#f59e0b!important; color:#fff!important; }
.btn-warning:hover{ background:#d97706!important; border-color:#d97706!important; color:#fff!important; }
.btn-secondary{ background:#6b7280!important; border-color:#6b7280!important; color:#fff!important; }
.btn-secondary:hover{ background:#4b5563!important; border-color:#4b5563!important; }
.btn-dark{ background:var(--ink)!important; border-color:var(--ink)!important; }
.btn-light{ background:#f1f3f9!important; border-color:#e7eaf3!important; color:#3f4655!important; }
.btn-light:hover{ background:#e7eaf3!important; color:var(--ink)!important; }
.btn-outline-secondary,.btn-outline-info,.btn-outline-primary,.btn-outline-danger,.btn-outline-success,.btn-outline-dark{ border-radius:10px!important; background:transparent!important; }
.btn-outline-secondary{ color:var(--muted)!important; border-color:#dfe3ec!important; }
.btn-outline-secondary:hover{ background:#f1f3f9!important; color:var(--ink)!important; }
.btn-outline-primary{ color:var(--brand-d)!important; border-color:#c7cbf5!important; }
.btn-outline-primary:hover{ background:var(--brand)!important; color:#fff!important; border-color:var(--brand)!important; }
.btn-outline-info{ color:#0284c7!important; border-color:#bae6fd!important; }
.btn-outline-info:hover{ background:#0ea5e9!important; color:#fff!important; border-color:#0ea5e9!important; }
.btn-outline-danger{ color:#dc2626!important; border-color:#fecaca!important; }
.btn-outline-danger:hover{ background:var(--danger)!important; color:#fff!important; border-color:var(--danger)!important; }
.btn-outline-success{ color:#059669!important; border-color:#a7f3d0!important; }
.btn-outline-success:hover{ background:var(--ok)!important; color:#fff!important; border-color:var(--ok)!important; }

/* ---------- Tables ---------- */
.table{ color:var(--ink); }
.table thead th{ text-transform:uppercase; font-size:11px; letter-spacing:.5px; color:var(--muted)!important; font-weight:700; border-bottom:1px solid var(--line)!important; border-top:0!important; padding:13px 14px; background:#fbfcfe; }
.table td{ padding:13px 14px; vertical-align:middle; border-top:1px solid var(--line)!important; }
.table-hover tbody tr:hover{ background:var(--brand-l)!important; }
.card .table.mb-0{ margin-bottom:0; }
table.dataTable thead th{ border-bottom:1px solid var(--line)!important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current{ background:var(--brand)!important; border-color:var(--brand)!important; color:#fff!important; border-radius:8px; }

/* ---------- Forms ---------- */
.form-control,.custom-select{ border-radius:10px!important; border:1px solid #e3e6ee!important; padding:.55rem .85rem; font-size:13.5px; color:var(--ink); transition:border .16s,box-shadow .16s; height:auto; }
.form-control:focus,.custom-select:focus{ border-color:var(--brand)!important; box-shadow:0 0 0 3px rgba(99,102,241,.18)!important; }
.form-control[readonly]{ background:#f2f3f8!important; color:#586073!important; cursor:not-allowed; }
label{ font-weight:600; font-size:12.5px; color:#3f4655; margin-bottom:.35rem; }
.form-text{ font-size:12px; }

/* ---------- Badges ---------- */
.badge{ font-weight:600; padding:.42em .72em; border-radius:8px; font-size:11.5px; letter-spacing:.2px; }
.badge-success{ background:#dcfce7!important; color:#15803d!important; }
.badge-danger{ background:#fee2e2!important; color:#b91c1c!important; }
.badge-warning{ background:#fef3c7!important; color:#b45309!important; }
.badge-primary{ background:var(--brand-l)!important; color:var(--brand-d)!important; }
.badge-info{ background:#e0f2fe!important; color:#0369a1!important; }
.badge-light{ background:#f1f3f9!important; color:#475569!important; }
.badge-secondary{ background:#eef1f6!important; color:#475569!important; }

/* ---------- Nav pills / tabs (e.g. restaurant edit sub-nav) ---------- */
.nav-pills .nav-link{ color:var(--muted)!important; background:transparent!important; border:1px solid transparent; border-radius:10px!important; font-weight:600; font-size:13px; padding:.5rem .9rem!important; transition:all .15s ease; display:inline-flex; align-items:center; }
.nav-pills .nav-link i{ color:inherit; }
.nav-pills .nav-link:hover{ background:var(--brand-l)!important; color:var(--brand-d)!important; }
.nav-pills .nav-link.active{ background:linear-gradient(90deg,var(--brand),var(--brand-d))!important; color:#fff!important; box-shadow:0 6px 16px rgba(99,102,241,.32); }
.nav-pills .nav-link.active i{ color:#fff!important; }
.nav-tabs{ border-bottom:1px solid var(--line)!important; }
.nav-tabs .nav-link{ border:0!important; color:var(--muted)!important; font-weight:600; border-radius:0!important; padding:.65rem 1rem!important; }
.nav-tabs .nav-link:hover{ color:var(--brand-d)!important; }
.nav-tabs .nav-link.active{ color:var(--brand-d)!important; background:transparent!important; border-bottom:2px solid var(--brand)!important; }

/* ---------- Alerts / dropdown / modal ---------- */
.alert{ border:0!important; border-radius:12px!important; font-size:13.5px; }
.alert-success{ background:#dcfce7; color:#166534; }
.alert-danger{ background:#fee2e2; color:#991b1b; }
.alert-warning{ background:#fef3c7; color:#92400e; }
.alert-info{ background:#e0f2fe; color:#075985; }
/* flash messages — modern single-row icon + text + dismiss */
.hm-flash{ display:flex; align-items:center; gap:11px; padding:13px 16px!important; font-size:14px; font-weight:500; box-shadow:0 2px 10px rgba(16,24,40,.05); }
.hm-flash .hm-flash-ic{ font-size:20px; line-height:1; flex:0 0 auto; }
.hm-flash .hm-flash-msg{ flex:1 1 auto; }
.hm-flash .close{ opacity:.5; text-shadow:none; font-weight:600; padding:0 2px; line-height:1; }
.hm-flash .close:hover{ opacity:.85; }
.alert-success.hm-flash .hm-flash-ic{ color:#12b76a; }
.alert-danger.hm-flash .hm-flash-ic{ color:#f04438; }
.alert-warning.hm-flash .hm-flash-ic{ color:#f79009; }
.alert-info.hm-flash .hm-flash-ic{ color:#2e90fa; }
.dropdown-menu{ border:1px solid var(--line)!important; border-radius:12px!important; box-shadow:var(--shadow-lg)!important; padding:6px; }
.dropdown-item{ border-radius:8px; font-size:13.5px; padding:.5rem .75rem; }
.dropdown-item:hover{ background:var(--brand-l); color:var(--brand-d); }
.profile-dropdown{ min-width:236px!important; }
.profile-dropdown .dropdown-item{ white-space:nowrap; display:flex; align-items:center; }
.profile-dropdown .dropdown-item i{ margin-right:9px; width:18px; text-align:center; font-size:16px; }
.modal-content{ border:0!important; border-radius:16px!important; box-shadow:var(--shadow-lg)!important; }
.modal-header,.modal-footer{ border-color:var(--line)!important; }
.modal-title{ font-weight:700; }
.modal-header{ padding:20px 22px; }
.modal-body{ padding:20px 22px; }
.modal-footer{ padding:14px 22px; }
.hm-modal-ic{ width:44px; height:44px; border-radius:12px; background:var(--brand-l); color:var(--brand-d); display:inline-flex; align-items:center; justify-content:center; font-size:23px; flex:0 0 auto; }

/* ---------- List group / pagination / input-group ---------- */
.badge-dark{ background:#e5e7eb!important; color:var(--ink)!important; }
.list-group-item{ border-color:var(--line)!important; }
.list-group-item.active{ background:var(--brand)!important; border-color:var(--brand)!important; }
.page-link{ color:var(--brand-d)!important; border-radius:8px!important; border-color:var(--line)!important; margin:0 2px; }
.page-link:hover{ background:var(--brand-l)!important; color:var(--brand-d)!important; }
.page-item.active .page-link{ background:var(--brand)!important; border-color:var(--brand)!important; color:#fff!important; }
.input-group-text{ border-radius:10px!important; border-color:#e3e6ee!important; background:#f3f4f8!important; color:var(--muted); }
.progress{ border-radius:8px; background:#eef0f5; }
.progress-bar{ background:var(--brand)!important; }

/* ---------- Misc ---------- */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:#c7ccd9; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:#aab1c2; }
.content-page .container-fluid{ animation:hm-fade .26s ease; }
@keyframes hm-fade{ from{opacity:0; transform:translateY(5px);} to{opacity:1; transform:none;} }
.custom-control-input:checked~.custom-control-label::before{ background:var(--brand)!important; border-color:var(--brand)!important; }
.text-primary{ color:var(--brand-d)!important; }

/* ---------- Mobile ---------- */
@media (max-width:767px){
  /* narrow topbar logo box: show only the logo mark */
  .topbar .topbar-left .logo .brand-name{ display:none!important; }
  .topbar .topbar-left .logo .hm-logo-img{ margin-right:0; height:34px; }
  .card .card-body{ padding:16px; }
  .modal-header,.modal-body,.modal-footer{ padding-left:16px!important; padding-right:16px!important; }
  .modal-dialog{ margin:.6rem; }
  .page-title-box .page-title{ font-size:18px; }
  .btn{ font-size:13px; }
  /* tighter gutters + wide content scrolls inside its own container (no sideways page scroll) */
  .container-fluid{ padding-left:14px!important; padding-right:14px!important; }
  .table-responsive{ -webkit-overflow-scrolling:touch; }
  .page-title-box{ flex-wrap:wrap; }
  .page-title-box .breadcrumb{ display:none; }
}
@media (max-width:480px){
  /* stack modal footer buttons full-width for easy tapping */
  .modal-footer{ display:flex; flex-direction:column-reverse; gap:8px; }
  .modal-footer .btn{ width:100%; margin:0!important; }
}