/* ============================================================
   MWM — Maintenance Windows Management
   Design system v2 · RTL-safe (logical properties only)
   No external dependencies · system font stack
   ============================================================
   Index:
   01. Tokens (:root)
   02. Base / reset / typography
   03. Focus visibility
   04. Topbar (brand, chips, lang-switch, user)
   05. Subnav
   06. Layout (.wrap, .head-row, grids)
   07. Buttons & links
   08. Cards & forms (.card, .settings-box, .rolebox, .checkrow)
   09. Tables (.grid, .table-wrap, .row-actions)
   10. Pills & status (MDT lifecycle)
   11. Flash messages
   12. Dashboard tiles (.cards, .card-tile)
   13. Hero & login
   14. Empty state
   15. Misc (changelog, version badge, impact-domain)
   16. Responsive (≤720px)
   ============================================================ */

/* ---------- 01. Tokens ---------- */
:root{
  /* Brand — green */
  --brand-050:#EAF7F0;
  --brand-100:#D2EEDF;
  --brand:#0A7D3C;
  --brand-600:#086A33;
  --brand-700:#065628;

  /* Neutrals */
  --bg:#F6F7F9;
  --surface:#FFFFFF;
  --ink:#111827;
  --muted:#57606C;           /* AA on white */
  --line:#E4E7EC;
  --line-soft:#EEF0F3;
  --field:#FCFCFD;

  /* Semantic (bg + fg pairs) */
  --success-bg:#EAF7F0; --success-fg:#086A33;
  --warn-bg:#FEF4DC;    --warn-fg:#8A5A00;
  --danger-bg:#FDECEC;  --danger-fg:#B42318;
  --info-bg:#E8F1FD;    --info-fg:#175CD3;
  --danger:#DC2626;

  /* MDT lifecycle status tokens */
  --st-drafted-bg:#EEF1F4;   --st-drafted-fg:#4B5563;   /* gris */
  --st-submitted-bg:#FEF3D6; --st-submitted-fg:#92610A; /* ámbar */
  --st-scheduled-bg:#E4EFFD; --st-scheduled-fg:#175CD3; /* azul */
  --st-executed-bg:#F0EAFB;  --st-executed-fg:#6D28D9;  /* violeta */
  --st-closed-bg:#E4F4EB;    --st-closed-fg:#0A7D3C;    /* verde marca */
  --st-cancelled-bg:#FDE9E8; --st-cancelled-fg:#B42318; /* rojo */

  /* Spacing — base 4 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;

  /* Radii */
  --r-sm:8px; --r-md:10px; --r-lg:12px;

  /* Elevation */
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.07);
  --shadow-lift:0 6px 16px rgba(16,24,40,.10);

  --transition:120ms ease;
}

/* ---------- 02. Base / reset / typography ---------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,
       "Noto Sans","Segoe UI Emoji",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--brand-600);text-decoration:none;transition:color var(--transition);}
a:hover{text-decoration:underline;}
h1{font-size:24px;font-weight:700;margin:0 0 var(--sp-1);letter-spacing:-.015em;}
h2{font-size:17px;font-weight:650;margin:var(--sp-6) 0 var(--sp-3);letter-spacing:-.01em;}
h3{
  font-size:12px;font-weight:700;margin:var(--sp-6) 0 var(--sp-2);
  color:var(--muted);text-transform:uppercase;letter-spacing:.06em;
}
p{margin:0 0 var(--sp-3);}
hr{border:0;border-block-start:1px solid var(--line);margin:var(--sp-2) 0;}
code{
  background:var(--line-soft);
  border:1px solid var(--line);
  padding:1px 6px;border-radius:6px;
  font-size:.86em;
  font-family:ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,Menlo,monospace;
}
small{font-size:12.5px;}
.muted{color:var(--muted);}

/* ---------- 03. Focus visibility ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

/* ---------- 04. Topbar ---------- */
.topbar{
  position:sticky;inset-block-start:0;z-index:10;
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-6);
  background:var(--surface);
  border-block-end:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.brand{
  display:flex;align-items:center;gap:9px;
  font-weight:700;color:var(--ink);letter-spacing:-.01em;
}
.brand:hover{text-decoration:none;color:var(--brand-700);}
.brand-mark{
  display:grid;place-items:center;
  width:28px;height:28px;border-radius:var(--r-sm);
  background:linear-gradient(160deg,var(--brand) 0%,var(--brand-700) 100%);
  color:#fff;font-weight:800;font-size:14px;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.12);
}
.brand-logo{
  height:28px;max-width:120px;object-fit:contain;
  border-radius:var(--r-sm);background:#fff;padding:2px 4px;
}
.chip{
  font-size:12px;font-weight:500;color:var(--muted);
  background:var(--line-soft);border:1px solid var(--line);
  padding:3px 10px;border-radius:999px;white-space:nowrap;
}
.chip.platform{
  color:var(--brand-700);background:var(--brand-050);border-color:var(--brand-100);
}
.spacer{margin-inline-start:auto;}
.user{font-size:13px;color:var(--muted);}

