/* ==========================================================================
   SAFARI GRACE HOTEL — Core Design System
   ========================================================================== */

:root{
  --sg-green-50:#f0f7f2; --sg-green-100:#dbebe0; --sg-green-500:#2f7d5c; --sg-green-600:#256349; --sg-green-700:#1c4c39;
  --sg-gold-500:#c8952f; --sg-gold-600:#a97a22;
  --sg-red-50:#fdf2f2; --sg-red-500:#c94444; --sg-red-600:#b13333;
  --sg-amber-50:#fef8ec; --sg-amber-500:#c8952f;
  --sg-blue-50:#eef4fb; --sg-blue-500:#3872b5;
  --sg-gray-25:#fafaf9; --sg-gray-50:#f5f5f4; --sg-gray-100:#e9e8e6; --sg-gray-200:#dcdad7;
  --sg-gray-300:#c3c0bb; --sg-gray-400:#9b9691; --sg-gray-500:#78746f; --sg-gray-600:#5b5751;
  --sg-gray-700:#403d38; --sg-gray-800:#2b2926; --sg-gray-900:#1a1917;

  --bg:#faf9f7; --surface:#ffffff; --surface-2:#f6f5f2; --border:var(--sg-gray-200);
  --text:var(--sg-gray-800); --text-muted:var(--sg-gray-500); --text-soft:var(--sg-gray-400);
  --primary:var(--sg-green-600); --primary-strong:var(--sg-green-700); --primary-soft:var(--sg-green-50);
  --accent:var(--sg-gold-500);
  --radius-sm:6px; --radius:10px; --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(26,25,23,.06);
  --shadow:0 2px 8px rgba(26,25,23,.08);
  --shadow-lg:0 12px 32px rgba(26,25,23,.14);
  --sidebar-w:250px; --sidebar-w-collapsed:72px; --topbar-h:64px;
  --ease:cubic-bezier(.4,0,.2,1);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#17181a; --surface:#1f2123; --surface-2:#26282b; --border:#33363a;
    --text:#eceae6; --text-muted:#a7a39c; --text-soft:#7d7a74;
    --primary:#4caf82; --primary-strong:#68c79b; --primary-soft:#1d3327;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow:0 2px 10px rgba(0,0,0,.35); --shadow-lg:0 16px 40px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#17181a; --surface:#1f2123; --surface-2:#26282b; --border:#33363a;
  --text:#eceae6; --text-muted:#a7a39c; --text-soft:#7d7a74;
  --primary:#4caf82; --primary-strong:#68c79b; --primary-soft:#1d3327;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow:0 2px 10px rgba(0,0,0,.35); --shadow-lg:0 16px 40px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0 0 4px; font-weight:600; letter-spacing:-.01em}
p{margin:0 0 8px}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.icon{width:18px; height:18px; stroke-width:1.8; vertical-align:-4px; flex-shrink:0}
button{font-family:inherit}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* ---------- Layout shell ---------- */
.app-shell{display:flex; min-height:100vh}
.sidebar{
  width:var(--sidebar-w); flex-shrink:0; background:var(--sg-gray-900); color:#e9e7e3;
  display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; z-index:40;
  transition:width .25s var(--ease), transform .25s var(--ease);
}
.sidebar.collapsed{width:var(--sidebar-w-collapsed)}
.sidebar-brand{
  display:flex; align-items:center; gap:10px; padding:18px 18px; border-bottom:1px solid rgba(255,255,255,.08); min-height:var(--topbar-h)
}
.sidebar-brand .mark{
  width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--sg-gold-500),var(--sg-green-500));
  display:flex; align-items:center; justify-content:center; font-weight:700; color:#1a1917; flex-shrink:0; font-size:15px;
}
.sidebar-brand .brand-text{overflow:hidden; white-space:nowrap; transition:opacity .2s var(--ease)}
.sidebar.collapsed .brand-text{opacity:0; width:0}
.sidebar-brand .brand-text small{display:block; color:#a7a39c; font-size:11px; letter-spacing:.03em}

.sidebar-nav{flex:1; overflow-y:auto; padding:10px 10px}
.nav-section{margin-top:14px}
.nav-section-title{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:#8a8680; padding:6px 12px; white-space:nowrap; overflow:hidden;
}
.sidebar.collapsed .nav-section-title{opacity:0; height:0; padding:0; margin:0}

.nav-link{
  display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:8px; color:#cfccc6;
  font-size:13.5px; font-weight:500; margin-bottom:2px; transition:background .15s var(--ease), color .15s var(--ease); position:relative;
  white-space:nowrap; overflow:hidden;
}
.nav-link .icon{opacity:.85}
.nav-link:hover{background:rgba(255,255,255,.07); color:#fff; text-decoration:none}
.nav-link.active{background:var(--sg-green-600); color:#fff}
.nav-link.active::before{content:""; position:absolute; left:-10px; top:0; bottom:0; width:3px; background:var(--sg-gold-500); border-radius:2px}
.nav-link .label{transition:opacity .2s var(--ease)}
.sidebar.collapsed .nav-link{justify-content:center}
.sidebar.collapsed .nav-link .label{display:none}

.sidebar-foot{padding:12px; border-top:1px solid rgba(255,255,255,.08)}
.collapse-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:8px; border-radius:8px;
  background:transparent; border:1px solid rgba(255,255,255,.12); color:#cfccc6; cursor:pointer; transition:background .15s var(--ease);
}
.collapse-btn:hover{background:rgba(255,255,255,.08)}

.main{margin-left:var(--sidebar-w); flex:1; min-width:0; transition:margin-left .25s var(--ease); display:flex; flex-direction:column; min-height:100vh}
.sidebar.collapsed ~ .main{margin-left:var(--sidebar-w-collapsed)}

.topbar{
  height:var(--topbar-h); background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center;
  justify-content:space-between; padding:0 22px; position:sticky; top:0; z-index:30; gap:16px;
}
.topbar-title{font-size:16px; font-weight:600}
.topbar-title .crumb{color:var(--text-muted); font-weight:400; font-size:12.5px; display:block; margin-top:1px}
.topbar-right{display:flex; align-items:center; gap:14px}
.topbar-search{
  display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--border); border-radius:8px;
  padding:7px 12px; width:240px; transition:width .2s var(--ease), border-color .2s var(--ease);
}
.topbar-search:focus-within{width:300px; border-color:var(--primary)}
.topbar-search input{border:0; background:transparent; outline:0; font-size:13px; width:100%; color:var(--text)}
.icon-btn{
  width:38px; height:38px; border-radius:9px; border:1px solid var(--border); background:var(--surface); display:flex;
  align-items:center; justify-content:center; cursor:pointer; color:var(--text-muted); position:relative; transition:all .15s var(--ease);
}
.icon-btn:hover{background:var(--surface-2); color:var(--text)}
.notif-dot{position:absolute; top:6px; right:7px; width:8px; height:8px; border-radius:50%; background:var(--sg-red-500); border:1.5px solid var(--surface)}
.lang-switch{display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden}
.lang-switch a{padding:6px 10px; font-size:12px; font-weight:600; color:var(--text-muted); background:var(--surface)}
.lang-switch a.active{background:var(--primary); color:#fff}
.lang-switch a:hover{text-decoration:none}

.user-chip{display:flex; align-items:center; gap:9px; padding:5px 10px 5px 5px; border-radius:24px; background:var(--surface-2); cursor:pointer; border:1px solid var(--border)}
.avatar{width:30px; height:30px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:12.5px}
.user-chip .who{line-height:1.2}
.user-chip .who .u-name{font-size:12.5px; font-weight:600}
.user-chip .who .u-role{font-size:10.5px; color:var(--text-muted)}

.topbar-right{position:relative}
.dropdown-menu{
  display:none; position:absolute; top:56px; right:0; background:var(--surface); border:1px solid var(--border);
  border-radius:10px; box-shadow:var(--shadow-lg); min-width:180px; padding:6px; z-index:50;
  animation:fadeSlideUp .15s var(--ease) both;
}
.dropdown-menu.open{display:block}

.content{padding:22px; flex:1}
.content-anim{animation:fadeSlideUp .35s var(--ease) both}
@keyframes fadeSlideUp{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}

@media (max-width: 980px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.mobile-open{transform:translateX(0)}
  .main{margin-left:0}
  .sidebar.collapsed ~ .main{margin-left:0}
  .topbar-search{display:none}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:8px; border:1px solid transparent;
  font-size:13.5px; font-weight:600; cursor:pointer; transition:transform .1s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
  line-height:1.2; white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-strong); text-decoration:none}
.btn-gold{background:var(--sg-gold-500); color:#1a1917}
.btn-gold:hover{background:var(--sg-gold-600); text-decoration:none}
.btn-outline{background:var(--surface); border-color:var(--border); color:var(--text)}
.btn-outline:hover{background:var(--surface-2); text-decoration:none}
.btn-danger{background:var(--sg-red-500); color:#fff}
.btn-danger:hover{background:var(--sg-red-600); text-decoration:none}
.btn-ghost{background:transparent; color:var(--text-muted)}
.btn-ghost:hover{background:var(--surface-2); color:var(--text); text-decoration:none}
.btn-sm{padding:6px 11px; font-size:12.5px}
.btn-lg{padding:12px 22px; font-size:15px}
.btn-block{width:100%; justify-content:center}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn-icon{width:34px; height:34px; padding:0; justify-content:center}

/* ---------- Cards / KPIs ---------- */
.grid{display:grid; gap:16px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1200px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px;
  box-shadow:var(--shadow-sm); transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card-hover:hover{box-shadow:var(--shadow); transform:translateY(-2px)}
.card-title{font-size:13px; font-weight:600; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between}

.kpi{position:relative; overflow:hidden}
.kpi .kpi-icon{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:12px;
  background:var(--primary-soft); color:var(--primary);
}
.kpi .kpi-value{font-size:24px; font-weight:700; letter-spacing:-.02em}
.kpi .kpi-label{font-size:12.5px; color:var(--text-muted); margin-top:2px}
.kpi .kpi-delta{font-size:11.5px; font-weight:600; margin-top:8px; display:inline-flex; align-items:center; gap:4px}
.kpi .kpi-delta.up{color:var(--sg-green-600)}
.kpi .kpi-delta.down{color:var(--sg-red-500)}

/* ---------- Tables ---------- */
.table-wrap{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm)}
table.data-table{width:100%; border-collapse:collapse; font-size:13.2px}
.data-table thead th{
  text-align:left; padding:12px 16px; background:var(--surface-2); color:var(--text-muted); font-weight:600;
  font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--border);
}
.data-table tbody td{padding:12px 16px; border-bottom:1px solid var(--border); vertical-align:middle}
.data-table tbody tr{transition:background .12s var(--ease)}
.data-table tbody tr:hover{background:var(--surface-2)}
.data-table tbody tr:last-child td{border-bottom:none}
.table-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; flex-wrap:wrap}
.table-empty{padding:48px 20px; text-align:center; color:var(--text-muted)}
.table-empty .icon{width:36px; height:36px; margin-bottom:10px; opacity:.5}

.pagination{display:flex; align-items:center; gap:6px; padding:14px 16px; justify-content:flex-end; border-top:1px solid var(--border)}
.pagination a,.pagination span{
  min-width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:7px; font-size:12.5px;
  color:var(--text-muted); border:1px solid var(--border); padding:0 6px;
}
.pagination a:hover{background:var(--surface-2); text-decoration:none}
.pagination .current{background:var(--primary); color:#fff; border-color:var(--primary)}

/* ---------- Badges ---------- */
.badge{display:inline-flex; align-items:center; gap:5px; padding:3.5px 10px; border-radius:20px; font-size:11.5px; font-weight:600; white-space:nowrap}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.badge-green{background:var(--sg-green-50); color:var(--sg-green-600)}
.badge-red{background:var(--sg-red-50); color:var(--sg-red-500)}
.badge-amber{background:var(--sg-amber-50); color:var(--sg-gold-600)}
.badge-blue{background:var(--sg-blue-50); color:var(--sg-blue-500)}
.badge-gray{background:var(--sg-gray-100); color:var(--sg-gray-600)}
:root[data-theme="dark"] .badge-green,:root:not([data-theme="light"]) .badge-green{background:#173225}
:root[data-theme="dark"] .badge-red,:root:not([data-theme="light"]) .badge-red{background:#32191a}
:root[data-theme="dark"] .badge-amber,:root:not([data-theme="light"]) .badge-amber{background:#332a16}
:root[data-theme="dark"] .badge-blue,:root:not([data-theme="light"]) .badge-blue{background:#182636}
:root[data-theme="dark"] .badge-gray,:root:not([data-theme="light"]) .badge-gray{background:#2a2c2f}

/* ---------- Forms ---------- */
.form-group{margin-bottom:16px}
label{display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--text)}
label .req{color:var(--sg-red-500)}
.form-control,select.form-control,textarea.form-control{
  width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text);
  font-size:13.5px; transition:border-color .15s var(--ease), box-shadow .15s var(--ease); outline:0;
}
.form-control:focus{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft)}
textarea.form-control{resize:vertical; min-height:80px}
.form-hint{font-size:11.5px; color:var(--text-muted); margin-top:5px}
.form-error{font-size:11.5px; color:var(--sg-red-500); margin-top:5px; display:flex; align-items:center; gap:5px; animation:fadeSlideUp .2s var(--ease)}
.form-row{display:flex; gap:14px; flex-wrap:wrap}
.form-row > *{flex:1; min-width:160px}
.checkbox-row{display:flex; align-items:center; gap:8px}
fieldset{border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin:0 0 16px}
legend{font-size:12px; font-weight:700; padding:0 8px; color:var(--text-muted)}

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(20,20,18,.5); display:flex; align-items:center; justify-content:center;
  z-index:100; opacity:0; visibility:hidden; transition:opacity .2s var(--ease); padding:20px;
}
.modal-backdrop.open{opacity:1; visibility:visible}
.modal{
  background:var(--surface); border-radius:var(--radius-lg); width:100%; max-width:520px; max-height:90vh; overflow-y:auto;
  box-shadow:var(--shadow-lg); transform:scale(.94) translateY(10px); opacity:0; transition:transform .22s var(--ease), opacity .22s var(--ease);
}
.modal-backdrop.open .modal{transform:scale(1) translateY(0); opacity:1}
.modal.modal-lg{max-width:760px}
.modal.modal-xl{max-width:980px}
.modal-header{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border)}
.modal-header h3{font-size:15.5px}
.modal-body{padding:20px}
.modal-footer{padding:16px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px}

/* ---------- Toasts ---------- */
.toast-stack{position:fixed; top:18px; right:18px; z-index:200; display:flex; flex-direction:column; gap:10px}
.toast{
  background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--primary); border-radius:10px;
  padding:12px 16px; box-shadow:var(--shadow-lg); min-width:280px; display:flex; gap:10px; align-items:flex-start;
  animation:toastIn .25s var(--ease) both;
}
.toast.error{border-left-color:var(--sg-red-500)}
.toast.warning{border-left-color:var(--sg-gold-500)}
.toast strong{display:block; font-size:13px; margin-bottom:2px}
.toast p{font-size:12px; color:var(--text-muted); margin:0}
.toast.hide{animation:toastOut .25s var(--ease) forwards}
@keyframes toastIn{from{opacity:0; transform:translateX(30px)} to{opacity:1; transform:translateX(0)}}
@keyframes toastOut{to{opacity:0; transform:translateX(30px)}}

/* ---------- Misc ---------- */
.empty-state{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; text-align:center; color:var(--text-muted)}
.empty-state .icon{width:44px; height:44px; margin-bottom:14px; opacity:.4}
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:18px}
.tab{padding:10px 4px; margin-right:18px; font-size:13px; font-weight:600; color:var(--text-muted); border-bottom:2px solid transparent; cursor:pointer; transition:all .15s var(--ease)}
.tab.active{color:var(--primary); border-color:var(--primary)}
.breadcrumbs{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-muted); margin-bottom:14px}
.breadcrumbs a{color:var(--text-muted)}
.spinner{width:16px; height:16px; border:2px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 37%,var(--surface-2) 63%); background-size:400% 100%; animation:skeleton 1.4s ease infinite; border-radius:6px}
@keyframes skeleton{0%{background-position:100% 50%} 100%{background-position:0 50%}}
hr{border:none; border-top:1px solid var(--border); margin:16px 0}
.text-muted{color:var(--text-muted)}
.text-right{text-align:right}
.text-center{text-align:center}
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between} .gap-8{gap:8px} .gap-12{gap:12px}