:root{
  /* Enterprise theme (offline-first) */
  --bg:#f5f7fb;
  --bg2:#eef2f8;
  --panel:#ffffff;
  --panel2:#ffffff;
  --border:#d7dee9;
  --border2:#c8d1e0;
  --text:#0f172a;
  --muted:#6b7280;
  --muted2:#94a3b8;
  --primary:#2563eb;
  --primary2:#1d4ed8;
  --danger:#dc2626;
  --warn:#d97706;
  --ok:#16a34a;

  --shadow: 0 8px 24px rgba(15,23,42,.08);
  --shadow2: 0 2px 10px rgba(15,23,42,.06);

  --radius:14px;
  --radius2:10px;

  --focus: 0 0 0 3px rgba(37,99,235,.18);

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:var(--font);background:linear-gradient(180deg,var(--bg) 0%, var(--bg2) 100%);color:var(--text)}
a{color:inherit}

/* Global enterprise controls */
::selection{background: rgba(37,99,235,.18)}
.card{background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow2);border-radius:var(--radius)}
.pad{padding:16px}
.small{color:var(--muted);font-size:12px}
.muted{color:var(--muted)}
.section-title{font-weight:700;color:var(--text)}
hr{border:0;border-top:1px solid var(--border);margin:12px 0}

/* Buttons */
.btn{border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:12px;padding:10px 12px;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s,transform .06s}
.btn:hover{background:rgba(2,6,23,.02);border-color:var(--border2)}
.btn:active{transform:translateY(1px)}
.btn:focus{outline:none;box-shadow:var(--focus)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary2);border-color:var(--primary2)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.ghost{background:transparent}
.btn.iconbtn{width:38px;height:38px;padding:0;display:grid;place-items:center}
.btn.iconbtn .ico{width:18px;height:18px;display:inline-block;background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;flex:0 0 auto}

/* Inputs */
input,select,textarea{border:1px solid var(--border);border-radius:12px;padding:10px 12px;font:inherit;background:var(--panel);color:var(--text);outline:none;transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{border-color:rgba(37,99,235,.65);box-shadow:var(--focus)}
textarea{resize:vertical}

/* Tables */
table{border-collapse:separate;border-spacing:0;width:100%}
th,td{border-bottom:1px solid var(--border);padding:10px 10px;text-align:left;vertical-align:top}
th{font-size:12px;color:var(--muted);font-weight:700;background:rgba(2,6,23,.02)}
tr:hover td{background:rgba(2,6,23,.015)}

/* Pills / badges */
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;color:var(--text);background:rgba(2,6,23,.02)}
.badge.ok{border-color:rgba(22,163,74,.35);background:rgba(22,163,74,.08);color:#0b3d1f}
.badge.danger{border-color:rgba(220,38,38,.35);background:rgba(220,38,38,.08);color:#5a0b0b}
.badge.warn{border-color:rgba(217,119,6,.35);background:rgba(217,119,6,.08);color:#5a3106}
.badge.muted{background:rgba(2,6,23,.02);color:var(--muted)}

/* Modals */
.modal .panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
.modal .head{border-bottom:1px solid var(--border);padding:14px 16px}
.modal .body{padding:16px}
.btn{appearance:none;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));color:var(--text);padding:10px 12px;border-radius:12px;cursor:pointer;box-shadow:var(--shadow)}
.btn:hover{border-color:rgba(255,255,255,.18)}
.btn.primary{background:linear-gradient(180deg, rgba(var(--accent-rgb,74,163,255),.45), rgba(var(--accent-rgb,74,163,255),.18));border-color:rgba(var(--accent-rgb,74,163,255),.55)}
.btn.danger{background:linear-gradient(180deg, rgba(255,91,110,.45), rgba(255,91,110,.16));border-color:rgba(255,91,110,.55)}
.btn.ghost{box-shadow:none;background:transparent}
.btn.tiny{padding:6px 8px;border-radius:10px;box-shadow:none;font-size:12px;line-height:1}
.input,.select,.textarea,select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  outline:none;
}

/* Date/Time picker icon visibility (Chrome/Edge/Safari)
   NOTE: Some Windows/Edge builds render the calendar icon very dark.
   We force high-contrast so the icon is always visible on our dark UI. */
input[type="date"], .input[type="date"],
input[type="time"], .input[type="time"]{color-scheme:light}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  filter:none;
  opacity: 1;
  cursor: pointer;
}


select option,.select option{
  color:#111;
  background:#fff;
}

/* Ensure select text stays readable in Edge/Windows high-contrast quirks */
select:disabled{opacity:.65;color:var(--text)}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{border-color:rgba(var(--accent-rgb,74,163,255),.6)}
.small{font-size:12px;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);padding:4px 8px;border-radius:999px;font-size:12px;color:var(--muted);background:rgba(255,255,255,.03)}