/* Language switch */
.lang-switch{display:flex;align-items:center;gap:2px;}
.lang-switch a{
  font-size:11.5px;font-weight:600;letter-spacing:.04em;
  color:var(--muted);
  padding:4px 8px;border-radius:var(--r-sm);
  transition:background var(--transition),color var(--transition);
}
.lang-switch a:hover{background:var(--line-soft);color:var(--ink);text-decoration:none;}
.lang-switch a.active{background:var(--brand-050);color:var(--brand-700);}

/* ---------- 05. Subnav ---------- */
.subnav{
  display:flex;gap:var(--sp-1);
  padding:0 var(--sp-6);
  background:var(--surface);
  border-block-end:1px solid var(--line);
}
.subnav a{
  padding:11px 14px;font-size:14px;font-weight:500;
  color:var(--muted);
  border-block-end:2px solid transparent;
  transition:color var(--transition),border-color var(--transition);
}
.subnav a:hover{color:var(--ink);text-decoration:none;}
.subnav a.active{color:var(--brand-700);border-block-end-color:var(--brand);}

/* ---------- 06. Layout ---------- */
.wrap{max-width:1240px;margin:var(--sp-8) auto;padding:0 var(--sp-6);}
/* Secondary line under a main cell value (e.g. the phone under a user's name) */
.cell-sub{display:block;font-size:12px;color:var(--muted,#94a3b8);margin-top:2px;}
/* Primary cell (the user's name leads the row) */
.cell-name{font-weight:600;font-size:15px;color:var(--ink);white-space:nowrap;}
.head-row{display:flex;align-items:center;gap:var(--sp-3);margin-block-end:var(--sp-5);}
.head-row h1{margin:0;margin-inline-end:auto;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--sp-4);}
.row2{display:flex;gap:var(--sp-3);}
.row2 label{flex:1;}
.actions-row{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;}
.form-actions{display:flex;gap:var(--sp-3);align-items:center;}

/* ---------- 07. Buttons & links ---------- */
/* The hidden attribute must always win — .btn/.btn-ghost set display and
   would otherwise override it (wizard step buttons rely on this). */
[hidden]{display:none !important;}

/* Calendar drag & drop */
.cal-evt[draggable=true]{cursor:grab;}
.cal-evt[draggable=true]:active{cursor:grabbing;}
td.cal-drop{outline:2px dashed var(--brand);outline-offset:-3px;background:var(--brand-050);}

/* Submit feedback: buttons get .busy while the form is in flight */
button.busy{opacity:.65;pointer-events:none;}
button.busy::after{
  content:"";display:inline-block;width:12px;height:12px;
  margin-inline-start:8px;vertical-align:-1px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--brand);color:#fff;border:1px solid transparent;
  padding:9px 16px;border-radius:var(--r-md);
  font:inherit;font-weight:600;font-size:14px;line-height:1.3;
  cursor:pointer;box-shadow:var(--shadow-sm);
  transition:background var(--transition),box-shadow var(--transition),transform var(--transition);
}
.btn:hover{background:var(--brand-600);text-decoration:none;box-shadow:var(--shadow);}
.btn:active{background:var(--brand-700);transform:translateY(1px);}
.btn-lg{padding:12px 24px;font-size:15px;border-radius:var(--r-md);}
.btn-block{inline-size:100%;}
.btn-danger{background:var(--danger)!important;}
.btn-danger:hover{background:#B91C1C!important;}
.btn-ghost{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  padding:7px 12px;border-radius:var(--r-md);
  font:inherit;font-weight:500;font-size:13px;cursor:pointer;
  transition:background var(--transition),border-color var(--transition);
}
.btn-ghost:hover{background:var(--line-soft);border-color:#D5D9E0;text-decoration:none;}
.link{
  background:none;border:0;color:var(--brand-600);cursor:pointer;
  padding:0;font:inherit;font-size:13px;font-weight:500;
}
.link:hover{text-decoration:underline;}
.link.danger{color:var(--danger-fg);}
.navlink{color:var(--muted);font-size:13px;font-weight:500;}
.navlink:hover{color:var(--brand-700);}

/* ---------- 08. Cards & forms ---------- */
.card{
  display:flex;flex-direction:column;gap:var(--sp-3);
  max-width:400px;
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:var(--sp-6);
}
.card label,
.settings-box label{
  display:flex;flex-direction:column;gap:5px;
  font-size:13px;font-weight:500;color:var(--muted);
}
.settings-box label{margin-block-end:var(--sp-3);}
.card input,.card select,.card textarea,
.settings-box input:not([type=checkbox]),
.settings-box select{
  font:inherit;color:var(--ink);
  padding:9px 12px;
  background:var(--field);
  border:1px solid var(--line);border-radius:var(--r-sm);
  transition:border-color var(--transition),box-shadow var(--transition),background var(--transition);
}
.card input:focus,.card select:focus,.card textarea:focus,
.settings-box input:focus,.settings-box select:focus{
  outline:none;background:var(--surface);
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-050);
}
.card input:disabled{background:var(--line-soft);color:var(--muted);}
.card textarea{resize:vertical;min-block-size:70px;}
.card button[type=submit]{
  align-self:flex-start;
  background:var(--brand);color:#fff;border:1px solid transparent;
  padding:9px 18px;border-radius:var(--r-md);
  font:inherit;font-weight:600;font-size:14px;cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:background var(--transition);
}
.card button[type=submit]:hover{background:var(--brand-600);}
.card .btn-block{align-self:stretch;}

.settings-box{
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:var(--sp-5) var(--sp-6);
  margin-block-end:var(--sp-5);
  max-width:640px;
}
.settings-box h2{margin:0 0 var(--sp-4);font-size:16px;}
.settings-box .btn-ghost{margin-block-start:var(--sp-2);margin-inline-end:var(--sp-2);}

.rolebox{
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-4);margin:0;
  display:flex;flex-direction:column;gap:10px;
  background:var(--field);
}
.rolebox legend{
  font-size:11.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;
  padding:0 var(--sp-1);
}
.checkrow{
  flex-direction:row!important;align-items:center;gap:var(--sp-2);
  color:var(--ink)!important;font-weight:500;cursor:pointer;
}
.checkrow input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;}
.inline-form{display:flex;gap:6px;align-items:center;margin:0;}
.inline-form select{
  font:inherit;padding:8px 10px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);
}

