/* ============================================================================
   UMBRA — Metronic 8 theme (fresh build, replaces all old theme CSS)
   ----------------------------------------------------------------------------
   Faithful to Metronic 8 "Demo 1": ink-dark sidebar #1E1E2D on #F5F8FA canvas,
   white 70px topbar, 13px Inter root, hairline-bordered cards, btn-light-*
   soft buttons, square 6px avatars, dashed dividers.

   BRAND: primary = Umbra royal blue #009EF7 (bookingwhizz-inherited).
   To switch to stock Metronic blue: set --kt-primary:#009EF7, hover #0095E8,
   light #F1FAFF — one place, below.
   ============================================================================ */

:root{
  /* brand */
  --kt-primary:#009EF7;          /* royal blue (stock Metronic: #009EF7) */
  --kt-primary-active:#0095E8;   /* hover/active (stock: #0095E8) */
  --kt-primary-light:#F1FAFF;    /* soft bg (stock: #F1FAFF) */
  --kt-gold:#c9a84c;             /* Umbra accent (logo dot, rare highlights) */
  /* Metronic semantic set */
  --kt-success:#50CD89;  --kt-success-light:#E8FFF3;
  --kt-danger:#F1416C;   --kt-danger-light:#FFF5F8;
  --kt-warning:#FFC700;  --kt-warning-light:#FFF8DD;
  --kt-info:#7239EA;     --kt-info-light:#F8F5FF;
  /* surfaces + text */
  --kt-page:#F5F8FA;
  --kt-surface:#FFFFFF;
  --kt-border:#F4F4F4;
  --kt-border-dashed:#E1E3EA;
  --kt-text:#181C32;
  --kt-text-2:#5E6278;
  --kt-muted:#A1A5B7;
  --kt-input:#F9F9F9;
  /* sidebar */
  --kt-sb-bg:#1E1E2D;
  --kt-sb-text:#9D9DA6;
  --kt-sb-icon:#C5C5D8;
  --kt-sb-active:#2A2A3C;
  --kt-sb-label:#646477;
  --kt-sb-dash:#393945;
  /* layout */
  --kt-sb-w:250px;
  --kt-tb-h:70px;
  --kt-radius:8px;         /* cards */
  --kt-radius-sm:6px;      /* buttons, inputs, avatars */
  --kt-shadow:0 0 20px 0 rgba(76,87,125,.02);
  --kt-shadow-drop:0 0 50px 0 rgba(82,63,105,.15);
}
[data-theme="dark"]{
  --kt-primary-light:rgba(26,86,219,.16);
  --kt-success-light:rgba(80,205,137,.14);
  --kt-danger-light:rgba(241,65,108,.14);
  --kt-warning-light:rgba(255,199,0,.12);
  --kt-info-light:rgba(114,57,234,.14);
  --kt-page:#151521;
  --kt-surface:#1E1E2D;
  --kt-border:#2B2B40;
  --kt-border-dashed:#323248;
  --kt-text:#FFFFFF;
  --kt-text-2:#CDCDDE;
  --kt-muted:#565674;
  --kt-input:#1B1B29;
  --kt-shadow:none;
}

/* ============================ base ============================ */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body.kt{
  margin:0; background:var(--kt-page); color:var(--kt-text);
  font-family:Inter,Helvetica,"Segoe UI",sans-serif; font-size:13px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body.kt a{ color:var(--kt-primary); text-decoration:none; }
body.kt a:hover{ color:var(--kt-primary-active); }
.kt h1,.kt h2,.kt h3,.kt h4,.kt h5{ margin:0; color:var(--kt-text); font-weight:600; }

/* ============================ layout ============================ */
.kt-sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--kt-sb-w); z-index:100;
  background:var(--kt-sb-bg); display:flex; flex-direction:column;
  transition:transform .25s ease;
}
.kt-main{ margin-left:var(--kt-sb-w); min-height:100vh; display:flex; flex-direction:column; }
.kt-content{ padding:24px 28px 40px; flex:1; }
@media (max-width:991px){
  .kt-sidebar{ transform:translateX(-100%); }
  body.kt.sb-open .kt-sidebar{ transform:none; box-shadow:var(--kt-shadow-drop); }
  .kt-main{ margin-left:0; }
}