/* Login */
.auth-wrap{min-height:100%;display:grid;place-items:center;padding:24px}
.auth-card{width:min(980px,100%);display:grid;grid-template-columns:1.05fr .95fr;gap:18px}
@media(max-width:900px){.auth-card{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card.pad{padding:20px}
.h1{font-size:28px;margin:0 0 8px}
.h2{font-size:16px;margin:0 0 10px;color:var(--muted)}
.row{display:flex;gap:10px;align-items:center}

/* Topbar actions (settings + logout) */
.topbar-actions{display:flex;gap:10px;align-items:center}

#mobilePanelToggle{display:none}
.iconbtn{padding:10px 10px;min-width:44px;display:grid;place-items:center}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.err{display:none;margin-top:10px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,91,110,.5);background:rgba(255,91,110,.12);color:#ffd7dc}

/* App layout */
.app{height:100%;display:grid;grid-template-columns:260px 1fr 320px;grid-template-rows:auto 1fr;gap:14px;padding:14px;padding-bottom:92px}
@media(max-width:1100px){.app{grid-template-columns:240px 1fr;grid-template-rows:auto auto 1fr;}.right{grid-column:1/-1;grid-row:2}.main{grid-column:1/-1;grid-row:3}}
.topbar{grid-column:1/-1;display:grid;grid-template-columns:260px 1fr auto;align-items:center;gap:12px}
.topbar-center{display:flex;justify-content:center;align-items:center;min-width:0}
.topbrand{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
@media(max-width:1100px){.topbar{grid-template-columns:1fr auto}.topbrand{display:none}.topbar-center{justify-content:flex-start}}

/* === Logo polish (MUMS) === */
.brand-name{
  /* subtle glow so the logo feels "alive" without being distracting */
  text-shadow:
    0 0 10px rgba(110,231,255,.35),
    0 0 18px rgba(167,139,250,.22);
}
.brand-mark{
  box-shadow:
    0 10px 30px rgba(0,0,0,.30),
    0 0 18px rgba(110,231,255,.22),
    0 0 26px rgba(167,139,250,.18),
    inset 0 0 0 1px rgba(255,255,255,.20);
}
.brand-build{
  /* requested: smaller build number (<50%) */
  font-size:6px;
  opacity:.65;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-top:2px;
}
.announce-bar{width:100%;max-width:none;display:flex;flex-direction:row;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.03);cursor:pointer;min-height:52px;min-width:0}
.announce-bar:hover{border-color:rgba(255,255,255,.16)}
.announce-msg{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.announce-title{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.announce-meta{display:none}

.side,.right,.main{min-height:0}
.side.card.pad{display:flex;flex-direction:column;gap:12px}
/* Sidebar user container: keep it transparent so the profile card itself is the single background layer */
.usercard{padding:0;border-radius:0;border:none;background:transparent;position:relative}

/* Sidebar profile (compact by default to maximize nav space) */
.sp-compact{display:flex;gap:10px;align-items:center;padding:10px 8px 8px 8px}
/* Sidebar profile v2: name above avatar; avatar aligned to role badge row */
.sp-compact-v2{flex-direction:column;align-items:stretch;gap:8px}
.sp-name-top{padding-left:2px}
/* Row with avatar + role/shift; align avatar to the role badge row (top) */
.sp-row{display:flex;gap:10px;align-items:flex-start;min-width:0}
.sp-info-row{min-width:0;flex:1 1 auto}
.sp-photo-sm{width:52px;height:52px;border-radius:14px;overflow:hidden;
  border:1px solid var(--border-0, var(--border));
  background:rgba(var(--accent-rgb,74,163,255),.10);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
body[data-mode="light"] .sp-photo-sm{background:rgba(15,23,42,.04)}
.sp-photo-sm img{width:100%;height:100%;object-fit:cover;display:block}
.sp-photo-sm .initials{font-weight:950;color:var(--text-0, var(--text))}
.sp-info{min-width:0;flex:1 1 auto}
.sp-name-sm{font-weight:950;line-height:1.12;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
.sp-role{font-size:10px;font-weight:950;letter-spacing:.10em;text-transform:uppercase;
  padding:4px 8px;border-radius:999px;
  background:rgba(var(--accent-rgb,74,163,255),.10);
  border:1px solid rgba(var(--accent-rgb,74,163,255),.22);
  color:var(--text-0, var(--text))}
.sp-shift-sm{font-size:10px;font-weight:950;letter-spacing:.10em;text-transform:uppercase;color:var(--text-muted, var(--muted))}
.sp-dot{opacity:.6}
.sp-dutyline{margin-top:4px;font-size:11px;font-weight:900;color:var(--text-0, var(--text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-dutyline .muted{color:var(--text-muted, var(--muted))}
.sp-tz{margin-top:3px;font-size:10px;opacity:.65}

/* Bottom quick links bar */
.quicklinks-bar{
  position:fixed;
  left:0;right:0;bottom:0;
  /* Keep bottom bar above all in-page cards so clocks never get clipped behind panels.
     Modals/popovers use higher z-index values. */
  z-index:2000;
  padding:10px 14px;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.28) 40%, rgba(0,0,0,.45));
  backdrop-filter: blur(10px);
}
.quicklinks-inner{max-width:1400px;margin:0 auto;display:flex;justify-content:center;align-items:flex-end;
  /* Bring circles closer together (~30% tighter than previous gap) */
  gap:4px;
  flex-wrap:nowrap}
.qitem{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;min-width:0}
.qlabel{font-size:11px;line-height:1.1;color:var(--muted);max-width:72px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Tooltip for quick link circles */
.qitem[data-tip]:hover::after,.qitem[data-tip]:focus-within::after{content:attr(data-tip);position:absolute;bottom:58px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.82);color:#fff;font-size:11px;padding:6px 8px;border-radius:10px;border:1px solid rgba(255,255,255,.12);white-space:nowrap;pointer-events:none;z-index:100}
.qitem[data-tip]:hover::before,.qitem[data-tip]:focus-within::before{content:"";position:absolute;bottom:50px;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:rgba(0,0,0,.82);pointer-events:none;z-index:100}

@media(max-width:1100px){.quicklinks-inner{flex-wrap:wrap;row-gap:10px}.quicklinks-bar{padding-bottom:14px}}
.qcircle{height:44px;width:44px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.04);display:grid;place-items:center;cursor:pointer;user-select:none;box-shadow:var(--shadow);position:relative}
.qcircle:hover{border-color:rgba(255,255,255,.18)}
.qcircle .qtxt{font-size:12px;color:var(--muted);font-weight:700}
.qcircle.filled{background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));}
.qcircle.filled .qtxt{color:var(--text)}
.qcircle:focus{outline:2px solid rgba(74,163,255,.55);outline-offset:2px}

/* Keep app content from being covered by the bottom bar.
   Increased to account for: quick links labels + circles + world clocks. */
.app{padding-bottom:120px}

/* Theme picker */
.theme-grid{display:grid;grid-template-columns:repeat(5, 1fr);gap:12px}
@media(max-width:900px){.theme-grid{grid-template-columns:repeat(2,1fr)}}
.theme-tile{border:1px solid var(--border);border-radius:16px;padding:12px;background:rgba(255,255,255,.03);cursor:pointer;display:flex;flex-direction:column;gap:10px}

/* =========================================================
   GLOBAL PROPORTIONAL LAYOUT SCALING (v4.2 layout-scale)
   Keep the app shell stable when the viewport shrinks by scaling
   the entire UI (like browser zoom) instead of reflowing columns.
   Scale factor is controlled by CSS variable --app-scale (set in
   public/js/env_runtime.js so it applies to login + app shells).
   ========================================================= */

html{
  --app-scale: 1;
  overflow-x: hidden;
}

body{
  transform: scale(var(--app-scale));
  transform-origin: top left;
  width: calc(100% / var(--app-scale));
  min-height: calc(100vh / var(--app-scale));
  overflow-x: hidden;
}

/* Disable narrow-screen grid reflow that causes "layout shatter".
   We keep the desktop 3-column layout and rely on scaling to fit. */
@media (max-width:1100px) and (min-width: 769px){
  .app{
    grid-template-columns:260px 1fr 320px !important;
    grid-template-rows:auto 1fr !important;
  }
  .side{grid-column:1 !important;grid-row:2 !important;}
  .main{grid-column:2 !important;grid-row:2 !important;}
  .right{grid-column:3 !important;grid-row:2 !important;}

  .topbar{grid-template-columns:260px 1fr auto !important;}
  .topbrand{display:flex !important;}
  .topbar-center{justify-content:center !important;}

  /* Keep quick links structure intact; allow overflow rather than wrap */
  .quicklinks-bar{overflow-x:auto; padding-bottom:10px !important;}
  .quicklinks-inner{flex-wrap:nowrap !important;row-gap:0 !important;}
}
.theme-tile:hover{border-color:rgba(255,255,255,.18)}
.theme-swatch{height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(90deg, var(--sw1), var(--sw2))}
.theme-tile .tname{font-weight:800}
.theme-tile .tmeta{font-size:12px;color:var(--muted)}
.theme-tile.active{border-color:rgba(var(--accent-rgb,74,163,255),.60);box-shadow:0 0 0 2px rgba(74,163,255,.18)}

/* Quick links settings */
.links-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:900px){.links-grid{grid-template-columns:1fr}}
.link-row{border:1px solid var(--border);border-radius:16px;padding:12px;background:rgba(255,255,255,.03)}
.link-row .lr-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.link-row .lr-slot{font-weight:900}
.link-row .lr-actions{display:flex;gap:8px;align-items:center}


.link-actions{display:flex;gap:8px}
.usercard .uc-head{display:flex;gap:12px;align-items:center;justify-content:space-between}
.usercard .uc-left{display:flex;gap:12px;align-items:center;min-width:0}
.usercard .uc-name{
  font-weight:900;
  /* Make long names readable without breaking layout */
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.15;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.usercard .uc-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;
  border:1px solid var(--border-0, var(--border));
  background:rgba(0,0,0,.10);
  font-size:12px;color:var(--text-muted, var(--muted));font-weight:700}
body[data-mode="light"] .pill{background:rgba(15,23,42,.04)}
.avatar{width:44px;height:44px;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);display:grid;place-items:center;flex:0 0 auto}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar .initials{font-weight:900;color:var(--text-0, var(--text))}
.avatar-lg{width:56px;height:56px;border-radius:18px}
.uc-name-lg{font-size:clamp(16px, 1.7vw, 20px)}

/* Profile layout: Full-width banner */
.uc-banner{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:6px 0}
.uc-banner-left{flex:0 0 auto}
.uc-banner-mid{flex:1 1 auto}
.uc-banner-right{flex:0 0 auto}
.uc-banner-stats{margin-top:10px;display:flex;justify-content:space-between;gap:10px;align-items:flex-end}

/* Photo-left profile (MUMS theme) */
.up-badge{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}
.up-photo-col{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px}
.up-role{font-size:12px;font-weight:900;letter-spacing:.08em;padding:6px 10px;border-radius:999px;
  background:rgba(var(--accent-rgb,74,163,255),.10);
  border:1px solid rgba(var(--accent-rgb,74,163,255),.22);
  color:var(--text-0, var(--text));
  text-transform:uppercase}
.up-info{flex:1 1 auto;min-width:0;padding-top:2px}
.up-name{font-weight:900;line-height:1.05;
  font-size:clamp(18px, 2.3vw, 24px);
  word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.up-sub{margin-top:6px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted, var(--muted))}
.up-duty{margin-top:10px;font-size:13px;font-weight:800}
.up-duty .muted{font-weight:700;margin-right:6px}
.up-actions{flex:0 0 auto;padding-top:2px}

/* Sidebar profile (single-layer, centered) */
.sp-wrap{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:6px; padding:10px 6px 6px 6px; text-align:center;
  background:transparent; border:none; box-shadow:none}
.sp-photo{width:74px;height:74px;border-radius:16px;overflow:hidden;
  border:1px solid var(--border-0, var(--border));
  background:rgba(var(--accent-rgb,74,163,255),.10);
  display:flex;align-items:center;justify-content:center}
body[data-mode="light"] .sp-photo{background:rgba(15,23,42,.04)}
.sp-photo img{width:100%;height:100%;object-fit:cover;display:block}
.sp-photo .initials{font-weight:900;color:var(--text-0, var(--text))}
.sp-duty{margin-top:2px;font-size:13px;font-weight:900;color:var(--text-0, var(--text));line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-duty .muted{color:var(--text-muted, var(--muted));margin-right:6px;letter-spacing:.06em}
.sp-name{margin-top:2px;font-weight:950;line-height:1.1;
  font-size:clamp(15px, 2.2vw, 20px);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word}
.sp-shift{margin-top:2px;font-size:12px;font-weight:900;letter-spacing:.10em;text-transform:uppercase;color:var(--text-muted, var(--muted))}
.sp-position{margin-top:4px;font-size:12px;font-weight:950;letter-spacing:.10em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;
  background:rgba(var(--accent-rgb,74,163,255),.10);
  border:1px solid rgba(var(--accent-rgb,74,163,255),.22);
  color:var(--text-0, var(--text))}
.sp-team{margin-top:2px;font-size:11px;font-weight:900;letter-spacing:.10em;text-transform:uppercase;color:var(--text-muted, var(--muted))}

/* Edit icon pinned to upper-right of the left sidebar */
.sidebar-edit{position:absolute;top:8px;right:8px;z-index:3}

/* small icon button used in header/profile controls */
.icon-btn{width:34px;height:34px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);color:var(--text);cursor:pointer;display:grid;place-items:center;
  box-shadow:0 10px 26px rgba(0,0,0,.22)}
.icon-btn:hover{background:rgba(255,255,255,.09)}
.icon-btn:active{transform:translateY(1px)}

/* Inline profile edit icon removed (edit is inside Settings). */
.sidebar-edit{display:none !important;}

/* Sidebar profile (centered, single-layer, no background overlays) */
.sp-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  gap:6px;
  padding:10px 8px 6px 8px;
  background:transparent;
  border:none;
  box-shadow:none;
}

.sp-photo{width:78px;height:78px;border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
}
.sp-photo img{width:100%;height:100%;object-fit:cover;display:block}
.sp-photo .initials{font-weight:900;color:rgba(255,255,255,.92)}

.sp-duty{font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.sp-duty .muted{color:rgba(255,255,255,.72);font-weight:900;margin-right:6px}

.sp-name{font-weight:950;line-height:1.08;
  font-size:clamp(16px, 2.2vw, 22px);
  max-width: 100%;
  word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.sp-shift{font-size:12px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.82)}

.sp-position{margin-top:2px;font-size:12px;font-weight:900;letter-spacing:.09em;
  padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  text-transform:uppercase;
}

.sp-team{font-size:11px;font-weight:900;letter-spacing:.10em;text-transform:uppercase;color:rgba(255,255,255,.68)}

/* Edit icon pinned to the upper-right of the sidebar */
.sidebar-edit{
  position:absolute;
  top:8px;
  right:8px;
  z-index:5;
}

/* Inline profile edit icon removed (edit is inside Settings). */
.sidebar-edit{display:none !important;}

.sp-duty{
  margin-top:4px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  color:rgba(255,255,255,.92);
}
.sp-duty .muted{color:rgba(255,255,255,.70);margin-right:6px}
.sp-dutyvalue{font-weight:900}

.sp-name{
  font-weight:950;
  line-height:1.05;
  font-size:clamp(16px, 2.2vw, 22px);
  max-width:100%;
}

.sp-shift{
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
}

.sp-photo{
  width:78px;
  height:78px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:4px;
}
.sp-photo img{width:100%;height:100%;object-fit:cover;display:block}
.sp-photo .initials{font-weight:950;color:rgba(255,255,255,.92)}

.sp-position{
  margin-top:6px;
  font-size:12px;
  font-weight:950;
  letter-spacing:.10em;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  text-transform:uppercase;
}

.sp-team{
  margin-top:2px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(255,255,255,.70);
}

.avatar.avatar-xl{width:74px;height:74px;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center}
.avatar.avatar-xl img{width:100%;height:100%;object-fit:cover;display:block}
.uc-sched{margin-top:4px;font-weight:900}
.avatar-xl{width:110px;height:110px;border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);display:grid;place-items:center;margin:0 auto}
.avatar-xl img{width:100%;height:100%;object-fit:cover;display:block}
.usercard .line .small{margin:0}
.usercard .name{font-weight:800}
.usercard .value{color:var(--text)}
.brand{display:flex;align-items:center;gap:12px}
.brand-login{justify-content:flex-start}
.brand-mark{width:42px;height:42px;border-radius:14px;position:relative;flex:0 0 auto;
  background:linear-gradient(135deg, rgba(110,231,255,.95), rgba(167,139,250,.90));
  box-shadow:0 10px 30px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.20);
}
.brand-mark::after{content:"M";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-weight:900;letter-spacing:.02em;color:rgba(0,0,0,.70);font-size:18px;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.brand-text{line-height:1.1}
.brand-name{font-weight:900;letter-spacing:.06em;
  /* Glowing effect (requested) */
  text-shadow:
    0 0 10px rgba(110,231,255,.35),
    0 0 22px rgba(167,139,250,.22);
}
.brand-sub{font-size:12px;color:var(--muted);font-weight:700}
.brand-build{
  /* Build number less prominent (requested) */
  font-size:7px; /* ~50% smaller */
  opacity:.75;
  margin-top:2px;
}
.nav{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-height:0;overflow:auto;padding-right:4px}
.nav a{display:flex;gap:10px;align-items:center;text-decoration:none;
  padding:8px 10px;border-radius:12px;border:1px solid transparent;color:var(--muted);
  font-size:13px;line-height:1.2}
.nav a.active{color:var(--text);border-color:var(--border);background:rgba(255,255,255,.03)}
.nav a:hover{border-color:rgba(255,255,255,.12)}

/* Tree nav */
.nav-group{border:1px solid transparent;border-radius:14px;overflow:hidden}
.nav-group.active{border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.02)}
.nav-group-head{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:transparent;border:0;color:var(--muted);cursor:pointer}
.nav-group-head:hover{background:rgba(255,255,255,.03)}
.nav-group-head .chev{margin-left:auto;opacity:.7}
.nav-group-kids{padding:4px 0 10px}

/* Profile modal */
.profile-grid{display:grid;grid-template-columns:220px 1fr;gap:18px;align-items:start}

.cropper-wrap{display:flex;justify-content:center;align-items:center;padding:8px}
#cropCanvas{width:320px;height:320px;border-radius:18px;background:rgba(0,0,0,.45);touch-action:none;cursor:grab;box-shadow:0 10px 28px rgba(0,0,0,.35)}
#cropCanvas:active{cursor:grabbing}
@media(max-width:520px){#cropCanvas{width:280px;height:280px}}
@media(max-width:800px){.profile-grid{grid-template-columns:1fr}}
.profile-photo{text-align:center}
.profile-fields{display:grid;gap:12px}

/* Master schedule table */
.ms-table{display:flex;flex-direction:column;gap:10px}
.ms-head{display:grid;grid-template-columns: 1.3fr 1.2fr .9fr .5fr;gap:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(255,255,255,.02);font-size:12px;color:var(--muted);font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.ms-row{display:grid;grid-template-columns: 1.3fr 1.2fr .9fr .5fr;gap:10px;align-items:start;padding:12px;border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(0,0,0,.10)}
.ms-name{display:flex;flex-direction:column;gap:2px}

/* Master schedule (v2) */
.ms-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ms-actions{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.ms-actions label{min-width:220px}
.ms-list{display:flex;flex-direction:column;gap:10px}
.ms-item{display:grid;grid-template-columns: 1.1fr 1.5fr .9fr auto;gap:12px;align-items:center;padding:14px;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(255,255,255,.03)}
@media(max-width:980px){.ms-item{grid-template-columns:1fr;align-items:start}.ms-save{justify-content:flex-start}}
.ms-id{display:flex;gap:10px;align-items:center;min-width:240px}
.ms-avatar{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;font-weight:900;border:1px solid rgba(255,255,255,.14);background:rgba(var(--accent-rgb,74,163,255),.12)}
.ms-title{font-weight:900}
.weekday-chips{display:flex;flex-wrap:wrap;gap:6px}
.chipbtn{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02);color:var(--muted);padding:6px 8px;border-radius:12px;cursor:pointer;font-size:12px;line-height:1}
.chipbtn:hover{border-color:rgba(255,255,255,.22)}
.chipbtn.on{color:var(--text);border-color:rgba(74,163,255,.55);background:rgba(var(--accent-rgb,74,163,255),.12)}
.ms-save{display:flex;justify-content:flex-end}

/* === Master Schedule (enterprise refresh) === */
.ms-shell{display:flex;flex-direction:column;gap:12px}
.ms-topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ms-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ms-controls{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.ms-controls label{min-width:220px}

.ms-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px;border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(255,255,255,.03)}
.ms-toolbar-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ms-toolbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ms-search{display:flex;align-items:center;gap:10px}
.ms-search input{width: min(360px, 76vw)}

.ms-bulk{display:none;flex-direction:column;gap:10px;padding:12px;border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(255,255,255,.02)}
.ms-bulk.show{display:flex}
.ms-bulk-title{font-weight:950}
.ms-bulk-controls{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.ms-bulk-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.ms-grid{display:flex;flex-direction:column;gap:10px}
.ms-grid-head{display:grid;grid-template-columns:44px 1.3fr 1.6fr .9fr 140px;gap:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(255,255,255,.02);font-size:12px;color:var(--muted);font-weight:900;letter-spacing:.02em;text-transform:uppercase}
.ms-grid-body{display:flex;flex-direction:column;gap:10px}
.ms-grid-row{display:grid;grid-template-columns:44px 1.3fr 1.6fr .9fr 140px;gap:12px;align-items:center;padding:12px;border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(0,0,0,.10)}
.ms-check{display:flex;justify-content:center}
.ms-user{display:flex;gap:10px;align-items:flex-start;min-width:0}
.ms-user-text{min-width:0}
.ms-user-name{font-weight:950;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-actions-cell{display:flex;justify-content:flex-end}

@media(max-width:980px){
  .ms-grid-head{display:none}
  .ms-grid-row{grid-template-columns:1fr;align-items:flex-start}
  .ms-actions-cell{justify-content:flex-start}
  .ms-check{justify-content:flex-start}
}
.main.card.pad{overflow:auto;overflow-x:hidden}
.right.card.pad{display:flex;flex-direction:column;gap:12px;overflow:auto}

/* Keep logs at the bottom so nav can use available vertical space */
.side-logs{margin-top:auto}
.section-title{margin:0;font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th{font-size:12px;color:var(--muted);text-align:left;padding:0 8px}
.table td{background:rgba(255,255,255,.03);border:1px solid var(--border);padding:10px 8px}
.table tr td:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
.table tr td:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.55);z-index:10000}
.modal.open{display:flex}
.modal .panel{width:min(820px,100%);max-height:min(86vh,900px);overflow:auto;background:linear-gradient(180deg, rgba(12,27,51,.98), rgba(10,22,43,.98));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.modal .panel .head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px;border-bottom:1px solid var(--border)}
.modal .panel .body{padding:16px}

/* Dictionary */
.dict-top{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media(max-width:900px){.dict-top{grid-template-columns:1fr}}
.dict-meta{margin-top:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(255,255,255,.03)}
.dict-content{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.dict-card{padding:14px;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(0,0,0,.12)}
.dict-card h3{margin:0 0 8px;font-size:14px;letter-spacing:.01em}
.dict-card .small{line-height:1.6}
.dict-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:900px){.dict-grid{grid-template-columns:1fr}}
.dict-illus{width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.02);padding:10px}

/* Tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tab{padding:8px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer}
.tab.active{color:var(--text);border-color:rgba(74,163,255,.45);background:rgba(var(--accent-rgb,74,163,255),.12)}

/* Rich text editor */
.rte{border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.02)}
.rte-toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:10px;border-bottom:1px solid var(--border)}
.rte-toolbar .btn{box-shadow:none;padding:8px 10px}
.rte-editor{min-height:160px;padding:12px;outline:none}

/* Members scheduling timeline */
.members-wrap{display:flex;flex-direction:column;gap:12px}
.members-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.members-table{width:100%;border-collapse:separate;border-spacing:0 10px}
.members-row{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:14px;padding:12px;display:grid;grid-template-columns:260px 1fr 86px;gap:12px;align-items:center}
.members-row.inactive{opacity:.75}
.status-pill{display:inline-flex;align-items:center;padding:2px 8px;margin-left:8px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);font-weight:800;font-size:11px;color:var(--text)}
.members-meta .m-name{font-weight:800;font-size:15px}
.members-meta .m-sub{color:var(--muted);font-size:12px;margin-top:2px}
.timeline{position:relative;height:34px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.02);overflow:hidden}
.timeline-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.9);background:linear-gradient(90deg, rgba(0,0,0,.50), rgba(0,0,0,.35));backdrop-filter:blur(2px);}
.timeline .tick{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed rgba(255,255,255,.45)}
.timeline .seg{position:absolute;top:4px;bottom:4px;border-radius:10px;border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:11px;color:#0b1220;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}
.timeline .seg{cursor:grab;user-select:none}

/* Locked schedule blocks (Members → timeline)
   Label must be visible directly under the icon/label within the block.
   NOTE: timeline has overflow:hidden, so the label is rendered *inside* the block.
*/
.timeline .seg.is-locked{cursor:not-allowed}
.timeline .seg.is-locked::after{
  content:"🔒 Locked";
  position:absolute;
  left:50%;
  bottom:2px;
  transform:translateX(-50%);
  font-size:9px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:inherit;
  opacity:.9;
  padding:1px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
}
.timeline .seg.selected{outline:2px solid rgba(74,163,255,.95);box-shadow:0 0 0 4px rgba(74,163,255,.15);}
.select-rect{position:absolute;top:0;height:100%;border:1px dashed rgba(74,163,255,.95);background:rgba(var(--accent-rgb,74,163,255),.12);border-radius:10px;pointer-events:none;}
.timeline .seg.ghost{opacity:.85}
.timeline .seg.bad{outline:2px solid rgba(255,91,110,.95);box-shadow:0 0 0 4px rgba(255,91,110,.15);}
.timeline .seg.ok{outline:2px dashed rgba(54,211,153,.75)}

.sched-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:10px 0 6px}
.sched-toolbar .left{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sched-toolbar .right{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Member scheduling floating actions */
.sched-swap{position:relative}
.sched-float-actions{position:absolute;top:12px;right:12px;display:flex;align-items:center;justify-content:flex-end;gap:10px;z-index:5}
.sched-float-actions .iconrow{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.sched-float-actions .iconrow .iconbtn{width:32px;height:32px;border-radius:12px}
.sched-float-actions .iconrow .iconbtn.flat{background:transparent;border:1px solid transparent}
.sched-float-actions .iconrow .iconbtn.flat:hover{border-color:var(--border);background:rgba(255,255,255,.02)}
.sched-float-actions #sendSchedule{box-shadow:0 10px 24px rgba(0,0,0,.25)}

/* Paint mode (hour grid) */
.paintbar{display:flex;align-items:center;gap:8px}
.paintbar-inner{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,0.02)}
.paintbar-inner.on{border-color:rgba(125,211,252,0.55);box-shadow:0 0 0 3px rgba(125,211,252,0.12)}
.btn.ghost.active{border-color:rgba(125,211,252,0.55);box-shadow:0 0 0 3px rgba(125,211,252,0.12)}
.grid.paint-enabled .timeline{cursor:crosshair}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.03);font-size:12px;color:var(--muted)}

/* Week selector helpers */
.weekctl{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text);cursor:pointer}
.iconbtn:hover{filter:brightness(1.08)}
.week-warn{max-width:520px;text-align:right;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);font-weight:700}
.week-warn.locked{border-color:rgba(255,210,77,.35);background:rgba(255,210,77,.10)}
.week-warn.past{border-color:rgba(255,91,110,.35);background:rgba(255,91,110,.10)}
.week-warn.future{border-color:rgba(74,163,255,.35);background:rgba(74,163,255,.10)}

/* Swap animation when changing week/day */
.sched-swap{transition:opacity .18s ease, transform .18s ease}
.sched-swap.swap-anim{opacity:.55;transform:translateY(4px)}

/* Popover */
/* Use theme surfaces so popovers follow Aurora (Ecommerce Light) and any future themes. */
.popover{position:fixed;z-index:9999;min-width:280px;max-width:380px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb, var(--surface-1) 96%, transparent);box-shadow:var(--shadow);padding:12px 12px 10px 12px;backdrop-filter:blur(6px);color:var(--text)}
.popover .pop-title{font-weight:900;margin-bottom:6px}

/* Audit + trend */
.audit-row{display:flex;justify-content:space-between;gap:14px;padding:10px 12px;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(255,255,255,.02);margin-bottom:8px}
.audit-left{min-width:0}
.audit-right{white-space:nowrap}
.trend-card{border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(255,255,255,.02);padding:12px}
.trend-svg{width:100%;height:auto;display:block;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(0,0,0,.14);padding:10px;margin-bottom:12px;color:rgba(255,255,255,.92)}
.trend-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(180px,1fr));gap:10px}
.trend-item{border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:10px 12px;background:rgba(255,255,255,.02)}

.role-picker{position:fixed;z-index:9999;min-width:240px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb, var(--surface-1) 96%, transparent);box-shadow:var(--shadow);padding:10px;backdrop-filter:blur(6px);color:var(--text)}
.role-picker .row{display:flex;gap:8px;align-items:center;justify-content:space-between}
.role-picker .quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.role-picker .quick button{font-size:12px;padding:6px 8px;border-radius:10px}
.timeline .seg.dragging{cursor:grabbing;opacity:.9;outline:2px solid rgba(255,255,255,.35)}
.timeline .seg .handle{position:absolute;top:0;bottom:0;width:8px;background:rgba(0,0,0,.12)}
.timeline .seg .handle.l{left:0;cursor:ew-resize}
.timeline .seg .handle.r{right:0;cursor:ew-resize}
.timeline .seg[data-role="lunch"] .handle{display:none} /* fixed 1hr lunch */