/* ---------- 09. Tables ---------- */
.table-wrap{
  overflow-x:auto;
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.table-wrap .grid{border:0;border-radius:0;box-shadow:none;}
.grid{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow);
}
.grid th,.grid td{
  text-align:start;
  padding:var(--sp-3) var(--sp-4);
  font-size:14px;
  border-block-end:1px solid var(--line-soft);
  vertical-align:top;
}
.grid td{font-variant-numeric:tabular-nums;}
.grid thead th{
  background:#FAFBFC;color:var(--muted);
  font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.05em;
  border-block-end:1px solid var(--line);
  white-space:nowrap;
}
.grid tbody th{
  color:var(--muted);font-weight:600;font-size:13px;white-space:nowrap;
}
.grid tbody tr:last-child th,
.grid tbody tr:last-child td{border-block-end:0;}
.grid tbody tr{transition:background var(--transition);}
.grid tbody tr:hover{background:#FAFBFC;}
.grid td code{margin-inline-end:2px;}
/* Keep the td a real table cell (flex on a td breaks row layout and clips
   the buttons); lay the actions out inline instead. */
.row-actions{white-space:nowrap;}
.row-actions form{display:inline-block;margin:0;vertical-align:middle;}
.row-actions > a,.row-actions > form{margin-inline-end:6px;}
.row-actions > :last-child{margin-inline-end:0;}
/* Actions as chip buttons instead of bare text links */
.row-actions .link{
  display:inline-block;padding:4px 12px;
  border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--brand-700);
  font-size:12.5px;font-weight:600;line-height:1.5;
  transition:background var(--transition),border-color var(--transition);
}
.row-actions .link:hover{
  background:var(--brand-050);border-color:var(--brand-100);text-decoration:none;
}
.row-actions .link.danger{color:var(--danger-fg);}
.row-actions .link.danger:hover{background:var(--danger-bg);border-color:#F2C4BE;}
/* Status badge with a colored dot (user active/inactive) */
.st-dot{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.7;
}
.st-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
.st-dot.on{background:var(--success-bg);color:var(--success-fg);}
.st-dot.off{background:var(--st-drafted-bg);color:var(--st-drafted-fg);}

/* ---------- 10. Pills & status ---------- */
.pill{
  display:inline-block;
  padding:2px 10px;border-radius:999px;
  font-size:12px;font-weight:600;line-height:1.6;
  white-space:nowrap;
}
.pill.ok{background:var(--success-bg);color:var(--success-fg);}
.pill.off{background:var(--line-soft);color:var(--muted);}

.status{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 10px;border-radius:999px;
  font-size:12px;font-weight:600;line-height:1.7;
  white-space:nowrap;
}
.status::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:currentColor;flex:none;
}
.s-drafted{background:var(--st-drafted-bg);color:var(--st-drafted-fg);}
.s-submitted{background:var(--st-submitted-bg);color:var(--st-submitted-fg);}
.s-scheduled{background:var(--st-scheduled-bg);color:var(--st-scheduled-fg);}
.s-executed{background:var(--st-executed-bg);color:var(--st-executed-fg);}
.s-closed{background:var(--st-closed-bg);color:var(--st-closed-fg);}
.s-cancelled{background:var(--st-cancelled-bg);color:var(--st-cancelled-fg);}
.s-rescheduled{background:var(--st-drafted-bg);color:var(--st-drafted-fg);}

