/* ============================================================================
   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 = Metronic electric blue #009EF7 (matches the standard-theme
   sample). To use Umbra royal blue instead: set --kt-primary:#1a56db,
   hover #1544b0, light #eef3fd — one place, below.
   ============================================================================ */

:root{
  /* brand */
  --kt-primary:#009EF7;          /* Metronic electric blue — matches the sample */
  --kt-primary-active:#0095E8;   /* hover/active */
  --kt-primary-light:#F1FAFF;    /* soft bg (chips, light buttons) */
  --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;
  /* darker "ink" for text/badges/light-buttons ON the light tints above —
     the bright semantics fail WCAG on their own tint (mint 1.9:1, blue 2.75:1).
     Solid fills keep the bright colour; only text-on-light uses -ink. */
  --kt-primary-ink:#0068ad;
  --kt-success-ink:#12805a;
  --kt-danger-ink:#c81e54;
  --kt-info-ink:#5b1fbf;
  --kt-warning-ink:#8a6900;
  /* 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(0,158,247,.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);
  /* on dark tints, text should be the BRIGHT semantic (dark ink would vanish) */
  --kt-primary-ink:var(--kt-primary);
  --kt-success-ink:var(--kt-success);
  --kt-danger-ink:var(--kt-danger);
  --kt-info-ink:var(--kt-info);
  --kt-warning-ink:#FFC700;
  --kt-page:#151521;
  --kt-surface:#1E1E2D;
  --kt-border:#2B2B40;
  --kt-border-dashed:#323248;
  --kt-text:#FFFFFF;
  --kt-text-2:#CDCDDE;
  --kt-muted:#8A8AA3;   /* was #565674 — only 2.33:1 on the dark surface */
  --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;
  zoom:0.85;   /* matches DigiSail360 density (13px + 0.85) — whole UI uniform (fonts+spacing+icons) */
}
/* Link colour must NOT hit anchors that are styled as buttons (.kt-btn) — else
   an <a class="kt-btn kt-btn-primary"> gets blue text on a blue bg (invisible).
   :not(.kt-btn) keeps buttons on their own text colour (#fff / semantic). */
body.kt a:not(.kt-btn){ color:var(--kt-primary); text-decoration:none; }
body.kt a:not(.kt-btn):hover{ color:var(--kt-primary-active); }
body.kt a.kt-btn{ text-decoration:none; }
.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; }
.kt-sb-item.disabled{ opacity:.4; pointer-events:none; }
.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; }
}
/* company logo + slogan (left of the breadcrumb) */
.kt-tb-co{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.kt-tb-co-mark{ width:40px; height:40px; flex:0 0 auto; border-radius:var(--kt-radius-sm); overflow:hidden;
  background:var(--kt-primary-light); color:var(--kt-primary); display:grid; place-items:center; font-weight:800; font-size:16px; }
.kt-tb-co-mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.kt-tb-co-logo{ height:38px; width:auto; max-width:190px; object-fit:contain; display:block; }
.kt-tb-co-txt{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.kt-tb-co-txt b{ font-size:14px; font-weight:700; color:var(--kt-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.kt-tb-co-txt span{ font-size:9.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--kt-muted); }
/* group / company breadcrumb */
.kt-tb-crumb{ font-size:13px; color:var(--kt-muted); white-space:nowrap; padding-left:16px; margin-left:6px; border-left:1px solid var(--kt-border); }
.kt-tb-crumb .sep{ margin:0 3px; opacity:.6; }
.kt-tb-crumb b{ color:var(--kt-text-2); font-weight:600; }
.kt-tb-spacer{ flex:1; }
/* search */
.kt-tb-search{ display:flex; align-items:center; gap:9px; flex:0 1 320px; max-width:34vw;
  background:var(--kt-input); border:1px solid transparent; border-radius:var(--kt-radius-sm); padding:9px 14px; transition:.15s ease; }
.kt-tb-search i{ color:var(--kt-muted); font-size:13px; }
.kt-tb-search input{ border:none; background:none; outline:none; font-family:inherit; font-size:13px; color:var(--kt-text); width:100%; }
.kt-tb-search input::placeholder{ color:var(--kt-muted); }
.kt-tb-search:focus-within{ background:var(--kt-surface); border-color:var(--kt-primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--kt-primary) 18%, transparent); }
/* notification dot on the bell */
.kt-dot{ position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--kt-danger); border:1.5px solid var(--kt-surface); }
/* responsive: shed the non-essential bits on narrow screens */
@media (max-width:1100px){ .kt-tb-search{ flex-basis:200px; } .kt-tb-co-txt{ display:none; } }
@media (max-width:860px){ .kt-tb-crumb, .kt-tb-search, .kt-user-txt{ display:none; } }
.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:linear-gradient(135deg,var(--kt-primary),var(--kt-info)); color:#fff;
  font-weight:700; font-size:14px; display:grid; place-items:center;
}
/* user block: name + role text, then avatar (dropdown on the avatar) */
.kt-user{ position:relative; display:flex; align-items:center; gap:11px; }
.kt-user-txt{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; }
.kt-user-txt b{ font-size:13px; font-weight:600; color:var(--kt-text); white-space:nowrap; }
.kt-user-txt span{ font-size:11px; color:var(--kt-muted); }
.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:14px; 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-ink); }
.kt-btn-light-primary:hover{ background:var(--kt-primary); color:#fff; }
.kt-btn-light-danger{ background:var(--kt-danger-light); color:var(--kt-danger-ink); }
.kt-btn-light-danger:hover{ background:var(--kt-danger); color:#fff; }
.kt-btn-light-success{ background:var(--kt-success-light); color:var(--kt-success-ink); }
.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:var(--kt-success-ink); border:1px dashed color-mix(in srgb,var(--kt-success) 35%, transparent); }
.kt-alert.warning{ background:var(--kt-warning-light); color:var(--kt-warning-ink); border:1px dashed color-mix(in srgb,var(--kt-warning) 40%, transparent); }
.kt-alert.danger{ color:var(--kt-danger-ink); }

/* ============================ 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-ink); }
.kt-badge.b-success{ background:var(--kt-success-light); color:var(--kt-success-ink); }
.kt-badge.b-danger{ background:var(--kt-danger-light); color:var(--kt-danger-ink); }
.kt-badge.b-warning{ background:var(--kt-warning-light); color:var(--kt-warning-ink); }
.kt-badge.b-info{ background:var(--kt-info-light); color:var(--kt-info-ink); }
.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:22px; font-weight:700; letter-spacing:-.01em; margin-top:8px; 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-ink); }

/* ============================ 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:18px; 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;
  zoom:0.92;   /* auth pages — slightly smaller to match the HRMS reference scale */
}
[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; }