/* Keep the timeline ruler column widths perfectly in-sync with .members-row (prevents label/tick drift). */
.timeline-ruler{display:grid;grid-template-columns:300px 1fr 120px;gap:12px;align-items:end;height:22px;margin-bottom:8px}
.timeline-ruler .ruler-track{position:relative;height:22px}
.timeline-ruler .ruler-tick{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed rgba(255,255,255,.45)}
.timeline-ruler .mark{position:absolute;top:0;transform:translateX(-50%);font-size:11px;color:var(--muted);white-space:nowrap}
.timeline-ruler .mark.first{transform:none;left:0}
.timeline-ruler .mark.last{transform:translateX(-100%)}

/* Sidebar activity logs (anchored to bottom so nav gets maximum room) */
.side-logs{margin-top:auto;padding-top:12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.side-logs-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.side-logs-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:hidden}
.logline{display:flex;gap:8px;align-items:baseline;font-size:12px;color:var(--muted);line-height:1.2}
.logline .t{color:var(--muted);min-width:48px}
.logline .m{color:var(--text);opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.logs{display:flex;flex-direction:column;gap:8px}
.logcard{padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.03);display:flex;gap:10px;align-items:flex-start}
.logcard .meta{min-width:170px}
.logcard .meta .when{font-size:12px;color:var(--muted)}
.logcard .meta .who{font-weight:800}
.logcard .detail{flex:1}
.logcard .detail .msg{font-weight:700}
.logcard .detail .small{color:var(--muted)}
.logs{overflow-x:hidden}
.logcard{max-width:100%}
.logcard .detail{min-width:0;overflow:hidden}
.logcard .detail .msg{overflow-wrap:anywhere;word-break:break-word;white-space:pre-wrap}
.logcard.is-error{border-color:rgba(255,91,110,.55);background:rgba(255,91,110,.06)}
.logcard.is-error .detail .msg{color:rgba(255,91,110,.95)}
.logcard.is-error .meta .when{color:rgba(255,91,110,.85)}
.logcard.is-error .meta .who{color:rgba(255,255,255,.95)}

/* Team-colored text (matches theme) */
.team-morning .m{color:#6fb7ff}
.team-mid .m{color:#ffb86b}
.team-night .m{color:#c6a4ff}
.seg[data-role="mailbox_manager"]{background:#4aa3ff}
.seg[data-role="back_office"]{background:#ff9f1c} /* Orange */
.seg[data-role="call_onqueue"]{background:#2ecc71} /* Green (Call Available) */
.seg[data-role="call_available"]{background:#2ecc71} /* Green (alias) */
.seg[data-role="lunch"]{background:#22d3ee} /* Cyan */
.seg[data-role="mailbox_call"]{background:#00c853} /* Solid Green */
.seg[data-role="block"]{background:#ff6b6b}
.time-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:6px}
.attach{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.attach-list{display:flex;flex-direction:column;gap:6px}
.attach-item{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.03)}
.kv{display:grid;grid-template-columns:160px 1fr;gap:10px;margin:8px 0}
.iconpill{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.03);font-size:12px;color:var(--muted)}
.icon{font-size:14px}

/* Mailbox duty header */
.duty{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;margin-bottom:14px}
.duty .box{padding:12px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.03)}
.duty .mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:180px}
.timer{font-size:18px;font-weight:800}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.03);font-size:12px;color:var(--muted)}

/* Tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.tab{padding:8px 10px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.03);cursor:pointer;color:var(--muted)}
.tab.active{color:var(--text);border-color:rgba(74,163,255,.55);background:rgba(var(--accent-rgb,74,163,255),.12)}

/* Rich editor */
.editor{border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.03);overflow:hidden}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;padding:10px;border-bottom:1px solid var(--border)}
.tool{padding:8px 10px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text);cursor:pointer;font-size:12px}
.tool select,.tool input{
  border:1px solid var(--border);
  border-radius:10px;
  padding:6px 8px;
  background:rgba(18,24,38,.92);
  color:var(--text);
}
.tool select option{color:#111;background:#fff}
.editable{min-height:160px;padding:12px;outline:none}
.attachments{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.attach-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.03)}

/* Timeline advanced interactions */
.timeline .seg.ghost{pointer-events:none;opacity:.55;filter:saturate(.85);border-style:dashed}
.timeline .seg.ghost.ok{outline:2px solid rgba(127,211,140,.75)}
.timeline .seg.ghost.bad{outline:2px solid rgba(255,107,107,.9)}
.timeline .seg.conflict{outline:2px solid rgba(255,107,107,.95);animation:conflictPulse .35s ease-in-out 0s 2}
@keyframes conflictPulse{0%{transform:translateX(0)}25%{transform:translateX(-2px)}50%{transform:translateX(2px)}75%{transform:translateX(-1px)}100%{transform:translateX(0)}}

/* Day tabs indicator */
.daytabs{display:flex;gap:8px;flex-wrap:wrap}
.daytab{position:relative}
.daytab.hasdata::after{content:"";position:absolute;top:6px;right:8px;width:6px;height:6px;border-radius:999px;background:rgba(74,163,255,.95);box-shadow:0 0 0 3px rgba(74,163,255,.16)}

.daytab .dot{display:inline-block;width:6px;height:6px;border-radius:999px;background:rgba(74,163,255,.95);margin-left:6px;vertical-align:middle;box-shadow:0 0 0 3px rgba(74,163,255,.12)}
.daytab .lock{display:inline-block;margin-left:6px;font-size:11px;opacity:.85;vertical-align:middle}
.lock-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:rgba(255,255,255,.9);font-size:12px;font-weight:800}

/* Coverage meter */
.coverage-meter{display:flex;gap:6px;flex-wrap:wrap}
.coverage-panel{border:1px solid var(--border);border-radius:14px;padding:12px;background:transparent}
.coverage-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.coverage-left{min-width:240px}
.coverage-day-center{flex:1;display:flex;justify-content:center;align-items:center;font-weight:800;letter-spacing:.2px;font-size:14px;line-height:1;padding:8px 10px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.03);margin-bottom:2px;text-align:center}
.coverage-title{font-size:13px;font-weight:900;letter-spacing:.2px}
.coverage-sub{font-size:11px;color:var(--muted);font-weight:700;max-width:720px}
.coverage-kpis{display:flex;gap:10px;flex-wrap:wrap}
.kpi{
  /* KPI chips (OK HOURS / HEALTH): remove overlay background + reduce size (~70%) */
  min-width:63px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:6px 7px;
  background:transparent;
}
.kpi-label{font-size:10px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.8px}
.kpi-val{font-size:14px;font-weight:950;margin-top:2px}
.coverage-scroll{overflow-x:auto;padding-bottom:6px;margin-top:10px}
.coverage-scroll .coverage-meter{flex-wrap:nowrap}
.coverage-scroll .cm-col{min-width:86px}

.toolgroup{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cm-col{min-width:84px;flex:1;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.03);padding:8px}
.cm-col.ok{border-color:rgba(54,211,153,.28);background:rgba(54,211,153,.06)}
.cm-col.bad{border-color:rgba(255,107,107,.28);background:rgba(255,107,107,.06)}
.cm-label{font-size:11px;color:var(--muted);font-weight:800;margin-bottom:6px}
.cm-bars{display:flex;gap:6px;flex-wrap:wrap}
.cm-bar{font-size:11px;font-weight:900;padding:6px 8px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.cm-bar[data-kind="mailbox"]{color:#9ed3ff}
.cm-bar[data-kind="call"]{color:#ffe0a3}

/* Assign Tasks legend (timeline) */
.timeline-legend{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:10px}
.legend-item{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.02);font-size:12px;color:var(--text);font-weight:800}
.legend-dot{width:10px;height:10px;border-radius:999px;display:inline-block;box-shadow:0 0 0 4px rgba(255,255,255,.06)}

/* Match block colors */
.legend-dot.role-mailbox_manager{background:#4aa3ff}
.legend-dot.role-call_onqueue{background:#36d399} /* Call Available = Green */
.legend-dot.role-back_office{background:#ff9800} /* Back Office = Orange */
.legend-dot.role-lunch{background:#00e5ff}      /* Lunch = Cyan */
.legend-dot.role-mailbox_call{background:#00c853}/* Mailbox + Call = Solid Green */
.legend-dot.role-block{background:#ff6b6b}

/* Settings hub */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.settings-card{border:1px solid var(--border);background:rgba(255,255,255,.03);border-radius:16px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.settings-card-title{font-weight:900;letter-spacing:.2px}
@media (max-width:860px){.settings-grid{grid-template-columns:1fr}}

/* System Check (Settings) */
.syscheck-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-end}
.syscheck-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;justify-content:flex-end}
.syscheck-timer{min-width:140px;text-align:right;border:1px solid var(--border);border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.03)}
.syscheck-progress .bar{height:12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);overflow:hidden}
.syscheck-progress .fill{height:100%;background:rgba(var(--accent-rgb), .65);box-shadow:0 0 0 1px rgba(var(--accent-rgb), .35) inset}
.syscheck-item{border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:12px;background:rgba(255,255,255,.02)}
.syscheck-item+.syscheck-item{margin-top:10px}
.syscheck-item.crit{border-color:rgba(255,90,90,.28);background:rgba(255,90,90,.06)}
.syscheck-item.minor{border-color:rgba(255,255,255,.12)}
.syscheck-item .t{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
.syscheck-item .sev{font-weight:900}
.syscheck-item .sev.crit{color:#ff8b8b}
.syscheck-item .sev.minor{color:rgba(255,255,255,.85)}
.syscheck-item .desc{margin-top:8px;white-space:pre-wrap}
.syscheck-item .rec{margin-top:8px}

/* Avoid horizontal page scrolling on complex dashboards */
.page{overflow-x:hidden}

/* Right sidebar tabs */
.rtabs{display:flex;gap:8px;margin-bottom:12px;padding:6px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.02)}
.rtab{flex:1;border:0;background:transparent;color:var(--muted);padding:8px 10px;border-radius:12px;font-weight:900;letter-spacing:.2px;cursor:pointer}
.rtab:hover{background:rgba(255,255,255,.04);color:var(--text)}
.rtab.active{background:rgba(255,255,255,.08);color:var(--text);border:1px solid rgba(255,255,255,.12)}
.rtab-panels{position:relative;min-height:220px}
.rtab-panel{display:none;animation:rtabIn .18s ease-out}
.rtab-panel.active{display:block}
@keyframes rtabIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Right sidebar dynamic Guide (Summary tab) */
.rsummary-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.rsummary-body{display:flex;flex-direction:column;gap:10px}
.rguide-card{border:1px solid var(--border);background:rgba(255,255,255,.03);border-radius:16px;padding:12px}
.rguide-card details{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px 12px;background:rgba(0,0,0,.08)}
.rguide-card details+details{margin-top:10px}
.rguide-card summary{cursor:pointer;list-style:none;font-weight:900;color:var(--text);display:flex;align-items:center;justify-content:space-between}
.rguide-card summary::-webkit-details-marker{display:none}
.rguide-card .sicon{color:var(--muted);font-size:12px}
.rguide-card .gbody{margin-top:10px;color:var(--text);line-height:1.55}
.rguide-card .gbody ul{margin:8px 0 0 18px}
.rguide-card .gbody li{margin:6px 0}
.rlegend{width:100%;border-collapse:collapse;margin-top:8px}
.rlegend th,.rlegend td{border:1px solid rgba(255,255,255,.08);padding:6px 8px;font-size:12px}
.rlegend th{color:var(--muted);text-align:left}
.rqa{margin-top:8px}
.rqa .q{font-weight:900;margin-top:10px}
.rqa .a{margin-top:4px;color:var(--text)}

/* Guide (Summary) tools + professional layout */
.gtools{display:flex;align-items:center;gap:10px;margin:8px 0 10px}
.gswitch{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.02);cursor:pointer;user-select:none}
.gswitch input{accent-color:var(--accent);transform:translateY(1px)}
.gswitch span{font-weight:900;color:var(--text);font-size:12px}
.gsearch{flex:1;display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.02)}
.gsearch-ico{opacity:.85}
.gsearch input{flex:1;background:transparent;border:0;outline:none;color:var(--text);font-weight:700}

.gtabs{
  display:flex;
  gap:8px;
  margin:6px 0 10px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,.02);
  /* Prevent any horizontal scrollbar inside the right sidebar */
  flex-wrap:nowrap;
  overflow:hidden;
}
.gtab{
  flex:1;
  min-width:0;
  border:0;
  background:transparent;
  color:var(--muted);
  padding:8px 8px;
  border-radius:12px;
  font-weight:900;
  letter-spacing:.2px;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gtab:hover{background:rgba(255,255,255,.04);color:var(--text)}
.gtab.active{background:rgba(255,255,255,.08);color:var(--text);border:1px solid rgba(255,255,255,.12)}

.gask{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.gask input{flex:1;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:14px;padding:10px 12px;color:var(--text);font-weight:700;outline:none}
.gask input:focus{border-color:rgba(255,255,255,.22)}

.gpanel{border:1px solid var(--border);background:rgba(255,255,255,.02);border-radius:18px;overflow:hidden}
.gpanel-head{padding:12px 12px 10px;border-bottom:1px solid rgba(255,255,255,.08)}
.gpanel-title{font-weight:1000;letter-spacing:.2px}
.gpanel-body{padding:12px}
.gpanel-foot{padding:10px 12px;border-top:1px solid rgba(255,255,255,.08)}
.gpanel-disabled{padding:18px}
.gpanel-disabled-title{font-weight:1000;margin-bottom:6px}

.gqa{display:flex;flex-direction:column;gap:10px}
.gqa-item{border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.12);border-radius:16px;padding:10px 12px}
.gqa-q{font-weight:1000}
.gqa-a{margin-top:6px;color:var(--text);line-height:1.55}

.gnotes{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.gleg{width:100%;border-collapse:collapse}
.gleg th,.gleg td{border:1px solid rgba(255,255,255,.08);padding:7px 8px;font-size:12px}
.gleg th{color:var(--muted);text-align:left}

.gmanual{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:900px){.gmanual{grid-template-columns:1fr}}
.gthumb{border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.10);border-radius:16px;padding:10px;text-align:left;cursor:pointer}
.gthumb:hover{background:rgba(255,255,255,.04)}
.gthumb-img{border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;background:rgba(0,0,0,.18)}
.gthumb-cap{margin-top:8px;font-weight:900;font-size:12px;color:var(--text)}
.gimg-wrap{display:flex;align-items:center;justify-content:center}
.gimg-wrap svg{width:100%;height:auto;max-height:520px}

.gqs{margin-top:10px}
.gqs-item{margin-top:4px}


/* === Fix: Right sidebar should not be scrollable (fit content) === */
.right.card.pad{overflow:hidden}
.right .tabs{font-size:11px}
.right .rtabs{gap:6px}
.right .rtab{padding:8px 10px;font-size:12px}
.right .guideClassic, .right .guide-tabs, .right .guide-wrap, .right .guide-body{font-size:11.5px;line-height:1.22}
.right .guide-wrap{gap:6px}
.right .guide-body{max-height:none;overflow:visible}
.right input.input, .right select.input{font-size:11.5px;padding:7px 9px}
.right .btn{font-size:11.5px}
.right .gpanel-head{padding:10px 10px 8px}
.right .gpanel-body{padding:10px}
.right .gpanel-foot{padding:8px 10px}
.right .gask input{padding:9px 10px}
.right .gtools{margin:6px 0 8px}
.right .gtools .btn{padding:7px 9px}
.right .section-title{font-size:12px}
.right .small{font-size:11px}

/* === Member multi-select checkbox (clickable + visible) === */
.m-selwrap{display:inline-flex;align-items:center;justify-content:center;margin-right:10px;padding:3px;border-radius:8px;position:relative;z-index:5}
.m-selwrap:hover{background:rgba(255,255,255,.06)}
.m-selwrap .m-select{width:16px;height:16px;cursor:pointer;pointer-events:auto}
.members-row .members-meta{display:flex;flex-direction:column;gap:4px}
.members-row.m-selected{outline:2px solid rgba(74,163,255,.55);box-shadow:0 0 0 4px rgba(74,163,255,.12)}


/* Members Assign Tasks: locked indicator below the timeline (prevents overlap with REST DAY overlay) */
.timeline-wrap{display:flex;flex-direction:column;gap:6px}
.locked-below{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;font-weight:900;letter-spacing:.14em;color:rgba(255,255,255,.78)}
.locked-below .lk-ic{font-size:14px;line-height:1}
body[data-mode="light"] .locked-below{color:rgba(15,23,42,.68)}


/* === World clocks in bottom bar === */
.quicklinks-bar{display:flex;align-items:flex-end;justify-content:flex-start;gap:14px}
.clocks-wrap{flex:0 0 auto;display:flex;gap:10px;align-items:flex-end;justify-content:flex-start;min-width:0;overflow-x:auto;padding-bottom:4px}
.clocks-wrap::-webkit-scrollbar{height:8px}
.clocks-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:10px}
.quicklinks-inner{flex:1 1 auto;min-width:0}

/* Clock card base */
.wclock{min-width:128px;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:8px 10px;background:rgba(0,0,0,.14);backdrop-filter:blur(10px)}
.wclock .wc-label{font-size:11px;font-weight:900;letter-spacing:.08em;color:rgba(255,255,255,.80);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.wclock .wc-time{display:flex;align-items:baseline;gap:6px;margin-top:4px;font-variant-numeric: tabular-nums}
.wclock .wc-h{font-size:20px;font-weight:950}
.wclock .wc-m{font-size:18px;font-weight:950;opacity:.96}
.wclock .wc-sec{font-size:12px;font-weight:900;opacity:.75}
.wclock .wc-sep{opacity:.85}

/* 10 clock design presets (using .wc-<id>) */
.wclock.wc-classic{background:rgba(0,0,0,.14)}
.wclock.wc-round{border-radius:999px}
.wclock.wc-glass{background:rgba(255,255,255,.06)}
.wclock.wc-dashed{border-style:dashed}
.wclock.wc-shadow{box-shadow:0 10px 30px rgba(0,0,0,.25)}
.wclock.wc-gradient{background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.10))}
.wclock.wc-bold{border-width:2px}
.wclock.wc-saturated{filter:saturate(1.1)}
.wclock.wc-dark{background:rgba(0,0,0,.18)}
.wclock.wc-accent{background:rgba(255,255,255,.04);border-color:rgba(74,163,255,.25)}

/* Clock style ids used by Settings (10 designs) */
.wclock.wc-neon{
  background:rgba(0,0,0,.28);
  border-color:rgba(54,211,153,.35);
  box-shadow:
    0 0 0 1px rgba(54,211,153,.12) inset,
    0 0 22px rgba(54,211,153,.14),
    0 14px 40px rgba(0,0,0,.35);
}
.wclock.wc-neon .wc-time{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.wclock.wc-neon .wc-h,.wclock.wc-neon .wc-m{ text-shadow: 0 0 10px currentColor, 0 0 24px rgba(54,211,153,.15); }
.wclock.wc-neon .wc-sec{ text-shadow: 0 0 10px rgba(255,255,255,.18); }
.wclock.wc-mono{background:rgba(0,0,0,.14);filter:grayscale(1)}
.wclock.wc-minimal{background:transparent;box-shadow:none;border-color:rgba(255,255,255,.10);padding:6px 8px}
.wclock.wc-terminal{
  background:rgba(0,0,0,.38);
  border-color:rgba(54,211,153,.22);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  box-shadow: 0 0 0 1px rgba(54,211,153,.10) inset;
}
.wclock.wc-terminal .wc-label{color:rgba(54,211,153,.72)}
.wclock.wc-terminal .wc-h,.wclock.wc-terminal .wc-m{ text-shadow: 0 0 10px currentColor; }
.wclock.wc-chip{background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(0,0,0,.12));border-color:rgba(255,255,255,.16);border-radius:12px}
.wclock.wc-rounded{border-radius:999px;padding:8px 14px}
.wclock.wc-outline{background:transparent;box-shadow:none;border-color:rgba(255,255,255,.18)}


/* clocks modal */
.clocks-grid{display:grid;grid-template-columns:repeat(3, minmax(240px,1fr));gap:14px}
@media(max-width:900px){.clocks-grid{grid-template-columns:1fr}}
.clock-card{border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:12px;background:rgba(255,255,255,.04)}
.clocks-preview-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:14px}
.clocks-preview-strip{display:flex;gap:10px;align-items:stretch;margin-top:8px}
.cprev{flex:1;min-width:0;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px;background:rgba(0,0,0,.10);cursor:grab;user-select:none;display:flex;flex-direction:column;gap:6px}
.cprev:active{cursor:grabbing}
.cprev.disabled{opacity:.55}
.cprev.dragging{opacity:.55}
.cprev.over{outline:2px solid rgba(74,163,255,.55);box-shadow:0 0 0 4px rgba(74,163,255,.12)}
.cprev-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.cprev-label{font-size:11px;font-weight:950;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9}
.cprev-badge{font-size:10px;font-weight:900;color:var(--muted)}
.cprev-time{display:flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums}
.cprev-h{font-size:18px;font-weight:950}
.cprev-sep{opacity:.85}
.cprev-m{font-size:16px;font-weight:950;opacity:.96}
.cprev-note{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clock-card .row{gap:10px}
.clock-card .title{font-weight:900;margin-bottom:6px}


/* === MUMS FIX7: Logo glow + build label + clocks preview + logs error styling === */
.brand-build{font-size:6px;opacity:.65;font-weight:800;letter-spacing:.10em;text-transform:uppercase;margin-top:2px}
.brand-name{
  text-shadow:0 0 12px rgba(74,163,255,.40), 0 0 22px rgba(74,163,255,.20);
}
@keyframes mumsGlow{0%,100%{filter:drop-shadow(0 0 10px rgba(74,163,255,.25))}50%{filter:drop-shadow(0 0 18px rgba(74,163,255,.38))}}
.brand-mark{animation:mumsGlow 4.5s ease-in-out infinite}

/* Right sidebar sizing (no internal scroll) */
#summaryNowChip{display:none !important}
.gtabs{gap:6px;padding:5px}
.gtab{font-size:11px;padding:6px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gpanel-title{font-size:12px}
.gpanel-body{padding:10px}
.gqa-q{font-size:12px}
.gqa-a{font-size:11.5px}

/* Clocks settings preview strip */
.clocks-preview{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.02);border-radius:18px;padding:12px;margin-bottom:12px}
.clocks-preview-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.clocks-preview-strip{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.wclock.wc-preview{min-width:0;flex:1;max-width:280px;cursor:grab;position:relative;user-select:none}
.wclock.wc-preview.dragging{opacity:.75;cursor:grabbing}
.wclock.wc-preview.dragover{outline:2px dashed rgba(74,163,255,.55);outline-offset:4px}
.wclock.wc-preview .wc-drag{position:absolute;top:6px;right:8px;font-size:12px;opacity:.75}
.wclock.wc-preview.off{opacity:.55;filter:grayscale(.30)}

/* Activity logs page: prevent horizontal scroll + highlight errors */
.logs{overflow-x:hidden}
.logcard{overflow:hidden}
.logcard .detail{overflow-wrap:anywhere;word-break:break-word}

/* Error highlighting in Activity Logs */
.logcard.is-error{
  border-color: rgba(255,107,107,.38);
  background: rgba(255,107,107,.06);
}
.logcard.is-error .meta{
  color: rgba(255,170,170,.92);
}
.logcard.is-error .detail{
  color: rgba(255,215,215,.95);
}

/* === Release Notes (editor + markdown preview) === */
.rn-toolbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.rn-editor-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:12px;align-items:start}
@media(max-width:900px){.rn-editor-grid{grid-template-columns:1fr}}
.rn-preview{min-height:140px;max-height:320px;overflow:auto}
.rn-md{font-size:13px;line-height:1.55;color:var(--text)}
.rn-md strong{font-weight:900}
.rn-md em{opacity:.95}
.rn-code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  padding:2px 6px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
.rn-pre{margin:10px 0;padding:10px 12px;border-radius:14px;overflow:auto;
  background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.10)}
.rn-pre code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:12px}
.rn-h1{font-size:16px;font-weight:950;margin:10px 0 6px}
.rn-h2{font-size:14px;font-weight:950;margin:10px 0 6px}
.rn-h3{font-size:13px;font-weight:950;margin:10px 0 6px;opacity:.95}
.rn-ul,.rn-ol{margin:8px 0 8px 18px}
.rn-ul li,.rn-ol li{margin:4px 0}