/* ============================ sidebar ============================ */
.kt-sb-brand{
  height:var(--kt-tb-h); display:flex; align-items:center; gap:10px; padding:0 20px;
  border-bottom:1px dashed var(--kt-sb-dash); flex:0 0 auto;
}
.kt-sb-brand .mark{ width:28px; height:28px; flex:0 0 auto; }
.kt-sb-brand b{ color:#fff; font-size:18px; font-weight:700; letter-spacing:-.01em; }
.kt-sb-menu{ flex:1; overflow-y:auto; padding:10px 10px 20px; }
.kt-sb-menu::-webkit-scrollbar{ width:5px; }
.kt-sb-menu::-webkit-scrollbar-thumb{ background:#323248; border-radius:3px; }
.kt-sb-label{
  padding:16px 12px 6px; font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--kt-sb-label);
}
.kt-sb-item{
  display:flex; align-items:center; gap:11px; padding:9px 12px; margin:1px 0;
  border-radius:var(--kt-radius-sm); color:var(--kt-sb-text); font-size:13px; font-weight:500;
  transition:color .2s ease, background .2s ease;
}
.kt-sb-item i{ width:17px; text-align:center; font-size:14px; color:var(--kt-sb-icon); transition:color .2s ease; }
.kt-sb-item:hover{ color:#fff; }
.kt-sb-item:hover i{ color:#fff; }
.kt-sb-item.active{ background:var(--kt-sb-active); color:#fff; }
.kt-sb-item.active i{ color:#fff; }
/* Hidden-by-privileges links read as BLOCKED (Karim 2026-07-17): red tint +
   ban icon, not just dim — allowed links keep the normal theme colour. */
.kt-sb-item.disabled{ opacity:.55; pointer-events:none; color:#F1416C; }
.kt-sb-item.disabled i{ color:#F1416C; opacity:.8; }
.kt-sb-item.disabled::after{
  content:'\f05e';               /* fa-ban */
  font-family:'Font Awesome 6 Free'; font-weight:900;
  margin-left:auto; font-size:10px; color:#F1416C; opacity:.9;
}
.kt-sb-item .soon{
  margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background:rgba(255,255,255,.06); color:var(--kt-sb-label); border-radius:4px; padding:2px 6px;
}

/* ============================ topbar ============================ */
.kt-topbar{
  height:var(--kt-tb-h); background:var(--kt-surface); display:flex; align-items:center;
  gap:12px; padding:0 28px; position:sticky; top:0; z-index:90;
  border-bottom:1px solid var(--kt-border);
}
.kt-burger{ display:none; }
@media (max-width:991px){
  .kt-burger{ display:grid; }
}
.kt-tb-title{ display:flex; flex-direction:column; justify-content:center; min-width:0; }
.kt-tb-title h2{ font-size:17px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kt-tb-crumb{ font-size:12px; color:var(--kt-muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kt-tb-crumb b{ color:var(--kt-text-2); font-weight:500; }
.kt-tb-spacer{ flex:1; }
.kt-iconbtn{
  width:38px; height:38px; border:none; background:transparent; border-radius:var(--kt-radius-sm);
  display:grid; place-items:center; color:var(--kt-muted); cursor:pointer; position:relative;
  transition:background .15s ease, color .15s ease; font-size:15px;
}
.kt-iconbtn:hover{ background:var(--kt-primary-light); color:var(--kt-primary); }
.kt-avatar{
  width:38px; height:38px; border-radius:var(--kt-radius-sm); cursor:pointer; border:none; padding:0;
  background:var(--kt-primary); color:#fff;
  font-weight:700; font-size:14px; display:grid; place-items:center;
}
/* avatar dropdown */
.kt-user{ position:relative; }
.kt-user-menu{
  position:absolute; right:0; top:calc(100% + 10px); min-width:230px; z-index:120;
  background:var(--kt-surface); border:1px solid var(--kt-border); border-radius:var(--kt-radius);
  box-shadow:var(--kt-shadow-drop); padding:6px; display:none;
}
.kt-user.open .kt-user-menu{ display:block; }
.kt-user-head{ padding:12px 14px; border-bottom:1px dashed var(--kt-border-dashed); margin-bottom:6px; }
.kt-user-head b{ display:block; font-size:13.5px; color:var(--kt-text); }
.kt-user-head span{ font-size:11.5px; color:var(--kt-muted); }
.kt-user-item{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--kt-radius-sm);
  color:var(--kt-text-2); font-size:12.5px; font-weight:500;
}
.kt-user-item i{ width:15px; text-align:center; color:var(--kt-muted); }
.kt-user-item:hover{ background:var(--kt-primary-light); color:var(--kt-primary); }
.kt-user-item:hover i{ color:var(--kt-primary); }
.kt-user-item.danger:hover{ background:var(--kt-danger-light); color:var(--kt-danger); }
.kt-user-item.danger:hover i{ color:var(--kt-danger); }

/* ============================ cards ============================ */
.kt-card{
  background:var(--kt-surface); border:1px solid var(--kt-border); border-radius:var(--kt-radius);
  box-shadow:var(--kt-shadow);
}
.kt-card-header{
  min-height:60px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 24px; border-bottom:1px solid var(--kt-border);
}
.kt-card-title{ font-size:15px; font-weight:600; color:var(--kt-text); }
.kt-card-title small{ display:block; font-size:12px; font-weight:400; color:var(--kt-muted); margin-top:1px; }
.kt-card-body{ padding:20px 24px; }

/* ============================ buttons ============================ */
.kt-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  border:1px solid transparent; border-radius:var(--kt-radius-sm); font-family:inherit;
  font-size:13.5px; font-weight:500; padding:9px 18px; line-height:1.5; transition:.15s ease;
  text-decoration:none;
}
.kt-btn-primary{ background:var(--kt-primary); color:#fff; }
.kt-btn-primary:hover{ background:var(--kt-primary-active); color:#fff; }
.kt-btn-light-primary{ background:var(--kt-primary-light); color:var(--kt-primary); }
.kt-btn-light-primary:hover{ background:var(--kt-primary); color:#fff; }
.kt-btn-light-danger{ background:var(--kt-danger-light); color:var(--kt-danger); }
.kt-btn-light-danger:hover{ background:var(--kt-danger); color:#fff; }
.kt-btn-light-success{ background:var(--kt-success-light); color:var(--kt-success); }
.kt-btn-light-success:hover{ background:var(--kt-success); color:#fff; }
.kt-btn-lg{ padding:12px 22px; font-size:14.5px; }
.kt-btn-block{ width:100%; }
.kt-btn:disabled{ opacity:.55; cursor:not-allowed; }

/* ============================ forms ============================ */
.kt-label{ display:block; font-size:12px; font-weight:600; color:var(--kt-text); margin-bottom:6px; }
.kt-input{
  width:100%; background:var(--kt-input); border:1px solid var(--kt-input);
  border-radius:var(--kt-radius-sm); padding:11px 14px; font-family:inherit; font-size:13.5px;
  color:var(--kt-text-2); outline:none; transition:.15s ease;
}
.kt-input::placeholder{ color:var(--kt-muted); }
.kt-input:focus{ background:var(--kt-surface); border-color:var(--kt-primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--kt-primary) 20%, transparent); }
.kt-input.error{ border-color:var(--kt-danger); }
.kt-field-error{ display:flex; align-items:center; gap:6px; color:var(--kt-danger); font-size:11.5px; font-weight:500; margin-top:6px; }
.kt-check{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--kt-text-2); cursor:pointer; }
.kt-check input{ accent-color:var(--kt-primary); width:15px; height:15px; cursor:pointer; }

/* alerts */
.kt-alert{ display:flex; align-items:center; gap:9px; padding:11px 14px; border-radius:var(--kt-radius-sm); font-size:12.5px; margin-bottom:14px; }
.kt-alert.danger{ background:var(--kt-danger-light); color:var(--kt-danger); border:1px dashed color-mix(in srgb,var(--kt-danger) 30%, transparent); }
.kt-alert.success{ background:var(--kt-success-light); color:#2ba579; border:1px dashed color-mix(in srgb,var(--kt-success) 35%, transparent); }
.kt-alert.warning{ background:var(--kt-warning-light); color:#b48a00; border:1px dashed color-mix(in srgb,var(--kt-warning) 40%, transparent); }

/* ============================ badges / pills ============================ */
.kt-badge{ display:inline-flex; align-items:center; font-size:11px; font-weight:600; border-radius:4px; padding:3px 8px; }
.kt-badge.b-primary{ background:var(--kt-primary-light); color:var(--kt-primary); }
.kt-badge.b-success{ background:var(--kt-success-light); color:var(--kt-success); }
.kt-badge.b-danger{ background:var(--kt-danger-light); color:var(--kt-danger); }
.kt-badge.b-warning{ background:var(--kt-warning-light); color:#b48a00; }
.kt-badge.b-info{ background:var(--kt-info-light); color:var(--kt-info); }
.kt-badge.b-muted{ background:var(--kt-page); color:var(--kt-muted); }

/* ============================ table ============================ */
.kt-table{ width:100%; border-collapse:collapse; font-size:13px; }
.kt-table th{
  text-align:left; padding:9px 10px; font-size:10.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--kt-muted); border-bottom:1px solid var(--kt-border);
}
.kt-table td{ padding:11px 10px; border-bottom:1px dashed var(--kt-border-dashed); color:var(--kt-text-2); }
.kt-table tr:last-child td{ border-bottom:none; }
.kt-table .num{ font-variant-numeric:tabular-nums; }
.kt-table .strong{ color:var(--kt-text); font-weight:600; }

/* ============================ KPI stat ============================ */
.kt-kpis{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
@media (max-width:1200px){ .kt-kpis{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .kt-kpis{ grid-template-columns:repeat(2,1fr); } }
.kt-kpi{ padding:18px 20px; }
.kt-kpi .row1{ display:flex; align-items:center; justify-content:space-between; }
.kt-kpi .lab{ font-size:11.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--kt-muted); }
.kt-kpi .chip{ width:36px; height:36px; border-radius:var(--kt-radius-sm); display:grid; place-items:center; font-size:14px; }
.kt-kpi .val{ font-size:26px; font-weight:700; letter-spacing:-.01em; margin-top:10px; font-variant-numeric:tabular-nums; color:var(--kt-text); }
.kt-kpi .sub{ font-size:11.5px; color:var(--kt-muted); margin-top:2px; }
.kt-kpi .sub b{ color:var(--kt-success); }

/* ============================ misc ============================ */
.kt-sep-dashed{ border:none; border-top:1px dashed var(--kt-border-dashed); margin:14px 0; }
.kt-grid-2{ display:grid; grid-template-columns:1.7fr 1fr; gap:16px; align-items:start; }
@media (max-width:991px){ .kt-grid-2{ grid-template-columns:1fr; } }
.kt-pagehead{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.kt-pagehead h1{ font-size:21px; font-weight:700; letter-spacing:-.015em; }
.kt-pagehead p{ margin:3px 0 0; font-size:12.5px; color:var(--kt-muted); }
.kt-bars{ display:flex; align-items:flex-end; gap:10px; height:140px; margin-top:14px; }
.kt-bars .col{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; height:100%; }
.kt-bars .bar{ background:var(--kt-primary-light); border-radius:5px 5px 2px 2px; min-height:3px; transition:height .4s; }
.kt-bars .col:last-child .bar{ background:var(--kt-primary); }
.kt-bars small{ text-align:center; color:var(--kt-muted); font-size:10px; font-variant-numeric:tabular-nums; }
.kt-stack{ display:flex; height:12px; border-radius:20px; overflow:hidden; background:var(--kt-page); margin:14px 0 12px; }
.kt-stack span{ height:100%; }
.kt-legend{ display:flex; flex-direction:column; gap:9px; font-size:12.5px; color:var(--kt-text-2); }
.kt-legend div{ display:flex; align-items:center; gap:8px; }
.kt-legend i{ width:10px; height:10px; border-radius:3px; }
.kt-legend b{ margin-left:auto; color:var(--kt-text); font-variant-numeric:tabular-nums; }

/* products launchpad */
.kt-prods{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
@media (max-width:1100px){ .kt-prods{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .kt-prods{ grid-template-columns:1fr; } }
.kt-prod{ padding:18px; position:relative; display:block; transition:.15s ease; }
a.kt-prod:hover{ border-color:var(--kt-primary); transform:translateY(-2px); }
.kt-prod .pi{ width:40px; height:40px; border-radius:var(--kt-radius-sm); display:grid; place-items:center; font-size:16px; margin-bottom:12px; }
.kt-prod .pt{ font-size:14px; font-weight:600; color:var(--kt-text); }
.kt-prod .pd{ font-size:11.5px; color:var(--kt-muted); margin-top:3px; }
.kt-prod .stat{ position:absolute; top:14px; right:14px; }

/* ============================ auth pages ============================ */
body.kt-auth{
  margin:0; min-height:100vh; display:grid; place-items:center; padding:24px;
  background:var(--kt-surface); color:var(--kt-text);
  font-family:Inter,Helvetica,"Segoe UI",sans-serif; font-size:13px;
}
[data-theme="dark"] body.kt-auth{ background:var(--kt-page); }
.kt-auth-card{ width:100%; max-width:400px; }
.kt-auth-brand{ display:flex; flex-direction:column; align-items:center; margin-bottom:28px; }
.kt-auth-brand .mark{ width:56px; height:56px; }
.kt-auth-brand b{ font-size:26px; font-weight:800; letter-spacing:-.02em; margin-top:12px; color:var(--kt-text); }
.kt-auth-brand span{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--kt-muted); margin-top:4px; }
.kt-auth-title{ text-align:center; margin-bottom:22px; }
.kt-auth-title h1{ font-size:20px; font-weight:700; }
.kt-auth-title p{ margin:4px 0 0; font-size:12.5px; color:var(--kt-muted); }
.kt-auth-wide{ max-width:980px; width:100%; }
.kt-pick-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px; margin-top:20px; }
.kt-pick{
  background:var(--kt-surface); border:1px solid var(--kt-border); border-radius:var(--kt-radius);
  box-shadow:var(--kt-shadow); padding:20px; display:flex; flex-direction:column; gap:12px; transition:.15s ease;
}
[data-theme="dark"] .kt-pick{ background:var(--kt-surface); }
.kt-pick:hover{ border-color:var(--kt-primary); transform:translateY(-2px); }
.kt-pick .ic{ width:42px; height:42px; border-radius:var(--kt-radius-sm); background:var(--kt-primary-light); color:var(--kt-primary); display:grid; place-items:center; font-size:17px; }
.kt-pick .k{ font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--kt-muted); }
.kt-pick .t{ font-size:15px; font-weight:600; color:var(--kt-text); margin-top:1px; }
.kt-auth-corner{ position:fixed; top:18px; right:18px; display:flex; gap:8px; z-index:50; }
.kt-auth-page{ background:var(--kt-page) !important; }


/* ══ DigiSail density knob (Karim 2026-07-09): at 100% browser zoom the app should read
   compact/dense like the approved sample (old shell used body zoom:80%). ONE place to tune. */
body.kt { zoom: 0.85; }