/* ---------- 11. Flash messages ---------- */
.flash{
  background:var(--warn-bg);color:var(--warn-fg);
  border:1px solid var(--line);
  border-inline-start:3px solid var(--warn-fg);
  padding:10px 14px;border-radius:var(--r-md);
  margin-block-end:var(--sp-4);
  font-size:14px;
  box-shadow:var(--shadow-sm);
}
.flash-success{
  background:var(--success-bg);color:var(--success-fg);
  border-inline-start-color:var(--brand);
}
.flash-error{
  background:var(--danger-bg);color:var(--danger-fg);
  border-inline-start-color:var(--danger);
}
.flash-info{
  background:var(--info-bg);color:var(--info-fg);
  border-inline-start-color:var(--info-fg);
}
.flash-message{
  background:var(--warn-bg);color:var(--warn-fg);
  border-inline-start-color:var(--warn-fg);
}

/* ---------- 12. Dashboard tiles ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:var(--sp-4);margin-block-start:var(--sp-5);
}
.card-tile{
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:var(--sp-5);
  position:relative;
}
.card-tile h3{
  margin:0 0 6px;color:var(--ink);
  text-transform:none;letter-spacing:0;
  font-size:15px;font-weight:650;
}
.card-tile p{margin:0;color:var(--muted);font-size:13px;}
.card-tile.disabled{opacity:.6;}
a.card-tile{
  display:block;color:inherit;
  transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition);
}
a.card-tile:hover{
  border-color:var(--brand-100);
  box-shadow:var(--shadow-lift);
  transform:translateY(-2px);
  text-decoration:none;
}
.soon{
  position:absolute;
  inset-block-start:var(--sp-3);inset-inline-end:var(--sp-3);
  font-size:11px;font-weight:600;
  background:var(--line-soft);color:var(--muted);
  padding:2px 8px;border-radius:999px;
}

/* ---------- 13. Hero & login ---------- */
.hero{
  max-width:520px;margin:56px auto;
  text-align:center;
  background:var(--surface);
  border:1px solid var(--line);border-radius:16px;
  box-shadow:0 8px 28px rgba(16,24,40,.08);
  padding:46px 34px;
}
.hero-mark{
  width:58px;height:58px;border-radius:16px;
  background:linear-gradient(160deg,var(--brand) 0%,var(--brand-700) 100%);
  color:#fff;font-weight:800;font-size:27px;
  display:grid;place-items:center;
  margin:0 auto 18px;
  box-shadow:0 4px 12px rgba(10,125,60,.25);
}
.hero-mark.muted-mark{background:#98A2B3;box-shadow:none;}
.hero h1{font-size:26px;margin:0 0 var(--sp-2);}
.hero p{margin:0 0 var(--sp-6);}
.hero .flash{text-align:start;}

.login-card{
  display:block;
  max-width:400px;
  margin-block:8vh auto;
  margin-inline:auto;
  background:var(--surface);
  border:1px solid var(--line);border-radius:16px;
  box-shadow:0 8px 28px rgba(16,24,40,.08);
  padding:var(--sp-8);
  text-align:center;
}
.login-mark{
  width:56px;height:56px;border-radius:14px;
  background:linear-gradient(160deg,var(--brand) 0%,var(--brand-700) 100%);
  color:#fff;font-weight:800;font-size:26px;
  display:grid;place-items:center;
  margin:0 auto var(--sp-4);
  box-shadow:0 4px 12px rgba(10,125,60,.25);
}
.login-card h1{font-size:22px;margin:0 0 var(--sp-1);}
.login-tenant{color:var(--brand-700);}
.login-sub{font-size:13px;margin:0 0 var(--sp-5);}
.login-card form{
  display:flex;flex-direction:column;gap:var(--sp-3);
  margin-block-start:var(--sp-5);
  text-align:start;
}
.login-card label{
  display:flex;flex-direction:column;gap:5px;
  font-size:13px;font-weight:500;color:var(--muted);
}
.login-card input{
  font:inherit;color:var(--ink);
  padding:10px 12px;
  background:var(--field);
  border:1px solid var(--line);border-radius:var(--r-sm);
  transition:border-color var(--transition),box-shadow var(--transition);
}
.login-card input:focus{
  outline:none;background:var(--surface);
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-050);
}
.login-card .btn{margin-block-start:var(--sp-2);}