/* light mode tweaks */
body[data-mode="light"] .rn-code{background:rgba(15,23,42,.04);border-color:rgba(15,23,42,.12)}
body[data-mode="light"] .rn-pre{background:rgba(15,23,42,.04);border-color:rgba(15,23,42,.12)}

/* === Aurora Light: fix sidebar profile visibility (Shift/Avatar/Initials) === */
body[data-mode="light"] .sp-wrap{color:var(--text)}
body[data-mode="light"] .sp-duty{color:var(--text)}
body[data-mode="light"] .sp-duty .muted{color:var(--muted)}
body[data-mode="light"] .sp-name{color:var(--text)}
body[data-mode="light"] .sp-shift{color:var(--muted)}
body[data-mode="light"] .sp-photo{border-color:rgba(15,23,42,.12);background:rgba(255,255,255,.85)}
body[data-mode="light"] .sp-photo .initials{color:rgba(15,23,42,.92)}
body[data-mode="light"] .sp-position{background:rgba(var(--accent-rgb,74,163,255),.10);border-color:rgba(var(--accent-rgb,74,163,255),.22);color:rgba(15,23,42,.86)}

/* Profile modal (top-right badge) visibility in light themes */
body[data-mode="light"] .up-role{background:rgba(15,23,42,.04);border-color:rgba(15,23,42,.12);color:rgba(15,23,42,.78)}
body[data-mode="light"] .up-sub{color:var(--muted)}

/* === Aurora Light: clocks settings readability === */
body[data-mode="light"] .clock-card{background:rgba(255,255,255,.82);border-color:rgba(15,23,42,.12)}
body[data-mode="light"] .clocks-preview{background:rgba(255,255,255,.72);border-color:rgba(15,23,42,.12)}
body[data-mode="light"] .wclock.wc-preview{border-color:rgba(15,23,42,.12)}

/* === Aurora Light: Guide / Dictionary / Manual readability === */
body[data-mode="light"] .gpanel-body, body[data-mode="light"] .dict-content{color:var(--text)}
body[data-mode="light"] .gpanel-body .muted, body[data-mode="light"] .dict-content .muted{color:var(--muted)}
.logcard.is-error .small{
  color: rgba(255,190,190,.82);
}

/* Prevent any horizontal scroll on log lines */
.logcard .meta,
.logcard .detail{min-width:0}

.logcard.error{
  border-color:rgba(255,107,107,.38);
  background:rgba(255,107,107,.05);
}
.logcard.error .meta{color:rgba(255,200,200,.92)}
.logcard.error .detail{color:rgba(255,230,230,.95)}
.logcard.error .small{color:rgba(255,170,170,.90)}

/* Logs: hard prevent horizontal scroll from long strings */
#logsList, .logs{min-width:0}
.logcard .meta{min-width:170px;flex:0 0 170px}
.logcard .detail{min-width:0}
.logcard .msg, .logcard .small{overflow-wrap:anywhere;word-break:break-word}
.logcard .detail .msg{overflow-wrap:anywhere}
.logcard.is-error{border-color:rgba(255,90,90,.40);background:rgba(255,90,90,.06)}
.logcard.is-error .msg,.logcard.is-error .who{color:#ff6b6b}
.logcard.is-error .small{color:rgba(255,140,140,.90)}


/* === MUMS FIX7.1: Right sidebar tabs fit + logs wrap improvements === */
.gtabs{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:6px;padding:5px}
.gtab{min-width:0}

.logcard{flex-wrap:wrap;min-width:0}
.logcard .meta{flex:0 0 auto}
.logcard .detail{flex:1 1 320px;min-width:0}

/* Error toggle button state */
.btn.active{border-color:rgba(255,90,90,.45);background:rgba(255,90,90,.10)}

/* Right sidebar: prevent horizontal overflow */
.right .gtools{flex-wrap:wrap}
.right .gsearch{min-width:0}
.right .gask{flex-wrap:wrap}
.right .gask input{min-width:0}
.right .rtabs{overflow:hidden}


/* Right sidebar hard lock (no scrollbars) */
.right.card.pad{overflow:hidden !important;overflow-x:hidden !important;overflow-y:hidden !important}
.right.card.pad .rtab-panels,.right.card.pad .rtab-panel,.right.card.pad .rsummary-body{overflow:hidden}
.right.card.pad .gtools,.right.card.pad .gtabs,.right.card.pad .gask{max-width:100%}
.right.card.pad *{box-sizing:border-box}

/* === Clock style ids used by Settings (10 designs) ===
   Align CSS with CLOCK_STYLES in app.js: classic, neon, mono, glass, bold, minimal, terminal, chip, rounded, outline.
   (We keep legacy classes above for backward compatibility.)
*/
.wclock.wc-neon{
  background:rgba(0,0,0,.18);
  border-color:rgba(54,211,153,.35);
  box-shadow:0 0 0 1px rgba(54,211,153,.16), 0 0 18px rgba(54,211,153,.14);
}
.wclock.wc-mono{background:rgba(0,0,0,.14);filter:grayscale(1)}
.wclock.wc-minimal{background:transparent;box-shadow:none;border-color:rgba(255,255,255,.10);padding:6px 8px}
.wclock.wc-terminal{
  background:rgba(0,0,0,.32);
  border-color:rgba(54,211,153,.20);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
.wclock.wc-chip{background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.14));border-color:rgba(255,255,255,.16);border-radius:12px}
.wclock.wc-rounded{border-radius:999px;padding:8px 14px}
.wclock.wc-outline{background:transparent;box-shadow:none;border-color:rgba(255,255,255,.18)}

/* Small polish: keep clock label readable in rounded styles */
.wclock.wc-rounded .wc-label{max-width:140px}

/* Align world clocks with the main content column (so they don't sit under the left sidebar) */
.clocks-wrap{margin-left:calc(260px + 14px)}
@media(max-width:1100px){.clocks-wrap{margin-left:0}}

/* =====================================================================
   Build 20260119-aurora-fix13
   Aurora Light polish + announcement formatting + quick link glow
   + improved Members Assign Tasks layout (weekly workload pills)
   ===================================================================== */

/* Announcement: show user + time (meta) and keep a clean horizontal bar */
.announce-meta{display:inline !important;white-space:nowrap;margin-left:8px;opacity:.95}

/* Quick links: slightly tighter spacing + glow when configured */
.quicklinks-inner{gap:3px}
.qcircle.filled.glowing{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 0 18px var(--glow, rgba(74,163,255,.35));
}

/* Generic flat icon button (used outside the send-icon row as well) */
.iconbtn.flat{background:transparent;border-color:transparent}
.iconbtn.flat:hover{border-color:var(--border);background:rgba(255,255,255,.02)}

/* Coverage meter edit icon */
.coverage-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.coverage-title-row .iconbtn{width:30px;height:30px;border-radius:12px}

/* Members: more readable name + weekly workload pills */
.members-row{grid-template-columns:300px 1fr 120px}
.members-meta .m-name{display:flex;align-items:center;gap:10px}
.members-meta .m-name-text{font-weight:900;font-size:15px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.members-meta .m-stats{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.statpill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);font-size:11px;font-weight:800;color:var(--text)}
.statpill b{font-weight:950}
.statpill[data-kind="mailbox"]{border-color:rgba(74,163,255,.28);background:rgba(74,163,255,.08)}
.statpill[data-kind="back"]{border-color:rgba(255,183,77,.28);background:rgba(255,183,77,.08)}
.statpill[data-kind="call"]{border-color:rgba(54,211,153,.28);background:rgba(54,211,153,.08)}
.statpill[data-kind="case"]{border-color:rgba(167,139,250,.26);background:rgba(167,139,250,.08)}

/* Aurora Light mode: ensure ALL controls + icons remain visible/readable */
body[data-mode="light"]{color-scheme:light}
body[data-mode="light"] .card{background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.88))}
body[data-mode="light"] .btn{background:rgba(15,23,42,.03);border-color:rgba(15,23,42,.12)}
body[data-mode="light"] .btn:hover{filter:brightness(.98)}
body[data-mode="light"] .btn.ghost{background:rgba(255,255,255,.72)}
body[data-mode="light"] .btn.ghost:hover{background:rgba(255,255,255,.82)}
body[data-mode="light"] .btn.primary{color:#fff}
body[data-mode="light"] .input{background:rgba(255,255,255,.90);border-color:rgba(15,23,42,.12);color:var(--text)}
body[data-mode="light"] .badge{background:rgba(15,23,42,.03);border-color:rgba(15,23,42,.12)}
body[data-mode="light"] .timeline{background:rgba(255,255,255,.70)}
body[data-mode="light"] .timeline .tick{border-left:2px dashed rgba(15,23,42,.18)}
body[data-mode="light"] .timeline-overlay{background:linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,255,255,.60));color:rgba(15,23,42,.86)}
body[data-mode="light"] .tab{background:rgba(15,23,42,.03);border-color:rgba(15,23,42,.12)}
body[data-mode="light"] .week-warn{background:rgba(15,23,42,.03);border-color:rgba(15,23,42,.12)}
body[data-mode="light"] .popover{background:rgba(255,255,255,.96);color:var(--text)}
body[data-mode="light"] .popover .small{color:var(--muted)}

/* In dark mode we invert the native calendar icon; in light mode keep it natural */
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.75) contrast(1.15);opacity:.9}
body[data-mode="light"] input[type="date"]::-webkit-calendar-picker-indicator{filter:none;opacity:.75}

/* Light mode quick link glow border */
body[data-mode="light"] .qcircle.filled.glowing{
  box-shadow:
    0 0 0 1px rgba(15,23,42,.10),
    0 0 16px var(--glow, rgba(59,130,246,.25));
}

body[data-mode="light"] .statpill{border-color:rgba(15,23,42,.12);background:rgba(15,23,42,.04)}

/* Aurora Light: navigation + modals + non-card grids */
body[data-mode="light"] .nav a.active{background:rgba(15,23,42,.03)}
body[data-mode="light"] .nav a:hover{border-color:rgba(15,23,42,.14)}
body[data-mode="light"] .nav-group.active{border-color:rgba(15,23,42,.12);background:rgba(15,23,42,.02)}
body[data-mode="light"] .nav-group-head:hover{background:rgba(15,23,42,.03)}

body[data-mode="light"] .announce-bar{background:rgba(15,23,42,.02)}
body[data-mode="light"] .announce-bar:hover{border-color:rgba(15,23,42,.18)}

body[data-mode="light"] .quicklinks-bar{background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.55) 40%, rgba(255,255,255,.75))}
body[data-mode="light"] .wclock{background:rgba(255,255,255,.72);border-color:rgba(15,23,42,.12)}
body[data-mode="light"] .wclock .wc-label{color:rgba(15,23,42,.70)}
body[data-mode="light"] .wclock .wc-h, body[data-mode="light"] .wclock .wc-m{color:rgba(15,23,42,.92)}
body[data-mode="light"] .wclock .wc-sec{color:rgba(15,23,42,.62)}


body[data-mode="light"] .modal{background:rgba(15,23,42,.40)}
body[data-mode="light"] .modal .panel{background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94))}

body[data-mode="light"] .ms-head{border-color:rgba(15,23,42,.12);background:rgba(255,255,255,.70);color:rgba(15,23,42,.68)}
body[data-mode="light"] .ms-row{border-color:rgba(15,23,42,.12);background:rgba(15,23,42,.03)}
body[data-mode="light"] .ms-item{border-color:rgba(15,23,42,.12);background:rgba(255,255,255,.72)}
body[data-mode="light"] .ms-avatar{border-color:rgba(15,23,42,.12);background:rgba(var(--accent-rgb,74,163,255),.12)}
body[data-mode="light"] .ms-toolbar{border-color:rgba(15,23,42,.12);background:rgba(255,255,255,.72)}
body[data-mode="light"] .ms-bulk{border-color:rgba(15,23,42,.12);background:rgba(255,255,255,.70)}
body[data-mode="light"] .ms-grid-head{border-color:rgba(15,23,42,.12);background:rgba(255,255,255,.70);color:rgba(15,23,42,.68)}
body[data-mode="light"] .ms-grid-row{border-color:rgba(15,23,42,.12);background:rgba(15,23,42,.03)}

body[data-mode="light"] .members-row{background:rgba(255,255,255,.72)}
body[data-mode="light"] .qcircle{background:rgba(15,23,42,.04)}
body[data-mode="light"] .avatar, body[data-mode="light"] .avatar-xl{border-color:rgba(15,23,42,.12);background:rgba(15,23,42,.04)}

body[data-mode="light"] .input,
body[data-mode="light"] .select,
body[data-mode="light"] .textarea,
body[data-mode="light"] select{background:rgba(255,255,255,.92);border-color:rgba(15,23,42,.12);color:var(--text)}


/* =====================================================================
   Build 20260120-aurora-fix16
   Design tokens + responsive typography + automatic readability support
   ===================================================================== */

:root{
  /* Semantic surfaces (fallback to existing theme vars) */
  --surface-0: var(--bg);
  --surface-1: var(--panel);
  --surface-2: var(--panel2);

  /* Semantic text */
  --text-0: var(--text);
  --text-muted: var(--muted);

  /* Semantic borders */
  --border-0: var(--border);
  --border-1: color-mix(in srgb, var(--border-0) 70%, transparent);

  /* Controls + overlays */
  --control-bg: rgba(18,24,38,.92);
  --control-border: var(--border-0);
  --control-text: var(--text-0);
  --overlay-scrim: rgba(0,0,0,.55);

  /* Button glass (dark default) */
  --btn-glass-top: rgba(255,255,255,.08);
  --btn-glass-bot: rgba(255,255,255,.02);

  /* Typography scale (responsive, stable across layouts) */
  --fs-xs: clamp(11px, 0.25vw + 10px, 12px);
  --fs-sm: clamp(12px, 0.30vw + 11px, 13px);
  --fs-base: clamp(13px, 0.35vw + 11px, 14px);
  --fs-lg: clamp(14px, 0.55vw + 12px, 16px);
  --fs-xl: clamp(18px, 0.95vw + 14px, 22px);
  --fs-2xl: clamp(22px, 1.45vw + 16px, 28px);

  --lh-tight: 1.15;
  --lh-base: 1.45;
}

body{font-size:var(--fs-base);line-height:var(--lh-base);color:var(--text-0)}
.small{font-size:var(--fs-xs);color:var(--text-muted)}
.h1{font-size:var(--fs-2xl);line-height:var(--lh-tight)}
.h2{font-size:var(--fs-lg)}

/* Unify component styling on semantic tokens (prevents theme regressions) */
.card{background:linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 92%, transparent), color-mix(in srgb, var(--surface-1) 86%, transparent));border-color:var(--border-0)}

.btn{
  border-color:var(--border-0);
  color:var(--text-0);
  background:linear-gradient(180deg, var(--btn-glass-top), var(--btn-glass-bot));
}
.btn:hover{border-color:color-mix(in srgb, var(--border-0) 70%, var(--text-0))}
.btn.primary{color:var(--accent-contrast, #fff)}

.input,.select,.textarea,select{
  background:var(--control-bg);
  border-color:var(--control-border);
  color:var(--control-text);
}

.modal{background:var(--overlay-scrim)}
.modal .panel{background:linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 98%, transparent), color-mix(in srgb, var(--surface-1) 94%, transparent))}

/* Native date/time pickers: use correct scheme per mode */
body[data-mode="dark"] input[type="date"], body[data-mode="dark"] .input[type="date"],
body[data-mode="dark"] input[type="time"], body[data-mode="dark"] .input[type="time"]{color-scheme:dark}
body[data-mode="light"] input[type="date"], body[data-mode="light"] .input[type="date"],
body[data-mode="light"] input[type="time"], body[data-mode="light"] .input[type="time"]{color-scheme:light}

/* Light mode token overrides (Aurora Light and any future light themes) */
body[data-mode="light"]{
  --overlay-scrim: rgba(15,23,42,.40);
  --control-bg: rgba(255,255,255,.92);
  --control-border: rgba(15,23,42,.12);
  /* Make default buttons visibly clickable on light panels */
  --btn-glass-top: rgba(15,23,42,.06);
  --btn-glass-bot: rgba(15,23,42,.03);
}

/* =====================================================================
   Build 20260120-aurora-fix18
   UI visibility hardening: sticky modal headers (close X), stronger
   primary buttons in light mode, and Aurora Light coverage readability.
   ===================================================================== */

/* 1) Close (X) buttons: keep them anchored in the upper-right and visible
      while scrolling long modal bodies */
.modal .panel .head,
.modal .panel .modal-head{
  position: sticky;
  top: 0;
  z-index: 50;
  /* Keep header readable over scrolled content */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface-1) 96%, transparent),
    color-mix(in srgb, var(--surface-1) 90%, transparent)
  );
  backdrop-filter: blur(10px);
}

.modal .panel .head{padding-right:56px}
.modal .panel .modal-head{padding-right:56px}

/* Target the close icon button in modal heads */
.modal .panel .head > .btn.ghost,
.modal .panel .modal-head > .btn.ghost{
  position: absolute;
  right: 14px;
  top: 12px;
  margin: 0;
}

/* 2) Buttons: ensure primary buttons remain high-contrast in light mode.
      The default .btn.primary is intentionally translucent for dark UIs;
      on Aurora Light this can become too faint and "disappear". */
body[data-mode="light"] .btn.primary{
  background: linear-gradient(180deg,
    rgba(var(--accent-rgb,74,163,255), .95),
    rgba(var(--accent-rgb,74,163,255), .78)
  );
  border-color: rgba(var(--accent-rgb,74,163,255), .85);
  color: var(--accent-contrast, #fff);
}
body[data-mode="light"] .btn.danger{
  background: linear-gradient(180deg, rgba(255,91,110,.92), rgba(255,91,110,.75));
  border-color: rgba(255,91,110,.80);
  color: #fff;
}
body[data-mode="light"] .btn{
  /* Improve visibility for non-primary buttons as well */
  border-color: rgba(15,23,42,.16);
}
body[data-mode="light"] .btn.ghost{
  background: rgba(255,255,255,.86);
  border-color: rgba(15,23,42,.12);
}

/* 3) Aurora Light: Coverage Meter parameter colors and chips */
body[data-mode="light"] .coverage-day-center{
  background: rgba(15,23,42,.03);
  border-color: rgba(15,23,42,.12);
  color: rgba(15,23,42,.92);
}
body[data-mode="light"] .cm-col{background:rgba(15,23,42,.02);border-color:rgba(15,23,42,.12)}
body[data-mode="light"] .cm-col.ok{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.10)}
body[data-mode="light"] .cm-col.bad{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10)}
body[data-mode="light"] .cm-label{color:rgba(15,23,42,.72)}
body[data-mode="light"] .cm-bar{
  border-color: rgba(15,23,42,.14);
  background: rgba(255,255,255,.92);
}
/* Darken mailbox/call colors for readability on light surfaces */
body[data-mode="light"] .cm-bar[data-kind="mailbox"]{color:#0b5ed7}
body[data-mode="light"] .cm-bar[data-kind="call"]{color:#92400e}


/* Theme Audit panel */
.theme-audit{margin-top:14px}
.theme-audit .audit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:900px){.theme-audit .audit-grid{grid-template-columns:1fr}}
.audit-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;border:1px solid var(--border-0);background:rgba(255,255,255,.03)}
body[data-mode="light"] .audit-row{background:rgba(15,23,42,.03)}
.audit-pill{font-size:11px;font-weight:950;padding:4px 8px;border-radius:999px;border:1px solid var(--border-0);background:rgba(255,255,255,.04)}
body[data-mode="light"] .audit-pill{background:rgba(255,255,255,.85)}
.audit-pill.pass{border-color:rgba(54,211,153,.35)}
.audit-pill.warn{border-color:rgba(251,191,36,.40)}
.audit-pill.fail{border-color:rgba(255,91,110,.40)}


/* Theme audit (Theme Lab) */
.theme-audit{margin-top:14px;border:1px solid var(--border-0);border-radius:16px;padding:12px;background:rgba(255,255,255,.03)}
.theme-audit .ta-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
@media(max-width:900px){.theme-audit .ta-grid{grid-template-columns:1fr}}
.theme-audit .ta-row{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid var(--border-0);border-radius:14px;padding:10px;background:rgba(255,255,255,.02)}
.theme-audit .ta-k{font-weight:900}
.theme-audit .ta-v{font-variant-numeric:tabular-nums;color:var(--text-muted)}
.theme-audit .ta-badge{padding:4px 10px;border-radius:999px;font-size:11px;font-weight:900;border:1px solid var(--border-0)}
.theme-audit .ta-badge.pass{background:rgba(54,211,153,.10);border-color:rgba(54,211,153,.26)}
.theme-audit .ta-badge.fail{background:rgba(255,91,110,.10);border-color:rgba(255,91,110,.30)}


/* Mailbox time override (Super Admin) */
.time-override-preview{
  border:1px solid var(--border);
  background: var(--surface-2);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.badge.override{
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--text);
}



/* =========================
   Reminders (My / Team)
   ========================= */
.topbar-center{ position:relative; }

.reminder-float-host{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px 10px 12px;
  pointer-events:none; /* cards re-enable */
  z-index:50;
}

.reminder-card{
  pointer-events:auto;
  min-width: 240px;
  max-width: 440px;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(148,163,184,.35);
  background: color-mix(in srgb, var(--surface-1) 92%, transparent);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  position:relative;
}
.reminder-card:hover{ transform: translateY(-1px); }
.reminder-card.my{
  border-color: rgba(34,197,94,.55);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  background: color-mix(in srgb, var(--surface-1) 90%, rgba(34,197,94,.10));
}
.reminder-card.team{
  border-color: rgba(239,68,68,.55);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  background: color-mix(in srgb, var(--surface-1) 90%, rgba(239,68,68,.10));
}
.reminder-card.high.my{
  border-color: rgba(34,197,94,.75);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}
.reminder-card.high.team{
  border-color: rgba(239,68,68,.75);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

.reminder-card.escalated{
  animation: reminderPulse 1.1s ease-in-out infinite;
}
@keyframes reminderPulse{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-1px); }
  100%{ transform: translateY(0); }
}
  50%{ box-shadow: 0 0 0 1px rgba(255,255,255,.28), 0 0 40px rgba(255,255,255,.18), 0 10px 22px rgba(0,0,0,.25); }
  100%{ box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 0 22px rgba(255,255,255,.10), 0 10px 22px rgba(0,0,0,.25); }
}

.reminder-card.more{
  border-color: rgba(var(--accent-rgb), .55) !important;
  background: rgba(var(--accent-rgb), .10) !important;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .20), 0 10px 22px rgba(0,0,0,.25) !important;
}

.rem-days{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 10px 8px;
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(0,0,0,.06);
}
.rem-day{
  display:flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  user-select:none;
}
.rem-day input{
  transform: translateY(0.5px);
}
.rem-settings-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 820px){
  .rem-settings-grid{ grid-template-columns: 1fr; }
}


.reminder-card .rc-top{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.reminder-card .rc-badge{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 999px;
  line-height: 1;
  border: 1px solid rgba(34,197,94,.55);
  background: rgba(34,197,94,.10);
  color: var(--text);
  flex:0 0 auto;
}
.reminder-card.team .rc-badge{
  border-color: rgba(239,68,68,.55);
  background: rgba(239,68,68,.12);
}
.reminder-card .rc-title{
  font-weight: 700;
  font-size: 14px;
  margin:0;
  color: var(--text);
  line-height:1.2;
}
.reminder-card .rc-meta{
  margin-top:2px;
  font-size: 12px;
  opacity:.85;
}
.reminder-card .rc-actions{
  display:flex;
  gap:8px;
  align-items:center;
  margin-left:auto;
  flex:0 0 auto;
}
.reminder-card .rc-close{
  appearance:none;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.12);
  color: var(--text);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  cursor:pointer;
}
.reminder-card.my .rc-close{ border-color: rgba(34,197,94,.45); }
.reminder-card.team .rc-close{ border-color: rgba(239,68,68,.45); }
.reminder-card .rc-close:hover{ filter: brightness(1.08); }

.reminder-card .rc-body{
  display:none;
  margin-top:10px;
  padding-top:10px;
  border-top: 1px solid rgba(148,163,184,.22);
  font-size: 13px;
}
.reminder-card.expanded .rc-body{ display:block; }
.reminder-card .rc-details{
  white-space: pre-wrap;
  opacity:.92;
}
.reminder-card .rc-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:8px;
  font-size:12px;
  opacity:.9;
}
.reminder-card .rc-pills{
  display:flex;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}
.reminder-pill{
  border:1px solid var(--border);
  background: rgba(0,0,0,.12);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  cursor:pointer;
}
.reminder-card.my .reminder-pill{ border-color: rgba(34,197,94,.45); }
.reminder-card.team .reminder-pill{ border-color: rgba(239,68,68,.45); }
.reminder-pill:hover{ filter: brightness(1.08); }
.reminder-pill.primary{
  background: rgba(var(--accent-rgb), .18);
  border-color: rgba(var(--accent-rgb), .35);
}

.reminder-form{ max-width: 980px; }
.reminder-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 820px){
  .reminder-grid{ grid-template-columns: 1fr; }
  .reminder-card{ min-width: 180px; max-width: 92vw; }
  .reminder-float-host{ padding-left: 8px; }
}


/* =========================
   Reminders Pages (Enterprise)
   ========================= */
.rem-page{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.rem-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.rem-head .title{
  font-size:18px;
  font-weight:800;
  margin:0;
}
.rem-head .sub{
  margin-top:6px;
  font-size:12px;
  opacity:.82;
}
.rem-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.rem-kpis{
  display:grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap:10px;
}
@media (max-width: 980px){
  .rem-kpis{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}
@media (max-width: 520px){
  .rem-kpis{ grid-template-columns: 1fr; }
}
.rem-kpi{
  border:1px solid rgba(148,163,184,.22);
  border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface-1) 96%, transparent);
}
.rem-kpi .k{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.75;
}
.rem-kpi .v{
  margin-top:6px;
  font-size:22px;
  font-weight:800;
}
.rem-kpi .h{
  margin-top:4px;
  font-size:12px;
  opacity:.78;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rem-layout{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:12px;
  align-items:start;
}
@media (max-width: 980px){
  .rem-layout{ grid-template-columns: 1fr; }
}
.rem-panel{
  border:1px solid rgba(148,163,184,.22);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-1) 96%, transparent);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