/* ---------- 14. Empty state ---------- */
.empty-state{
  padding:var(--sp-10);
  text-align:center;
  color:var(--muted);
}
.empty-state h2,.empty-state h3,.empty-state strong{
  display:block;
  font-size:15px;font-weight:650;color:var(--ink);
  text-transform:none;letter-spacing:0;
  margin:0 0 var(--sp-1);
}
.empty-state p{margin:0;color:var(--muted);font-size:13.5px;}

/* ---------- 15. Misc ---------- */
.changelog{
  white-space:pre-wrap;
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:var(--sp-5);
  font-size:13px;
  font-family:ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,Menlo,monospace;
}
.version-badge{
  position:fixed;
  inset-inline-start:var(--sp-4);inset-block-end:var(--sp-4);
  font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums;
  background:var(--surface);
  border:1px solid var(--line);border-radius:999px;
  padding:4px 10px;
  box-shadow:var(--shadow);
  transition:color var(--transition),border-color var(--transition);
}
.version-badge:hover{color:var(--brand-700);border-color:var(--brand-100);text-decoration:none;}
.impact-domain{
  margin:var(--sp-5) 0 var(--sp-2);
  font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);
}

/* ---------- 16. Responsive ---------- */
@media (max-width:720px){
  .wrap{padding:0 14px;margin-block:var(--sp-5);}
  .topbar{padding:10px 14px;gap:var(--sp-2);}
  .user{display:none;}
  .subnav{
    padding:0 14px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .subnav::-webkit-scrollbar{display:none;}
  .subnav a{white-space:nowrap;padding:11px 12px;}
  .grid2{grid-template-columns:1fr;}
  .row2{flex-direction:column;}
  .table-wrap{overflow-x:auto;}
  .grid th,.grid td{padding:10px 12px;}
  .head-row{flex-wrap:wrap;}
  .hero{margin:var(--sp-8) auto;padding:34px 22px;}
  .login-card{margin-block:5vh auto;padding:var(--sp-6);}
  .version-badge{display:none;}
}

/* Telegram linked indicator (users list) */
.tg-ico { vertical-align: -2px; margin-inline-start: 4px; }

/* ===== Dashboard: maintenance calendar ===== */
.cal-head{display:flex;align-items:center;gap:10px;margin-block:4px 12px;flex-wrap:wrap}
.cal-title{font-size:17px;min-inline-size:140px;text-align:center}
.cal{width:100%;border-collapse:collapse;table-layout:fixed;background:var(--surface);font-variant-numeric:tabular-nums}
.cal th{padding:8px 6px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-block-end:1px solid var(--line);text-align:center}
.cal td{vertical-align:top;border:1px solid var(--line);padding:4px;block-size:96px;overflow:hidden}
.cal-daynum{display:block;font-size:12px;color:var(--muted);margin-block-end:2px}
.cal-out{background:var(--bg)}
.cal-out .cal-daynum{color:var(--faint)}
.cal-today{outline:2px solid var(--ink);outline-offset:-2px}
.cal-evt{display:block;margin-block-end:2px;padding:1px 6px;border-radius:6px;font-size:11.5px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;transition:filter var(--tr,120ms)}
.cal-evt:hover{filter:brightness(.92)}
.cal-evt.s-drafted{background:var(--st-drafted-bg);color:var(--st-drafted-fg)}
.cal-evt.s-submitted{background:var(--st-submitted-bg);color:var(--st-submitted-fg)}
.cal-evt.s-scheduled{background:var(--st-scheduled-bg);color:var(--st-scheduled-fg)}
.cal-evt.s-executed{background:var(--st-executed-bg);color:var(--st-executed-fg)}
.cal-evt.s-closed{background:var(--st-closed-bg);color:var(--st-closed-fg)}
.cal-evt.s-cancelled{background:var(--st-cancelled-bg);color:var(--st-cancelled-fg)}
.cal-evt.s-rescheduled{background:var(--st-drafted-bg);color:var(--st-drafted-fg)}
.cal-legend{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-block:10px 22px}

/* Subnav + topbar hover feedback */
.subnav a{transition:background 120ms, color 120ms;border-radius:8px}
.subnav a:hover{background:var(--brand-050);color:var(--brand-700)}
.lang-switch a:hover{background:var(--brand-050);color:var(--brand-700)}
a.user:hover{color:var(--brand-600);text-decoration:underline}

/* ===== MDT lifecycle stepper (timeline with dots) ===== */
.tl-wrap{margin-block:18px 22px;border:0}
.tl{display:flex;min-inline-size:640px}
.tl-step{flex:1;min-inline-size:110px;padding-inline-end:8px}
.tl-track{display:flex;align-items:center;block-size:14px;margin-block-end:6px}
.tl-track::after{content:"";flex:1;block-size:3px;background:var(--line-strong,#D3D8DF);border-radius:2px;margin-inline-start:4px}
.tl-step:last-child .tl-track::after{display:none}
.tl-dot{inline-size:14px;block-size:14px;border-radius:50%;background:#fff;border:3px solid var(--line-strong,#D3D8DF);flex:none}
.tl-step.done .tl-dot{background:#D92D20;border-color:#D92D20}
.tl-step.done .tl-track::after{background:#D92D20}
.tl-step.next .tl-dot{border-color:#D92D20;box-shadow:0 0 0 3px rgba(217,45,32,.15)}
.tl-step.cancelled .tl-dot{background:#7A271A;border-color:#7A271A}
.tl-step.skipped{opacity:.45}
.tl-label{font-size:13px;font-weight:700;color:var(--ink)}
.tl-step.todo .tl-label,.tl-step.skipped .tl-label{color:var(--muted);font-weight:600}
.tl-when{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.tl-next{color:#D92D20;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.tl-items{list-style:none;margin:6px 0 0;padding:0;font-size:11px;line-height:1.7;color:var(--muted)}
.tl-items li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%}

/* Calendar: click a day to add an MDT on that date */
.cal-daynum{text-decoration:none;color:var(--muted)}
a.cal-daynum{display:flex;align-items:center;gap:4px}
.cal-plus{opacity:0;font-weight:700;color:var(--brand-600);transition:opacity 120ms}
.cal td:hover .cal-plus{opacity:1}
.cal td:hover{background:var(--brand-050)}
.cal td.cal-out:hover{background:var(--bg)}

/* Saudi holidays overlay */
.cal td.cal-holiday{background:#FBF3E4}
.cal td.cal-holiday:hover{background:#F6E8CC}
.cal-holname{display:block;font-size:10.5px;color:#8A5B00;font-weight:600;margin-block-end:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hol-toggle.on{color:var(--brand-700);background:var(--brand-050)}

/* Dashboard queues */
.queues{margin-block:6px 20px}
.queue-row{display:flex;align-items:baseline;gap:8px;padding-block:6px;border-block-end:1px solid var(--line);flex-wrap:wrap}
.queue-row:last-child{border-block-end:0}
.queue-refs a{font-weight:600;text-decoration:none;color:var(--brand-600);margin-inline-end:2px}
.queue-refs a:hover{text-decoration:underline}

/* Stats page */
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-block:14px 22px}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg,12px);padding:14px 16px;text-align:center}
.stat-num{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.stat-label{font-size:12px;color:var(--muted);margin-block-start:2px}
.stat-card.ok .stat-num{color:var(--success-fg,#0B6D36)}
.stat-card.warn .stat-num{color:var(--warn-fg,#8A5B00)}
.stat-card.bad .stat-num{color:var(--danger-fg,#B42323)}

/* ICS subscribe popover */
.ics-box{position:relative}
.ics-box summary{list-style:none;cursor:pointer;display:inline-block}
.ics-box summary::-webkit-details-marker{display:none}
.ics-pop{position:absolute;inset-inline-end:0;inset-block-start:110%;z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(16,24,40,.12);padding:12px;min-inline-size:340px}
.ics-pop input{inline-size:100%;font-size:12px;font-family:monospace;padding:6px 8px;border:1px solid var(--line);border-radius:8px}

/* MDT creation wizard */
.wiz-bar{margin-block:10px 18px;min-inline-size:0;flex-wrap:wrap}
.wiz-bar .tl-step{min-inline-size:90px}

/* Weekend tint (per-tenant setting) */
.cal td.cal-weekend{background:#EEF2F7}
.cal td.cal-weekend:hover{background:#E3EAF3}
.cal td.cal-weekend .cal-daynum{color:#7A8699}
/* holiday wins visually over weekend */
.cal td.cal-holiday{background:#FBF3E4}