.rem-panel .ph{
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(148,163,184,.18);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.rem-panel .ph h3{
  margin:0;
  font-size:14px;
  font-weight:800;
}
.rem-panel .pb{
  padding:12px;
}
.rem-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:10px;
}
.rem-field .lbl{
  font-size:12px;
  opacity:.85;
}
.rem-inline{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width:520px){
  .rem-inline{ grid-template-columns: 1fr; }
}
.rem-badges{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.rem-badge{
  font-size:11px;
  padding: 4px 8px;
  border-radius: 999px;
  border:1px solid rgba(148,163,184,.26);
  background: rgba(0,0,0,.10);
}
.rem-badge.ok{ border-color: rgba(34,197,94,.45); }
.rem-badge.warn{ border-color: rgba(234,179,8,.50); }
.rem-badge.danger{ border-color: rgba(239,68,68,.50); }
.rem-badge.neutral{ border-color: rgba(148,163,184,.26); }
.rem-filterbar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(148,163,184,.18);
}
.rem-filterbar .left{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.rem-filterbar .right{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.table .actions{
  display:flex;
  gap:6px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.btn.tiny{
  padding: 5px 9px;
  font-size: 12px;
  border-radius: 10px;
}
.rem-note{
  padding: 10px 12px;
  font-size: 12px;
  opacity:.8;
  border-top: 1px solid rgba(148,163,184,.18);
}


/* =======================================================================
   OFFLINE-FIRST REBUILD: Cursor + Sidebar + Modern Icons
   ======================================================================= */

/* Always-visible custom cursor (mouse). Native cursor is hidden. */
body.app-cursor-on, body.app-cursor-on * { cursor: none !important; }
input, textarea, [contenteditable="true"] { caret-color: var(--text); }

/* Cursor element (high contrast, OS-independent) */
.app-cursor{
  position: fixed;
  left: 0; top: 0;
  width: 18px; height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 2px solid rgba(15,23,42,.85);
  background: rgba(15,23,42,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  pointer-events: none;
  z-index: 999999;
  opacity: 1;
  transition: opacity .15s ease, transform .06s linear, background .15s ease, border-color .15s ease;
}
body[data-mode="light"] .app-cursor{
  border-color: rgba(15,23,42,.92);
  background: rgba(255,255,255,.35);
  box-shadow: 0 6px 18px rgba(15,23,42,.14);
}
.app-cursor.is-hidden{ opacity: 0; }
.app-cursor.is-down{ transform: translate(-50%, -50%) scale(.92); }
.app-cursor .app-cursor-dot{
  position:absolute; left:50%; top:50%;
  width:4px; height:4px;
  border-radius:999px;
  background: rgba(255,255,255,.95);
  transform: translate(-50%, -50%);
}
body[data-mode="light"] .app-cursor .app-cursor-dot{ background: rgba(15,23,42,.92); }

/* I-beam indicator when hovering inputs/textareas/contenteditable */
.app-cursor .app-cursor-ibar{
  position:absolute; left:50%; top:50%;
  width:2px; height:14px;
  border-radius:2px;
  background: rgba(255,255,255,.92);
  transform: translate(-50%, -50%);
  opacity: 0;
}
body[data-mode="light"] .app-cursor .app-cursor-ibar{ background: rgba(15,23,42,.92); }
.app-cursor.is-text{
  width: 14px; height: 22px;
  border-radius: 12px;
  background: rgba(15,23,42,.06);
}
body[data-mode="light"] .app-cursor.is-text{ background: rgba(255,255,255,.55); }
.app-cursor.is-text .app-cursor-dot{ opacity: 0; }
.app-cursor.is-text .app-cursor-ibar{ opacity: 1; }

/* Sidebar nav: prevent overflow + enterprise sizing */
.side{ overflow: hidden; }

/* Ensure sidebar navigation is always visible/clickable when expanded */
body:not(.sidebar-collapsed) .side #nav,
body:not(.sidebar-collapsed) .side .nav{
  display:block;
  visibility:visible;
  pointer-events:auto;
}
body:not(.sidebar-collapsed) .side .nav{position:relative; z-index:4;}
body:not(.sidebar-collapsed) .side .usercard{position:relative; z-index:3;}

/* Sidebar enterprise */
.side{position:relative;overflow:hidden}
.side .nav{margin-top:6px}
.nav .nav-item,.nav .nav-group-head{display:flex;align-items:center;gap:10px;width:100%;border-radius:10px;padding:8px 10px;color:var(--text);text-decoration:none;border:1px solid transparent;background:transparent;cursor:pointer;transition:background .12s,border-color .12s}
.nav .nav-item:hover,.nav .nav-group-head:hover{background:rgba(37,99,235,.06);border-color:rgba(37,99,235,.18)}
.nav .nav-item.active{background:rgba(37,99,235,.10);border-color:rgba(37,99,235,.30);box-shadow:inset 3px 0 0 var(--primary)}
.nav .nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:750}
.nav .nav-ico{width:18px;height:18px;background:currentColor;opacity:.9}
.side .nav{flex:1 1 auto;min-height:0;overflow:auto;padding-right:4px}

/* Collapsed sidebar */
body.sidebar-collapsed .side{width:72px;padding:12px}
body.sidebar-collapsed .side .usercard, 
body.sidebar-collapsed .side .small,
body.sidebar-collapsed .side .side-logs{display:none}
body.sidebar-collapsed .nav .nav-label{display:none}
body.sidebar-collapsed .nav .nav-item,
body.sidebar-collapsed .nav .nav-group-head{justify-content:center;padding:10px}
body.sidebar-collapsed .nav .nav-item::after,
body.sidebar-collapsed .nav .nav-group-head::after{
  content:attr(data-label);
  position:absolute;
  left:78px;
  background:var(--text);
  color:#fff;
  padding:6px 10px;
  border-radius:10px;
  font-size:12px;
  white-space:nowrap;
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
  transition:opacity .12s,transform .12s;
  box-shadow:var(--shadow2);
}
body.sidebar-collapsed .nav .nav-item:hover::after,
body.sidebar-collapsed .nav .nav-group-head:hover::after{
  opacity:1;
  transform:translateY(0);
}


#nav.nav{
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px; /* room for scrollbar without pushing layout */
  min-width: 0;
}
.nav a,
.nav-group-head{
  min-width: 0;
  max-width: 100%;
  font-size: clamp(11px, 1.05vw, 13px);
  letter-spacing: .1px;
}
.nav a{ position: relative; }
.nav a > span,
.nav-group-head > span{ min-width: 0; }
.nav a .nav-label,
.nav-group-head .lbl{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Selected/hover effects (enterprise, clean) */
.nav a.active{
  background: rgba(110,231,255,.10);
  border-color: rgba(110,231,255,.28);
}
body[data-mode="light"] .nav a.active{
  background: rgba(2,132,199,.10);
  border-color: rgba(2,132,199,.25);
}
.nav a.active::before{
  content: "";
  position:absolute;
  left: -1px; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 6px;
  background: rgba(110,231,255,.95);
}
body[data-mode="light"] .nav a.active::before{ background: rgba(2,132,199,.95); }
.nav a:hover{
  background: color-mix(in srgb, var(--surface-1) 68%, transparent);
}
body[data-mode="light"] .nav a:hover{
  background: rgba(15,23,42,.03);
}

/* Modern consistent monochrome icons using SVG masks */
.nav-ico{
  width: 18px; height: 18px;
  flex: 0 0 18px;
  display:inline-block;
  background: currentColor;
  opacity: .9;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.nav a.active .nav-ico{ opacity: 1; }

/* Icon masks (inline SVG data URIs) */
.nav-ico[data-ico="dashboard"]{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 13h8V3H3v10zM13 21h8V11h-8v10zM13 3h8v6h-8V3zM3 21h8v-6H3v6z'/%3E%3C/svg%3E");
  mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 13h8V3H3v10zM13 21h8V11h-8v10zM13 3h8v6h-8V3zM3 21h8v-6H3v6z'/%3E%3C/svg%3E\");
}
.nav-ico[data-ico="mailbox"]{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 4h16v12H4z'/%3E%3Cpath d='M22 16H2v4h20v-4z'/%3E%3Cpath d='M7 16v-2h10v2'/%3E%3C/svg%3E");
  mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 4h16v12H4z'/%3E%3Cpath d='M22 16H2v4h20v-4z'/%3E%3Cpath d='M7 16v-2h10v2'/%3E%3C/svg%3E\");
}
.nav-ico[data-ico="members"]{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E\");
}
.nav-ico[data-ico="tasks"]{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");
  mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E\");
}
.nav-ico[data-ico="schedule"]{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E\");
}
.nav-ico[data-ico="users"]{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M22 11h-6'/%3E%3C/svg%3E");
  mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M22 11h-6'/%3E%3C/svg%3E\");
}
.nav-ico[data-ico="announce"]{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 11l18-5v12L3 13v-2z'/%3E%3Cpath d='M11 19a2 2 0 0 1-2-2v-4'/%3E%3C/svg%3E");
  mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 11l18-5v12L3 13v-2z'/%3E%3Cpath d='M11 19a2 2 0 0 1-2-2v-4'/%3E%3C/svg%3E\");
}
.nav-ico[data-ico="reminder_me"]{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z'/%3E%3Cpath d='M18 16v-5a6 6 0 1 0-12 0v5l-2 2h16l-2-2z'/%3E%3C/svg%3E");
  mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z'/%3E%3Cpath d='M18 16v-5a6 6 0 1 0-12 0v5l-2 2h16l-2-2z'/%3E%3C/svg%3E\");
}
.nav-ico[data-ico="reminder_team"]{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z'/%3E%3Cpath d='M18 16v-5a6 6 0 1 0-12 0v5l-2 2h16l-2-2z'/%3E%3Cpath d='M18 8a3 3 0 0 1 3 3'/%3E%3Cpath d='M6 8a3 3 0 0 0-3 3'/%3E%3C/svg%3E");
  mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z'/%3E%3Cpath d='M18 16v-5a6 6 0 1 0-12 0v5l-2 2h16l-2-2z'/%3E%3Cpath d='M18 8a3 3 0 0 1 3 3'/%3E%3Cpath d='M6 8a3 3 0 0 0-3 3'/%3E%3C/svg%3E\");
}

/* Small refinement: keep nav items inside rounded sidebar padding */
.side.card.pad{ padding: 16px; }

/* Topbar icons */
.ico[data-ico="notes"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M6%202h9l5%205v15a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2z%22/%3E%3Cpath%20d=%22M14%202v6h6%22%20fill=%22none%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M6%202h9l5%205v15a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2z%22/%3E%3Cpath%20d=%22M14%202v6h6%22%20fill=%22none%22/%3E%3C/svg%3E")}
.ico[data-ico="book"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M6%203h11a2%202%200%200%201%202%202v14a1%201%200%200%201-1%201H7a3%203%200%200%200-3%203V5a2%202%200%200%201%202-2z%22/%3E%3Cpath%20d=%22M6%203v16a1%201%200%200%200%201%201h11%22%20fill=%22none%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M6%203h11a2%202%200%200%201%202%202v14a1%201%200%200%201-1%201H7a3%203%200%200%200-3%203V5a2%202%200%200%201%202-2z%22/%3E%3Cpath%20d=%22M6%203v16a1%201%200%200%200%201%201h11%22%20fill=%22none%22/%3E%3C/svg%3E")}
.ico[data-ico="gear"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M12%2015.5a3.5%203.5%200%201%200%200-7%203.5%203.5%200%200%200%200%207z%22/%3E%3Cpath%20d=%22M19.4%2015a7.9%207.9%200%200%200%20.1-1l2-1.5-2-3.5-2.4%201a8.4%208.4%200%200%200-1.7-1l-.4-2.6h-4l-.4%202.6a8.4%208.4%200%200%200-1.7%201l-2.4-1-2%203.5%202%201.5a7.9%207.9%200%200%200%20.1%201%207.9%207.9%200%200%200-.1%201l-2%201.5%202%203.5%202.4-1a8.4%208.4%200%200%200%201.7%201l.4%202.6h4l.4-2.6a8.4%208.4%200%200%200%201.7-1l2.4%201%202-3.5-2-1.5a7.9%207.9%200%200%200-.1-1z%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M12%2015.5a3.5%203.5%200%201%200%200-7%203.5%203.5%200%200%200%200%207z%22/%3E%3Cpath%20d=%22M19.4%2015a7.9%207.9%200%200%200%20.1-1l2-1.5-2-3.5-2.4%201a8.4%208.4%200%200%200-1.7-1l-.4-2.6h-4l-.4%202.6a8.4%208.4%200%200%200-1.7%201l-2.4-1-2%203.5%202%201.5a7.9%207.9%200%200%200%20.1%201%207.9%207.9%200%200%200-.1%201l-2%201.5%202%203.5%202.4-1a8.4%208.4%200%200%200%201.7%201l.4%202.6h4l.4-2.6a8.4%208.4%200%200%200%201.7-1l2.4%201%202-3.5-2-1.5a7.9%207.9%200%200%200-.1-1z%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22/%3E%3C/svg%3E")}
.ico[data-ico="menu"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M4%206h16v2H4V6zm0%205h16v2H4v-2zm0%205h16v2H4v-2z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M4%206h16v2H4V6zm0%205h16v2H4v-2zm0%205h16v2H4v-2z%22/%3E%3C/svg%3E")}

/* Mobile-only controls (hidden on desktop; shown by mobile media query) */
#toggleUserOnlineBar, #toggleQuickLinksBar{display:none}
.mob-sheet-head{display:none}
.mobile-fab-stack{display:none}

/* Additional topbar/FAB icons */
.ico[data-ico="users"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2011a3%203%200%201%200-2.999-3A3%203%200%200%200%2016%2011zm-8%200a3%203%200%201%200-3-3a3%203%200%200%200%203%203zm0%202c-2.67%200-8%201.34-8%204v2h12v-2c0-2.66-5.33-4-8-4zm8%200c-.32%200-.68.02-1.06.06A4.8%204.8%200%200%201%2018%2017v2h6v-2c0-2.66-5.33-4-8-4z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2011a3%203%200%201%200-2.999-3A3%203%200%200%200%2016%2011zm-8%200a3%203%200%201%200-3-3a3%203%200%200%200%203%203zm0%202c-2.67%200-8%201.34-8%204v2h12v-2c0-2.66-5.33-4-8-4zm8%200c-.32%200-.68.02-1.06.06A4.8%204.8%200%200%201%2018%2017v2h6v-2c0-2.66-5.33-4-8-4z%22%2F%3E%3C%2Fsvg%3E")}
.ico[data-ico="link"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10.59%2013.41a1%201%200%200%201%200-1.41l2.12-2.12a1%201%200%201%201%201.41%201.41l-2.12%202.12a1%201%200%200%201-1.41%200z%22%2F%3E%3Cpath%20d%3D%22M8%2012a4%204%200%200%201%204-4h2a1%201%200%201%201%200%202h-2a2%202%200%200%200%200%204h2a1%201%200%201%201%200%202h-2a4%204%200%200%201-4-4z%22%2F%3E%3Cpath%20d%3D%22M14%208a1%201%200%201%201%200-2h2a4%204%200%201%201%200%208h-2a1%201%200%201%201%200-2h2a2%202%200%200%200%200-4h-2z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10.59%2013.41a1%201%200%200%201%200-1.41l2.12-2.12a1%201%200%201%201%201.41%201.41l-2.12%202.12a1%201%200%200%201-1.41%200z%22%2F%3E%3Cpath%20d%3D%22M8%2012a4%204%200%200%201%204-4h2a1%201%200%201%201%200%202h-2a2%202%200%200%200%200%204h2a1%201%200%201%201%200%202h-2a4%204%200%200%201-4-4z%22%2F%3E%3Cpath%20d%3D%22M14%208a1%201%200%201%201%200-2h2a4%204%200%201%201%200%208h-2a1%201%200%201%201%200-2h2a2%202%200%200%200%200-4h-2z%22%2F%3E%3C%2Fsvg%3E")}


body.app-cursor-on, body.app-cursor-on *{cursor:none !important}


/* Autofill readability (Chrome/Edge) */
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0 1000px var(--panel) inset;
  transition: background-color 9999s ease-in-out 0s;
}


/* Collapsed sidebar: pinned + auto-expand on hover (overlay) */
body.sidebar-collapsed.sidebar-hoverable .side{width:72px}
body.sidebar-collapsed.sidebar-hoverable .side:hover{width:280px; z-index:50; box-shadow: var(--shadow);}
body.sidebar-collapsed.sidebar-hoverable .side:hover .usercard,
body.sidebar-collapsed.sidebar-hoverable .side:hover .small,
body.sidebar-collapsed.sidebar-hoverable .side:hover .side-logs{display:block}
body.sidebar-collapsed.sidebar-hoverable .side:hover .nav .nav-label{display:block}
body.sidebar-collapsed.sidebar-hoverable .side:hover .nav .nav-item,
body.sidebar-collapsed.sidebar-hoverable .side:hover .nav .nav-group-head{justify-content:flex-start; padding:10px 10px}


/* Compact density mode */
body.density-compact .pad{padding:12px}
body.density-compact .btn{padding:8px 10px;border-radius:10px}
body.density-compact .input, body.density-compact .select, body.density-compact .textarea, body.density-compact select{padding:8px 10px;border-radius:10px}
body.density-compact .table th, body.density-compact .table td{padding:8px 10px}
body.density-compact .nav .nav-item, body.density-compact .nav .nav-group-head{padding:8px 9px}
body.density-compact .nav .nav-label{font-size:clamp(11.5px, 1.15vw, 12.5px)}


/* Accessibility: focus visible */
:focus-visible{outline:none; box-shadow: var(--focus);}

.ico[data-ico="search"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Ccircle%20cx=%2211%22%20cy=%2211%22%20r=%227%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22/%3E%3Cpath%20d=%22M20%2020l-3.5-3.5%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Ccircle%20cx=%2211%22%20cy=%2211%22%20r=%227%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22/%3E%3Cpath%20d=%22M20%2020l-3.5-3.5%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E")}

/* Top global search (enterprise) */

.top-global-search{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--control-border);
  background:var(--control-bg);
  border-radius:14px;
  padding:5px 8px;
  min-width:160px;
  box-shadow:var(--shadow2);
}
.top-global-search input{
  border:0;
  outline:none;
  background:transparent;
  min-width:100px;
  width:160px;
  color:var(--control-text);
  font-weight:700;
  font-size:13px;
}
.top-global-search .ico{width:16px;height:16px;opacity:.7;background:currentColor;color:var(--control-text)}
.top-global-search .iconbtn{padding:5px;border-radius:12px;box-shadow:none;border:0;background:transparent}
.top-global-search:focus-within{box-shadow:var(--focus);border-color:rgba(var(--accent-rgb),.45)}
@media(max-width:1100px){.top-global-search{min-width:130px} .top-global-search input{width:130px}}
@media(max-width:900px){.top-global-search{display:none}}
/* Global search results */
.gresults{display:grid;gap:10px}
.gresults .gsec{border:1px solid var(--border);border-radius:12px;background:var(--panel);padding:10px 10px}
.gresults .gsec-title{display:flex;justify-content:space-between;align-items:center;font-weight:800;margin-bottom:6px}
.gresults .glist{display:grid;gap:6px}
.gresults .gitem{display:flex;gap:10px;align-items:flex-start;border:1px solid rgba(15,23,42,.06);border-radius:10px;padding:8px 10px;background:rgba(2,6,23,.02);cursor:pointer}
.gresults .gitem:hover{border-color:rgba(37,99,235,.35);background:rgba(37,99,235,.06)}
.gresults .gitem.active{border-color:rgba(37,99,235,.55);background:rgba(37,99,235,.10)}
.gresults .gmeta{font-size:12px;color:var(--muted);margin-top:2px}
.gresults .glabel{font-size:12px;color:var(--muted2);font-weight:700}

/* Row focus highlight (global search) */
.row-focus{outline:2px solid rgba(var(--accent-rgb),.55); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.12); border-radius:10px}



/* Login input readability fix */
.auth-wrap input.input{
  background: var(--panel) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
}
.auth-wrap input.input::placeholder{
  color: rgba(107,114,128,.9) !important;
}


/* ===== Enterprise hotfix: icon masks, cursor, sidebar/rightbar behaviors ===== */

/* Base icon mask rendering */
.ico{
  display:inline-block;
  width:18px;
  height:18px;
  background: currentColor;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* Add chevron icon for right panel toggle */
.ico[data-ico="chev"]{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M15%206l-6%206%206%206%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M15%206l-6%206%206%206%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
}

body.rightbar-collapsed .ico[data-ico="chev"]{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M9%206l6%206-6%206%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M9%206l6%206-6%206%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
}

/* Make toggle overlay sit on the brand mark without consuming layout */
.topbrand{gap:10px}
.brand-mark{position:relative}
.sidebar-toggle-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:14px;
  opacity:.0;
  background:transparent;
  z-index:6;
  pointer-events:auto;
}

.topbrand:hover .sidebar-toggle-overlay{opacity:1}
.sidebar-toggle-overlay:hover{background:rgba(0,0,0,.04)}
body[data-mode="dark"] .sidebar-toggle-overlay:hover{background:rgba(255,255,255,.06)}

/* Sidebar rail + tooltips */
.sidebar-collapsed aside.side{padding:14px 10px}
.sidebar-collapsed .nav a.nav-item, .sidebar-collapsed .nav button.nav-group-head{justify-content:center}
.sidebar-collapsed .nav .nav-text{display:none}
.sidebar-collapsed .nav a.nav-item::after, .sidebar-collapsed .nav button.nav-group-head::after{
  content: attr(data-label);
  position:absolute;
  left: calc(100% + 10px);
  top:50%;
  transform:translateY(-50%);
  background: var(--card);
  color: var(--text);
  border:1px solid var(--border);
  padding:6px 10px;
  border-radius:10px;
  font-size:12px;
  white-space:nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  opacity:0;
  pointer-events:none;
  z-index:9999;
}
.sidebar-collapsed .nav a.nav-item:hover::after, .sidebar-collapsed .nav button.nav-group-head:hover::after{opacity:1}

/* Right panel toggle placement */
.rtabs{display:flex;align-items:center;gap:6px}
.rtabs-spacer{flex:1}
.rtab-toggle{margin-left:auto;min-width:36px;padding:8px 10px}
body.rightbar-collapsed aside.right{display:none}

/* When rightbar is collapsed, reclaim space */
body.rightbar-collapsed .app{grid-template-columns:260px 1fr 0px}

/* Compact density */
body.density-compact{--pad:12px}
body.density-compact .card.pad{padding:12px}
body.density-compact .btn{padding:7px 10px}
body.density-compact .input, body.density-compact input, body.density-compact select, body.density-compact textarea{padding:8px 10px}
body.density-compact .nav a.nav-item{padding:8px 10px}
body.density-compact .table th, body.density-compact .table td{padding:8px}

/* Inputs: enforce enterprise readability (prevents black fields / invisible text) */
input, textarea, select, .input{
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
}
input::placeholder, textarea::placeholder{color: var(--muted)}
input:focus, textarea:focus, select:focus, .input:focus{outline:none; box-shadow: 0 0 0 3px rgba(59,130,246,.18); border-color: rgba(59,130,246,.55)}
input:-webkit-autofill{
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 99999s ease-in-out 0s;
}

/* Theme-adaptive custom cursor (no delay). Uses current theme vars. */
body.app-cursor-on, body.app-cursor-on *{cursor:none !important}
.app-cursor{
  position:fixed;
  left:0;top:0;
  width:22px;height:22px;
  transform:translate(-100px,-100px);
  pointer-events:none;
  z-index:2147483647;
  color: var(--text);
  opacity:1;
}
.app-cursor .app-cursor-arrow{
  width:18px;height:18px;
  background: currentColor;
  -webkit-mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M5%204l14%209-7%202%202%207-3%201-2-7-7-2z%22/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M5%204l14%209-7%202%202%207-3%201-2-7-7-2z%22/%3E%3C/svg%3E");
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.20));
}
body[data-mode="dark"] .app-cursor .app-cursor-arrow{
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.55));
}
.app-cursor.is-text .app-cursor-arrow{display:none}
.app-cursor .app-cursor-ibar{
  display:none;
  width:10px;height:18px;
  border-left:2px solid currentColor;
  border-right:2px solid currentColor;
  border-radius:4px;
  margin-left:6px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
}
.app-cursor.is-text .app-cursor-ibar{display:block}

body.sidebar-collapsed.rightbar-collapsed .app{grid-template-columns:72px 1fr 0px}


/* Ensure modal close buttons are always clickable */
.modal{position:fixed;inset:0;z-index:10000}
.modal .panel{position:relative;z-index:10001}
.modal .head{position:relative;z-index:10002}
.modal .head .btn{position:relative;z-index:10003;pointer-events:auto}


/* Native cursor baseline (always visible) */
body{cursor:default}
a,button,[role="button"],.btn{cursor:pointer}
input,textarea,select,[contenteditable="true"]{cursor:text}


/* Sidebar temporary open state */
body.sidebar-tempopen .side{box-shadow:0 12px 28px rgba(0,0,0,.18)}


/* Expand main content when sidebar is collapsed */
body.sidebar-collapsed .app{ grid-template-columns:72px 1fr 320px; }
@media(max-width: 980px){ body.sidebar-collapsed .app{ grid-template-columns:72px 1fr; } }


/* Announcement bar: avatar + name (enterprise layout) */
.announce-bar{ display:flex; align-items:stretch; gap:10px; }
.announce-left{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:56px; flex:0 0 56px; }
.announce-avatar{ width:36px; height:36px; border-radius:12px; overflow:hidden; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; }
.announce-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.announce-avatar .initials{ font-size:12px; font-weight:800; letter-spacing:.04em; }
.announce-who{ font-size:10px; line-height:1.2; text-align:center; opacity:.9; max-width:56px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.announce-body{ display:flex; flex-direction:column; min-width:0; }


/* Theme-adaptive enterprise scrollbars */
:root{
  --scroll-track: rgba(255,255,255,.06);
  --scroll-thumb: rgba(255,255,255,.18);
  --scroll-thumb-hover: rgba(255,255,255,.26);
}
body[data-mode="light"]{
  --scroll-track: rgba(0,0,0,.06);
  --scroll-thumb: rgba(0,0,0,.18);
  --scroll-thumb-hover: rgba(0,0,0,.28);
}
*{ scrollbar-color: var(--scroll-thumb) var(--scroll-track); scrollbar-width: thin; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background: var(--scroll-track); border-radius:999px; }
*::-webkit-scrollbar-thumb{ background: var(--scroll-thumb); border-radius:999px; border:2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover{ background: var(--scroll-thumb-hover); background-clip: padding-box; }
.vscroll{ scrollbar-gutter: stable; }


/* Login / schedule notifications readability */
#schedNotifBody{ font-size:14px; line-height:1.6; color:var(--text); max-height:52vh; overflow:auto; }
#schedNotifMeta{ opacity:.9; }


/* Mini avatars for lists */
.mini-avatar{ width:30px; height:30px; border-radius:10px; overflow:hidden; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); display:inline-flex; align-items:center; justify-content:center; flex:0 0 30px; }
.mini-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.mini-avatar .initials{ font-size:11px; font-weight:800; letter-spacing:.04em; }


/* Enterprise Toasts */
.toast-host{
  position: fixed;
  top: 14px;
  right: 14px;
  display: grid;
  gap: 10px;
  z-index: 99999;
}
.toast{
  min-width: 220px;
  max-width: 360px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  font-size: 13px;
  transform: translateY(-6px);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show{ opacity: 1; transform: translateY(0); }
.toast.ok{ border-color: rgba(34,197,94,.35); }
.toast.warn{ border-color: rgba(245,158,11,.35); }
.toast.danger{ border-color: rgba(239,68,68,.35); }

/* Confirmation modal */
.confirm-modal .panel{ max-width: 520px; }
.confirm-modal .btn.danger{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.35);
  color: var(--text);
}

/* Mandatory Attendance */
body.attendance-locked #app{
  pointer-events: none;
  user-select: none;
  filter: blur(0.5px);
}
.attendance-modal{ z-index: 100000; }
.attendance-modal .panel{ max-width: 640px; }
.avatar-lg{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--soft);
  display: grid;
  place-items: center;
  font-weight: 900;
  letter-spacing: .5px;
  overflow: hidden;
}
.avatar-lg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Reduce top search width for enterprise density */
.top-global-search{
  max-width: 420px;
}
@media (max-width: 980px){
  .top-global-search{ max-width: 280px; }
}

/* ===============================
   Enterprise bottom dock layout
   - Clocks: bottom-left
   - Quick links: lower center
   - Online users bar: above dock (4 sections incl. Developer Access)
================================ */
:root{ --mums-dock-h: 86px; --mums-onlinebar-h: 44px; }


.online-users-bar{
  position:fixed;
  left:0; right:0;
  bottom: var(--mums-dock-h);
  z-index: 1999;
  padding: 6px 14px;
  /* Theme-adaptive enterprise surface (visible across all themes) */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-1) 0%, transparent) 0%,
    color-mix(in srgb, var(--surface-1) 72%, transparent) 55%,
    color-mix(in srgb, var(--surface-1) 88%, transparent) 100%
  );
  border-top: 1px solid color-mix(in srgb, var(--border-0) 55%, transparent);
  backdrop-filter: blur(10px);
}

.onlinebar-inner{
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 12px;
  align-items: center;
}
.onlinebar-sec{
  border: 1px solid color-mix(in srgb, var(--border-0) 55%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-1) 68%, transparent);
  padding: 6px 10px;
  min-height: var(--mums-onlinebar-h);
  display:flex;
  flex-direction: column;
  justify-content:center;
  gap: 4px;
}
.onlinebar-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.onlinebar-title{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.onlinebar-count{font-size:11px;font-weight:900;color:var(--muted)}
.onlinebar-list{display:flex;gap:6px;align-items:center;min-height:24px;overflow:hidden}
.online-pill{
  width: 22px; height: 22px;
  border-radius: 999px;
  display:inline-grid;
  place-items:center;
  overflow:hidden;
  border: 2px solid rgba(34,197,94,.75); /* green by default */
  background: rgba(255,255,255,.06);
  box-shadow: 0 6px 14px rgba(0,0,0,.22);
  flex: 0 0 22px;
}
.online-pill.is-red{ border-color: rgba(255,91,110,.82); }
.online-pill img{width:100%;height:100%;object-fit:cover;display:block}
.online-pill .ini{font-size:10px;font-weight:950;color:var(--text);opacity:.95}

.quicklinks-bar{
  height: var(--mums-dock-h);
  display:block;
  padding: 10px 14px;
}
.quicklinks-bar{position:fixed;left:0;right:0;bottom:0;}
.quicklinks-bar{z-index:2000;}
.quicklinks-bar{overflow:hidden;}
.quicklinks-bar{align-items:stretch;}

/* Absolute positioning inside the dock ensures "true center" quick links */
.quicklinks-bar{position:fixed;}
.quicklinks-bar{display:block;}
.quicklinks-bar{contain:layout paint;}

.clocks-wrap{
  position:absolute;
  left:14px;
  bottom:10px;
  margin-left:0 !important;
  max-width: 46vw;
}

.quicklinks-inner{
  position:absolute;
  left:50%;
  bottom:10px;
  transform: translateX(-50%);
  justify-content:center;
  width: min(980px, 70vw);
}

/* Ensure the app body never gets hidden behind the online bar + dock.
   Keep this tight so we don't waste vertical real estate. */
.app{ padding-bottom: calc(var(--mums-dock-h) + var(--mums-onlinebar-h) + 18px); }

/* When a modal is open, prevent fixed overlays (dock + online bar) from intercepting clicks.
   This also avoids visual "overlap" when modals are positioned close to the bottom. */
body.modal-open .online-users-bar,
body.modal-open .quicklinks-bar{pointer-events:none;opacity:.22;filter:saturate(.9)}

@media (max-width: 980px){
  :root{ --mums-onlinebar-h: 40px; }
  .onlinebar-inner{grid-template-columns: 1fr; gap: 8px; }
  .clocks-wrap{ max-width: 100%; }
  .quicklinks-inner{ width: 92vw; }
}


/* === My Schedule (enterprise) === */
/* Namespace is `mys-*` to avoid collisions with the Master Schedule (`ms-*`). */
.mys-header{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.mys-title{font-size:22px;font-weight:900;letter-spacing:-.01em}
.mys-kpis{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:10px}
@media(max-width:1100px){.mys-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.mys-kpis{grid-template-columns:1fr}}
.mys-kpi-card{min-height:86px;display:flex;flex-direction:column;justify-content:center}
.mys-kpi-main{font-size:16px;font-weight:900;margin-top:2px}
.mys-card-title{font-weight:900;font-size:14px}
.mys-timeline{display:flex;flex-direction:column;gap:12px;position:relative}
.mys-item{display:grid;grid-template-columns:14px 1fr;gap:12px;align-items:flex-start;position:relative}
.mys-item:before{content:"";position:absolute;left:6px;top:14px;bottom:-14px;width:2px;background:rgba(2,6,23,.08)}
.mys-item:last-child:before{display:none}
.mys-dot{width:14px;height:14px;border-radius:999px;border:2px solid rgba(37,99,235,.35);background:rgba(37,99,235,.12);margin-top:2px}
.mys-item.past .mys-dot{border-color:rgba(2,6,23,.12);background:rgba(2,6,23,.04)}
.mys-item.now .mys-dot{border-color:rgba(22,163,74,.40);background:rgba(22,163,74,.16)}
.mys-item-main{min-width:0}
.mys-item-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.mys-time{font-size:12px;color:var(--muted);font-weight:800}
.mys-task{font-weight:900;font-size:14px;margin-top:2px}
.mys-empty{padding:14px;border:1px dashed var(--border);border-radius:14px;background:rgba(2,6,23,.01)}
.mys-empty-title{font-weight:900;margin-bottom:4px}
.mys-week{margin-top:10px}
.mys-week-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:10px;margin-top:12px}
@media(max-width:960px){.mys-week-grid{grid-template-columns:1fr}}
.mys-week-card{border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.02);padding:12px}
.mys-week-card.today{border-color:rgba(37,99,235,.45);box-shadow:0 0 0 3px rgba(37,99,235,.10)}
.mys-week-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mys-week-day{font-weight:950}
.mys-week-range{margin-top:6px;font-size:12px;color:var(--muted);font-weight:800}
.mys-week-list{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.mys-week-row{display:flex;gap:10px;align-items:flex-start;min-width:0}
.mys-week-time{font-size:11px;color:var(--muted);font-weight:900;flex:0 0 auto}
.mys-week-task{font-size:12px;font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* === GMT Overview (World Clocks modal) === */
.gmt-overview{margin-top:14px;border:1px solid var(--border);background:rgba(255,255,255,.03);border-radius:16px;padding:14px}
.gmt-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.gmt-controls{flex:1 1 320px;max-width:520px}
.gmt-grid{margin-top:12px;display:grid;grid-template-columns:repeat(auto-fit, minmax(140px,1fr));gap:10px}
.gmt-page{overflow-x:hidden}
.gmt-grid,.gmt-page-layout{min-width:0}
.gmt-tile{min-width:0}
@media (max-width:1100px){.gmt-grid{grid-template-columns:repeat(4, minmax(120px,1fr))}}
@media (max-width:760px){.gmt-grid{grid-template-columns:repeat(2, minmax(120px,1fr))}}
.gmt-tile{border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.14);border-radius:14px;padding:12px;text-align:left;cursor:pointer}
.gmt-tile:hover{border-color:rgba(255,255,255,.18);background:rgba(0,0,0,.18)}
.gmt-tile-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.gmt-tile-time{font-size:22px;font-weight:900;letter-spacing:.4px;line-height:1.1}

/* === Settings hub: compact enterprise density === */
.settings-card .small.muted{margin-top:4px !important;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.settings-card > div[style]{margin-top:0 !important}
#settingsModal .panel{width:min(860px,100%)}
#settingsModal .panel .body{padding-bottom:22px}

/* === GMT Overview page: prevent horizontal scroll === */
.gmt-page-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
.gmt-page-layout > *{min-width:0}
@media (max-width:1100px){.gmt-page-layout{grid-template-columns:1fr}}
/* Ensure all app panels can shrink without forcing overflow */
.main, .right, .side, .topbar, .app, .card{min-width:0}


/* =========================
   Mailbox Counter (enterprise)
   ========================= */
.mbx-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.mbx-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.mbx-card{
  border:1px solid var(--card-border);
  background: var(--card-bg);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow);
}
.mbx-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.mbx-title{ display:flex; flex-direction:column; gap:2px; }
.mbx-shift-title{
  font-size:18px;
  font-weight:900;
  letter-spacing:0.2px;
}
.mbx-tools{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.mbx-table-wrap{ width:100%; overflow:auto; border-radius:14px; }
.table.mbx-table{
  width:100%;
  min-width: 760px;
}
.table.mbx-table th, .table.mbx-table td{
  /* Compact enterprise density (~70% of default row height) */
  padding: 7px 9px;
  vertical-align: middle;
}
.table.mbx-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(10,18,32,0.88);
  /* Theme-adaptive header surface (prevents unreadable text in light themes) */
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  backdrop-filter: blur(10px);
}
.table.mbx-table tfoot td{
  background: rgba(10,18,32,0.55);
  background: color-mix(in srgb, var(--surface-1) 74%, transparent);
  font-weight: 800;
}
.mbx-name{ cursor: default; }
.mbx-tr.mbx-assignable{ cursor: pointer; }
.mbx-tr.mbx-assignable:hover td{
  background: rgba(64,160,255,0.06);
}
.mbx-member-grid{
  display:grid;
  grid-template-columns: minmax(200px, 1.8fr) minmax(120px, 1fr);
  gap: 10px;
  align-items: center;
}
.mbx-name-col{ min-width:0; }
.mbx-name-main{
  font-weight: 850;
  font-size: 13px;
  letter-spacing:0.1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mbx-name-sub{
  margin-top: 2px;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.12px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-muted) 90%, transparent);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mbx-duty-col{
  text-align:center;
  font-size: 11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color: color-mix(in srgb, var(--text-0) 88%, transparent);
}
.mbx-th{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.mbx-th-top{ font-size:10px; font-weight:800; opacity:0.68; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.mbx-th-time{ font-weight:850; }
.mbx-num{
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
.mbx-time-th{ text-align: center; }
.mbx-count-td{ text-align: center; }
.mbx-total{ text-align: center; }
.mbx-foot{ font-weight: 900; letter-spacing:0.2px; }

.table.mbx-table .active-col{
  box-shadow: inset 0 0 0 1px rgba(64,160,255,0.45), inset 0 0 22px rgba(64,160,255,0.12);
  background: rgba(64,160,255,0.06);
}
@media (max-width: 920px){
  .table.mbx-table{ min-width: 680px; }
  .mbx-card{ padding: 12px; border-radius: 16px; }
  .mbx-actions .btn{ padding: 10px 12px; }
}

/* Compact export/import controls (enterprise density) */
.btn[id*="Export"],
.btn[id*="Import"],
.btn[data-act="export"],
.btn[data-act="import"]{
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.1;
}


/* Mailbox: My Assigned Cases panel */
.mbx-mine-wrap{display:grid;gap:10px}
.mbx-mine-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--card-border);
  border-radius:14px;
  background: color-mix(in srgb, var(--surface-1) 70%, transparent);
}
.mbx-mine-title{font-weight:900;letter-spacing:0.2px}

/* Small button size (enterprise compact) */
.btn.sm{
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.1;
}

/* Mailbox: Case monitoring table */
.mbx-monitor-wrap{width:100%}
.mbx-mon-scroll{overflow:auto;border-radius:14px;border:1px solid var(--card-border)}
.mbx-mon-table{width:100%;border-collapse:separate;border-spacing:0;min-width:740px}
.mbx-mon-table th,.mbx-mon-table td{
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-0, var(--border)) 60%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--border-0, var(--border)) 40%, transparent);
  background: color-mix(in srgb, var(--surface-0) 74%, transparent);
  font-variant-numeric: tabular-nums;
}
.mbx-mon-table th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  backdrop-filter: blur(10px);
}
.mbx-mon-table th:last-child,.mbx-mon-table td:last-child{border-right:0}
.mbx-mon-cell{font-weight:850;text-align:center}
.mbx-mon-cell.empty{background: color-mix(in srgb, var(--surface-0) 55%, transparent)}
.mbx-mon-cell.confirmed{
  background: rgba(148,163,184,0.25);
  color: color-mix(in srgb, var(--text-0) 80%, transparent);
}
.mbx-mon-head .mbx-mon-name{
  display:flex;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
}
/* --------------------------------------------------------------------------
   Theme visibility hardening
   Ensures text remains readable across all theme presets (esp. light themes).
   -------------------------------------------------------------------------- */
.sp-photo{
  border:1px solid var(--border-0, var(--border));
  background:rgba(var(--accent-rgb,74,163,255),.10);
}
body[data-mode="light"] .sp-photo{background:rgba(15,23,42,.04)}
.sp-photo .initials{color:var(--text-0, var(--text))}

.sp-duty{color:var(--text-0, var(--text))}
.sp-duty .muted{color:var(--text-muted, var(--muted))}
.sp-shift,.sp-team{color:var(--text-muted, var(--muted))}

.sp-position{
  background:rgba(var(--accent-rgb,74,163,255),.10);
  border:1px solid rgba(var(--accent-rgb,74,163,255),.22);
  color:var(--text-0, var(--text));
}

/* Generic initials should follow theme text token */
.avatar .initials{color:var(--text-0, var(--text))}

/* --------------------------------------------------------------------------
   Mobile layout hardening (enterprise look on small screens)
   -------------------------------------------------------------------------- */
@media (max-width: 768px){
  /* =========================================================
     MOBILE LAYOUT (Rebuild v2 — ≤768px)
     Goals:
     - Enterprise-grade single-column content with drawers
     - Main content always visible (no fixed overlay bars blocking)
     - Bottom utility bars hidden by default; accessible via toggles / FABs
     ========================================================= */

  /* Keep touch targets readable on mobile (disable global downscaling). */
  html{ --app-scale: 1 !important; }
  body{ font-size: 13px; line-height: 1.35; }

  /* Single-column shell */
  .app{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    height: 100vh;
    min-height: 100vh;
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  /* Topbar: clean + compact */
  .topbar{
    grid-template-columns: 1fr !important;
    gap: 10px;
    padding: 12px 12px 10px;
  }
  .topbar-center{ display:none !important; }

  /* Reduce action clutter on mobile; keep essential controls */
  .top-global-search{ display:none !important; }
  #realtimeSyncStatus{ display:none !important; }
  #releaseNotesBtn, #dictionaryBtn{ display:none !important; }
  #settingsBtn{ display:inline-grid !important; }
  #mobilePanelToggle{ display:inline-grid !important; }

  /* Ensure mobile-only toggles are visible */
  #toggleUserOnlineBar, #toggleQuickLinksBar{ display:inline-grid !important; }

  /* Cards + controls density */
  .card.pad{ padding: 14px !important; border-radius: 16px !important; }
  .btn{ padding: 9px 10px; border-radius: 12px; font-size: 13px; }
  .btn.iconbtn{ width: 36px; height: 36px; }
  #logoutBtn{ padding: 9px 12px; }
  .input, .select, .textarea, select{ padding: 9px 10px; border-radius: 12px; font-size: 13px; }

  /* Hide desktop sidebar/right panel; use drawers */
  aside.side, aside.right{
    position: fixed !important;
    top: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    height: auto !important;
    max-height: none !important;
    width: 86vw !important;
    max-width: 380px;
    z-index: 5000;
    transform: translateX(-110%);
    transition: transform .18s ease;
  }
  aside.right{
    left: auto;
    right: 12px;
    transform: translateX(110%);
  }

  body.mobile-nav-open aside.side{ transform: translateX(0); }
  body.mobile-panel-open aside.right{ transform: translateX(0); }

  /* Mobile drawer overlay (also used by bottom sheets) */
  .mobile-drawer-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.46);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    z-index: 4500;
  }
  body.mobile-nav-open .mobile-drawer-overlay,
  body.mobile-panel-open .mobile-drawer-overlay,
  body.mobile-online-open .mobile-drawer-overlay,
  body.mobile-quicklinks-open .mobile-drawer-overlay{
    opacity: 1;
    pointer-events: auto;
  }

  /* Main content: full width */
  .main.card.pad{ border-radius: 18px !important; }
  .main{ padding: 12px !important; }

  /* ==========================================
     Bottom sheets (Quick Links + Online Users)
     Hidden by default; slide in on toggle.
     ========================================== */
  .online-users-bar,
  .quicklinks-bar{
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--border-0) 75%, transparent);
    background: color-mix(in srgb, var(--surface-1) 92%, transparent);
    box-shadow: 0 22px 60px rgba(0,0,0,.40);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transform: translateY(130%);
    opacity: 0;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
    overflow: hidden;
    z-index: 5200;
  }
  body.mobile-online-open .online-users-bar,
  body.mobile-quicklinks-open .quicklinks-bar{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Sheet headers (injected/templated) */
  .mob-sheet-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-0) 70%, transparent);
  }
  .mob-sheet-title{
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .mob-sheet-actions{ display:flex; align-items:center; gap: 8px; }
  .mob-sheet-close{
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border-0) 70%, transparent);
    background: transparent;
    color: var(--text);
    display:grid;
    place-items:center;
    cursor:pointer;
  }

  /* Online Users sheet */
  .online-users-bar{ max-height: 64vh; }
  .online-users-bar .onlinebar-inner{ padding: 10px 12px 12px; overflow:auto; -webkit-overflow-scrolling:touch; }
  .online-users-bar .onlinebar-col{ border:0; background:transparent; padding: 0; }
  .online-users-bar details.onlinebar-acc{
    border: 1px solid color-mix(in srgb, var(--border-0) 70%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-0) 60%, transparent);
    overflow:hidden;
    margin: 10px 0 0;
  }
  .online-users-bar details.onlinebar-acc:first-child{ margin-top: 0; }
  .online-users-bar details.onlinebar-acc > summary{
    list-style:none;
    cursor:pointer;
    padding: 10px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-weight: 900;
  }
  .online-users-bar details.onlinebar-acc > summary::-webkit-details-marker{ display:none; }
  .online-users-bar details.onlinebar-acc .onlinebar-badges{ padding: 0 12px 12px; }

  /* Quick Links sheet */
  .quicklinks-bar{
    height: auto !important;
    max-height: 64vh;
    padding: 0;
  }
  .quicklinks-bar .clocks-wrap{
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100%;
    max-width: 100%;
    padding: 10px 12px 0;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    justify-content:flex-start;
  }
  .quicklinks-bar .wclock{ min-width: 116px; padding: 6px 8px; border-radius: 14px; }
  .quicklinks-bar .wclock .wc-h{ font-size: 18px; }
  .quicklinks-bar .wclock .wc-m{ font-size: 16px; }
  .quicklinks-bar .wclock .wc-sec{ font-size: 11px; }

  .quicklinks-bar .quicklinks-inner{
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 10px;
    justify-items: center;
  }
  .quicklinks-bar .qitem{ width: 100%; max-width: none; }
  .quicklinks-bar .qlabel{ max-width: 100%; }
  .quicklinks-bar .qcircle{ width: 40px; height: 40px; }

  /* Floating action buttons (quick access) */
  .mobile-fab-stack{
    position: fixed;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
    gap: 10px;
    z-index: 5300;
  }
  .mobile-fab-stack .fab{
    width: 46px;
    height: 46px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--border-0) 70%, transparent);
    background: color-mix(in srgb, var(--surface-1) 88%, transparent);
    color: var(--text);
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
    display:grid;
    place-items:center;
  }
  .mobile-fab-stack .fab .ico{ width: 20px; height: 20px; }

  /* Make all tables horizontally scrollable */
  .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table thead,.table tbody,.table tr{display:table;width:100%;table-layout:fixed}
  table{min-width:680px}
}


/* Realtime Sync Status badge */
.sync-status{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.72);box-shadow:var(--shadow2);font-size:12px;color:var(--muted);line-height:1}
.sync-status .dot{width:8px;height:8px;border-radius:50%;background:var(--muted2)}
.sync-status.ok .dot{background:var(--ok)}
.sync-status.poll .dot{background:var(--warn)}
.sync-status.off .dot{background:var(--danger)}
.sync-status .label{font-weight:700;color:var(--muted)}
.sync-status .state{font-weight:700;color:var(--text)}

/* Mandatory realtime blocker (enterprise-safe: prevents divergent edits) */
.realtime-blocker{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:rgba(10,12,16,.62);backdrop-filter:blur(5px)}
.realtime-blocker-card{width:min(560px,calc(100% - 32px));background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow4);padding:18px 18px 14px;color:var(--text)}
.realtime-blocker-card .rt-head{margin-bottom:12px}
.realtime-blocker-card .rt-title{font-size:16px;font-weight:800;letter-spacing:.2px;margin-bottom:4px}
.realtime-blocker-card .rt-sub{font-size:12px;color:var(--muted);line-height:1.4}
.realtime-blocker-card .rt-body{display:flex;flex-direction:column;gap:10px}
.realtime-blocker-card .rt-status{display:flex;align-items:center;gap:10px;font-weight:700}
.realtime-blocker-card .rt-dot{width:10px;height:10px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 4px rgba(255,184,0,.15)}
.realtime-blocker-card .rt-detail{font-size:12px;color:var(--muted);line-height:1.4;word-break:break-word}
.realtime-blocker-card .rt-hint{font-size:12px;color:var(--muted);line-height:1.4;background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:10px}
.realtime-blocker-card .rt-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}

@media (max-width:720px){
  .sync-status{display:none}
}

/* =====================================================================
   Classic Style Theme (Enterprise UI/UX)
   - Timeless admin dashboard layout + hierarchy
   - Applies only when Settings > THEME = Classic Style
   ===================================================================== */

body[data-theme="classic_style"]{
  background: var(--bg);
  color: var(--text);
}

/* Remove glossy/aurora effects; prefer clean, flat surfaces */
body[data-theme="classic_style"] .card{
  background: var(--panel);
  border-color: var(--border);
  box-shadow: var(--shadow2);
  border-radius: 10px;
}
body[data-theme="classic_style"] .card.pad{ padding: 18px; }

/* App grid spacing (tight, classic) */
body[data-theme="classic_style"] .app{
  gap: 12px;
  padding: 12px;
}

/* Top bar: fixed/sticky classic header */
body[data-theme="classic_style"] .topbar{
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow2);
}

body[data-theme="classic_style"] .topbrand{
  border: 0;
  background: transparent;
  padding: 0;
}
body[data-theme="classic_style"] .brand-name{
  text-shadow: none;
  letter-spacing: .02em;
}
body[data-theme="classic_style"] .brand-mark{
  box-shadow: none;
}
body[data-theme="classic_style"] .brand-sub{ color: var(--muted); }

/* Manila clock pill (injected by app.js for Classic Style) */
body[data-theme="classic_style"] #classicManilaClock{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(var(--accent-rgb), .08);
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}
body[data-theme="classic_style"] .topbar-center{
  flex-direction: column;
  gap: 8px;
}

/* Global search: classic input sizing */
body[data-theme="classic_style"] .top-global-search{
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 10px;
}
body[data-theme="classic_style"] #globalSearchInput{
  font-size: 13px;
  padding: 10px 10px;
}

/* Sidebar: fixed nav, classic emphasis */
body[data-theme="classic_style"] aside.side{
  padding: 14px !important;
}
body[data-theme="classic_style"] .nav .nav-item,
body[data-theme="classic_style"] .nav .nav-group-head{
  border-radius: 8px;
  padding: 9px 10px;
}
body[data-theme="classic_style"] .nav .nav-label{
  font-size: 13px;
  font-weight: 800;
}
body[data-theme="classic_style"] .nav .nav-item:hover,
body[data-theme="classic_style"] .nav .nav-group-head:hover{
  background: rgba(var(--accent-rgb), .06);
  border-color: rgba(var(--accent-rgb), .18);
}
body[data-theme="classic_style"] .nav .nav-item.active{
  background: rgba(var(--accent-rgb), .10);
  border-color: rgba(var(--accent-rgb), .30);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Right panel: scrollable + sticky header */
body[data-theme="classic_style"] aside.right{
  overflow: auto;
}
body[data-theme="classic_style"] .rtabs{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

/* Tables: zebra striping + classic header */
body[data-theme="classic_style"] table tr:nth-child(even) td{
  background: rgba(15,23,42,.02);
}
body[data-theme="classic_style"] th{
  background: rgba(15,23,42,.03);
  color: var(--muted);
}

/* Footer bars: neutral + enterprise borders */
body[data-theme="classic_style"] .online-users-bar,
body[data-theme="classic_style"] .quicklinks-bar{
  background: var(--panel);
  border-top: 1px solid var(--border);
}

/* Responsive: tighten spacing on tablets/mobiles while preserving classic layout */
@media(max-width: 980px){
  body[data-theme="classic_style"] .topbar{ border-radius: 12px; }
}

/* Classic Style: dark mode fine-tuning (auto mode) */
body[data-theme="classic_style"][data-mode="dark"] table tr:nth-child(even) td{
  background: rgba(255,255,255,.035);
}
body[data-theme="classic_style"][data-mode="dark"] th{
  background: rgba(255,255,255,.05);
  color: var(--muted);
}
body[data-theme="classic_style"][data-mode="dark"] #classicManilaClock{
  background: rgba(var(--accent-rgb), .14);
}