:root { color-scheme: dark; --font-latin:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-khmer:"Hanuman","Noto Sans Khmer","Khmer OS Battambang","Khmer OS",var(--font-latin); --font-body:var(--font-latin); --bg:#071524; --surface:rgba(16,35,56,.9); --surface-strong:#12273d; --line:rgba(170,197,231,.18); --text:#f7fbff; --muted:#a9bbd2; --blue:#1977ff; --cyan:#18c2bd; --green:#18c58f; --amber:#ffad14; --purple:#8b5cf6; --danger:#ff4d67; --calendar-scheduled:#7c6cff; --calendar-clocked:#43d17e; --calendar-task:#f59e3d; --calendar-leave:#38bdf8; --shadow:0 24px 70px rgba(0,0,0,.28); font-family:var(--font-body); }
:root[data-theme="light"] { color-scheme: light; --bg:#eef4fb; --surface:rgba(255,255,255,.92); --surface-strong:#fff; --line:rgba(66,97,135,.18); --text:#10213a; --muted:#647996; --shadow:0 24px 70px rgba(40,75,120,.16); }
*{box-sizing:border-box} body{margin:0;background:radial-gradient(circle at 80% 10%,rgba(24,194,189,.18),transparent 28%),var(--bg);color:var(--text);font-size:14px} a{color:var(--blue);text-decoration:none}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 28px;border-bottom:1px solid var(--line);background:rgba(7,21,36,.82);position:sticky;top:0;z-index:10;backdrop-filter:blur(16px)}:root[data-theme="light"] .topbar{background:rgba(248,251,255,.86)}.brand{display:inline-flex;align-items:center;gap:14px;color:var(--text);min-width:180px}.brand-mark,.avatar,.account-pill span{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;color:white;font-weight:800;background:linear-gradient(145deg,var(--blue),var(--cyan));box-shadow:var(--shadow)}.brand strong,.brand small,.account-pill strong,.account-pill small{display:block}.brand small{color:var(--muted);font-size:12px}.topbar-actions{display:flex;align-items:center;gap:12px;min-width:0}.pill,.account-pill,.circle-btn,.collapse-pill,.soft-btn,.primary-btn{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:12px 18px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer}.primary-btn{border:0;color:white;background:linear-gradient(135deg,var(--blue),#0d62df);box-shadow:0 18px 40px rgba(25,119,255,.25)}.primary-btn.small{padding:12px 20px}.soft-btn{background:rgba(25,119,255,.12);color:var(--blue)}.text-btn{background:transparent;border:0;color:var(--blue);font-weight:800;cursor:pointer}.circle-btn{width:52px;height:52px;padding:0}.account-pill{padding:8px 18px 8px 8px}.layout{display:grid;grid-template-columns:292px minmax(0,1fr);min-height:calc(100vh - 78px)}.sidebar{border-right:1px solid var(--line);padding:28px 18px;background:rgba(7,21,36,.62);position:sticky;top:78px;height:calc(100vh - 78px);overflow:auto}:root[data-theme="light"] .sidebar{background:rgba(248,251,255,.72)}.nav-label{color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:800;margin:26px 8px 10px}.nav-link{display:flex;align-items:center;gap:12px;color:var(--muted);padding:13px 16px;border-radius:18px;font-weight:650;margin:4px 0}.nav-link:hover{background:rgba(25,119,255,.12);color:var(--text)}.page-content{padding:36px;max-width:1500px;width:100%;margin:0 auto}.messages{display:grid;gap:10px;margin-bottom:18px}.message{padding:14px 18px;border-radius:16px;border:1px solid var(--line);background:var(--surface)}.message.success{border-color:rgba(24,197,143,.45)}.message.error{border-color:rgba(255,77,103,.45)}.hero,.panel,.auth-card,.post-card,.column,.setup-card{border:1px solid var(--line);background:var(--surface);border-radius:34px;box-shadow:var(--shadow)}.hero{min-height:210px;padding:44px;display:flex;justify-content:space-between;align-items:center;gap:28px;margin-bottom:26px}.hero.compact{min-height:150px}.hero h1,.auth-card h1{font-size:clamp(34px,4vw,58px);line-height:.95;margin:8px 0 10px;letter-spacing:-.05em}.hero h2,.panel h2,.column h2{margin:0 0 12px;font-size:24px;letter-spacing:-.03em}.eyebrow{color:var(--muted);text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:900;margin:0 0 8px}.muted{color:var(--muted);margin:0}.hero-side{display:grid;gap:14px;min-width:260px}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0 28px}.metric{padding:28px;border-radius:28px;border:1px solid var(--line);background:var(--surface);border-left:7px solid var(--blue)}.metric.green{border-left-color:var(--green)}.metric.amber{border-left-color:var(--amber)}.metric span,.metric small{color:var(--muted);display:block}.metric strong{display:block;font-size:36px;margin:14px 0}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px}.panel{padding:28px;margin-bottom:24px}.auth-card{max-width:760px;margin:70px auto;padding:42px;display:grid;gap:26px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-grid.single{grid-template-columns:1fr}.span-2{grid-column:1/-1}label{color:var(--text);font-weight:800;display:grid;gap:8px}input,textarea,select{width:100%;border:1px solid var(--line);border-radius:16px;padding:15px 16px;background:rgba(3,14,26,.62);color:var(--text);font:inherit}:root[data-theme="light"] input,:root[data-theme="light"] textarea,:root[data-theme="light"] select{background:#f8fbff}.composer textarea{min-height:90px}.composer-row,.inline-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:16px;margin-top:14px}.split-head{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:start}.span-all{grid-column:1/-1}.community-list{display:grid;gap:12px;margin-top:18px}.mini-card,.list-row{border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.04);padding:18px;display:flex;justify-content:space-between;align-items:center;gap:18px;color:var(--text)}.feed-list{display:grid;gap:18px}.post-card{padding:26px}.post-author{display:flex;gap:14px;align-items:center;margin-bottom:18px}.post-author small{color:var(--muted);display:block;margin-top:3px}.reaction-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;border-top:1px solid var(--line);padding-top:16px;margin-top:16px}.reaction{border:1px solid var(--line);background:rgba(25,119,255,.10);color:var(--text);border-radius:999px;padding:8px 12px;cursor:pointer}.comment-count{color:var(--muted);margin-left:auto}.comments{display:grid;gap:8px;margin:16px 0}.comments p{background:rgba(255,255,255,.05);padding:10px 14px;border-radius:14px;margin:0}.comment-form{display:grid;grid-template-columns:1fr auto;gap:10px}.table-card{overflow:auto;border-radius:22px;border:1px solid var(--line)}table{width:100%;border-collapse:collapse;background:var(--surface-strong)}th,td{padding:18px;border-bottom:1px solid var(--line);text-align:left}th{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:12px}td small{display:block;color:var(--muted);margin-top:4px}.status-chip{padding:8px 12px;border-radius:999px;background:rgba(24,197,143,.14);color:var(--green);font-weight:800}.board{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:18px}.column{padding:20px;min-height:320px}.column h2{display:flex;justify-content:space-between}.column h2 span{background:rgba(25,119,255,.12);color:var(--blue);border-radius:999px;padding:5px 11px;font-size:14px}.column.amber h2 span{color:var(--amber)}.column.purple h2 span{color:var(--purple)}.column.green h2 span{color:var(--green)}.task-card{border:1px solid var(--line);border-left:5px solid var(--blue);background:rgba(255,255,255,.04);border-radius:20px;padding:16px;margin:12px 0}.task-card p,.empty-lane{color:var(--muted)}.empty-lane{border:1px dashed var(--line);border-radius:18px;padding:20px;text-align:center}
@media (max-width:980px){.topbar{padding:0 14px}.layout{grid-template-columns:1fr}.sidebar{position:relative;top:0;height:auto;border-right:0;border-bottom:1px solid var(--line)}.page-content{padding:18px}.hero,.two-col,.metric-grid,.board,.composer-row{grid-template-columns:1fr;display:grid}.hero{padding:28px}.topbar-actions .pill{display:none}}


/* Organization workspace controls */
.workspace-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:18px}
.workspace-card{border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:22px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.workspace-card.active{border-color:rgba(25,119,255,.55);box-shadow:0 16px 34px rgba(25,119,255,.14)}
.workspace-card strong,.mini-card strong{display:block;font-size:18px}.workspace-card small,.mini-card small,.mini-card span{display:block;color:var(--muted);margin-top:4px}.mini-card.stacked{align-items:flex-start;display:block}.action-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.danger-btn{border:1px solid rgba(255,77,103,.34);background:rgba(255,77,103,.12);color:#ff6b7d;border-radius:999px;padding:12px 18px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.danger-btn.small,.soft-btn.small{padding:9px 13px;font-size:12px}.muted-chip{background:rgba(148,163,184,.14);color:var(--muted)}.inline-form.two-actions{grid-template-columns:1fr auto}
:root[data-theme="light"] .workspace-card,:root[data-theme="light"] .mini-card,:root[data-theme="light"] .list-row,:root[data-theme="light"] .task-card{background:rgba(255,255,255,.76)}
@media (max-width:980px){.workspace-card{align-items:flex-start;flex-direction:column}.action-row{width:100%}.action-row button{flex:1}}

/* Payroll readiness workspace */
.payroll-readiness-hero { align-items: stretch; }
.payroll-score-card { min-width: 220px; display: grid; gap: 6px; align-content: center; padding: 20px; border: 1px solid var(--line); border-radius: 24px; background: rgba(25,119,255,.12); }
.payroll-score-card span, .payroll-score-card small { color: var(--muted); font-weight: 750; }
.payroll-score-card strong { font-size: clamp(34px, 4vw, 50px); line-height: 1; }
.payroll-score-card--ready { background: rgba(24,197,143,.13); }
.payroll-score-card--review { background: rgba(255,176,32,.13); }
.payroll-score-card--blocked { background: rgba(255,77,103,.12); }
.payroll-readiness-panel { display: grid; gap: 22px; }
.payroll-readiness-grid { display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 14px; }
.payroll-readiness-card { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.04); }
.payroll-readiness-card__head { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.payroll-readiness-card small, .payroll-readiness-card p { color: var(--muted); }
.payroll-readiness-card h3 { margin: 4px 0 0; font-size: 1rem; letter-spacing: -.02em; }
.payroll-readiness-card strong { font-size: 2rem; line-height: 1; }
.payroll-readiness-card p { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.payroll-readiness-card p span, .payroll-readiness-card p em { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 6px 9px; background: rgba(255,255,255,.05); font-style: normal; font-size: .82rem; }
.payroll-readiness-dot { width: 12px; height: 12px; margin-top: 4px; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 5px rgba(24,197,143,.12); }
.payroll-readiness-card.is-warning .payroll-readiness-dot { background: var(--amber); box-shadow: 0 0 0 5px rgba(255,176,32,.12); }
.payroll-readiness-card.is-critical .payroll-readiness-dot { background: var(--danger); box-shadow: 0 0 0 5px rgba(255,77,103,.12); }
:root[data-theme="light"] .payroll-readiness-card { background: rgba(255,255,255,.76); }
@media (max-width:1200px){.payroll-readiness-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.payroll-score-card{min-width:0}.payroll-readiness-grid{grid-template-columns:1fr}.payroll-readiness-card__head{grid-template-columns:12px minmax(0,1fr)}.payroll-readiness-card__head strong{grid-column:2}.payroll-readiness-card{padding:16px}}

/* ERP-MAIN parity polish for standalone auth/shell */
:root {
  --font-body: var(--font-latin);
  --page-gradient-dark:
    radial-gradient(circle at 8% -8%, rgba(20, 120, 255, 0.20), transparent 28rem),
    radial-gradient(circle at 92% 8%, rgba(18, 184, 190, 0.16), transparent 24rem),
    linear-gradient(135deg, #06101e 0%, #0b1b2e 52%, #071221 100%);
  --page-gradient-light:
    radial-gradient(circle at 8% -8%, rgba(20, 120, 255, 0.13), transparent 28rem),
    radial-gradient(circle at 92% 8%, rgba(18, 184, 190, 0.11), transparent 24rem),
    linear-gradient(135deg, #f8fbff 0%, #edf4fb 52%, #fbfdff 100%);
  font-family: var(--font-body);
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--page-gradient-dark);
  font-family: var(--font-body);
  font-weight: 420;
  letter-spacing: -0.012em;
}

:root[data-theme="light"] body {
  background: var(--page-gradient-light);
}

.topbar {
  height: 84px;
  padding: 0 clamp(18px, 2.4vw, 36px);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .08);
}

.brand {
  gap: 12px;
  min-width: 0;
}

.brand-mark.image-mark {
  width: 52px;
  height: 52px;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
}

.brand-mark.image-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.brand strong {
  font-size: .98rem;
  font-weight: 650;
  letter-spacing: -0.03em;
}

.brand small {
  font-size: .74rem;
}

.pill,
.account-pill,
.circle-btn,
.collapse-pill,
.soft-btn,
.primary-btn {
  font-weight: 650;
  box-shadow: none;
}

.super-shell.is-public .layout {
  display: block;
  min-height: calc(100vh - 84px);
}

.super-shell.is-public .page-content {
  max-width: none;
  min-height: calc(100vh - 84px);
  padding: clamp(20px, 4vw, 64px);
}

.super-shell.is-public .messages {
  width: min(100%, 960px);
  margin-inline: auto;
}

.auth-stage {
  display: grid;
  min-height: calc(100vh - 180px);
  place-items: center;
}

.auth-hero-card {
  position: relative;
  isolation: isolate;
  display: grid;
  width: min(100%, 1120px);
  grid-template-columns: minmax(0, .9fr) minmax(340px, .72fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid var(--line);
  border-radius: 34px;
  background:
    radial-gradient(circle at 0% 0%, rgba(20, 120, 255, .18), transparent 24rem),
    radial-gradient(circle at 100% 8%, rgba(18, 194, 189, .16), transparent 22rem),
    color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .26);
  overflow: hidden;
}

:root[data-theme="light"] .auth-hero-card {
  box-shadow: 0 28px 80px rgba(35, 69, 116, .14);
}

.auth-hero-card::after {
  content: "";
  position: absolute;
  inset: auto -8rem -10rem auto;
  width: 24rem;
  height: 24rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(20, 120, 255, .22), transparent 68%);
  z-index: -1;
}

.auth-copy h1 {
  max-width: 11ch;
  margin: 10px 0 14px;
  font-size: clamp(2.65rem, 6vw, 5.3rem);
  line-height: .9;
  letter-spacing: -.07em;
}

.auth-copy .muted {
  max-width: 34rem;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.55;
}

.auth-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.auth-highlights span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 13px;
  background: rgba(25, 119, 255, .12);
  color: var(--text);
  font-size: .82rem;
  font-weight: 700;
}

.auth-form {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

:root[data-theme="light"] .auth-form {
  background: rgba(255, 255, 255, .72);
}

.auth-form.form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-form input {
  min-height: 54px;
  border-radius: 18px;
}

.auth-form .primary-btn {
  min-height: 54px;
  margin-top: 4px;
  border-radius: 18px;
  background: linear-gradient(135deg, #1478ff, #0ea5e9);
}

.auth-switch {
  text-align: center;
}

.auth-card {
  display: none;
}

@media (max-width: 920px) {
  .topbar {
    height: 76px;
  }

  .topbar .public-link {
    display: none;
  }

  .brand-mark.image-mark {
    width: 46px;
    height: 46px;
  }

  .super-shell.is-public .page-content {
    min-height: calc(100vh - 76px);
    padding: 18px;
  }

  .auth-stage {
    min-height: calc(100vh - 112px);
    place-items: start center;
    padding-top: 18px;
  }

  .auth-hero-card,
  .auth-hero-card.wide {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 26px;
    border-radius: 28px;
  }

  .auth-copy h1 {
    max-width: 12ch;
    font-size: clamp(2.45rem, 11vw, 4.1rem);
  }

  .auth-form.form-grid {
    grid-template-columns: 1fr;
  }

  .auth-form .span-2 {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .topbar {
    padding-inline: 14px;
  }

  .topbar-actions .pill.ghost {
    min-width: 46px;
    width: 46px;
    padding: 0;
    overflow: hidden;
    color: transparent;
  }

  .topbar-actions .pill.ghost::before {
    content: "\263C";
    color: var(--text);
  }

  .auth-highlights {
    display: none;
  }
}

/* Standalone i18n polish */
html[lang="km"], html[lang="km"] body {
  font-family: "Noto Sans Khmer", "Khmer OS Battambang", "Khmer OS Siemreap", "Manrope", "Segoe UI", sans-serif;
}

.language-form {
  margin: 0;
}

.language-select {
  min-height: 46px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.24));
  border-radius: 999px;
  padding: 0 42px 0 18px;
  color: var(--text, #f8fafc);
  background: var(--panel, rgba(15, 23, 42, 0.86));
  font: inherit;
  font-weight: 700;
  outline: none;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

[data-theme="light"] .language-select {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.84);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .topbar-actions {
    gap: 8px;
  }

  .language-select {
    min-height: 42px;
    max-width: 88px;
    padding-inline: 14px;
  }
}

/* Responsive topbar theme visibility fix */
@media (max-width: 980px) {
  .topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    min-width: 0;
  }

  .topbar-actions .pill[data-theme-toggle] {
    display: inline-flex !important;
  }
}

@media (max-width: 720px) {
  .topbar {
    gap: 10px;
  }

  .brand {
    min-width: 0;
    flex: 1 1 auto;
  }

  .brand strong {
    white-space: nowrap;
  }

  .topbar-actions {
    gap: 7px;
  }

  .topbar-actions .pill[data-theme-toggle] {
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    white-space: nowrap;
  }

  .account-pill {
    max-width: 58px;
    padding: 6px;
  }

  .account-pill strong {
    display: none;
  }

  .account-pill span {
    margin: 0;
  }

  .circle-btn {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 560px) {
  .topbar-actions .pill[data-theme-toggle] {
    width: 44px;
    min-width: 44px;
    padding: 0;
    font-size: 0;
  }

  .topbar-actions .pill[data-theme-toggle]::before {
    content: "\263C";
    color: var(--text);
    font-size: 18px;
    line-height: 1;
  }
}

/* Sidebar collapse behavior */
.sidebar-toggle {
  width: 100%;
  border: 1px solid var(--line);
  font: inherit;
}

.collapse-mini {
  display: none;
}

.super-shell.sidebar-collapsed .layout {
  grid-template-columns: 92px minmax(0, 1fr);
}

.super-shell.sidebar-collapsed .sidebar {
  padding-inline: 14px;
}

.super-shell.sidebar-collapsed .collapse-full,
.super-shell.sidebar-collapsed .nav-label,
.super-shell.sidebar-collapsed .nav-link .nav-text {
  display: none;
}

.super-shell.sidebar-collapsed .collapse-mini {
  display: inline;
}

.super-shell.sidebar-collapsed .collapse-pill,
.super-shell.sidebar-collapsed .nav-link {
  justify-content: center;
  padding-inline: 0;
}

.super-shell.sidebar-collapsed .nav-link {
  min-height: 52px;
  font-size: 0;
}

.super-shell.sidebar-collapsed .nav-link::first-letter {
  font-size: 18px;
}

.super-shell.sidebar-collapsed .nav-link {
  overflow: hidden;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .super-shell.sidebar-collapsed .layout {
    grid-template-columns: 1fr;
  }

  .super-shell.sidebar-collapsed .sidebar {
    padding: 28px 18px;
  }

  .super-shell.sidebar-collapsed .collapse-full,
  .super-shell.sidebar-collapsed .nav-label {
    display: initial;
  }

  .super-shell.sidebar-collapsed .collapse-mini {
    display: none;
  }

  .super-shell.sidebar-collapsed .collapse-pill,
  .super-shell.sidebar-collapsed .nav-link {
    justify-content: flex-start;
    padding-inline: 16px;
    font-size: inherit;
  }
}

/* ERP-MAIN-style icon rail collapse */
.nav-link {
  gap: 12px;
}

.nav-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  min-width: 22px;
  height: 22px;
  color: currentColor;
  font-size: 1.05rem;
  line-height: 1;
}

.nav-text {
  min-width: 0;
}

.super-shell.sidebar-collapsed .nav-link {
  gap: 0 !important;
  justify-content: center !important;
  padding: 13px !important;
  min-height: 48px;
  font-size: inherit !important;
}

.super-shell.sidebar-collapsed .nav-link .nav-text {
  display: none !important;
}

.super-shell.sidebar-collapsed .nav-link .nav-icon {
  width: auto;
  min-width: 0;
  font-size: 1.08rem;
}

.super-shell.sidebar-collapsed .collapse-pill {
  min-height: 48px;
}

@media (max-width: 980px) {
  .super-shell.sidebar-collapsed .nav-link {
    gap: 12px !important;
    justify-content: flex-start !important;
    padding: 13px 16px !important;
  }

  .super-shell.sidebar-collapsed .nav-link .nav-text {
    display: inline !important;
  }

  .super-shell.sidebar-collapsed .nav-link .nav-icon {
    width: 22px;
    min-width: 22px;
  }
}

/* Mobile hamburger drawer shell */
.mobile-nav-toggle,
.mobile-nav-backdrop {
  display: none;
}

.mobile-nav-toggle {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  place-items: center;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 800;
  box-shadow: 0 14px 28px rgba(15, 23, 42, .16);
  cursor: pointer;
}

@media (max-width: 980px) {
  .mobile-nav-toggle {
    display: inline-grid;
    order: 0;
  }

  .topbar {
    justify-content: flex-start;
    gap: 10px;
  }

  .brand {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
  }

  .topbar-actions {
    order: 2;
    flex: 0 0 auto;
  }

  .layout,
  .super-shell.sidebar-collapsed .layout {
    grid-template-columns: 1fr !important;
  }

  .super-shell .sidebar,
  .super-shell.sidebar-collapsed .sidebar {
    position: fixed !important;
    top: 76px !important;
    left: 12px;
    bottom: 12px;
    width: min(340px, calc(100vw - 24px));
    height: auto !important;
    z-index: 140;
    padding: 18px !important;
    border: 1px solid var(--line) !important;
    border-radius: 28px;
    background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
    box-shadow: 24px 24px 70px rgba(0, 0, 0, .32);
    transform: translateX(calc(-100% - 36px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .22s ease, opacity .22s ease, visibility .22s ease;
    overflow: auto;
  }

  .super-shell.mobile-nav-open .sidebar,
  .super-shell.mobile-nav-open.sidebar-collapsed .sidebar {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-nav-backdrop {
    position: fixed;
    inset: 76px 0 0;
    z-index: 130;
    border: 0;
    background: rgba(2, 6, 23, .46);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
  }

  .super-shell.mobile-nav-open .mobile-nav-backdrop {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .sidebar .collapse-pill,
  .super-shell.sidebar-collapsed .sidebar .collapse-pill {
    display: none !important;
  }

  .super-shell.sidebar-collapsed .nav-label,
  .super-shell.sidebar-collapsed .nav-link .nav-text {
    display: initial !important;
  }

  .super-shell.sidebar-collapsed .nav-link,
  .super-shell.sidebar-collapsed .collapse-pill {
    justify-content: flex-start !important;
  }
}

@media (max-width: 560px) {
  .topbar {
    height: 68px;
    padding-inline: 10px;
  }

  .mobile-nav-toggle {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 14px;
  }

  .brand-mark.image-mark {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .brand small {
    display: none;
  }

  .super-shell .sidebar,
  .super-shell.sidebar-collapsed .sidebar {
    top: 68px !important;
    left: 10px;
    bottom: 10px;
    width: min(330px, calc(100vw - 20px));
    border-radius: 24px;
  }

  .mobile-nav-backdrop {
    inset: 68px 0 0;
  }
}

/* TaskHub four-column fit */
.board {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.1vw, 18px);
  overflow: visible;
}

.column {
  min-width: 0;
  padding: clamp(14px, 1.25vw, 20px);
  border-radius: clamp(22px, 2vw, 34px);
}

.column h2 {
  min-width: 0;
  align-items: center;
  gap: 10px;
  font-size: clamp(1.15rem, 1.8vw, 1.75rem) !important;
  line-height: 1.05;
}

.column h2 span {
  flex: 0 0 auto;
}

.task-card,
.empty-lane {
  min-width: 0;
  overflow-wrap: anywhere;
}

.empty-lane {
  padding: clamp(16px, 1.5vw, 22px);
}

@media (max-width: 1180px) {
  .board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .board {
    grid-template-columns: 1fr !important;
  }
}
/* MuoyApp module parity pages */
.action-grid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:16px;margin:18px 0 24px}.action-card{border:1px solid var(--line);background:var(--surface);border-radius:24px;padding:22px;color:var(--text);box-shadow:var(--shadow)}.action-card strong{display:block;font-size:28px;margin:10px 0}.module-toolbar{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:18px 0}.module-toolbar form{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.compact-form{display:grid;gap:14px}.compact-form.two{grid-template-columns:repeat(2,minmax(0,1fr))}.compact-form.three{grid-template-columns:repeat(3,minmax(0,1fr))}.check-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.check-row label{display:inline-flex;grid-template-columns:auto;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:999px;padding:10px 14px}.check-row input{width:auto}.mini-stack{display:grid;gap:10px}.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:7px 11px;background:rgba(25,119,255,.10);font-weight:800;color:var(--text)}.badge.green{color:var(--green);background:rgba(24,197,143,.13)}.badge.amber{color:var(--amber);background:rgba(255,176,32,.13)}.badge.red{color:var(--red);background:rgba(255,77,103,.13)}.danger-btn{border:1px solid rgba(255,77,103,.35);background:rgba(255,77,103,.12);color:var(--red);border-radius:999px;padding:10px 14px;font-weight:800;cursor:pointer}.success-btn{border:1px solid rgba(24,197,143,.35);background:rgba(24,197,143,.12);color:var(--green);border-radius:999px;padding:10px 14px;font-weight:800;cursor:pointer}.muted-row{color:var(--muted);font-size:13px}.page-actions{display:flex;gap:12px;flex-wrap:wrap}.responsive-table{overflow:auto;border-radius:24px;border:1px solid var(--line);background:var(--surface)}.responsive-table table{min-width:820px}.schedule-days{display:flex;gap:8px;flex-wrap:wrap}.schedule-days label{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:9px 12px}.schedule-days input{width:auto}@media (max-width:1100px){.action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.compact-form.two,.compact-form.three{grid-template-columns:1fr}}@media (max-width:640px){.action-grid{grid-template-columns:1fr}.module-toolbar,.module-toolbar form{display:grid;width:100%}.module-toolbar form>*{width:100%}}
/* MuoyApp 2026 visual system */
*, *::before, *::after { box-sizing: border-box; }
:root { color-scheme: light; --font-ui: "Aptos", "Segoe UI", "Noto Sans Khmer", "Khmer OS Siemreap", sans-serif; }
html[data-theme="light"] {
  --bg: #f4f8ff;
  --bg-soft: #eef5ff;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-solid: #ffffff;
  --surface-muted: #f0f6ff;
  --line: #d9e5f4;
  --text: #102342;
  --text-soft: #5f708b;
  --text-muted: #8190a6;
  --brand: #1478ff;
  --brand-2: #22b8f2;
  --aqua: #12b8be;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --shadow: 0 24px 70px rgba(37, 78, 130, 0.16);
  --shadow-soft: 0 14px 36px rgba(37, 78, 130, 0.11);
  --hero-glow: radial-gradient(circle at 14% 18%, rgba(20, 120, 255, .13), transparent 30%), radial-gradient(circle at 88% 22%, rgba(18, 184, 190, .14), transparent 28%);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #03101f;
  --bg-soft: #071c33;
  --surface: rgba(13, 31, 52, 0.84);
  --surface-solid: #0d1f34;
  --surface-muted: #142941;
  --line: #25415f;
  --text: #f6f9ff;
  --text-soft: #b9c8db;
  --text-muted: #8393aa;
  --brand: #1682ff;
  --brand-2: #32b5ff;
  --aqua: #17c2c4;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #fb5a67;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
  --shadow-soft: 0 16px 44px rgba(0, 0, 0, 0.24);
  --hero-glow: radial-gradient(circle at 14% 18%, rgba(20, 120, 255, .28), transparent 30%), radial-gradient(circle at 88% 22%, rgba(18, 184, 190, .19), transparent 30%);
}
html, body { min-height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--hero-glow), linear-gradient(145deg, var(--bg), var(--bg-soft));
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: none; filter: brightness(1.04); }
button, input, select, textarea { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.super-shell { min-height: 100vh; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  max-width: 100vw;
  min-height: 92px;
  padding: 14px clamp(18px, 3vw, 44px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(20px);
}
.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand { display: inline-flex; align-items: center; gap: 14px; min-width: 0; color: var(--text); }
.brand-mark { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; flex: 0 0 auto; }
.brand-mark img { width: 58px; height: 58px; object-fit: contain; display: block; filter: drop-shadow(0 10px 22px rgba(20, 120, 255, .22)); }
.brand-copy { display: grid; gap: 0; line-height: 1.18; min-width: 0; }
.brand-copy strong { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.brand-copy small { font-size: .82rem; color: var(--text-soft); white-space: nowrap; }
.brand-wordmark {
  display: block;
  width: min(220px, 28vw);
  max-width: 100%;
  min-width: 0;
}

/* Brand source-of-truth: use the S mark plus real text in the shell.
   This avoids duplicated marks and raster letter-counter artifacts on dark UI. */
.super-shell .brand,
.super-shell .sidebar-brand {
  gap: 12px !important;
}

.super-shell .brand-wordmark--text {
  display: grid !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  gap: 1px !important;
  line-height: 1 !important;
  color: var(--text) !important;
  font-family: "Roboto", "Noto Sans Khmer", "Khmer OS", Arial, sans-serif !important;
}

.super-shell .brand-wordmark--text strong {
  display: block !important;
  font-size: clamp(1.05rem, 1.5vw, 1.28rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 0.98 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  color: var(--text) !important;
}

.super-shell .brand-wordmark--text small {
  display: block !important;
  font-size: 0.63rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  color: var(--text-soft) !important;
}

.super-shell .brand-wordmark--text img {
  display: none !important;
}

.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-brand .brand-wordmark--text,
.super-shell.is-authenticated.sidebar-collapsed.sidebar-hover-locked .sidebar .sidebar-brand .brand-wordmark--text {
  display: none !important;
}

@media (max-width: 720px) {
  .super-shell .topbar > .brand .brand-wordmark--text {
    display: none !important;
  }
}

/* Attendance management */
.attendance-filter-form,
.attendance-correction-form .form-grid,
.attendance-correction-form .button-row {
  display: flex;
  align-items: end;
  gap: 14px;
  flex-wrap: wrap;
}

.attendance-correction-form {
  margin: 18px 0 22px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(10, 28, 48, 0.55);
}

.attendance-correction-form label,
.attendance-filter-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 700;
}

.attendance-correction-form .form-grid label {
  flex: 1 1 180px;
}

.attendance-correction-form textarea {
  min-height: 84px;
  resize: vertical;
}

.attendance-correction-form .button-row {
  margin-top: 14px;
}

.attendance-edit-btn {
  min-height: 38px;
  padding-inline: 14px;
}

.notice.info {
  margin-top: 12px;
  color: var(--info, #7db8ff);
}

@media (max-width: 720px) {
  .attendance-filter-form,
  .attendance-correction-form .form-grid,
  .attendance-correction-form .button-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

/* Final top-right utility menu: compact dropdown, mobile bottom sheet. */
.super-shell .topbar-menu {
  position: relative !important;
  display: block;
  flex: 0 0 auto !important;
}

.super-shell .topbar-menu-button {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--text-soft, var(--muted)) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
}

.super-shell .topbar-menu-button:hover,
.super-shell .topbar-menu-button:focus-visible,
.super-shell .topbar-menu[open] .topbar-menu-button {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--blue) 10%, transparent) !important;
}

.super-shell .topbar-menu-panel {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 240 !important;
  width: min(300px, calc(100vw - 24px)) !important;
  max-width: 300px !important;
  min-width: 260px !important;
  display: grid !important;
  gap: 6px !important;
  padding: 10px !important;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent) !important;
  border-radius: 18px !important;
  color: var(--text) !important;
  background: color-mix(in srgb, var(--surface-solid, #102338) 96%, transparent) !important;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(18px) !important;
}

.super-shell .topbar-menu-panel::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 17px;
  width: 13px;
  height: 13px;
  border-left: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  background: inherit;
  transform: rotate(45deg);
}

.super-shell .topbar-menu-panel .menu-row {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: var(--text) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 760 !important;
  text-align: left !important;
}

.super-shell .topbar-menu-panel .menu-row:hover,
.super-shell .topbar-menu-panel .menu-row:focus-visible,
.super-shell .topbar-menu-panel .menu-row:focus-within {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--blue) 11%, transparent) !important;
}

.super-shell .topbar-menu-panel .menu-row-icon {
  width: 28px !important;
  height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  color: color-mix(in srgb, var(--blue) 78%, var(--text)) !important;
}

.super-shell .topbar-menu-panel .menu-row-icon .nav-svg {
  width: 19px !important;
  height: 19px !important;
}

.super-shell .topbar-menu-panel .menu-row-label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.super-shell .topbar-menu-panel .menu-language-form {
  grid-template-columns: 28px minmax(0, 1fr) !important;
  padding: 0 8px 0 12px !important;
}

.super-shell .topbar-menu-panel .menu-language-form select {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 0 28px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--text) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 760 !important;
}

html[data-theme="light"] .super-shell .topbar-menu-panel {
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 20px 54px rgba(32, 54, 84, .16) !important;
}

@media (max-width: 640px) {
  .super-shell .topbar-menu-panel {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: calc(100svh - 212px) !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: calc(100svh - 24px) !important;
    overflow: auto !important;
    padding: 12px !important;
    border-radius: 22px !important;
    box-shadow: 0 -18px 54px rgba(0, 0, 0, .34) !important;
  }

  .super-shell .topbar-menu-panel::before {
    display: none !important;
  }

  .super-shell .topbar-menu-panel .menu-row {
    min-height: 50px !important;
    border-radius: 14px !important;
  }
}
.brand-wordmark img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(20, 120, 255, .18));
}
.sidebar-brand .brand-wordmark {
  width: 220px;
}
.public-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 42px); margin-left: auto; }
.public-nav a { color: var(--text); font-weight: 650; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; max-width: 100%; }
.pill, .circle-btn, .language-select, .account-pill, .collapse-pill, .secondary-btn, .primary-btn {
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-solid) 72%, transparent);
  box-shadow: var(--shadow-soft);
}
.pill, .circle-btn, .language-select { min-height: 48px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; font-weight: 750; }
.pill.ghost, .secondary-btn { background: color-mix(in srgb, var(--surface-solid) 68%, transparent); }
.language-form { margin: 0; }
.language-select { appearance: none; min-width: 128px; cursor: pointer; }
.account-pill { display: grid; grid-template-columns: 48px minmax(0, auto); grid-template-rows: auto auto; column-gap: 12px; align-items: center; min-height: 58px; padding: 7px 18px 7px 8px; }
.account-pill span { grid-row: 1 / span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(135deg, var(--brand), var(--aqua)); color: white; font-weight: 850; }
.account-pill strong { font-weight: 800; line-height: 1.1; color: var(--text); white-space: nowrap; }
.account-pill small { color: var(--text-soft); font-size: .78rem; }
.circle-btn { width: 54px; padding: 0; border-radius: 999px; font-size: 1.05rem; }
.mobile-nav-toggle { display: none; border: 0; background: linear-gradient(135deg, var(--brand), var(--aqua)); color: white; width: 48px; height: 48px; border-radius: 16px; font-size: 1.4rem; box-shadow: var(--shadow-soft); }
.layout { display: grid; grid-template-columns: 292px minmax(0, 1fr); min-height: calc(100vh - 92px); }
.is-public .layout { display: block; }
.sidebar { position: sticky; top: 92px; height: calc(100vh - 92px); overflow-y: auto; padding: 22px 20px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(18px); transition: width .22s ease, padding .22s ease; }
.sidebar-toggle { width: 100%; min-height: 52px; margin-bottom: 28px; font-weight: 750; cursor: pointer; }
.nav-label { margin: 24px 8px 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .18em; font-weight: 850; font-size: .74rem; }
.nav-link { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 14px; border-radius: 16px; color: var(--text-soft); font-weight: 650; margin: 5px 0; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent); }
.nav-icon { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 9px; color: inherit; font-weight: 850; font-size: .78rem; flex: 0 0 auto; }
.sidebar-collapsed .layout { grid-template-columns: 92px minmax(0, 1fr); }
.sidebar-collapsed .sidebar { padding-inline: 14px; }
.sidebar-collapsed .brand-copy, .sidebar-collapsed .brand-wordmark, .sidebar-collapsed .nav-text, .sidebar-collapsed .nav-label, .sidebar-collapsed .collapse-full { display: none; }
.sidebar-collapsed .collapse-mini { display: inline; }
.collapse-mini { display: none; }
.sidebar-collapsed .sidebar-toggle { width: 54px; padding: 0; margin-inline: auto; }
.sidebar-collapsed .nav-link { justify-content: center; padding-inline: 0; }
.page-content { min-width: 0; padding: clamp(24px, 3.2vw, 54px); }
.is-public .page-content { padding: 34px clamp(18px, 4vw, 56px); }
.messages { display: grid; gap: 10px; margin-bottom: 18px; }
.message { padding: 13px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.message.error { border-color: color-mix(in srgb, var(--danger) 42%, var(--line)); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.primary-btn, .secondary-btn, .oauth-btn { min-height: 58px; padding: 0 28px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 850; cursor: pointer; }
.primary-btn { color: white; border: 0; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 18px 44px rgba(20, 120, 255, .25); }
.secondary-btn { color: var(--text); }
.oauth-btn { border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface-solid) 82%, transparent); color: var(--text); text-align: center; font-weight: 500; }
.oauth-btn::before { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #1f1f1f; font-weight: 900; }
.oauth-btn--google::before { content: "G"; }
.oauth-btn--facebook::before { content: "f"; background: #1877f2; color: #fff; font-family: Arial, sans-serif; font-size: 1.05rem; }
.oauth-btn--telegram::before { content: "✈"; background: #229ed9; color: #fff; font-size: .9rem; }
.primary-btn.full, .secondary-btn.full, .oauth-btn.full { width: 100%; }
.primary-btn:disabled, .secondary-btn:disabled, .oauth-btn:disabled { opacity: .72; cursor: not-allowed; }
.landing-auth { min-height: calc(100svh - var(--topbar-height, 92px)); display: grid; place-items: start center; padding: clamp(18px, 2.2vw, 34px) clamp(16px, 2.5vw, 36px) 36px; }
.landing-panel { width: min(100%, 1380px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(390px, .75fr); gap: clamp(28px, 5vw, 84px); align-items: center; padding: clamp(34px, 5vw, 72px); border: 1px solid var(--line); border-radius: 34px; background: var(--hero-glow), color-mix(in srgb, var(--surface-solid) 76%, transparent); box-shadow: var(--shadow); }
html[data-theme="dark"] .landing-panel { background: var(--hero-glow), linear-gradient(145deg, rgba(10, 27, 48, .94), rgba(5, 15, 29, .92)); }
.compact-panel { grid-template-columns: minmax(0, .9fr) minmax(430px, .8fr); }
.login-only-auth { min-height: calc(100vh - 78px); padding: clamp(28px, 6vw, 80px) 20px; place-items: center; }
.login-only-panel { width: min(100%, 560px); grid-template-columns: 1fr; padding: 0; gap: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.login-only-card { max-width: 520px; margin: 0 auto; }
.landing-copy { display: grid; gap: 22px; }
.smart-badge { width: max-content; padding: 10px 18px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--line)); color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, transparent); font-weight: 800; }
.landing-copy h1 { margin: 0; font-size: clamp(3rem, 6.8vw, 5.9rem); line-height: .96; letter-spacing: -.06em; color: var(--text); }
.landing-copy h1 span { color: var(--brand); }
.landing-copy p { max-width: 720px; margin: 0; color: var(--text-soft); font-size: clamp(1.02rem, 1.8vw, 1.28rem); line-height: 1.62; }
.feature-tiles { display: grid; grid-template-columns: repeat(5, minmax(100px, 1fr)); gap: 12px; max-width: 760px; }
.feature-tiles.trio { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
.feature-tiles span { min-height: 112px; padding: 18px; display: grid; place-items: center; text-align: center; gap: 5px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface-solid) 62%, transparent); }
.feature-tiles b { color: var(--brand); font-size: 1.02rem; }
.feature-tiles small { color: var(--text); font-weight: 700; }
.landing-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.trust-row { font-size: .95rem !important; }
.auth-glass-card { display: grid; gap: 18px; width: 100%; padding: clamp(26px, 4vw, 44px); border: 1px solid var(--line); border-radius: 24px; background: color-mix(in srgb, var(--surface-solid) 82%, transparent); box-shadow: var(--shadow-soft); }
html[data-theme="dark"] .auth-glass-card { background: rgba(8, 24, 43, .78); }
.auth-card-heading { text-align: center; display: grid; gap: 6px; }
.auth-card-heading h2 { margin: 0; font-size: clamp(1.8rem, 2vw, 2.2rem); letter-spacing: -.035em; }
.auth-card-heading p, .auth-footnote { margin: 0; color: var(--text-soft); }
.auth-glass-card label { display: grid; gap: 8px; color: var(--text); font-weight: 700; }
.auth-glass-card input, .auth-glass-card select, .auth-glass-card textarea, input, select, textarea { width: 100%; min-height: 54px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface-solid) 70%, transparent); color: var(--text); padding: 0 16px; outline: none; }
.auth-glass-card textarea, textarea { min-height: 110px; padding-block: 14px; }
.auth-glass-card input:focus, input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent); }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-soft); }
.checkline { display: inline-flex !important; grid-template-columns: none !important; align-items: center; gap: 8px !important; font-weight: 650 !important; }
.checkline input { width: 18px; min-height: 18px; }
.divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; color: var(--text-muted); }
.divider::before, .divider::after { content: ""; height: 1px; background: var(--line); }
.auth-footnote { text-align: center; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.span-2 { grid-column: 1 / -1; }
.card, .panel, .module-card, .dashboard-card, .stat-card, .content-card, .calendar-card, .table-card, .form-card, .settings-card { border-color: var(--line) !important; background: var(--surface) !important; color: var(--text) !important; box-shadow: var(--shadow-soft); }
table, thead, tbody, tr, th, td { background-color: color-mix(in srgb, var(--surface-solid) 82%, transparent) !important; color: var(--text) !important; border-color: var(--line) !important; }
th { color: var(--text-soft) !important; text-transform: uppercase; letter-spacing: .08em; font-size: .76rem; }
.muted, .subtext, small { color: var(--text-soft); }
.mobile-nav-backdrop { display: none; }
@media (max-width: 1180px) {
  .landing-panel, .compact-panel { grid-template-columns: 1fr; }
  .feature-tiles { grid-template-columns: repeat(3, minmax(100px, 1fr)); }
}
@media (max-width: 900px) {
  .topbar { min-height: 76px; padding: 10px 14px; gap: 10px; }
  .mobile-nav-toggle { display: inline-grid; place-items: center; flex: 0 0 auto; }
  .brand-mark, .brand-mark img { width: 46px; height: 46px; border-radius: 14px; }
  .brand-copy small, .public-nav, .pill.ghost.public-link { display: none; }
  .topbar-actions { gap: 8px; margin-left: auto; }
  .pill[data-theme-toggle] { min-width: 48px; width: 48px; padding: 0; overflow: hidden; color: transparent; position: relative; }
  .pill[data-theme-toggle]::after { content: "T"; color: var(--brand); position: absolute; inset: 0; display: grid; place-items: center; }
  .language-select { min-width: 78px; width: 78px; padding-inline: 10px; }
  .account-pill { min-width: 48px; width: 48px; padding: 0; border-radius: 999px; display: grid; place-items: center; }
  .account-pill span { width: 42px; height: 42px; grid-row: auto; }
  .account-pill strong, .account-pill small { display: none; }
  .circle-btn { width: 48px; height: 48px; }
  .layout { display: block; min-height: calc(100vh - 76px); }
  .sidebar { position: fixed; top: 76px; left: 0; bottom: 0; z-index: 60; width: min(86vw, 340px); height: auto; transform: translateX(-105%); transition: transform .22s ease; border-right: 1px solid var(--line); box-shadow: var(--shadow); }
  .mobile-nav-open .sidebar { transform: translateX(0); }
  .mobile-nav-backdrop { position: fixed; inset: 76px 0 0; z-index: 55; border: 0; background: rgba(0, 0, 0, .38); }
  .mobile-nav-open .mobile-nav-backdrop { display: block; }
  .page-content, .is-public .page-content { padding: 18px 14px 30px; }
  .landing-auth { min-height: auto; place-items: stretch; padding: 18px 14px 28px; }
  .landing-panel { padding: 24px 18px; border-radius: 26px; gap: 28px; }
  .landing-copy h1 { font-size: clamp(2.5rem, 12vw, 4.2rem); }
  .feature-tiles, .feature-tiles.trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-glass-card { padding: 22px; border-radius: 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
}
@media (max-width: 560px) {
  .feature-tiles, .feature-tiles.trio { grid-template-columns: 1fr; }
  .landing-actions { display: grid; }
  .auth-row { align-items: flex-start; flex-direction: column; }
}
/* End MuoyApp 2026 visual system */

/* Inline SVG sidebar icons */
.nav-icon .nav-svg {
  width: 20px;
  height: 20px;
  display: block;
  flex: 0 0 auto;
}

.sidebar-collapsed .nav-icon .nav-svg {
  width: 21px;
  height: 21px;
}

/* MuoyApp refined visual system - 2026-06 */
:root {
  --refined-radius-xl: 28px;
  --refined-radius-lg: 22px;
  --refined-radius-md: 16px;
  --refined-page-pad: clamp(20px, 2.4vw, 36px);
  --refined-card-pad: clamp(18px, 1.9vw, 28px);
  --refined-blue: #1677ff;
  --refined-cyan: #18bfd0;
  --refined-green: #16c784;
  --refined-amber: #f5a20b;
}

.app-body {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.topbar, .sidebar, .page-content, input, select, textarea, button {
  font-family: inherit;
}

.main-content { min-width: 0; }

.page-content {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: var(--refined-page-pad);
}

.hero, .panel, .metric, .table-card, .stat-card, .form-card,
.work-card, .feed-card, .community-card, .task-card, .notice-card {
  border-radius: var(--refined-radius-xl);
}

.hero {
  min-height: auto;
  padding: clamp(24px, 2.5vw, 36px);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.hero.compact, .refined-hero { min-height: auto; }

.hero h1, .page-content > h1, .page-title h1 {
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1.08;
  font-weight: 650;
  letter-spacing: -0.055em;
  margin: 0 0 8px;
}

.hero p, .muted, .panel p, .metric small, .list-row small, .mini-card span {
  font-weight: 400;
}

.eyebrow, .nav-section-title, .table-card th {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.16em;
}

.panel {
  padding: var(--refined-card-pad);
  margin-bottom: 20px;
}

.panel h2, .column h2, .table-card h2, .form-card h2 {
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
}

.metric-grid {
  gap: 16px;
  margin-bottom: 20px;
}

.metric {
  min-height: 132px;
  padding: 20px 22px;
}

.metric span {
  font-size: 13px;
  font-weight: 550;
}

.metric strong {
  font-size: clamp(28px, 2.3vw, 36px);
  font-weight: 620;
  letter-spacing: -0.045em;
}

.nav-link {
  min-height: 44px;
  font-size: 13px;
  font-weight: 520;
  letter-spacing: -0.01em;
}

.nav-icon .nav-svg { opacity: 0.9; }

.primary-btn, .secondary-btn, .soft-btn, .success-btn, .danger-btn,
button.primary-btn, button.secondary-btn, button.soft-btn,
.compact-form button, .inline-form button {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.015em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.primary-btn.full, .compact-form .full-button, .settings-actions .primary-btn {
  width: 100%;
}

.form-grid, .compact-form { gap: 14px; }

.compact-form.three, .form-grid.three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compact-form label, .form-grid label, .inline-form label, .settings-panel label {
  font-size: 12px;
  font-weight: 620;
  letter-spacing: -0.01em;
}

input, select, textarea, .form-control,
.compact-form input, .compact-form select, .compact-form textarea {
  min-height: 46px;
  border-radius: 15px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
}

textarea, .compact-form textarea {
  padding-top: 12px;
  min-height: 92px;
}

.span-2 { grid-column: span 2; }
.span-3 { grid-column: 1 / -1; }

.settings-panel .helper-text, .helper-text {
  margin: -4px 0 16px;
  color: var(--muted);
  max-width: 760px;
}

.settings-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 4px;
}

.settings-actions .secondary-btn { min-width: 120px; }

.switch-line {
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
}

.switch-line input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-ui {
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.25);
  border: 1px solid var(--border);
  position: relative;
  flex: 0 0 auto;
  transition: 160ms ease;
}

.switch-ui::after {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
  transition: 160ms ease;
}

.switch-line input:checked + .switch-ui {
  background: linear-gradient(135deg, var(--refined-blue), var(--refined-cyan));
  border-color: transparent;
}

.switch-line input:checked + .switch-ui::after { transform: translateX(20px); }

.switch-line.geocode-action {
  width: 100%;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.switch-line.geocode-action:disabled {
  opacity: 0.68;
  cursor: progress;
}

.switch-line.geocode-action .action-dot {
  background: linear-gradient(135deg, var(--refined-blue, #1977ff), var(--refined-cyan, #18c2bd));
  border-color: transparent;
}

.switch-line.geocode-action .action-dot::after {
  left: 12px;
  width: 18px;
  height: 18px;
}

.schedule-days {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.schedule-days label {
  min-width: 92px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255,255,255,.035);
}

.schedule-days input {
  min-height: auto;
  width: 15px;
  height: 15px;
}

.table-card, .table-card table { overflow: hidden; }

.table-card table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}

.table-card th, .table-card td { padding: 14px 16px; }
.table-card th { color: var(--muted); }

.dashboard-calendar-panel { margin-bottom: 20px; }

.split-head, .calendar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.calendar-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.legend-pill, .calendar-stat {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}

.legend-dot.blue { background: var(--refined-blue); }
.legend-dot.green { background: var(--refined-green); }
.legend-dot.purple { background: #8b5cf6; }

.dashboard-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.calendar-weekday {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 0 4px 4px;
}

.calendar-cell {
  min-height: 118px;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 12px;
  background: rgba(255,255,255,.035);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calendar-cell.muted-cell { opacity: .46; }

.calendar-cell.today-cell {
  border-color: rgba(22,119,255,.75);
  box-shadow: inset 0 0 0 1px rgba(22,119,255,.35), 0 14px 32px rgba(22,119,255,.12);
}

.calendar-date-number {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--text);
  background: rgba(22,119,255,.10);
}

.today-cell .calendar-date-number {
  color: #fff;
  background: linear-gradient(135deg, var(--refined-blue), var(--refined-cyan));
}

.calendar-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.calendar-badge {
  min-height: 25px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 650;
}

.calendar-badge.blue { color: var(--refined-blue); background: rgba(22,119,255,.12); }
.calendar-badge.green { color: var(--refined-green); background: rgba(22,199,132,.12); }
.calendar-badge.purple { color: #8b5cf6; background: rgba(139,92,246,.14); }
.calendar-badge.is-scheduled { color: var(--calendar-scheduled); background: color-mix(in srgb, var(--calendar-scheduled) 14%, transparent); }
.calendar-badge.is-clocked { color: var(--calendar-clocked); background: color-mix(in srgb, var(--calendar-clocked) 14%, transparent); }
.calendar-badge.is-task { color: var(--calendar-task); background: color-mix(in srgb, var(--calendar-task) 14%, transparent); }
.calendar-badge.is-leave { color: var(--calendar-leave); background: color-mix(in srgb, var(--calendar-leave) 14%, transparent); }
.attendance-activity-summary { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.attendance-activity-block { margin-top:20px; }
.attendance-activity-block > h3 { margin:0 0 10px; font-size:16px; }
.status-pill.leave { color:var(--calendar-leave); border-color:color-mix(in srgb,var(--calendar-leave) 46%,transparent); background:color-mix(in srgb,var(--calendar-leave) 13%,transparent); }
.attendance-leave-row { background:color-mix(in srgb,var(--calendar-leave) 5%,transparent); }
.action-card.leave-card { border-color:color-mix(in srgb,var(--calendar-leave) 34%,var(--line)); }

html[data-theme="light"] .hero,
html[data-theme="light"] .panel,
html[data-theme="light"] .metric,
html[data-theme="light"] .table-card,
html[data-theme="light"] .calendar-cell {
  background: rgba(255,255,255,.78);
  box-shadow: 0 18px 44px rgba(17, 40, 74, 0.08);
}

html[data-theme="light"] .switch-line,
html[data-theme="light"] .schedule-days label,
html[data-theme="light"] .legend-pill,
html[data-theme="light"] .calendar-stat {
  background: rgba(247,250,254,.9);
}

html[data-theme="dark"] .hero,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .calendar-cell {
  background: rgba(12, 28, 48, 0.78);
}

@media (max-width: 1180px) {
  .compact-form.three, .form-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-calendar { gap: 8px; }
  .calendar-cell { min-height: 104px; padding: 10px; }
}

@media (max-width: 760px) {
  .page-content { padding: 16px; }
  .hero { padding: 22px; align-items: stretch; flex-direction: column; }
  .hero h1, .page-content > h1, .page-title h1 { font-size: 28px !important; }
  .compact-form.three, .form-grid.three { grid-template-columns: 1fr; }
  .span-2, .span-3 { grid-column: auto; }
  .settings-actions { flex-direction: column; align-items: stretch; }
  .dashboard-calendar {
    grid-template-columns: repeat(7, minmax(42px, 1fr));
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .calendar-weekday { font-size: 10px; }
  .calendar-cell { min-width: 86px; min-height: 96px; border-radius: 16px; }
  .calendar-badge { font-size: 10px; padding: 0 6px; }
}

/* MuoyApp typography correction - 2026-06-19
   This is the final visual layer. It intentionally softens older ERP bold styles. */
:root {
  --sh-font-sans: "Plus Jakarta Sans", "Manrope", "Segoe UI", "Noto Sans", Arial, sans-serif;
  --sh-weight-regular: 400;
  --sh-weight-medium: 500;
  --sh-weight-title: 520;
  --sh-weight-section: 560;
}

html, body, .app-body {
  font-family: var(--sh-font-sans) !important;
  font-weight: var(--sh-weight-regular) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body, p, span, small, input, select, textarea, button,
.topbar, .sidebar, .page-content, .panel, .table-card,
.form-card, .metric, .feed-card, .task-card, .work-card {
  font-weight: var(--sh-weight-regular) !important;
}

label, strong, b,
.nav-link, .nav-label, .brand-name, .profile-name,
.metric span, .list-row strong, .mini-card strong,
.table-card th, .table-card td,
.compact-form label, .form-grid label, .inline-form label {
  font-weight: var(--sh-weight-medium) !important;
}

.hero h1, .page-title h1, .page-content > h1,
.auth-hero h1, .login-hero h1 {
  font-size: clamp(27px, 2.65vw, 38px) !important;
  line-height: 1.08 !important;
  font-weight: var(--sh-weight-title) !important;
  letter-spacing: -0.055em !important;
}

.panel h2, .column h2, .table-card h2, .form-card h2,
.card-title, .section-title, h2, h3 {
  font-weight: var(--sh-weight-title) !important;
  letter-spacing: -0.025em !important;
}

.panel h2, .column h2, .table-card h2, .form-card h2,
.card-title, .section-title {
  font-size: clamp(16px, 1.25vw, 20px) !important;
}

.eyebrow, .nav-section-title, .table-card th {
  font-weight: var(--sh-weight-section) !important;
  letter-spacing: 0.14em !important;
}

input, select, textarea, .form-control,
.compact-form input, .compact-form select, .compact-form textarea {
  min-height: 42px !important;
  font-size: 13px !important;
  font-weight: var(--sh-weight-regular) !important;
  border-radius: 14px !important;
}

input::placeholder, textarea::placeholder {
  font-weight: var(--sh-weight-regular) !important;
  opacity: .68;
}

select option { font-weight: var(--sh-weight-regular) !important; }

input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  transform: none !important;
  accent-color: var(--refined-blue, #1677ff);
}

.switch-line input {
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
}

.primary-btn, .secondary-btn, .soft-btn, .success-btn, .danger-btn,
button.primary-btn, button.secondary-btn, button.soft-btn,
.compact-form button, .inline-form button,
.btn, button[type="submit"], button[type="button"] {
  min-height: 40px !important;
  height: 42px !important;
  padding: 0 17px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: var(--sh-weight-medium) !important;
  letter-spacing: -0.015em !important;
}

.primary-btn.full, .compact-form .full-button,
.settings-actions .primary-btn, .compact-form button[type="submit"] {
  width: 100%;
}

.panel, .hero, .table-card, .metric {
  padding: clamp(16px, 1.65vw, 26px) !important;
}

.metric strong {
  font-size: clamp(26px, 2.1vw, 34px) !important;
  font-weight: var(--sh-weight-title) !important;
}

.nav-link {
  min-height: 42px !important;
}

.topbar .topbar-pill, .topbar button, .language-toggle, .theme-toggle {
  font-weight: var(--sh-weight-medium) !important;
}

.schedule-days label {
  min-width: 72px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  font-weight: var(--sh-weight-medium) !important;
  border-radius: 999px !important;
}

.compact-form.three, .form-grid.three {
  gap: 12px !important;
}

@media (max-width: 760px) {
  .hero h1, .page-title h1, .page-content > h1 {
    font-size: 27px !important;
  }
  .panel, .hero, .table-card, .metric {
    padding: 16px !important;
  }
}



.calendar-cell {
  cursor: pointer;
  position: relative;
}

.calendar-cell.is-selected,
.calendar-day-pill.is-selected {
  border-color: var(--refined-blue);
  box-shadow: inset 0 0 0 1px rgba(22, 119, 255, 0.38), 0 14px 32px rgba(22, 119, 255, 0.14);
}

.dashboard-calendar-menu {
  position: fixed;
  z-index: 90;
  width: min(320px, calc(100vw - 28px));
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 70px rgba(2, 12, 27, 0.34);
  backdrop-filter: blur(18px);
}

.dashboard-calendar-menu[hidden] {
  display: none !important;
}

.dashboard-calendar-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 12px;
  border-bottom: 1px solid var(--border);
}

.dashboard-calendar-menu-head strong {
  display: block;
  margin-top: 4px;
  font-size: 0.98rem;
  font-weight: 650;
}

.dashboard-calendar-menu .icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text);
}

.dashboard-calendar-menu-grid {
  display: grid;
  gap: 10px;
  padding-top: 12px;
}

.calendar-menu-group {
  display: grid;
  gap: 6px;
}

.calendar-menu-group > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dashboard-calendar-menu-summary {
  padding: 10px 4px 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.calendar-menu-group a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 9px 11px;
  border-radius: 14px;
  color: var(--text);
  background: var(--surface-soft);
  text-decoration: none;
  border: 1px solid transparent;
}

.calendar-menu-group a.calendar-menu-create {
  background: color-mix(in srgb, var(--surface-soft) 70%, rgba(67, 209, 126, .16));
}

.calendar-menu-group a:hover,
.calendar-menu-group a:focus-visible {
  color: var(--refined-blue);
  border-color: rgba(22, 119, 255, 0.34);
  background: rgba(22, 119, 255, 0.1);
}

.calendar-menu-group i {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 999px;
}

/* MuoyApp usability polish: softer, cleaner, easier to scan. */
:root {
  --ui-page-pad: clamp(18px, 2.2vw, 32px);
  --ui-card-pad: clamp(18px, 2vw, 28px);
  --ui-radius-lg: 26px;
  --ui-radius-md: 18px;
  --ui-font-weight-body: 400;
  --ui-font-weight-label: 520;
  --ui-font-weight-heading: 580;
  --ui-font-weight-title: 620;
}

body {
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: var(--ui-font-weight-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.page-content {
  padding: var(--ui-page-pad);
}

.hero,
.panel,
.auth-card,
.post-card,
.column,
.setup-card,
.metric,
.workspace-card,
.mini-card,
.list-row,
.table-card {
  border-radius: var(--ui-radius-lg);
}

.hero {
  min-height: 160px;
  padding: clamp(26px, 3vw, 38px);
  margin-bottom: 22px;
}

.hero h1,
.auth-card h1,
.auth-copy h1 {
  font-size: clamp(2.1rem, 3.7vw, 3.7rem);
  line-height: 1;
  font-weight: var(--ui-font-weight-title);
  letter-spacing: -0.06em;
}

.hero h2,
.panel h2,
.column h2,
.post-card h2,
.setup-card h2,
.auth-form h2 {
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  line-height: 1.18;
  font-weight: var(--ui-font-weight-heading);
  letter-spacing: -0.035em;
}

h1,
h2,
h3,
h4,
strong,
b,
label,
th,
.nav-link,
.pill,
.account-pill,
.collapse-pill,
.soft-btn,
.primary-btn,
.text-btn,
.danger-btn,
.status-chip {
  font-weight: var(--ui-font-weight-label);
}

.brand strong,
.account-pill strong {
  font-weight: 600;
}

.eyebrow,
.nav-label,
th {
  font-weight: 650;
  letter-spacing: 0.13em;
}

.status-chip.warning {
  background: rgba(245, 158, 11, .16);
  color: var(--amber);
}

.status-chip.danger {
  background: rgba(255, 77, 103, .14);
  color: #ff8fa1;
}

.status-chip.success {
  background: rgba(24, 197, 143, .14);
  color: var(--green);
}

.panel,
.auth-card,
.post-card,
.setup-card {
  padding: var(--ui-card-pad);
}

input,
textarea,
select {
  min-height: 44px;
  padding: 12px 14px;
  border-radius: var(--ui-radius-md);
  font-weight: 400;
}

textarea {
  line-height: 1.45;
}

.pill,
.account-pill,
.collapse-pill,
.soft-btn,
.primary-btn,
.danger-btn {
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
}

.primary-btn,
.soft-btn,
.danger-btn {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.primary-btn:hover,
.soft-btn:hover,
.danger-btn:hover {
  transform: translateY(-1px);
}

.form-grid {
  gap: 14px;
}

.metric-grid {
  gap: 16px;
}

.metric {
  padding: 22px;
}

.metric strong {
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  font-weight: 560;
  margin: 10px 0;
}

.table-card {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

table {
  background: transparent;
}

th,
td {
  padding: 14px 16px;
}

th {
  font-size: 11px;
}

.nav-link {
  padding: 11px 14px;
  border-radius: 16px;
}

.nav-label {
  font-size: 11px;
  margin-top: 22px;
}

.board {
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 16px;
}

.column {
  padding: 18px;
  min-height: 280px;
}

.task-card {
  border-radius: 18px;
}

.empty-lane {
  padding: 16px;
}

@media (max-width: 1280px) {
  .board {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}

@media (max-width: 720px) {
  body {
    font-size: 13px;
  }

  .hero {
    padding: 22px;
    min-height: auto;
  }

  .hero h1,
  .auth-card h1,
  .auth-copy h1 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .panel,
  .auth-card,
  .post-card,
  .setup-card,
  .metric {
    padding: 18px;
  }

  .board {
    grid-template-columns: 1fr;
  }
}

/* Batch 1-10 flow polish: navigation gating, workspace setup, TaskHub, and compact responsive forms. */
.workspace-card form { margin: 0; }
.workspace-card .soft-btn[disabled],
.workspace-card button[disabled] {
  opacity: .78;
  cursor: default;
  pointer-events: none;
}
.workspace-card.active {
  background: linear-gradient(135deg, rgba(25,119,255,.13), rgba(24,194,189,.07));
}
.setup-card .inline-form.two-actions {
  align-items: end;
}
.compact-reassign-form {
  grid-template-columns: minmax(120px, 1fr) auto;
  gap: 8px;
  margin-top: 12px;
}
.compact-reassign-form select {
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 14px;
}
.compact-reassign-form .soft-btn.small,
.compact-reassign-form .ghost-btn.small {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 14px;
}
.task-card strong {
  font-weight: 560;
}
.task-card .small {
  font-size: .82rem;
}
@media (min-width: 1281px) {
  .board {
    grid-template-columns: repeat(4, minmax(190px, 1fr));
  }
}
@media (max-width: 980px) {
  .setup-card .inline-form.two-actions,
  .compact-reassign-form {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   MuoyApp global UX revamp foundation
   Scope: shared color/typography/spacing/component polish without changing
   business behavior. This keeps the current blue/teal identity, but makes the
   product softer, lighter, and easier to scan across web screens.
   -------------------------------------------------------------------------- */
:root {
  --sh-primary: #2563eb;
  --sh-primary-hover: #1d4ed8;
  --sh-primary-soft: #dbeafe;
  --sh-accent: #14b8a6;
  --sh-accent-soft: #ccfbf1;
  --sh-success: #10b981;
  --sh-warning: #f59e0b;
  --sh-danger: #ef4444;
  --sh-light-bg: #f6f9fc;
  --sh-light-shell: #ffffff;
  --sh-light-panel: #ffffff;
  --sh-light-panel-soft: #eef5ff;
  --sh-light-border: #d8e4f2;
  --sh-light-text: #102033;
  --sh-light-muted: #667891;
  --sh-dark-bg: #071524;
  --sh-dark-shell: #081827;
  --sh-dark-panel: #102235;
  --sh-dark-panel-soft: #162b42;
  --sh-dark-border: #233b56;
  --sh-dark-text: #eef6ff;
  --sh-dark-muted: #9fb2c7;
  --sh-radius-xs: 10px;
  --sh-radius-sm: 14px;
  --sh-radius-md: 18px;
  --sh-radius-lg: 24px;
  --sh-radius-xl: 30px;
  --sh-space-page: clamp(16px, 2.3vw, 30px);
  --sh-space-card: clamp(18px, 2vw, 24px);
  --sh-shadow-soft: 0 20px 56px rgba(15, 35, 58, .10);
  --sh-shadow-subtle: 0 10px 28px rgba(15, 35, 58, .07);
  --sh-font: var(--font-latin);
}

html[lang^="km"] {
  --font-body: var(--font-khmer);
  --sh-font: var(--font-khmer);
}

html[lang^="km"] body,
html[lang^="km"] button,
html[lang^="km"] input,
html[lang^="km"] textarea,
html[lang^="km"] select {
  letter-spacing: 0 !important;
}

html[lang^="km"] body {
  line-height: 1.68;
}

html[lang^="km"] h1,
html[lang^="km"] h2,
html[lang^="km"] h3,
html[lang^="km"] h4,
html[lang^="km"] h5,
html[lang^="km"] h6,
html[lang^="km"] .hero h1,
html[lang^="km"] .auth-card h1,
html[lang^="km"] .auth-copy h1,
html[lang^="km"] .page-title,
html[lang^="km"] .hero-title,
html[lang^="km"] .card-title,
html[lang^="km"] .section-title,
html[lang^="km"] [class*="title"],
html[lang^="km"] [class*="Title"] {
  letter-spacing: 0 !important;
  line-height: 1.32 !important;
}

html, body {
  font-family: var(--sh-font);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -.01em;
  background: var(--sh-light-bg);
  color: var(--sh-light-text);
}

body[data-theme="dark"],
body.theme-dark,
html[data-theme="dark"] body,
.dark body {
  background: var(--sh-dark-bg);
  color: var(--sh-dark-text);
}

body, button, input, textarea, select {
  font-family: var(--sh-font);
}

h1, h2, h3, h4, h5, h6,
strong, b,
.page-title,
.hero-title,
.card-title,
.section-title,
[class*="title"],
[class*="Title"] {
  font-weight: 560 !important;
  letter-spacing: -.035em;
}

/* Page and section headings use bold weight in both languages/themes.
   Keep message read/unread titles and ordinary labels on their own styles. */
h1, h2, h3, h4, h5, h6,
.page-title, .hero-title, .card-title, .section-title {
  font-weight: 700 !important;
}

h1, .page-title, .hero-title {
  font-size: clamp(1.85rem, 3vw, 3.05rem) !important;
  line-height: 1.04;
}

h2, .section-title {
  font-size: clamp(1.35rem, 2vw, 2rem) !important;
}

h3, .card-title {
  font-size: clamp(1.05rem, 1.35vw, 1.3rem) !important;
}

p, li, small, label,
.help-text,
.muted,
.subtitle,
[class*="subtitle"],
[class*="muted"] {
  font-weight: 400 !important;
  line-height: 1.62;
}

label, th, .kicker, .eyebrow, .section-kicker,
[class*="label"], [class*="Label"] {
  font-weight: 520 !important;
  letter-spacing: .02em;
}

/* Shell and nav: broad enough to catch old/new class names without page rewrites. */
.top-nav, .topbar, .app-topbar, .app-header, header[role="banner"] {
  min-height: 68px;
  padding-inline: clamp(14px, 2vw, 28px) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--sh-light-border) 82%, transparent) !important;
  background: color-mix(in srgb, var(--sh-light-shell) 92%, transparent) !important;
  backdrop-filter: blur(18px);
}

body[data-theme="dark"] .top-nav,
body[data-theme="dark"] .topbar,
body[data-theme="dark"] .app-topbar,
body[data-theme="dark"] .app-header,
body.theme-dark .top-nav,
body.theme-dark .topbar,
body.theme-dark .app-topbar,
body.theme-dark .app-header {
  border-bottom-color: color-mix(in srgb, var(--sh-dark-border) 84%, transparent) !important;
  background: color-mix(in srgb, var(--sh-dark-shell) 94%, transparent) !important;
}

aside, .left-nav, .side-nav, .sidebar, .app-sidebar, .app-left-nav {
  background: color-mix(in srgb, var(--sh-light-shell) 92%, var(--sh-light-panel-soft)) !important;
  border-right: 1px solid var(--sh-light-border) !important;
  color: var(--sh-light-muted) !important;
}

body[data-theme="dark"] aside,
body[data-theme="dark"] .left-nav,
body[data-theme="dark"] .side-nav,
body[data-theme="dark"] .sidebar,
body[data-theme="dark"] .app-sidebar,
body[data-theme="dark"] .app-left-nav,
body.theme-dark aside,
body.theme-dark .left-nav,
body.theme-dark .side-nav,
body.theme-dark .sidebar,
body.theme-dark .app-sidebar,
body.theme-dark .app-left-nav {
  background: linear-gradient(180deg, var(--sh-dark-shell), color-mix(in srgb, var(--sh-dark-shell) 86%, var(--sh-primary))) !important;
  border-right-color: var(--sh-dark-border) !important;
  color: var(--sh-dark-muted) !important;
}

aside a, .left-nav a, .side-nav a, .sidebar a, .app-sidebar a,
.nav-link, .app-nav-link, [class*="nav-link"] {
  min-height: 40px;
  border-radius: 15px !important;
  color: inherit !important;
  font-size: .92rem !important;
  font-weight: 480 !important;
  letter-spacing: -.012em;
  transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}

aside a:hover, .left-nav a:hover, .side-nav a:hover, .sidebar a:hover, .app-sidebar a:hover,
.nav-link:hover, .app-nav-link:hover, [class*="nav-link"]:hover {
  background: color-mix(in srgb, var(--sh-primary-soft) 62%, transparent) !important;
  color: var(--sh-primary) !important;
  transform: translateX(1px);
}

aside a.active, .left-nav a.active, .side-nav a.active, .sidebar a.active, .app-sidebar a.active,
.nav-link.active, .app-nav-link.active, [aria-current="page"] {
  background: color-mix(in srgb, var(--sh-primary) 12%, var(--sh-primary-soft)) !important;
  border: 1px solid color-mix(in srgb, var(--sh-primary) 26%, transparent) !important;
  color: var(--sh-primary) !important;
  font-weight: 540 !important;
}

.nav-section-title, .nav-heading, .sidebar-heading, [class*="nav-section"] {
  color: var(--sh-light-muted) !important;
  font-size: .73rem !important;
  font-weight: 600 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}

body[data-theme="dark"] .nav-section-title,
body[data-theme="dark"] .nav-heading,
body[data-theme="dark"] .sidebar-heading,
body.theme-dark .nav-section-title,
body.theme-dark .nav-heading,
body.theme-dark .sidebar-heading {
  color: var(--sh-dark-muted) !important;
}

/* Main content rhythm. */
main, .main, .app-main, .content, .main-content, .page-content, [class*="content-area"] {
  padding: var(--sh-space-page) !important;
}

.page-header, .hero-card, .dashboard-hero, .section-hero, [class*="hero"] {
  border-radius: var(--sh-radius-xl) !important;
  padding: clamp(22px, 3vw, 38px) !important;
  border: 1px solid color-mix(in srgb, var(--sh-light-border) 82%, transparent) !important;
  background:
    radial-gradient(circle at top right, rgba(20, 184, 166, .12), transparent 36%),
    linear-gradient(135deg, var(--sh-light-panel), color-mix(in srgb, var(--sh-light-panel-soft) 72%, white)) !important;
  box-shadow: var(--sh-shadow-subtle);
}

body[data-theme="dark"] .page-header,
body[data-theme="dark"] .hero-card,
body[data-theme="dark"] .dashboard-hero,
body[data-theme="dark"] .section-hero,
body.theme-dark .page-header,
body.theme-dark .hero-card,
body.theme-dark .dashboard-hero,
body.theme-dark .section-hero {
  border-color: var(--sh-dark-border) !important;
  background:
    radial-gradient(circle at top right, rgba(20, 184, 166, .12), transparent 36%),
    linear-gradient(135deg, var(--sh-dark-panel), color-mix(in srgb, var(--sh-dark-panel-soft) 76%, var(--sh-dark-bg))) !important;
}

.card, .panel, .box, .tile, .metric-card, .form-card, .table-card,
[class*="card"], [class*="panel"] {
  border-radius: var(--sh-radius-lg) !important;
  border: 0px solid color-mix(in srgb, var(--sh-light-border) 88%, transparent) !important;
  background: color-mix(in srgb, var(--sh-light-panel) 94%, var(--sh-light-panel-soft)) !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .card,
body[data-theme="dark"] .panel,
body[data-theme="dark"] .box,
body[data-theme="dark"] .tile,
body[data-theme="dark"] .metric-card,
body[data-theme="dark"] .form-card,
body[data-theme="dark"] .table-card,
body.theme-dark .card,
body.theme-dark .panel,
body.theme-dark .box,
body.theme-dark .tile,
body.theme-dark .metric-card,
body.theme-dark .form-card,
body.theme-dark .table-card {
  border-color: var(--sh-dark-border) !important;
  background: color-mix(in srgb, var(--sh-dark-panel) 92%, var(--sh-dark-panel-soft)) !important;
}

/* Inputs and buttons. */
input, select, textarea, .form-control, .form-select {
  min-height: 42px;
  border-radius: 15px !important;
  border: 1px solid var(--sh-light-border) !important;
  background: color-mix(in srgb, #fff 92%, var(--sh-light-panel-soft)) !important;
  color: var(--sh-light-text) !important;
  font-weight: 430 !important;
}

body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea,
body[data-theme="dark"] .form-control,
body[data-theme="dark"] .form-select,
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .form-control,
body.theme-dark .form-select {
  border-color: var(--sh-dark-border) !important;
  background: color-mix(in srgb, var(--sh-dark-bg) 72%, var(--sh-dark-panel)) !important;
  color: var(--sh-dark-text) !important;
}

input:focus, select:focus, textarea:focus, .form-control:focus, .form-select:focus {
  outline: 0 !important;
  border-color: color-mix(in srgb, var(--sh-primary) 72%, var(--sh-light-border)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sh-primary) 14%, transparent) !important;
}

button, .btn, .button, .primary-btn, .secondary-btn, .soft-btn, .danger-btn, a.btn {
  min-height: 40px;
  border-radius: 15px !important;
  font-weight: 540 !important;
  letter-spacing: -.01em;
}

.primary-btn, .btn-primary, button[type="submit"], .button-primary {
  border: 0 !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--sh-primary), color-mix(in srgb, var(--sh-primary) 64%, var(--sh-accent))) !important;
}

.secondary-btn, .btn-secondary, .soft-btn, .button-secondary {
  color: var(--sh-primary) !important;
  background: color-mix(in srgb, var(--sh-primary-soft) 76%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--sh-primary) 18%, transparent) !important;
}

.danger-btn, .btn-danger {
  color: #fff !important;
  background: var(--sh-danger) !important;
  border-color: var(--sh-danger) !important;
}

/* Tables: remove heavy visual blocks while preserving readability. */
table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
}

thead th {
  color: var(--sh-light-muted) !important;
  background: color-mix(in srgb, var(--sh-light-panel-soft) 68%, #fff) !important;
  font-size: .78rem !important;
  text-transform: uppercase;
  letter-spacing: .09em;
}

tbody td {
  color: var(--sh-light-text) !important;
  background: color-mix(in srgb, var(--sh-light-panel) 96%, var(--sh-light-panel-soft)) !important;
  border-top: 1px solid color-mix(in srgb, var(--sh-light-border) 75%, transparent) !important;
}

body[data-theme="dark"] thead th,
body.theme-dark thead th {
  color: var(--sh-dark-muted) !important;
  background: color-mix(in srgb, var(--sh-dark-panel-soft) 74%, var(--sh-dark-panel)) !important;
}

body[data-theme="dark"] tbody td,
body.theme-dark tbody td {
  color: var(--sh-dark-text) !important;
  background: color-mix(in srgb, var(--sh-dark-panel) 94%, var(--sh-dark-panel-soft)) !important;
  border-top-color: color-mix(in srgb, var(--sh-dark-border) 78%, transparent) !important;
}

.badge, .chip, .status, .status-chip, [class*="badge"], [class*="chip"] {
  border-radius: 999px !important;
  font-size: .76rem !important;
  font-weight: 540 !important;
}

/* Mobile web shell behavior. */
@media (max-width: 820px) {
  .top-nav, .topbar, .app-topbar, .app-header, header[role="banner"] {
    min-height: 60px;
    padding-inline: 12px !important;
  }
  main, .main, .app-main, .content, .main-content, .page-content, [class*="content-area"] {
    padding: 14px !important;
  }
  h1, .page-title, .hero-title {
    font-size: clamp(1.65rem, 7vw, 2.35rem) !important;
  }
  .page-header, .hero-card, .dashboard-hero, .section-hero, [class*="hero"] {
    padding: 20px !important;
    border-radius: 24px !important;
  }
  .card, .panel, .box, .tile, .metric-card, .form-card, .table-card,
  [class*="card"], [class*="panel"] {
    border-radius: 20px !important;
  }
}
/* MuoyApp dark-mode repair: html[data-theme] authoritative selector
   The app stores theme state on <html>, not <body>. Keep this block after the
   global foundation so dark mode overrides broad light selectors such as
   [class*="card"], [class*="panel"], and [class*="hero"]. */
html[data-theme="dark"],
html[data-theme="dark"] body {
  background: var(--sh-dark-bg) !important;
  color: var(--sh-dark-text) !important;
}

html[data-theme="dark"] .super-shell,
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .main,
html[data-theme="dark"] .app-main,
html[data-theme="dark"] .content,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .page-content,
html[data-theme="dark"] [class*="content-area"] {
  background: var(--sh-dark-bg) !important;
  color: var(--sh-dark-text) !important;
}

html[data-theme="dark"] .top-nav,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .app-topbar,
html[data-theme="dark"] .app-header,
html[data-theme="dark"] header[role="banner"] {
  border-bottom-color: color-mix(in srgb, var(--sh-dark-border) 84%, transparent) !important;
  background: color-mix(in srgb, var(--sh-dark-shell) 94%, transparent) !important;
  color: var(--sh-dark-text) !important;
}

html[data-theme="dark"] aside,
html[data-theme="dark"] .left-nav,
html[data-theme="dark"] .side-nav,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .app-sidebar,
html[data-theme="dark"] .app-left-nav {
  background: linear-gradient(180deg, var(--sh-dark-shell), color-mix(in srgb, var(--sh-dark-shell) 88%, var(--sh-primary))) !important;
  border-right-color: var(--sh-dark-border) !important;
  color: var(--sh-dark-muted) !important;
}

html[data-theme="dark"] aside a,
html[data-theme="dark"] .left-nav a,
html[data-theme="dark"] .side-nav a,
html[data-theme="dark"] .sidebar a,
html[data-theme="dark"] .app-sidebar a,
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .app-nav-link,
html[data-theme="dark"] [class*="nav-link"] {
  color: var(--sh-dark-muted) !important;
}

html[data-theme="dark"] aside a:hover,
html[data-theme="dark"] .left-nav a:hover,
html[data-theme="dark"] .side-nav a:hover,
html[data-theme="dark"] .sidebar a:hover,
html[data-theme="dark"] .app-sidebar a:hover,
html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .app-nav-link:hover,
html[data-theme="dark"] [class*="nav-link"]:hover {
  background: color-mix(in srgb, var(--sh-primary) 14%, transparent) !important;
  color: #dbeafe !important;
}

html[data-theme="dark"] aside a.active,
html[data-theme="dark"] .left-nav a.active,
html[data-theme="dark"] .side-nav a.active,
html[data-theme="dark"] .sidebar a.active,
html[data-theme="dark"] .app-sidebar a.active,
html[data-theme="dark"] .nav-link.active,
html[data-theme="dark"] .app-nav-link.active,
html[data-theme="dark"] [aria-current="page"] {
  background: color-mix(in srgb, var(--sh-primary) 18%, var(--sh-dark-panel)) !important;
  border-color: color-mix(in srgb, var(--sh-primary) 34%, transparent) !important;
  color: #bfdbfe !important;
}

html[data-theme="dark"] .nav-section-title,
html[data-theme="dark"] .nav-heading,
html[data-theme="dark"] .sidebar-heading,
html[data-theme="dark"] [class*="nav-section"] {
  color: var(--sh-dark-muted) !important;
}

html[data-theme="dark"] .page-header,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .dashboard-hero,
html[data-theme="dark"] .section-hero,
html[data-theme="dark"] [class*="hero"] {
  border-color: var(--sh-dark-border) !important;
  background:
    radial-gradient(circle at top right, rgba(20, 184, 166, .12), transparent 36%),
    linear-gradient(135deg, var(--sh-dark-panel), color-mix(in srgb, var(--sh-dark-panel-soft) 76%, var(--sh-dark-bg))) !important;
  color: var(--sh-dark-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .box,
html[data-theme="dark"] .tile,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] [class*="card"],
html[data-theme="dark"] [class*="panel"],
html[data-theme="dark"] [class*="tile"],
html[data-theme="dark"] [class*="metric"] {
  border-color: var(--sh-dark-border) !important;
  background: color-mix(in srgb, var(--sh-dark-panel) 92%, var(--sh-dark-panel-soft)) !important;
  color: var(--sh-dark-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] small,
html[data-theme="dark"] label,
html[data-theme="dark"] .help-text,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] [class*="subtitle"],
html[data-theme="dark"] [class*="muted"] {
  color: var(--sh-dark-muted) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] strong,
html[data-theme="dark"] b,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .hero-title,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] [class*="title"],
html[data-theme="dark"] [class*="Title"] {
  color: var(--sh-dark-text) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  border-color: var(--sh-dark-border) !important;
  background: color-mix(in srgb, var(--sh-dark-bg) 72%, var(--sh-dark-panel)) !important;
  color: var(--sh-dark-text) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: color-mix(in srgb, var(--sh-dark-muted) 72%, transparent) !important;
}

html[data-theme="dark"] .secondary-btn,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .soft-btn,
html[data-theme="dark"] .button-secondary,
html[data-theme="dark"] .pill,
html[data-theme="dark"] .ghost {
  color: #dbeafe !important;
  background: color-mix(in srgb, var(--sh-dark-panel-soft) 72%, var(--sh-dark-panel)) !important;
  border-color: var(--sh-dark-border) !important;
}

html[data-theme="dark"] thead th {
  color: var(--sh-dark-muted) !important;
  background: color-mix(in srgb, var(--sh-dark-panel-soft) 74%, var(--sh-dark-panel)) !important;
}

html[data-theme="dark"] tbody td {
  color: var(--sh-dark-text) !important;
  background: color-mix(in srgb, var(--sh-dark-panel) 94%, var(--sh-dark-panel-soft)) !important;
  border-top-color: color-mix(in srgb, var(--sh-dark-border) 78%, transparent) !important;
}

html[data-theme="dark"] .calendar-grid,
html[data-theme="dark"] .calendar-day,
html[data-theme="dark"] .day-card,
html[data-theme="dark"] [class*="calendar"] [class*="day"] {
  border-color: var(--sh-dark-border) !important;
  background: color-mix(in srgb, var(--sh-dark-panel) 88%, var(--sh-dark-bg)) !important;
  color: var(--sh-dark-text) !important;
}

/* PeopleHub module shortcuts */
.nav-subgroup{display:grid;gap:4px;margin:-4px 0 16px 42px}.nav-subitem{color:var(--muted,#7c8fa8);font-size:.82rem;font-weight:500;line-height:1.2;padding:7px 12px;border-radius:999px;text-decoration:none}.nav-subitem:hover{background:var(--soft-panel,rgba(37,99,235,.12));color:var(--accent,#2563eb)}.sidebar-collapsed .nav-subgroup{display:none}.peoplehub-hero{align-items:center}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.compact-metrics{margin-top:18px}.peoplehub-module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}.peoplehub-module-card{display:flex;gap:14px;min-height:150px;padding:20px;border:1px solid var(--border,rgba(148,163,184,.28));border-radius:24px;background:var(--surface,rgba(255,255,255,.76));color:var(--text,#0f172a);text-decoration:none;box-shadow:0 18px 48px rgba(15,23,42,.06);transition:transform .18s ease,border-color .18s ease,background .18s ease}.peoplehub-module-card:hover{transform:translateY(-2px);border-color:var(--accent,#2563eb)}.module-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:16px;background:rgba(37,99,235,.13);color:var(--accent,#2563eb);font-weight:700}.peoplehub-module-card h2{margin:3px 0 7px;font-size:1.05rem;font-weight:600}.peoplehub-module-card p{margin:0;color:var(--muted,#64748b);font-size:.9rem}.accent-green .module-icon{background:rgba(16,185,129,.13);color:#10b981}.accent-red .module-icon{background:rgba(239,68,68,.13);color:#ef4444}.accent-purple .module-icon{background:rgba(139,92,246,.13);color:#8b5cf6}.accent-amber .module-icon{background:rgba(245,158,11,.13);color:#f59e0b}.peoplehub-status-list{margin-top:16px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.text-link{color:var(--accent,#2563eb);text-decoration:none;font-weight:600}.soft-table table{background:transparent!important}@media(max-width:1100px){.peoplehub-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.peoplehub-module-grid{grid-template-columns:1fr}.hero-actions{justify-content:flex-start}}

/* PeopleHub accordion navigation */
.nav-accordion {
  margin: 4px 0;
}
.nav-accordion > summary {
  list-style: none;
  cursor: pointer;
}
.nav-accordion > summary::-webkit-details-marker {
  display: none;
}
.nav-accordion-summary {
  width: 100%;
}
.nav-chevron {
  margin-left: auto;
  color: currentColor;
  opacity: .72;
  font-size: .92rem;
  transition: transform .18s ease, opacity .18s ease;
}
.nav-accordion[open] > .nav-accordion-summary {
  background: color-mix(in srgb, var(--sh-primary, #1977ff) 12%, transparent) !important;
  color: var(--sh-primary, #1977ff) !important;
}
.nav-accordion[open] .nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}
.nav-accordion .nav-subgroup {
  display: grid;
  gap: 4px;
  margin: 2px 0 14px 42px;
  padding: 4px 0 2px 10px;
  border-left: 1px solid color-mix(in srgb, var(--line, rgba(148, 163, 184, .25)) 80%, transparent);
}
.nav-accordion .nav-subitem {
  display: flex;
  align-items: center;
  min-height: 34px;
  color: var(--muted, #7c8fa8) !important;
  font-size: .86rem !important;
  font-weight: 450 !important;
  line-height: 1.2;
  padding: 7px 12px;
  border-radius: 999px;
  text-decoration: none;
}
.nav-accordion .nav-subitem:hover,
.nav-accordion .nav-subitem[aria-current="page"] {
  background: color-mix(in srgb, var(--sh-primary, #1977ff) 12%, transparent) !important;
  color: var(--sh-primary, #1977ff) !important;
}
.super-shell.sidebar-collapsed .nav-accordion .nav-subgroup,
.super-shell.sidebar-collapsed .nav-chevron {
  display: none !important;
}
.super-shell.sidebar-collapsed .nav-accordion-summary {
  justify-content: center !important;
  padding: 13px !important;
}
@media (max-width: 980px) {
  .super-shell.sidebar-collapsed .nav-chevron {
    display: inline-block !important;
  }
  .super-shell.sidebar-collapsed .nav-accordion .nav-subgroup {
    display: grid !important;
  }
}


/* MuoyApp shared live clock */
.sh-sticky-clock{position:fixed;right:22px;bottom:22px;z-index:80;display:grid;grid-template-columns:46px minmax(112px,1fr) auto;align-items:center;gap:12px;min-width:320px;max-width:min(92vw,430px);padding:10px 12px;border:1px solid color-mix(in srgb,var(--sh-primary,#1977ff) 22%,transparent);border-radius:999px;color:var(--text,#10213d);background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(231,244,255,.9));box-shadow:0 18px 48px rgba(20,119,255,.20);backdrop-filter:blur(16px);cursor:grab}html[data-theme="dark"] .sh-sticky-clock{color:var(--sh-dark-text,#eef6ff);background:linear-gradient(135deg,rgba(13,33,56,.96),rgba(10,24,42,.92));border-color:color-mix(in srgb,var(--sh-primary,#1977ff) 34%,var(--sh-dark-border,rgba(148,163,184,.24)));box-shadow:0 18px 52px rgba(0,0,0,.34)}.sh-sticky-clock.is-hidden{display:none}.sh-sticky-clock.is-dragging{cursor:grabbing;user-select:none}.sh-sticky-clock-orb{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:#fff;background:linear-gradient(135deg,#12b8be,#1478ff)}.sh-sticky-clock-orb svg{width:22px;height:22px}.sh-sticky-clock-copy{min-width:0}.sh-sticky-clock-copy span,.attendance-clock-status{display:block;color:var(--muted,#64748b);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.sh-sticky-clock-copy strong{display:block;color:inherit;font-size:1rem;font-weight:650;line-height:1.1}.sh-sticky-clock-copy small{display:block;color:var(--muted,#64748b);font-size:.76rem;font-weight:450;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}html[data-theme="dark"] .sh-sticky-clock-copy span,html[data-theme="dark"] .attendance-clock-status,html[data-theme="dark"] .sh-sticky-clock-copy small{color:var(--sh-dark-muted,#a8b8ce)}.sh-sticky-clock-hide{position:absolute;top:-8px;right:-5px;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;color:#64748b;background:rgba(255,255,255,.92);box-shadow:0 10px 24px rgba(15,23,42,.16);cursor:pointer}html[data-theme="dark"] .sh-sticky-clock-hide{color:#dbeafe;background:#13243a}.sh-sticky-clock-action,.hero-clock-action{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 18px;border:0;border-radius:999px;color:#fff;background:linear-gradient(135deg,#1478ff,#12b8be);font:inherit;font-weight:650;text-decoration:none;box-shadow:0 14px 28px rgba(20,119,255,.22);cursor:pointer}.sh-sticky-clock-action.is-out,.hero-clock-action.is-out{background:linear-gradient(135deg,#10b981,#0ea5a8)}.sh-sticky-clock-action.is-loading,.hero-clock-action.is-loading{opacity:.78;pointer-events:none}.hero-clock-action small{padding:5px 9px;border-radius:999px;color:rgba(255,255,255,.96);background:rgba(255,255,255,.18);font-size:.72rem;font-weight:650}.sh-sticky-clock-restore{position:fixed;right:22px;bottom:22px;z-index:79;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border:1px solid color-mix(in srgb,var(--sh-primary,#1977ff) 22%,transparent);border-radius:999px;color:var(--text,#10213d);background:rgba(255,255,255,.92);box-shadow:0 14px 34px rgba(15,23,42,.14);cursor:pointer}html[data-theme="dark"] .sh-sticky-clock-restore{color:var(--sh-dark-text,#eef6ff);background:color-mix(in srgb,var(--sh-dark-panel,#102033) 88%,transparent);border-color:var(--sh-dark-border,rgba(148,163,184,.24))}.hero-clock-side{align-items:stretch;min-width:min(360px,100%)}.hero-clock-card,.attendance-clock-card{display:grid;gap:10px;min-width:min(360px,100%)}.hero-clock-records{display:inline-flex;align-items:center;justify-content:center;min-height:42px;border-radius:999px;color:var(--sh-primary,#1478ff);background:color-mix(in srgb,var(--sh-primary,#1478ff) 10%,transparent);text-decoration:none;font-weight:600}.attendance-clock-hero{align-items:center}.attendance-clock-card{padding:14px;border:1px solid color-mix(in srgb,var(--sh-primary,#1478ff) 24%,transparent);border-radius:24px;background:color-mix(in srgb,var(--surface,#ffffff) 88%,var(--sh-primary,#1478ff) 4%)}html[data-theme="dark"] .hero-clock-records{background:rgba(96,165,250,.12)}html[data-theme="dark"] .attendance-clock-card{background:rgba(15,32,52,.86);border-color:rgba(96,165,250,.2)}@media (max-width:760px){.sh-sticky-clock{left:14px;right:14px;bottom:16px;min-width:0;grid-template-columns:44px 1fr auto}.sh-sticky-clock.is-positioned{left:14px!important;right:14px!important;top:auto!important;bottom:16px!important}.sh-sticky-clock-copy span,.sh-sticky-clock-copy small{display:none}.sh-sticky-clock-action{min-height:44px;padding:0 14px}.hero-clock-side{width:100%}}
/* MuoyApp global polish pass: responsive chrome, cards, and button consistency */
.sh-sticky-clock-restore[hidden] { display: none !important; }

.topbar { overflow: visible; }
.topbar-actions { flex-wrap: nowrap; overflow: visible; }
.topbar-actions > * { flex: 0 0 auto; }
.topbar-menu { display: none; position: relative; }
.topbar-menu > summary { list-style: none; }
.topbar-menu > summary::-webkit-details-marker { display: none; }
.topbar-menu-button { width: 48px; height: 48px; padding: 0; color: var(--text); }
.topbar-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  z-index: 120;
  width: min(290px, calc(100vw - 28px));
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface-solid, var(--surface)) 94%, transparent);
  box-shadow: 0 24px 70px rgba(2, 8, 23, .28);
  backdrop-filter: blur(18px);
}
.menu-row {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 560;
  text-align: left;
  cursor: pointer;
}
.menu-row:hover { background: color-mix(in srgb, var(--blue) 11%, transparent); color: var(--blue); }
.menu-language-form { padding: 0; }
.menu-language-form select {
  min-height: 46px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 560;
  cursor: pointer;
}

.nav-accordion-summary {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) 30px;
  align-items: center;
  column-gap: 12px;
  width: 100%;
  padding-right: 12px !important;
}
.nav-accordion-summary .nav-text { min-width: 0; }
.nav-chevron {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  margin-left: auto;
  border-radius: 999px;
  color: var(--blue);
  line-height: 1;
  transition: transform .18s ease, background .18s ease;
}
.nav-accordion[open] .nav-chevron { transform: rotate(180deg); background: color-mix(in srgb, var(--blue) 9%, transparent); }
.nav-subgroup {
  display: grid;
  gap: 7px;
  margin: 8px 0 18px 40px;
  padding-left: 12px;
  border-left: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
}
.nav-subitem {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 520;
}
.nav-subitem:hover,
.nav-subitem[aria-current="page"] {
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  border-color: color-mix(in srgb, var(--blue) 28%, transparent);
}

.primary-btn, .secondary-btn, .soft-btn, .btn, .btn-primary, .btn-soft {
  min-height: 44px;
  border-radius: 999px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 620;
  line-height: 1;
  text-decoration: none;
}
.primary-btn, .btn-primary {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 14px 34px rgba(20, 119, 255, .20);
}
.soft-btn, .secondary-btn, .btn-soft {
  border: 1px solid var(--line);
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 9%, transparent);
}
.primary-btn.small, .soft-btn.small, .btn.small { min-height: 40px; padding: 0 18px; }
.page-actions, .people-actions, .module-toolbar, .split-head { align-items: center; }

.metric-card {
  min-height: 112px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  display: grid;
  align-content: center;
  gap: 8px;
}
.metric-card span, .metric-card small { display: block; color: var(--muted); }
.metric-card strong { display: block; color: var(--text); font-size: clamp(24px, 3vw, 34px); font-weight: 660; line-height: 1; }
.metric-card.accent-green { border-left: 6px solid var(--green); }
.metric-card.accent-amber { border-left: 6px solid var(--amber); }
.metric-card.accent-purple { border-left: 6px solid var(--purple); }
.content-card, .list-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
}
.content-card { padding: 24px; }
.list-card { padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; }

@media (max-width: 900px) {
  .topbar { min-height: 72px; height: auto; padding: 10px 14px; gap: 10px; justify-content: flex-start; }
  .mobile-nav-toggle { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 999px; }
  .brand { min-width: 0; flex: 1 1 auto; gap: 10px; }
  .brand-mark, .brand-mark img { width: 42px; height: 42px; }
  .brand-copy strong { font-size: 1rem; line-height: 1.05; }
  .brand-copy small { display: none; }
  .topbar-actions { margin-left: auto; gap: 0; }
  .topbar-actions > :not(.topbar-menu) { display: none !important; }
  .topbar-menu { display: block; }
}

@media (min-width: 901px) {
  .topbar-menu { display: none !important; }
}

@media (max-width: 860px) {
  .people-directory-table { overflow: visible !important; border: 0 !important; }
  .people-directory-table table,
  .people-directory-table thead,
  .people-directory-table tbody,
  .people-directory-table tr,
  .people-directory-table td { width: 100% !important; min-width: 0 !important; }
  .people-directory-table table,
  .people-directory-table tbody,
  .people-directory-table tr,
  .people-directory-table td { display: block; }
  .people-directory-table thead { display: none; }
  .people-directory-table tr {
    padding: 16px;
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
  }
  .people-directory-table td {
    display: grid;
    grid-template-columns: minmax(94px, 34%) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 8px 0 !important;
    border: 0 !important;
  }
  .people-directory-table td::before {
    content: attr(data-label);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
    font-weight: 700;
  }
  .people-directory-table td:first-child { display: block; }
  .people-directory-table td:first-child::before { display: block; margin-bottom: 6px; }
  .people-directory-table td:last-child { width: auto !important; min-width: 0 !important; }
  .people-actions { justify-content: flex-start; }
  .people-actions .soft-btn { min-height: 38px; padding-inline: 14px; }
  .module-toolbar { grid-template-columns: 1fr; align-items: start; }
  .module-toolbar form { width: 100%; grid-template-columns: 1fr; }
}
/* MuoyApp topbar compact-menu correction */
.theme-toggle .theme-icon,
.topbar-menu-panel .theme-icon {
  display: inline-grid;
  place-items: center;
  width: 1.1em;
  min-width: 1.1em;
  color: var(--accent-blue);
  font-size: 1.02em;
  line-height: 1;
}

.theme-toggle .theme-label,
.topbar-menu-panel .theme-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1120px) {
  .topbar {
    gap: clamp(0.45rem, 2vw, 0.8rem);
  }

  .topbar-brand {
    min-width: 0;
    flex: 1 1 auto;
  }

  .topbar-actions {
    flex: 0 0 auto;
    margin-left: auto;
    gap: 0.55rem;
  }

  .topbar-actions > :not(.topbar-menu) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .topbar-menu {
    display: block !important;
    width: 52px;
    flex: 0 0 52px;
  }

  .topbar-menu-trigger {
    width: 52px;
    height: 52px;
  }
}

@media (min-width: 1121px) {
  .topbar-menu {
    display: none !important;
  }
}

/* Company settings polish ported for the MuoyApp admin workspace. */
.settings-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 2rem);
}

.settings-hero-card {
  min-width: 220px;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.22));
  border-radius: 22px;
  background: var(--panel-soft, rgba(255, 255, 255, 0.06));
  box-shadow: 0 16px 34px rgba(2, 6, 23, 0.12);
}

.settings-hero-card span,
.field-caption {
  display: block;
  color: var(--muted, #8fa4bf);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.settings-hero-card strong {
  display: block;
  margin-top: 0.35rem;
  color: var(--text, #eef6ff);
  font-size: 1.12rem;
  font-weight: 700;
}

.settings-hero-card small {
  color: var(--muted, #9db0c8);
}

.settings-card {
  padding: clamp(1.2rem, 2.2vw, 2rem);
}

.settings-card .section-heading {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.settings-card .section-heading h2 {
  margin: 0;
  color: var(--text, #eef6ff);
  font-size: clamp(1.15rem, 1.6vw, 1.55rem);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.settings-card .section-heading p {
  margin: 0;
  color: var(--muted, #9db0c8);
}

.settings-form label,
.settings-card .stack-form label {
  gap: 0.45rem;
  color: var(--muted, #a8bad1);
  font-weight: 550;
}

.settings-card input,
.settings-card select,
.settings-card textarea {
  min-height: 46px;
  border-radius: 16px;
}

.settings-rule-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(260px, 1.25fr);
  gap: 1rem;
  align-items: stretch;
  margin: 1.1rem 0 1.4rem;
  padding: 1rem;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.22));
  border-radius: 22px;
  background: var(--panel-soft, rgba(255, 255, 255, 0.04));
}

.switch-card,
.settings-card .switch-line {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem !important;
  min-height: 46px;
  padding: 0.78rem 0.95rem;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.20));
  border-radius: 18px;
  background: var(--chip-bg, rgba(148, 163, 184, 0.10));
  color: var(--text, #eef6ff) !important;
}

.switch-card input,
.settings-card .switch-line input {
  min-height: auto;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.working-days-block {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.day-pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.day-pill-grid label {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 0.45rem !important;
  min-width: 82px;
  min-height: 42px;
  padding: 0.62rem 0.85rem;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.22));
  border-radius: 999px;
  background: var(--chip-bg, rgba(148, 163, 184, 0.10));
  color: var(--text, #eef6ff) !important;
  font-weight: 600;
}

.day-pill-grid input {
  min-height: auto;
  width: 16px;
  height: 16px;
}

.settings-card .responsive-grid,
.settings-card.responsive-grid {
  gap: 1rem;
}

.settings-card .mini-card {
  border-radius: 22px;
}

/* Schedule workspace: separate the employee view from team management. */
.schedule-page-head {
  margin-bottom: 1rem;
}

.schedule-scope-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(10rem, 1fr));
  gap: .25rem;
  padding: .3rem;
  margin-bottom: 1rem;
  border: 1px solid var(--line);
  border-radius: .85rem;
  background: var(--surface);
}

.schedule-scope-switch a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: .55rem .9rem;
  border-radius: .65rem;
  color: var(--muted);
  font-weight: 800;
  text-decoration: none;
}

.schedule-scope-switch a:hover,
.schedule-scope-switch a.active {
  color: var(--text);
  background: color-mix(in srgb, var(--blue) 16%, var(--surface));
}

.schedule-scope-switch a.active {
  box-shadow: inset 0 -2px 0 var(--blue);
}

.schedule-date-toolbar {
  display: flex;
  align-items: end;
  gap: .75rem;
  padding: .85rem 1rem;
  margin: 0 0 1rem;
  border: 1px solid var(--line);
  border-radius: .85rem;
  background: var(--surface);
}

.schedule-date-toolbar label {
  display: grid;
  gap: .35rem;
  min-width: 14rem;
}

.schedule-date-toolbar label > span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}

.schedule-date-toolbar input {
  min-height: 42px;
}

.schedule-date-toolbar > a {
  margin-left: auto;
  color: var(--muted);
  font-weight: 750;
  text-decoration: none;
}

@media (max-width: 760px) {
  .schedule-scope-switch {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }

  .schedule-date-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .schedule-date-toolbar label {
    min-width: 0;
  }

  .schedule-date-toolbar > a {
    margin-left: 0;
  }
}

/* People workspace dedicated layout. */
body .super-shell.is-authenticated .page-content > .people-workspace-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .super-shell.is-authenticated .people-workspace-header > div:first-child,
body .super-shell.is-authenticated .people-workspace-header .people-hero-copy,
body .super-shell.is-authenticated .people-workspace-header .page-actions {
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .super-shell.is-authenticated .people-workspace-header h1 {
  margin: 0 0 5px !important;
  font-size: clamp(2rem, 3vw, 3rem) !important;
  line-height: 1.05 !important;
}

body .super-shell.is-authenticated .people-workspace-header .people-hero-count {
  display: none !important;
}

body .super-shell.is-authenticated .people-workspace-header .page-actions {
  display: flex !important;
  justify-content: flex-end !important;
}

body .people-action-menu[open]::before {
  content: none !important;
}

body .people-action-menu[open] > .people-action-backdrop {
  display: block !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

body .people-action-popover {
  top: 104px !important;
  right: 22px !important;
  bottom: 22px !important;
  left: auto !important;
  width: min(368px, calc(100vw - 32px)) !important;
  max-height: none !important;
  padding: 18px 16px !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .34) !important;
}

body .people-action-person {
  position: relative !important;
  grid-template-columns: 46px minmax(0, 1fr) 40px !important;
  margin: 0 0 14px !important;
  padding: 0 0 16px !important;
}

body .people-action-close {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  background: color-mix(in srgb, var(--panel-soft) 88%, transparent) !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

body .people-action-close:hover,
body .people-action-close:focus-visible {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

@media (max-width: 760px) {
  body .super-shell.is-authenticated .page-content > .people-workspace-header {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body .super-shell.is-authenticated .people-workspace-header .page-actions,
  body .super-shell.is-authenticated .people-workspace-header .page-actions .primary-btn {
    width: 100% !important;
  }

  body .people-action-popover {
    top: auto !important;
    right: 10px !important;
    bottom: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-height: min(78vh, 680px) !important;
  }
}

/* People form: equal add-method choices and a calmer two-section layout. */
body .employee-mode-switch {
  align-items: stretch;
}

body .employee-mode-option {
  box-sizing: border-box;
  width: 100%;
  height: 72px;
  min-height: 72px;
  margin: 0;
  align-self: stretch;
  appearance: none;
  line-height: 1.2;
  text-decoration: none;
}

body .employee-form-section {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 76%, transparent);
}

body .employee-form-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 15px;
}

body .employee-form-section-heading strong {
  color: var(--text);
  font-size: 1rem;
}

body .employee-form-section-heading small,
body .field-help {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 500;
}

body .employee-form-section .compact-form {
  margin: 0;
}

body .employee-submit-btn {
  width: 100%;
  margin-top: 16px;
}

@media (max-width: 760px) {
  body .employee-mode-option {
    height: 64px;
    min-height: 64px;
  }

  body .employee-form-section {
    padding: 15px;
  }

  body .employee-form-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  body .employee-form-section .compact-form.two {
    grid-template-columns: 1fr;
  }
}

/* Canonical People workspace drawer surface. Keep this block last so older
   transparent popover experiments cannot leak the directory through it. */
body .people-action-menu[open] > .people-action-backdrop {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 245 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(2, 10, 21, .58) !important;
  backdrop-filter: blur(3px) !important;
}

body .people-action-popover {
  position: fixed !important;
  z-index: 250 !important;
  border: 1px solid #24476d !important;
  background: #081b2f !important;
  background-image: linear-gradient(180deg, #0a2037 0%, #071827 100%) !important;
  color: #f4f8ff !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .34) !important;
  opacity: 1 !important;
  isolation: isolate !important;
  backdrop-filter: none !important;
}

html[data-theme="light"] body .people-action-popover {
  border-color: #c7d9ed !important;
  background: #fff !important;
  background-image: none !important;
  color: #10233c !important;
}

body .people-action-popover > .people-action-close {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #24476d !important;
  border-radius: 10px !important;
  color: #f4f8ff !important;
  background: #102b47 !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
}

html[data-theme="light"] body .people-action-popover > .people-action-close {
  border-color: #c7d9ed !important;
  color: #10233c !important;
  background: #eef5fc !important;
}

/* People action drawer final cascade guard. */
body .people-action-menu[open]::before {
  content: none !important;
}

body .people-action-menu[open] > .people-action-backdrop {
  display: block !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

body .people-action-popover {
  top: 104px !important;
  right: 22px !important;
  bottom: 22px !important;
  left: auto !important;
  width: min(368px, calc(100vw - 32px)) !important;
  max-height: none !important;
  padding: 18px 16px !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .34) !important;
}

body .people-action-person {
  position: relative !important;
  grid-template-columns: 46px minmax(0, 1fr) 40px !important;
  margin: 0 0 14px !important;
  padding: 0 0 16px !important;
}

body .people-action-close {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  background: color-mix(in srgb, var(--panel-soft) 88%, transparent) !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

body .people-action-close:hover,
body .people-action-close:focus-visible {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

@media (max-width: 760px) {
  body .people-action-popover {
    top: auto !important;
    right: 10px !important;
    bottom: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-height: min(78vh, 680px) !important;
  }
}


.settings-disclosure {
  padding: 0;
  overflow: hidden;
}

.settings-disclosure > summary,
.settings-subsection > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  cursor: pointer;
  list-style: none;
  color: var(--text, #eef6ff);
}

.settings-disclosure > summary::-webkit-details-marker,
.settings-subsection > summary::-webkit-details-marker {
  display: none;
}

.settings-disclosure > summary::after,
.settings-subsection > summary::after {
  content: "+";
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.22));
  border-radius: 50%;
  color: var(--blue, #2f80ed);
  font-size: 1.35rem;
  line-height: 1;
  transition: transform 160ms ease;
}

.settings-disclosure[open] > summary::after,
.settings-subsection[open] > summary::after {
  transform: rotate(45deg);
}

.settings-disclosure > summary > span,
.settings-subsection > summary > span {
  display: grid;
  gap: 0.22rem;
}

.settings-disclosure > summary strong,
.settings-subsection > summary strong {
  font-size: 1rem;
}

.settings-disclosure > summary small,
.settings-subsection > summary small,
.settings-profile-grid label > small {
  color: var(--muted, #9db0c8);
  font-weight: 450;
}

.settings-disclosure-body {
  padding: 0 1.35rem 1.35rem;
  border-top: 1px solid var(--border, rgba(148, 163, 184, 0.18));
}

.settings-disclosure-body > .responsive-grid,
.settings-disclosure-body.responsive-grid {
  padding-top: 1.25rem;
}

.organization-profile-form {
  width: min(100%, 1120px);
  margin-inline: auto;
}

.settings-profile-grid {
  gap: 0.9rem 1rem;
}

.settings-profile-grid label > small {
  display: block;
  margin-top: -0.15rem;
  font-size: 0.76rem;
}

.organization-profile-form .settings-rule-card {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.organization-profile-form .working-days-block {
  grid-column: 1 / -1;
}

.settings-subsection {
  margin-top: 0.25rem;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.22));
  border-radius: 18px;
  background: var(--panel-soft, rgba(255, 255, 255, 0.035));
  overflow: hidden;
}

.settings-subsection-body {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--border, rgba(148, 163, 184, 0.18));
}

.settings-form-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.25rem;
}

.settings-form-actions .btn {
  min-width: 180px;
}

@media (max-width: 1000px) {
  .settings-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-hero-card {
    width: 100%;
  }

  .settings-rule-card {
    grid-template-columns: 1fr;
  }

  .organization-profile-form .settings-rule-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .settings-card {
    padding: 1rem;
  }

  .settings-disclosure {
    padding: 0;
  }

  .settings-disclosure > summary,
  .settings-subsection > summary {
    padding: 1rem;
  }

  .settings-disclosure-body {
    padding-inline: 1rem;
  }

  .settings-profile-grid,
  .settings-subsection-body {
    grid-template-columns: 1fr !important;
  }

  .settings-subsection-body > * {
    grid-column: auto !important;
  }

  .settings-form-actions .btn {
    width: 100%;
  }

  .day-pill-grid label {
    min-width: calc(50% - 0.4rem);
  }
}

/* Company permission matrix: one user row with grouped module chips. */
.permission-editor-card,
.permission-matrix-card {
  padding: clamp(1.1rem, 2vw, 1.7rem);
}

.permission-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
  gap: 1rem;
  align-items: end;
}

.permission-form label {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.permission-check-groups {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.75rem;
}

.permission-check-group {
  min-width: 0;
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0.9rem;
  border: 1px solid rgba(116, 151, 190, .16);
  border-radius: 18px;
  background: rgba(7, 22, 38, .26);
}

.permission-check-group legend {
  padding: 0 0.35rem;
  color: var(--muted, #9db0c8);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.permission-checks {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.permission-checks label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.22));
  border-radius: 999px;
  background: var(--chip-bg, rgba(148, 163, 184, 0.10));
}

.permission-form-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.permission-user-cell strong,
.permission-user-cell span {
  display: block;
}

.permission-user-cell span {
  margin-top: 0.2rem;
  color: var(--muted, #9db0c8);
  font-size: 0.86rem;
}

.permission-module-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.permission-module-chip {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: min(100%, 300px);
  padding: 0.72rem 0.8rem;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.22));
  border-radius: 18px;
  background: var(--panel-soft, rgba(255, 255, 255, 0.05));
}

.permission-module-chip strong,
.permission-module-chip span {
  display: block;
}

.permission-module-chip span {
  margin-top: 0.2rem;
  color: var(--muted, #9db0c8);
  font-size: 0.78rem;
}

.permission-edit-btn {
  min-height: 34px;
  padding: 0.42rem 0.72rem;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .permission-form {
    grid-template-columns: 1fr;
  }

  .permission-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .permission-module-chip {
    width: 100%;
  }
}


/* PeopleHub add employee flow */
.permission-page-hero { margin-bottom: 1rem; }
.permission-editor-heading { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.25rem; }
.permission-editor-heading h2,
.permission-editor-heading p { margin: .2rem 0 0; }
.permission-heading-icon { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border-radius: 12px; color: var(--primary, #3b82f6); background: color-mix(in srgb, var(--primary, #3b82f6) 14%, transparent); }
.permission-select-field > span { font-weight: 750; }
.permission-action-section { grid-column: 1 / -1; display: grid; gap: .75rem; padding-top: .25rem; }
.permission-action-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.permission-action-heading span { color: var(--muted, #9db0c8); font-size: .86rem; }
.permission-action-section .permission-check-group { padding: 0; border: 0; background: transparent; }
.permission-action-section .permission-checks label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .7rem; min-width: min(100%, 210px); min-height: 64px; padding: .7rem .85rem; border-radius: 12px; cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.permission-action-section .permission-checks label[hidden] { display: none; }
.permission-action-section .permission-checks label:hover,
.permission-action-section .permission-checks label:has(input:checked) { border-color: color-mix(in srgb, var(--primary, #3b82f6) 60%, transparent); background: color-mix(in srgb, var(--primary, #3b82f6) 12%, transparent); }
.permission-action-section .permission-checks input { width: 18px; height: 18px; accent-color: var(--primary, #3b82f6); }
.permission-check-copy,
.permission-check-copy strong,
.permission-check-copy small { display: block; }
.permission-check-copy small { margin-top: .15rem; color: var(--muted, #9db0c8); font-weight: 500; }
.permission-remove-btn { margin-left: auto; color: var(--danger, #ef4444); border-color: color-mix(in srgb, var(--danger, #ef4444) 40%, transparent); }
.permission-module-chip { border-radius: 12px; }
.permission-enabled-actions { display: flex !important; flex-wrap: wrap; gap: .35rem; }
.permission-enabled-actions b { padding: .18rem .45rem; border-radius: 999px; color: var(--text, #e8f0fb); background: color-mix(in srgb, var(--primary, #3b82f6) 14%, transparent); font-size: .72rem; font-weight: 700; }

@media (max-width: 760px) {
  .permission-action-heading { display: grid; gap: .2rem; }
  .permission-action-section .permission-checks label { width: 100%; }
  .permission-remove-btn { margin-left: 0; }
}

/* PeopleHub add employee flow */
.employee-create-form {
  display: grid;
  gap: 1.15rem;
}

.employee-create-form .employee-mode-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  min-height: 5.75rem;
  margin: 1.55rem 0 1.6rem;
  padding: .46rem;
  border: 1px solid rgba(92, 231, 215, .24);
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(10, 93, 83, .96), rgba(39, 186, 166, .9));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 16px 34px rgba(0,0,0,.18);
  isolation: isolate;
}

.employee-create-form .employee-mode-grid::before,
.employee-create-form .employee-mode-grid::after {
  display: none;
  content: none;
}

.employee-create-form .employee-mode-card {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 4.8rem;
  display: grid;
  grid-template-columns: 4.8rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: .35rem 1.35rem .35rem .35rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: rgba(255,255,255,.78);
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition: background .22s ease, color .22s ease, transform .22s ease, opacity .22s ease;
}

.employee-create-form .employee-mode-card:hover {
  background: rgba(255,255,255,.08);
}

.employee-create-form .employee-mode-card.active {
  background: rgba(4, 25, 38, .66);
  color: #ffffff;
}

.employee-create-form .employee-mode-card .mode-icon {
  width: 4.35rem;
  height: 4.35rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  box-shadow: none;
  color: rgba(255,255,255,.7);
  font-size: 1.45rem;
  transition: background .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.employee-create-form .employee-mode-card.active .mode-icon {
  background: #ffffff;
  color: #ff3b30;
  box-shadow: 0 10px 26px rgba(0,0,0,.23);
  transform: scale(1.02);
}

.employee-create-form .employee-mode-card strong,
.employee-create-form .employee-mode-card small {
  display: block;
  min-width: 0;
  color: currentColor;
  line-height: 1.25;
}

.employee-create-form .employee-mode-card strong {
  margin: 0;
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.employee-create-form .employee-mode-card small {
  margin-top: .25rem;
  font-size: .78rem;
  opacity: .82;
}

html:not([data-theme='dark']) .employee-create-form .employee-mode-grid {
  border-color: rgba(0, 154, 137, .2);
  background: linear-gradient(135deg, #e9f8f4, #2ab7a2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.62), 0 16px 34px rgba(37, 99, 235, .12);
}

html:not([data-theme='dark']) .employee-create-form .employee-mode-card {
  color: #163052;
}

html:not([data-theme='dark']) .employee-create-form .employee-mode-card.active {
  background: rgba(255,255,255,.56);
  color: #10233f;
}

html:not([data-theme='dark']) .employee-create-form .employee-mode-card .mode-icon {
  background: rgba(255,255,255,.36);
  color: rgba(22,48,82,.55);
}

html:not([data-theme='dark']) .employee-create-form .employee-mode-card.active .mode-icon {
  background: #ffffff;
  color: #ff3b30;
}

.employee-create-form .mode-panel,
.employee-create-form .employee-profile-grid,
.employee-create-form .compact-form.no-card,
.employee-create-form .compact-form.three.no-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

.employee-create-form .mode-panel.hidden {
  display: none;
}

.employee-create-form .mode-panel[data-existing-user-panel],
.employee-create-form .mode-panel[data-new-user-fields] {
  margin-top: 1.15rem;
  padding: 1.1rem;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 1.35rem;
  background: rgba(255,255,255,.035);
}

html:not([data-theme='dark']) .employee-create-form .mode-panel[data-existing-user-panel],
html:not([data-theme='dark']) .employee-create-form .mode-panel[data-new-user-fields] {
  border-color: rgba(15, 23, 42, .08);
  background: rgba(255,255,255,.62);
}

.employee-create-form .mode-panel label,
.employee-create-form .employee-profile-grid label {
  min-width: 0;
}

.employee-create-form .user-search-state {
  margin-top: .65rem;
  font-size: .88rem;
}

.employee-create-form .user-search-results {
  display: grid;
  gap: .65rem;
  margin-top: .8rem;
}

.employee-create-form .employee-profile-grid {
  align-items: end;
  row-gap: 1rem;
  column-gap: 1rem;
}

.employee-create-form .employee-profile-grid .primary-btn {
  min-height: 50px;
  align-self: end;
  border-radius: 999px;
}

@media (max-width: 760px) {
  .employee-create-form .employee-mode-grid {
    min-height: 4.7rem;
    margin: 1.2rem 0 1.35rem;
    padding: .36rem;
  }

  .employee-create-form .employee-mode-card {
    grid-template-columns: 3.75rem minmax(0, 1fr);
    min-height: 4rem;
    gap: .65rem;
    padding: .3rem .7rem .3rem .3rem;
  }

  .employee-create-form .employee-mode-card .mode-icon {
    width: 3.45rem;
    height: 3.45rem;
    font-size: 1.1rem;
  }

  .employee-create-form .employee-mode-card strong {
    font-size: .82rem;
  }

  .employee-create-form .employee-mode-card small {
    display: none;
  }

  .employee-create-form .employee-profile-grid .primary-btn {
    grid-column: 1 / -1;
  }
}
/* Auth pages: shared single-surface layout */
body.auth-flat-page,
html[data-theme="dark"] body.auth-flat-page,
html[data-theme="light"] body.auth-flat-page {
  background: var(--bg);
}

.landing-auth.auth-only-auth {
  min-height: auto;
  align-items: start;
  padding-top: clamp(14px, 1.8vw, 26px);
}

.landing-panel.auth-only-panel,
html[data-theme="dark"] .landing-panel.auth-only-panel {
  width: min(100%, 1480px);
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}



.auth-glass-card.auth-only-card {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(26px, 3vw, 48px);
  border-radius: 30px;
  align-content: start;
}

.auth-glass-card.auth-only-card.auth-flat-card,
html[data-theme="dark"] .auth-glass-card.auth-only-card.auth-flat-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.auth-social-divider {
  width: min(100%, 620px);
  margin: 4px auto 0;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.auth-provider-section {
  display: grid;
  gap: 16px;
  width: 100%;
}

.auth-visual-heading {
  justify-items: center;
}

.auth-brand-mark {
  width: clamp(84px, 9vw, 118px);
  height: clamp(84px, 9vw, 118px);
  display: block;
  object-fit: contain;
  margin-bottom: 4px;
  filter: drop-shadow(0 14px 26px rgba(0, 102, 255, .18));
}

.auth-brand-mark--compact {
  width: clamp(62px, 6vw, 82px);
  height: clamp(62px, 6vw, 82px);
}

.auth-social-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  min-height: 52px;
  flex-wrap: nowrap;
}

.auth-social-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .2);
  transition: transform .16s ease, box-shadow .16s ease;
}

.auth-social-icon::before {
  content: none;
}

.auth-social-icon.oauth-btn--telegram {
  background: #2ca5e0;
  color: #fff;
}

.auth-social-logo {
  display: block;
  pointer-events: none;
}

.auth-social-logo--telegram {
  width: 30px;
  height: 30px;
  fill: currentColor;
  transform: translate(-1px, 1px);
}

.auth-social-icon.oauth-btn--facebook {
  background: #1877f2;
  color: #fff;
}

.auth-social-logo--facebook {
  width: 18px;
  height: 30px;
  fill: currentColor;
}

.auth-social-icon.oauth-btn--google {
  background: #fff;
}

.auth-social-logo--google {
  width: 29px;
  height: 29px;
}

.auth-social-icon.oauth-btn--telegram,
.auth-social-icon.oauth-btn--facebook {
  color: #fff !important;
}

.auth-social-icon.oauth-btn--telegram .auth-social-logo--telegram path,
.auth-social-icon.oauth-btn--facebook .auth-social-logo--facebook path {
  fill: #fff !important;
}

.auth-social-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .24);
}

.auth-social-icon:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 72%, white);
  outline-offset: 4px;
}

.auth-glass-card.auth-only-card--wide {
  max-width: none;
}

.auth-only-card .auth-card-heading {
  width: min(720px, 100%);
  margin: 0 auto clamp(16px, 2vw, 26px);
  text-align: center;
}

.auth-only-card .auth-card-heading h2 {
  margin: 0 0 8px;
  font-size: clamp(1.55rem, 2vw, 2.15rem);
  line-height: 1.08;
}

.auth-only-card .auth-card-heading p,
.auth-only-card .auth-footnote {
  color: var(--muted);
}

.auth-only-card label {
  color: var(--muted-strong);
  font-weight: 650;
}

.registration-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.auth-only-card .form-grid {
  width: 100%;
}

.auth-only-card .primary-btn.full,
.auth-only-card .secondary-btn.full,
.auth-only-card .auth-footnote {
  width: 100%;
}

.registration-stepper {
  gap: 18px;
}

.registration-stepper[hidden] {
  display: none;
}

.registration-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0 10px;
}

.registration-progress span {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, .04);
  font-size: .82rem;
  font-weight: 850;
  text-align: center;
  padding: 8px 10px;
}

.registration-progress span.is-active {
  color: #fff;
  border-color: rgba(25, 119, 255, .62);
  background: linear-gradient(135deg, var(--blue), #238fe0);
}

.registration-progress span.is-complete {
  color: var(--green);
  border-color: rgba(24, 197, 143, .36);
  background: rgba(24, 197, 143, .12);
}

.registration-step {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 20px;
  background: rgba(255, 255, 255, .035);
}

.registration-step[hidden],
.registration-step-error[hidden] {
  display: none;
}

.registration-progress [hidden],
[data-method-field][hidden],
[data-step-back][hidden],
[data-step-next][hidden],
[data-step-submit][hidden] {
  display: none !important;
}

.registration-step h3 {
  margin: 0;
  font-size: 1.45rem;
  letter-spacing: -.03em;
}

.registration-method-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.registration-method-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 82px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
}

.registration-method-option:has(input:checked) {
  border-color: rgba(25, 119, 255, .72);
  background: rgba(25, 119, 255, .13);
  box-shadow: 0 0 0 1px rgba(25, 119, 255, .18);
}

.registration-method-option input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
}

.registration-method-option span,
.registration-method-option strong,
.registration-method-option small {
  display: block;
}

.registration-method-option small,
.registration-field-help,
.registration-step label > small {
  margin-top: 5px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.4;
}

.registration-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.registration-actions .primary-btn.full {
  flex: 1 1 220px;
}

.terms-modal-open {
  overflow: hidden;
}

.terms-modal[hidden] {
  display: none !important;
}

.terms-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 22px;
}

.terms-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 10, 19, .72);
  backdrop-filter: blur(10px);
}

.terms-modal-card {
  position: relative;
  z-index: 1;
  width: min(100%, 760px);
  max-height: min(86vh, 780px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: 24px;
  color: var(--text);
  background: linear-gradient(145deg, rgba(14, 39, 66, .98), rgba(8, 24, 42, .98));
  box-shadow: 0 28px 84px rgba(0, 0, 0, .42);
}

.terms-modal-head h2 {
  margin: 0;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
}

.terms-modal-body {
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(108, 144, 184, .20);
  border-radius: 16px;
  color: var(--text-soft);
  background: rgba(3, 14, 26, .42);
  line-height: 1.65;
}

.terms-modal-body p {
  margin: 0;
}

.terms-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.legal-page {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: clamp(18px, 3vw, 34px);
}

.legal-card {
  display: grid;
  gap: 18px;
  padding: clamp(26px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: 28px;
  color: var(--text);
  background: linear-gradient(145deg, rgba(14, 39, 66, .88), rgba(8, 24, 42, .76));
  box-shadow: var(--shadow-soft);
}

.legal-card h1,
.legal-card h2,
.legal-card p {
  margin: 0;
}

.legal-card h1 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
}

.legal-card h2 {
  margin-top: 10px;
  font-size: 1.12rem;
}

.legal-card p {
  color: var(--text-soft);
  line-height: 1.72;
}

.legal-updated {
  font-weight: 700;
}

.legal-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

@media (max-width: 760px) {
  .landing-auth.auth-only-auth {
    padding-top: 12px;
  }

  .auth-glass-card.auth-only-card {
    padding: 22px;
    border-radius: 24px;
  }

  .auth-glass-card.auth-only-card.auth-flat-card {
    border-radius: 0;
  }

  .auth-social-row {
    gap: 20px;
  }

  .terms-modal {
    padding: 12px;
    place-items: end center;
  }

  .terms-modal-card {
    max-height: 92vh;
    border-radius: 22px;
  }

  .terms-modal-actions {
    display: grid;
  }
}

/* MuoyApp dashboard shell, based on the selected dark management layout. */
:root {
  --superhub-sidebar-width: 236px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #061625;
  --surface: rgba(15, 37, 61, .78);
  --surface-strong: rgba(16, 43, 72, .96);
  --line: rgba(108, 144, 184, .24);
  --text: #eef6ff;
  --muted: #9db0c8;
  --text-soft: #b8c7dc;
  --blue: #2f86ff;
  --cyan: #22c7c5;
  --green: #45d39d;
  --amber: #ff9f2e;
  --purple: #8358ff;
  --shadow: 0 22px 62px rgba(0, 0, 0, .32);
  --shadow-soft: 0 18px 42px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] body {
  background:
    linear-gradient(135deg, #071827 0%, #061421 48%, #04111d 100%);
}

.super-shell.is-authenticated {
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(9, 30, 51, .92), rgba(4, 14, 24, .98));
}

.super-shell.is-authenticated .layout,
.super-shell.is-authenticated.sidebar-collapsed .layout {
  display: grid;
  grid-template-columns: var(--superhub-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

.super-shell.is-authenticated .topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--superhub-sidebar-width);
  z-index: 70;
  height: 92px;
  min-height: 92px;
  justify-content: flex-end;
  padding: 18px 36px 12px;
  border: 0;
  background: linear-gradient(180deg, rgba(6, 22, 37, .96), rgba(6, 22, 37, 0));
  box-shadow: none;
  backdrop-filter: none;
}

.super-shell.is-authenticated .topbar > .brand,
.super-shell.is-authenticated .topbar .mobile-nav-toggle,
.super-shell.is-authenticated .topbar-actions .pill[data-theme-toggle],
.super-shell.is-authenticated .topbar-actions > .language-form {
  display: none !important;
}

.super-shell.is-authenticated .topbar-actions {
  gap: 12px;
  margin-left: auto;
}

.super-shell.is-authenticated .topbar-actions > :not(.topbar-menu) {
  visibility: visible !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  padding: initial;
  margin: initial;
  border: initial;
  overflow: visible !important;
  pointer-events: auto !important;
}

.super-shell.is-authenticated .topbar-menu {
  display: none !important;
}

.super-shell.is-authenticated .topbar-bell,
.super-shell.is-authenticated .circle-btn {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  color: #dceaff;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}

.super-shell.is-authenticated .topbar-bell:hover,
.super-shell.is-authenticated .circle-btn:hover {
  color: #ffffff;
  border-color: rgba(98, 151, 211, .26);
  background: rgba(16, 43, 72, .64);
}

.super-shell.is-authenticated .topbar-bell .nav-svg {
  width: 23px;
  height: 23px;
}

.super-shell.is-authenticated .account-pill {
  min-height: 58px;
  padding: 7px 18px 7px 8px;
  border-radius: 999px;
  color: #eef6ff;
  border-color: rgba(108, 144, 184, .22);
  background: rgba(14, 35, 58, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.super-shell.is-authenticated .account-pill span,
.super-shell.is-authenticated .dashboard-avatar,
.super-shell.is-authenticated .dashboard-feed-avatar {
  background: linear-gradient(135deg, #237bff, #2fd5d2);
}

.super-shell.is-authenticated .account-pill strong {
  color: #f4f8ff;
  font-size: .92rem;
}

.super-shell.is-authenticated .account-pill small {
  color: #9db0c8;
}

.super-shell.is-authenticated .sidebar,
.super-shell.is-authenticated.sidebar-collapsed .sidebar {
  position: sticky;
  top: 0;
  z-index: 75;
  width: var(--superhub-sidebar-width);
  height: 100vh;
  padding: 30px 14px 22px;
  border-right: 1px solid rgba(108, 144, 184, .22);
  background: rgba(5, 18, 31, .86);
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  margin: 0 8px 24px;
  color: #eef6ff;
  text-decoration: none;
}

.sidebar-brand .brand-mark,
.sidebar-brand .brand-mark img {
  width: 52px;
  height: 52px;
  border-radius: 16px;
}

.sidebar-brand strong,
.sidebar-brand small,
.super-shell.is-authenticated.sidebar-collapsed .sidebar-brand .brand-copy,
.super-shell.is-authenticated.sidebar-collapsed .sidebar-brand .brand-wordmark,
.super-shell.is-authenticated.sidebar-collapsed .nav-text,
.super-shell.is-authenticated.sidebar-collapsed .nav-label,
.super-shell.is-authenticated.sidebar-collapsed .collapse-full {
  display: block;
}

.sidebar-brand strong {
  color: #ffffff;
  font-size: 1.04rem;
  line-height: 1.05;
}

.sidebar-brand small {
  color: #a8bad1;
  font-size: .82rem;
}

.super-shell.is-authenticated .sidebar-toggle,
.super-shell.is-authenticated.sidebar-collapsed .sidebar-toggle {
  display: none;
}

.super-shell.is-authenticated .nav-label {
  margin: 22px 12px 9px;
  color: rgba(157, 176, 200, .62);
  font-size: .68rem;
  letter-spacing: .12em;
}

.super-shell.is-authenticated .nav-link,
.super-shell.is-authenticated.sidebar-collapsed .nav-link {
  min-height: 50px;
  justify-content: flex-start;
  gap: 14px;
  margin: 4px 0;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #a8bad1 !important;
  background: transparent;
  font-size: .94rem;
  font-weight: 560;
}

.super-shell.is-authenticated .nav-icon {
  width: 24px;
  height: 24px;
  color: currentColor;
}

.super-shell.is-authenticated .nav-svg {
  width: 24px;
  height: 24px;
}

.super-shell.is-authenticated .nav-link:hover,
.super-shell.is-authenticated .nav-link[aria-current="page"],
.super-shell.is-authenticated .nav-accordion[open] > .nav-accordion-summary {
  color: #48a0ff !important;
  border-color: rgba(57, 133, 230, .14);
  background: linear-gradient(135deg, rgba(38, 115, 221, .26), rgba(29, 81, 135, .12)) !important;
}

.super-shell.is-authenticated .nav-subgroup {
  margin-left: 38px;
  border-left-color: rgba(108, 144, 184, .16);
}

.super-shell.is-authenticated .nav-subitem {
  color: #8fa4bf !important;
  border-radius: 8px;
}

.super-shell.is-authenticated .page-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 54px 36px 76px;
}

.superhub-dashboard {
  width: min(100%, 1510px);
  margin: 0 auto;
}

.dashboard-heading {
  min-height: 100px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.dashboard-heading h1 {
  margin: 0 0 8px;
  color: #f5f9ff;
  font-size: clamp(1.8rem, 2.5vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.dashboard-heading p {
  margin: 0;
  color: #a8bad1;
  font-size: 1rem;
}

.dashboard-section h2,
.dashboard-panel h2 {
  margin: 0 0 16px;
  color: #f4f8ff;
  font-size: 1.08rem;
  font-weight: 680;
  letter-spacing: 0;
}

.dashboard-action-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(164px, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.dashboard-action-card {
  position: relative;
  min-height: 222px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 24px 24px 20px;
  border: 1px solid rgba(108, 144, 184, .22);
  border-radius: 20px;
  color: #eef6ff;
  background: linear-gradient(145deg, rgba(18, 46, 76, .82), rgba(11, 31, 53, .78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 22px 56px rgba(0, 0, 0, .22);
  text-align: left;
  text-decoration: none;
  font: inherit;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.dashboard-action-card:hover {
  transform: translateY(-2px);
  border-color: rgba(74, 158, 255, .46);
  background: linear-gradient(145deg, rgba(22, 57, 94, .9), rgba(12, 37, 64, .86));
}

.dashboard-action-icon,
.glance-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  color: #ffffff;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .22);
}

.dashboard-action-icon svg,
.glance-icon svg {
  width: 28px;
  height: 28px;
}

.accent-teal .dashboard-action-icon,
.accent-teal .glance-icon { background: linear-gradient(135deg, #16aaa7, #28d0c8); }
.accent-blue .dashboard-action-icon,
.accent-blue .glance-icon { background: linear-gradient(135deg, #236dff, #36a0ff); }
.accent-purple .dashboard-action-icon,
.accent-purple .glance-icon { background: linear-gradient(135deg, #6237df, #9a66ff); }
.accent-amber .dashboard-action-icon,
.accent-amber .glance-icon { background: linear-gradient(135deg, #f08a19, #ffb047); }

.dashboard-action-card strong {
  margin-top: 8px;
  color: #f7fbff;
  font-size: 1.03rem;
  line-height: 1.24;
}

.dashboard-action-card small {
  width: min(100%, 190px);
  color: #9db0c8;
  font-size: .92rem;
  line-height: 1.45;
}

.dashboard-card-arrow {
  position: absolute;
  right: 22px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #c4d7ef;
  background: transparent;
  font: inherit;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}

.dashboard-action-card:hover .dashboard-card-arrow {
  color: #ffffff;
}

.dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(330px, .96fr);
  gap: 20px;
  align-items: start;
}

.dashboard-panel {
  padding: 28px;
  border: 1px solid rgba(108, 144, 184, .22);
  border-radius: 20px;
  color: #eef6ff;
  background: linear-gradient(145deg, rgba(14, 39, 66, .82), rgba(10, 29, 50, .78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 22px 56px rgba(0, 0, 0, .2);
}

.dashboard-feed-composer {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid rgba(108, 144, 184, .20);
  border-radius: 18px;
  background: rgba(8, 26, 45, .56);
}

.dashboard-avatar,
.dashboard-feed-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 999px;
  color: #ffffff;
  font-weight: 760;
}

.dashboard-feed-composer textarea {
  min-height: 46px;
  height: 46px;
  resize: none;
  padding: 12px 2px;
  border: 0;
  border-radius: 0;
  color: #dceaff;
  background: transparent !important;
  box-shadow: none;
  overflow: hidden;
}

.dashboard-feed-composer textarea::placeholder {
  color: #9db0c8;
}

.dashboard-post-button,
.glance-row form button {
  min-height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(135deg, #237bff, #36a0ff);
  font: inherit;
  font-weight: 680;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(35, 123, 255, .22);
}

.dashboard-feed-list {
  display: grid;
  gap: 8px;
}

.dashboard-feed-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 14px;
  border: 1px solid rgba(108, 144, 184, .17);
  border-radius: 18px;
  background: rgba(8, 26, 45, .36);
}

.dashboard-feed-copy {
  min-width: 0;
}

.dashboard-feed-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  margin-bottom: 8px;
}

.dashboard-feed-meta strong {
  color: #f7fbff;
  font-size: .94rem;
}

.dashboard-feed-meta span {
  color: #8fa4bf;
  font-size: .82rem;
}

.dashboard-feed-meta em {
  padding: 4px 8px;
  border-radius: 999px;
  color: #4fa3ff;
  background: rgba(47, 134, 255, .16);
  font-size: .68rem;
  font-style: normal;
  font-weight: 720;
  text-transform: uppercase;
}

.dashboard-feed-copy p {
  margin: 0;
  color: #e8f1ff;
  line-height: 1.48;
}

.dashboard-feed-stats {
  display: flex;
  gap: 22px;
  margin-top: 14px;
  color: #a8bad1;
}

.dashboard-feed-stats span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.dashboard-feed-stats svg {
  width: 19px;
  height: 19px;
}

.dashboard-empty-feed {
  display: grid;
  gap: 4px;
  padding: 24px 14px;
  color: #9db0c8;
  text-align: center;
}

.dashboard-empty-feed strong {
  color: #f7fbff;
}

.dashboard-panel-link {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  color: #4fa3ff;
  font-weight: 640;
}

.glance-panel {
  padding-bottom: 22px;
}

.glance-list {
  display: grid;
  gap: 8px;
}

.glance-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 96px;
  padding: 14px;
  border: 1px solid rgba(108, 144, 184, .17);
  border-radius: 18px;
  color: #eef6ff;
  background: rgba(8, 26, 45, .36);
  text-decoration: none;
}

.glance-icon {
  width: 48px;
  height: 48px;
}

.glance-icon svg {
  width: 24px;
  height: 24px;
}

.glance-copy {
  min-width: 0;
}

.glance-copy small,
.glance-copy em {
  display: block;
  color: #9db0c8;
  font-size: .8rem;
  font-style: normal;
}

.glance-copy strong {
  display: block;
  margin: 3px 0;
  color: #ffffff;
  font-size: 1.18rem;
  line-height: 1.18;
}

.glance-arrow {
  color: #a8bad1;
  font-size: 1.3rem;
}

.glance-row form {
  margin: 0;
}

.glance-row form button {
  min-height: 40px;
  padding-inline: 16px;
  border: 1px solid rgba(74, 158, 255, .48);
  color: #5aa9ff;
  background: rgba(47, 134, 255, .08);
  box-shadow: none;
}

.sh-sticky-clock {
  right: 26px;
  bottom: 24px;
  min-width: 322px;
  border-radius: 18px;
  border-color: rgba(108, 144, 184, .24);
  background: linear-gradient(145deg, rgba(18, 46, 76, .9), rgba(10, 29, 50, .86)) !important;
  box-shadow: 0 22px 56px rgba(0, 0, 0, .28);
}

.sh-sticky-clock-action {
  border-radius: 8px;
  background: linear-gradient(135deg, #237bff, #36a0ff);
}

html[data-theme="light"] .super-shell.is-authenticated {
  background: #eef4fb;
}

html[data-theme="light"] .super-shell.is-authenticated .topbar {
  background: linear-gradient(180deg, rgba(238, 244, 251, .96), rgba(238, 244, 251, 0));
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar {
  background: rgba(248, 251, 255, .94);
}

html[data-theme="light"] .superhub-dashboard .dashboard-action-card,
html[data-theme="light"] .superhub-dashboard .dashboard-panel {
  color: #10213a;
  background: rgba(255, 255, 255, .88);
}

html[data-theme="light"] .dashboard-heading h1,
html[data-theme="light"] .dashboard-section h2,
html[data-theme="light"] .dashboard-panel h2,
html[data-theme="light"] .dashboard-action-card strong,
html[data-theme="light"] .dashboard-feed-meta strong,
html[data-theme="light"] .dashboard-feed-copy p,
html[data-theme="light"] .glance-copy strong {
  color: #10213a;
}

html[data-theme="light"] .dashboard-feed-composer,
html[data-theme="light"] .dashboard-feed-item,
html[data-theme="light"] .glance-row {
  background: rgba(242, 247, 253, .88);
}

html[data-theme="light"] .dashboard-feed-composer textarea {
  color: #10213a;
}

@media (min-width: 901px) {
  .super-shell.is-authenticated .topbar-actions > .circle-btn {
    display: inline-flex !important;
  }

  .super-shell.is-authenticated .topbar-actions > .account-pill {
    display: grid !important;
  }

  .super-shell.is-authenticated .topbar-actions > .topbar-menu,
  .super-shell.is-authenticated .topbar-actions > .language-form,
  .super-shell.is-authenticated .topbar-actions > .pill[data-theme-toggle] {
    display: none !important;
  }
}

@media (max-width: 1240px) {
  .dashboard-action-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }

  .dashboard-main-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .super-shell.is-authenticated .topbar {
    position: sticky;
    left: 0;
    height: auto;
    min-height: 72px;
    justify-content: flex-start;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(108, 144, 184, .2);
    background: rgba(6, 22, 37, .94);
    backdrop-filter: blur(16px);
  }

  .super-shell.is-authenticated .topbar > .brand,
  .super-shell.is-authenticated .topbar .mobile-nav-toggle {
    display: inline-flex !important;
  }

  .super-shell.is-authenticated .topbar .mobile-nav-toggle {
    display: inline-grid !important;
  }

  .super-shell.is-authenticated .topbar-actions > :not(.topbar-menu) {
    display: none !important;
  }

  .super-shell.is-authenticated .topbar-menu {
    display: block !important;
  }

  .super-shell.is-authenticated .layout,
  .super-shell.is-authenticated.sidebar-collapsed .layout {
    grid-template-columns: 1fr;
    min-height: calc(100vh - 72px);
  }

  .super-shell.is-authenticated .sidebar,
  .super-shell.is-authenticated.sidebar-collapsed .sidebar {
    top: 72px;
    width: min(86vw, 340px);
    height: auto;
    padding: 18px 14px;
  }

  .sidebar-brand {
    display: none;
  }

  .super-shell.is-authenticated .page-content {
    padding: 20px 16px 96px;
  }

  .dashboard-heading {
    min-height: auto;
    margin-bottom: 18px;
  }

  .dashboard-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .dashboard-action-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-action-card {
    min-height: 172px;
  }

  .dashboard-feed-composer,
  .dashboard-feed-item,
  .glance-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .dashboard-feed-composer .dashboard-post-button,
  .glance-row form,
  .glance-arrow {
    grid-column: 2;
    justify-self: start;
  }

  .dashboard-panel {
    padding: 18px;
  }

  .sh-sticky-clock {
    border-radius: 16px;
  }
}

/* MuoyApp global authenticated surface alignment. */
.super-shell.is-authenticated .topbar-actions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (min-width: 901px) {
  .super-shell.is-authenticated .topbar-actions > .topbar-bell,
  .super-shell.is-authenticated .topbar-actions > .circle-btn {
    display: inline-grid !important;
    place-items: center;
  }

  .super-shell.is-authenticated .topbar-actions > .account-pill {
    display: grid !important;
  }
}

.super-shell.is-authenticated .hero,
.super-shell.is-authenticated .workspace-hero,
.super-shell.is-authenticated .refined-hero,
.super-shell.is-authenticated .settings-hero,
.super-shell.is-authenticated .peoplehub-hero,
.super-shell.is-authenticated .attendance-clock-hero {
  min-height: auto !important;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 0 auto 24px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #eef6ff;
  background: transparent !important;
  box-shadow: none !important;
}

.super-shell.is-authenticated .hero h1,
.super-shell.is-authenticated .page-title h1,
.super-shell.is-authenticated .page-content > h1 {
  margin: 0 0 8px;
  color: #f5f9ff;
  font-size: clamp(1.8rem, 2.5vw, 2.35rem) !important;
  line-height: 1.08;
  letter-spacing: 0;
}

.super-shell.is-authenticated .hero h2,
.super-shell.is-authenticated .panel h2,
.super-shell.is-authenticated .column h2,
.super-shell.is-authenticated .table-card h2,
.super-shell.is-authenticated .form-card h2,
.super-shell.is-authenticated .settings-card h2 {
  margin: 0 0 10px;
  color: #f4f8ff;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.18;
  letter-spacing: 0;
}

.super-shell.is-authenticated .eyebrow {
  margin: 0 0 10px;
  color: #91aad0;
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .13em;
}

.super-shell.is-authenticated .muted,
.super-shell.is-authenticated .panel p,
.super-shell.is-authenticated .metric small,
.super-shell.is-authenticated .list-row small,
.super-shell.is-authenticated .mini-card span {
  color: #9db0c8;
  line-height: 1.48;
}

.super-shell.is-authenticated .hero-side {
  min-width: min(320px, 100%);
}

.super-shell.is-authenticated .panel,
.super-shell.is-authenticated .setup-card,
.super-shell.is-authenticated .auth-card,
.super-shell.is-authenticated .post-card,
.super-shell.is-authenticated .column,
.super-shell.is-authenticated .table-card,
.super-shell.is-authenticated .metric,
.super-shell.is-authenticated .content-card,
.super-shell.is-authenticated .form-card,
.super-shell.is-authenticated .settings-card,
.super-shell.is-authenticated .workspace-card,
.super-shell.is-authenticated .peoplehub-module-card,
.super-shell.is-authenticated .mini-card,
.super-shell.is-authenticated .list-row,
.super-shell.is-authenticated .task-card {
  border: 1px solid rgba(108, 144, 184, .22) !important;
  border-radius: 20px !important;
  color: #eef6ff !important;
  background: linear-gradient(145deg, rgba(14, 39, 66, .82), rgba(10, 29, 50, .78)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 22px 56px rgba(0, 0, 0, .18) !important;
}

.super-shell.is-authenticated .panel,
.super-shell.is-authenticated .setup-card,
.super-shell.is-authenticated .content-card,
.super-shell.is-authenticated .form-card,
.super-shell.is-authenticated .settings-card {
  padding: 28px;
}

.super-shell.is-authenticated .two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.super-shell.is-authenticated .split-head {
  align-items: start;
  margin-bottom: 16px;
}

.super-shell.is-authenticated .form-grid,
.super-shell.is-authenticated .compact-form {
  gap: 14px;
}

.super-shell.is-authenticated label {
  color: #a8bad1;
  font-size: .86rem;
  font-weight: 650;
}

.super-shell.is-authenticated input,
.super-shell.is-authenticated textarea,
.super-shell.is-authenticated select {
  min-height: 52px;
  border: 1px solid rgba(108, 144, 184, .22) !important;
  border-radius: 8px !important;
  color: #eef6ff !important;
  background: rgba(5, 18, 31, .68) !important;
  box-shadow: none !important;
}

.super-shell.is-authenticated input::placeholder,
.super-shell.is-authenticated textarea::placeholder {
  color: rgba(157, 176, 200, .58);
}

.super-shell.is-authenticated .primary-btn,
.super-shell.is-authenticated .secondary-btn,
.super-shell.is-authenticated .soft-btn,
.super-shell.is-authenticated .success-btn,
.super-shell.is-authenticated .danger-btn,
.super-shell.is-authenticated button.primary-btn,
.super-shell.is-authenticated button.secondary-btn,
.super-shell.is-authenticated button.soft-btn {
  min-height: 52px;
  border-radius: 8px !important;
  font-weight: 680;
  letter-spacing: 0;
}

.super-shell.is-authenticated .primary-btn,
.super-shell.is-authenticated button.primary-btn {
  border: 0 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #237bff, #2f95e8) !important;
  box-shadow: 0 14px 30px rgba(35, 123, 255, .20) !important;
}

.super-shell.is-authenticated .soft-btn,
.super-shell.is-authenticated .secondary-btn {
  border: 1px solid rgba(74, 158, 255, .32) !important;
  color: #78b8ff !important;
  background: rgba(47, 134, 255, .09) !important;
  box-shadow: none !important;
}

.super-shell.is-authenticated .danger-btn {
  border-color: rgba(255, 104, 128, .36) !important;
  color: #ff8aa0 !important;
  background: rgba(255, 77, 103, .11) !important;
}

.super-shell.is-authenticated .table-card {
  overflow: hidden;
}

.super-shell.is-authenticated table {
  background: transparent !important;
}

.super-shell.is-authenticated th,
.super-shell.is-authenticated td {
  border-bottom-color: rgba(108, 144, 184, .16) !important;
}

.super-shell.is-authenticated thead th {
  color: #91aad0 !important;
  background: rgba(8, 26, 45, .42) !important;
}

.super-shell.is-authenticated tbody td {
  color: #e8f1ff;
  background: transparent !important;
}

.super-shell.is-authenticated .workspace-grid,
.super-shell.is-authenticated .peoplehub-module-grid,
.super-shell.is-authenticated .metric-grid {
  gap: 16px;
}

.super-shell.is-authenticated .workspace-card,
.super-shell.is-authenticated .mini-card,
.super-shell.is-authenticated .list-row {
  padding: 16px 18px;
}

html[data-theme="light"] .super-shell.is-authenticated .hero,
html[data-theme="light"] .super-shell.is-authenticated .hero h1,
html[data-theme="light"] .super-shell.is-authenticated .page-title h1,
html[data-theme="light"] .super-shell.is-authenticated .page-content > h1,
html[data-theme="light"] .super-shell.is-authenticated .panel h2 {
  color: #10213a;
}

html[data-theme="light"] .super-shell.is-authenticated .panel,
html[data-theme="light"] .super-shell.is-authenticated .setup-card,
html[data-theme="light"] .super-shell.is-authenticated .table-card,
html[data-theme="light"] .super-shell.is-authenticated .metric,
html[data-theme="light"] .super-shell.is-authenticated .content-card,
html[data-theme="light"] .super-shell.is-authenticated .form-card,
html[data-theme="light"] .super-shell.is-authenticated .settings-card,
html[data-theme="light"] .super-shell.is-authenticated .workspace-card,
html[data-theme="light"] .super-shell.is-authenticated .peoplehub-module-card,
html[data-theme="light"] .super-shell.is-authenticated .mini-card,
html[data-theme="light"] .super-shell.is-authenticated .list-row,
html[data-theme="light"] .super-shell.is-authenticated .task-card {
  color: #10213a !important;
  background: rgba(255, 255, 255, .9) !important;
}

html[data-theme="light"] .super-shell.is-authenticated input,
html[data-theme="light"] .super-shell.is-authenticated textarea,
html[data-theme="light"] .super-shell.is-authenticated select {
  color: #10213a !important;
  background: rgba(248, 251, 255, .92) !important;
}

@media (max-width: 980px) {
  .super-shell.is-authenticated .hero,
  .super-shell.is-authenticated .workspace-hero,
  .super-shell.is-authenticated .refined-hero,
  .super-shell.is-authenticated .settings-hero,
  .super-shell.is-authenticated .peoplehub-hero,
  .super-shell.is-authenticated .attendance-clock-hero,
  .super-shell.is-authenticated .two-col {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .super-shell.is-authenticated .panel,
  .super-shell.is-authenticated .setup-card,
  .super-shell.is-authenticated .content-card,
  .super-shell.is-authenticated .form-card,
  .super-shell.is-authenticated .settings-card {
    padding: 20px;
  }
}

/* MuoyApp final shell reset: top nav from reference 2, left rail from reference 3. */
:root {
  --superhub-sidebar-width: 208px;
  --superhub-topbar-height: 102px;
}

.super-shell.is-authenticated {
  min-height: 100vh;
  background: linear-gradient(135deg, #071827 0%, #061421 48%, #04111d 100%);
}

.super-shell.is-authenticated .topbar {
  position: sticky !important;
  inset: auto !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  z-index: 90 !important;
  width: 100% !important;
  min-height: var(--superhub-topbar-height) !important;
  height: var(--superhub-topbar-height) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 28px !important;
  border-bottom: 1px solid rgba(108, 144, 184, .22) !important;
  background: rgba(5, 18, 31, .88) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) !important;
}

.super-shell.is-authenticated .topbar > .brand {
  display: inline-flex !important;
  min-width: 0;
  gap: 14px;
  color: #eef6ff;
}

.super-shell.is-authenticated .topbar > .brand .brand-mark,
.super-shell.is-authenticated .topbar > .brand .brand-mark img {
  width: 58px;
  height: 58px;
  border-radius: 16px;
}

.super-shell.is-authenticated .topbar > .brand strong {
  color: #ffffff;
  font-size: 1.12rem;
  line-height: 1.05;
}

.super-shell.is-authenticated .topbar > .brand small {
  color: #a8bad1;
  font-size: .84rem;
}

.super-shell.is-authenticated .topbar .mobile-nav-toggle,
.super-shell.is-authenticated .topbar-actions .pill[data-theme-toggle],
.super-shell.is-authenticated .topbar-actions > .language-form,
.super-shell.is-authenticated .topbar-actions > .topbar-bell,
.super-shell.is-authenticated .topbar-actions > .circle-btn[title="Logout"] {
  display: none !important;
}

.super-shell.is-authenticated .topbar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  margin-left: auto !important;
}

.super-shell.is-authenticated .topbar-actions > .account-pill {
  display: grid !important;
  grid-template-columns: 50px minmax(0, auto);
  grid-template-rows: auto auto;
  min-height: 64px;
  min-width: 212px;
  padding: 7px 18px 7px 8px !important;
  border: 1px solid rgba(108, 144, 184, .24) !important;
  border-radius: 20px !important;
  background: rgba(14, 35, 58, .74) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

.super-shell.is-authenticated .topbar-actions > .account-pill span {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: linear-gradient(135deg, #237bff, #2fd5d2);
}

.super-shell.is-authenticated .layout,
.super-shell.is-authenticated.sidebar-collapsed .layout {
  display: grid !important;
  grid-template-columns: var(--superhub-sidebar-width) minmax(0, 1fr) !important;
  min-height: calc(100vh - var(--superhub-topbar-height)) !important;
}

.super-shell.is-authenticated .sidebar,
.super-shell.is-authenticated.sidebar-collapsed .sidebar {
  position: sticky !important;
  top: var(--superhub-topbar-height) !important;
  z-index: 70 !important;
  width: var(--superhub-sidebar-width) !important;
  height: calc(100vh - var(--superhub-topbar-height)) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 18px 8px 18px !important;
  border-right: 1px solid rgba(108, 144, 184, .22) !important;
  background: rgba(5, 18, 31, .86) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) !important;
  overflow-y: auto !important;
}

.super-shell.is-authenticated .sidebar-brand,
.super-shell.is-authenticated .sidebar-toggle,
.super-shell.is-authenticated .sidebar > .nav-label,
.super-shell.is-authenticated .sidebar > .nav-link,
.super-shell.is-authenticated .sidebar > .nav-accordion {
  display: none !important;
}

.sidebar-primary-nav {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 18px;
}

.sidebar-primary-main,
.sidebar-primary-bottom {
  display: grid;
  gap: 10px;
}

.sidebar-primary-bottom {
  margin-top: auto;
}

.sidebar-simple-link {
  min-height: 52px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #a8bad1 !important;
  background: transparent;
  text-decoration: none;
  font-size: .96rem;
  font-weight: 560;
}

.sidebar-simple-link .nav-icon,
.sidebar-simple-link .nav-svg {
  width: 24px;
  height: 24px;
}

.sidebar-simple-link:hover,
.sidebar-simple-link[aria-current="page"] {
  color: #48a0ff !important;
  border-color: rgba(57, 133, 230, .16);
  background: linear-gradient(135deg, rgba(38, 115, 221, .30), rgba(29, 81, 135, .14));
}

.super-shell.is-authenticated .page-content {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 42px 76px !important;
}

.super-shell.is-authenticated .hero,
.super-shell.is-authenticated .workspace-hero,
.super-shell.is-authenticated .refined-hero,
.super-shell.is-authenticated .settings-hero,
.super-shell.is-authenticated .peoplehub-hero,
.super-shell.is-authenticated .attendance-clock-hero {
  width: 100%;
  max-width: none;
  margin: 0 0 26px !important;
  padding: 0 !important;
}

.super-shell.is-authenticated .hero .primary-btn.small {
  align-self: start;
}

.super-shell.is-authenticated .hero h1,
.super-shell.is-authenticated .page-title h1,
.super-shell.is-authenticated .page-content > h1 {
  font-size: clamp(1.95rem, 2.7vw, 2.6rem) !important;
}

.super-shell.is-authenticated .panel,
.super-shell.is-authenticated .post-card,
.super-shell.is-authenticated .setup-card,
.super-shell.is-authenticated .table-card,
.super-shell.is-authenticated .content-card,
.super-shell.is-authenticated .settings-card {
  border-radius: 20px !important;
}

@media (max-width: 900px) {
  .super-shell.is-authenticated .topbar {
    min-height: 76px !important;
    height: 76px !important;
    padding: 10px 14px !important;
  }

  .super-shell.is-authenticated .topbar .mobile-nav-toggle {
    display: inline-grid !important;
  }

  .super-shell.is-authenticated .topbar > .brand .brand-mark,
  .super-shell.is-authenticated .topbar > .brand .brand-mark img {
    width: 46px;
    height: 46px;
  }

  .super-shell.is-authenticated .topbar-actions > .account-pill {
    min-width: 50px;
    width: 50px;
    min-height: 50px;
    padding: 0 !important;
    display: grid !important;
    place-items: center;
  }

  .super-shell.is-authenticated .topbar-actions > .account-pill strong,
  .super-shell.is-authenticated .topbar-actions > .account-pill small {
    display: none;
  }

  .super-shell.is-authenticated .layout,
  .super-shell.is-authenticated.sidebar-collapsed .layout {
    grid-template-columns: 1fr !important;
    min-height: calc(100vh - 76px) !important;
  }

  .super-shell.is-authenticated .sidebar,
  .super-shell.is-authenticated.sidebar-collapsed .sidebar {
    position: fixed !important;
    top: 76px !important;
    left: 0;
    bottom: 0;
    width: min(86vw, 300px) !important;
    height: auto !important;
    transform: translateX(-105%);
    transition: transform .22s ease;
  }

  .super-shell.mobile-nav-open .sidebar,
  .super-shell.mobile-nav-open.sidebar-collapsed .sidebar {
    transform: translateX(0);
  }

  .super-shell.is-authenticated .page-content {
    padding: 20px 16px 96px !important;
  }
}

.super-shell.is-authenticated .topbar-actions > a[href$="/logout/"] {
  display: none !important;
}

.superhub-reference-dashboard {
  display: grid;
  gap: 18px;
}

.reference-hero-card,
.reference-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(108, 144, 184, .24);
  border-radius: 20px;
  color: #eef6ff;
  background: linear-gradient(145deg, rgba(16, 45, 76, .86), rgba(9, 28, 49, .82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 22px 56px rgba(0, 0, 0, .20);
}

.reference-hero-card {
  min-height: 326px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 26px;
  padding: 34px 36px 32px;
}

.reference-hero-copy {
  position: relative;
  z-index: 2;
}

.reference-hero-copy h1 {
  margin: 0 0 10px;
  color: #f5f9ff;
  font-size: clamp(2rem, 3vw, 2.65rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.reference-hero-copy p:not(.eyebrow) {
  margin: 0;
  color: #b8c7dc;
  font-size: 1rem;
}

.reference-hero-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.reference-sun {
  position: absolute;
  right: 13%;
  top: 28%;
  width: 86px;
  height: 86px;
  border-radius: 999px;
  background: linear-gradient(135deg, #77c8ff, #278bff);
  opacity: .78;
}

.reference-hill {
  position: absolute;
  right: -3%;
  bottom: 42%;
  width: 36%;
  height: 108px;
  border-radius: 100% 0 0 0;
  background: rgba(8, 28, 62, .78);
  transform: skewX(-18deg);
}

.reference-hill-one {
  right: 12%;
  bottom: 40%;
  width: 30%;
  height: 78px;
  background: rgba(20, 61, 141, .58);
}

.reference-status-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-self: end;
}

.reference-status-card {
  min-height: 132px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid rgba(108, 144, 184, .24);
  border-radius: 18px;
  color: #eef6ff;
  background: rgba(8, 26, 45, .48);
  text-decoration: none;
}

.reference-status-icon,
.reference-action-icon,
.reference-update-avatar {
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #ffffff;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .22);
}

.reference-status-icon {
  width: 58px;
  height: 58px;
}

.reference-status-icon svg,
.reference-action-icon svg {
  width: 28px;
  height: 28px;
}

.reference-status-card small,
.reference-status-card em {
  display: block;
  color: #9db0c8;
  font-style: normal;
}

.reference-status-card small {
  margin-bottom: 7px;
  font-size: .76rem;
  font-weight: 760;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.reference-status-card strong {
  display: block;
  color: #ffffff;
  font-size: 1.12rem;
  line-height: 1.18;
}

.reference-status-card b {
  color: #4fd29d;
  font-size: .9rem;
  font-weight: 700;
}

.accent-blue .reference-status-icon,
.accent-blue .reference-action-icon {
  background: linear-gradient(135deg, #236dff, #36a0ff);
}

.accent-purple .reference-status-icon,
.accent-purple .reference-action-icon {
  background: linear-gradient(135deg, #6237df, #9a66ff);
}

.accent-teal .reference-status-icon,
.accent-teal .reference-action-icon {
  background: linear-gradient(135deg, #16aaa7, #36d4b0);
}

.reference-panel {
  padding: 26px 30px 16px;
}

.reference-panel h2 {
  margin: 0 0 18px;
  color: #f4f8ff;
  font-size: .82rem;
  font-weight: 760;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.reference-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.reference-action-card,
.reference-action-card button {
  min-width: 0;
  min-height: 176px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 20px;
  border: 1px solid rgba(108, 144, 184, .22);
  border-radius: 12px;
  color: #eef6ff;
  background: linear-gradient(145deg, rgba(18, 52, 86, .78), rgba(11, 33, 56, .74));
  text-align: center;
  text-decoration: none;
  box-shadow: none;
}

.reference-action-card button {
  width: 100%;
  height: 100%;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.reference-action-icon {
  width: 72px;
  height: 72px;
}

.reference-action-card strong {
  color: #ffffff;
  font-size: 1.02rem;
  line-height: 1.2;
}

.reference-action-card small {
  color: #a8bad1;
  font-size: .9rem;
  line-height: 1.35;
}

.reference-update-list {
  display: grid;
}

.reference-update-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 78px;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(108, 144, 184, .16);
}

.reference-update-row:last-child {
  border-bottom: 0;
}

.reference-update-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #5d5cff, #1fb8cf);
  font-weight: 760;
}

.reference-update-copy {
  min-width: 0;
}

.reference-update-copy strong,
.reference-update-copy em {
  display: block;
}

.reference-update-copy strong {
  color: #f7fbff;
  font-size: .95rem;
}

.reference-update-copy strong small {
  color: #9db0c8;
  font-size: .82rem;
  font-weight: 500;
}

.reference-update-copy em {
  margin-top: 4px;
  color: #c3d2e6;
  font-style: normal;
  line-height: 1.42;
}

.reference-update-row b {
  padding: 8px 14px;
  border-radius: 999px;
  color: #58a8ff;
  background: rgba(47, 134, 255, .13);
  font-size: .8rem;
}

.reference-view-updates {
  display: flex;
  justify-content: center;
  margin: 12px 0 0;
  color: #cfe4ff;
  font-weight: 650;
}

@media (max-width: 1180px) {
  .reference-status-row,
  .reference-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .reference-hero-card,
  .reference-panel {
    padding: 20px;
  }

  .reference-status-row,
  .reference-action-grid,
  .reference-update-row {
    grid-template-columns: 1fr;
  }

  .reference-status-card {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .reference-update-row b {
    justify-self: start;
  }
}

/* MuoyApp navigation restoration: keep the reference shell, restore controls and layered nav. */
.super-shell.is-authenticated .sidebar-flat-nav {
  display: none !important;
}

.super-shell.is-authenticated .topbar-actions > .pill[data-theme-toggle] {
  display: inline-flex !important;
  min-height: 48px;
  padding: 0 18px;
  white-space: nowrap;
}

.super-shell.is-authenticated .topbar-actions > .language-form {
  display: block !important;
  margin: 0;
}

.super-shell.is-authenticated .topbar-actions > .language-form .language-select {
  min-height: 48px;
  min-width: 112px;
  padding: 0 34px 0 16px;
  border-radius: 999px;
}

.super-shell.is-authenticated .topbar-actions > .topbar-bell,
.super-shell.is-authenticated .topbar-actions > a[href$="/logout/"] {
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  color: #d7e7fb;
  border-color: rgba(108, 144, 184, .26);
  background: rgba(14, 35, 58, .72);
}

.super-shell.is-authenticated .topbar-actions > .topbar-bell:hover,
.super-shell.is-authenticated .topbar-actions > a[href$="/logout/"]:hover {
  color: #ffffff;
  border-color: rgba(57, 133, 230, .45);
  background: rgba(38, 115, 221, .22);
}

.super-shell.is-authenticated .sidebar-layer-nav {
  display: flex !important;
}

.sidebar-layer-list,
.sidebar-layer-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-layer-list {
  display: grid;
  gap: 8px;
}

.sidebar-layer-dropdown > summary {
  list-style: none;
}

.sidebar-layer-dropdown > summary::-webkit-details-marker {
  display: none;
}

.sidebar-main-link {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #a8bad1 !important;
  background: transparent;
  text-decoration: none;
  font-size: .96rem;
  font-weight: 650;
  cursor: pointer;
}

.sidebar-main-link .nav-icon,
.sidebar-main-link .nav-svg {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.sidebar-main-link .sidebar-chevron {
  margin-left: auto;
  color: #6f86a3;
  font-size: .96rem;
  transition: transform .18s ease;
}

.sidebar-layer-dropdown[open] > .sidebar-main-link .sidebar-chevron {
  transform: rotate(180deg);
}

.sidebar-main-link:hover,
.sidebar-main-link[aria-current="page"],
.sidebar-layer-dropdown[open] > .sidebar-main-link {
  color: #48a0ff !important;
  border-color: rgba(57, 133, 230, .18);
  background: linear-gradient(135deg, rgba(38, 115, 221, .30), rgba(29, 81, 135, .14));
}

.sidebar-layer-submenu {
  display: grid;
  gap: 3px;
  margin: 6px 0 10px 30px;
  padding-left: 12px;
  border-left: 1px solid rgba(108, 144, 184, .18);
}

.sidebar-subheading {
  margin: 12px 0 4px;
  color: #7990ad;
  font-size: .68rem;
  font-weight: 820;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sidebar-sub-link {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #a8bad1 !important;
  text-decoration: none;
  font-size: .86rem;
  font-weight: 560;
  line-height: 1.2;
}

.sidebar-sub-link:hover,
.sidebar-sub-link[aria-current="page"] {
  color: #6bb5ff !important;
  border-color: rgba(57, 133, 230, .18);
  background: rgba(38, 115, 221, .12);
}

@media (max-width: 1180px) {
  .super-shell.is-authenticated .topbar-actions > .pill[data-theme-toggle] {
    width: 48px;
    padding: 0;
  }

  .super-shell.is-authenticated .topbar-actions > .pill[data-theme-toggle] .theme-label {
    display: none;
  }

  .super-shell.is-authenticated .topbar-actions > .language-form .language-select {
    min-width: 86px;
    width: 86px;
    padding-inline: 12px;
  }
}

@media (max-width: 900px) {
  .super-shell.is-authenticated .topbar-actions > .pill[data-theme-toggle],
  .super-shell.is-authenticated .topbar-actions > .language-form,
  .super-shell.is-authenticated .topbar-actions > .topbar-bell,
  .super-shell.is-authenticated .topbar-actions > a[href$="/logout/"] {
    display: none !important;
  }

  .super-shell.is-authenticated .topbar-menu {
    display: block !important;
  }

  .sidebar-layer-submenu {
    margin-left: 28px;
  }
}

/* MuoyApp shell polish: refined two-layer navigation and restored utility topbar. */
:root {
  --superhub-sidebar-width: 264px;
  --superhub-topbar-height: 92px;
  --superhub-nav-line: rgba(116, 151, 190, .18);
  --superhub-nav-text: #b7c7dc;
  --superhub-nav-muted: #7e93ad;
  --superhub-nav-strong: #f3f8ff;
  --superhub-nav-blue: #4a9dff;
  --superhub-nav-cyan: #36d6cf;
}

.super-shell.is-authenticated {
  background:
    radial-gradient(circle at 12% 0%, rgba(54, 214, 207, .10), transparent 30%),
    radial-gradient(circle at 100% 8%, rgba(74, 157, 255, .14), transparent 28%),
    linear-gradient(135deg, #061827 0%, #061421 48%, #04111d 100%);
}

.super-shell.is-authenticated .topbar {
  height: var(--superhub-topbar-height) !important;
  min-height: var(--superhub-topbar-height) !important;
  padding: 14px 30px !important;
  gap: 20px !important;
  background: linear-gradient(180deg, rgba(7, 22, 37, .95), rgba(5, 17, 30, .88)) !important;
  border-bottom: 1px solid var(--superhub-nav-line) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .18) !important;
}

.super-shell.is-authenticated .topbar > .brand {
  min-width: 220px;
  gap: 13px;
}

.super-shell.is-authenticated .topbar > .brand .brand-mark,
.super-shell.is-authenticated .topbar > .brand .brand-mark img {
  width: 50px;
  height: 50px;
  border-radius: 15px;
}

.super-shell.is-authenticated .topbar > .brand strong {
  font-size: 1.04rem;
  letter-spacing: 0;
}

.super-shell.is-authenticated .topbar > .brand small {
  margin-top: 2px;
  color: #93a8c2;
}

.super-shell.is-authenticated .topbar-actions {
  gap: 10px !important;
}

.super-shell.is-authenticated .topbar-actions > .pill[data-theme-toggle],
.super-shell.is-authenticated .topbar-actions > .language-form .language-select,
.super-shell.is-authenticated .topbar-actions > .topbar-bell,
.super-shell.is-authenticated .topbar-actions > .logout-btn {
  min-height: 44px;
  height: 44px;
  border: 1px solid rgba(116, 151, 190, .22) !important;
  background: rgba(11, 30, 50, .68) !important;
  color: #d5e6fa !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.super-shell.is-authenticated .topbar-actions > .pill[data-theme-toggle] {
  padding: 0 15px;
  border-radius: 14px;
  font-weight: 720;
}

.super-shell.is-authenticated .topbar-actions > .pill[data-theme-toggle] .theme-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #7ec8ff;
}

.super-shell.is-authenticated .topbar-actions > .language-form .language-select {
  min-width: 104px;
  border-radius: 14px;
  padding: 0 30px 0 14px;
  font-weight: 720;
}

.super-shell.is-authenticated .topbar-actions > .topbar-bell,
.super-shell.is-authenticated .topbar-actions > .logout-btn {
  flex-basis: 44px;
  width: 44px;
  border-radius: 14px;
}

.super-shell.is-authenticated .topbar-actions > .logout-btn {
  color: #ffb7c1 !important;
}

.super-shell.is-authenticated .topbar-actions > .pill[data-theme-toggle]:hover,
.super-shell.is-authenticated .topbar-actions > .language-form:hover .language-select,
.super-shell.is-authenticated .topbar-actions > .topbar-bell:hover,
.super-shell.is-authenticated .topbar-actions > .logout-btn:hover {
  border-color: rgba(74, 157, 255, .42) !important;
  background: rgba(28, 78, 130, .30) !important;
}

.super-shell.is-authenticated .topbar-actions > .account-pill {
  min-height: 58px;
  min-width: 210px;
  grid-template-columns: 46px minmax(0, auto);
  padding: 6px 16px 6px 7px !important;
  border-radius: 18px !important;
  border-color: rgba(116, 151, 190, .24) !important;
  background: linear-gradient(135deg, rgba(13, 36, 60, .86), rgba(10, 29, 49, .72)) !important;
}

.super-shell.is-authenticated .topbar-actions > .account-pill span {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}

.super-shell.is-authenticated .layout,
.super-shell.is-authenticated.sidebar-collapsed .layout {
  grid-template-columns: var(--superhub-sidebar-width) minmax(0, 1fr) !important;
  min-height: calc(100vh - var(--superhub-topbar-height)) !important;
}

.super-shell.is-authenticated .sidebar,
.super-shell.is-authenticated.sidebar-collapsed .sidebar {
  top: var(--superhub-topbar-height) !important;
  width: var(--superhub-sidebar-width) !important;
  height: calc(100vh - var(--superhub-topbar-height)) !important;
  padding: 18px 14px !important;
  background:
    linear-gradient(180deg, rgba(8, 27, 46, .92), rgba(6, 21, 36, .86)),
    rgba(5, 18, 31, .92) !important;
  border-right: 1px solid var(--superhub-nav-line) !important;
}

.super-shell.is-authenticated .sidebar::-webkit-scrollbar {
  width: 8px;
}

.super-shell.is-authenticated .sidebar::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(116, 151, 190, .24);
}

.super-shell.is-authenticated .sidebar-layer-nav {
  gap: 18px;
}

.sidebar-layer-list {
  gap: 7px;
}

.sidebar-layer-item {
  min-width: 0;
}

.sidebar-main-link {
  position: relative;
  min-height: 54px;
  gap: 12px;
  padding: 0 12px;
  border-radius: 14px;
  color: var(--superhub-nav-text) !important;
  font-size: .95rem;
  font-weight: 720;
  letter-spacing: 0;
}

.sidebar-main-link::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 3px;
  border-radius: 999px;
  background: transparent;
  transition: background .18s ease, box-shadow .18s ease;
}

.sidebar-main-link .nav-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 12px;
  color: #9fb4cf;
  background: rgba(116, 151, 190, .09);
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

.sidebar-main-link .nav-svg {
  width: 21px;
  height: 21px;
}

.sidebar-main-link .sidebar-chevron {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: #7f95b0;
  background: rgba(116, 151, 190, .07);
}

.sidebar-main-link:hover,
.sidebar-main-link[aria-current="page"],
.sidebar-layer-dropdown[open] > .sidebar-main-link {
  color: var(--superhub-nav-strong) !important;
  border-color: rgba(74, 157, 255, .24);
  background: linear-gradient(135deg, rgba(37, 101, 178, .32), rgba(22, 55, 92, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.sidebar-main-link:hover::before,
.sidebar-main-link[aria-current="page"]::before,
.sidebar-layer-dropdown[open] > .sidebar-main-link::before {
  background: linear-gradient(180deg, var(--superhub-nav-blue), var(--superhub-nav-cyan));
  box-shadow: 0 0 16px rgba(74, 157, 255, .50);
}

.sidebar-main-link:hover .nav-icon,
.sidebar-main-link[aria-current="page"] .nav-icon,
.sidebar-layer-dropdown[open] > .sidebar-main-link .nav-icon {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(42, 126, 241, .72), rgba(44, 198, 202, .54));
  box-shadow: 0 10px 24px rgba(15, 77, 142, .24);
}

.sidebar-layer-dropdown[open] > .sidebar-main-link {
  margin-bottom: 8px;
}

.sidebar-layer-dropdown[open] > .sidebar-main-link .sidebar-chevron {
  color: #d7eaff;
  background: rgba(74, 157, 255, .16);
}

.sidebar-layer-submenu {
  gap: 2px;
  margin: 0 0 12px 0;
  padding: 10px 10px 10px 12px;
  border: 1px solid rgba(116, 151, 190, .14);
  border-radius: 16px;
  background: rgba(3, 15, 27, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.sidebar-layer-submenu li {
  min-width: 0;
}

.sidebar-subheading {
  margin: 12px 9px 6px;
  color: var(--superhub-nav-muted);
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .13em;
}

.sidebar-layer-submenu .sidebar-subheading:first-child {
  margin-top: 4px;
}

.sidebar-sub-link {
  position: relative;
  min-height: 36px;
  padding: 8px 10px 8px 28px;
  border-radius: 10px;
  color: #9fb2cc !important;
  font-size: .84rem;
  font-weight: 620;
}

.sidebar-sub-link::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(116, 151, 190, .38);
  transform: translateY(-50%);
}

.sidebar-sub-link:hover,
.sidebar-sub-link[aria-current="page"] {
  color: #eef7ff !important;
  border-color: rgba(74, 157, 255, .20);
  background: rgba(74, 157, 255, .13);
}

.sidebar-sub-link:hover::before,
.sidebar-sub-link[aria-current="page"]::before {
  background: var(--superhub-nav-cyan);
  box-shadow: 0 0 12px rgba(54, 214, 207, .50);
}

.sidebar-primary-bottom {
  padding-top: 14px;
  border-top: 1px solid rgba(116, 151, 190, .13);
}

.super-shell.is-authenticated .page-content {
  padding-top: 30px !important;
}

html[data-theme="light"] .super-shell.is-authenticated {
  background:
    radial-gradient(circle at 10% 0%, rgba(54, 214, 207, .14), transparent 30%),
    radial-gradient(circle at 100% 10%, rgba(74, 157, 255, .16), transparent 28%),
    linear-gradient(135deg, #eef6ff 0%, #f7fbff 48%, #eef5fb 100%);
}

html[data-theme="light"] .super-shell.is-authenticated .topbar {
  background: rgba(248, 252, 255, .90) !important;
  border-bottom-color: rgba(74, 104, 142, .16) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar,
html[data-theme="light"] .super-shell.is-authenticated.sidebar-collapsed .sidebar {
  background: rgba(246, 251, 255, .88) !important;
  border-right-color: rgba(74, 104, 142, .16) !important;
}

html[data-theme="light"] .sidebar-main-link {
  color: #516884 !important;
}

html[data-theme="light"] .sidebar-layer-submenu {
  background: rgba(255, 255, 255, .70);
  border-color: rgba(74, 104, 142, .14);
}

html[data-theme="light"] .sidebar-sub-link {
  color: #5f728d !important;
}

html[data-theme="light"] .super-shell.is-authenticated .topbar-actions > .pill[data-theme-toggle],
html[data-theme="light"] .super-shell.is-authenticated .topbar-actions > .language-form .language-select,
html[data-theme="light"] .super-shell.is-authenticated .topbar-actions > .topbar-bell,
html[data-theme="light"] .super-shell.is-authenticated .topbar-actions > .logout-btn,
html[data-theme="light"] .super-shell.is-authenticated .topbar-actions > .account-pill {
  color: #26415f !important;
  background: rgba(255, 255, 255, .78) !important;
  border-color: rgba(74, 104, 142, .18) !important;
}

@media (max-width: 1180px) {
  .super-shell.is-authenticated .topbar > .brand {
    min-width: 178px;
  }

  .super-shell.is-authenticated .topbar-actions > .pill[data-theme-toggle] {
    width: 44px;
    min-width: 44px;
  }

  .super-shell.is-authenticated .topbar-actions > .language-form .language-select {
    min-width: 82px;
    width: 82px;
  }
}

@media (max-width: 900px) {
  :root {
    --superhub-topbar-height: 76px;
  }

  .super-shell.is-authenticated .topbar {
    height: var(--superhub-topbar-height) !important;
    min-height: var(--superhub-topbar-height) !important;
    padding: 10px 14px !important;
  }

  .super-shell.is-authenticated .topbar > .brand {
    min-width: 0;
  }

  .super-shell.is-authenticated .layout,
  .super-shell.is-authenticated.sidebar-collapsed .layout {
    grid-template-columns: 1fr !important;
    min-height: calc(100vh - var(--superhub-topbar-height)) !important;
  }

  .super-shell.is-authenticated .sidebar,
  .super-shell.is-authenticated.sidebar-collapsed .sidebar {
    top: var(--superhub-topbar-height) !important;
    width: min(88vw, 312px) !important;
    height: calc(100vh - var(--superhub-topbar-height)) !important;
    padding: 16px 14px !important;
  }

  .super-shell.is-authenticated .page-content {
    padding: 20px 16px 96px !important;
  }
}

/* MuoyApp social-feed hybrid shell and home. */
:root {
  --superhub-sidebar-width: 220px;
  --superhub-topbar-height: 84px;
  --social-bg: #061827;
  --social-bg-deep: #04111d;
  --social-panel: rgba(10, 31, 53, .74);
  --social-panel-soft: rgba(12, 36, 61, .52);
  --social-line: rgba(115, 151, 192, .18);
  --social-line-strong: rgba(115, 151, 192, .28);
  --social-text: #eef6ff;
  --social-muted: #9fb2ce;
  --social-blue: #3d8cff;
  --social-cyan: #35d4ce;
  --social-green: #45c982;
  --social-orange: #f39b3c;
  --social-purple: #7658f0;
}

.super-shell.is-authenticated {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 0%, rgba(45, 137, 255, .10), transparent 28%),
    radial-gradient(circle at 96% 12%, rgba(53, 212, 206, .09), transparent 30%),
    linear-gradient(135deg, var(--social-bg), var(--social-bg-deep));
}

.super-shell.is-authenticated .topbar {
  position: fixed !important;
  top: 0 !important;
  left: var(--superhub-sidebar-width) !important;
  right: 0 !important;
  width: auto !important;
  height: var(--superhub-topbar-height) !important;
  min-height: var(--superhub-topbar-height) !important;
  padding: 16px 24px 16px 32px !important;
  gap: 18px !important;
  background: rgba(5, 18, 31, .86) !important;
  border-bottom: 1px solid var(--social-line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) !important;
}

.super-shell.is-authenticated .topbar > .brand {
  display: none !important;
}

.topbar-search {
  width: min(420px, 40vw);
  height: 44px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  padding: 0 12px 0 14px;
  border: 1px solid var(--social-line-strong);
  border-radius: 14px;
  color: #87a1c0;
  background: rgba(12, 34, 57, .70);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.topbar-search-icon {
  width: 20px;
  height: 20px;
}

.topbar-search input {
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--social-text);
  background: transparent;
  outline: 0;
}

.topbar-search input::placeholder {
  color: #8fa5c1;
}

.topbar-search-kbd {
  padding: 5px 9px;
  border-radius: 8px;
  color: #b2c3d9;
  background: rgba(116, 151, 190, .14);
  font-size: .72rem;
  font-weight: 760;
}

.super-shell.is-authenticated .topbar-actions {
  gap: 12px !important;
}

.super-shell.is-authenticated .topbar-actions > .pill[data-theme-toggle] {
  width: 48px;
  min-width: 48px;
  padding: 0 !important;
}

.super-shell.is-authenticated .topbar-actions > .pill[data-theme-toggle] .theme-label {
  display: none;
}

.super-shell.is-authenticated .topbar-actions > .pill[data-theme-toggle],
.super-shell.is-authenticated .topbar-actions > .language-form .language-select,
.super-shell.is-authenticated .topbar-actions > .topbar-bell,
.super-shell.is-authenticated .topbar-actions > .logout-btn {
  height: 48px;
  min-height: 48px;
  border-radius: 14px !important;
  border-color: var(--social-line-strong) !important;
  background: rgba(11, 30, 50, .72) !important;
  color: #d8e8fb !important;
}

.super-shell.is-authenticated .topbar-actions > .language-form .language-select {
  min-width: 136px;
  padding: 0 36px 0 18px;
}

.super-shell.is-authenticated .topbar-actions > .logout-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 112px;
  padding: 0 16px;
  font-weight: 800;
  color: #ffd1d8 !important;
}

.super-shell.is-authenticated .topbar-actions > .logout-btn .nav-svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 1180px) {
  .super-shell.is-authenticated .topbar-actions > .logout-btn {
    width: 48px;
    min-width: 48px;
    padding: 0;
  }

  .super-shell.is-authenticated .topbar-actions > .logout-btn span {
    display: none;
  }
}

@media (max-width: 900px) {
  .super-shell.is-authenticated .topbar-actions > .logout-btn {
    display: none !important;
  }
}

.super-shell.is-authenticated .topbar-actions > .account-pill {
  min-width: 184px;
  min-height: 54px;
  grid-template-columns: 42px minmax(0, auto);
  padding: 6px 14px 6px 6px !important;
  border-radius: 14px !important;
  border-color: var(--social-line-strong) !important;
  background: rgba(11, 30, 50, .72) !important;
}

/* The account pill is nested inside <details>, unlike the other topbar controls. */
.super-shell.is-authenticated .topbar-actions > .account-menu > .account-pill {
  min-width: 184px;
  min-height: 54px;
  grid-template-columns: 42px minmax(0, auto);
  padding: 6px 14px 6px 6px !important;
  list-style: none;
  border-radius: 14px !important;
  border-color: var(--social-line-strong) !important;
  background: rgba(11, 30, 50, .72) !important;
}

.super-shell.is-authenticated .topbar-actions > .account-menu > .account-pill::-webkit-details-marker {
  display: none;
}

.super-shell.is-authenticated .topbar-actions > .account-menu > .account-pill span {
  width: 42px;
  height: 42px;
}

@media (max-width: 1100px) {
  .super-shell.is-authenticated .topbar-actions > .account-menu > .account-pill {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 14px !important;
  }

  .super-shell.is-authenticated .topbar-actions > .account-menu > .account-pill strong,
  .super-shell.is-authenticated .topbar-actions > .account-menu > .account-pill small {
    display: none !important;
  }
}

.super-shell.is-authenticated .topbar-actions > .account-pill span {
  width: 42px;
  height: 42px;
  border-radius: 999px;
}

.super-shell.is-authenticated .topbar-actions > .account-pill strong {
  color: #f5f9ff;
}

.super-shell.is-authenticated .topbar-actions > .account-pill small {
  color: #99aec8;
}

.super-shell.is-authenticated .layout,
.super-shell.is-authenticated.sidebar-collapsed .layout {
  display: block !important;
  min-height: 100vh !important;
}

.super-shell.is-authenticated .sidebar,
.super-shell.is-authenticated.sidebar-collapsed .sidebar {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 95 !important;
  width: var(--superhub-sidebar-width) !important;
  height: 100vh !important;
  padding: 24px 12px 22px !important;
  overflow-y: auto !important;
  border-right: 1px solid var(--social-line) !important;
  background: linear-gradient(180deg, rgba(6, 22, 37, .96), rgba(5, 17, 31, .94)) !important;
  box-shadow: none !important;
}

.super-shell.is-authenticated .sidebar-brand {
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  margin: 0 4px 34px;
  color: var(--social-text);
}

.super-shell.is-authenticated .sidebar-brand .brand-mark,
.super-shell.is-authenticated .sidebar-brand .brand-mark img {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.super-shell.is-authenticated .sidebar-brand strong {
  color: #ffffff;
  font-size: 1.38rem;
  line-height: 1;
}

.super-shell.is-authenticated .sidebar-brand small {
  display: none;
}

.super-shell.is-authenticated .sidebar-layer-nav,
.super-shell.is-authenticated .sidebar-flat-nav,
.super-shell.is-authenticated .sidebar-toggle,
.super-shell.is-authenticated .sidebar > .nav-label,
.super-shell.is-authenticated .sidebar > .nav-link,
.super-shell.is-authenticated .sidebar > .nav-accordion {
  display: none !important;
}

.social-shell-nav {
  display: flex;
  min-height: calc(100vh - 132px);
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.social-shell-nav-main,
.social-shell-nav-bottom {
  display: grid;
  gap: 8px;
}

.social-shell-link {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #aebfd6 !important;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: 0;
}

.social-shell-link .nav-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  color: #a4b8d2;
}

.social-shell-link .nav-svg {
  width: 22px;
  height: 22px;
}

.social-shell-link:hover,
.social-shell-link[aria-current="page"] {
  color: #57a8ff !important;
  border-color: rgba(57, 133, 230, .20);
  background: linear-gradient(135deg, rgba(36, 106, 205, .34), rgba(18, 57, 104, .22));
}

.social-settings-menu {
  min-width: 0;
}

.social-settings-menu summary {
  list-style: none;
  cursor: pointer;
}

.social-settings-menu summary::-webkit-details-marker {
  display: none;
}

.social-settings-trigger {
  width: 100%;
  align-items: center;
}

.social-settings-trigger .nav-icon,
.social-settings-trigger .nav-svg {
  overflow: visible;
}

.social-settings-menu[open] > .social-settings-trigger {
  color: #57a8ff !important;
  border-color: rgba(57, 133, 230, .22);
  background: linear-gradient(135deg, rgba(36, 106, 205, .34), rgba(18, 57, 104, .22));
}

.social-settings-chevron {
  margin-left: auto;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: #7890ad;
  line-height: 1;
  transition: transform .18s ease;
}

.social-settings-chevron svg {
  width: 16px;
  height: 16px;
  display: block;
}

.social-settings-menu[open] .social-settings-chevron {
  transform: rotate(180deg);
}

.social-settings-panel {
  max-height: min(58vh, 520px);
  overflow-y: auto;
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid rgba(88, 132, 179, .18);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(8, 30, 52, .92), rgba(7, 21, 38, .86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.social-settings-group {
  display: grid;
  gap: 4px;
}

.social-settings-heading {
  margin: 2px 8px 4px;
  color: #7ea6d8;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.social-settings-item {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #b6c6dc !important;
  font-size: .84rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
}

.social-settings-item:hover,
.social-settings-item[aria-current="page"] {
  color: #eff7ff !important;
  border-color: rgba(64, 139, 242, .22);
  background: rgba(42, 106, 192, .16);
}

.super-shell.is-authenticated .page-content {
  width: auto !important;
  max-width: none !important;
  margin: 0 0 0 var(--superhub-sidebar-width) !important;
  padding: calc(var(--superhub-topbar-height) + 26px) 16px 48px !important;
}

.superhub-social-home {
  width: 100%;
  max-width: 1720px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 24px;
  align-items: start;
  margin: 0 auto;
}

.super-shell.is-authenticated.sidebar-collapsed .superhub-social-home {
  max-width: none;
  margin-inline: 0;
}

.social-home-feed {
  min-width: 0;
  display: grid;
  gap: 22px;
}

.social-home-header {
  display: grid;
  gap: 8px;
}

.social-home-header p,
.social-home-header h1,
.social-home-header span,
.social-section-head h2,
.today-panel h2 {
  margin: 0;
}

.social-home-header p {
  color: #94a8c3;
  font-size: .98rem;
}

.social-home-header h1 {
  color: #f5f9ff;
  font-size: clamp(1.95rem, 2.6vw, 2.55rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.social-home-header span {
  color: #b6c7dc;
  font-size: 1rem;
}

.social-composer-card,
.social-post-list,
.today-panel {
  border: 1px solid var(--social-line);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(12, 36, 61, .78), rgba(8, 25, 44, .62));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 20px 48px rgba(0, 0, 0, .16);
}

.social-composer-card {
  padding: 18px;
}

.social-composer-form {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 96px;
  gap: 12px;
  align-items: center;
}

.social-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, #2f78ff, #2fd0cf);
  font-weight: 820;
}

.social-avatar-lg {
  width: 44px;
  height: 44px;
}

.social-composer-form input[name="body"] {
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border-color: var(--social-line-strong);
  color: var(--social-text);
  background: rgba(5, 18, 31, .62);
}

.social-composer-form > button[type="submit"] {
  height: 44px;
  border: 0;
  border-radius: 12px;
  color: #ffffff;
  background: linear-gradient(135deg, #2f74ff, #1e63db);
  font-weight: 760;
  cursor: pointer;
}

.social-composer-tags {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.social-composer-tags button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--social-line);
  border-radius: 999px;
  color: #bed0e4;
  background: rgba(8, 25, 44, .42);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.social-composer-tags svg {
  width: 18px;
  height: 18px;
  color: #4f9dff;
}

.social-updates-section {
  display: grid;
  gap: 14px;
}

.social-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.social-section-head h2 {
  color: #f3f7ff;
  font-size: 1.1rem;
}

.social-section-head select {
  width: auto;
  min-width: 142px;
  min-height: 40px;
  border-radius: 12px;
  padding: 0 34px 0 14px;
  color: #d7e6f8;
  background: rgba(7, 22, 38, .62);
}

.social-post-list {
  overflow: hidden;
}

.social-post-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid rgba(115, 151, 192, .13);
}

.social-post-card:last-child {
  border-bottom: 0;
}

.social-post-body {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.social-post-body header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.social-post-body header strong {
  color: #f2f8ff;
}

.social-post-body header small {
  color: #8da2be;
}

.social-post-body header b {
  padding: 5px 10px;
  border-radius: 999px;
  color: #62aaff;
  background: rgba(47, 120, 255, .16);
  font-size: .72rem;
  text-transform: uppercase;
}

.social-post-body p {
  margin: 0;
  color: #c2d0e4;
  line-height: 1.55;
}

.social-post-body footer {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #9fb3cd;
}

.social-post-body footer span,
.social-post-body footer a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
}

.social-post-body footer a {
  margin-left: auto;
}

.social-post-body footer svg {
  width: 18px;
  height: 18px;
}

.social-empty-card {
  display: grid;
  gap: 6px;
  padding: 20px;
  color: #aec1da;
}

.social-empty-card strong {
  color: #f4f8ff;
}

.social-more-link {
  justify-self: center;
  color: #4a9dff;
  font-weight: 720;
}

.social-home-today {
  position: sticky;
  top: calc(var(--superhub-topbar-height) + 26px);
  display: grid;
  gap: 12px;
  min-width: 0;
}

.today-panel {
  padding: 18px;
}

.calendar-glance-panel {
  display: grid;
  gap: 14px;
}

.home-calendar-drawer {
  display: grid;
  gap: 14px;
  scroll-margin-top: calc(var(--superhub-topbar-height) + 18px);
}

.home-calendar-drawer[hidden] {
  display: none !important;
}

.home-calendar-drawer .calendar-head {
  margin-bottom: 0;
}

.home-calendar-drawer .calendar-head h2 {
  margin: 2px 0 0;
  color: #f2f8ff;
  font-size: 1.02rem;
}

.calendar-nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.calendar-nav-actions .icon-btn,
.dashboard-calendar-menu .icon-btn {
  min-width: 34px !important;
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  text-decoration: none;
}

.calendar-nav-actions .ghost-btn {
  min-height: 34px !important;
  height: 34px !important;
  padding-inline: 12px !important;
}

.home-calendar-drawer .calendar-legend {
  margin: -2px 0 0;
}

.home-calendar-drawer .legend-pill {
  min-height: 26px;
  padding-inline: 9px;
  font-size: .7rem;
}

.home-calendar-drawer .dashboard-calendar {
  gap: 6px;
}

.home-calendar-drawer .calendar-weekday {
  padding: 0 2px;
  text-align: center;
  font-size: .64rem;
}

.home-calendar-drawer .calendar-cell {
  position: relative;
  min-width: 0 !important;
  min-height: 72px !important;
  height: auto !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 8px !important;
  border-radius: 14px !important;
  color: #dceaff !important;
  text-align: left;
}

.home-calendar-drawer .calendar-cell.has-activity {
  background: linear-gradient(180deg, rgba(14, 39, 66, .82), rgba(7, 24, 42, .70));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.home-calendar-drawer .calendar-date-number {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  font-size: .78rem;
}

.home-calendar-drawer .calendar-badges {
  position: absolute;
  left: 50%;
  bottom: 12px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  margin: 0;
  transform: translateX(-50%);
}

.home-calendar-drawer .calendar-badge {
  width: 8px;
  min-width: 8px;
  height: 8px;
  min-height: 8px;
  padding: 0;
  border-radius: 999px;
  font-size: 0;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .04), 0 0 12px currentColor;
}

.home-calendar-drawer .calendar-badge.blue { color: #2f7dff; background: #2f7dff; }
.home-calendar-drawer .calendar-badge.green { color: #2ed27a; background: #2ed27a; }
.home-calendar-drawer .calendar-badge.purple { color: #8b5cf6; background: #8b5cf6; }
.home-calendar-drawer .calendar-badge.is-scheduled { color: var(--calendar-scheduled); background: var(--calendar-scheduled); }
.home-calendar-drawer .calendar-badge.is-clocked { color: var(--calendar-clocked); background: var(--calendar-clocked); }
.home-calendar-drawer .calendar-badge.is-task { color: var(--calendar-task); background: var(--calendar-task); }
.home-calendar-drawer .calendar-badge.is-leave { color: var(--calendar-leave); background: var(--calendar-leave); }

.home-calendar-drawer .dashboard-calendar-menu {
  z-index: 140;
}

.home-calendar-drawer .dashboard-calendar-menu .calendar-menu-group i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 999px;
}

.calendar-glance-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.calendar-glance-head small {
  display: block;
  color: #95a9c4;
  font-size: .78rem;
}

.calendar-glance-head h2 {
  margin: 2px 0 0;
  color: #f2f8ff;
  font-size: 1rem;
}

.calendar-glance-head a {
  color: #4a9dff;
  font-weight: 720;
}

.calendar-week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.calendar-day-pill {
  min-width: 0;
  min-height: 68px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  padding: 8px 4px;
  border: 1px solid rgba(115, 151, 192, .12);
  border-radius: 12px;
  color: #adc0d8;
  background: rgba(7, 22, 38, .26);
  cursor: pointer;
  font: inherit;
  text-align: center;
}

.calendar-day-pill:hover {
  border-color: rgba(74, 157, 255, .30);
  background: rgba(34, 96, 166, .18);
}

.calendar-day-pill.is-today {
  color: #f6fbff;
  border-color: rgba(74, 157, 255, .42);
  background: linear-gradient(180deg, rgba(42, 112, 220, .28), rgba(9, 28, 48, .28));
}

.calendar-day-pill.is-muted {
  opacity: .46;
}

.calendar-day-pill span {
  font-size: .68rem;
  font-weight: 820;
  text-transform: uppercase;
}

.calendar-day-pill strong {
  color: inherit;
  font-size: .98rem;
}

.calendar-day-pill em,
.calendar-glance-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.calendar-day-pill em {
  min-height: 6px;
}

.calendar-day-pill i,
.calendar-glance-legend i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
}

.calendar-glance-legend {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  color: #8fa4c0;
  font-size: .76rem;
}

.calendar-glance-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.is-scheduled {
  background: var(--calendar-scheduled);
}

/* People Workspace v3: compact directory and accessible employee action drawer. */
body .super-shell.is-authenticated .page-content > .people-management-hero {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 0 18px !important;
  padding: 2px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .super-shell.is-authenticated .people-management-hero h1 {
  margin: 0 0 4px !important;
  font-size: clamp(2rem, 3vw, 2.65rem) !important;
}

body .super-shell.is-authenticated .people-management-hero .people-hero-copy {
  margin: 0 !important;
  max-width: 620px !important;
}

body .super-shell.is-authenticated .people-management-hero .people-hero-count {
  display: none !important;
}

body .super-shell.is-authenticated .people-management-hero .page-actions {
  display: flex !important;
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .super-shell.is-authenticated .people-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body .super-shell.is-authenticated .people-summary-item {
  min-height: 78px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
}

body .super-shell.is-authenticated .people-invite-disclosure:not([open]) {
  display: none !important;
}

body .super-shell.is-authenticated .people-invite-disclosure[open] {
  margin: 0 0 18px !important;
}

body .super-shell.is-authenticated .people-invite-disclosure[open] > summary {
  min-height: 50px !important;
  padding: 10px 14px !important;
  border-radius: 12px 12px 0 0 !important;
}

body .super-shell.is-authenticated .people-directory-panel {
  padding: clamp(18px, 2vw, 24px) !important;
  border-radius: 16px !important;
}

body .super-shell.is-authenticated .people-directory-panel .module-toolbar {
  display: grid !important;
  grid-template-columns: minmax(175px, .38fr) minmax(0, 1.62fr) !important;
  align-items: end !important;
  gap: 20px !important;
  margin-bottom: 12px !important;
}

body .super-shell.is-authenticated .people-filter-form {
  grid-template-columns: minmax(220px, 1.3fr) minmax(125px, .65fr) minmax(150px, .78fr) auto auto !important;
  gap: 10px !important;
}

body .people-action-menu[open]::before {
  content: none !important;
}

body .people-action-backdrop {
  position: fixed;
  z-index: 245;
  inset: 0;
  display: none;
  width: 100vw;
  height: 100vh;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(3, 13, 27, .63);
  backdrop-filter: blur(3px);
  cursor: default;
}

body .people-action-menu[open] > .people-action-backdrop {
  display: block;
}

body .people-action-popover {
  top: 112px !important;
  right: 28px !important;
  bottom: 28px !important;
  left: auto !important;
  width: min(360px, calc(100vw - 36px)) !important;
  max-height: none !important;
  padding: 18px !important;
  border-radius: 18px !important;
}

body .people-action-person {
  grid-template-columns: 46px minmax(0, 1fr) 40px !important;
  margin: 0 0 14px !important;
  padding: 0 0 16px !important;
}

body .people-action-close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--panel-soft) 80%, transparent);
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

body .people-action-close:hover,
body .people-action-close:focus-visible {
  border-color: color-mix(in srgb, var(--blue, #2f86ff) 55%, var(--line));
  color: var(--text);
  background: color-mix(in srgb, var(--blue, #2f86ff) 12%, var(--panel));
  outline: none;
}

@media (max-width: 1120px) {
  body .super-shell.is-authenticated .people-directory-panel .module-toolbar {
    grid-template-columns: 1fr !important;
  }

  body .super-shell.is-authenticated .people-filter-form {
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(130px, .65fr)) auto !important;
  }
}

@media (max-width: 760px) {
  body .super-shell.is-authenticated .page-content > .people-management-hero {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body .super-shell.is-authenticated .people-management-hero .page-actions,
  body .super-shell.is-authenticated .people-management-hero .page-actions .primary-btn {
    width: 100% !important;
  }

  body .super-shell.is-authenticated .people-summary-grid {
    display: flex !important;
    overflow-x: auto !important;
  }

  body .super-shell.is-authenticated .people-summary-item {
    min-width: 138px !important;
  }

  body .people-action-popover {
    top: auto !important;
    right: 10px !important;
    bottom: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-height: min(78vh, 680px) !important;
  }
}

.is-clocked {
  background: var(--calendar-clocked);
}

.is-task {
  background: var(--calendar-task);
}

.is-leave {
  background: var(--calendar-leave);
}

.feed-composer-row {
  grid-template-columns: minmax(220px, 1fr) auto;
}

.today-panel-title {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(115, 151, 192, .14);
}

.today-panel-title span {
  grid-row: 1 / span 2;
  color: #a9bdd6;
}

.today-panel-title svg {
  width: 22px;
  height: 22px;
}

.today-panel-title strong,
.today-tasks-panel header strong,
.today-actions-panel h2 {
  color: #f2f8ff;
  font-size: 1rem;
}

.today-panel-title small {
  color: #95a9c4;
}

.today-clock-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding-top: 18px;
}

.today-clock-card small,
.today-info-row small,
.today-clock-card em,
.today-info-row em {
  display: block;
  color: #96aac4;
  font-style: normal;
}

.today-clock-card strong {
  display: block;
  margin: 3px 0;
  color: var(--social-green);
  font-size: 1.3rem;
}

.today-clock-card b {
  color: #f4f8ff;
  font-size: 1.18rem;
}

.today-clock-card form,
.today-clock-card a {
  grid-column: 3;
}

.today-clock-card button,
.today-clock-card a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid rgba(74, 157, 255, .45);
  border-radius: 10px;
  color: #63aaff;
  background: rgba(44, 112, 224, .12);
  font: inherit;
  font-weight: 760;
  cursor: pointer;
}

.today-clock-card button {
  min-width: 118px;
  min-height: 54px;
  flex-direction: column;
  gap: 3px;
  padding: 8px 16px;
  line-height: 1.1;
}

.today-clock-card button small {
  display: block;
  color: rgba(255, 255, 255, .78);
  font-size: .72rem;
  font-weight: 720;
}

.today-clock-card button.is-loading {
  opacity: .72;
  pointer-events: none;
}

.today-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  border-radius: 999px;
  color: #ffffff;
}

.today-clock-card > .today-icon {
  width: 58px;
  height: 58px;
}

.today-icon svg {
  width: 24px;
  height: 24px;
}

.today-icon-green {
  background: linear-gradient(135deg, #30a964, #4fd38c);
}

.today-icon-purple {
  background: linear-gradient(135deg, #5e48e8, #8b6dff);
}

.today-icon-blue {
  background: linear-gradient(135deg, #246ff0, #4aa2ff);
}

.today-icon-orange {
  background: linear-gradient(135deg, #ee872b, #f7ad4f);
}

.today-list-panel {
  padding: 0 18px;
}

.today-info-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid rgba(115, 151, 192, .14);
  color: inherit;
}

.today-info-row:last-child {
  border-bottom: 0;
}

.today-info-row strong {
  display: block;
  margin: 3px 0;
  color: #f2f8ff;
  font-size: 1.05rem;
}

.today-tasks-panel {
  display: grid;
  gap: 14px;
}

.today-tasks-panel header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.today-tasks-panel header a {
  color: #4a9dff;
  font-weight: 720;
}

.today-task-list {
  display: grid;
}

.today-task-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  color: #bdcde2;
  border-top: 1px solid rgba(115, 151, 192, .11);
}

.today-task-row > span {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(159, 179, 205, .55);
  border-radius: 4px;
}

.today-task-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .9rem;
  font-weight: 620;
}

.today-task-row em,
.today-task-list p {
  color: #93a8c3;
  font-style: normal;
  font-size: .84rem;
}

.today-actions-panel {
  display: grid;
  gap: 16px;
}

.today-actions-panel > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.today-actions-panel a {
  min-height: 86px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(115, 151, 192, .14);
  border-radius: 12px;
  color: #f2f8ff;
  background: rgba(7, 22, 38, .36);
}

@media (max-width: 1180px) {
  :root {
    --superhub-sidebar-width: 208px;
  }

  .superhub-social-home {
    grid-template-columns: 1fr;
  }

  .social-home-today {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .super-shell.is-authenticated .topbar {
    left: 0 !important;
    padding: 10px 14px !important;
  }

  .topbar-search {
    display: none;
  }

  .super-shell.is-authenticated .sidebar,
  .super-shell.is-authenticated.sidebar-collapsed .sidebar {
    top: var(--superhub-topbar-height) !important;
    height: calc(100vh - var(--superhub-topbar-height)) !important;
    transform: translateX(-105%);
    transition: transform .22s ease;
  }

  .super-shell.mobile-nav-open .sidebar,
  .super-shell.mobile-nav-open.sidebar-collapsed .sidebar {
    transform: translateX(0);
  }

  .super-shell.is-authenticated .page-content {
    margin-left: 0 !important;
    padding: calc(var(--superhub-topbar-height) + 20px) 16px 96px !important;
  }
}

@media (max-width: 720px) {
  .social-composer-form,
  .today-clock-card,
  .today-actions-panel > div,
  .social-home-today {
    grid-template-columns: 1fr;
  }

  .social-composer-form .social-avatar {
    display: none;
  }

  .social-composer-tags {
    grid-column: 1 / -1;
  }

  .today-clock-card form,
  .today-clock-card a {
    grid-column: auto;
  }
}

/* Subscription plan admin editor. */
.plan-rule-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.plan-rule-card,
.plan-admin-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
}

.plan-rule-card {
  display: grid;
  gap: 6px;
  padding: 16px;
}

.plan-rule-card span,
.plan-field span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.plan-rule-card strong {
  color: var(--text);
  font-size: 1.25rem;
}

.plan-rule-card small,
.plan-field small {
  color: var(--muted);
  line-height: 1.35;
}

.plan-admin-panel {
  margin-bottom: 18px;
}

.plan-admin-list {
  display: grid;
  gap: 16px;
}

.plan-admin-group {
  display: grid;
  gap: 12px;
}

.plan-admin-group + .plan-admin-group {
  margin-top: 8px;
}

.plan-admin-group-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 2px 2px;
}

.plan-admin-group-heading h3 {
  margin: 2px 0 4px;
}

.plan-admin-card {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.plan-admin-card-header,
.plan-admin-card-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.plan-admin-card-header h3 {
  margin: 2px 0 4px;
}

.plan-admin-card-header span {
  color: var(--muted);
}

.plan-admin-badges,
.plan-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.plan-admin-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.plan-field {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.plan-field-wide {
  grid-column: span 2;
}

.plan-field input,
.plan-field select {
  width: 100%;
}

@media (max-width: 1180px) {
  .plan-rule-strip,
  .plan-admin-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .plan-rule-strip,
  .plan-admin-form {
    grid-template-columns: 1fr;
  }

  .plan-field-wide {
    grid-column: auto;
  }

.plan-admin-card-header,
.plan-admin-card-footer {
  display: grid;
}
}

.setup-health-panel {
  margin-top: 18px;
}

.setup-health-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.setup-health-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 150px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}

.setup-health-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.setup-health-card-head span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.setup-health-card-head strong {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  font-size: .75rem;
}

.setup-health-card--ok {
  border-color: color-mix(in srgb, var(--green) 34%, var(--line));
}

.setup-health-card--ok .setup-health-card-head strong {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 14%, transparent);
}

.setup-health-card--warning {
  border-color: color-mix(in srgb, var(--amber) 34%, var(--line));
}

.setup-health-card--warning .setup-health-card-head strong {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 14%, transparent);
}

.setup-health-card--missing {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--line));
}

.setup-health-card--missing .setup-health-card-head strong {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}

.setup-health-card h3 {
  margin: 0;
  font-size: 1rem;
}

.setup-health-card p,
.setup-health-card small {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.admin-settings-group {
  margin-top: 1rem;
}

.setting-secret-box {
  display: grid;
  gap: 5px;
  margin-bottom: 8px;
  padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--blue) 38%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 8%, transparent);
}

.setting-secret-box span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.setting-secret-box code {
  color: var(--text);
  font-family: "Cascadia Mono", "Consolas", monospace;
  font-size: .86rem;
  word-break: break-word;
}

.setting-secret-box small {
  color: var(--amber);
  line-height: 1.35;
}

@media (max-width: 1180px) {
  .setup-health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .setup-health-grid {
    grid-template-columns: 1fr;
  }
}

/* Light theme comfort pass. */
html[data-theme="light"] {
  --bg: #e8eef6;
  --surface: rgba(247, 250, 253, .94);
  --surface-strong: #f9fbfd;
  --surface-solid: #f8fbfd;
  --panel: #f7fafd;
  --line: rgba(79, 102, 132, .22);
  --text: #17263b;
  --muted: #5f7189;
  --muted-strong: #43566f;
  --blue: #1f6fe5;
  --cyan: #0ea9bd;
  --shadow: 0 18px 46px rgba(50, 70, 96, .12);
  --social-bg: #e8eef6;
  --social-bg-deep: #dfe8f2;
  --social-panel: rgba(248, 251, 254, .92);
  --social-panel-soft: rgba(239, 245, 251, .84);
  --social-line: rgba(75, 98, 128, .22);
  --social-line-strong: rgba(75, 98, 128, .30);
  --social-text: #17263b;
  --social-muted: #5f7189;
}

html[data-theme="light"] body,
html[data-theme="light"] .super-shell.is-authenticated {
  color: var(--text) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(31, 111, 229, .08), transparent 30%),
    radial-gradient(circle at 100% 6%, rgba(14, 169, 189, .07), transparent 32%),
    linear-gradient(135deg, #e7eef6 0%, #f1f5f9 46%, #e4ebf4 100%) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .topbar {
  background: rgba(246, 249, 252, .94) !important;
  border-bottom-color: rgba(80, 103, 132, .20) !important;
  box-shadow: 0 10px 28px rgba(48, 68, 92, .08) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar,
html[data-theme="light"] .super-shell.is-authenticated.sidebar-collapsed .sidebar {
  background: linear-gradient(180deg, rgba(238, 244, 250, .97), rgba(229, 237, 247, .96)) !important;
  border-right-color: rgba(79, 102, 132, .22) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar-brand {
  min-height: 64px;
  padding: 8px 10px;
  border: 1px solid rgba(74, 101, 135, .18);
  border-radius: 16px;
  color: var(--text);
  background: rgba(250, 252, 255, .78);
  box-shadow: 0 16px 34px rgba(46, 68, 96, .08);
}

html[data-theme="light"] .brand-mark.image-mark,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-brand .brand-mark,
html[data-theme="light"] .super-shell.is-authenticated .topbar > .brand .brand-mark {
  padding: 5px;
  border: 1px solid rgba(31, 83, 146, .22);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .38), transparent 28%),
    linear-gradient(145deg, #0b2949 0%, #126ce2 58%, #13b8c7 100%) !important;
  box-shadow: 0 14px 30px rgba(29, 91, 166, .24);
}

html[data-theme="light"] .brand-mark.image-mark img,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-brand .brand-mark img,
html[data-theme="light"] .super-shell.is-authenticated .topbar > .brand .brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(2, 24, 48, .28)) saturate(1.08) contrast(1.06);
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar-brand strong {
  color: #15263c !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar-brand small {
  color: #60738d !important;
}

html[data-theme="light"] .social-shell-link {
  color: #4f637d !important;
}

html[data-theme="light"] .social-shell-link .nav-icon {
  color: #5e718a;
}

html[data-theme="light"] .social-shell-link:hover,
html[data-theme="light"] .social-shell-link[aria-current="page"],
html[data-theme="light"] .social-settings-menu[open] > .social-settings-trigger {
  color: #165ec8 !important;
  border-color: rgba(31, 111, 229, .22);
  background: linear-gradient(135deg, rgba(31, 111, 229, .14), rgba(14, 169, 189, .08));
}

html[data-theme="light"] .social-settings-panel {
  border-color: rgba(75, 98, 128, .18);
  background: rgba(250, 252, 255, .82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .70), 0 12px 26px rgba(48, 68, 92, .08);
}

html[data-theme="light"] .social-settings-heading {
  color: #3f6fae;
}

html[data-theme="light"] .social-settings-item {
  color: #52667f !important;
}

html[data-theme="light"] .social-settings-item:hover,
html[data-theme="light"] .social-settings-item[aria-current="page"] {
  color: #174d9b !important;
  border-color: rgba(31, 111, 229, .18);
  background: rgba(31, 111, 229, .10);
}

html[data-theme="light"] .topbar-search {
  color: #596d86;
  border-color: rgba(75, 98, 128, .24);
  background: rgba(234, 240, 248, .92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
}

html[data-theme="light"] .topbar-search input {
  color: #17263b !important;
}

html[data-theme="light"] .topbar-search input::placeholder {
  color: #75869a;
}

html[data-theme="light"] .topbar-search-kbd {
  color: #52667f;
  background: rgba(75, 98, 128, .10);
}

html[data-theme="light"] .super-shell.is-authenticated .topbar-actions > .pill[data-theme-toggle],
html[data-theme="light"] .super-shell.is-authenticated .topbar-actions > .language-form .language-select,
html[data-theme="light"] .super-shell.is-authenticated .topbar-actions > .topbar-bell,
html[data-theme="light"] .super-shell.is-authenticated .topbar-actions > .logout-btn,
html[data-theme="light"] .super-shell.is-authenticated .topbar-actions > .account-pill {
  color: #253d5b !important;
  background: rgba(248, 251, 254, .90) !important;
  border-color: rgba(75, 98, 128, .22) !important;
  box-shadow: 0 10px 24px rgba(48, 68, 92, .08) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .topbar-actions > .account-pill strong {
  color: #17263b !important;
}

html[data-theme="light"] .super-shell.is-authenticated .topbar-actions > .account-pill small {
  color: #60738d !important;
}

html[data-theme="light"] .hero,
html[data-theme="light"] .panel,
html[data-theme="light"] .plan-rule-card,
html[data-theme="light"] .plan-admin-card,
html[data-theme="light"] .table-card,
html[data-theme="light"] .content-card,
html[data-theme="light"] .form-card,
html[data-theme="light"] .settings-card,
html[data-theme="light"] .workspace-card,
html[data-theme="light"] .mini-card,
html[data-theme="light"] .list-row,
html[data-theme="light"] .task-card {
  color: var(--text) !important;
  border-color: rgba(75, 98, 128, .18) !important;
  background: rgba(248, 251, 253, .92) !important;
  box-shadow: 0 18px 46px rgba(48, 68, 92, .10) !important;
}

html[data-theme="light"] .hero.compact {
  background:
    radial-gradient(circle at 100% 0%, rgba(31, 111, 229, .09), transparent 30%),
    linear-gradient(135deg, rgba(247, 250, 253, .94), rgba(231, 240, 250, .88)) !important;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] strong,
html[data-theme="light"] label,
html[data-theme="light"] .plan-rule-card strong,
html[data-theme="light"] .plan-admin-card-header h3 {
  color: #17263b !important;
}

html[data-theme="light"] .muted,
html[data-theme="light"] small,
html[data-theme="light"] .plan-field small,
html[data-theme="light"] .plan-admin-card-header span {
  color: #62748b !important;
}

html[data-theme="light"] .eyebrow,
html[data-theme="light"] .plan-field span,
html[data-theme="light"] .plan-rule-card span,
html[data-theme="light"] th {
  color: #557092 !important;
}

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .super-shell.is-authenticated input,
html[data-theme="light"] .super-shell.is-authenticated textarea,
html[data-theme="light"] .super-shell.is-authenticated select {
  color: #17263b !important;
  border-color: rgba(75, 98, 128, .22) !important;
  background: #f1f5f9 !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #8a99ab !important;
  opacity: 1;
}

/* Dashboard social-home contrast and calendar chip polish. */
.calendar-week-strip {
  align-items: center;
  justify-items: center;
}

.calendar-day-pill {
  position: relative;
  width: min(52px, 100%);
  min-height: 0;
  aspect-ratio: 1;
  align-content: center;
  gap: 0;
  padding: 10px 6px 11px;
  border-radius: 999px;
  overflow: hidden;
}

.calendar-day-pill span {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1;
  opacity: .72;
}

.calendar-day-pill strong {
  display: block;
  line-height: 1;
}

.calendar-day-pill em {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  min-height: 6px;
  line-height: 0;
  pointer-events: none;
}

.calendar-day-pill i {
  width: 5px;
  height: 5px;
  box-shadow: 0 0 0 1px rgba(2, 8, 23, .14);
}

.social-empty-card {
  border-radius: inherit;
}

html[data-theme="light"] .social-home-header p {
  color: #526987;
}

html[data-theme="light"] .social-home-header h1,
html[data-theme="light"] .social-section-head h2,
html[data-theme="light"] .calendar-glance-head h2,
html[data-theme="light"] .today-panel-title strong,
html[data-theme="light"] .today-tasks-panel header strong,
html[data-theme="light"] .today-actions-panel h2,
html[data-theme="light"] .today-info-row strong,
html[data-theme="light"] .social-empty-card strong {
  color: #13233a !important;
}

html[data-theme="light"] .social-home-header span,
html[data-theme="light"] .social-empty-card span,
html[data-theme="light"] .social-post-body p,
html[data-theme="light"] .today-clock-card small,
html[data-theme="light"] .today-info-row small,
html[data-theme="light"] .today-clock-card em,
html[data-theme="light"] .today-info-row em,
html[data-theme="light"] .calendar-glance-head small,
html[data-theme="light"] .today-panel-title small,
html[data-theme="light"] .today-task-row em,
html[data-theme="light"] .today-task-list p {
  color: #5f728d !important;
}

html[data-theme="light"] .social-composer-card,
html[data-theme="light"] .social-post-list,
html[data-theme="light"] .today-panel {
  border-color: rgba(75, 98, 128, .16) !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: 0 18px 42px rgba(48, 68, 92, .09) !important;
}

html[data-theme="light"] .social-post-list {
  overflow: hidden;
}

html[data-theme="light"] .social-empty-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(247, 250, 254, .88));
}

html[data-theme="light"] .social-composer-form input[name="body"] {
  color: #17263b !important;
  border-color: rgba(75, 98, 128, .20) !important;
  background: rgba(241, 246, 252, .92) !important;
}

html[data-theme="light"] .social-composer-tags button {
  color: #435a76;
  border-color: rgba(75, 98, 128, .18);
  background: rgba(244, 248, 253, .92);
}

html[data-theme="light"] .social-composer-tags button svg {
  color: #1f7cff;
}

html[data-theme="light"] .social-composer-tags button:hover {
  color: #174d9b;
  border-color: rgba(31, 111, 229, .26);
  background: rgba(31, 111, 229, .08);
}

html[data-theme="light"] .social-post-card {
  border-bottom-color: rgba(75, 98, 128, .14);
}

html[data-theme="light"] .social-section-head select {
  color: #233a57 !important;
  border-color: rgba(75, 98, 128, .20) !important;
  background-color: rgba(247, 250, 254, .92) !important;
}

html[data-theme="light"] .calendar-glance-panel {
  gap: 16px;
}

html[data-theme="light"] .calendar-day-pill {
  color: #2d4058;
  border-color: rgba(75, 98, 128, .14);
  background: linear-gradient(180deg, #edf3fa, #e3ebf4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .80);
}

html[data-theme="light"] .calendar-day-pill:hover {
  color: #174d9b;
  border-color: rgba(31, 111, 229, .30);
  background: linear-gradient(180deg, #f4f8fd, #dcecff);
}

html[data-theme="light"] .calendar-day-pill.is-today {
  color: #ffffff;
  border-color: rgba(31, 111, 229, .38);
  background: linear-gradient(135deg, #4aa2ff, #2f78ff);
  box-shadow: 0 10px 22px rgba(31, 111, 229, .22);
}

html[data-theme="light"] .calendar-day-pill.is-muted {
  color: #8392a5;
  background: #e5ebf2;
  opacity: .78;
}

html[data-theme="light"] .calendar-glance-legend {
  color: #64758c;
}

html[data-theme="light"] .calendar-day-pill i {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .80);
}

@media (max-width: 720px) {
  .calendar-day-pill {
    width: min(48px, 100%);
  }
}

/* Company communication */
.communications-page {
  display: grid;
  gap: 22px;
}

.communications-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--blue) 28%, transparent), transparent 32%),
    color-mix(in srgb, var(--surface-strong, var(--surface)) 84%, transparent);
  box-shadow: var(--shadow-soft, var(--shadow));
}

.communications-hero h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: 0;
}

.communications-hero-stat {
  min-width: 118px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  text-align: right;
}

.communications-hero-stat span,
.conversation-type,
.conversation-meta,
.message-bubble-head span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}

.communications-hero-stat strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 2rem;
  line-height: 1;
}

.communications-layout {
  display: grid;
  grid-template-columns: minmax(250px, .85fr) minmax(420px, 1.55fr) minmax(310px, .9fr);
  gap: 18px;
  align-items: start;
}

.communications-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--shadow-soft, var(--shadow));
}

.communications-panel-head,
.thread-head {
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}

.communications-panel h2,
.thread-head h2 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: 0;
}

.conversation-list {
  display: grid;
  max-height: min(760px, calc(100vh - 280px));
  overflow: auto;
}

.conversation-row {
  display: grid;
  gap: 7px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

.conversation-row:hover,
.conversation-row.is-active {
  background: color-mix(in srgb, var(--blue) 14%, transparent);
}

.conversation-row strong,
.message-bubble-head strong {
  color: var(--text);
}

.conversation-row small {
  color: var(--muted);
  line-height: 1.35;
}

.conversation-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.conversation-meta b {
  min-width: 24px;
  min-height: 24px;
  display: inline-grid;
  place-items: center;
  padding: 0 7px;
  border-radius: 999px;
  color: #fff;
  background: var(--blue);
  font-size: .75rem;
}

.communications-thread {
  display: grid;
  min-height: min(780px, calc(100vh - 220px));
  grid-template-rows: auto minmax(240px, 1fr) auto;
}

.message-thread-list {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px;
  max-height: min(640px, calc(100vh - 405px));
  overflow: auto;
}

.message-bubble {
  width: min(86%, 680px);
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px 18px 18px 6px;
  background: color-mix(in srgb, var(--surface-strong, var(--surface)) 86%, transparent);
}

.message-bubble.is-mine {
  justify-self: end;
  border-radius: 18px 18px 6px 18px;
  background: color-mix(in srgb, var(--blue) 18%, var(--surface));
}

.message-bubble.is-system {
  border-color: color-mix(in srgb, var(--amber) 40%, var(--line));
}

.message-bubble-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.message-bubble p {
  margin: 9px 0 0;
  color: var(--text);
  line-height: 1.55;
}

.message-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.message-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  font-size: .75rem;
  font-weight: 800;
}

.message-tags .is-important {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 13%, transparent);
}

.reply-composer,
.compose-form {
  display: grid;
  gap: 14px;
}

.reply-composer {
  padding: 18px;
  border-top: 1px solid var(--line);
}

.compose-form {
  padding: 18px 20px 22px;
}

.composer-options,
.compose-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.composer-options {
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) auto auto;
  align-items: end;
}

.inline-check {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-strong, var(--surface)) 70%, transparent);
}

.inline-check input {
  width: auto;
  min-height: auto;
}

.communications-empty {
  padding: 22px;
  color: var(--muted);
}

.communications-empty.is-large {
  display: grid;
  place-items: center;
  min-height: 360px;
  text-align: center;
}

.communications-empty.is-large h2 {
  margin: 0;
}

@media (max-width: 1260px) {
  .communications-layout {
    grid-template-columns: minmax(240px, .9fr) minmax(420px, 1.35fr);
  }

  .communications-compose {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .communications-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .communications-hero-stat {
    text-align: left;
  }

  .communications-layout {
    grid-template-columns: 1fr;
  }

  .communications-thread,
  .conversation-list,
  .message-thread-list {
    min-height: 0;
    max-height: none;
  }

  .composer-options,
  .compose-two {
    grid-template-columns: 1fr;
  }

.message-bubble {
    width: 100%;
  }
}

.topbar-bell {
  position: relative;
}

.topbar-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  min-height: 20px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border: 2px solid var(--bg);
  border-radius: 999px;
  color: #fff;
  background: var(--danger, #ef4444);
  font-size: .68rem;
  font-weight: 900;
  line-height: 1;
}

.notification-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.notification-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.notification-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-strong, var(--surface)) 82%, transparent);
}

.notification-card.is-unread {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
}

.notification-card h2 {
  margin: 4px 0 6px;
  font-size: 1rem;
  letter-spacing: 0;
}

.notification-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.notification-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}

.notification-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.notification-actions form {
  margin: 0;
}

@media (max-width: 720px) {
  .notification-toolbar,
  .notification-card {
    grid-template-columns: 1fr;
  }

  .notification-toolbar,
  .notification-actions {
    align-items: stretch;
    justify-content: flex-start;
  }
}

/* Messages and notification clarity pass. */
.communications-hero {
  align-items: center;
  padding: clamp(20px, 3vw, 30px);
  border-radius: 22px;
}

.communications-title-row,
.communications-hero-actions,
.thread-head,
.conversation-row,
.conversation-row-title,
.reply-actions,
.compose-submit-row,
.notification-hero,
.notification-hero-copy,
.notification-inbox-head {
  display: flex;
  align-items: center;
}

.communications-title-row,
.communications-hero-actions,
.thread-head,
.notification-hero-copy {
  gap: 14px;
}

.communications-title-icon,
.notification-hero-icon {
  width: 48px;
  height: 48px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 14%, var(--surface));
}

.communications-title-icon svg,
.notification-hero-icon svg,
.notification-category-icon svg,
.notification-delete-btn svg,
.conversation-search svg {
  width: 23px;
  height: 23px;
}

.communications-hero h1 {
  font-size: clamp(2rem, 3.2vw, 2.8rem);
}

.communications-hero-actions {
  justify-content: flex-end;
}

.communications-hero-stat {
  min-width: 94px;
  padding: 11px 14px;
  border-radius: 14px;
}

.communications-hero-stat strong {
  font-size: 1.5rem;
}

.communications-layout {
  grid-template-columns: minmax(290px, .82fr) minmax(500px, 1.8fr);
  gap: 18px;
}

.communications-panel {
  border-radius: 20px;
}

.communications-panel-head {
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
}

.conversation-view-toggle {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong, var(--surface));
}

.conversation-view-toggle button {
  min-height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-weight: 800;
}

.conversation-view-toggle button[aria-pressed="true"] {
  color: #fff;
  background: var(--blue);
}

.conversation-search {
  position: relative;
  display: block;
  padding: 12px 14px 0;
}

.conversation-search svg {
  position: absolute;
  top: 25px;
  left: 28px;
  color: var(--muted);
}

.conversation-search input {
  min-height: 46px;
  padding-left: 46px;
}

.conversation-list {
  max-height: min(760px, calc(100vh - 325px));
  padding: 12px;
  gap: 7px;
}

.conversation-row {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 14px;
}

.conversation-row:hover,
.conversation-row.is-active {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--line));
}

.conversation-row.is-unread:not(.is-active) {
  background: color-mix(in srgb, var(--blue) 8%, transparent);
}

.conversation-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 13px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  font-size: 1.05rem;
  font-weight: 900;
}

.conversation-avatar.is-group { color: var(--violet, #8b5cf6); background: color-mix(in srgb, var(--violet, #8b5cf6) 13%, var(--surface)); }
.conversation-avatar.is-department { color: var(--teal, #14b8a6); background: color-mix(in srgb, var(--teal, #14b8a6) 13%, var(--surface)); }
.conversation-avatar.is-company { color: var(--amber, #f59e0b); background: color-mix(in srgb, var(--amber, #f59e0b) 13%, var(--surface)); }

.conversation-row-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.conversation-row-title {
  justify-content: space-between;
  gap: 8px;
}

.conversation-row-title b {
  min-width: 22px;
  min-height: 22px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  color: #fff;
  background: var(--blue);
  font-size: .7rem;
}

.conversation-type {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.thread-head {
  padding: 16px 20px;
}

.communications-thread {
  min-height: min(760px, calc(100vh - 230px));
}

.reply-composer {
  gap: 10px;
}

.reply-field textarea {
  min-height: 72px;
  resize: vertical;
}

.reply-actions,
.compose-submit-row {
  justify-content: space-between;
  gap: 12px;
}

.composer-advanced {
  min-width: 0;
}

.composer-advanced summary {
  cursor: pointer;
  color: var(--blue);
  font-weight: 800;
}

.composer-advanced[open] {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-strong, var(--surface)) 84%, transparent);
}

.composer-advanced .composer-options,
.composer-advanced .compose-two {
  margin-top: 12px;
}

.message-compose-dialog {
  width: min(620px, calc(100vw - 28px));
  max-height: min(860px, calc(100vh - 28px));
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .4);
}

.message-compose-dialog::backdrop {
  background: rgba(1, 12, 27, .72);
  backdrop-filter: blur(4px);
}

.message-compose-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}

.message-compose-modal h2 {
  margin: 0;
}

.dialog-close,
.notification-delete-btn {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--muted);
  background: transparent;
}

.dialog-close {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 1.4rem;
}

.dialog-close:hover,
.notification-delete-btn:hover {
  color: var(--danger, #ef4444);
  border-color: color-mix(in srgb, var(--danger, #ef4444) 45%, var(--line));
}

.notification-workspace {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.notification-hero {
  min-height: 0;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: var(--shadow-soft, var(--shadow));
}

.notification-hero-copy {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.notification-hero h1 {
  margin: 0;
  font-size: clamp(1.8rem, 2.5vw, 2.35rem);
  letter-spacing: 0;
}

.notification-view-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.notification-view-tabs a {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  font-weight: 800;
}

.notification-view-tabs a strong {
  color: var(--text);
  font-size: 1.35rem;
}

.notification-view-tabs a[aria-current="page"] {
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 48%, var(--line));
  background: color-mix(in srgb, var(--blue) 11%, var(--surface));
}

.notification-inbox-panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: var(--shadow-soft, var(--shadow));
}

.notification-inbox-head {
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.notification-inbox-head h2 {
  margin: 0;
  letter-spacing: 0;
}

.notification-category-filter select {
  min-width: 180px;
  min-height: 42px;
}

.notification-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 14px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.notification-card.is-important {
  box-shadow: inset 3px 0 0 var(--amber, #f59e0b);
}

.notification-card.is-unread {
  background: color-mix(in srgb, var(--blue) 7%, transparent);
}

.notification-category-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
}

.notification-category-icon.is-leave { color: var(--violet, #8b5cf6); background: color-mix(in srgb, var(--violet, #8b5cf6) 13%, var(--surface)); }
.notification-category-icon.is-schedule { color: var(--teal, #14b8a6); background: color-mix(in srgb, var(--teal, #14b8a6) 13%, var(--surface)); }
.notification-category-icon.is-task { color: var(--amber, #f59e0b); background: color-mix(in srgb, var(--amber, #f59e0b) 13%, var(--surface)); }

.notification-card-copy h3 {
  margin: 4px 0 5px;
  font-size: 1rem;
}

.notification-card-copy p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notification-meta b {
  color: var(--amber, #f59e0b);
}

.notification-state {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, currentColor 8%, transparent);
  font-size: 0.72rem;
  font-weight: 800;
}

.notification-state.is-review,
.notification-state.is-pending { color: var(--amber, #f59e0b); }
.notification-state.is-approved { color: var(--green, #22c55e); }
.notification-state.is-rejected,
.notification-state.is-revoked { color: var(--danger, #ef4444); }
.notification-state.is-cancelled,
.notification-state.is-expired { color: var(--muted); }

.notification-actions {
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.notification-actions form {
  display: grid;
  place-items: center;
}

.notification-actions .primary-btn.small,
.notification-actions .soft-btn.small {
  min-height: 40px;
  padding: .62rem 1rem;
  border-radius: 11px;
}

.notification-delete-btn {
  appearance: none;
  inline-size: 40px;
  block-size: 40px;
  min-width: 40px;
  min-height: 40px;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 40px;
  margin: 0;
  padding: 0 !important;
  border-radius: 12px;
  line-height: 0;
  background: color-mix(in srgb, var(--blue) 8%, transparent) !important;
}

.notification-delete-btn svg {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  transform: none;
}

.notification-empty-state {
  display: grid;
  min-height: 300px;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--muted);
  text-align: center;
}

.notification-empty-state > span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: var(--teal, #14b8a6);
  background: color-mix(in srgb, var(--teal, #14b8a6) 14%, transparent);
  font-size: 1.6rem;
  font-weight: 900;
}

.notification-empty-state h3,
.notification-empty-state p {
  margin: 0;
}

@media (max-width: 900px) {
  .communications-layout {
    grid-template-columns: 1fr;
  }

  .communications-thread,
  .conversation-list,
  .message-thread-list {
    min-height: 0;
    max-height: none;
  }

  .notification-view-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* People directory final cascade guard.
   This block intentionally remains at the end of the bundle. */
body .super-shell.is-authenticated .page-content > .people-management-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(20px, 3vw, 44px) !important;
  width: 100% !important;
  min-height: 168px !important;
  margin: 0 0 22px !important;
  padding: clamp(28px, 3vw, 42px) !important;
}

body .super-shell.is-authenticated .people-management-hero > div:first-child,
body .super-shell.is-authenticated .people-management-hero .people-hero-copy,
body .super-shell.is-authenticated .people-management-hero .page-actions {
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .super-shell.is-authenticated .people-management-hero .people-hero-count {
  width: fit-content !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 15px 0 0 !important;
  padding: 6px 11px !important;
}

body .super-shell.is-authenticated .people-management-hero .page-actions {
  display: flex !important;
  justify-content: flex-end !important;
}

body .people-invite-disclosure > summary {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) 34px !important;
  align-items: center !important;
  width: 100% !important;
}

body .people-action-menu[open]::before {
  content: none !important;
}

body .people-action-menu[open] > .people-action-backdrop {
  display: block !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

body .people-action-popover {
  top: 104px !important;
  right: 22px !important;
  bottom: 22px !important;
  left: auto !important;
  width: min(368px, calc(100vw - 32px)) !important;
  max-height: none !important;
  padding: 18px 16px !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .34) !important;
}

body .people-action-person {
  grid-template-columns: 46px minmax(0, 1fr) 40px !important;
  margin: 0 0 14px !important;
  padding: 0 0 16px !important;
}

body .people-action-close {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  background: color-mix(in srgb, var(--panel-soft) 88%, transparent) !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

body .people-action-close:hover,
body .people-action-close:focus-visible {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

@media (max-width: 760px) {
  body .super-shell.is-authenticated .page-content > .people-management-hero {
    align-items: stretch !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  body .super-shell.is-authenticated .people-management-hero .page-actions,
  body .super-shell.is-authenticated .people-management-hero .page-actions .primary-btn {
    width: 100% !important;
  }

  body .people-action-popover {
    top: auto !important;
    right: 10px !important;
    bottom: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-height: min(78vh, 680px) !important;
  }
}

/* People drawer overrides must remain last in the generated stylesheet. */
body .people-action-menu[open] > .people-action-backdrop {
  display: block !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

body .people-action-popover {
  top: 104px !important;
  right: 22px !important;
  bottom: 22px !important;
  width: min(368px, calc(100vw - 32px)) !important;
  padding: 18px 16px !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .34) !important;
}

body .people-action-close {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  background: color-mix(in srgb, var(--panel-soft) 88%, transparent) !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

body .people-action-close:hover,
body .people-action-close:focus-visible {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

@media (max-width: 760px) {
  body .people-action-popover {
    top: auto !important;
    right: 10px !important;
    bottom: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-height: min(78vh, 680px) !important;
  }
}

/* People Workspace v3 final cascade guard.
   This block intentionally stays at the end of the bundle so legacy People
   experiments cannot restore the oversized hero or the old action popover. */
body .super-shell.is-authenticated .page-content > .people-management-hero {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 0 18px !important;
  padding: 2px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .super-shell.is-authenticated .people-management-hero > div:first-child,
body .super-shell.is-authenticated .people-management-hero .people-hero-copy,
body .super-shell.is-authenticated .people-management-hero .page-actions {
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .super-shell.is-authenticated .people-management-hero h1 {
  margin: 0 0 4px !important;
  font-size: clamp(2rem, 3vw, 2.65rem) !important;
}

body .super-shell.is-authenticated .people-management-hero .people-hero-copy {
  max-width: 620px !important;
}

body .super-shell.is-authenticated .people-management-hero .people-hero-count {
  display: none !important;
}

body .super-shell.is-authenticated .people-management-hero .page-actions {
  display: flex !important;
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
}

body .super-shell.is-authenticated .people-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body .super-shell.is-authenticated .people-summary-item {
  min-height: 78px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
}

body .super-shell.is-authenticated .people-invite-disclosure:not([open]) {
  display: none !important;
}

body .super-shell.is-authenticated .people-invite-disclosure[open] {
  margin: 0 0 18px !important;
}

body .super-shell.is-authenticated .people-invite-disclosure[open] > summary {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) 34px !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 50px !important;
  padding: 10px 14px !important;
  border-radius: 12px 12px 0 0 !important;
}

body .super-shell.is-authenticated .people-directory-panel {
  padding: clamp(18px, 2vw, 24px) !important;
  border-radius: 16px !important;
}

body .super-shell.is-authenticated .people-directory-panel .module-toolbar {
  display: grid !important;
  grid-template-columns: minmax(175px, .38fr) minmax(0, 1.62fr) !important;
  align-items: end !important;
  gap: 20px !important;
  margin-bottom: 12px !important;
}

body .super-shell.is-authenticated .people-filter-form {
  grid-template-columns: minmax(220px, 1.3fr) minmax(125px, .65fr) minmax(150px, .78fr) auto auto !important;
  gap: 10px !important;
}

body .people-action-menu[open]::before {
  content: none !important;
}

body .people-action-backdrop {
  position: fixed !important;
  z-index: 245 !important;
  inset: 0 !important;
  display: none !important;
  width: 100vw !important;
  height: 100vh !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(3, 13, 27, .63) !important;
  backdrop-filter: blur(3px) !important;
  cursor: default !important;
}

body .people-action-menu[open] > .people-action-backdrop {
  display: block !important;
}

body .people-action-popover {
  top: 112px !important;
  right: 28px !important;
  bottom: 28px !important;
  left: auto !important;
  width: min(360px, calc(100vw - 36px)) !important;
  max-height: none !important;
  padding: 18px !important;
  border-radius: 18px !important;
}

body .people-action-person {
  grid-template-columns: 46px minmax(0, 1fr) 40px !important;
  margin: 0 0 14px !important;
  padding: 0 0 16px !important;
}

body .people-action-close {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 50% !important;
  color: var(--text-soft) !important;
  background: color-mix(in srgb, var(--panel-soft) 80%, transparent) !important;
  font: inherit !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

body .people-action-close:hover,
body .people-action-close:focus-visible {
  border-color: color-mix(in srgb, var(--blue, #2f86ff) 55%, var(--line)) !important;
  color: var(--text) !important;
  background: color-mix(in srgb, var(--blue, #2f86ff) 12%, var(--panel)) !important;
  outline: none !important;
}

@media (max-width: 1120px) {
  body .super-shell.is-authenticated .people-directory-panel .module-toolbar {
    grid-template-columns: 1fr !important;
  }

  body .super-shell.is-authenticated .people-filter-form {
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(130px, .65fr)) auto !important;
  }
}

@media (max-width: 760px) {
  body .super-shell.is-authenticated .page-content > .people-management-hero {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body .super-shell.is-authenticated .people-management-hero .page-actions,
  body .super-shell.is-authenticated .people-management-hero .page-actions .primary-btn {
    width: 100% !important;
  }

  body .super-shell.is-authenticated .people-summary-grid {
    display: flex !important;
    overflow-x: auto !important;
  }

  body .super-shell.is-authenticated .people-summary-item {
    min-width: 138px !important;
  }

  body .people-action-popover {
    top: auto !important;
    right: 10px !important;
    bottom: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-height: min(78vh, 680px) !important;
  }
}

/* People directory — authoritative layout.
   Keep this last: earlier generations of the People page still define some of
   these shared classes, and the directory must render as one coherent workspace. */
body .super-shell.is-authenticated .page-content > .people-management-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: clamp(20px, 3vw, 44px) !important;
  width: 100% !important;
  min-height: 168px !important;
  margin: 0 0 22px !important;
  padding: clamp(28px, 3vw, 42px) !important;
  overflow: hidden;
}

body .super-shell.is-authenticated .page-content > .people-management-hero > div:first-child {
  display: block !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .super-shell.is-authenticated .people-management-hero h1 {
  margin: 0 0 10px !important;
}

body .super-shell.is-authenticated .people-management-hero .people-hero-copy {
  display: block !important;
  width: auto !important;
  max-width: 620px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .super-shell.is-authenticated .people-management-hero .people-hero-count {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 15px 0 0 !important;
  padding: 6px 11px !important;
}

body .super-shell.is-authenticated .people-management-hero .page-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body .super-shell.is-authenticated .people-management-hero .page-actions .primary-btn {
  min-height: 48px;
  padding-inline: 22px;
  white-space: nowrap;
}

body .people-invite-disclosure {
  width: 100%;
  margin: 0 0 22px;
  scroll-margin-top: 104px;
}

body .people-invite-disclosure > summary {
  position: relative;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) 34px;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 76px;
  margin: 0;
  padding: 16px 20px;
  border: 1px solid color-mix(in srgb, var(--blue, #2f86ff) 25%, var(--line));
  border-radius: 18px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 94%, var(--blue, #2f86ff));
  box-shadow: var(--shadow-soft);
  list-style: none;
  cursor: pointer;
}

body .people-invite-disclosure > summary::-webkit-details-marker {
  display: none;
}

body .people-invite-disclosure > summary > span {
  color: var(--text);
  font-size: 1rem;
  font-weight: 850;
}

body .people-invite-disclosure > summary > small {
  min-width: 0;
  color: var(--text-soft);
  font-size: .84rem;
  text-align: right;
}

body .people-invite-disclosure > summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--blue, #2f86ff);
  background: color-mix(in srgb, var(--blue, #2f86ff) 12%, transparent);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  transition: transform .16s ease;
}

body .people-invite-disclosure[open] > summary::after {
  transform: rotate(45deg);
}

body .people-invite-disclosure > .add-employee-panel {
  margin-top: 12px;
}

@media (max-width: 760px) {
  body .super-shell.is-authenticated .page-content > .people-management-hero {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    min-height: 0 !important;
    padding: 24px !important;
  }

  body .super-shell.is-authenticated .people-management-hero .page-actions,
  body .super-shell.is-authenticated .people-management-hero .page-actions .primary-btn {
    width: 100% !important;
  }

  body .people-invite-disclosure > summary {
    grid-template-columns: minmax(0, 1fr) 34px;
  }

  body .people-invite-disclosure > summary > small {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: left;
  }

  body .people-invite-disclosure > summary::after {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 620px) {
  .communications-hero,
  .notification-hero,
  .notification-inbox-head,
  .communications-hero-actions,
  .compose-submit-row {
    align-items: stretch;
    flex-direction: column;
  }

  .communications-title-row,
  .notification-hero-copy {
    align-items: flex-start;
  }

  .communications-hero-stat {
    text-align: left;
  }

  .communications-panel-head {
    flex-direction: column;
  }

  .conversation-view-toggle {
    align-self: stretch;
  }

  .conversation-view-toggle button {
    flex: 1;
  }

  .message-bubble {
    width: 96%;
  }

  .reply-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .notification-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .notification-actions {
    grid-column: 1 / -1;
    padding-left: 56px;
    justify-content: flex-start;
  }

  .notification-category-filter select {
    width: 100%;
  }
}

/* MuoyApp grouped navigation: Home, Social, Company, Settings. */
.super-shell.is-authenticated .social-shell-nav {
  display: none !important;
}

.super-shell.is-authenticated .sidebar-layer-nav {
  display: flex !important;
  min-height: calc(100vh - 132px);
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}

.super-shell.is-authenticated .sidebar-layer-submenu {
  max-height: min(48vh, 460px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.super-shell.is-authenticated .sidebar-layer-submenu::-webkit-scrollbar {
  width: 6px;
}

.super-shell.is-authenticated .sidebar-layer-submenu::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(116, 151, 190, .28);
}

.super-shell.is-authenticated .sidebar-main-link .sidebar-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.super-shell.is-authenticated .sidebar-main-link .sidebar-chevron svg {
  width: 15px;
  height: 15px;
  display: block;
}

.sidebar-sub-link[data-menu-icon] {
  padding-left: 38px;
}

.sidebar-sub-link[data-menu-icon]::before {
  left: 11px;
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: currentColor;
  opacity: .72;
  box-shadow: none !important;
  -webkit-mask: var(--menu-icon) center / contain no-repeat;
  mask: var(--menu-icon) center / contain no-repeat;
}

.sidebar-sub-link[data-menu-icon]:hover::before,
.sidebar-sub-link[data-menu-icon][aria-current="page"]::before {
  opacity: 1;
  background: var(--superhub-nav-cyan);
}

.sidebar-sub-link[data-menu-icon="feed"] { --menu-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5A3.5 3.5 0 0 1 7.5 3h5A3.5 3.5 0 0 1 16 6.5v2A3.5 3.5 0 0 1 12.5 12H10l-4 3v-3.2A3.5 3.5 0 0 1 4 8.5z'/%3E%3Cpath d='M14 9h2.5A3.5 3.5 0 0 1 20 12.5v2A3.5 3.5 0 0 1 16.5 18H15l-3 2v-2'/%3E%3C/svg%3E"); }
.sidebar-sub-link[data-menu-icon="messages"] { --menu-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='3'/%3E%3Cpath d='m5 7 7 6 7-6'/%3E%3C/svg%3E"); }
.sidebar-sub-link[data-menu-icon="communities"], .sidebar-sub-link[data-menu-icon="people"], .sidebar-sub-link[data-menu-icon="users"] { --menu-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20v-1.5a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4V20'/%3E%3Ccircle cx='9.5' cy='7.5' r='3.5'/%3E%3Cpath d='M20.5 20v-1.2a3.2 3.2 0 0 0-2.7-3.1'/%3E%3Cpath d='M16.5 4.4a3 3 0 0 1 0 5.8'/%3E%3C/svg%3E"); }
.sidebar-sub-link[data-menu-icon="tasks"] { --menu-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11'/%3E%3Cpath d='M9 12h11'/%3E%3Cpath d='M9 18h11'/%3E%3Cpath d='m4 6 1 1 2-2'/%3E%3Cpath d='m4 12 1 1 2-2'/%3E%3Cpath d='m4 18 1 1 2-2'/%3E%3C/svg%3E"); }
.sidebar-sub-link[data-menu-icon="attendance"] { --menu-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.sidebar-sub-link[data-menu-icon="leave"] { --menu-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16 20 4'/%3E%3Cpath d='m4 16 5 1 1 5 3-8 7-10-10 7-8 3Z'/%3E%3C/svg%3E"); }
.sidebar-sub-link[data-menu-icon="overview"], .sidebar-sub-link[data-menu-icon="dashboard"] { --menu-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='8' rx='2'/%3E%3Crect x='14' y='3' width='7' height='5' rx='2'/%3E%3Crect x='14' y='12' width='7' height='9' rx='2'/%3E%3Crect x='3' y='15' width='7' height='6' rx='2'/%3E%3C/svg%3E"); }
.sidebar-sub-link[data-menu-icon="add-user"] { --menu-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 20v-1.5a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4V20'/%3E%3Ccircle cx='9' cy='7.5' r='3.5'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M16 11h6'/%3E%3C/svg%3E"); }
.sidebar-sub-link[data-menu-icon="onboarding"], .sidebar-sub-link[data-menu-icon="applications"] { --menu-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 8h6'/%3E%3Cpath d='M9 12h6'/%3E%3Cpath d='m9 16 2 2 4-5'/%3E%3C/svg%3E"); }
.sidebar-sub-link[data-menu-icon="offboarding"] { --menu-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 20v-1.5a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4V20'/%3E%3Ccircle cx='9' cy='7.5' r='3.5'/%3E%3Cpath d='M17 9l4 4'/%3E%3Cpath d='m21 9-4 4'/%3E%3C/svg%3E"); }
.sidebar-sub-link[data-menu-icon="recruitment"], .sidebar-sub-link[data-menu-icon="jobs"] { --menu-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7' width='17' height='12' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M3.5 12h17'/%3E%3C/svg%3E"); }
.sidebar-sub-link[data-menu-icon="schedule"], .sidebar-sub-link[data-menu-icon="calendar"] { --menu-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v3'/%3E%3Cpath d='M17 3v3'/%3E%3Crect x='4' y='5' width='16' height='15' rx='3'/%3E%3Cpath d='M4 10h16'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3C/svg%3E"); }
.sidebar-sub-link[data-menu-icon="company"] { --menu-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V8l8-4 8 4v12'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M16 10h.01'/%3E%3C/svg%3E"); }
.sidebar-sub-link[data-menu-icon="settings"], .sidebar-sub-link[data-menu-icon="admin"] { --menu-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .34 1.87l.04.04a2 2 0 1 1-2.83 2.83l-.04-.04A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.35 1.02V21a2 2 0 1 1-4 0v-.07A1.7 1.7 0 0 0 9 19.4a1.7 1.7 0 0 0-1.87.34l-.04.04a2 2 0 1 1-2.83-2.83l.04-.04A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.02-.35H3a2 2 0 1 1 0-4h.07A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.34-1.87l-.04-.04a2 2 0 1 1 2.83-2.83l.04.04A1.7 1.7 0 0 0 9 4.6c.38-.16.69-.37 1-.6a1.7 1.7 0 0 0 .35-1.02V3a2 2 0 1 1 4 0v.07A1.7 1.7 0 0 0 15 4.6c.37.15.68.37.96.64'/%3E%3C/svg%3E"); }
.sidebar-sub-link[data-menu-icon="permissions"] { --menu-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.5 2.9 8.5 7 10 4.1-1.5 7-5.5 7-10V6z'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/svg%3E"); }
.sidebar-sub-link[data-menu-icon="payroll"], .sidebar-sub-link[data-menu-icon="subscription"], .sidebar-sub-link[data-menu-icon="invoices"], .sidebar-sub-link[data-menu-icon="plans"] { --menu-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M7 15h4'/%3E%3C/svg%3E"); }
.sidebar-sub-link[data-menu-icon="account"] { --menu-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
.sidebar-sub-link[data-menu-icon="notifications"] { --menu-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 9a6 6 0 1 0-12 0c0 7-3 7-3 7h18s-3 0-3-7'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); }
.sidebar-sub-link[data-menu-icon="audit"] { --menu-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h6'/%3E%3C/svg%3E"); }

/* Account settings */
.account-hero {
  align-items: center;
  margin-bottom: 18px;
}

.account-avatar {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--blue) 34%, var(--line));
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, .36), transparent 28%),
    linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 18px 40px rgba(25, 119, 255, .24);
  font-size: 1.55rem;
  font-weight: 900;
}

.account-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.account-summary-card,
.account-panel {
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-strong, var(--surface)) 88%, transparent));
  box-shadow: 0 18px 54px rgba(0, 0, 0, .16);
}

.account-summary-card {
  min-height: 142px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px;
  border-radius: 24px;
}

.account-summary-card span,
.account-detail-list span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.account-summary-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: clamp(1.15rem, 1.6vw, 1.55rem);
  font-weight: 850;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-summary-card small {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.45;
}

.account-card-action {
  justify-self: start;
  min-height: 38px;
  padding-inline: 14px;
}

.account-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr);
  gap: 18px;
  align-items: start;
}

.account-panel {
  min-height: 100%;
  padding: 26px;
  border-radius: 28px;
}

.account-panel .section-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.account-panel h2 {
  margin: 0 0 6px;
}

.account-form label {
  color: var(--muted);
  font-size: .88rem;
}

.account-form input,
.account-form select {
  min-height: 52px;
}

.account-form .primary-btn {
  margin-top: 4px;
}

.account-detail-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 18px;
}

.account-detail-list > div {
  display: grid;
  grid-template-columns: minmax(130px, .42fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 58px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-strong, var(--surface)) 72%, transparent);
}

.account-detail-list strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 1rem;
}

.form-error,
.form-errors {
  color: var(--danger);
}

.form-errors {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 42%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
  font-weight: 750;
}

html[data-theme="light"] .account-summary-card,
html[data-theme="light"] .account-panel {
  background: rgba(248, 251, 253, .94);
  box-shadow: 0 18px 42px rgba(48, 68, 92, .10);
}

html[data-theme="light"] .account-detail-list > div {
  background: rgba(255, 255, 255, .72);
}

@media (max-width: 1180px) {
  .account-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .account-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-summary-grid,
  .compact-form.two.account-form {
    grid-template-columns: 1fr;
  }

  .account-detail-list > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Account center: one identity, four clear sections, no repeated summary cards. */
.account-identity-hero { display:flex; align-items:center; gap:18px; margin-bottom:22px; padding:22px 24px; border:1px solid var(--line); border-radius:24px; background:linear-gradient(120deg,color-mix(in srgb,var(--surface) 94%,transparent),color-mix(in srgb,var(--blue) 8%,var(--surface))); }
.account-identity-hero .account-avatar { width:64px; height:64px; border-radius:20px; }
.account-identity-copy { min-width:0; flex:1; }
.account-identity-copy h1 { margin:2px 0 7px; font-size:clamp(1.65rem,3vw,2.35rem); }
.account-identity-meta,.account-identity-status { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.account-identity-meta { color:var(--muted); font-size:.9rem; }
.account-meta-dot { width:4px; height:4px; border-radius:999px; background:var(--muted); }
.account-settings-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; align-items:start; }
.account-settings-nav { position:sticky; top:82px; z-index:8; display:flex; flex-wrap:wrap; gap:6px; min-width:0; padding:8px; overflow:visible; border:1px solid var(--line); border-radius:16px; background:color-mix(in srgb,var(--surface) 94%,transparent); box-shadow:0 10px 28px color-mix(in srgb,#000 12%,transparent); }
.account-settings-nav a { display:flex; align-items:center; justify-content:center; gap:8px; flex:0 0 auto; min-height:42px; padding:8px 12px; border-radius:11px; color:var(--muted); font-size:.9rem; font-weight:400; line-height:1.25; white-space:nowrap; text-decoration:none; }
.account-settings-nav a:hover,.account-settings-nav a:focus-visible { color:var(--blue); background:color-mix(in srgb,var(--blue) 10%,transparent); outline:none; }
.account-settings-nav a span { display:inline-grid; place-items:center; width:20px; min-width:20px; font-size:.9rem; line-height:1; text-align:center; filter:grayscale(1); }
.account-settings-content { display:grid; gap:18px; }
.account-settings-panel { min-width:0; padding:26px; scroll-margin-top:100px; border-radius:24px; }
.account-settings-panel [id] { scroll-margin-top:150px; }
.account-section-heading { display:flex; align-items:flex-start; gap:14px; margin-bottom:22px; }
.account-section-heading h2 { margin:2px 0 5px; }
.account-section-heading p:last-child { margin:0; }
.account-section-icon,.account-provider-icon,.account-membership-logo { display:grid; place-items:center; flex:0 0 auto; color:var(--blue); background:color-mix(in srgb,var(--blue) 12%,transparent); }
.account-section-icon { width:44px; height:44px; border-radius:14px; font-size:1.2rem; filter:grayscale(.2); }
.account-section-icon.security { color:#f5a524; background:color-mix(in srgb,#f5a524 13%,transparent); }
.account-section-icon.preferences { color:#8b5cf6; background:color-mix(in srgb,#8b5cf6 13%,transparent); }
.account-section-icon.organizations { color:var(--cyan); background:color-mix(in srgb,var(--cyan) 13%,transparent); }
.account-form-actions { display:flex; justify-content:flex-end; }
.account-form-actions .primary-btn { min-width:170px; }
.account-security-list,.account-membership-list { overflow:hidden; border:1px solid var(--line); border-radius:18px; }
.account-security-row,.account-membership-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px; min-height:70px; padding:12px 15px; background:color-mix(in srgb,var(--surface-strong,var(--surface)) 72%,transparent); }
.account-security-row + .account-security-row,.account-membership-row + .account-membership-row { border-top:1px solid var(--line); }
.account-security-row > span:nth-child(2),.account-membership-row > span:nth-child(2) { display:grid; gap:3px; min-width:0; }
.account-security-row small,.account-membership-row small,.account-empty-state small { color:var(--muted); font-size:.82rem; }
.account-provider-icon,.account-membership-logo { width:40px; height:40px; border-radius:13px; font-weight:900; }
.account-provider-icon.telegram { color:#27a7e7; background:color-mix(in srgb,#27a7e7 15%,transparent); }
.account-provider-icon.facebook { color:#1877f2; background:color-mix(in srgb,#1877f2 14%,transparent); font-size:1.25rem; }
.account-provider-icon.google { color:#4285f4; background:color-mix(in srgb,#4285f4 13%,transparent); }
.account-provider-icon.password { color:#f5a524; background:color-mix(in srgb,#f5a524 13%,transparent); }
.account-provider-icon.device { color:var(--cyan); background:color-mix(in srgb,var(--cyan) 13%,transparent); }
details.account-security-row { padding:0; display:block; }
details.account-security-row > summary { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px; min-height:70px; padding:12px 15px; }
details.account-security-row > summary::after { display:none; }
details.account-security-row > summary > span:nth-child(2) { display:grid; gap:3px; }
.account-password-form { max-width:680px; }
.account-empty-state { display:grid; justify-items:center; gap:7px; padding:28px; text-align:center; }
.account-empty-state > span { font-size:1.8rem; filter:grayscale(1); }
.account-plan-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }
.account-plan-heading { margin:22px 0 -4px; }
.account-plan-strip > div { display:grid; gap:5px; padding:14px; border:1px solid var(--line); border-radius:15px; }
.account-plan-strip span { color:var(--muted); font-size:.78rem; font-weight:750; }
.account-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.account-detail-grid > div { display:grid; gap:5px; padding:14px; border:1px solid var(--line); border-radius:15px; }
.account-detail-grid span { color:var(--muted); font-size:.78rem; font-weight:750; }
.account-subsection-form { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.account-check-field > span:last-child { display:flex; align-items:center; gap:8px; min-height:44px; }
.account-check-field input[type="checkbox"] { width:18px; height:18px; margin:0; }
.account-tool-list { overflow:hidden; border:1px solid var(--line); border-radius:18px; }
.account-tool-list > a,.account-tool-list > div { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px; min-height:70px; padding:12px 15px; color:inherit; background:color-mix(in srgb,var(--surface-strong,var(--surface)) 72%,transparent); text-decoration:none; }
.account-tool-list > * + * { border-top:1px solid var(--line); }
.account-tool-list > a:hover { background:color-mix(in srgb,var(--blue) 8%,var(--surface)); }
.account-tool-list > a > span:nth-child(2),.account-tool-list > div > span:nth-child(2) { display:grid; gap:3px; min-width:0; }
.account-tool-list small { color:var(--muted); font-size:.82rem; }
.organization-attendance-start { display:grid; gap:12px; margin:4px 0 8px; padding:18px; border:1px solid var(--line); border-radius:18px; }
.organization-attendance-start legend { padding:0 7px; font-weight:700; }
.organization-attendance-choice { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:10px; padding:13px; border:1px solid var(--line); border-radius:14px; cursor:pointer; }
.organization-attendance-choice > span { display:grid; gap:4px; }
.organization-attendance-choice small { color:var(--muted); }
.organization-attendance-choice input,.organization-reminder-choice input,.organization-working-days input { width:18px; height:18px; margin:2px 0 0; }
.organization-attendance-hours { display:grid; gap:12px; padding:15px; border-radius:14px; background:color-mix(in srgb,var(--blue) 6%,var(--surface)); }
.organization-working-days { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:8px; }
.organization-working-days label,.organization-reminder-choice { display:flex; align-items:center; gap:7px; }
.attendance-onboarding-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; margin-bottom:18px; padding:18px 20px; border:1px solid color-mix(in srgb,var(--blue) 38%,var(--line)); border-radius:18px; background:color-mix(in srgb,var(--blue) 8%,var(--surface)); }
.attendance-onboarding-card h2,.attendance-onboarding-card p { margin:3px 0; }
.attendance-onboarding-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:color-mix(in srgb,var(--blue) 16%,transparent); font-size:1.35rem; }
.attendance-onboarding-checks { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.attendance-onboarding-checks span { padding:5px 9px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.76rem; }
.attendance-onboarding-checks .is-complete { color:var(--success); }
.attendance-setup-status-card { display:grid; gap:8px; padding:14px; border:1px solid var(--line); border-radius:14px; scroll-margin-top:100px; }
.attendance-setup-status-card p { margin:0; color:var(--muted); }
.attendance-mode-options { display:flex; flex-wrap:wrap; gap:10px 18px; }
.attendance-mode-options label { display:flex; align-items:center; gap:7px; }
@media (max-width:760px) { .attendance-onboarding-card { grid-template-columns:auto 1fr; } .attendance-onboarding-card .primary-btn { grid-column:1/-1; width:100%; } }
.account-organization-actions { justify-content:flex-end; margin-top:18px; }
html[data-theme="light"] .account-identity-hero,html[data-theme="light"] .account-settings-nav,html[data-theme="light"] .account-settings-panel { background-color:rgba(255,255,255,.92); box-shadow:0 16px 38px rgba(48,68,92,.08); }
@media (max-width:980px) {
  .account-settings-nav { position:sticky; top:72px; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:none; }
}
@media (max-width:680px) {
  .account-identity-hero { align-items:flex-start; padding:17px; }
  .account-identity-status { display:none; }
  .account-settings-panel { padding:18px; }
  .account-section-icon { width:40px; height:40px; }
  .account-security-row,.account-membership-row,details.account-security-row > summary { grid-template-columns:auto minmax(0,1fr); }
  .account-security-row > :last-child,.account-membership-row > :last-child,details.account-security-row > summary > :last-child { grid-column:2; justify-self:start; }
  .account-plan-strip { grid-template-columns:1fr; }
  .account-detail-grid { grid-template-columns:1fr; }
  .account-form-actions .primary-btn,.account-organization-actions > * { width:100%; }
}

/* Simple system typography, restored sidebar collapse, and PeopleHub polish. */
:root {
  --font-latin: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-khmer: "Noto Sans Khmer", "Khmer OS Siemreap", "Khmer OS Battambang", var(--font-latin);
  --font-body: var(--font-latin);
  --font-ui: var(--font-latin);
  --sh-font: var(--font-latin);
  --superhub-sidebar-expanded: 248px;
  --superhub-sidebar-collapsed: 84px;
}

html[lang^="km"] {
  --font-body: var(--font-khmer);
  --font-ui: var(--font-khmer);
  --sh-font: var(--font-khmer);
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--font-ui) !important;
}

.super-shell.is-authenticated {
  --superhub-sidebar-width: var(--superhub-sidebar-expanded) !important;
}

.super-shell.is-authenticated.sidebar-collapsed {
  --superhub-sidebar-width: var(--superhub-sidebar-collapsed) !important;
}

.super-shell.is-authenticated .topbar,
.super-shell.is-authenticated .page-content,
.super-shell.is-authenticated .sidebar {
  transition: left .18s ease, margin-left .18s ease, width .18s ease, padding .18s ease;
}

.super-shell.is-authenticated .sidebar,
.super-shell.is-authenticated.sidebar-collapsed .sidebar {
  overflow-x: hidden !important;
  width: var(--superhub-sidebar-width) !important;
  border-right: 0 !important;
  scrollbar-color: transparent transparent;
}

.super-shell.is-authenticated .sidebar:hover,
.super-shell.is-authenticated .sidebar:focus-within {
  scrollbar-color: rgba(116, 151, 190, .22) transparent;
}

.super-shell.is-authenticated .sidebar::-webkit-scrollbar {
  width: 6px !important;
}

.super-shell.is-authenticated .sidebar::-webkit-scrollbar-track {
  background: transparent !important;
}

.super-shell.is-authenticated .sidebar::-webkit-scrollbar-thumb {
  background: transparent !important;
  border: 0 !important;
}

.super-shell.is-authenticated .sidebar:hover::-webkit-scrollbar-thumb,
.super-shell.is-authenticated .sidebar:focus-within::-webkit-scrollbar-thumb {
  background: rgba(116, 151, 190, .22) !important;
}

.super-shell.is-authenticated.sidebar-collapsed:not(.sidebar-hover-locked) .sidebar:hover,
.super-shell.is-authenticated.sidebar-collapsed:not(.sidebar-hover-locked) .sidebar:focus-within {
  width: var(--superhub-sidebar-expanded) !important;
  box-shadow: 18px 0 46px rgba(0, 0, 0, .22) !important;
}

.super-shell.is-authenticated .sidebar-layer-nav {
  min-height: calc(100vh - 176px) !important;
}

.super-shell.is-authenticated .sidebar-toggle {
  display: inline-flex !important;
  width: calc(100% - 8px) !important;
  min-height: 42px !important;
  margin: 14px 4px 0 !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  color: #9fb4cf !important;
  background: rgba(11, 31, 52, .68) !important;
  border: 1px solid rgba(116, 151, 190, .16) !important;
  box-shadow: none !important;
}

.super-shell.is-authenticated .collapse-mini {
  display: none !important;
}

.super-shell.is-authenticated .sidebar .sidebar-layer-list {
  width: calc(100% + 28px);
  max-width: none;
  margin-inline: -14px;
}

.super-shell.is-authenticated .sidebar .sidebar-layer-nav,
.super-shell.is-authenticated .sidebar .sidebar-layer-list,
.super-shell.is-authenticated .sidebar .sidebar-primary-main,
.super-shell.is-authenticated .sidebar .sidebar-primary-bottom,
.super-shell.is-authenticated .sidebar .sidebar-layer-item,
.super-shell.is-authenticated .sidebar .sidebar-layer-dropdown,
.super-shell.is-authenticated .sidebar .sidebar-layer-submenu {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.super-shell.is-authenticated .sidebar .sidebar-layer-item,
.super-shell.is-authenticated .sidebar .sidebar-layer-dropdown {
  width: 100%;
  min-width: 0;
}

.super-shell.is-authenticated .sidebar .sidebar-main-link {
  width: 100%;
  min-height: 50px;
  padding-inline: 20px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.super-shell.is-authenticated .sidebar .sidebar-main-link:hover,
.super-shell.is-authenticated .sidebar .sidebar-main-link[aria-current="page"],
.super-shell.is-authenticated .sidebar .sidebar-layer-dropdown[open] > .sidebar-main-link {
  border: 0 !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--superhub-nav-blue) 12%, transparent) !important;
  box-shadow: none !important;
}

.super-shell.is-authenticated .sidebar .sidebar-layer-dropdown[open] > .sidebar-main-link {
  margin-bottom: 6px;
}

.super-shell.is-authenticated .sidebar .sidebar-main-link .sidebar-chevron,
.super-shell.is-authenticated .sidebar .sidebar-layer-dropdown[open] > .sidebar-main-link .sidebar-chevron {
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.super-shell.is-authenticated .sidebar .sidebar-layer-submenu {
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.super-shell.is-authenticated .sidebar .sidebar-sub-link {
  width: 100%;
  min-height: 42px;
  padding: 10px 18px 10px 58px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.super-shell.is-authenticated .sidebar .sidebar-sub-link:hover,
.super-shell.is-authenticated .sidebar .sidebar-sub-link[aria-current="page"] {
  border: 0 !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--superhub-nav-blue) 18%, transparent) !important;
  box-shadow: none !important;
}

.super-shell.is-authenticated .sidebar .sidebar-sub-link[data-menu-icon] {
  padding-left: 58px !important;
}

.super-shell.is-authenticated .sidebar .sidebar-sub-link[data-menu-icon]::before {
  left: 28px !important;
}

.super-shell.is-authenticated .sidebar .sidebar-subheading {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar {
  color: #24374f !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-main-link {
  color: #405673 !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-main-link:hover,
html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-main-link[aria-current="page"],
html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-layer-dropdown[open] > .sidebar-main-link {
  color: #12243a !important;
  background: rgba(46, 128, 224, .18) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-main-link .nav-icon {
  color: #59718f !important;
  background: rgba(39, 103, 177, .12) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-main-link:hover .nav-icon,
html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-main-link[aria-current="page"] .nav-icon,
html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-layer-dropdown[open] > .sidebar-main-link .nav-icon {
  color: #ffffff !important;
  background: linear-gradient(135deg, #3190ee, #36bfd0) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-chevron {
  color: #526b8a !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-subheading {
  color: #526982 !important;
  background: none !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-sub-link {
  color: #4b6380 !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-sub-link::before {
  color: #607895 !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-sub-link:hover,
html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-sub-link[aria-current="page"] {
  color: #15304d !important;
  background: rgba(46, 128, 224, .16) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-sub-link:hover::before,
html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-sub-link[aria-current="page"]::before {
  background: #118ebd !important;
  color: #118ebd !important;
}

.super-shell.is-authenticated .sidebar .sidebar-primary-bottom {
  padding-top: 0 !important;
}

.super-shell.is-authenticated.sidebar-collapsed.sidebar-hover-locked .sidebar,
.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) {
  padding-inline: 12px !important;
  --superhub-collapsed-rail-inner: calc(var(--superhub-sidebar-collapsed) - 24px);
}

.super-shell.is-authenticated.sidebar-collapsed.sidebar-hover-locked .sidebar .sidebar-brand,
.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-brand {
  justify-content: center;
  gap: 0;
  margin-inline: 0;
}

.super-shell.is-authenticated.sidebar-collapsed.sidebar-hover-locked .sidebar .sidebar-brand .brand-copy,
.super-shell.is-authenticated.sidebar-collapsed.sidebar-hover-locked .sidebar .sidebar-brand .brand-wordmark,
.super-shell.is-authenticated.sidebar-collapsed.sidebar-hover-locked .sidebar .sidebar-main-link > span:not(.nav-icon):not(.sidebar-chevron),
.super-shell.is-authenticated.sidebar-collapsed.sidebar-hover-locked .sidebar .sidebar-chevron,
.super-shell.is-authenticated.sidebar-collapsed.sidebar-hover-locked .sidebar .sidebar-layer-submenu,
.super-shell.is-authenticated.sidebar-collapsed.sidebar-hover-locked .sidebar .collapse-full,
.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-brand .brand-copy,
.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-brand .brand-wordmark,
.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-main-link > span:not(.nav-icon):not(.sidebar-chevron),
.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-chevron,
.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-layer-submenu,
.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .collapse-full {
  display: none !important;
}

.super-shell.is-authenticated.sidebar-collapsed.sidebar-hover-locked .sidebar .collapse-mini,
.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .collapse-mini {
  display: inline !important;
}

.super-shell.is-authenticated.sidebar-collapsed.sidebar-hover-locked .sidebar .sidebar-layer-list,
.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-layer-list {
  width: calc(100% + 24px);
  max-width: none;
  margin-inline: -12px;
  justify-items: stretch;
  overflow: hidden;
}

.super-shell.is-authenticated.sidebar-collapsed.sidebar-hover-locked .sidebar .sidebar-layer-item,
.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-layer-item {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.super-shell.is-authenticated.sidebar-collapsed.sidebar-hover-locked .sidebar .sidebar-layer-dropdown,
.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-layer-dropdown {
  width: 100%;
  max-width: none;
  min-width: 0;
  overflow: hidden;
}

.super-shell.is-authenticated.sidebar-collapsed.sidebar-hover-locked .sidebar .sidebar-main-link,
.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-main-link {
  width: 100%;
  max-width: none;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: center;
  padding-inline: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: hidden;
  margin-inline: 0;
}

.super-shell.is-authenticated.sidebar-collapsed.sidebar-hover-locked .sidebar .sidebar-main-link:hover,
.super-shell.is-authenticated.sidebar-collapsed.sidebar-hover-locked .sidebar .sidebar-main-link[aria-current="page"],
.super-shell.is-authenticated.sidebar-collapsed.sidebar-hover-locked .sidebar .sidebar-layer-dropdown[open] > .sidebar-main-link,
.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-main-link:hover,
.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-main-link[aria-current="page"],
.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-layer-dropdown[open] > .sidebar-main-link {
  border: 0 !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--superhub-nav-blue) 12%, transparent) !important;
  box-shadow: none !important;
}

.super-shell.is-authenticated.sidebar-collapsed.sidebar-hover-locked .sidebar .sidebar-layer-dropdown[open] > .sidebar-main-link,
.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-layer-dropdown[open] > .sidebar-main-link {
  margin-bottom: 0;
}

.super-shell.is-authenticated.sidebar-collapsed.sidebar-hover-locked .sidebar .sidebar-main-link::before,
.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-main-link::before {
  inset: 10px auto 10px 0;
}

.super-shell.is-authenticated.sidebar-collapsed.sidebar-hover-locked .sidebar .sidebar-primary-bottom,
.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-primary-bottom {
  width: 100%;
  max-width: var(--superhub-collapsed-rail-inner);
  margin-inline: auto;
}

.super-shell.is-authenticated.sidebar-collapsed.sidebar-hover-locked .sidebar .sidebar-toggle,
.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-toggle {
  width: 46px !important;
  max-width: 46px !important;
  min-width: 46px !important;
  padding: 0 !important;
  margin-inline: auto !important;
  overflow: hidden;
}

.people-directory-hero {
  min-height: auto !important;
  align-items: center;
  padding: 34px !important;
  border-radius: 24px !important;
}

.people-directory-hero h1 {
  font-size: 3rem !important;
  letter-spacing: 0 !important;
}

.people-directory-hero .page-actions {
  align-items: center;
  flex-wrap: wrap;
}

.people-directory-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 24px;
}

.people-directory-stats .action-card {
  min-height: 128px;
  padding: 22px !important;
  border-radius: 20px !important;
  background: linear-gradient(160deg, rgba(18, 43, 67, .94), rgba(11, 31, 51, .84)) !important;
}

.people-directory-stats .action-card strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 2.35rem !important;
  line-height: 1.05;
}

.add-employee-panel,
.people-directory-panel {
  overflow: visible;
  border-radius: 24px !important;
}

.employee-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
  padding: 5px;
  border: 1px solid rgba(116, 151, 190, .18);
  border-radius: 15px;
  background: rgba(7, 21, 36, .3);
}

.employee-mode-option {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.employee-mode-option > span {
  font-size: 1.05rem;
  color: currentColor;
}

.employee-mode-option.is-active {
  border-color: rgba(61, 151, 255, .55);
  background: linear-gradient(135deg, rgba(26, 91, 192, .52), rgba(31, 131, 232, .34));
  color: var(--text);
  box-shadow: inset 3px 0 0 #38a3ff;
}

.field-optional {
  color: var(--muted);
  font: inherit;
  font-weight: 500;
}

.employee-create-form .employee-search-panel {
  display: grid;
  gap: 12px;
  padding: 16px !important;
  border: 1px solid rgba(116, 151, 190, .16) !important;
  border-radius: 18px !important;
  background: rgba(7, 21, 36, .28) !important;
}

@media (max-width: 680px) {
  .employee-mode-switch {
    grid-template-columns: 1fr;
  }
}

.employee-create-form .inline-panel-heading {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.employee-create-form .inline-panel-heading strong,
.employee-create-form .inline-panel-heading small {
  display: block;
}

.employee-create-form .inline-panel-heading small {
  margin-top: 4px;
  color: var(--muted);
}

.employee-create-form .user-result-card,
.employee-create-form .employee-selected-card,
.employee-create-form .employee-create-fallback {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(116, 151, 190, .18);
  border-radius: 12px;
  background: rgba(11, 31, 52, .55);
  color: var(--text);
  text-align: left;
}

.employee-create-form .user-result-card {
  cursor: pointer;
}

.employee-create-form .user-result-card:hover {
  border-color: rgba(74, 157, 255, .38);
  background: rgba(18, 43, 70, .78);
}

.employee-create-form .user-result-avatar,
.employee-create-form .employee-selected-avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff;
  font-weight: 800;
}

.employee-create-form .user-result-card strong,
.employee-create-form .user-result-card small,
.employee-create-form .employee-selected-card strong,
.employee-create-form .employee-selected-card small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-create-form .user-result-card small,
.employee-create-form .employee-selected-card small {
  margin-top: 3px;
  color: var(--muted);
}

.employee-create-form .user-result-card em {
  color: var(--blue-2);
  font-style: normal;
  font-weight: 700;
}

.employee-create-form .employee-create-fallback {
  grid-template-columns: minmax(0, 1fr) auto;
  background: rgba(30, 123, 255, .08);
}

.employee-create-form .employee-mode-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  min-height: 0 !important;
  margin: 20px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

.employee-create-form .employee-mode-card {
  min-height: 92px !important;
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  gap: 6px 14px !important;
  align-items: center !important;
  padding: 16px !important;
  border: 1px solid rgba(116, 151, 190, .18) !important;
  border-radius: 18px !important;
  color: var(--text) !important;
  background: rgba(11, 31, 52, .55) !important;
  box-shadow: none !important;
}

.employee-create-form .employee-mode-card:hover {
  transform: translateY(-1px);
  border-color: rgba(74, 157, 255, .30) !important;
  background: rgba(18, 43, 70, .76) !important;
}

.employee-create-form .employee-mode-card.active {
  color: #eef7ff !important;
  border-color: rgba(74, 157, 255, .45) !important;
  background: linear-gradient(160deg, rgba(28, 82, 151, .46), rgba(16, 42, 70, .82)) !important;
}

.employee-create-form .employee-mode-card .mode-icon {
  grid-row: 1 / span 2;
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  color: #7eb9ff !important;
  background: rgba(74, 157, 255, .12) !important;
  box-shadow: none !important;
  font-size: 1.1rem !important;
}

.employee-create-form .employee-mode-card.active .mode-icon {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--blue), var(--cyan)) !important;
  transform: none !important;
}

.employee-create-form .employee-mode-card strong {
  align-self: end;
  font-size: .98rem !important;
}

.employee-create-form .employee-mode-card small {
  align-self: start;
  margin: 0 !important;
  color: var(--muted) !important;
}

.employee-create-form .mode-panel[data-existing-user-panel],
.employee-create-form .mode-panel[data-new-user-fields] {
  padding: 16px !important;
  border-radius: 18px !important;
  border-color: rgba(116, 151, 190, .16) !important;
  background: rgba(7, 21, 36, .28) !important;
}

.employee-create-form .compact-form.three.no-card,
.employee-create-form .employee-profile-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.people-directory-panel .module-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 680px);
  gap: 18px;
  align-items: end;
  margin-bottom: 18px;
}

.people-filter-form {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(150px, .75fr) auto;
  gap: 12px;
  align-items: end;
}

.people-directory-table {
  border-radius: 18px !important;
  background: rgba(8, 25, 43, .58);
}

.people-directory-table table {
  min-width: 980px;
}

.people-directory-table th,
.people-directory-table td {
  padding: 15px 16px !important;
}

.people-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.people-invite-qr-details .compact-popover {
  right: 0;
  width: min(560px, calc(100vw - var(--superhub-sidebar-width) - 90px));
}

.people-invite-qr-details {
  position: relative;
}

.invite-qr-popover {
  display: grid;
  gap: 12px;
  max-width: 360px;
}

.employee-invite-qr {
  width: min(220px, 100%);
  aspect-ratio: 1;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
  justify-self: center;
}

.company-invite-card {
  grid-column: 1 / -1;
}

.company-invite-share-layout {
  display: grid;
  grid-template-columns: minmax(240px, .9fr) 184px minmax(360px, 1.2fr);
  gap: 24px;
  align-items: center;
}

.company-invite-copy-block {
  max-width: 520px;
}

.company-invite-copy-block h3 {
  margin-bottom: 8px;
}

.company-invite-copy-block p {
  margin: 0;
  max-width: 58ch;
}

.company-invite-qr-panel {
  display: grid;
  place-items: center;
}

.company-invite-qr {
  width: 168px;
  aspect-ratio: 1;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .18);
}

.company-invite-share-copy {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.company-invite-field-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.invite-link-input {
  width: 100%;
  min-width: 0;
  font-size: 12px;
  min-height: 42px;
}

.invite-expiry {
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}

.invite-qr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.invite-qr-actions .btn,
.invite-qr-actions .inline-action-form,
.invite-qr-actions .inline-action-form .btn {
  flex: 0 0 auto;
}

@media (max-width: 1180px) {
  .company-invite-share-layout {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .company-invite-copy-block {
    grid-column: 1 / -1;
    max-width: none;
  }
}

@media (max-width: 720px) {
  .company-invite-share-layout {
    grid-template-columns: 1fr;
  }

  .company-invite-qr-panel {
    justify-items: start;
  }

  .company-invite-field-row {
    align-items: start;
    flex-direction: column;
  }

  .invite-expiry {
    text-align: left;
    white-space: normal;
  }

  .invite-qr-actions .btn,
  .invite-qr-actions .inline-action-form,
  .invite-qr-actions .inline-action-form .btn {
    width: 100%;
  }
}

.inline-action-form {
  display: inline-flex;
  margin: 0;
}

html[data-theme="light"] .people-directory-stats .action-card,
html[data-theme="light"] .employee-mode-switch,
html[data-theme="light"] .employee-create-form .employee-mode-card,
html[data-theme="light"] .employee-create-form .mode-panel[data-existing-user-panel],
html[data-theme="light"] .employee-create-form .mode-panel[data-new-user-fields],
html[data-theme="light"] .employee-create-form .employee-search-panel,
html[data-theme="light"] .employee-create-form .user-result-card,
html[data-theme="light"] .employee-create-form .employee-selected-card,
html[data-theme="light"] .employee-create-form .employee-create-fallback {
  background: rgba(255, 255, 255, .76) !important;
}

html[data-theme="light"] .employee-mode-option.is-active,
html[data-theme="light"] .employee-create-form .employee-mode-card.active {
  background: linear-gradient(160deg, rgba(232, 242, 255, .98), rgba(255, 255, 255, .84)) !important;
  border-color: rgba(31, 111, 229, .34) !important;
}

@media (max-width: 1100px) {
  .people-directory-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .people-directory-panel .module-toolbar,
  .people-filter-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .super-shell.is-authenticated,
  .super-shell.is-authenticated.sidebar-collapsed {
    --superhub-sidebar-width: var(--superhub-sidebar-expanded) !important;
  }

  .super-shell.is-authenticated .sidebar-toggle {
    display: none !important;
  }

  .people-directory-hero {
    grid-template-columns: 1fr !important;
    padding: 24px !important;
  }

  .people-directory-hero h1 {
    font-size: 2.35rem !important;
  }

  .employee-create-form .employee-mode-grid,
  .employee-create-form .compact-form.three.no-card,
  .employee-create-form .employee-profile-grid {
    grid-template-columns: 1fr !important;
  }

  .employee-create-form .employee-profile-grid .primary-btn,
  .employee-create-form .span-2 {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 620px) {
  .people-directory-stats {
    grid-template-columns: 1fr !important;
  }

  .people-directory-hero .page-actions {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
  }

  .people-directory-hero h1,
  .people-directory-stats .action-card strong {
    font-size: 2rem !important;
  }
}

/* Light theme cleanup: keep shared cards, TaskHub lanes, and sidebar controls from
   inheriting the dark glass surfaces used by the default theme. */
html[data-theme="light"] .super-shell.is-authenticated .sidebar {
  background:
    linear-gradient(180deg, rgba(247, 251, 255, .94), rgba(229, 240, 252, .9)) !important;
  color: #24374f !important;
  box-shadow: 12px 0 34px rgba(65, 91, 125, .08) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-layer-list,
html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-layer-submenu,
html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-layer-item,
html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-layer-dropdown,
html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-primary-main,
html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-primary-bottom {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-subheading {
  color: #64758d !important;
  background: transparent !important;
  border: 0 !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-main-link,
html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-sub-link {
  color: #536982 !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-main-link:hover,
html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-main-link[aria-current="page"],
html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-layer-dropdown[open] > .sidebar-main-link,
html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-sub-link:hover,
html[data-theme="light"] .super-shell.is-authenticated .sidebar .sidebar-sub-link[aria-current="page"] {
  color: #17324f !important;
  background: rgba(50, 139, 232, .15) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar-toggle,
html[data-theme="light"] .super-shell.is-authenticated .collapse-pill {
  color: #48627f !important;
  background: rgba(255, 255, 255, .84) !important;
  border-color: #cbd9e8 !important;
  box-shadow: 0 12px 28px rgba(55, 83, 116, .10) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar-toggle:hover,
html[data-theme="light"] .super-shell.is-authenticated .collapse-pill:hover {
  color: #15304d !important;
  background: #ffffff !important;
  border-color: #aebfd2 !important;
}

html[data-theme="light"] .board .column,
html[data-theme="light"] .column {
  color: #102342 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(247, 251, 255, .9)) !important;
  border-color: #d8e4f2 !important;
  box-shadow: 0 18px 46px rgba(50, 78, 112, .12) !important;
}

html[data-theme="light"] .column h2,
html[data-theme="light"] .column h2 strong {
  color: #142844 !important;
}

html[data-theme="light"] .column h2 span {
  background: rgba(36, 117, 224, .12) !important;
}

html[data-theme="light"] .column.amber h2 span {
  background: rgba(245, 158, 11, .14) !important;
}

html[data-theme="light"] .column.purple h2 span {
  background: rgba(124, 92, 255, .13) !important;
}

html[data-theme="light"] .column.green h2 span {
  background: rgba(16, 185, 129, .13) !important;
}

html[data-theme="light"] .task-card {
  color: #1c314d !important;
  background: rgba(255, 255, 255, .94) !important;
  border-color: #d7e2f1 !important;
  box-shadow: 0 10px 26px rgba(50, 78, 112, .08) !important;
}

html[data-theme="light"] .empty-lane {
  color: #6b7d95 !important;
  background: rgba(247, 251, 255, .88) !important;
  border-color: #d8e4f2 !important;
}

/* Final topbar logout alignment: icon and label stay in one row without
   letting translated text bleed outside the button boundary. */
.super-shell.is-authenticated .topbar-actions > a.logout-btn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 128px !important;
  max-width: 148px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 16px !important;
  gap: 8px !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.super-shell.is-authenticated .topbar-actions > a.logout-btn .nav-svg {
  display: block !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  align-self: center !important;
}

.super-shell.is-authenticated .topbar-actions > a.logout-btn span {
  display: inline-block !important;
  min-width: 0 !important;
  max-width: 88px !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: .9rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme="light"] .super-shell.is-authenticated .topbar-actions > a.logout-btn {
  color: #b43249 !important;
}

@media (max-width: 1180px) {
  .super-shell.is-authenticated .topbar-actions > a.logout-btn {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    padding: 0 !important;
  }

  .super-shell.is-authenticated .topbar-actions > a.logout-btn span {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .super-shell.is-authenticated .topbar-actions > a.logout-btn {
    display: none !important;
  }
}

/* Final topbar search layout: stable icon/input/kbd alignment across themes. */
.super-shell.is-authenticated .topbar-search {
  box-sizing: border-box !important;
  display: flex !important;
  flex: 1 1 460px !important;
  align-items: center !important;
  width: auto !important;
  min-width: 260px !important;
  max-width: 620px !important;
  height: 52px !important;
  margin: 0 auto 0 0 !important;
  padding: 0 12px 0 16px !important;
  gap: 12px !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

.super-shell.is-authenticated .topbar-search-icon {
  display: block !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  color: currentColor !important;
}

.super-shell.is-authenticated .topbar-search input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1.2 !important;
}

.super-shell.is-authenticated .topbar-search input:focus {
  outline: 0 !important;
  box-shadow: none !important;
}

.super-shell.is-authenticated .topbar-search-kbd {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 52px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html[data-theme="light"] .super-shell.is-authenticated .topbar-search {
  color: #5f728d !important;
  background: rgba(248, 251, 254, .92) !important;
  border-color: rgba(75, 98, 128, .24) !important;
  box-shadow: 0 10px 24px rgba(48, 68, 92, .08) !important;
}

@media (max-width: 1180px) {
  .super-shell.is-authenticated .topbar-search {
    flex-basis: 320px !important;
    min-width: 220px !important;
    max-width: 420px !important;
  }
}

@media (max-width: 900px) {
  .super-shell.is-authenticated .topbar-search {
    display: none !important;
  }
}

/* Native select popups need explicit colors because browsers may paint the
   dropdown list with a different theme than the closed control. */
select,
.language-select {
  color-scheme: dark;
}

select option,
.language-select option {
  color: #eaf3ff;
  background-color: #0b2138;
}

select option:checked,
.language-select option:checked {
  color: #ffffff;
  background-color: #1f7ce8;
}

/* Compact authenticated chrome: keep MuoyApp visible beside the hamburger. */
@media (max-width: 900px) {
  .super-shell.is-authenticated .topbar {
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  .super-shell.is-authenticated .topbar .mobile-nav-toggle {
    display: inline-grid !important;
    flex: 0 0 48px !important;
  }

  .super-shell.is-authenticated .topbar > .brand {
    display: inline-flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: min(46vw, 210px) !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  .super-shell.is-authenticated .topbar > .brand .brand-mark,
  .super-shell.is-authenticated .topbar > .brand .brand-mark img {
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 13px !important;
  }

  .super-shell.is-authenticated .topbar > .brand .brand-wordmark {
    display: block !important;
    width: 190px !important;
    min-width: 0 !important;
  }

  .super-shell.is-authenticated .topbar > .brand strong {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .super-shell.is-authenticated .topbar > .brand small {
    display: none !important;
  }

  .super-shell.is-authenticated .topbar-actions {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
}

@media (max-width: 420px) {
  .super-shell.is-authenticated .topbar > .brand {
    flex: 0 0 42px !important;
    max-width: 42px !important;
    gap: 0 !important;
  }

  .super-shell.is-authenticated .topbar > .brand .brand-copy {
    display: none !important;
  }

  .super-shell.is-authenticated .topbar > .brand .brand-wordmark {
    display: none !important;
  }
}

html[data-theme="light"] select,
html[data-theme="light"] .language-select {
  color-scheme: light;
}

html[data-theme="light"] select option,
html[data-theme="light"] .language-select option {
  color: #17243a;
  background-color: #f8fbff;
}

html[data-theme="light"] select option:checked,
html[data-theme="light"] .language-select option:checked {
  color: #0d2340;
  background-color: #cfe5ff;
}

/* Global search */
.search-hero {
  align-items: stretch;
}

.search-page-form {
  align-self: center;
  display: grid;
  grid-template-columns: minmax(220px, 420px) auto;
  gap: 12px;
  width: min(100%, 620px);
}

.search-page-form input {
  min-height: 54px;
}

.search-summary-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.search-summary-card h2,
.search-result-group h2,
.empty-search-card h2 {
  margin: 0;
}

.search-groups {
  display: grid;
  gap: 20px;
}

.search-result-group {
  display: grid;
  gap: 16px;
}

.search-result-list {
  display: grid;
  gap: 10px;
}

.search-result-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 12px 14px;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-solid) 54%, transparent);
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.search-result-row:hover {
  color: var(--text);
  filter: none;
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
  background: color-mix(in srgb, var(--brand) 10%, var(--surface-solid));
}

.search-result-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  color: #ffffff;
  font-weight: 850;
  background: linear-gradient(135deg, var(--brand), var(--aqua));
  box-shadow: 0 14px 30px rgba(20, 120, 255, .18);
}

.search-result-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.search-result-copy strong,
.search-result-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-copy strong {
  color: var(--text);
  font-size: 1rem;
}

.search-result-copy small {
  color: var(--text-soft);
}

.search-result-kind {
  justify-self: end;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  font-size: .82rem;
  font-weight: 750;
  white-space: nowrap;
}

.empty-search-card {
  display: grid;
  gap: 8px;
}

html[data-theme="light"] .search-result-row {
  color: #14243a;
  background: rgba(255, 255, 255, .88);
  border-color: #d6e2f1;
  box-shadow: 0 12px 30px rgba(48, 68, 92, .08);
}

html[data-theme="light"] .search-result-row:hover {
  background: #f4f9ff;
  border-color: #9fc5ee;
}

html[data-theme="light"] .search-result-copy strong {
  color: #12233a;
}

html[data-theme="light"] .search-result-copy small,
html[data-theme="light"] .search-result-kind {
  color: #52667e;
}

@media (max-width: 760px) {
  .search-page-form,
  .search-summary-card {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .search-result-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .search-result-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .search-result-kind {
    grid-column: 2;
    justify-self: start;
  }
}

/* Mobile-aligned light theme
   Uses the calmer desktop version of the mobile login palette:
   blue/aqua brand accents, white cards, blue-gray canvas, and darker text. */
html[data-theme="light"] {
  --bg: #f3f8fc;
  --surface: rgba(255, 255, 255, .94);
  --surface-strong: #ffffff;
  --surface-solid: #ffffff;
  --panel: #ffffff;
  --panel-soft: #f7fbff;
  --line: rgba(113, 139, 169, .28);
  --border: #d7e5f2;
  --text: #102033;
  --muted: #5f7390;
  --text-soft: #5f7390;
  --blue: #2f6df6;
  --brand: #2f6df6;
  --brand-2: #2495dc;
  --cyan: #18b8ad;
  --aqua: #18b8ad;
  --green: #10b981;
  --amber: #f59e0b;
  --purple: #7c5cff;
  --danger: #df3f5a;
  --red: #df3f5a;
  --shadow: 0 28px 72px rgba(42, 73, 106, .13);
  --shadow-soft: 0 16px 42px rgba(42, 73, 106, .10);
  --page-gradient-light:
    radial-gradient(circle at 8% -8%, rgba(47, 109, 246, .16), transparent 30rem),
    radial-gradient(circle at 90% 0%, rgba(24, 184, 173, .13), transparent 28rem),
    linear-gradient(135deg, #f8fbff 0%, #edf5fb 48%, #f6fbfd 100%);
}

html[data-theme="light"] body {
  background: var(--page-gradient-light) !important;
  color: var(--text) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .topbar {
  background: rgba(255, 255, 255, .86) !important;
  border-bottom-color: rgba(126, 150, 179, .22) !important;
  box-shadow: 0 14px 34px rgba(48, 76, 108, .08) !important;
  backdrop-filter: blur(18px) saturate(1.08);
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(232, 242, 252, .82)) !important;
  border-right-color: rgba(126, 150, 179, .24) !important;
  box-shadow: 12px 0 32px rgba(48, 76, 108, .07) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar-brand,
html[data-theme="light"] .brand {
  color: var(--text) !important;
}

html[data-theme="light"] .brand-copy small,
html[data-theme="light"] .super-shell.is-authenticated .account-pill small,
html[data-theme="light"] .muted,
html[data-theme="light"] .subtext,
html[data-theme="light"] small,
html[data-theme="light"] .helper-text,
html[data-theme="light"] .muted-row {
  color: var(--muted) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .social-shell-link,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-main-link,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-sub-link,
html[data-theme="light"] .super-shell.is-authenticated .social-settings-item {
  color: #506985 !important;
}

html[data-theme="light"] .super-shell.is-authenticated .social-shell-link:hover,
html[data-theme="light"] .super-shell.is-authenticated .social-shell-link[aria-current="page"],
html[data-theme="light"] .super-shell.is-authenticated .sidebar-main-link:hover,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-main-link[aria-current="page"],
html[data-theme="light"] .super-shell.is-authenticated .sidebar-layer-dropdown[open] > .sidebar-main-link,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-sub-link:hover,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-sub-link[aria-current="page"],
html[data-theme="light"] .super-shell.is-authenticated .social-settings-item:hover {
  color: #143052 !important;
  background: rgba(47, 109, 246, .12) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar-subheading,
html[data-theme="light"] .super-shell.is-authenticated .social-settings-heading,
html[data-theme="light"] .eyebrow {
  color: #6f82a0 !important;
}

html[data-theme="light"] .pill,
html[data-theme="light"] .circle-btn,
html[data-theme="light"] .language-select,
html[data-theme="light"] .account-pill,
html[data-theme="light"] .collapse-pill,
html[data-theme="light"] .secondary-btn,
html[data-theme="light"] .soft-btn,
html[data-theme="light"] .topbar-menu-button,
html[data-theme="light"] .topbar-menu-panel,
html[data-theme="light"] .menu-row,
html[data-theme="light"] .sidebar-toggle {
  color: var(--text) !important;
  background: rgba(255, 255, 255, .84) !important;
  border-color: #d6e4f2 !important;
  box-shadow: 0 12px 28px rgba(48, 76, 108, .08) !important;
}

html[data-theme="light"] .soft-btn,
html[data-theme="light"] .text-btn,
html[data-theme="light"] a {
  color: var(--brand) !important;
}

html[data-theme="light"] .primary-btn,
html[data-theme="light"] .btn,
html[data-theme="light"] button.primary-btn,
html[data-theme="light"] .compact-form button[type="submit"] {
  color: #ffffff !important;
  background: linear-gradient(135deg, #2f6df6, #2495dc) !important;
  border-color: transparent !important;
  box-shadow: 0 16px 34px rgba(47, 109, 246, .22) !important;
}

html[data-theme="light"] .brand-mark.image-mark,
html[data-theme="light"] .sidebar-brand .brand-mark.image-mark {
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 14px 34px rgba(47, 109, 246, .18) !important;
}

html[data-theme="light"] .account-pill span,
html[data-theme="light"] .avatar,
html[data-theme="light"] .module-icon,
html[data-theme="light"] .search-result-icon {
  background: linear-gradient(135deg, #2f6df6, #18b8ad) !important;
  color: #ffffff !important;
}

html[data-theme="light"] .hero,
html[data-theme="light"] .panel,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .post-card,
html[data-theme="light"] .column,
html[data-theme="light"] .setup-card,
html[data-theme="light"] .card,
html[data-theme="light"] .module-card,
html[data-theme="light"] .dashboard-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .content-card,
html[data-theme="light"] .calendar-card,
html[data-theme="light"] .table-card,
html[data-theme="light"] .form-card,
html[data-theme="light"] .settings-card,
html[data-theme="light"] .workspace-card,
html[data-theme="light"] .action-card,
html[data-theme="light"] .mini-card,
html[data-theme="light"] .list-row,
html[data-theme="light"] .work-card,
html[data-theme="light"] .feed-card,
html[data-theme="light"] .community-card,
html[data-theme="light"] .notice-card,
html[data-theme="light"] .plan-rule-card,
html[data-theme="light"] .plan-admin-card,
html[data-theme="light"] .account-summary-card,
html[data-theme="light"] .account-panel,
html[data-theme="light"] .peoplehub-module-card,
html[data-theme="light"] .dashboard-action-card,
html[data-theme="light"] .dashboard-feed-composer,
html[data-theme="light"] .calendar-glance-panel {
  color: var(--text) !important;
  background: rgba(255, 255, 255, .92) !important;
  border-color: #d7e5f2 !important;
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme="light"] .hero.compact,
html[data-theme="light"] .workspace-hero,
html[data-theme="light"] .settings-hero,
html[data-theme="light"] .account-hero,
html[data-theme="light"] .people-directory-hero {
  background:
    linear-gradient(135deg, rgba(47, 109, 246, .12), rgba(24, 184, 173, .10)),
    rgba(255, 255, 255, .84) !important;
}

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .compact-form input,
html[data-theme="light"] .compact-form select,
html[data-theme="light"] .compact-form textarea,
html[data-theme="light"] .settings-card input,
html[data-theme="light"] .settings-card select,
html[data-theme="light"] .settings-card textarea,
html[data-theme="light"] .plan-field input,
html[data-theme="light"] .plan-field select,
html[data-theme="light"] .account-form input,
html[data-theme="light"] .account-form select {
  color: var(--text) !important;
  background: #f7fbff !important;
  border-color: #d4e2f0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #879ab2 !important;
  opacity: 1;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
  border-color: #2f6df6 !important;
  box-shadow: 0 0 0 4px rgba(47, 109, 246, .14) !important;
}

html[data-theme="light"] .responsive-table,
html[data-theme="light"] .table-card {
  background: #ffffff !important;
  border-color: #d7e5f2 !important;
}

html[data-theme="light"] table,
html[data-theme="light"] thead,
html[data-theme="light"] tbody,
html[data-theme="light"] tr,
html[data-theme="light"] th,
html[data-theme="light"] td {
  color: var(--text) !important;
  background-color: #ffffff !important;
  border-color: #e1ebf5 !important;
}

html[data-theme="light"] th {
  color: #6d8099 !important;
}

html[data-theme="light"] .badge,
html[data-theme="light"] .status-chip,
html[data-theme="light"] .reaction,
html[data-theme="light"] .check-row label,
html[data-theme="light"] .schedule-days label,
html[data-theme="light"] .legend-pill,
html[data-theme="light"] .calendar-stat,
html[data-theme="light"] .search-result-kind {
  color: var(--text) !important;
  background: rgba(47, 109, 246, .09) !important;
  border-color: #d7e5f2 !important;
}

html[data-theme="light"] .social-home-header h1,
html[data-theme="light"] .social-home-header p,
html[data-theme="light"] .social-home-header span,
html[data-theme="light"] .calendar-glance-head h2,
html[data-theme="light"] .dashboard-action-card strong,
html[data-theme="light"] .team-updates-title,
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] strong,
html[data-theme="light"] label {
  color: var(--text) !important;
}

html[data-theme="light"] .calendar-day-pill {
  color: #102033 !important;
  background: #eef5fc !important;
  border-color: #d7e5f2 !important;
}

html[data-theme="light"] .calendar-day-pill.is-today,
html[data-theme="light"] .calendar-cell.today-cell,
html[data-theme="light"] .calendar-cell.is-selected,
html[data-theme="light"] .calendar-day-pill.is-selected {
  color: #ffffff !important;
  background: linear-gradient(135deg, #2f6df6, #2495dc) !important;
  border-color: transparent !important;
}

html[data-theme="light"] .calendar-day-pill.is-muted,
html[data-theme="light"] .calendar-cell.muted-cell {
  color: #879ab2 !important;
  background: rgba(232, 240, 249, .78) !important;
}

html[data-theme="light"] .calendar-day-pill i,
html[data-theme="light"] .calendar-glance-legend i,
html[data-theme="light"] .calendar-badge {
  box-shadow: none !important;
}

html[data-theme="light"] .dashboard-feed-composer textarea,
html[data-theme="light"] .dashboard-feed-composer input {
  background: #f7fbff !important;
}

html[data-theme="light"] .danger-btn {
  color: #bd2e48 !important;
  background: rgba(223, 63, 90, .10) !important;
  border-color: rgba(223, 63, 90, .28) !important;
}

html[data-theme="light"] .success-btn,
html[data-theme="light"] .badge.green,
html[data-theme="light"] .status-chip {
  color: #087a5e !important;
  background: rgba(16, 185, 129, .12) !important;
  border-color: rgba(16, 185, 129, .24) !important;
}

html[data-theme="light"] .badge.amber {
  color: #9a5f00 !important;
  background: rgba(245, 158, 11, .14) !important;
  border-color: rgba(245, 158, 11, .24) !important;
}

html[data-theme="light"] .badge.red {
  color: #bd2e48 !important;
  background: rgba(223, 63, 90, .10) !important;
  border-color: rgba(223, 63, 90, .24) !important;
}

/* Final light-theme tightening
   Keeps the mobile-inspired palette, but removes the washed-out haze and makes
   interactive surfaces read as crisp, usable controls. */
html[data-theme="light"] {
  --bg: #f5f9fd;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-solid: #ffffff;
  --panel: #ffffff;
  --panel-soft: #f7fbff;
  --line: rgba(126, 148, 174, .30);
  --border: #d6e2ef;
  --text: #102033;
  --muted: #4f6681;
  --text-soft: #5d7089;
  --shadow: 0 18px 42px rgba(41, 63, 88, .11);
  --shadow-soft: 0 10px 28px rgba(41, 63, 88, .08);
  --page-gradient-light:
    radial-gradient(circle at 0% 0%, rgba(47, 109, 246, .10), transparent 26rem),
    radial-gradient(circle at 88% 0%, rgba(24, 184, 173, .08), transparent 28rem),
    linear-gradient(135deg, #f8fbff 0%, #eef5fb 50%, #f6fbfd 100%);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f9fd;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-solid: #ffffff;
  --panel: #ffffff;
  --panel-soft: #f7fbff;
  --line: rgba(126, 148, 174, .30);
  --border: #d6e2ef;
  --text: #102033;
  --muted: #4f6681;
  --text-soft: #5d7089;
  --blue: #2f6df6;
  --brand: #2f6df6;
  --brand-2: #2495dc;
  --cyan: #18b8ad;
  --aqua: #18b8ad;
  --green: #10b981;
  --amber: #f59e0b;
  --purple: #7c5cff;
  --danger: #df3f5a;
  --red: #df3f5a;
  --shadow: 0 18px 42px rgba(41, 63, 88, .11);
  --shadow-soft: 0 10px 28px rgba(41, 63, 88, .08);
  --page-gradient-light:
    radial-gradient(circle at 0% 0%, rgba(47, 109, 246, .10), transparent 26rem),
    radial-gradient(circle at 88% 0%, rgba(24, 184, 173, .08), transparent 28rem),
    linear-gradient(135deg, #f8fbff 0%, #eef5fb 50%, #f6fbfd 100%);
}

html[data-theme="light"] body,
html[data-theme="light"] .super-shell.is-authenticated {
  color: #102033 !important;
  background: var(--page-gradient-light) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .topbar {
  background: rgba(255, 255, 255, .92) !important;
  border-bottom-color: rgba(126, 148, 174, .24) !important;
  box-shadow: 0 8px 22px rgba(41, 63, 88, .07) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar,
html[data-theme="light"] .super-shell.is-authenticated.sidebar-collapsed .sidebar {
  background: linear-gradient(180deg, #f8fbff 0%, #edf5fb 100%) !important;
  border-right-color: rgba(126, 148, 174, .26) !important;
  box-shadow: 8px 0 24px rgba(41, 63, 88, .06) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar-brand {
  color: #102033 !important;
  background: rgba(255, 255, 255, .94) !important;
  border-color: rgba(126, 148, 174, .22) !important;
  box-shadow: 0 12px 28px rgba(41, 63, 88, .09) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .social-shell-link,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-main-link,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-sub-link,
html[data-theme="light"] .super-shell.is-authenticated .social-settings-item {
  color: #4d6380 !important;
  background: transparent !important;
  border-color: transparent !important;
}

html[data-theme="light"] .super-shell.is-authenticated .social-shell-link .nav-icon,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-main-link .nav-icon,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-sub-link .nav-icon {
  color: #71849c !important;
  background: rgba(68, 95, 126, .08) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .social-shell-link:hover,
html[data-theme="light"] .super-shell.is-authenticated .social-shell-link[aria-current="page"],
html[data-theme="light"] .super-shell.is-authenticated .sidebar-main-link:hover,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-main-link[aria-current="page"],
html[data-theme="light"] .super-shell.is-authenticated .sidebar-layer-dropdown[open] > .sidebar-main-link,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-sub-link:hover,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-sub-link[aria-current="page"],
html[data-theme="light"] .super-shell.is-authenticated .social-settings-item:hover,
html[data-theme="light"] .super-shell.is-authenticated .social-settings-item[aria-current="page"] {
  color: #102033 !important;
  background: linear-gradient(90deg, rgba(47, 109, 246, .15), rgba(24, 184, 173, .08)) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .social-shell-link:hover .nav-icon,
html[data-theme="light"] .super-shell.is-authenticated .social-shell-link[aria-current="page"] .nav-icon,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-main-link:hover .nav-icon,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-main-link[aria-current="page"] .nav-icon,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-layer-dropdown[open] > .sidebar-main-link .nav-icon {
  color: #ffffff !important;
  background: linear-gradient(135deg, #2f6df6, #18b8ad) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .social-settings-panel {
  background: rgba(255, 255, 255, .72) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="light"] .super-shell.is-authenticated .social-settings-heading,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-subheading,
html[data-theme="light"] .eyebrow {
  color: #506986 !important;
}

html[data-theme="light"] .topbar-search {
  background: #f7fbff !important;
  border-color: #d1dfed !important;
  color: #506986 !important;
  box-shadow: 0 8px 18px rgba(41, 63, 88, .06) !important;
}

html[data-theme="light"] .topbar-search input,
html[data-theme="light"] .topbar-search input:focus {
  color: #102033 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="light"] .topbar-search input::placeholder {
  color: #7f91a8 !important;
}

html[data-theme="light"] .topbar-search-kbd {
  color: #5c7089 !important;
  background: #e7eef7 !important;
}

html[data-theme="light"] .super-shell.is-authenticated .topbar-actions > .pill[data-theme-toggle],
html[data-theme="light"] .super-shell.is-authenticated .topbar-actions > .language-form .language-select,
html[data-theme="light"] .super-shell.is-authenticated .topbar-actions > .topbar-bell,
html[data-theme="light"] .super-shell.is-authenticated .topbar-actions > .account-pill,
html[data-theme="light"] .super-shell.is-authenticated .topbar-actions > a.logout-btn,
html[data-theme="light"] .collapse-pill,
html[data-theme="light"] .sidebar-toggle {
  color: #102033 !important;
  background: #ffffff !important;
  border-color: #d1dfed !important;
  box-shadow: 0 8px 18px rgba(41, 63, 88, .07) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .topbar-actions > a.logout-btn {
  color: #b92f45 !important;
}

html[data-theme="light"] .super-shell.is-authenticated .topbar-actions > .account-pill small,
html[data-theme="light"] .brand-copy small,
html[data-theme="light"] .muted,
html[data-theme="light"] .subtext,
html[data-theme="light"] small,
html[data-theme="light"] .helper-text,
html[data-theme="light"] .muted-row {
  color: #5d7089 !important;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] strong,
html[data-theme="light"] label,
html[data-theme="light"] .social-home-header h1,
html[data-theme="light"] .social-section-head h2,
html[data-theme="light"] .calendar-glance-head h2,
html[data-theme="light"] .today-panel-title strong,
html[data-theme="light"] .today-tasks-panel header strong,
html[data-theme="light"] .today-actions-panel h2,
html[data-theme="light"] .today-info-row strong,
html[data-theme="light"] .social-empty-card strong {
  color: #102033 !important;
}

html[data-theme="light"] .social-home-header p,
html[data-theme="light"] .social-home-header span,
html[data-theme="light"] .social-empty-card span,
html[data-theme="light"] .social-post-body p,
html[data-theme="light"] .today-clock-card small,
html[data-theme="light"] .today-info-row small,
html[data-theme="light"] .today-clock-card em,
html[data-theme="light"] .today-info-row em,
html[data-theme="light"] .calendar-glance-head small,
html[data-theme="light"] .today-panel-title small,
html[data-theme="light"] .today-task-row em,
html[data-theme="light"] .today-task-list p {
  color: #536985 !important;
}

html[data-theme="light"] .hero,
html[data-theme="light"] .panel,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .post-card,
html[data-theme="light"] .column,
html[data-theme="light"] .setup-card,
html[data-theme="light"] .card,
html[data-theme="light"] .module-card,
html[data-theme="light"] .dashboard-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .content-card,
html[data-theme="light"] .calendar-card,
html[data-theme="light"] .table-card,
html[data-theme="light"] .form-card,
html[data-theme="light"] .settings-card,
html[data-theme="light"] .workspace-card,
html[data-theme="light"] .action-card,
html[data-theme="light"] .mini-card,
html[data-theme="light"] .list-row,
html[data-theme="light"] .work-card,
html[data-theme="light"] .feed-card,
html[data-theme="light"] .community-card,
html[data-theme="light"] .notice-card,
html[data-theme="light"] .plan-rule-card,
html[data-theme="light"] .plan-admin-card,
html[data-theme="light"] .account-summary-card,
html[data-theme="light"] .account-panel,
html[data-theme="light"] .peoplehub-module-card,
html[data-theme="light"] .dashboard-action-card,
html[data-theme="light"] .dashboard-feed-composer,
html[data-theme="light"] .social-composer-card,
html[data-theme="light"] .social-post-list,
html[data-theme="light"] .today-panel,
html[data-theme="light"] .calendar-glance-panel {
  color: #102033 !important;
  background: #ffffff !important;
  border-color: #d8e4f0 !important;
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme="light"] .superhub-social-home {
  gap: 28px;
}

html[data-theme="light"] .social-home-feed {
  gap: 24px;
}

html[data-theme="light"] .social-composer-card {
  padding: 20px !important;
}

html[data-theme="light"] .social-composer-form input[name="body"],
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  color: #102033 !important;
  background: #f7fbff !important;
  border-color: #cfdeec !important;
}

html[data-theme="light"] .social-composer-form input[name="body"]::placeholder,
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #7c90a8 !important;
}

html[data-theme="light"] .social-composer-tags button,
html[data-theme="light"] .reaction,
html[data-theme="light"] .badge,
html[data-theme="light"] .status-chip,
html[data-theme="light"] .legend-pill,
html[data-theme="light"] .check-row label,
html[data-theme="light"] .schedule-days label {
  color: #344d6a !important;
  background: #f4f8fd !important;
  border-color: #d8e4f0 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .social-composer-tags button:hover,
html[data-theme="light"] .reaction:hover {
  color: #1556bd !important;
  background: #eaf3ff !important;
  border-color: #b9d5f5 !important;
}

html[data-theme="light"] .social-empty-card {
  background: #ffffff !important;
  border: 1px solid #d8e4f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 20px rgba(41, 63, 88, .06) !important;
}

html[data-theme="light"] .social-section-head select {
  color: #102033 !important;
  background-color: #f7fbff !important;
  border-color: #cfdeec !important;
}

html[data-theme="light"] .calendar-glance-panel {
  gap: 18px !important;
}

html[data-theme="light"] .calendar-week-strip {
  align-items: start;
}

html[data-theme="light"] .calendar-day-pill {
  width: min(58px, 100%);
  min-height: 58px;
  aspect-ratio: 1;
  color: #2f435c !important;
  background: #edf4fb !important;
  border-color: #d6e3ef !important;
  box-shadow: none !important;
}

html[data-theme="light"] .calendar-day-pill span {
  color: #657892 !important;
  opacity: 1;
}

html[data-theme="light"] .calendar-day-pill.is-today,
html[data-theme="light"] .calendar-day-pill.is-selected {
  color: #ffffff !important;
  background: linear-gradient(135deg, #2f6df6, #2495dc) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 22px rgba(47, 109, 246, .20) !important;
}

html[data-theme="light"] .calendar-day-pill.is-today span,
html[data-theme="light"] .calendar-day-pill.is-selected span {
  color: rgba(255, 255, 255, .78) !important;
}

html[data-theme="light"] .calendar-day-pill.is-muted {
  color: #8494a8 !important;
  background: #e9eff6 !important;
  opacity: 1 !important;
}

html[data-theme="light"] .calendar-day-pill em {
  bottom: 6px;
}

html[data-theme="light"] .calendar-day-pill i,
html[data-theme="light"] .calendar-glance-legend i {
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 1px #ffffff !important;
}

html[data-theme="light"] .calendar-glance-legend {
  color: #556b87 !important;
}

html[data-theme="light"] .today-info-row,
html[data-theme="light"] .today-task-row {
  color: #102033 !important;
  background: transparent !important;
  border-color: #e2ebf4 !important;
}

html[data-theme="light"] .today-actions-panel a,
html[data-theme="light"] .dashboard-action-card {
  color: #102033 !important;
  background: #f7fbff !important;
  border: 1px solid #d8e4f0 !important;
  box-shadow: 0 8px 20px rgba(41, 63, 88, .06) !important;
}

html[data-theme="light"] .today-actions-panel a:hover,
html[data-theme="light"] .dashboard-action-card:hover {
  background: #eef6ff !important;
  border-color: #b9d5f5 !important;
  transform: translateY(-1px);
}

html[data-theme="light"] .today-clock-card button,
html[data-theme="light"] .social-composer-form > button[type="submit"],
html[data-theme="light"] .primary-btn,
html[data-theme="light"] .btn,
html[data-theme="light"] button.primary-btn,
html[data-theme="light"] .compact-form button[type="submit"] {
  color: #ffffff !important;
  background: linear-gradient(135deg, #2f6df6, #2495dc) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 26px rgba(47, 109, 246, .22) !important;
}

@media (max-width: 1180px) {
  html[data-theme="light"] .calendar-day-pill {
    width: min(52px, 100%);
    min-height: 52px;
  }
}

/* Final light-theme contrast patch for secondary labels and data tables. */
html[data-theme="light"] .today-clock-card button small,
html[data-theme="light"] .today-clock-card button [data-clock-primary],
html[data-theme="light"] .hero-clock-action small,
html[data-theme="light"] .sh-sticky-clock-action small,
html[data-theme="light"] button.primary-btn small,
html[data-theme="light"] .primary-btn small,
html[data-theme="light"] .btn small {
  color: rgba(255, 255, 255, .92) !important;
  text-shadow: 0 1px 1px rgba(5, 25, 55, .22);
}

html[data-theme="light"] .today-clock-card button span,
html[data-theme="light"] .today-clock-card button strong,
html[data-theme="light"] .hero-clock-action span,
html[data-theme="light"] .sh-sticky-clock-action span,
html[data-theme="light"] button.primary-btn span,
html[data-theme="light"] .primary-btn span,
html[data-theme="light"] .btn span {
  color: #ffffff !important;
}

html[data-theme="light"] .responsive-table,
html[data-theme="light"] .responsive-table-wrap,
html[data-theme="light"] .table-card {
  background: #ffffff !important;
  border-color: #d5e2f0 !important;
}

html[data-theme="light"] .responsive-table table,
html[data-theme="light"] .responsive-table-wrap table,
html[data-theme="light"] .table-card table,
html[data-theme="light"] table.clean-table,
html[data-theme="light"] table.modern-table {
  background: #ffffff !important;
}

html[data-theme="light"] .responsive-table thead,
html[data-theme="light"] .responsive-table thead tr,
html[data-theme="light"] .responsive-table-wrap thead,
html[data-theme="light"] .responsive-table-wrap thead tr,
html[data-theme="light"] .table-card thead,
html[data-theme="light"] .table-card thead tr,
html[data-theme="light"] table.clean-table thead,
html[data-theme="light"] table.clean-table thead tr,
html[data-theme="light"] table.modern-table thead,
html[data-theme="light"] table.modern-table thead tr {
  background: #eaf2fb !important;
}

html[data-theme="light"] .responsive-table th,
html[data-theme="light"] .responsive-table-wrap th,
html[data-theme="light"] .table-card th,
html[data-theme="light"] table.clean-table th,
html[data-theme="light"] table.modern-table th {
  color: #2c4665 !important;
  background: #eaf2fb !important;
  border-bottom-color: #cfdeec !important;
  font-weight: 850 !important;
  letter-spacing: .105em;
}

html[data-theme="light"] .responsive-table td,
html[data-theme="light"] .responsive-table-wrap td,
html[data-theme="light"] .table-card td,
html[data-theme="light"] table.clean-table td,
html[data-theme="light"] table.modern-table td {
  color: #102033 !important;
  background: #ffffff !important;
  border-bottom-color: #e4edf6 !important;
}

html[data-theme="light"] .responsive-table tbody tr:hover td,
html[data-theme="light"] .responsive-table-wrap tbody tr:hover td,
html[data-theme="light"] .table-card tbody tr:hover td,
html[data-theme="light"] table.clean-table tbody tr:hover td,
html[data-theme="light"] table.modern-table tbody tr:hover td {
  background: #f6faff !important;
}

/* Final floating-clock light theme and close-control alignment patch. */
html[data-theme="light"] .sh-sticky-clock {
  color: #102033 !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(235, 245, 255, .94)) !important;
  border-color: rgba(177, 201, 229, .86) !important;
  box-shadow: 0 18px 42px rgba(46, 79, 116, .18) !important;
}

html[data-theme="light"] .sh-sticky-clock-copy span,
html[data-theme="light"] .sh-sticky-clock-copy small {
  color: #667895 !important;
}

html[data-theme="light"] .sh-sticky-clock-copy strong {
  color: #102033 !important;
}

html[data-theme="light"] .sh-sticky-clock-hide {
  color: #53667f !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 10px 24px rgba(46, 79, 116, .18) !important;
}

html[data-theme="light"] .sh-sticky-clock-restore {
  color: #102033 !important;
  background: rgba(255, 255, 255, .94) !important;
  border-color: rgba(177, 201, 229, .82) !important;
  box-shadow: 0 14px 34px rgba(46, 79, 116, .16) !important;
}

.sh-sticky-clock .sh-sticky-clock-hide {
  top: -18px !important;
  right: -16px !important;
  width: 36px !important;
  height: 36px !important;
  z-index: 3 !important;
}

.sh-sticky-clock-hide,
.dashboard-calendar-menu .icon-btn[data-calendar-menu-close],
[data-calendar-menu-close] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* Home dashboard v2: scoped clock-first layout. */
.sh-dashboard-home {
  max-width: 1500px;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 28px;
}

.sh-dashboard-home .social-home-feed {
  gap: 16px;
}

.sh-dashboard-home .social-home-header {
  padding: 6px 22px 0;
}

.sh-dashboard-home .social-home-header h1 {
  font-size: 2.25rem;
  font-weight: 780;
  line-height: 1.08;
  letter-spacing: 0;
}

.sh-clock-hero,
.sh-dashboard-action,
.sh-dashboard-home .social-post-list,
.sh-dashboard-home .today-panel {
  border: 1px solid rgba(119, 157, 203, .22);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(14, 39, 66, .84), rgba(8, 24, 42, .66));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 20px 44px rgba(0, 0, 0, .16);
}

.sh-clock-hero {
  display: grid;
  grid-template-columns: minmax(112px, 150px) minmax(0, 1fr) minmax(220px, 280px);
  gap: 26px;
  align-items: center;
  min-height: 232px;
  padding: 28px 34px;
  background:
    radial-gradient(circle at 13% 50%, rgba(58, 213, 120, .20), transparent 15rem),
    linear-gradient(145deg, rgba(14, 39, 66, .86), rgba(8, 24, 42, .70));
}

.sh-clock-orb {
  width: 138px;
  max-width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  justify-self: center;
  border: 4px solid #45d56f;
  border-radius: 50%;
  color: #efffff;
  background: radial-gradient(circle, rgba(55, 215, 112, .24), rgba(38, 180, 96, .08) 58%, rgba(9, 28, 48, .58));
  box-shadow: 0 0 38px rgba(61, 214, 118, .28), inset 0 0 30px rgba(71, 214, 119, .16);
}

.sh-clock-orb svg {
  width: 58px;
  height: 58px;
}

.sh-clock-status {
  min-width: 0;
}

.sh-clock-status p,
.sh-clock-action-panel p {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: #a7bdd6;
  font-weight: 700;
}

.sh-clock-status p span {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 50%;
  background: #42d982;
  box-shadow: 0 0 18px rgba(66, 217, 130, .36);
}

.sh-clock-status h2 {
  margin: 0;
  color: #f6fbff;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: 0;
}

.sh-clock-status > strong {
  display: block;
  margin-top: 10px;
  color: #b6c7df;
  font-size: 1rem;
  font-weight: 560;
  line-height: 1.35;
}

.sh-clock-status > strong[data-clock-primary] {
  color: #f6fbff;
  font-size: 1.28rem;
  font-weight: 760;
}

.sh-next-shift {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 18px;
  color: #f2f8ff;
}

.sh-next-shift svg,
.sh-clock-action-panel p svg {
  width: 24px;
  height: 24px;
  color: #c6d5e7;
}

.sh-next-shift small,
.sh-next-shift em {
  display: block;
  color: #9fb2ca;
  font-style: normal;
}

.sh-next-shift b {
  display: block;
  margin: 3px 0;
  color: #f6fbff;
  font-size: 1.15rem;
  line-height: 1.25;
}

.sh-clock-action-panel {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding-left: 28px;
  border-left: 1px solid rgba(151, 180, 216, .18);
  text-align: center;
}

.sh-clock-action-panel > strong {
  color: #f6fbff;
  font-size: 2.28rem;
  line-height: 1;
}

.sh-clock-action-panel > span {
  margin-bottom: 16px;
  color: #a3b8d2;
}

.sh-clock-action-panel form {
  width: 100%;
}

.sh-dashboard-clock-submit {
  width: min(100%, 248px);
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(135deg, #1b78ff, #0f68f2);
  box-shadow: 0 16px 34px rgba(20, 108, 255, .28);
  font: inherit;
  font-size: 1.16rem;
  font-weight: 780;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

.sh-dashboard-clock-submit svg {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  padding: 6px;
  border-radius: 50%;
  color: #1b78ff;
  background: #ffffff;
}

.sh-dashboard-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sh-admin-attendance {
  display: grid;
  gap: 12px;
}

.sh-admin-attendance-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px;
}

.sh-admin-attendance-head h2,
.sh-admin-attendance-head p {
  margin: 0;
}

.sh-admin-attendance-head h2 {
  color: #f3f7ff;
  font-size: 1.55rem;
  line-height: 1.15;
}

.sh-admin-attendance-head p {
  margin-top: 4px;
  color: #93a8c3;
  font-size: .84rem;
}

.sh-admin-attendance-head a {
  flex: 0 0 auto;
  color: #4a9dff;
  font-weight: 720;
  font-size: .92rem;
}

.sh-admin-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sh-admin-attendance-card {
  position: relative;
  min-height: 126px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(119, 157, 203, .22);
  border-radius: 8px;
  color: #f6fbff;
  background: linear-gradient(145deg, rgba(14, 39, 66, .76), rgba(8, 24, 42, .58));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 12px 26px rgba(0, 0, 0, .10);
  cursor: grab;
}

.sh-admin-attendance-card.is-dragging {
  opacity: .62;
  cursor: grabbing;
}

.sh-admin-card-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #246ff0, #4aa2ff);
}

.sh-admin-attendance-card.is-green .sh-admin-card-icon {
  background: linear-gradient(135deg, #30a964, #4fd38c);
}

.sh-admin-attendance-card.is-amber .sh-admin-card-icon {
  background: linear-gradient(135deg, #ee872b, #f7ad4f);
}

.sh-admin-attendance-card.is-red .sh-admin-card-icon {
  background: linear-gradient(135deg, #e84b61, #ff7d8f);
}

.sh-admin-card-icon svg {
  width: 22px;
  height: 22px;
}

.sh-admin-attendance-card small,
.sh-admin-attendance-card h3,
.sh-admin-attendance-card strong,
.sh-admin-attendance-card p {
  margin: 0;
}

.sh-admin-attendance-card small {
  display: block;
  color: #9fb3cd;
  font-size: .8rem;
  font-weight: 650;
  line-height: 1.35;
}

.sh-admin-attendance-card-link > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.sh-admin-attendance-card strong {
  display: block;
  order: 1;
  margin: 0 0 5px;
  color: #f6fbff;
  font-size: 2.05rem;
  font-weight: 820;
  line-height: 1;
}

.sh-admin-attendance-card h3 {
  order: 2;
  color: #f6fbff;
  font-size: 1.03rem;
  line-height: 1.2;
}

.sh-admin-attendance-card small {
  order: 3;
  margin-top: 6px;
}

.sh-admin-attendance-card p {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -2px;
  color: #aebfda;
}

.sh-admin-attendance-card p span,
.sh-admin-attendance-card p em {
  min-width: 0;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid rgba(119, 157, 203, .16);
  border-radius: 999px;
  background: rgba(7, 22, 38, .32);
  font-size: .72rem;
  font-style: normal;
  line-height: 1.2;
}

.sh-admin-card-toolbar {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  gap: 4px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .16s ease, transform .16s ease;
}

.sh-admin-attendance-card:hover .sh-admin-card-toolbar,
.sh-admin-attendance-card:focus-within .sh-admin-card-toolbar {
  opacity: 1;
  transform: translateY(0);
}

.sh-admin-card-toolbar button {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(119, 157, 203, .22);
  border-radius: 8px;
  color: #c9d8eb;
  background: rgba(7, 22, 38, .70);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.sh-admin-card-toolbar button:hover {
  color: #ffffff;
  border-color: rgba(74, 157, 255, .38);
  background: rgba(34, 96, 166, .24);
}

.sh-dashboard-action {
  min-height: 72px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 24px;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  color: #f6fbff;
}

.sh-dashboard-action:hover {
  color: #ffffff;
  border-color: rgba(74, 157, 255, .34);
  background: linear-gradient(145deg, rgba(17, 48, 82, .92), rgba(10, 31, 54, .74));
}

.sh-dashboard-action strong,
.sh-dashboard-action small {
  display: block;
}

.sh-dashboard-action strong {
  color: inherit;
  font-size: 1.05rem;
  line-height: 1.2;
}

.sh-dashboard-action small {
  margin-top: 3px;
  color: #9fb3cd;
  line-height: 1.3;
}

.sh-action-arrow {
  width: 22px;
  height: 22px;
  color: #9fb3cd;
}

.sh-dashboard-home .social-section-head {
  margin-top: 10px;
}

.sh-dashboard-home .social-post-list {
  overflow: hidden;
}

.sh-dashboard-messages .social-section-head {
  align-items: end;
}

.sh-dashboard-messages .social-section-head p {
  margin: 5px 0 0;
  color: #93a8c3;
  font-size: .92rem;
}

.sh-message-open-link {
  flex: 0 0 auto;
  color: #4a9dff;
  font-weight: 760;
}

.sh-message-preview-list {
  display: grid;
}

.sh-message-preview-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 88px;
  padding: 16px 18px;
  color: #f6fbff;
  border-bottom: 1px solid rgba(115, 151, 192, .13);
}

.sh-message-preview-row:last-child {
  border-bottom: 0;
}

.sh-message-preview-row:hover {
  color: #ffffff;
  background: rgba(37, 99, 235, .10);
}

.sh-message-preview-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #2276ff, #25b8db);
}

.sh-message-preview-icon svg {
  width: 22px;
  height: 22px;
}

.sh-message-preview-row small,
.sh-message-preview-row strong,
.sh-message-preview-row em {
  display: block;
  min-width: 0;
}

.sh-message-preview-row small {
  color: #8fb0d4;
  font-size: .78rem;
  font-weight: 720;
}

.sh-message-preview-row strong {
  margin-top: 3px;
  overflow: hidden;
  color: #f6fbff;
  font-size: 1rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-message-preview-row em {
  margin-top: 4px;
  overflow: hidden;
  color: #a8b9ce;
  font-size: .88rem;
  font-style: normal;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-message-preview-row > b {
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: #ffffff;
  background: #2079ff;
  font-size: .82rem;
}

.sh-message-empty-card {
  padding: 28px 24px;
}

.sh-team-composer {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) minmax(84px, 104px);
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(115, 151, 192, .13);
}

.sh-team-composer input {
  height: 44px;
  min-width: 0;
  border-color: rgba(119, 157, 203, .22);
  border-radius: 8px;
  color: #dceaff;
  background: rgba(3, 13, 24, .64);
}

.sh-team-composer button {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, #2b7dff, #1a68eb);
  font: inherit;
  font-weight: 780;
  cursor: pointer;
}

.sh-dashboard-home .social-home-today {
  gap: 14px;
}

.sh-dashboard-home .today-panel {
  border-radius: 8px;
}

.sh-dashboard-home .today-list-panel {
  padding: 0 18px;
}

.sh-dashboard-home .today-clock-card button {
  color: #ffffff;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #1b78ff, #0f68f2);
  min-height: 46px;
  flex-direction: row;
  gap: 8px;
}

.sh-dashboard-home .today-info-row strong {
  font-size: 1.02rem;
  line-height: 1.25;
}

.sh-dashboard-home .today-tasks-panel {
  min-height: 156px;
}

.sh-dashboard-home .today-task-list p {
  margin: 2px 0 0;
  line-height: 1.55;
}

html[data-theme="light"] .sh-clock-hero,
html[data-theme="light"] .sh-dashboard-action,
html[data-theme="light"] .sh-admin-attendance-card,
html[data-theme="light"] .sh-dashboard-home .social-post-list,
html[data-theme="light"] .sh-dashboard-home .today-panel {
  color: #102033 !important;
  background: #ffffff !important;
  border-color: #d8e4f0 !important;
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme="light"] .sh-clock-orb {
  color: #ffffff;
  background: radial-gradient(circle, rgba(48, 211, 122, .90), rgba(27, 165, 91, .78));
}

html[data-theme="light"] .sh-clock-status p,
html[data-theme="light"] .sh-clock-status > strong,
html[data-theme="light"] .sh-clock-action-panel p,
html[data-theme="light"] .sh-clock-action-panel > span,
html[data-theme="light"] .sh-next-shift small,
html[data-theme="light"] .sh-next-shift em,
html[data-theme="light"] .sh-dashboard-action small {
  color: #536985 !important;
}

html[data-theme="light"] .sh-clock-status h2,
html[data-theme="light"] .sh-clock-action-panel > strong,
html[data-theme="light"] .sh-next-shift b,
html[data-theme="light"] .sh-admin-attendance-head h2,
html[data-theme="light"] .sh-admin-attendance-card strong,
html[data-theme="light"] .sh-admin-attendance-card h3,
html[data-theme="light"] .sh-dashboard-action strong {
  color: #102033 !important;
}

html[data-theme="light"] .sh-clock-action-panel {
  border-left-color: #d8e4f0;
}

html[data-theme="light"] .sh-team-composer input {
  color: #102033 !important;
  background: #f7fbff !important;
  border-color: #cfdeec !important;
}

html[data-theme="light"] .sh-admin-attendance-head p,
html[data-theme="light"] .sh-admin-attendance-card small,
html[data-theme="light"] .sh-admin-attendance-card p,
html[data-theme="light"] .sh-dashboard-messages .social-section-head p,
html[data-theme="light"] .sh-message-preview-row small,
html[data-theme="light"] .sh-message-preview-row em {
  color: #536985 !important;
}

html[data-theme="light"] .sh-admin-attendance-card p span,
html[data-theme="light"] .sh-admin-attendance-card p em,
html[data-theme="light"] .sh-admin-card-toolbar button {
  color: #536985 !important;
  background: #f7fbff !important;
  border-color: #d8e4f0 !important;
}

html[data-theme="light"] .sh-message-preview-row {
  color: #102033 !important;
  border-bottom-color: #d8e4f0 !important;
}

html[data-theme="light"] .sh-message-preview-row:hover {
  background: #f3f8ff !important;
}

html[data-theme="light"] .sh-message-preview-row strong {
  color: #102033 !important;
}

@media (max-width: 1420px) {
  .sh-dashboard-home {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
    gap: 28px;
  }

  .sh-admin-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sh-clock-hero {
    grid-template-columns: 156px minmax(0, 1fr);
    padding: 28px;
  }

  .sh-clock-orb {
    width: 148px;
  }

  .sh-clock-action-panel {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: start;
    align-items: center;
    width: 100%;
    padding: 22px 0 0;
    border-top: 1px solid rgba(151, 180, 216, .18);
    border-left: 0;
    text-align: left;
  }

  .sh-clock-action-panel form,
  .sh-clock-action-panel .sh-dashboard-clock-submit {
    justify-self: end;
  }
}

@media (max-width: 1180px) {
  .sh-dashboard-home {
    grid-template-columns: 1fr;
  }

  .sh-dashboard-home .social-home-today {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .sh-dashboard-home .social-home-header {
    padding-inline: 0;
  }

  .sh-dashboard-home .social-home-header h1 {
    font-size: 2rem;
  }

  .sh-clock-hero,
  .sh-clock-action-panel,
  .sh-dashboard-actions,
  .sh-admin-card-grid,
  .sh-dashboard-home .social-home-today {
    grid-template-columns: 1fr;
  }

  .sh-admin-attendance-head {
    align-items: start;
    flex-direction: column;
  }

  .sh-clock-hero {
    min-height: 0;
    padding: 20px;
    gap: 18px;
  }

  .sh-clock-orb {
    width: 86px;
    justify-self: start;
    border-width: 3px;
  }

  .sh-clock-orb svg {
    width: 38px;
    height: 38px;
  }

  .sh-clock-status h2 {
    font-size: 1.65rem;
  }

  .sh-clock-action-panel {
    justify-items: stretch;
    text-align: left;
  }

  .sh-clock-action-panel form,
  .sh-clock-action-panel .sh-dashboard-clock-submit {
    justify-self: stretch;
    width: 100%;
  }

  .sh-team-composer {
    grid-template-columns: 1fr;
  }

  .sh-team-composer .social-avatar {
    display: none;
  }
}

/* Home dashboard hierarchy: make the clock the anchor, keep secondary modules quieter. */
.sh-dashboard-home {
  max-width: 1580px;
  grid-template-columns: minmax(720px, 1fr) minmax(300px, 360px);
  gap: 34px;
}

.sh-dashboard-home .social-home-feed {
  gap: 22px;
}

.sh-dashboard-home .social-home-header {
  padding-top: 14px;
}

.sh-dashboard-home .social-home-header h1 {
  max-width: 780px;
  font-size: clamp(2.35rem, 3vw, 3.45rem);
}

.sh-clock-hero {
  grid-template-columns: minmax(150px, 190px) minmax(290px, 1fr) minmax(270px, 330px);
  min-height: 286px;
  padding: 38px 44px;
  gap: 34px;
  border-color: rgba(105, 169, 255, .28);
  background:
    radial-gradient(circle at 12% 50%, rgba(62, 219, 122, .28), transparent 16rem),
    radial-gradient(circle at 88% 45%, rgba(33, 125, 255, .20), transparent 15rem),
    linear-gradient(145deg, rgba(17, 48, 82, .92), rgba(8, 24, 42, .72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 28px 64px rgba(0, 0, 0, .24);
}

.sh-clock-orb {
  width: 172px;
  border-width: 5px;
}

.sh-clock-orb svg {
  width: 66px;
  height: 66px;
}

.sh-clock-status p {
  margin-bottom: 18px;
  font-size: 1.02rem;
}

.sh-clock-status h2 {
  max-width: min(100%, 22rem);
  font-size: clamp(2.15rem, 3.1vw, 3.05rem);
}

.sh-clock-status > strong {
  font-size: 1.12rem;
}

.sh-clock-status > strong[data-clock-primary] {
  font-size: 1.48rem;
}

.sh-next-shift {
  margin-top: 24px;
}

.sh-next-shift b {
  font-size: 1.24rem;
}

.sh-clock-action-panel {
  min-height: 200px;
  align-content: center;
  padding: 26px 0 26px 32px;
  border-radius: 8px;
  background: rgba(6, 22, 40, .28);
}

.sh-clock-action-panel > strong {
  font-size: clamp(2.5rem, 3vw, 3.25rem);
}

.sh-dashboard-clock-submit {
  width: min(100%, 286px);
  min-height: 64px;
  font-size: 1.22rem;
}

.sh-admin-attendance {
  gap: 10px;
}

.sh-admin-attendance-head h2 {
  font-size: 1.45rem;
}

.sh-admin-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.sh-admin-attendance-card {
  min-height: 104px;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-content: start;
  padding: 14px;
  background: linear-gradient(145deg, rgba(14, 39, 66, .66), rgba(8, 24, 42, .48));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 10px 22px rgba(0, 0, 0, .08);
}

.sh-admin-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: transparent;
}

.sh-admin-card-icon svg {
  width: 21px;
  height: 21px;
}

.sh-admin-attendance-card.is-green .sh-admin-card-icon,
.sh-admin-attendance-card.is-amber .sh-admin-card-icon,
.sh-admin-attendance-card.is-red .sh-admin-card-icon {
  background: transparent;
}

.sh-admin-attendance-card strong {
  font-size: 1.74rem;
}

.sh-admin-attendance-card h3 {
  font-size: .98rem;
}

.sh-admin-attendance-card small {
  font-size: .73rem;
}

.sh-admin-attendance-card p {
  margin-top: 2px;
}

.sh-dashboard-actions {
  gap: 10px;
}

.sh-dashboard-action {
  min-height: 68px;
}

.sh-dashboard-home .social-home-today {
  gap: 12px;
}

.sh-dashboard-home .today-panel {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 12px 28px rgba(0, 0, 0, .10);
}

.sh-dashboard-home .today-panel-primary,
.sh-dashboard-home .calendar-glance-panel,
.sh-dashboard-home .today-list-panel,
.sh-dashboard-home .today-tasks-panel {
  background: linear-gradient(145deg, rgba(13, 36, 61, .72), rgba(8, 24, 42, .54));
}

.sh-dashboard-home .today-clock-card {
  grid-template-columns: 54px minmax(0, 1fr);
  row-gap: 14px;
}

.sh-dashboard-home .today-clock-card form,
.sh-dashboard-home .today-clock-card a {
  grid-column: 1 / -1;
  justify-self: stretch;
}

.sh-dashboard-home .today-clock-card button {
  width: 100%;
}

html[data-theme="light"] .sh-clock-hero,
html[data-theme="light"] .sh-dashboard-home .today-panel,
html[data-theme="light"] .sh-admin-attendance-card {
  background: #ffffff !important;
  border-color: #d8e4f0 !important;
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme="light"] .sh-clock-action-panel {
  background: #f7fbff;
}

@media (max-width: 1420px) {
  .sh-dashboard-home {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 350px);
  }

  .sh-clock-hero {
    grid-template-columns: minmax(132px, 168px) minmax(0, 1fr);
    min-height: 0;
  }

  .sh-clock-action-panel {
    min-height: 0;
    padding: 24px 0 0;
    background: transparent;
  }

  .sh-admin-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .sh-dashboard-home {
    grid-template-columns: 1fr;
  }

  .sh-admin-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .sh-dashboard-home .social-home-header h1 {
    font-size: 2rem;
  }

  .sh-clock-hero {
    grid-template-columns: 84px minmax(0, 1fr);
    padding: 20px;
    gap: 16px;
  }

  .sh-clock-orb {
    width: 78px;
    border-width: 3px;
  }

  .sh-clock-orb svg {
    width: 34px;
    height: 34px;
  }

  .sh-clock-status h2 {
    font-size: 1.72rem;
  }

  .sh-clock-action-panel,
  .sh-admin-card-grid {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }
}

.geo-preview[hidden] {
  display: none !important;
}

.geo-preview {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

.geo-preview-frame {
  overflow: hidden;
  min-height: 220px;
  border: 1px solid color-mix(in srgb, var(--sh-primary, #1977ff) 18%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface, #ffffff) 88%, var(--sh-primary, #1977ff) 4%);
}

.geo-preview iframe {
  display: block;
  width: 100%;
  min-height: 220px;
  border: 0;
}

.geo-preview p {
  margin: 0;
  color: var(--muted, #64748b);
  font-size: .86rem;
  font-weight: 650;
}

/* Mobile drawer should not duplicate the logo already shown in the topbar. */
@media (max-width: 900px) {
  .super-shell.is-authenticated .sidebar .sidebar-brand,
  .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-brand,
  .super-shell.mobile-nav-open .sidebar .sidebar-brand,
  .super-shell.mobile-nav-open.sidebar-collapsed .sidebar .sidebar-brand {
    display: none !important;
  }
}

/* Mobile topbar refinement: brand first, avatar/menu light and borderless. */
@media (max-width: 900px) {
  :root {
    --superhub-topbar-height: 72px;
  }

  .super-shell.is-authenticated .topbar {
    height: var(--superhub-topbar-height) !important;
    min-height: var(--superhub-topbar-height) !important;
    padding: 10px 16px !important;
    gap: 12px !important;
    background: rgba(5, 18, 31, .96) !important;
  }

  .super-shell.is-authenticated .topbar .mobile-nav-toggle {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
    border-radius: 999px !important;
    box-shadow: 0 14px 30px rgba(20, 153, 225, .22) !important;
  }

  .super-shell.is-authenticated .topbar > .brand {
    max-width: min(48vw, 220px) !important;
    gap: 10px !important;
  }

  .super-shell.is-authenticated .topbar > .brand .brand-mark,
  .super-shell.is-authenticated .topbar > .brand .brand-mark img {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 12px !important;
  }

  .super-shell.is-authenticated .topbar > .brand strong {
    font-size: 1.02rem !important;
    line-height: 1 !important;
  }

  .super-shell.is-authenticated .topbar-actions {
    gap: 6px !important;
  }

  .super-shell.is-authenticated .topbar-actions > .account-pill {
    display: grid !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .super-shell.is-authenticated .topbar-actions > .account-pill span {
    width: 46px !important;
    height: 46px !important;
    border-radius: 999px !important;
    box-shadow: 0 12px 26px rgba(35, 123, 255, .22) !important;
  }

  .super-shell.is-authenticated .topbar-actions > .account-pill strong,
  .super-shell.is-authenticated .topbar-actions > .account-pill small {
    display: none !important;
  }

  .super-shell.is-authenticated .topbar-menu-button {
    width: 38px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .super-shell.is-authenticated .topbar-menu-button:hover,
  .super-shell.is-authenticated .topbar-menu-button:focus-visible {
    background: rgba(108, 144, 184, .12) !important;
  }
}

@media (max-width: 420px) {
  .super-shell.is-authenticated .topbar {
    padding-inline: 14px !important;
    gap: 10px !important;
  }

  .super-shell.is-authenticated .topbar > .brand {
    flex: 1 1 auto !important;
    max-width: none !important;
  }

  .super-shell.is-authenticated .topbar > .brand .brand-copy {
    display: grid !important;
  }

  .super-shell.is-authenticated .topbar > .brand strong {
    max-width: 108px !important;
  }
}

/* Icon-leading compact account menu. */
.topbar-menu-panel .menu-row {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr);
  justify-content: stretch;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
}

.topbar-menu-panel .menu-row-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: color-mix(in srgb, var(--blue, #2f86ff) 76%, var(--text, #eef6ff));
}

.topbar-menu-panel .menu-row-icon .nav-svg {
  width: 20px;
  height: 20px;
}

.topbar-menu-panel .menu-row-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-menu-panel .menu-language-form {
  grid-template-columns: 28px minmax(0, 1fr);
  padding: 0 8px 0 14px !important;
}

.topbar-menu-panel .menu-language-form select {
  min-width: 0;
  width: 100%;
  padding-inline: 0 28px;
}

.topbar-menu-panel .menu-row:hover .menu-row-icon,
.topbar-menu-panel .menu-row:focus-within .menu-row-icon {
  color: currentColor;
}

/* Sidebar workspace switcher: primary place to switch/create/join companies. */
.sidebar-workspace-panel {
  display: grid;
  gap: 10px;
  margin: 0 12px 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface, #10283f) 72%, transparent);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .14);
}

.sidebar-workspace-head,
.sidebar-workspace-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sidebar-workspace-head span {
  color: var(--text-soft, var(--muted));
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sidebar-workspace-head a,
.sidebar-workspace-actions a,
.sidebar-workspace-link {
  color: var(--blue);
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.sidebar-workspace-current,
.sidebar-workspace-empty,
.sidebar-workspace-switch {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 44px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg, #061524) 34%, transparent);
  color: var(--text);
  text-align: left;
}

.sh-admin-attendance-card-link {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.sidebar-workspace-current {
  cursor: pointer;
  text-decoration: none;
}

.sidebar-workspace-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.sidebar-workspace-copy::before,
.sidebar-workspace-copy::after,
.sidebar-workspace-copy > span,
.sidebar-workspace-copy > span::before,
.sidebar-workspace-copy > span::after {
  content: none !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.sidebar-workspace-status {
  overflow: hidden;
  color: var(--text-soft, #91a8c2);
  font-size: .68rem;
  font-weight: 560;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-workspace-switch-indicator {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--blue, #2f86ff);
}

.sidebar-workspace-switch-indicator .nav-svg {
  width: 17px;
  height: 17px;
}

.sidebar-workspace-empty,
.sidebar-workspace-switch {
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}

.sidebar-workspace-switch {
  border-color: transparent;
}

.sidebar-workspace-switch:hover,
.sidebar-workspace-switch:focus-visible,
.sidebar-workspace-current:hover,
.sidebar-workspace-current:focus-visible,
.sidebar-workspace-empty:hover,
.sidebar-workspace-empty:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 50%, var(--line));
  background: color-mix(in srgb, var(--blue) 12%, var(--surface, #10283f));
}

.sidebar-workspace-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 16%, transparent);
  color: var(--blue);
}

.sidebar-workspace-icon .nav-svg {
  width: 17px;
  height: 17px;
}

.sidebar-workspace-name {
  overflow: hidden;
  min-width: 0;
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-workspace-badge {
  padding: 4px 7px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 16%, transparent);
  color: var(--blue);
  font-size: .68rem;
  font-weight: 800;
}

.sidebar-workspace-list {
  display: grid;
  gap: 5px;
}

.sidebar-workspace-actions {
  padding-top: 2px;
}

.sidebar-workspace-actions a {
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--blue) 8%, transparent);
}

html[data-theme="light"] .sidebar-workspace-panel {
  background: #fff;
  border-color: #d7e2ef;
  box-shadow: 0 18px 42px rgba(15, 35, 55, .08);
}

html[data-theme="light"] .sidebar-workspace-current,
html[data-theme="light"] .sidebar-workspace-empty,
html[data-theme="light"] .sidebar-workspace-switch {
  background: #f5f8fc;
  border-color: #d7e2ef;
  color: #0f1f33;
}

html[data-theme="light"] .sidebar-workspace-switch:hover,
html[data-theme="light"] .sidebar-workspace-switch:focus-visible,
html[data-theme="light"] .sidebar-workspace-empty:hover,
html[data-theme="light"] .sidebar-workspace-empty:focus-visible {
  background: #eaf3ff;
  border-color: #9dc3ff;
}

.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-workspace-panel {
  display: none;
}

/* Global workspace switcher: keep active company visible outside Account. */
.workspace-switcher {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  max-width: 310px;
  min-height: 54px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface, #10283f) 82%, transparent);
  color: var(--text);
  box-shadow: none;
}

.workspace-switcher:hover,
.workspace-switcher:focus-visible {
  border-color: color-mix(in srgb, var(--blue, #2f86ff) 55%, var(--line));
  background: color-mix(in srgb, var(--blue, #2f86ff) 14%, var(--surface, #10283f));
}

.workspace-switcher-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(47, 134, 255, .14);
  color: var(--blue);
}

.workspace-switcher-icon .nav-svg {
  width: 20px;
  height: 20px;
}

.workspace-switcher-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.workspace-switcher-copy small {
  color: var(--text-soft, var(--muted));
  font-size: .72rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.workspace-switcher-copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: .9rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-switcher-action {
  padding: 6px 9px;
  border-radius: 9px;
  background: rgba(47, 134, 255, .14);
  color: var(--blue);
  font-size: .78rem;
  font-weight: 800;
}

@media (max-width: 1320px) {
  .workspace-switcher {
    min-width: 54px;
    max-width: 54px;
    grid-template-columns: 38px;
    justify-content: center;
  }

  .workspace-switcher-copy,
  .workspace-switcher-action {
    display: none;
  }
}

@media (max-width: 900px) {
  .super-shell.is-authenticated .topbar > .workspace-switcher {
    display: none !important;
  }
}

/* Responsive collision guard: prevent dashboard/right-rail and topbar overlap. */
@media (max-width: 1500px) {
  .sh-dashboard-home {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
    gap: 24px !important;
  }

  .sh-clock-hero {
    grid-template-columns: minmax(118px, 150px) minmax(0, 1fr) !important;
    gap: 26px !important;
    padding: 32px !important;
  }

  .sh-clock-action-panel {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 0 !important;
    padding: 22px 26px !important;
  }

  .sh-clock-action-panel .sh-dashboard-clock-submit {
    min-width: 220px;
  }
}

@media (max-width: 1380px) {
  .super-shell.is-authenticated .topbar {
    padding-inline: 24px !important;
    gap: 12px !important;
  }

  .super-shell.is-authenticated .topbar-search {
    flex-basis: 300px !important;
    min-width: 210px !important;
    max-width: 360px !important;
  }

  .super-shell.is-authenticated .topbar-actions {
    gap: 8px !important;
  }

  .super-shell.is-authenticated .topbar-actions > .language-form .language-select {
    min-width: 112px !important;
    width: 112px !important;
    padding-left: 14px !important;
  }

  .super-shell.is-authenticated .topbar-actions > .account-pill {
    min-width: 58px !important;
    width: 58px !important;
    padding: 6px !important;
  }

  .super-shell.is-authenticated .topbar-actions > .account-pill strong,
  .super-shell.is-authenticated .topbar-actions > .account-pill small {
    display: none !important;
  }
}

@media (max-width: 1320px) {
  .sh-dashboard-home {
    grid-template-columns: 1fr !important;
  }

  .sh-dashboard-home .social-home-today {
    position: static !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: none !important;
  }

  .sh-dashboard-home .today-panel {
    min-width: 0;
  }

  .super-shell.is-authenticated .topbar-search {
    max-width: 320px !important;
  }
}

@media (max-width: 1120px) {
  .sh-dashboard-home .social-home-today {
    grid-template-columns: 1fr !important;
  }
}

/* Medium-width navigation fallback: only use drawer nav when the rail truly cannot fit. */
@media (min-width: 901px) and (max-width: 1100px) {
  .super-shell.is-authenticated,
  .super-shell.is-authenticated.sidebar-collapsed {
    --superhub-sidebar-width: 0px !important;
  }

  .super-shell.is-authenticated .topbar {
    left: 0 !important;
    padding-left: 18px !important;
    justify-content: flex-start !important;
    gap: 16px !important;
  }

  .super-shell.is-authenticated .topbar-search {
    order: 3 !important;
    flex: 1 1 320px !important;
    min-width: 200px !important;
    max-width: 440px !important;
    margin: 0 auto 0 8px !important;
  }

  .super-shell.is-authenticated .topbar .mobile-nav-toggle,
  .super-shell.is-authenticated .topbar > .brand {
    display: inline-flex !important;
  }

  .super-shell.is-authenticated .topbar .mobile-nav-toggle {
    order: 1 !important;
    display: inline-grid !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 999px !important;
  }

  .super-shell.is-authenticated .topbar > .brand {
    order: 2 !important;
    flex: 0 1 190px !important;
    min-width: 0 !important;
    max-width: 190px !important;
    gap: 10px !important;
  }

  .super-shell.is-authenticated .topbar > .brand .brand-mark,
  .super-shell.is-authenticated .topbar > .brand .brand-mark img {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  .super-shell.is-authenticated .topbar > .brand small {
    display: none !important;
  }

  .super-shell.is-authenticated .topbar-actions > .account-pill {
    min-width: 58px !important;
    width: 58px !important;
    padding: 6px !important;
  }

  .super-shell.is-authenticated .topbar-actions > .account-pill strong,
  .super-shell.is-authenticated .topbar-actions > .account-pill small,
  .super-shell.is-authenticated .topbar-actions > .logout-btn span {
    display: none !important;
  }

  .super-shell.is-authenticated .topbar-actions {
    order: 4 !important;
    margin-left: 0 !important;
  }

  .super-shell.is-authenticated .sidebar,
  .super-shell.is-authenticated.sidebar-collapsed .sidebar {
    position: fixed !important;
    top: var(--superhub-topbar-height, 84px) !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 95 !important;
    width: min(86vw, 320px) !important;
    height: calc(100vh - var(--superhub-topbar-height, 84px)) !important;
    transform: translateX(-105%) !important;
    transition: transform .22s ease !important;
  }

  .super-shell.mobile-nav-open .sidebar,
  .super-shell.mobile-nav-open.sidebar-collapsed .sidebar {
    transform: translateX(0) !important;
  }

  .super-shell.is-authenticated .sidebar .sidebar-brand,
  .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-brand {
    display: none !important;
  }

  .super-shell.is-authenticated .page-content {
    margin-left: 0 !important;
    padding-left: clamp(18px, 4vw, 54px) !important;
    padding-right: clamp(18px, 4vw, 54px) !important;
  }

  .super-shell.is-authenticated .mobile-nav-backdrop {
    z-index: 90 !important;
  }

  .super-shell.mobile-nav-open .mobile-nav-backdrop {
    display: block !important;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .super-shell.is-authenticated .topbar-search {
    display: none !important;
  }

  .super-shell.is-authenticated .topbar > .brand {
    flex: 1 1 auto !important;
    max-width: 240px !important;
  }

  .super-shell.is-authenticated .topbar-actions {
    margin-left: auto !important;
  }
}

/* Compact topbar proportions: equalize icon controls and vertical alignment. */
@media (max-width: 1100px) {
  .super-shell.is-authenticated .topbar {
    height: 76px !important;
    min-height: 76px !important;
    align-items: center !important;
    padding-block: 12px !important;
  }

  .super-shell.is-authenticated .topbar .mobile-nav-toggle,
  .super-shell.is-authenticated .topbar-actions > .account-pill,
  .super-shell.is-authenticated .topbar-menu-button {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 999px !important;
  }

  .super-shell.is-authenticated .topbar .mobile-nav-toggle {
    flex-basis: 48px !important;
  }

  .super-shell.is-authenticated .topbar > .brand {
    align-items: center !important;
    gap: 12px !important;
  }

  .super-shell.is-authenticated .topbar > .brand .brand-mark,
  .super-shell.is-authenticated .topbar > .brand .brand-mark img {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 13px !important;
  }

  .super-shell.is-authenticated .topbar > .brand strong {
    line-height: 1 !important;
  }

  .super-shell.is-authenticated .topbar-actions {
    align-items: center !important;
    gap: 10px !important;
  }

  .super-shell.is-authenticated .topbar-actions > .account-pill {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .super-shell.is-authenticated .topbar-actions > .account-pill span {
    width: 48px !important;
    height: 48px !important;
    border-radius: 999px !important;
  }

  .super-shell.is-authenticated .topbar-menu-button {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 1.25rem !important;
  }
}

/* Final brand lock: one mark plus live text, never mark + raster mark. */
.super-shell .topbar > .brand,
.super-shell .sidebar .sidebar-brand {
  gap: 12px !important;
}

.super-shell .brand-wordmark--text {
  display: grid !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  gap: 1px !important;
  line-height: 1 !important;
  font-family: "Roboto", "Noto Sans Khmer", "Khmer OS", Arial, sans-serif !important;
}

.super-shell .brand-wordmark--text strong {
  display: block !important;
  font-size: clamp(1.05rem, 1.5vw, 1.28rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 0.98 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  color: var(--text) !important;
}

.super-shell .brand-wordmark--text small {
  display: block !important;
  font-size: 0.63rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  color: var(--text-soft) !important;
}

.super-shell .brand-wordmark--text img {
  display: none !important;
}

.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-brand .brand-wordmark--text,
.super-shell.is-authenticated.sidebar-collapsed.sidebar-hover-locked .sidebar .sidebar-brand .brand-wordmark--text {
  display: none !important;
}

@media (max-width: 720px) {
  .super-shell .topbar > .brand .brand-wordmark--text {
    display: none !important;
  }
}

/* Attendance metadata helpers */
.small-text{font-size:12px;line-height:1.35;margin-top:4px}

/* Global radius lock: use the tighter language-screen radius for regular UI surfaces. */
:root {
  --corner-radius: 6px;
  --refined-radius-xl: var(--corner-radius);
  --refined-radius-lg: var(--corner-radius);
  --refined-radius-md: var(--corner-radius);
  --ui-radius-lg: var(--corner-radius);
  --ui-radius-md: var(--corner-radius);
  --sh-radius-xs: var(--corner-radius);
  --sh-radius-sm: var(--corner-radius);
  --sh-radius-md: var(--corner-radius);
  --sh-radius-lg: var(--corner-radius);
  --sh-radius-xl: var(--corner-radius);
}

:where(
  .hero,
  .panel,
  .auth-card,
  .auth-glass-card,
  .post-card,
  .column,
  .setup-card,
  .metric,
  .workspace-card,
  .mini-card,
  .list-row,
  .task-card,
  .table-card,
  .responsive-table,
  .landing-panel,
  .feature-tiles span,
  .payroll-score-card,
  .payroll-readiness-card,
  .peoplehub-module-card,
  .module-icon,
  .attendance-clock-card,
  .terms-modal-card,
  .message,
  .registration-step,
  .primary-btn,
  .secondary-btn,
  .soft-btn,
  .danger-btn,
  .success-btn,
  .oauth-btn,
  button,
  input,
  textarea,
  select
) {
  border-radius: var(--corner-radius) !important;
}

/* Final radius enforcement for controls with older, more-specific pill rules. */
.primary-btn,
.secondary-btn,
.soft-btn,
.danger-btn,
.success-btn,
.oauth-btn,
.pill,
.language-select,
.auth-only-card .primary-btn.full,
.auth-only-card .secondary-btn.full,
.auth-only-card .oauth-btn.full,
.registration-actions .primary-btn.full,
.auth-glass-card input,
.auth-glass-card select,
.auth-glass-card textarea,
button.primary-btn,
button.secondary-btn,
button.soft-btn,
button.danger-btn,
button.success-btn,
a.primary-btn,
a.secondary-btn,
a.soft-btn,
a.danger-btn,
a.success-btn,
a.oauth-btn {
  border-radius: var(--corner-radius) !important;
}

/* Absolute final auth radius patch: registration/header controls must match the 6px system radius. */
.super-shell .topbar .pill,
.super-shell .topbar .pill.ghost,
.super-shell .topbar .public-link,
.super-shell .topbar .language-select,
.super-shell .topbar button[data-theme-toggle],
.super-shell .topbar .topbar-menu-button,
.auth-only-card .registration-progress span,
.auth-only-card .registration-actions .primary-btn,
.auth-only-card .registration-actions .soft-btn,
.auth-only-card .oauth-btn,
.auth-only-card .primary-btn,
.auth-only-card .soft-btn,
.auth-only-card input,
.auth-only-card select,
.auth-only-card textarea {
  border-radius: 6px !important;
}

.industry-picker {
  display: grid;
  gap: 10px;
}

.industry-picker .field-label {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.92rem;
}

.industry-selected,
.industry-option,
.industry-result {
  border: 1px solid var(--border);
  background: rgba(9, 26, 42, 0.82);
  color: var(--text);
  border-radius: 6px;
}

.industry-selected {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  font: inherit;
  font-weight: 700;
}

/* Phase 5: clearer web navigation and manager-first dashboard hierarchy. */
.super-shell.is-authenticated .sidebar-flat-nav .sidebar-primary-main {
  padding-bottom: 12px;
}

.super-shell.is-authenticated .sidebar-flat-nav .sidebar-simple-link {
  position: relative;
  gap: 12px;
  min-height: 44px;
  margin-inline: 6px;
  padding-inline: 12px;
  border-radius: 12px;
}

.super-shell.is-authenticated .sidebar-flat-nav .sidebar-simple-link:hover {
  background: rgba(49, 124, 214, .10);
}

.super-shell.is-authenticated .sidebar-flat-nav .sidebar-simple-link[aria-current="page"],
.super-shell.is-authenticated .sidebar-flat-nav .sidebar-simple-link.active {
  color: #86c3ff;
  background: linear-gradient(90deg, rgba(37, 99, 235, .22), rgba(37, 99, 235, .08));
  box-shadow: inset 3px 0 0 #3b96ff;
}

.super-shell.is-authenticated .sidebar-flat-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 17px 18px 6px;
}

.super-shell.is-authenticated .sidebar-flat-heading::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(116, 151, 190, .16);
}

.sidebar-link-badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: auto;
  padding-inline: 6px;
  border-radius: 999px;
  color: #ffffff;
  background: #e54861;
  font-size: .68rem;
  font-weight: 850;
  line-height: 1;
}

.sh-role-actions.is-manager {
  border-color: rgba(245, 158, 11, .28);
  background:
    radial-gradient(circle at 94% 0, rgba(245, 158, 11, .12), transparent 18rem),
    linear-gradient(145deg, rgba(14, 39, 66, .82), rgba(8, 24, 42, .66));
}

.sh-role-actions.is-manager .sh-role-actions-head h2 {
  font-size: clamp(1.28rem, 2vw, 1.55rem);
}

.sh-role-actions.is-manager .sh-role-action-card.is-critical,
.sh-role-actions.is-manager .sh-role-action-card.is-warning {
  border-color: rgba(245, 158, 11, .24);
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar-flat-nav .sidebar-simple-link[aria-current="page"],
html[data-theme="light"] .super-shell.is-authenticated .sidebar-flat-nav .sidebar-simple-link.active {
  color: #0e68d7;
  background: linear-gradient(90deg, rgba(37, 99, 235, .14), rgba(37, 99, 235, .05));
}

html[data-theme="light"] .sh-role-actions.is-manager {
  background:
    radial-gradient(circle at 94% 0, rgba(245, 158, 11, .10), transparent 18rem),
    linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(247, 250, 254, .96));
}

@media (max-width: 760px) {
  .sh-role-actions-head {
    align-items: flex-start;
  }

  .sh-role-action-copy small {
    display: none;
  }

  .sh-role-action-card {
    min-height: 70px;
  }
}

/* Phase 7: schedule management centered on assignment, not setup forms. */
.schedule-management-hero {
  min-height: 0 !important;
  align-items: center !important;
  justify-content: space-between;
  padding-block: clamp(1.1rem, 2vw, 1.65rem) !important;
}

.schedule-management-hero h1,
.schedule-management-hero p {
  margin-bottom: 0 !important;
}

.schedule-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  margin-bottom: 1rem;
}

.schedule-summary-grid > a {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem .9rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 84%, var(--bg));
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}

.schedule-summary-grid > a:hover {
  border-color: color-mix(in srgb, var(--blue) 55%, var(--line));
  transform: translateY(-1px);
}

.schedule-summary-grid strong,
.schedule-summary-grid small {
  display: block;
}

.schedule-summary-grid strong {
  font-size: 1.15rem;
}

.schedule-summary-grid small {
  margin-top: .15rem;
  color: var(--muted);
  font-size: .76rem;
}

.schedule-summary-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  border-radius: .65rem;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 13%, transparent);
  font-weight: 900;
}

.schedule-summary-icon.success {
  color: #4ade80;
  background: rgba(34, 197, 94, .12);
}

.schedule-summary-icon.warning {
  color: #fbbf24;
  background: rgba(245, 158, 11, .12);
}

.schedule-builder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  align-items: start;
  margin-bottom: 1rem;
}

.schedule-workflow-card {
  margin: 0 !important;
  border-radius: .85rem !important;
}

.schedule-workflow-card[open] {
  grid-column: 1 / -1;
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line)) !important;
}

.schedule-workflow-card > summary {
  min-height: 82px;
  align-items: center;
}

.schedule-workflow-card > summary::after {
  display: none;
}

.schedule-workflow-card > summary > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: .2rem;
}

.schedule-workflow-card > summary small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 500;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.schedule-disclosure-arrow {
  margin-left: auto;
  color: var(--muted);
  font-size: 1.2rem;
  transition: transform .16s ease;
}

.schedule-workflow-card[open] .schedule-disclosure-arrow {
  transform: rotate(180deg);
}

.schedule-workflow-card .workflow-disclosure-body {
  padding: 1rem 1.1rem 1.1rem;
  background: color-mix(in srgb, var(--surface) 70%, var(--bg));
}

.schedule-form {
  align-items: end;
}

.schedule-day-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.schedule-day-fieldset legend {
  margin-bottom: .55rem;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 750;
}

.schedule-form .schedule-days {
  gap: .45rem;
}

.schedule-form .schedule-days label {
  min-width: 54px;
  justify-content: center;
  padding: .55rem .65rem;
  border-radius: .65rem;
  cursor: pointer;
}

.schedule-form .schedule-days label:has(input:checked) {
  border-color: color-mix(in srgb, var(--blue) 55%, var(--line));
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
}

.schedule-form .primary-btn:disabled {
  opacity: .48;
  cursor: not-allowed;
}

.schedule-list-panel,
.schedule-shift-strip {
  scroll-margin-top: 6rem;
}

.schedule-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.schedule-section-heading h2,
.schedule-section-heading p {
  margin-bottom: 0;
}

.schedule-count-badge {
  min-width: 34px;
  height: 30px;
  display: grid;
  place-items: center;
  padding-inline: .55rem;
  border-radius: 999px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  font-size: .76rem;
  font-weight: 850;
}

.schedule-record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.schedule-record-card {
  display: grid;
  gap: .8rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .85rem;
  background: color-mix(in srgb, var(--surface) 77%, var(--bg));
}

.schedule-record-card.is-inactive {
  opacity: .65;
}

.schedule-record-card header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .7rem;
  align-items: center;
}

.schedule-record-card header > span:nth-child(2),
.schedule-record-card header strong,
.schedule-record-card header small {
  min-width: 0;
  display: block;
}

.schedule-record-card header small {
  margin-top: .15rem;
  overflow: hidden;
  color: var(--muted);
  font-size: .74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-person-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #dcecff;
  background: linear-gradient(135deg, #2175ec, #2bbbd9);
  font-weight: 850;
}

.schedule-time-row,
.schedule-date-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--muted);
  font-size: .82rem;
}

.schedule-time-row strong {
  color: var(--text);
}

.schedule-day-tags,
.schedule-shift-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.schedule-day-tags span {
  padding: .3rem .5rem;
  border-radius: .45rem;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  font-size: .69rem;
  font-weight: 750;
}

.schedule-empty-state {
  grid-column: 1 / -1;
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .55rem;
  border: 1px dashed var(--line);
  border-radius: .85rem;
  color: var(--muted);
  text-align: center;
}

.schedule-empty-state > span {
  color: var(--blue);
  font-size: 1.7rem;
}

.schedule-empty-state a {
  color: var(--blue);
  font-weight: 750;
  text-decoration: none;
}

.schedule-shift-list > span {
  min-width: 170px;
  display: grid;
  gap: .2rem;
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  border-radius: .7rem;
  background: color-mix(in srgb, var(--surface) 77%, var(--bg));
}

.schedule-shift-list small {
  color: var(--muted);
  font-size: .74rem;
}

html[data-theme="light"] .schedule-summary-grid > a,
html[data-theme="light"] .schedule-record-card,
html[data-theme="light"] .schedule-shift-list > span {
  background: #fff;
}

@media (max-width: 1000px) {
  .schedule-builder-grid {
    grid-template-columns: 1fr;
  }

  .schedule-workflow-card[open] {
    grid-column: auto;
  }
}

@media (max-width: 700px) {
  .schedule-management-hero {
    align-items: center !important;
    flex-direction: row;
  }

  .schedule-management-hero .primary-btn {
    min-height: 42px;
    padding-inline: .85rem;
  }

  .schedule-summary-grid {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .schedule-summary-grid::-webkit-scrollbar { display: none; }

  .schedule-summary-grid > a {
    min-width: 160px;
    flex: 0 0 auto;
  }

  .schedule-record-grid {
    grid-template-columns: 1fr;
  }

  .schedule-workflow-card > summary small {
    display: none;
  }

  .schedule-form .schedule-days {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .schedule-form .schedule-days label {
    min-width: 0;
  }

  .schedule-record-card header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .schedule-record-card header .status-chip {
    grid-column: 1 / -1;
    width: fit-content;
    margin-left: 2.9rem;
  }
}

.industry-selected-value,
.industry-selected-badge {
  display: inline-flex;
  align-items: center;
}

.industry-selected-value {
  min-width: 0;
  gap: 10px;
}

.industry-selected-badge {
  flex: 0 0 auto;
  min-height: 26px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(42, 135, 255, 0.16);
  color: #76b6ff;
  font-size: 0.76rem;
  font-weight: 800;
}

.industry-icon {
  --industry-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V8l8-4 8 4v12'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3Cpath d='M8 10h.01M12 10h.01M16 10h.01'/%3E%3C/svg%3E");
  display: inline-block;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  background: currentColor;
  -webkit-mask: var(--industry-icon) center / contain no-repeat;
  mask: var(--industry-icon) center / contain no-repeat;
}

.industry-icon[data-industry-icon="storefront"] {
  --industry-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v10h16V10'/%3E%3Cpath d='M3 4h18l-1 6a3 3 0 0 1-4 1 3 3 0 0 1-4 0 3 3 0 0 1-4 0 3 3 0 0 1-4-1Z'/%3E%3Cpath d='M9 20v-5h6v5'/%3E%3C/svg%3E");
}

.industry-icon[data-industry-icon="restaurant"] {
  --industry-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v8M4 3v5a3 3 0 0 0 6 0V3M7 11v10'/%3E%3Cpath d='M17 3c-2 2-3 5-3 8h4v10M18 3v8'/%3E%3C/svg%3E");
}

.industry-icon[data-industry-icon="construction"] {
  --industry-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14a8 8 0 0 1 16 0'/%3E%3Cpath d='M3 14h18M8 14V8M16 14V8'/%3E%3Cpath d='M6 14v6h12v-6'/%3E%3C/svg%3E");
}

.industry-icon[data-industry-icon="local_shipping"] {
  --industry-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v11H3zM14 10h4l3 3v4h-7z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E");
}

.industry-icon[data-industry-icon="medical_services"] {
  --industry-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='14' rx='2'/%3E%3Cpath d='M9 6V4h6v2M12 10v6M9 13h6'/%3E%3C/svg%3E");
}

.industry-icon[data-industry-icon="business_center"] {
  --industry-icon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='12' rx='2'/%3E%3Cpath d='M9 7V5h6v2M3 12h18M10 12v2h4v-2'/%3E%3C/svg%3E");
}

.industry-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.industry-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font: inherit;
  cursor: pointer;
}

.industry-option.selected,
.industry-option:hover,
.industry-result:hover {
  border-color: rgba(42, 135, 255, 0.72);
  background: rgba(42, 135, 255, 0.16);
}

.industry-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.industry-results {
  display: grid;
  gap: 8px;
  max-height: 240px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(4, 17, 29, 0.7);
}

.industry-result {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 12px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.organization-search {
  display: grid;
  gap: 8px;
}

.organization-search .field-label {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.92rem;
}

.organization-search-control {
  position: relative;
}

.organization-search-control input {
  width: 100%;
  padding-left: 44px;
  padding-right: 44px;
}

.organization-search-icon {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 17px;
  height: 17px;
  border: 2px solid var(--muted);
  border-radius: 50%;
  transform: translateY(-55%);
  pointer-events: none;
}

.organization-search-icon::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: -4px;
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: var(--muted);
  transform: rotate(45deg);
  transform-origin: left center;
}

.organization-search.has-selection .organization-search-control input {
  border-color: rgba(56, 211, 159, 0.62);
  box-shadow: 0 0 0 3px rgba(56, 211, 159, 0.08);
}

.organization-search-spinner {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border: 2px solid rgba(132, 158, 188, 0.28);
  border-top-color: #2a87ff;
  border-radius: 50%;
  animation: organization-search-spin 0.7s linear infinite;
}

@keyframes organization-search-spin {
  to { transform: rotate(360deg); }
}

.organization-search-results {
  display: grid;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(4, 17, 29, 0.92);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}

.organization-search-result {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.organization-search-result span {
  color: #76b6ff;
  font-size: 0.78rem;
  font-weight: 700;
}

.organization-search-result:hover,
.organization-search-result.active {
  background: rgba(42, 135, 255, 0.16);
}

.organization-search-empty {
  margin: 0;
  padding: 12px;
}

.organization-search-status {
  min-height: 1.3em;
  margin: 0;
}

html[data-theme="light"] .industry-selected,
html[data-theme="light"] .industry-option,
html[data-theme="light"] .industry-result,
.light-theme .industry-selected,
.light-theme .industry-option,
.light-theme .industry-result {
  background: #ffffff;
  color: #0f2238;
  border-color: rgba(88, 112, 139, 0.28);
}

html[data-theme="light"] .industry-selected,
.light-theme .industry-selected {
  box-shadow: inset 0 0 0 1px rgba(42, 135, 255, 0.08);
}

html[data-theme="light"] .industry-option.selected,
html[data-theme="light"] .industry-option:hover,
html[data-theme="light"] .industry-result:hover,
.light-theme .industry-option.selected,
.light-theme .industry-option:hover,
.light-theme .industry-result:hover {
  background: #eaf3ff;
  border-color: rgba(42, 135, 255, 0.55);
  color: #063a78;
}

html[data-theme="light"] .industry-results,
.light-theme .industry-results {
  background: #ffffff;
  border-color: rgba(88, 112, 139, 0.28);
}

html[data-theme="light"] .industry-selected-badge,
.light-theme .industry-selected-badge {
  background: #eaf3ff;
  color: #1268c4;
}

html[data-theme="light"] .organization-search-results,
.light-theme .organization-search-results {
  background: #ffffff;
  border-color: rgba(88, 112, 139, 0.28);
  box-shadow: 0 16px 34px rgba(26, 58, 91, 0.14);
}

html[data-theme="light"] .organization-search-result,
.light-theme .organization-search-result {
  color: #0f2238;
}

html[data-theme="light"] .organization-search-result:hover,
html[data-theme="light"] .organization-search-result.active,
.light-theme .organization-search-result:hover,
.light-theme .organization-search-result.active {
  background: #eaf3ff;
}

@media (max-width: 680px) {
  .industry-search-row {
    grid-template-columns: 1fr;
  }
}

/* Final sidebar workspace pass: make company switching obvious and match the lighter left-nav reference. */
@media (min-width: 901px) {
  .super-shell.is-authenticated .topbar > .workspace-switcher {
    display: none !important;
  }
}

.super-shell.is-authenticated .sidebar-workspace-panel {
  gap: 8px !important;
  margin: 2px 0 22px !important;
  padding: 0 0 18px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(132, 158, 188, .22) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.super-shell.is-authenticated .sidebar-workspace-head {
  align-items: center !important;
  padding: 0 4px 2px !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 620px) {
  .registration-method-options {
    grid-template-columns: 1fr;
  }
}

.super-shell.is-authenticated .sidebar-workspace-head span {
  display: inline !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-soft, #91a8c2) !important;
  font-size: .66rem !important;
  letter-spacing: .13em !important;
}

.super-shell.is-authenticated .sidebar-workspace-head a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(93, 160, 255, .35) !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--blue, #2f86ff) !important;
  font-size: .74rem !important;
}

.super-shell.is-authenticated .sidebar-workspace-current,
.super-shell.is-authenticated .sidebar-workspace-empty,
.super-shell.is-authenticated .sidebar-workspace-switch {
  grid-template-columns: 24px minmax(0, 1fr) auto !important;
  min-height: 36px !important;
  padding: 6px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
}

.super-shell.is-authenticated .sidebar-workspace-current {
  background: rgba(47, 134, 255, .12) !important;
  border-color: rgba(47, 134, 255, .18) !important;
}

.super-shell.is-authenticated .sidebar-workspace-icon {
  width: 22px !important;
  height: 22px !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--text-soft, #91a8c2) !important;
}

.super-shell.is-authenticated .sidebar-workspace-icon .nav-svg {
  width: 18px !important;
  height: 18px !important;
}

.super-shell.is-authenticated .sidebar-workspace-name {
  font-size: .82rem !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

.super-shell.is-authenticated .sidebar-workspace-current > span,
.super-shell.is-authenticated .sidebar-workspace-switch > span {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.super-shell.is-authenticated .sidebar-workspace-current > span::before,
.super-shell.is-authenticated .sidebar-workspace-current > span::after,
.super-shell.is-authenticated .sidebar-workspace-switch > span::before,
.super-shell.is-authenticated .sidebar-workspace-switch > span::after {
  content: none !important;
  display: none !important;
}

.super-shell.is-authenticated .sidebar-workspace-badge,
.super-shell.is-authenticated .sidebar-workspace-link {
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--blue, #2f86ff) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
}

.super-shell.is-authenticated .sidebar-workspace-switch:hover,
.super-shell.is-authenticated .sidebar-workspace-switch:focus-visible,
.super-shell.is-authenticated .sidebar-workspace-empty:hover,
.super-shell.is-authenticated .sidebar-workspace-empty:focus-visible {
  background: rgba(47, 134, 255, .10) !important;
  border-color: rgba(47, 134, 255, .20) !important;
}

.super-shell.is-authenticated .sidebar-workspace-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  padding-top: 8px !important;
}

.super-shell.is-authenticated .sidebar-workspace-actions a {
  display: flex !important;
  justify-content: flex-start !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  border-color: rgba(93, 160, 255, .36) !important;
  background: transparent !important;
  color: var(--blue, #2f86ff) !important;
  font-size: .76rem !important;
  font-weight: 650 !important;
}

.super-shell.is-authenticated .sidebar-workspace-actions a:first-child::before {
  content: "+";
  margin-right: 8px;
  font-size: 1rem;
  line-height: 1;
}

.super-shell.is-authenticated .sidebar-workspace-actions a.sidebar-workspace-manage::before {
  content: "↔";
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar,
html[data-theme="light"] .super-shell.is-authenticated.sidebar-collapsed .sidebar {
  background: #ffffff !important;
  border-right-color: #d7e0ea !important;
  box-shadow: none !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar-brand {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar-brand strong {
  color: #09223d !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar-workspace-panel {
  border-bottom-color: #d9e2ec !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar-workspace-head span {
  color: #607287 !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar-workspace-current {
  background: #e8eef5 !important;
  border-color: transparent !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar-workspace-current,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-workspace-empty,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-workspace-switch {
  color: #102033 !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar-workspace-switch:hover,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-workspace-switch:focus-visible,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-workspace-empty:hover,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-workspace-empty:focus-visible {
  background: #f1f5f9 !important;
  border-color: transparent !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar-workspace-actions a,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-workspace-head a {
  border-color: #9bb2cc !important;
  color: #0a4274 !important;
}

html[data-theme="light"] .super-shell.is-authenticated .social-shell-link {
  min-height: 42px !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  color: #394a5d !important;
  font-weight: 500 !important;
}

html[data-theme="light"] .super-shell.is-authenticated .social-shell-link .nav-icon {
  width: 24px !important;
  height: 24px !important;
  background: transparent !important;
  color: #4c5968 !important;
}

html[data-theme="light"] .super-shell.is-authenticated .social-shell-link:hover,
html[data-theme="light"] .super-shell.is-authenticated .social-shell-link[aria-current="page"] {
  color: #ffffff !important;
  background: #073f72 !important;
  border-color: #073f72 !important;
}

html[data-theme="light"] .super-shell.is-authenticated .social-shell-link:hover .nav-icon,
html[data-theme="light"] .super-shell.is-authenticated .social-shell-link[aria-current="page"] .nav-icon {
  color: #ffffff !important;
  background: transparent !important;
}

html[data-theme="light"] .super-shell.is-authenticated .social-settings-panel {
  background: #ffffff !important;
  border-color: #d7e0ea !important;
}

/* Public login/register use the page canvas as their only background surface. */
.auth-glass-card.auth-only-card.auth-flat-card {
  border-radius: 0 !important;
}

.landing-panel.auth-only-panel {
  border-radius: 0 !important;
}

body.auth-flat-page .landing-auth.auth-only-auth,
body.auth-flat-page .landing-panel.auth-only-panel,
body.auth-flat-page .auth-glass-card.auth-only-card.auth-flat-card {
  min-width: 0;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.auth-flat-page .auth-only-card .auth-card-heading {
  min-width: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Cambodia-first phone inputs keep the country code visible without
   preventing users from pasting another complete international number. */
.phone-number-control {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(3, 14, 26, .62);
  overflow: hidden;
}

html[data-theme="light"] .phone-number-control {
  background: #f8fbff;
}

.phone-country-prefix {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 0 0 16px;
  color: var(--text);
  font-weight: 800;
  white-space: nowrap;
}

.phone-number-control input {
  min-width: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.phone-number-control.is-international .phone-country-prefix {
  display: none;
}

/* Unified organization workspace: one shared rhythm for the primary task and access rail. */
.organization-management-page {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.organization-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 2px 2px 0;
}

.organization-page-header h1 {
  margin: 0 0 7px;
  color: var(--text);
  font-size: clamp(1.8rem, 2.5vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: -.04em;
}

.organization-page-header .eyebrow {
  margin-bottom: 8px;
}

.organization-page-back {
  display: inline-flex;
  min-height: 42px;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  color: #6eb3ff;
  font-weight: 680;
}

.organization-page-back:hover {
  color: #9bcdff;
}

.organization-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, .86fr);
  gap: 18px;
  align-items: start;
}

.super-shell.is-authenticated .organization-primary-card,
.super-shell.is-authenticated .organization-access-panel {
  min-width: 0;
  margin: 0 !important;
  padding: clamp(24px, 2.2vw, 30px);
}

.organization-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.organization-card-title {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 14px;
}

.organization-card-title > div {
  min-width: 0;
}

.organization-card-title .eyebrow {
  margin-bottom: 5px;
}

.super-shell.is-authenticated .organization-card-title h2 {
  margin: 0 0 7px;
  font-size: clamp(1.12rem, 1.5vw, 1.38rem);
}

.organization-card-icon,
.organization-membership-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(74, 158, 255, .24);
  border-radius: var(--corner-radius);
  color: #78b8ff;
  background: rgba(42, 135, 255, .12);
}

.organization-card-icon {
  width: 46px;
  height: 46px;
}

.organization-card-icon svg {
  width: 23px;
  height: 23px;
}

.organization-capacity-badge {
  display: inline-flex;
  min-height: 34px;
  flex: 0 0 auto;
  align-items: center;
  padding: 7px 11px;
  border: 1px solid rgba(74, 158, 255, .22);
  border-radius: var(--corner-radius);
  color: #a9c8ea;
  background: rgba(6, 25, 43, .38);
  font-size: .78rem;
  font-weight: 650;
  white-space: nowrap;
}

.organization-setup-form {
  gap: 18px;
  margin-top: 28px;
}

.organization-create-location {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(119, 157, 203, .22);
  border-radius: var(--corner-radius);
  background: rgba(7, 24, 42, .34);
}

.organization-create-location-heading,
.organization-create-location-actions,
.organization-create-location-result {
  display: flex;
  align-items: center;
  gap: 10px;
}

.organization-create-location-heading {
  justify-content: space-between;
}

.organization-create-location-heading > div:first-child {
  display: grid;
  gap: 3px;
}

.organization-create-location-heading small {
  color: var(--text-soft);
}

.organization-create-location-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.organization-create-location-result {
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid rgba(41, 208, 132, .24);
  border-radius: calc(var(--corner-radius) - 2px);
  color: #70e2ad;
  background: rgba(22, 142, 91, .10);
}

.organization-create-location-result strong {
  overflow: hidden;
  flex: 1 1 auto;
  color: inherit;
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organization-create-location-result a {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: .78rem;
  font-weight: 750;
}

.organization-create-location [data-create-location-feedback] {
  min-height: 1.25em;
  margin: 0;
}

.organization-create-location [data-create-location-feedback][data-state="success"] {
  color: #70e2ad;
}

.organization-create-location [data-create-location-feedback][data-state="error"] {
  color: #ff9eaa;
}

html[data-theme="light"] .organization-create-location {
  border-color: #d8e4f0;
  background: #f7fbff;
}

@media (max-width: 720px) {
  .organization-create-location-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .organization-create-location-actions {
    justify-content: stretch;
  }

  .organization-create-location-actions > * {
    flex: 1 1 160px;
  }
}

/* Application Admin: persistent task-oriented navigation */
.application-admin-nav {
  margin-bottom: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow: var(--shadow-soft);
}
.application-admin-nav__head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.application-admin-nav__brand {
  display: flex;
  min-width: 220px;
  align-items: center;
  gap: 11px;
  color: var(--text);
  text-decoration: none;
}
.application-admin-nav__brand-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: var(--blue);
  font-weight: 800;
}
.application-admin-nav__brand strong,
.application-admin-nav__brand small { display: block; }
.application-admin-nav__brand small { margin-top: 2px; color: var(--muted); font-size: .75rem; }
.application-admin-nav__search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  flex: 1;
  max-width: 620px;
  margin-left: auto;
  align-items: center;
  gap: 10px;
}
.application-admin-nav__search input { width: 100%; min-height: 44px; padding-right: 16px; }
.application-admin-nav__search button {
  position: relative;
  display: grid;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 0;
  place-items: center;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  cursor: pointer;
}
.application-admin-nav__search button svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: 0;
  transform: translate(-50%, -50%);
  transform-origin: center;
  pointer-events: none;
}
.application-admin-nav__search button:hover { color: #fff; background: color-mix(in srgb, var(--blue) 82%, #fff); }
.application-admin-nav__search button:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 34%, transparent); outline-offset: 2px; }
.application-admin-nav__groups {
  display: grid;
  grid-template-columns: 1.2fr .8fr .9fr 1.35fr;
  gap: 0;
}
.application-admin-nav__groups section { min-width: 0; padding: 13px 16px 15px; border-right: 1px solid var(--line); }
.application-admin-nav__groups section:last-child { border-right: 0; }
.application-admin-nav__groups section > span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.application-admin-nav__groups section > div { display: flex; flex-wrap: wrap; gap: 5px; }
.application-admin-nav__groups a {
  padding: 7px 9px;
  border-radius: 8px;
  color: var(--muted);
  font-size: .79rem;
  font-weight: 700;
  text-decoration: none;
}
.application-admin-nav__groups a:hover { color: var(--text); background: color-mix(in srgb, var(--blue) 8%, transparent); }
.application-admin-nav__groups a.is-active,
.application-admin-nav__brand.is-active {
  color: var(--blue);
}
.application-admin-nav__groups a.is-active {
  color: color-mix(in srgb, var(--blue) 78%, var(--text));
  background: color-mix(in srgb, var(--blue) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 24%, transparent);
}
.application-admin-task-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.application-admin-task-grid > a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 90px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  background: var(--panel);
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}
.application-admin-task-grid > a:hover { border-color: var(--blue); transform: translateY(-1px); }
.application-admin-task-grid > a > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 11px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  font-size: 1.1rem;
}
.application-admin-task-grid strong,
.application-admin-task-grid small { display: block; }
.application-admin-task-grid small { margin-top: 5px; color: var(--muted); line-height: 1.35; }
.application-admin-task-grid b { color: var(--blue); font-size: 1.45rem; }

@media (max-width: 1100px) {
  .application-admin-nav__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .application-admin-nav__groups section:nth-child(2) { border-right: 0; }
  .application-admin-nav__groups section:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .application-admin-task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .application-admin-nav { border-radius: 12px; }
  .application-admin-nav__head { align-items: stretch; flex-direction: column; gap: 12px; }
  .application-admin-nav__brand { min-width: 0; }
  .application-admin-nav__search { width: 100%; max-width: none; }
  .application-admin-nav__groups { grid-template-columns: 1fr; }
  .application-admin-nav__groups section,
  .application-admin-nav__groups section:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .application-admin-nav__groups section:last-child { border-bottom: 0; }
  .application-admin-task-grid { grid-template-columns: 1fr; }
}

/* Icon-only topbar actions use a consistent circular silhouette. */
.super-shell.is-authenticated .topbar-actions > .pill[data-theme-toggle] {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  flex: 0 0 48px !important;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  padding: 0 !important;
  border-radius: 50% !important;
}
.super-shell.is-authenticated .topbar-actions > .pill[data-theme-toggle] .theme-icon {
  width: auto;
  height: auto;
  line-height: 1;
}
.super-shell.is-authenticated .topbar-actions > .pill[data-theme-toggle] .theme-label { display: none; }

.application-admin-search-hero { min-height: 132px; }
.application-admin-search-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.application-admin-search-results .panel { margin-bottom: 0; }
.application-admin-result-list { display: grid; gap: 8px; margin-top: 16px; }
.application-admin-result-list > a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  text-decoration: none;
}
.application-admin-result-list > a:hover {
  border-color: color-mix(in srgb, var(--blue) 60%, var(--line));
  background: color-mix(in srgb, var(--blue) 8%, var(--panel));
}
.application-admin-result-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 10px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  font-weight: 800;
}
.application-admin-result-list strong,
.application-admin-result-list small { display: block; }
.application-admin-result-list small { margin-top: 4px; color: var(--muted); line-height: 1.35; }
.application-admin-result-list b { color: var(--blue); font-size: 1.4rem; }
.application-admin-search-empty { max-width: 860px; }
.application-admin-recent-searches { margin-top: 22px; }
.application-admin-recent-searches > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.application-admin-recent-searches a {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 90%, transparent);
}
.application-admin-recent-searches a:hover { color: var(--text); border-color: var(--blue); }

@media (max-width: 900px) {
  .application-admin-search-results { grid-template-columns: 1fr; }
}

.organization-access-heading {
  margin-bottom: 22px;
}

.organization-access-list {
  display: grid;
  gap: 10px;
  max-height: 330px;
  overflow-y: auto;
}

.super-shell.is-authenticated .organization-access-panel .workspace-card {
  min-width: 0;
  padding: 14px 15px;
  border-radius: var(--corner-radius) !important;
}

.organization-membership-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.organization-membership-copy > span:last-child {
  min-width: 0;
}

.organization-membership-copy strong,
.organization-membership-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organization-membership-icon {
  width: 38px;
  height: 38px;
}

.organization-membership-icon svg {
  width: 20px;
  height: 20px;
}

.super-shell.is-authenticated .organization-access-panel .soft-btn.small,
.super-shell.is-authenticated .organization-access-panel .status-chip {
  min-height: 34px;
  flex: 0 0 auto;
  padding: 7px 10px;
}

.organization-access-empty {
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: var(--corner-radius);
  text-align: center;
}

.organization-access-empty p {
  margin: 5px 0 0;
}

.organization-next-steps {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.organization-next-steps > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  cursor: pointer;
  font-size: .98rem;
  font-weight: 800;
  list-style: none;
}

.organization-next-steps > summary::-webkit-details-marker {
  display: none;
}

.organization-next-steps > summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 28%, transparent);
  outline-offset: 4px;
  border-radius: .35rem;
}

.organization-next-steps > summary::after {
  content: "+";
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--blue);
  font-size: 1rem;
}

.organization-next-steps[open] > summary {
  margin-bottom: 16px;
}

.organization-next-steps[open] > summary::after {
  content: "−";
}

.organization-next-steps ol {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.organization-next-steps li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}

.organization-next-steps li > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(74, 158, 255, .32);
  border-radius: 50%;
  color: #78b8ff;
  background: rgba(42, 135, 255, .08);
  font-size: .76rem;
  font-weight: 750;
}

.organization-next-steps strong,
.organization-next-steps small {
  display: block;
}

.organization-next-steps small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.4;
}

.super-shell.is-authenticated .organization-pending-panel {
  margin: 18px 0 0 !important;
}

.organization-search-results[hidden],
.organization-search-spinner[hidden],
.industry-results[hidden] {
  display: none !important;
}

.organization-search-status {
  min-height: 0;
}

.organization-search-status:empty {
  display: none;
}

.setup-secondary-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--corner-radius);
  color: var(--muted);
  background: color-mix(in srgb, var(--brand) 6%, transparent);
}

.super-shell.is-authenticated .organization-primary-card .setup-secondary-action .soft-btn {
  min-height: 42px;
  padding: 9px 14px;
}

html[data-theme="light"] .organization-page-header h1 {
  color: #10213a;
}

html[data-theme="light"] .organization-capacity-badge,
html[data-theme="light"] .setup-secondary-action {
  background: #f5f9ff;
}

html[data-theme="light"] .organization-capacity-badge {
  color: #3f638a;
  border-color: #d7e5f2;
}

@media (max-width: 1080px) {
  .organization-workspace-grid {
    grid-template-columns: 1fr;
  }

  .organization-access-list {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    max-height: none;
  }

  .organization-next-steps ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .organization-page-header,
  .organization-card-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .organization-page-header {
    gap: 10px;
  }

  .organization-page-back {
    padding-left: 0;
  }

  .organization-capacity-badge {
    white-space: normal;
  }

  .super-shell.is-authenticated .organization-primary-card,
  .super-shell.is-authenticated .organization-access-panel {
    padding: 20px;
  }

  .setup-secondary-action {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .setup-secondary-action .soft-btn {
    width: 100%;
  }

  .organization-next-steps ol {
    grid-template-columns: 1fr;
  }
}

/* Flat role-aware navigation and employee-centered management. */
.super-shell.is-authenticated .sidebar-layer-nav,
.super-shell.is-authenticated .social-shell-nav {
  display: none !important;
}

.super-shell.is-authenticated .sidebar-flat-nav {
  display: flex !important;
  min-height: calc(100vh - 176px);
  gap: 12px;
}

.super-shell.is-authenticated .sidebar-flat-nav .sidebar-primary-main,
.super-shell.is-authenticated .sidebar-flat-nav .sidebar-primary-bottom {
  gap: 3px;
}

.super-shell.is-authenticated .sidebar-flat-nav .sidebar-simple-link {
  min-height: 46px;
  border: 0;
  border-radius: 0;
  padding-inline: 18px;
}

.sidebar-flat-heading {
  margin: 18px 18px 7px;
  color: #7187a3;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.people-management-hero {
  display: flex !important;
  justify-content: space-between;
  gap: 24px;
}

.people-management-hero h1 {
  font-size: clamp(2rem, 3vw, 3rem) !important;
}

.people-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid rgba(116, 151, 190, .16);
  border-radius: 18px;
  background: rgba(116, 151, 190, .14);
}

.people-summary-item {
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  color: var(--text) !important;
  background: rgba(10, 31, 52, .96);
  text-decoration: none;
}

.people-summary-item:hover {
  background: rgba(16, 44, 73, .98);
}

.people-summary-item strong,
.people-summary-item small {
  display: block;
}

.people-summary-item strong {
  font-size: 1.55rem;
  line-height: 1.05;
}

.people-summary-item small {
  margin-top: 4px;
  color: var(--muted);
}

.people-summary-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 50%;
  color: #7eb9ff;
  background: rgba(30, 123, 255, .16);
  font-weight: 900;
}

.people-summary-item.success .people-summary-icon {
  color: #4ade80;
  background: rgba(34, 197, 94, .14);
}

.people-summary-item.warning .people-summary-icon {
  color: #fbbf24;
  background: rgba(245, 158, 11, .14);
}

.people-invite-disclosure {
  margin-bottom: 18px;
  border: 1px solid rgba(116, 151, 190, .16);
  border-radius: 16px;
  background: rgba(10, 31, 52, .58);
}

.people-invite-disclosure > summary {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  color: var(--blue-2);
  cursor: pointer;
  font-weight: 800;
}

.people-invite-disclosure > summary small {
  color: var(--muted);
  font-weight: 500;
}

.people-invite-disclosure > .add-employee-panel {
  margin: 0;
  border: 0 !important;
  border-top: 1px solid rgba(116, 151, 190, .14) !important;
  border-radius: 0 0 16px 16px !important;
}

.people-directory-panel .module-toolbar {
  grid-template-columns: minmax(180px, .55fr) minmax(540px, 1.45fr) !important;
}

.people-filter-form {
  grid-template-columns: minmax(190px, 1.25fr) minmax(130px, .7fr) minmax(150px, .8fr) auto auto !important;
}

.people-directory-table,
.people-directory-table table,
.people-directory-table tbody,
.people-directory-table tr,
.people-directory-table td:last-child {
  overflow: visible !important;
}

.people-directory-table table {
  min-width: 820px;
}

.people-directory-table th:last-child,
.people-directory-table td:last-child {
  width: 64px;
  text-align: right;
}

.device-status-chip {
  width: fit-content;
  max-width: 220px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  padding: 7px 10px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 999px;
  color: #a8bad1;
  background: rgba(100, 116, 139, .10);
  font-size: .78rem;
  font-weight: 750;
}

.device-status-chip::before {
  width: 7px;
  height: 7px;
  content: "";
  border-radius: 50%;
  background: currentColor;
}

.device-status-chip small {
  flex-basis: 100%;
  padding-left: 15px;
  color: var(--muted);
  font-weight: 500;
}

.device-status-chip.approved { color: #4ade80; border-color: rgba(74, 222, 128, .25); background: rgba(34, 197, 94, .08); }
.device-status-chip.pending { color: #fbbf24; border-color: rgba(251, 191, 36, .28); background: rgba(245, 158, 11, .08); }
.device-status-chip.rejected,
.device-status-chip.revoked { color: #fb7185; border-color: rgba(251, 113, 133, .26); background: rgba(244, 63, 94, .08); }

.people-action-menu {
  position: relative;
  display: inline-block;
  text-align: left;
}

.people-action-trigger {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(116, 151, 190, .18);
  border-radius: 10px;
  color: var(--text);
  background: rgba(11, 31, 52, .72);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  list-style: none;
}

.people-action-trigger::-webkit-details-marker,
.people-action-popover summary::-webkit-details-marker {
  display: none;
}

.people-action-popover {
  position: absolute;
  z-index: 80;
  top: calc(100% + 7px);
  right: 0;
  width: 260px;
  padding: 9px;
  border: 1px solid rgba(116, 151, 190, .22);
  border-radius: 14px;
  background: #0c2238;
  box-shadow: 0 22px 52px rgba(0, 0, 0, .38);
}

.people-action-popover > p {
  margin: 9px 10px 5px;
  color: #7187a3;
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.people-action-popover > a,
.people-action-popover > button,
.people-action-popover > details > summary,
.people-action-popover > form > button {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  color: var(--text) !important;
  background: transparent;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font-size: .84rem;
  font-weight: 650;
}

.people-action-popover > a:hover,
.people-action-popover > button:hover,
.people-action-popover > details > summary:hover,
.people-action-popover > form > button:hover {
  background: rgba(74, 157, 255, .10);
}

.people-promote-dialog {
  width: min(820px, calc(100vw - 40px));
  max-width: 820px;
  max-height: min(88vh, 820px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(116, 151, 190, .28);
  border-radius: 22px;
  color: var(--text);
  background: #0c2238;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}

.people-promote-dialog::backdrop {
  background: rgba(2, 10, 20, .72);
  backdrop-filter: blur(5px);
}

.people-promote-form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(88vh, 820px);
}

.people-promote-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 26px 20px;
  border-bottom: 1px solid rgba(116, 151, 190, .16);
}

.people-promote-header h2,
.people-promote-header p {
  margin: 0;
}

.people-promote-header .eyebrow {
  margin-bottom: 7px;
}

.people-promote-header .muted {
  margin-top: 6px;
}

.people-modal-close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(116, 151, 190, .22);
  border-radius: 11px;
  color: var(--text);
  background: rgba(7, 21, 36, .42);
  cursor: pointer;
  font-size: 1.45rem;
  line-height: 1;
}

.people-modal-close:hover {
  border-color: rgba(74, 157, 255, .45);
  background: rgba(74, 157, 255, .12);
}

.people-promote-dialog .promote-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 22px 26px;
  overflow-y: auto;
}

.people-promote-dialog .promote-grid label {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.people-promote-dialog .promote-grid .span-2 {
  grid-column: 1 / -1;
}

.people-promote-dialog .promote-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 26px 20px;
  border-top: 1px solid rgba(116, 151, 190, .16);
  background: rgba(6, 21, 36, .36);
}

.people-promote-dialog .promote-actions button {
  min-width: 132px;
}

.people-action-popover .danger-link {
  margin-top: 6px;
  border-top: 1px solid rgba(116, 151, 190, .14);
  color: #fb7185 !important;
}

.menu-count {
  padding: 3px 7px;
  border-radius: 999px;
  color: #fbbf24;
  background: rgba(245, 158, 11, .12);
  font-size: .65rem;
}

.people-device-menu {
  position: relative;
}

.people-device-panel {
  position: absolute;
  z-index: 90;
  top: -58px;
  right: calc(100% + 10px);
  width: min(430px, calc(100vw - var(--superhub-sidebar-width) - 80px));
  max-height: 460px;
  overflow: auto;
  padding: 16px;
  border: 1px solid rgba(116, 151, 190, .22);
  border-radius: 14px;
  background: #0c2238;
  box-shadow: 0 22px 52px rgba(0, 0, 0, .38);
}

.people-device-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(116, 151, 190, .14);
  border-radius: 12px;
  background: rgba(6, 21, 36, .55);
}

.people-device-row strong,
.people-device-row small {
  display: block;
}

.people-device-row small {
  margin-top: 3px;
  color: var(--muted);
}

.device-action-form {
  display: flex;
  gap: 7px;
}

.device-action-form .soft-btn {
  min-height: 34px;
  padding: 6px 9px;
}

.device-action-form .success { color: #4ade80 !important; }
.device-action-form .danger { color: #fb7185 !important; }

.focused-device-approval {
  scroll-margin-top: 96px;
  border-color: rgba(245, 158, 11, .48) !important;
  box-shadow: 0 18px 44px rgba(245, 158, 11, .08);
}

.focused-device-approval:focus {
  outline: 3px solid rgba(245, 158, 11, .22);
  outline-offset: 3px;
}

.focused-device-approval .module-toolbar {
  align-items: center;
}

.focused-device-approval .people-device-row {
  margin-top: 16px;
  padding: 16px;
}

.focused-device-approval .device-action-form button {
  min-width: 112px;
}

html[data-theme="light"] .people-summary-item,
html[data-theme="light"] .people-action-popover,
html[data-theme="light"] .people-device-panel,
html[data-theme="light"] .people-promote-dialog {
  background: #ffffff;
}

html[data-theme="light"] .people-promote-dialog .promote-actions,
html[data-theme="light"] .people-modal-close {
  background: rgba(239, 246, 255, .82);
}

html[data-theme="light"] .focused-device-approval .people-device-row {
  background: rgba(239, 246, 255, .92);
}

html[data-theme="light"] .people-invite-disclosure,
html[data-theme="light"] .people-action-trigger {
  background: rgba(255, 255, 255, .82);
}

@media (max-width: 1050px) {
  .people-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people-directory-panel .module-toolbar { grid-template-columns: 1fr !important; }
  .people-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 720px) {
  .people-management-hero { align-items: flex-start !important; flex-direction: column; }
  .people-summary-grid { grid-template-columns: 1fr 1fr; }
  .people-summary-item { min-height: 76px; padding: 12px; }
  .people-filter-form { grid-template-columns: 1fr !important; }
  .people-action-popover,
  .people-device-panel { position: fixed; inset: auto 12px 76px; width: auto; max-height: 65vh; overflow: auto; }
  .focused-device-approval .people-device-row { grid-template-columns: 1fr; }
  .focused-device-approval .device-action-form { width: 100%; }
  .focused-device-approval .device-action-form button { flex: 1; }
  .people-promote-dialog { width: calc(100vw - 20px); max-width: none; max-height: 92vh; border-radius: 18px; }
  .people-promote-form { max-height: 92vh; }
  .people-promote-header { padding: 20px 18px 16px; }
  .people-promote-dialog .promote-grid { grid-template-columns: 1fr; padding: 18px; }
  .people-promote-dialog .promote-grid .span-2 { grid-column: auto; }
  .people-promote-dialog .promote-actions { padding: 14px 18px 18px; }
  .people-promote-dialog .promote-actions button { min-width: 0; flex: 1; }
}

/* Keep the collapse control in its own footer instead of covering Settings. */
.super-shell.is-authenticated .sidebar,
.super-shell.is-authenticated.sidebar-collapsed .sidebar {
  overflow-y: hidden !important;
}

.super-shell.is-authenticated .sidebar-flat-nav {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-bottom: 8px;
}

.super-shell.is-authenticated .sidebar-utility-footer {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(116, 151, 190, .18);
  background: rgba(5, 18, 31, .98);
}

.super-shell.is-authenticated .sidebar-utility-footer .sidebar-primary-bottom {
  display: grid !important;
  gap: 3px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.super-shell.is-authenticated .sidebar-collapse-footer {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 4px 0;
  border-top: 1px solid rgba(116, 151, 190, .18);
  background: inherit;
}

.super-shell.is-authenticated .sidebar-collapse-footer .sidebar-toggle {
  width: 100% !important;
  margin: 0 !important;
}

.super-shell.is-authenticated.sidebar-collapsed.sidebar-hover-locked .sidebar .sidebar-collapse-footer .sidebar-toggle,
.super-shell.is-authenticated.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-collapse-footer .sidebar-toggle {
  width: 46px !important;
  margin-inline: auto !important;
}

@media (max-width: 1100px) {
  .super-shell.is-authenticated .sidebar-collapse-footer {
    display: none !important;
  }
}

.settings-billing-current {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  padding: 1.15rem;
  border: 1px solid color-mix(in srgb, var(--blue) 32%, var(--line));
  border-radius: .9rem;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}

.settings-billing-current h3,
.settings-billing-current p {
  margin: 0;
}

.settings-billing-current h3 {
  font-size: 1.45rem;
}

.settings-billing-current p {
  margin-top: .35rem;
  color: var(--muted);
}

.settings-billing-status {
  display: grid;
  justify-items: end;
  gap: .4rem;
}

.settings-billing-status span,
.settings-plan-card header > span {
  padding: .3rem .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  color: var(--blue);
  font-size: .72rem;
  font-weight: 800;
}

.settings-billing-status strong {
  font-size: 1.35rem;
}

.settings-billing-status small,
.settings-plan-price small {
  color: var(--muted);
  font-size: .78rem;
}

.settings-billing-notice {
  grid-column: 1 / -1;
  padding: .7rem .8rem;
  border-radius: .65rem;
  background: color-mix(in srgb, #f59e0b 12%, transparent);
}

.settings-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: .8rem;
}

.settings-plan-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .8rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: color-mix(in srgb, var(--surface) 86%, var(--bg));
}

.settings-plan-card.is-current {
  border-color: color-mix(in srgb, var(--blue) 58%, var(--line));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 18%, transparent);
}

.settings-plan-card header {
  display: flex;
  justify-content: space-between;
  gap: .7rem;
}

.settings-plan-card h4,
.settings-plan-card p {
  margin: 0;
}

.settings-plan-card p {
  margin-top: .25rem;
  color: var(--muted);
  font-size: .82rem;
}

.settings-plan-price {
  font-size: 1.6rem;
}

.settings-plan-card dl {
  display: grid;
  gap: .4rem;
  margin: 0;
}

.settings-plan-card dl div {
  display: flex;
  justify-content: space-between;
  gap: .7rem;
  padding-top: .4rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
}

.settings-plan-card dt {
  color: var(--muted);
}

.settings-plan-card dd {
  margin: 0;
  text-align: right;
  font-weight: 700;
}

.settings-plan-card select,
.settings-plan-card .btn {
  width: 100%;
  margin-top: auto;
}

@media (max-width: 680px) {
  .settings-billing-current {
    grid-template-columns: 1fr;
  }

  .settings-billing-status {
    justify-items: start;
  }
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar-utility-footer {
  background: #ffffff;
  border-top-color: #d7e0ea;
}

/* One authoritative dashboard clock. Eligibility mirrors the attendance service. */
.sh-dashboard-home .sh-clock-hero-single {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
  min-height: 188px;
  padding: 24px 28px;
  gap: 24px;
  background:
    radial-gradient(circle at 12% 50%, rgba(62, 219, 122, .14), transparent 22rem),
    radial-gradient(circle at 92% 45%, rgba(33, 125, 255, .18), transparent 18rem),
    linear-gradient(145deg, rgba(17, 48, 82, .92), rgba(8, 24, 42, .76));
}

.sh-dashboard-home .sh-clock-hero-single.is-unavailable {
  border-color: rgba(245, 158, 11, .34);
  background:
    radial-gradient(circle at 12% 50%, rgba(245, 158, 11, .10), transparent 22rem),
    linear-gradient(145deg, rgba(17, 48, 82, .92), rgba(8, 24, 42, .76));
}

.sh-clock-hero-single .sh-clock-status h2 {
  max-width: 32rem;
  font-size: clamp(1.65rem, 2.2vw, 2.25rem);
}

.sh-clock-hero-single.is-unavailable .sh-clock-status p span {
  background: #f59e0b;
  box-shadow: 0 0 16px rgba(245, 158, 11, .42);
}

.sh-clock-status > small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}

.sh-clock-hero-single .sh-clock-action-panel {
  min-height: 138px;
  padding: 14px 0 14px 26px;
}

.sh-clock-hero-single .sh-dashboard-current-time {
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
}

.sh-clock-hero-single .sh-dashboard-clock-submit {
  width: 100%;
  min-height: 50px;
  font-size: 1rem;
}

.sh-clock-schedule-link {
  display: inline-flex;
  justify-content: center;
  margin-top: 12px;
  color: #77b7ff;
  font-weight: 700;
  text-decoration: none;
}

.sh-clock-schedule-link:hover {
  text-decoration: underline;
}

.sh-dashboard-clock-submit:disabled,
.sh-sticky-clock-action:disabled,
.clock-pill:disabled {
  cursor: not-allowed;
  opacity: .58;
  filter: saturate(.45);
  box-shadow: none;
}

.sh-sticky-clock.is-unavailable .sh-sticky-clock-orb {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, .42);
}

.clock-unavailable-reason {
  display: block;
  max-width: 34rem;
  margin-top: 9px;
  color: #fbbf24;
  line-height: 1.45;
}

html[data-theme="light"] .sh-dashboard-home .sh-clock-hero-single {
  background:
    radial-gradient(circle at 10% 50%, rgba(34, 197, 94, .10), transparent 22rem),
    radial-gradient(circle at 92% 45%, rgba(37, 99, 235, .10), transparent 18rem),
    linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(239, 246, 255, .94));
}

@media (max-width: 1500px) {
  .sh-dashboard-home {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sh-dashboard-home .social-home-today {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
  }

  .sh-dashboard-home .sh-clock-hero-single {
    grid-template-columns: minmax(0, 1fr) minmax(270px, 330px) !important;
    gap: 24px !important;
    padding: 24px 28px !important;
  }

  .sh-dashboard-home .sh-clock-hero-single .sh-clock-action-panel {
    grid-column: auto !important;
    grid-template-columns: 1fr !important;
    min-height: 138px !important;
    padding: 14px 0 14px 26px !important;
    border-top: 0;
    border-left: 1px solid rgba(136, 169, 204, .18);
    text-align: center;
  }
}

@media (min-width: 1121px) and (max-width: 1500px) {
  .sh-dashboard-home .social-home-today {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1120px) {
  .sh-dashboard-home .social-home-today {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 900px) {
  .sh-dashboard-home .sh-clock-hero-single {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 24px !important;
    gap: 20px !important;
  }

  .sh-dashboard-home .sh-clock-hero-single .sh-clock-action-panel {
    grid-column: 1 / -1 !important;
    min-height: 0 !important;
    padding: 22px 0 0 !important;
    border-left: 0;
    border-top: 1px solid rgba(136, 169, 204, .18);
    border-radius: 0;
    background: transparent;
    align-content: start;
    text-align: left;
  }
}

@media (min-width: 621px) and (max-width: 900px) {
  .sh-dashboard-home .sh-clock-hero-single .sh-clock-status {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(210px, .65fr);
    column-gap: 30px;
    align-items: center;
  }

  .sh-clock-hero-single .sh-clock-status > p,
  .sh-clock-hero-single .sh-clock-status > h2,
  .sh-clock-hero-single .sh-clock-status > strong,
  .sh-clock-hero-single .sh-clock-status > small {
    grid-column: 1;
  }

  .sh-clock-hero-single .sh-clock-status > p {
    margin-bottom: 14px;
  }

  .sh-clock-hero-single .sh-next-shift {
    grid-column: 2;
    grid-row: 1 / 5;
    align-self: center;
    margin-top: 0;
    padding-left: 24px;
    border-left: 1px solid rgba(136, 169, 204, .18);
  }

  .sh-dashboard-home .sh-clock-hero-single .sh-clock-action-panel {
    grid-template-columns: minmax(0, 1fr) minmax(240px, .9fr) !important;
    column-gap: 28px;
    row-gap: 6px;
    align-items: center;
    justify-items: start;
  }

  .sh-clock-hero-single .sh-clock-action-panel > p,
  .sh-clock-hero-single .sh-clock-action-panel > strong,
  .sh-clock-hero-single .sh-clock-action-panel > span {
    grid-column: 1;
    margin-block: 0;
  }

  .sh-clock-hero-single .sh-clock-action-panel form,
  .sh-clock-hero-single .sh-clock-action-panel > .sh-dashboard-clock-submit {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    justify-self: stretch;
    width: 100%;
  }

  .sh-clock-hero-single .sh-clock-schedule-link {
    grid-column: 2;
    justify-self: center;
    margin-top: 5px;
  }

  .sh-admin-attendance-head {
    align-items: end;
    flex-direction: row;
  }

  .sh-admin-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .sh-dashboard-home .sh-clock-hero-single {
    padding: 20px !important;
  }

  .sh-dashboard-home .sh-clock-hero-single .sh-clock-action-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: stretch;
  }

  .sh-clock-hero-single .sh-clock-action-panel form,
  .sh-clock-hero-single .sh-clock-action-panel .sh-dashboard-clock-submit {
    width: 100%;
  }
}

/* Role-aware Home action center. */
.sh-role-actions {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(116, 151, 190, .22);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(14, 39, 66, .78), rgba(8, 24, 42, .62));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 18px 38px rgba(0, 0, 0, .12);
}

.sh-role-actions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.sh-role-actions-head .eyebrow {
  margin: 0 0 6px;
}

.sh-role-actions-head h2 {
  margin: 0;
  font-size: 1.45rem;
}

.sh-role-actions-head > div > span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.sh-role-action-total {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  min-width: 44px;
  height: 44px;
  border: 1px solid rgba(251, 191, 36, .36);
  border-radius: 14px;
  color: #fbbf24;
  background: rgba(245, 158, 11, .12);
  font-size: 1.05rem;
}

.sh-role-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sh-role-action-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 13px;
  border: 1px solid rgba(116, 151, 190, .18);
  border-radius: 14px;
  color: var(--text);
  background: rgba(6, 22, 40, .48);
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.sh-role-action-card:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 156, 255, .46);
  background: rgba(13, 42, 72, .72);
}

.sh-role-action-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  color: #6eb5ff;
  background: rgba(37, 99, 235, .14);
}

.sh-role-action-icon svg {
  width: 24px;
  height: 24px;
}

.sh-role-action-card.is-warning .sh-role-action-icon,
.sh-role-action-card.is-warning .sh-role-action-badge {
  color: #fbbf24;
  background: rgba(245, 158, 11, .13);
}

.sh-role-action-card.is-critical .sh-role-action-icon,
.sh-role-action-card.is-critical .sh-role-action-badge {
  color: #fb7185;
  background: rgba(244, 63, 94, .13);
}

.sh-role-action-card.is-good .sh-role-action-icon,
.sh-role-action-card.is-good .sh-role-action-badge {
  color: #4ade80;
  background: rgba(34, 197, 94, .13);
}

.sh-role-action-copy {
  min-width: 0;
}

.sh-role-action-copy strong,
.sh-role-action-copy small {
  display: block;
}

.sh-role-action-copy strong {
  margin-bottom: 3px;
  font-size: .98rem;
}

.sh-role-action-copy small {
  overflow: hidden;
  color: var(--muted);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-role-action-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #8ec5ff;
  background: rgba(37, 99, 235, .13);
  font-size: .74rem;
  font-weight: 800;
  white-space: nowrap;
}

.sh-role-action-arrow {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.sh-role-actions-empty {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border: 1px solid rgba(34, 197, 94, .22);
  border-radius: 14px;
  background: rgba(34, 197, 94, .08);
}

.sh-role-actions-empty > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #4ade80;
  background: rgba(34, 197, 94, .14);
  font-weight: 900;
}

.sh-role-actions-empty strong,
.sh-role-actions-empty small {
  display: block;
}

.sh-role-actions-empty small {
  margin-top: 3px;
  color: var(--muted);
}

.dashboard-review-target {
  scroll-margin-top: 110px;
}

.dashboard-review-target:target {
  outline: 3px solid rgba(59, 130, 246, .32);
  outline-offset: -3px;
  background: rgba(37, 99, 235, .12) !important;
  animation: dashboard-review-pulse 1.25s ease-out 1;
}

@keyframes dashboard-review-pulse {
  0% { box-shadow: inset 0 0 0 999px rgba(59, 130, 246, .20); }
  100% { box-shadow: inset 0 0 0 999px rgba(59, 130, 246, 0); }
}

html[data-theme="light"] .sh-role-actions {
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(242, 247, 253, .94));
}

html[data-theme="light"] .sh-role-action-card {
  background: rgba(255, 255, 255, .88);
}

html[data-theme="light"] .sh-role-action-card:hover {
  background: #ffffff;
}

@media (max-width: 760px) {
  .sh-role-actions {
    padding: 18px;
  }

  .sh-role-action-grid {
    grid-template-columns: 1fr;
  }

  .sh-role-action-card {
    grid-template-columns: 42px minmax(0, 1fr) auto 16px;
    min-height: 82px;
    padding: 13px;
  }

  .sh-role-action-icon {
    width: 42px;
    height: 42px;
  }
}

/* Progressive disclosure keeps creation workflows close without crowding lists. */
.app-admin-action-card {
  position: relative;
  min-height: 154px;
  padding-right: 70px;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}

.app-admin-action-card:hover {
  border-color: color-mix(in srgb, var(--blue) 48%, var(--line));
  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
  transform: translateY(-2px);
}

.app-admin-action-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 13%, transparent);
}

.app-admin-action-icon svg {
  width: 22px;
  height: 22px;
}

/* Application admin: separate customer accounts, subscriptions, and platform operations. */
.admin-attention-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 28px;
  padding: 20px 24px;
  border: 1px solid color-mix(in srgb, var(--green) 42%, var(--line));
  border-radius: 22px;
  background: color-mix(in srgb, var(--green) 8%, var(--surface));
}

.admin-attention-strip.has-issues {
  border-color: color-mix(in srgb, var(--amber) 52%, var(--line));
  background: color-mix(in srgb, var(--amber) 8%, var(--surface));
}

.admin-attention-strip strong,
.admin-attention-strip small { display: block; }
.admin-attention-strip small { margin-top: 4px; color: var(--muted); }
.admin-attention-counts { display: flex; gap: 10px; }
.admin-attention-counts a {
  display: grid;
  min-width: 76px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: center;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}
.admin-attention-counts strong { color: var(--text); font-size: 1.25rem; }
.admin-attention-counts span { color: var(--muted); font-size: .74rem; }

.admin-dashboard-section { margin-bottom: 30px; }
.admin-dashboard-section h2 { margin: 0; }
.admin-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.admin-overview-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-overview-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: 22px 48px 22px 22px;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  transition: border-color .16s ease, transform .16s ease;
}
.admin-overview-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.admin-overview-card > span,.admin-overview-card small { color: var(--muted); }
.admin-overview-card > strong { font-size: clamp(1.65rem, 3vw, 2.3rem); }
.admin-overview-card b { position: absolute; top: 50%; right: 22px; color: var(--blue); font-size: 1.8rem; transform: translateY(-50%); }

.admin-scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.admin-scope-card {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 22px;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
}
.admin-scope-card:hover { border-color: var(--blue); }
.admin-scope-card h3 { margin: 0 0 5px; }
.admin-scope-card small { color: var(--muted); }
.admin-scope-icon { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 16px; color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, transparent); font-size: 1.35rem; }
.admin-scope-stats { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 4px 8px; min-width: 152px; }
.admin-scope-stats strong { color: var(--text); font-size: 1.25rem; text-align: right; }
.admin-scope-stats span { color: var(--muted); font-size: .76rem; }

/* Scope-safe subscription plan editor. */
.plan-scope-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.plan-scope-tabs a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  padding: 18px 20px;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.plan-scope-tabs a.is-active { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 13%, var(--surface)); box-shadow: inset 4px 0 0 var(--blue); }
.plan-scope-tabs a span { font-weight: 850; }
.plan-scope-tabs a strong { grid-row: span 2; align-self: center; font-size: 1.7rem; }
.plan-scope-tabs a small { color: var(--muted); }
.plan-scope-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}
.plan-scope-summary h2 { margin: 0 0 7px; }
.plan-scope-summary-stat { display: grid; min-width: 150px; text-align: right; }
.plan-scope-summary-stat strong { color: var(--text); font-size: 2rem; }
.plan-scope-summary-stat span { color: var(--muted); }
.plan-create-disclosure { margin-bottom: 24px; }
.plan-create-disclosure .workflow-disclosure-icon { color: var(--blue); font-size: 1.5rem; }
.plan-create-disclosure .workflow-disclosure-body { padding-bottom: 20px; }

@media (max-width: 900px) {
  .admin-scope-grid,.admin-overview-grid,.admin-overview-grid--two { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .admin-attention-strip,.plan-scope-summary { align-items: stretch; flex-direction: column; }
  .admin-attention-counts { display: grid; grid-template-columns: repeat(3, 1fr); }
  .admin-attention-counts a { min-width: 0; }
  .admin-scope-card { grid-template-columns: 46px minmax(0, 1fr); }
  .admin-scope-stats { grid-column: 1 / -1; grid-template-columns: auto 1fr auto 1fr; min-width: 0; padding-top: 12px; border-top: 1px solid var(--line); }
  .admin-scope-stats strong { text-align: left; }
  .plan-scope-tabs { grid-template-columns: 1fr; }
  .plan-scope-summary-stat { text-align: left; }
}

.workflow-disclosure {
  padding: 0 !important;
  overflow: hidden;
}

.workflow-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.workflow-disclosure > summary::-webkit-details-marker {
  display: none;
}

.workflow-disclosure > summary::after {
  content: "\203A";
  margin-left: auto;
  color: var(--muted);
  font-size: 1.7rem;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform .16s ease;
}

.workflow-disclosure[open] > summary::after {
  transform: rotate(-90deg);
}

.workflow-disclosure > summary:hover {
  background: rgba(37, 99, 235, .08);
}

.workflow-disclosure > summary:focus-visible {
  outline: 3px solid rgba(59, 130, 246, .42);
  outline-offset: -3px;
}

.workflow-disclosure-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #71b7ff;
  background: rgba(37, 99, 235, .15);
  font-size: 1.25rem;
  font-weight: 800;
}

.workflow-disclosure > summary strong {
  font-size: 1.05rem;
}

.workflow-disclosure-body {
  padding: 4px 18px 18px;
  border-top: 1px solid rgba(116, 151, 190, .16);
}

.workflow-disclosure-body > .muted:first-child {
  margin-top: 14px;
}

html[data-theme="light"] .workflow-disclosure > summary:hover {
  background: rgba(37, 99, 235, .055);
}

@media (max-width: 620px) {
  .workflow-disclosure > summary {
    min-height: 62px;
    padding: 12px 14px;
  }

  .workflow-disclosure-body {
    padding: 4px 14px 14px;
  }
}
/* Settings workspace */
.settings-workspace-header {
  margin: 0 0 1.25rem;
}

.settings-workspace-header h1 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3rem);
}

.settings-workspace-header p,
.settings-section-heading p,
.settings-workspace-panel p,
.settings-workspace-panel small {
  color: var(--muted);
}

.settings-workspace {
  display: block;
  min-width: 0;
}

.settings-workspace-panel {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 1rem;
}

.settings-category-nav {
  display: flex;
  align-items: end;
  gap: clamp(.25rem, 1vw, 1rem);
  margin: 0 0 1.25rem;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--line);
  background: transparent;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}

.settings-category-nav a {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: .55rem;
  min-height: 3.15rem;
  margin-bottom: -1px;
  padding: .65rem .35rem .8rem;
  color: var(--text-soft);
  border: 0;
  border-bottom: 3px solid transparent;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}

.settings-category-nav a span {
  display: grid;
  place-items: center;
  width: 1.5rem;
  color: var(--muted);
}

.settings-category-nav a:hover,
.settings-category-nav a.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  background: transparent;
}

.settings-category-nav a:focus-visible {
  color: var(--blue);
  outline: 2px solid color-mix(in srgb, var(--blue) 65%, transparent);
  outline-offset: -2px;
  border-radius: .35rem .35rem 0 0;
}

.settings-workspace-panel {
  padding: clamp(1rem, 2.2vw, 1.75rem);
}

.settings-section-heading {
  margin-bottom: 1rem;
}

.settings-section-heading h2,
.settings-policy-card h3,
.settings-section-block h3,
.settings-device-summary h3 {
  margin: 0 0 .35rem;
}

.settings-workspace-form,
.settings-access-grid {
  display: grid;
  gap: 1rem;
}

.settings-policy-card,
.settings-section-block,
.settings-device-summary,
.settings-collapsible-row,
.settings-empty-category {
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: color-mix(in srgb, var(--surface) 75%, var(--bg));
  padding: 1rem;
}

.settings-policy-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}

.settings-policy-option {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.settings-policy-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.settings-policy-option-body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-height: 100%;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: color-mix(in srgb, var(--surface) 68%, var(--bg));
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.settings-policy-option:hover .settings-policy-option-body {
  border-color: color-mix(in srgb, var(--blue) 55%, var(--line));
}

.settings-policy-option input:focus-visible + .settings-policy-option-body {
  outline: 3px solid color-mix(in srgb, var(--blue) 32%, transparent);
  outline-offset: 2px;
}

.settings-policy-option input:checked + .settings-policy-option-body {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 45%, transparent);
}

.settings-policy-option-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  color: var(--text);
  font-weight: 850;
}

.settings-policy-option-body small {
  color: var(--muted);
  line-height: 1.5;
}

.settings-policy-rollout {
  display: grid;
  gap: .25rem;
  margin-top: 1rem;
  padding: .85rem 1rem;
  border-left: 3px solid var(--blue);
  border-radius: 0 .65rem .65rem 0;
  background: color-mix(in srgb, var(--blue) 8%, transparent);
}

.settings-policy-rollout span {
  color: var(--muted);
  line-height: 1.45;
}

.settings-policy-note {
  margin: .8rem 0 0;
}

.settings-channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: .8rem 0;
}

.settings-channel-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .2rem .75rem;
  align-items: center;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: .7rem;
  cursor: pointer;
}

.settings-channel-card span {
  grid-column: 1;
  font-weight: 800;
}

.settings-channel-card strong {
  grid-column: 1;
  color: var(--text);
  font-size: .82rem;
}

.settings-channel-card small {
  grid-column: 1;
  color: var(--muted);
  line-height: 1.35;
}

.settings-channel-card input {
  grid-column: 2;
  grid-row: 1 / span 3;
  width: 1.2rem;
  height: 1.2rem;
}

.settings-device-summary {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto auto;
  gap: 1rem;
  align-items: center;
}

.settings-device-summary dl {
  display: flex;
  gap: .65rem;
  margin: 0;
}

.settings-device-summary dl div {
  min-width: 88px;
  padding: .7rem;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: .6rem;
}

.settings-device-summary dt {
  color: var(--muted);
  font-size: .76rem;
}

.settings-device-summary dd {
  margin: .2rem 0 0;
  font-size: 1.45rem;
  font-weight: 900;
}

.device-approvals-hero {
  align-items: flex-end;
}

.device-approval-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .8rem;
  margin-bottom: 1rem;
}

.device-approval-summary a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .2rem .75rem;
  padding: 1rem;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: .85rem;
  background: color-mix(in srgb, var(--surface) 84%, var(--bg));
  text-decoration: none;
  min-width: 0;
  overflow: hidden;
}

.device-approval-summary a.active {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 38%, transparent);
}

.device-approval-summary span { min-width: 0; font-weight: 850; overflow-wrap: anywhere; }
.device-approval-summary strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.7rem; }
.device-approval-summary small { min-width: 0; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }

.device-approval-workspace { padding: clamp(1rem, 2vw, 1.5rem); }
.device-approval-toolbar { align-items: flex-end; margin-bottom: 1rem; }
.device-approval-filter { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: .6rem; }
.device-approval-filter label { min-width: 180px; margin: 0; }
.device-approval-filter input,
.device-approval-filter select { min-height: 42px; }

.device-registry-table table { min-width: 1040px; }
.device-registry-table th { white-space: nowrap; }
.device-registry-table td { vertical-align: middle; }
.device-registry-table td:first-child { min-width: 190px; }
.device-registry-table td:nth-child(2) { min-width: 210px; }
.device-registry-table td:nth-child(5) { min-width: 190px; }
.device-registry-table td:last-child { min-width: 170px; }
.device-row-actions { gap: .45rem; flex-wrap: nowrap; }
.device-row-actions .small { white-space: nowrap; }

.attendance-device-list { display: grid; gap: .8rem; }

.attendance-device-card {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) auto;
  gap: .85rem 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .85rem;
  background: color-mix(in srgb, var(--surface) 72%, var(--bg));
}

.attendance-device-card.focused {
  margin-bottom: 1rem;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent);
}

.attendance-device-identity { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.attendance-device-identity > span:last-child { display: grid; min-width: 0; }
.attendance-device-identity small { color: var(--muted); }
.attendance-device-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: 0 0 2.6rem; border-radius: .7rem; color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }
.attendance-device-card > .device-status-chip { align-self: start; }

.attendance-device-meta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem;
}

.attendance-device-meta span { display: grid; gap: .2rem; padding: .65rem .75rem; border-radius: .6rem; color: var(--muted); background: color-mix(in srgb, var(--bg) 45%, transparent); font-size: .78rem; }
.attendance-device-meta strong { color: var(--text); font-size: .85rem; overflow-wrap: anywhere; }

.attendance-device-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; gap: .6rem; padding-top: .15rem; }
.attendance-device-actions label { flex: 1 1 280px; margin: 0; }
.attendance-device-actions input { min-height: 42px; }
.attendance-device-card.unregistered > p { grid-column: 1 / -1; margin: 0; }
.attendance-device-card.unregistered > a { justify-self: start; }
.attendance-device-note { grid-column: 1 / -1; display: grid; gap: .2rem; margin: 0; padding: .7rem; border-radius: .6rem; background: color-mix(in srgb, var(--bg) 45%, transparent); }
.device-approval-empty { padding: 2.5rem 1rem; text-align: center; }
.device-approval-empty > span { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; color: #22c55e; background: rgba(34, 197, 94, .12); font-size: 1.4rem; }
.device-approval-empty h3 { margin: .75rem 0 .25rem; }

@media (max-width: 1200px) {
  .device-approval-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .device-approval-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-approval-toolbar { align-items: stretch; }
  .device-approval-filter { justify-content: flex-start; }
  .attendance-device-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .device-approval-summary { grid-template-columns: 1fr; }
  .device-approval-filter label { min-width: 100%; }
  .attendance-device-card { grid-template-columns: 1fr; }
  .attendance-device-card > .device-status-chip { justify-self: start; }
  .attendance-device-meta { grid-column: 1; grid-template-columns: 1fr; }
  .attendance-device-actions { grid-column: 1; }
  .attendance-device-actions button { flex: 1; }
  .device-row-actions { flex-wrap: wrap; }
}

.settings-collapsible-row {
  padding: 0;
  overflow: hidden;
}

.settings-collapsible-row summary {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  cursor: pointer;
}

.settings-collapsible-row summary span,
.settings-collapsible-row summary small {
  display: block;
}

.settings-collapsible-body {
  padding: 0 1rem 1rem;
}

.settings-save-row {
  display: flex;
  justify-content: flex-end;
}

.settings-access-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 1rem;
}

.settings-code {
  display: block;
  margin: .75rem 0;
  font-size: 1.6rem;
  letter-spacing: .14em;
}

.settings-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .7rem;
}

.settings-invite-card > input[readonly] {
  width: 100%;
}

.settings-invite-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
}

.settings-invite-share-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 38px;
  padding: .5rem .72rem;
  border: 1px solid color-mix(in srgb, var(--blue) 34%, var(--line));
  border-radius: .7rem;
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  color: var(--text);
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.settings-invite-share-link:hover,
.settings-invite-share-link:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 72%, var(--line));
  background: color-mix(in srgb, var(--blue) 16%, transparent);
  color: var(--blue);
  text-decoration: none;
  transform: translateY(-1px);
}

.settings-invite-share-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-invite-share-link--telegram {
  color: #39aee8;
}

.settings-invite-share-link--telegram svg {
  fill: currentColor;
  stroke: none;
}

.settings-invite-share-link--telegram .settings-share-cutout {
  fill: var(--surface);
}

.settings-people-section {
  padding: 1.1rem 0 1.3rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
}

.settings-people-section:first-of-type {
  padding-top: .25rem;
  border-top: 0;
}

.settings-subsection-copy {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: .9rem;
}

.settings-subsection-copy > div {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.settings-subsection-copy h3,
.settings-subsection-copy p {
  margin: 0;
}

.settings-subsection-copy p {
  max-width: 42rem;
  color: var(--muted);
  font-size: .86rem;
}

.settings-section-icon {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: .62rem;
  background: color-mix(in srgb, var(--blue) 13%, transparent);
  color: var(--blue);
  font-weight: 800;
}

.settings-invite-grid {
  display: grid;
  grid-template-columns: minmax(15rem, .72fr) minmax(24rem, 1.28fr);
  gap: 1rem;
}

.settings-invite-grid .settings-policy-card,
.settings-structure-grid .settings-policy-card {
  margin: 0;
  background: color-mix(in srgb, var(--surface) 88%, var(--bg));
}

.settings-join-code-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}

.settings-card-label {
  display: block;
  margin-bottom: .45rem;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.settings-join-code-card .settings-code {
  margin: .2rem 0 .45rem;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.settings-join-code-card p {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
}

.settings-copy-row,
.settings-add-row {
  display: flex;
  align-items: stretch;
  gap: .65rem;
}

.settings-copy-row input,
.settings-add-row label,
.settings-add-row input {
  min-width: 0;
  width: 100%;
}

.settings-copy-row .btn,
.settings-add-row .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.settings-structure-grid {
  margin-bottom: 0;
}

.settings-structure-card h3 {
  margin-bottom: .75rem;
}

.settings-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .85rem;
}

.settings-chip-list span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: .32rem .65rem;
  border: 1px solid color-mix(in srgb, var(--blue) 25%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  font-size: .8rem;
  font-weight: 700;
}

.settings-chip-list small {
  color: var(--muted);
}

.department-manager-list { display: grid; gap: .75rem; margin-top: 1rem; }
.department-manager-card { display: block; padding: .85rem; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--bg) 35%, transparent); }
.department-manager-card > form:first-child { display: grid; grid-template-columns: minmax(150px,.7fr) minmax(180px,1fr) minmax(260px,1.35fr) auto; align-items: end; gap: .75rem; }
.department-manager-card > div strong,
.department-manager-card > div small { display: block; }
.department-manager-card > div small { margin-top: .2rem; color: var(--muted); }
.department-manager-card label > span,
.department-manager-card legend { color: var(--muted); font-size: .75rem; font-weight: 700; }
.department-manager-card fieldset { display: flex; flex-wrap: wrap; gap: .45rem .8rem; margin: 0; padding: 0; border: 0; }
.department-manager-card fieldset label { display: inline-flex; grid-template-columns: none; flex-direction: row; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 500; }
.department-manager-card fieldset input { width: auto; }
.department-delegation-panel { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.department-delegation-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .55rem; color: var(--muted); font-size: .8rem; }
.department-delegation-form { display: grid; grid-template-columns: minmax(180px,1fr) repeat(2,minmax(135px,.65fr)) auto; align-items: end; gap: .65rem; margin-top: .75rem; }
.department-manager-history { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .85rem; }
.department-manager-history summary { cursor: pointer; color: var(--text); font-weight: 750; }
.department-manager-history-list { display: grid; gap: .55rem; margin-top: .7rem; }
.department-manager-history-list > div { display: flex; justify-content: space-between; gap: .75rem; padding: .65rem .75rem; border-radius: 10px; background: color-mix(in srgb, var(--panel) 70%, transparent); }
.department-manager-history-list small { color: var(--muted); text-align: right; }
.approval-sla-card { display: grid; grid-template-columns: minmax(220px,1.2fr) repeat(3,minmax(140px,.7fr)) auto; align-items: end; gap: .75rem; margin-bottom: 1rem; }
.notification-approval-meta { display: flex; flex-wrap: wrap; gap: .45rem 1rem; margin-top: .55rem; color: var(--muted); font-size: .78rem; }
.notification-approval-meta .is-overdue { color: var(--danger); font-weight: 750; }
.notification-reassign-form { display: flex; gap: .45rem; align-items: center; margin-top: .55rem; }
.notification-reassign-form select { min-width: 170px; }
.notification-approval-actions { display: flex; flex-wrap: wrap; gap: .55rem; align-items: flex-start; margin-top: .7rem; }
.notification-reassign-details { color: var(--muted); }
.notification-reassign-details > summary { min-height: 38px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-weight: 700; list-style: none; }
.notification-reassign-details > summary::-webkit-details-marker { display: none; }
.notification-reassign-details[open] { flex-basis: 100%; }
@media (max-width: 1100px) { .approval-sla-card { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .approval-sla-card { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .department-manager-card > form:first-child, .department-delegation-form { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .department-manager-card > form:first-child, .department-delegation-form { grid-template-columns: 1fr; } .department-delegation-row { align-items: flex-start; flex-direction: column; } }

.people-managed-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 18px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--blue) 42%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--blue) 9%, var(--panel)); }
.people-managed-summary h2 { margin: .15rem 0 .25rem; font-size: 1.15rem; }
.people-managed-summary p { margin: 0; color: var(--muted); }
.people-managed-departments { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
.people-managed-departments span,
.department-manager-badge { display: inline-flex; align-items: center; padding: .24rem .52rem; border: 1px solid color-mix(in srgb, var(--blue) 45%, var(--line)); border-radius: 999px; color: var(--blue); background: color-mix(in srgb, var(--blue) 11%, transparent); font-size: .7rem; font-weight: 700; line-height: 1.15; }
.people-identity strong .department-manager-badge { margin-left: .35rem; vertical-align: middle; }
.people-managed-byline { color: var(--blue) !important; }
.access-source-panel { margin-bottom: 1rem; }
.access-source-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.access-source-grid article { display: flex; flex-direction: column; gap: .35rem; min-width: 0; padding: .85rem; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--bg) 30%, transparent); }
.access-source-grid article > span,
.access-source-grid article > small { color: var(--muted); }
@media (max-width: 900px) { .access-source-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .people-managed-summary { align-items: flex-start; flex-direction: column; } .people-managed-departments { justify-content: flex-start; } }

.department-dashboard { margin: 18px 0; padding: 18px; border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--blue) 6%, var(--panel)); }
.department-dashboard-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 14px; }
.department-dashboard-head h2 { margin: .2rem 0; }
.department-dashboard-head p { margin: 0; color: var(--muted); }
.department-dashboard-filter { min-width: min(280px, 100%); }
.department-dashboard-filter label { display: grid; gap: .3rem; }
.department-dashboard-filter label span { color: var(--muted); font-size: .75rem; font-weight: 700; }
.department-dashboard-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; }
.department-dashboard-card { display: flex; flex-direction: column; gap: .28rem; min-width: 0; padding: .9rem; border: 1px solid var(--line); border-radius: 13px; color: var(--text); background: var(--panel); text-decoration: none; }
.department-dashboard-card:hover { border-color: color-mix(in srgb, var(--blue) 55%, var(--line)); transform: translateY(-1px); }
.department-dashboard-card > span { color: var(--muted); font-size: .76rem; font-weight: 700; }
.department-dashboard-card > strong { font-size: 1.65rem; line-height: 1; }
.department-dashboard-card > small { color: var(--muted); }
.department-dashboard-card.is-warning > strong { color: var(--amber); }
@media (max-width: 1200px) { .department-dashboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .department-dashboard-head { align-items: stretch; flex-direction: column; } .department-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .department-dashboard-card:last-child { grid-column: 1 / -1; } }

@media (max-width: 1100px) {
  .settings-invite-grid {
    grid-template-columns: 1fr;
  }

  .settings-subsection-copy {
    display: block;
  }

  .settings-subsection-copy p {
    margin-top: .5rem;
  }
}

.settings-location-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .85rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: color-mix(in srgb, var(--surface) 75%, var(--bg));
}

.settings-location-status.configured {
  border-color: color-mix(in srgb, #22c55e 45%, var(--line));
  background: color-mix(in srgb, #22c55e 7%, var(--surface));
}

.settings-location-status.needs-setup {
  border-color: color-mix(in srgb, #f59e0b 48%, var(--line));
  background: color-mix(in srgb, #f59e0b 7%, var(--surface));
}

.settings-location-status.warning {
  border-color: color-mix(in srgb, #f59e0b 60%, var(--line));
  background: color-mix(in srgb, #f59e0b 10%, var(--surface));
}

.settings-location-status.warning .settings-location-status-icon {
  color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 16%, transparent);
}

.settings-location-status-icon {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 13%, transparent);
  font-size: 1.35rem;
  font-weight: 900;
}

.settings-location-status h3,
.settings-location-status p,
.settings-subsection-heading h3,
.settings-subsection-heading p {
  margin: 0;
}

.settings-location-status p,
.settings-subsection-heading p {
  margin-top: .25rem;
}

.settings-subsection-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.settings-subsection-heading > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .15rem .65rem;
  align-items: center;
  min-width: 0;
}

.settings-step-number {
  display: inline-grid;
  place-items: center;
  grid-row: 1 / span 2;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  font-size: .8rem;
  font-weight: 900;
}

.settings-subsection-heading h3,
.settings-subsection-heading p {
  grid-column: 2;
}

.settings-boundary-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 1rem 0;
}

.settings-boundary-option {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.settings-boundary-option > input {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  clip-path: inset(50%);
  overflow: hidden;
}

.settings-boundary-option-body {
  display: grid !important;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  min-height: 100%;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: color-mix(in srgb, var(--surface) 68%, var(--bg));
}

.settings-boundary-check {
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: transparent;
  background: color-mix(in srgb, var(--surface) 78%, var(--bg));
  font-size: .78rem;
  font-weight: 900;
}

.settings-boundary-option > input:checked + .settings-boundary-option-body {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 38%, transparent);
}

.settings-boundary-option > input:checked + .settings-boundary-option-body .settings-boundary-check {
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
}

.settings-boundary-option > input:focus-visible + .settings-boundary-option-body {
  outline: 3px solid color-mix(in srgb, var(--blue) 30%, transparent);
  outline-offset: 2px;
}

.settings-boundary-option strong {
  color: var(--text);
}

.settings-boundary-option strong em {
  display: inline-flex;
  margin-left: .35rem;
  padding: .15rem .42rem;
  border-radius: 999px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 13%, transparent);
  font-size: .66rem;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.settings-boundary-option small {
  display: block;
  margin-top: .35rem;
  line-height: 1.45;
}

.settings-security-standard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin-bottom: 1rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid color-mix(in srgb, #22c55e 45%, var(--line));
  border-radius: .9rem;
  background: color-mix(in srgb, #22c55e 8%, var(--surface));
}

.settings-attendance-policy {
  display: grid;
  gap: 1rem;
}

.settings-policy-guardrail,
.settings-policy-locked-value,
.settings-policy-summary {
  display: grid;
  gap: .3rem;
  padding: .9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--blue) 48%, var(--line));
  border-radius: .8rem;
  background: color-mix(in srgb, var(--blue) 9%, var(--surface));
}

.settings-policy-guardrail span,
.settings-policy-locked-value small,
.settings-policy-summary p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.settings-policy-group {
  min-width: 0;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .85rem;
  background: color-mix(in srgb, var(--surface) 75%, var(--bg));
}

.settings-policy-group legend {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: 0 .25rem;
  color: var(--text);
}

.settings-policy-group legend span {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  color: var(--blue);
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 14%, transparent);
}

.settings-policy-group > p {
  margin: .25rem 0 0;
  color: var(--muted);
}

.settings-policy-options--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-attendance-policy .settings-policy-option > span {
  display: grid;
  gap: .45rem;
  min-height: 100%;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: color-mix(in srgb, var(--surface) 68%, var(--bg));
  transition: border-color .18s ease, background .18s ease, opacity .18s ease;
}

.settings-attendance-policy .settings-policy-option > span strong {
  color: var(--text);
}

.settings-attendance-policy .settings-policy-option > span small {
  color: var(--muted);
  line-height: 1.45;
}

.settings-attendance-policy .settings-policy-option em {
  margin-left: .35rem;
  padding: .15rem .4rem;
  color: var(--blue);
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 13%, transparent);
  font-size: .68rem;
  font-style: normal;
}

.settings-attendance-policy .settings-policy-option input:checked + span {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 35%, transparent);
}

.settings-attendance-policy .settings-policy-option input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--blue) 30%, transparent);
  outline-offset: 2px;
}

.settings-attendance-policy .settings-policy-option.is-locked {
  cursor: not-allowed;
}

.settings-attendance-policy .settings-policy-option.is-locked > span {
  opacity: .55;
}

.settings-policy-summary {
  grid-template-columns: auto minmax(0, 1fr);
  border-color: color-mix(in srgb, #19a974 55%, var(--line));
  background: color-mix(in srgb, #19a974 9%, var(--surface));
}

.settings-policy-summary > span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: #fff;
  border-radius: 50%;
  background: #19a974;
}

.settings-restore-defaults {
  margin: .75rem 0 1rem;
  text-align: right;
}

.settings-security-standard-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: #fff;
  background: #16a364;
  font-size: 1.2rem;
  font-weight: 900;
}

.settings-security-standard h3,
.settings-security-standard p,
.settings-security-standard small,
.settings-mobile-only h3,
.settings-mobile-only p {
  margin: 0;
}

.settings-security-standard h3 { margin-top: .2rem; }
.settings-security-standard p { margin-top: .45rem; }
.settings-security-standard small { display: block; margin-top: .55rem; color: var(--muted); }

.settings-mobile-only {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
}

.settings-mobile-only > span {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .7rem;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
}

.settings-mobile-only p { margin-top: .35rem; }

.settings-field-wide {
  grid-column: 1 / -1;
}

.settings-location-feedback {
  min-height: 1.35rem;
  margin: .65rem 0 0;
  color: var(--blue) !important;
  font-weight: 700;
}

.settings-location-rule-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: .8rem 0 1rem;
}

.settings-location-rule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  margin: 0;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: .7rem;
  background: color-mix(in srgb, var(--surface) 68%, var(--bg));
  cursor: pointer;
}

.settings-location-rule input {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: .1rem;
}

.settings-location-rule span {
  display: grid;
  gap: .25rem;
}

.settings-location-rule small {
  line-height: 1.4;
}

.settings-radius-field {
  max-width: 360px;
}

.settings-radius-field > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.settings-radius-field > span input {
  border-radius: .65rem 0 0 .65rem;
}

.settings-radius-field > span strong {
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 0 .9rem;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 .65rem .65rem 0;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 65%, var(--bg));
}

.settings-empty-category {
  min-height: 18rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .5rem;
  text-align: center;
}

.settings-empty-category > span {
  color: var(--blue);
  font-size: 2.5rem;
}

.settings-empty-category h3,
.settings-empty-category p {
  margin: 0;
}

@media (max-width: 980px) {
  .settings-device-summary {
    grid-template-columns: 1fr;
  }

  .settings-policy-options {
    grid-template-columns: 1fr;
  }

  .settings-boundary-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .settings-channel-grid,
  .settings-access-grid {
    grid-template-columns: 1fr;
  }

  .settings-policy-options--two {
    grid-template-columns: 1fr;
  }

  .settings-invite-grid {
    grid-template-columns: 1fr;
  }

  .settings-subsection-copy {
    display: block;
  }

  .settings-subsection-copy p {
    margin-top: .5rem;
  }

  .settings-copy-row,
  .settings-add-row {
    align-items: stretch;
  }

  .settings-device-summary dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .settings-device-summary dl div {
    min-width: 0;
  }

  .settings-location-status {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .settings-location-status .btn {
    grid-column: 1 / -1;
  }

  .settings-location-rule-list {
    grid-template-columns: 1fr;
  }

  .settings-subsection-heading {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Phase 6: quieter People roster and focused employee actions. */
.people-management-hero {
  min-height: 0 !important;
  align-items: center !important;
  padding-block: clamp(1.1rem, 2vw, 1.65rem) !important;
}

.people-management-hero h1 {
  margin-bottom: .25rem !important;
}

.people-hero-count,
.people-result-count {
  margin: 0 !important;
  font-size: .86rem;
}

.people-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem;
  overflow: visible;
  border: 0;
  background: transparent;
}

.people-summary-item {
  min-height: 68px;
  gap: .7rem;
  padding: .75rem .9rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: color-mix(in srgb, var(--surface) 84%, var(--bg));
}

.people-summary-item.is-selected {
  border-color: color-mix(in srgb, var(--blue) 58%, var(--line));
  box-shadow: inset 3px 0 0 var(--blue);
}

.people-summary-item strong {
  font-size: 1.15rem;
}

.people-summary-item small {
  margin-top: .15rem;
  font-size: .74rem;
}

.people-summary-icon {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  font-size: .82rem;
}

.people-invite-disclosure > summary small {
  margin-left: auto;
  text-align: right;
}

.people-directory-panel .module-toolbar {
  grid-template-columns: minmax(150px, .34fr) minmax(600px, 1.66fr) !important;
  gap: 1.25rem;
  align-items: end;
}

.people-directory-panel .module-toolbar h2 {
  margin-bottom: .25rem;
}

.people-filter-form {
  grid-template-columns: minmax(220px, 1.35fr) minmax(120px, .68fr) minmax(150px, .82fr) auto auto !important;
  gap: .65rem !important;
  align-items: end;
}

.people-search-field > span {
  position: relative;
  display: block;
}

.people-search-field svg {
  position: absolute;
  z-index: 1;
  left: .8rem;
  top: 50%;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.people-search-field input {
  padding-left: 2.35rem !important;
}

.people-directory-table table {
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0 .55rem;
}

.people-directory-table th {
  padding-block: .35rem !important;
  border: 0 !important;
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.people-directory-table td {
  padding-block: .8rem !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  background: color-mix(in srgb, var(--surface) 78%, var(--bg));
  vertical-align: middle !important;
}

.people-directory-table td:first-child {
  border-left: 1px solid var(--line) !important;
  border-radius: .8rem 0 0 .8rem;
}

.people-directory-table td:last-child {
  width: 118px !important;
  border-right: 1px solid var(--line) !important;
  border-radius: 0 .8rem .8rem 0;
}

.people-identity,
.people-position {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}

.people-identity > span:last-child,
.people-position {
  display: grid;
  gap: .2rem;
}

.people-identity strong,
.people-identity small,
.people-position strong,
.people-position small {
  display: block;
  min-width: 0;
}

.people-identity small,
.people-position small {
  overflow: hidden;
  color: var(--muted);
  font-size: .75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-avatar {
  width: 36px;
  height: 36px;
  display: grid !important;
  place-items: center;
  flex: 0 0 36px;
  border-radius: 50%;
  color: #dcecff;
  background: linear-gradient(135deg, #2175ec, #2bbbd9);
  font-weight: 850;
}

.people-action-trigger {
  width: auto;
  min-width: 94px;
  height: 38px;
  grid-template-columns: 1fr auto;
  gap: .4rem;
  padding: 0 .7rem;
  color: var(--blue);
  font-size: .78rem;
  font-weight: 800;
}

.people-action-trigger svg {
  width: .95rem;
  height: .95rem;
}

.people-action-popover {
  width: 278px;
  padding: .55rem;
}

.people-action-popover > a,
.people-action-popover > button,
.people-action-popover > form > button {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  justify-content: initial;
  gap: .45rem;
}

.people-action-popover > form > button:not(:has(.people-menu-icon)) {
  grid-template-columns: minmax(0, 1fr);
  padding-left: 2.6rem;
}

.people-menu-icon {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: .45rem;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  font-size: .75rem;
  font-weight: 900;
}

.people-invite-dialog {
  max-width: 560px;
}

.people-invite-dialog-body {
  display: grid;
  justify-items: center;
  gap: .85rem;
  padding: 1.4rem 1.6rem;
  overflow-y: auto;
  text-align: center;
}

.people-invite-dialog-body .employee-invite-qr {
  width: min(220px, 65vw);
  height: auto;
  padding: .65rem;
  border-radius: .8rem;
  background: #fff;
}

.people-invite-dialog-body .invite-link-input {
  width: 100%;
}

.people-invite-dialog .invite-qr-actions a,
.people-invite-dialog .invite-qr-actions button {
  min-width: 140px;
}

html[data-theme="light"] .people-summary-item,
html[data-theme="light"] .people-directory-table td {
  background: #fff;
}

@media (max-width: 1120px) {
  .people-directory-panel .module-toolbar {
    grid-template-columns: 1fr !important;
    align-items: stretch;
  }

  .people-filter-form {
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(130px, .65fr)) auto !important;
  }
}

@media (max-width: 760px) {
  .people-management-hero {
    flex-direction: row;
    align-items: center !important;
  }

  .people-management-hero .page-actions {
    width: auto;
  }

  .people-management-hero .primary-btn {
    min-height: 42px;
    padding-inline: .9rem;
  }

  .people-summary-grid {
    display: flex;
    gap: .5rem;
    margin-inline: -.15rem;
    padding: .15rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .people-summary-grid::-webkit-scrollbar { display: none; }

  .people-summary-item {
    min-width: 132px;
    min-height: 60px;
    flex: 0 0 auto;
  }

  .people-invite-disclosure > summary small {
    display: none;
  }

  .people-filter-form {
    grid-template-columns: 1fr 1fr !important;
  }

  .people-search-field {
    grid-column: 1 / -1;
  }

  .people-filter-form .soft-btn {
    width: 100%;
  }

  .people-directory-table table,
  .people-directory-table tbody {
    min-width: 0 !important;
  }

  .people-directory-table tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .7rem 1rem;
    padding: .95rem !important;
    border: 1px solid var(--line) !important;
    border-radius: .9rem !important;
    background: color-mix(in srgb, var(--surface) 78%, var(--bg));
  }

  .people-directory-table td {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .people-directory-table td::before {
    display: none !important;
  }

  .people-directory-table td:first-child {
    grid-column: 1 / -1;
  }

  .people-directory-table td:last-child {
    width: auto !important;
    grid-column: 1 / -1;
  }

  .people-action-menu,
  .people-action-trigger {
    width: 100%;
  }

  .people-action-trigger {
    min-height: 42px;
  }

  .people-action-popover {
    inset: auto 12px 76px;
    width: auto;
  }

  .people-invite-dialog .invite-qr-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .people-invite-dialog .invite-qr-actions a,
  .people-invite-dialog .invite-qr-actions button {
    min-width: 0;
    width: 100%;
  }
}

/* Task management workspace */
.task-management-hero {
  min-height: 132px;
  align-items: center;
}

.task-management-hero .primary-btn {
  min-height: 44px;
  white-space: nowrap;
}

.task-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin: 0 0 1rem;
}

.task-summary-grid > a {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  min-height: 72px;
  padding: .8rem .9rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 82%, var(--bg));
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.task-summary-grid > a:hover,
.task-summary-grid > a.is-selected {
  border-color: color-mix(in srgb, var(--blue) 58%, var(--line));
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
}

.task-summary-grid > a:hover {
  transform: translateY(-1px);
}

.task-summary-grid > a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 42%, transparent);
  outline-offset: 2px;
}

.task-summary-grid strong,
.task-summary-grid small {
  display: block;
}

.task-summary-grid strong {
  font-size: 1.1rem;
  line-height: 1;
}

.task-summary-grid small {
  margin-top: .25rem;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
}

.task-summary-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 15%, transparent);
  font-size: 1rem;
  font-weight: 900;
}

.task-summary-icon.purple {
  color: var(--purple);
  background: color-mix(in srgb, var(--purple) 15%, transparent);
}

.task-summary-icon.warning {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 15%, transparent);
}

.task-summary-icon.success {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 15%, transparent);
}

.task-filter-banner {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 42px;
  margin: 0 0 .75rem;
  padding: .55rem .8rem;
  border: 1px solid color-mix(in srgb, var(--blue) 34%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}

.task-filter-banner a {
  margin-left: auto;
  font-weight: 800;
}

.task-create-disclosure {
  margin-bottom: 1rem;
  border-radius: 18px !important;
}

.task-create-disclosure > summary small {
  display: block;
  margin-top: .15rem;
  color: var(--muted);
  font-weight: 500;
}

.task-create-disclosure .workflow-disclosure-body {
  padding: 1rem 1.1rem 1.1rem;
  background: color-mix(in srgb, var(--surface) 70%, var(--bg));
}

.task-create-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}

.task-create-form textarea {
  min-height: 88px;
  resize: vertical;
}

.task-create-form select[multiple],
.task-card-actions select[multiple] {
  min-height: 126px;
  padding-block: .45rem;
  background-image: none;
}

.task-create-form select[multiple] option,
.task-card-actions select[multiple] option {
  padding: .42rem .55rem;
  border-radius: 7px;
}

.task-work-board {
  align-items: start;
  grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
  gap: .8rem;
}

.task-lane {
  --task-status-color: var(--blue);
  min-height: 240px;
  padding: .8rem;
  border-radius: 18px;
  border-color: color-mix(in srgb, var(--task-status-color) 22%, var(--line));
  box-shadow: none;
  overflow: visible;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.task-lane.status-in-progress { --task-status-color: var(--amber); }
.task-lane.status-review { --task-status-color: var(--purple); }
.task-lane.status-done { --task-status-color: var(--green); }

.task-lane > h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  margin: 0 0 .65rem;
  padding: .15rem .15rem .55rem;
  border-bottom: 1px solid var(--line);
  font-size: .92rem !important;
}

.task-lane > h2 > span {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  padding: 0;
  color: var(--text);
  background: transparent;
  font-size: inherit;
}

.task-lane > h2 i {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--task-status-color);
}

.task-lane.is-drop-target {
  border-color: var(--task-status-color);
  background: color-mix(in srgb, var(--task-status-color) 8%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--task-status-color) 46%, transparent);
}

.task-lane > h2 em {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 .45rem;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  font-size: .72rem;
  font-style: normal;
}

.task-board-card {
  --task-status-color: var(--blue);
  position: relative;
  display: grid;
  gap: .65rem;
  margin: .65rem 0 0;
  padding: .85rem;
  border-left-width: 1px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--task-status-color) 6%, var(--surface-strong));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
  cursor: grab;
  transition: opacity .16s ease, transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.task-board-card.status-in_progress { --task-status-color: var(--amber); }
.task-board-card.status-review { --task-status-color: var(--purple); }
.task-board-card.status-done { --task-status-color: var(--green); }

.task-board-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 15px 0 0 15px;
  background: var(--task-status-color);
}

.task-board-card.is-overdue:not(.status-done)::before { background: var(--red); }

.task-board-card.is-dragging {
  opacity: .42;
  transform: scale(.985);
  cursor: grabbing;
  box-shadow: none;
}

.task-board-card.is-saving {
  opacity: .72;
  pointer-events: none;
}

.task-card-meta,
.task-card-footer {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

.task-card-meta {
  justify-content: space-between;
}

.task-priority-chip,
.task-due-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  min-width: 0;
  padding: .28rem .48rem;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 11%, transparent);
  font-size: .66rem;
  font-weight: 800;
  white-space: nowrap;
}

.task-priority-chip.high,
.task-due-chip.late {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 13%, transparent);
}

.task-priority-chip.medium {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 13%, transparent);
}

.task-card-title {
  font-size: .96rem;
  line-height: 1.3;
}

.task-board-card > p {
  margin: -.15rem 0 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
}

.task-card-footer {
  margin-top: .15rem;
  padding-top: .65rem;
  border-top: 1px solid var(--line);
}

.task-assignee-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: white;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  font-size: .72rem;
  font-weight: 900;
}

.task-card-footer > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.task-card-footer small,
.task-card-footer strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-card-footer small {
  color: var(--muted);
  font-size: .62rem;
}

.task-card-footer strong {
  font-size: .74rem;
}

.task-card-actions {
  position: relative;
  flex: 0 0 auto;
}

.task-card-actions > summary {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 88%, var(--bg));
  cursor: pointer;
  list-style: none;
  font-size: 1.25rem;
  line-height: 1;
}

.task-card-actions > summary::-webkit-details-marker { display: none; }

.task-card-actions > summary:hover,
.task-card-actions[open] > summary {
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 48%, var(--line));
}

.task-card-actions[open]::before {
  content: "";
  position: fixed;
  z-index: 70;
  inset: 0;
  background: rgba(2, 11, 22, .58);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

.task-card-actions > form {
  position: fixed;
  z-index: 80;
  top: 50%;
  left: calc(50% + 146px);
  transform: translate(-50%, -50%);
  display: grid;
  gap: .65rem;
  width: min(560px, calc(100vw - 340px));
  max-height: calc(100dvh - 48px);
  padding: 1.1rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-strong);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .28);
}

.task-editor-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--line);
}

.task-editor-heading span,
.task-editor-heading small,
.task-editor-heading strong {
  display: block;
  min-width: 0;
}

.task-editor-heading small {
  margin-bottom: .15rem;
  color: var(--muted);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.task-editor-heading strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-editor-close {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 88%, var(--bg));
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.task-card-actions label {
  gap: .3rem;
  color: var(--muted);
  font-size: .7rem;
}

.task-card-actions select {
  min-height: 40px;
  padding: .55rem .65rem;
  border-radius: 10px;
  color: var(--text);
  font-size: .78rem;
}

.task-card-actions .primary-btn {
  min-height: 40px;
  padding: .6rem .8rem;
}

.task-date-history {
  display: grid;
  gap: .35rem;
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: .72rem;
}

.task-lane .empty-lane {
  display: grid;
  justify-items: center;
  gap: .45rem;
  margin: .65rem 0 0;
  padding: 1.35rem .8rem;
  border-radius: 14px;
  font-size: .76rem;
}

.task-lane .empty-lane span {
  color: var(--blue);
  font-size: 1.2rem;
}

html[data-theme="light"] .task-summary-grid > a,
html[data-theme="light"] .task-card-actions > form {
  background: #fff;
}

html[data-theme="light"] .task-board-card {
  background: color-mix(in srgb, var(--task-status-color) 5%, #fff);
}

@media (max-width: 980px) {
  .task-card-actions > form {
    left: 50%;
    width: min(560px, calc(100vw - 40px));
  }
}

@media (max-width: 1180px) {
  .task-work-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .task-management-hero {
    flex-direction: row;
    align-items: center;
  }

  .task-management-hero .primary-btn {
    width: auto;
    padding-inline: .9rem;
  }

  .task-summary-grid {
    display: flex;
    gap: .5rem;
    margin-inline: -.15rem;
    padding: .15rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .task-summary-grid::-webkit-scrollbar { display: none; }

  .task-summary-grid > a {
    flex: 0 0 132px;
    min-height: 62px;
    padding: .65rem;
  }

  .task-summary-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }

  .task-create-disclosure > summary small {
    display: none;
  }

  .task-create-form {
    grid-template-columns: 1fr;
  }

  .task-create-form .span-2 {
    grid-column: 1;
  }

  .task-work-board {
    grid-template-columns: 1fr !important;
  }

  .task-lane {
    min-height: 150px;
  }

  .task-card-actions > form {
    position: fixed;
    z-index: 80;
    inset: auto 12px 76px;
    transform: none;
    width: auto;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
}

@media (hover: none), (pointer: coarse) {
  .task-board-card {
    cursor: auto;
  }
}

/* Leave management workspace */
.leave-management-hero {
  min-height: 0;
  align-items: center;
  margin-bottom: 18px;
  padding: 6px 0 4px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.leave-management-hero .primary-btn,
.leave-management-hero .soft-btn {
  min-height: 44px;
  white-space: nowrap;
}

.leave-workspace-tabs {
  display: flex;
  align-items: end;
  gap: clamp(.35rem, 1.2vw, 1.25rem);
  margin: 0 0 1.25rem;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}

.leave-workspace-tabs > a {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: .6rem;
  min-height: 58px;
  margin-bottom: -1px;
  padding: .55rem .35rem .7rem;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--text-soft);
  background: transparent;
  white-space: nowrap;
  transition: border-color .16s ease, color .16s ease;
}

.leave-workspace-tabs > a:hover,
.leave-workspace-tabs > a.is-active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  background: transparent;
}

.leave-workspace-tabs > a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  border-radius: 8px 8px 0 0;
}

.leave-workspace-tabs > a.is-active { font-weight: 800; }
.leave-workspace-tabs > a > span:last-child { min-width: 0; }
.leave-workspace-tabs strong,
.leave-workspace-tabs small { display: block; }
.leave-workspace-tabs small { margin-top: .2rem; color: var(--muted); font-size: .72rem; }

.leave-workspace-tab-icon {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 14%, transparent);
}

.leave-workspace-tab-icon svg { width: 21px; height: 21px; }

.leave-settings-panel,
.leave-balance-panel { padding: 1.15rem !important; border-radius: 18px; }
.leave-settings-panel > .split-head,
.leave-balance-panel > .split-head { margin-bottom: 1rem; }

.leave-type-create { margin-bottom: 1rem; }
.leave-type-form {
  grid-template-columns: minmax(100px, .6fr) minmax(190px, 1.4fr) minmax(150px, .8fr) auto;
  align-items: end;
  padding: 1rem;
}

.leave-type-management-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}

.leave-type-management-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-strong) 82%, var(--bg));
}

.leave-type-management-card > header {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .8rem;
}

.leave-type-management-card > header strong,
.leave-type-management-card > header small { display: block; }
.leave-type-management-card > header small { margin-top: .15rem; color: var(--muted); font-size: .72rem; }
.leave-type-code {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 13%, transparent);
  font-size: .72rem;
  font-weight: 900;
}
.leave-type-management-card .leave-type-form { grid-template-columns: .65fr 1.3fr .85fr auto; padding: 0; }
.leave-type-allowance { margin: 0; color: var(--muted); }
.leave-type-allowance strong { color: var(--text); font-size: 1.2rem; }

.leave-balance-toolbar {
  display: grid;
  grid-template-columns: 150px minmax(260px, 1fr) auto;
  align-items: end;
  gap: .75rem;
  margin-bottom: 1rem;
  padding: .85rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 35%, transparent);
}

.leave-balance-toolbar label,
.leave-entitlement-form label { display: grid; gap: .35rem; }
.leave-balance-toolbar label > span,
.leave-entitlement-form label > span { color: var(--muted); font-size: .72rem; font-weight: 800; }

.employee-leave-balance-list { display: grid; gap: .85rem; }
.employee-leave-balance-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-strong) 84%, var(--bg));
}

.employee-leave-balance-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--line);
}
.employee-leave-balance-head strong,
.employee-leave-balance-head small { display: block; }
.employee-leave-balance-head small { margin-top: .12rem; color: var(--muted); font-size: .72rem; }
.employee-leave-balance-table { width: 100%; border-collapse: collapse; }
.employee-leave-balance-table th,
.employee-leave-balance-table td { padding: .72rem 1rem; border-bottom: 1px solid var(--line); text-align: left; }
.employee-leave-balance-table tr:last-child td { border-bottom: 0; }
.employee-leave-balance-table th { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.employee-leave-balance-table td > strong,
.employee-leave-balance-table td > small { display: block; }
.employee-leave-balance-table td > small { margin-top: .14rem; color: var(--muted); font-size: .68rem; }
.employee-leave-balance-table td:last-child { width: 1%; text-align: right; }
.leave-entitlement-source {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: .28rem;
  padding: .2rem .48rem;
  border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 9%, transparent);
  font-size: .65rem;
  font-weight: 800;
  white-space: nowrap;
}
.leave-entitlement-source.is-custom {
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 38%, transparent);
  background: color-mix(in srgb, var(--blue) 11%, transparent);
}

.leave-entitlement-editor > summary {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: .35rem .7rem;
  border: 1px solid color-mix(in srgb, var(--blue) 42%, var(--line));
  border-radius: 9px;
  color: #fff;
  background: color-mix(in srgb, var(--blue) 34%, transparent);
  font-weight: 400;
  cursor: pointer;
  list-style: none;
}
.leave-entitlement-editor > summary:hover,
.leave-entitlement-editor > summary:focus-visible {
  color: #fff;
  border-color: color-mix(in srgb, var(--blue) 68%, var(--line));
  background: color-mix(in srgb, var(--blue) 48%, transparent);
}
.leave-entitlement-editor > summary::-webkit-details-marker { display: none; }
.leave-entitlement-editor[open]::before {
  content: "";
  position: fixed;
  z-index: 79;
  inset: 0;
  background: rgba(1, 12, 24, .62);
  backdrop-filter: blur(2px);
}
.leave-entitlement-form {
  position: fixed;
  z-index: 80;
  top: 50%;
  left: 50%;
  display: grid;
  gap: .9rem;
  width: min(720px, calc(100vw - 40px));
  max-height: calc(100vh - 60px);
  padding: 1.1rem;
  border: 1px solid color-mix(in srgb, var(--blue) 46%, var(--line));
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
  overflow-y: auto;
  transform: translate(-50%, -50%);
  text-align: left;
}
.leave-entitlement-form-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.leave-entitlement-form-head strong,
.leave-entitlement-form-head small { display: block; }
.leave-entitlement-form-head small { margin-top: .2rem; color: var(--muted); }
.leave-entitlement-form-head button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text);
  background: transparent;
  line-height: 1;
  cursor: pointer;
}
.leave-entitlement-close > span,
.leave-entitlement-close > span::before,
.leave-entitlement-close > span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}
.leave-entitlement-close > span {
  width: 0;
  height: 0;
}
.leave-entitlement-close > span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.leave-entitlement-close > span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.leave-entitlement-close:hover,
.leave-entitlement-close:focus-visible {
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 55%, var(--line));
  background: color-mix(in srgb, var(--blue) 10%, transparent);
}
.leave-default-note { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem; border-radius: 12px; background: color-mix(in srgb, var(--blue) 10%, transparent); }
.leave-default-note span small,
.leave-default-note span strong { display: block; }
.leave-default-note span small,
.leave-default-note > small { color: var(--muted); }
.leave-default-note > small { max-width: 340px; text-align: right; }
.leave-entitlement-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.leave-entitlement-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 42%, transparent);
}
.leave-entitlement-summary span { display: grid; gap: .15rem; }
.leave-entitlement-summary small { color: var(--muted); font-size: .68rem; font-weight: 800; }
.leave-entitlement-summary strong { color: var(--text); }
.leave-entitlement-form textarea { min-height: 74px; resize: vertical; }
.leave-entitlement-actions { display: flex; justify-content: flex-end; gap: .65rem; }

html[data-theme="light"] .leave-workspace-tabs > a,
html[data-theme="light"] .leave-type-management-card,
html[data-theme="light"] .employee-leave-balance-card,
html[data-theme="light"] .leave-entitlement-form { background: #fff; }

.leave-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .3rem;
  margin: 0 0 1.1rem;
  padding: .35rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.leave-summary-grid-manager {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.leave-summary-grid > a {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  min-height: 64px;
  padding: .7rem .8rem;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--text);
  background: transparent;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.leave-summary-grid > a:hover,
.leave-summary-grid > a.is-selected {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
  background: color-mix(in srgb, var(--blue) 13%, var(--surface));
}

.leave-summary-grid > a:hover { transform: translateY(-1px); }

.leave-summary-grid > a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 42%, transparent);
  outline-offset: 2px;
}

.leave-summary-grid strong,
.leave-summary-grid small {
  display: block;
}

.leave-summary-grid strong {
  font-size: 1.1rem;
  line-height: 1;
}

.leave-summary-grid small {
  margin-top: .25rem;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
}

.leave-summary-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  font-size: 1rem;
  font-weight: 900;
}

.leave-summary-icon svg {
  width: 20px;
  height: 20px;
}

.leave-summary-icon.pending { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }
.leave-summary-icon.approved { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.leave-summary-icon.rejected { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
.leave-summary-icon.cancelled { color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); }

.leave-filter-banner {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 42px;
  margin: 0 0 .75rem;
  padding: .55rem .8rem;
  border: 1px solid color-mix(in srgb, var(--blue) 34%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}

.leave-filter-banner a { margin-left: auto; font-weight: 800; }

.leave-request-disclosure {
  margin-bottom: 1rem;
  border-radius: 18px !important;
}

.leave-request-disclosure > summary small {
  display: block;
  margin-top: .15rem;
  color: var(--muted);
  font-weight: 500;
}

.leave-request-disclosure .workflow-disclosure-body {
  padding: 1rem 1.1rem 1.1rem;
  background: color-mix(in srgb, var(--surface) 70%, var(--bg));
}

.leave-request-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}

.leave-request-form [hidden] { display: none !important; }
.leave-request-form textarea { min-height: 76px; resize: vertical; }

.leave-list-panel {
  padding: 1.15rem !important;
  border-radius: 18px;
}

.leave-list-head {
  align-items: center;
  margin: 0 0 .75rem;
  padding: .15rem .15rem .75rem;
  border-bottom: 1px solid var(--line);
}

.leave-list-head h2 { margin: 0; }

.leave-card-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.leave-manager-list {
  grid-template-columns: 1fr;
}

.leave-request-card {
  position: relative;
  display: grid;
  gap: .8rem;
  min-width: 0;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-strong) 82%, var(--bg));
  overflow: hidden;
}

.leave-manager-list .leave-request-card {
  grid-template-columns: minmax(210px, .75fr) minmax(420px, 1.6fr) auto;
  align-items: center;
  gap: 1rem 1.25rem;
  padding: 1rem 1.1rem;
}

.leave-request-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--amber);
}

.leave-request-card.status-approved::before { background: var(--green); }
.leave-request-card.status-rejected::before { background: var(--red); }
.leave-request-card.status-cancelled::before { background: var(--muted); }

.leave-request-card:target {
  border-color: color-mix(in srgb, var(--blue) 68%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}

.leave-request-card > header {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}

.leave-request-card > header > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.leave-request-card > header strong,
.leave-request-card > header small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leave-request-card > header small {
  margin-top: .15rem;
  color: var(--muted);
  font-size: .72rem;
}

.leave-type-icon,
.leave-employee-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  font-weight: 900;
}

.leave-employee-avatar {
  border-radius: 50%;
  color: white;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
}

.leave-status-chip {
  flex: 0 0 auto;
  padding: .32rem .55rem;
  border-radius: 999px;
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 13%, transparent);
  font-size: .66rem;
  font-weight: 850;
}

.leave-status-chip.approved { color: var(--green); background: color-mix(in srgb, var(--green) 13%, transparent); }
.leave-status-chip.rejected { color: var(--red); background: color-mix(in srgb, var(--red) 13%, transparent); }
.leave-status-chip.cancelled { color: var(--muted); background: color-mix(in srgb, var(--muted) 13%, transparent); }

.leave-request-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  padding: .7rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 42%, transparent);
}

.leave-manager-list .leave-request-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  background: transparent;
}

.leave-manager-list .leave-request-meta > span {
  min-height: 46px;
  padding: .2rem 1rem;
  border-left: 1px solid var(--line);
}

.leave-manager-list .leave-request-meta > span:first-child {
  padding-left: 0;
  border-left: 0;
}

.leave-manager-list .leave-request-meta .leave-reason {
  grid-column: auto;
}

.leave-request-meta > span { min-width: 0; }
.leave-request-meta small,
.leave-request-meta strong { display: block; }
.leave-request-meta small { color: var(--muted); font-size: .66rem; }
.leave-request-meta strong { margin-top: .18rem; font-size: .78rem; line-height: 1.35; overflow-wrap: anywhere; }
.leave-request-meta .leave-reason { grid-column: 1 / -1; }

.leave-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: .55rem;
  padding-top: .7rem;
  border-top: 1px solid var(--line);
}

.leave-card-actions button { min-height: 38px; }
.leave-card-actions.manager-actions button { flex: 1; }

.leave-manager-list .leave-card-actions {
  min-width: 210px;
  padding-top: 0;
  border-top: 0;
}

.leave-empty-state {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: .45rem;
  min-height: 210px;
  padding: 2rem 1rem;
  border: 1px dashed var(--line);
  border-radius: 16px;
  color: var(--muted);
  text-align: center;
}

.leave-empty-state > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 13%, transparent);
  font-size: 1.35rem;
}

.leave-empty-state strong { color: var(--text); font-size: 1rem; }
.leave-empty-state p { margin: 0 0 .35rem; }

html[data-theme="light"] .leave-summary-grid > a,
html[data-theme="light"] .leave-request-card {
  background: #fff;
}

html[data-theme="light"] .leave-summary-grid {
  background: #eef4fa;
}

html[data-theme="light"] .leave-summary-grid > a {
  background: transparent;
}

html[data-theme="light"] .leave-summary-grid > a:hover,
html[data-theme="light"] .leave-summary-grid > a.is-selected {
  background: color-mix(in srgb, var(--blue) 11%, #fff);
}

@media (max-width: 1180px) {
  .leave-type-management-grid { grid-template-columns: 1fr; }
  .leave-type-form,
  .leave-type-management-card .leave-type-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leave-summary-grid-manager { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .leave-request-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leave-manager-list .leave-request-card {
    grid-template-columns: minmax(210px, .8fr) minmax(0, 1.4fr);
  }
  .leave-manager-list .leave-card-actions {
    grid-column: 1 / -1;
    justify-self: end;
    min-width: 260px;
    padding-top: .75rem;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 760px) {
  .leave-management-hero { flex-direction: row; align-items: center; }
  .leave-management-hero .primary-btn,
  .leave-management-hero .soft-btn { width: auto; padding-inline: .85rem; }

  .leave-workspace-tabs {
    gap: .55rem;
    scrollbar-width: none;
  }
  .leave-workspace-tabs::-webkit-scrollbar { display: none; }
  .leave-workspace-tabs > a { min-height: 54px; padding: .5rem .25rem .65rem; }
  .leave-workspace-tabs > a small { display: none; }
  .leave-workspace-tab-icon { flex-basis: 32px; width: 32px; height: 32px; }
  .leave-type-form,
  .leave-type-management-card .leave-type-form,
  .leave-balance-toolbar,
  .leave-entitlement-fields { grid-template-columns: 1fr; }
  .leave-entitlement-summary { grid-template-columns: 1fr; }
  .leave-default-note { align-items: flex-start; flex-direction: column; }
  .leave-default-note > small { text-align: left; }
  .employee-leave-balance-table-wrap { overflow-x: auto; }
  .employee-leave-balance-table { min-width: 650px; }
  .leave-entitlement-form { width: calc(100vw - 24px); max-height: calc(100vh - 24px); padding: .9rem; }
  .leave-entitlement-actions { flex-direction: column; }

  .leave-summary-grid,
  .leave-summary-grid-manager {
    display: flex;
    gap: .5rem;
    margin-inline: -.15rem;
    padding: .3rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .leave-summary-grid::-webkit-scrollbar { display: none; }
  .leave-summary-grid > a { flex: 0 0 128px; min-height: 62px; padding: .65rem; }
  .leave-summary-icon { flex-basis: 34px; width: 34px; height: 34px; }
  .leave-request-disclosure > summary small { display: none; }
  .leave-request-form { grid-template-columns: 1fr; }
  .leave-request-form .span-2 { grid-column: 1; }
  .leave-card-list,
  .leave-manager-list { grid-template-columns: 1fr; }
  .leave-manager-list .leave-request-card { grid-template-columns: 1fr; }
  .leave-manager-list .leave-request-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: .7rem;
    background: color-mix(in srgb, var(--bg) 42%, transparent);
  }
  .leave-manager-list .leave-request-meta > span {
    min-height: 0;
    padding: .25rem .65rem;
    border-left: 0;
  }
  .leave-manager-list .leave-request-meta > span:first-child { padding-left: .65rem; }
  .leave-manager-list .leave-request-meta .leave-reason { grid-column: 1 / -1; }
  .leave-manager-list .leave-card-actions {
    grid-column: auto;
    justify-self: stretch;
    min-width: 0;
  }
}

@media (max-width: 430px) {
  .leave-request-meta { grid-template-columns: 1fr; }
  .leave-request-meta .leave-reason { grid-column: 1; }
  .leave-status-chip { max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Shared page states: empty, error, and completed. */
.sh-state-card {
  --state-accent: var(--blue);
  width: 100%;
  min-height: 180px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .55rem;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-strong, var(--surface)) 82%, transparent);
  text-align: center;
}

.sh-state-card > [aria-hidden="true"],
.sh-state-card > .empty-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--state-accent);
  background: color-mix(in srgb, var(--state-accent) 14%, transparent);
  font-size: 1.35rem;
}

.sh-state-card h2,
.sh-state-card h3,
.sh-state-card > strong {
  margin: 0;
  color: var(--text);
}

.sh-state-card p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.sh-state-card .soft-btn,
.sh-state-card .primary-btn,
.sh-state-card > a {
  margin-top: .35rem;
}

.sh-state-success { --state-accent: var(--green); }
.sh-state-error { --state-accent: var(--danger); }
.sh-state-compact { min-height: 120px; padding: 1.25rem; }

html[data-theme="light"] .sh-state-card {
  background: color-mix(in srgb, #fff 92%, var(--blue) 8%);
}

@media (max-width: 680px) {
  .sh-state-card {
    min-height: 150px;
    padding: 1.25rem 1rem;
    border-radius: 16px;
  }

  .sh-state-card.sh-state-compact { min-height: 108px; }
}

/* Shared form and action feedback. */
:where(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  min-height: 48px;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease, opacity .16s ease;
}

textarea { min-height: 108px; resize: vertical; }

:where(input, select, textarea)::placeholder {
  color: color-mix(in srgb, var(--muted) 78%, transparent);
  opacity: 1;
}

:where(input, select, textarea):disabled,
:where(input, select, textarea)[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .62;
  background: color-mix(in srgb, var(--surface) 76%, var(--muted) 8%) !important;
}

:where(input, select, textarea):user-invalid,
:where(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent) !important;
}

.form-hint,
.field-hint,
.helptext {
  display: block;
  margin-top: .35rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.45;
}

.form-error,
.field-error,
.form-errors,
.errorlist {
  margin: .35rem 0 0;
  padding: 0;
  color: color-mix(in srgb, var(--danger) 84%, white);
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.45;
  list-style: none;
}

html[data-theme="light"] :is(.form-error, .field-error, .form-errors, .errorlist) {
  color: #b4233d;
}

:where(button, .primary-btn, .secondary-btn, .soft-btn, .danger-btn, .success-btn):disabled,
:where(button, .primary-btn, .secondary-btn, .soft-btn, .danger-btn, .success-btn)[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .58 !important;
  box-shadow: none !important;
  filter: saturate(.55);
}

form[aria-busy="true"] :is(button[type="submit"], input[type="submit"]),
button.is-submitting {
  pointer-events: none;
  position: relative;
  padding-right: 2.85rem !important;
}

form[aria-busy="true"] :is(button[type="submit"], input[type="submit"])::after,
button.is-submitting::after {
  content: "";
  position: absolute;
  right: 1rem;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sh-action-spin .7s linear infinite;
}

/* Notification icon controls must stay optically centered after global
   button and radius rules are applied. */
.notification-hero-icon,
.notification-category-icon,
button.notification-delete-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  text-align: center;
}

.notification-hero-icon svg,
.notification-category-icon svg,
button.notification-delete-btn svg {
  position: static !important;
  inset: auto !important;
  display: block !important;
  flex: 0 0 auto;
  margin: 0 !important;
  transform: none !important;
  vertical-align: middle;
}

/* Minimal date-grouped notification inbox. */
.notification-workspace {
  width: 100%;
  max-width: none;
  gap: 0;
  padding: 0 6px 32px;
}

.notification-simple-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 4px 20px;
}

.notification-simple-header h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.75rem, 2.2vw, 2.15rem);
  letter-spacing: -0.035em;
}

.notification-mark-all {
  padding: 8px 4px;
  border: 0;
  color: var(--blue);
  background: transparent;
  font-weight: 800;
}
.notification-mark-all:disabled {
  cursor: default;
  opacity: .48;
  color: var(--muted);
}

.notification-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.notification-header-actions form {
  margin: 0;
}

.notification-header-actions .notification-category-filter select {
  min-width: 170px;
  min-height: 40px;
  border-color: var(--line);
  background: var(--surface);
}

.notification-inbox-panel {
  padding: 16px 28px 28px !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.notification-compact-filter {
  justify-content: flex-end;
  min-height: 0;
  margin: 0 0 4px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.notification-compact-filter .notification-category-filter select {
  min-width: 150px;
  min-height: 38px;
  border-color: var(--line);
  background: var(--surface);
}

.notification-date-heading {
  margin: 18px 0 4px !important;
  color: var(--muted);
  font-size: .78rem !important;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.notification-card {
  grid-template-columns: 44px minmax(0, 1fr) auto 8px;
  gap: 12px;
  min-height: 84px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
}

.notification-card.is-important {
  box-shadow: none;
}

.notification-card.is-unread {
  background: transparent;
}

.notification-category-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.notification-card-copy h3 {
  margin: 1px 0 5px;
  color: var(--text);
  font-size: .95rem;
  font-weight: 800;
}

.notification-card-copy p {
  color: var(--muted);
  font-size: .86rem;
}

.notification-row-time {
  color: var(--muted);
  font-size: .78rem;
  white-space: nowrap;
}

.notification-unread-dot {
  width: 8px;
  height: 8px;
  margin-top: 18px;
  border-radius: 50%;
  background: var(--blue);
}

.notification-actions {
  justify-content: flex-end;
  gap: 5px;
  margin: 6px 0 0;
}

.notification-row-side {
  min-width: 112px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.notification-actions .primary-btn.small,
.notification-actions .soft-btn.small {
  min-height: 32px;
  padding: .42rem .72rem;
  border-radius: 8px;
  font-size: .78rem;
}

.notification-delete-btn {
  inline-size: 32px !important;
  block-size: 32px !important;
  min-inline-size: 32px !important;
  min-block-size: 32px !important;
  opacity: .35;
  background: transparent !important;
}

@media (max-width: 640px) {
  .notification-workspace {
    padding-inline: 0;
  }

  .notification-simple-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 18px 2px 22px;
  }

  .notification-simple-header h1 {
    font-size: 2rem;
  }

  .notification-header-actions {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }

  .notification-header-actions .notification-category-filter {
    flex: 1;
  }

  .notification-header-actions .notification-category-filter select {
    width: 100%;
    min-width: 0;
  }

  .notification-inbox-panel {
    padding: 10px 16px 22px !important;
  }

  .notification-card {
    grid-template-columns: 44px minmax(0, 1fr) 8px;
    gap: 11px;
    padding: 16px 0;
  }

  .notification-category-icon {
    width: 44px;
    height: 44px;
  }

  .notification-row-side {
    grid-column: 2 / -1;
    align-items: flex-start;
    margin-top: -4px;
  }

  .notification-unread-dot {
    grid-column: 3;
    grid-row: 1;
  }

  .notification-actions {
    justify-content: flex-start;
  }
}

button.notification-delete-btn {
  inline-size: 32px !important;
  block-size: 32px !important;
  min-inline-size: 32px !important;
  min-block-size: 32px !important;
}

@keyframes sh-action-spin { to { transform: rotate(360deg); } }

.message {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  line-height: 1.45;
}

.message::before {
  content: "i";
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  font-size: .76rem;
  font-weight: 900;
}

.message.success::before { content: "\2713"; color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.message.error::before { content: "!"; color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.message.warning::before { content: "!"; color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }

.sh-confirm-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--text);
  background: var(--surface-strong, var(--surface));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .38);
}

.sh-confirm-dialog::backdrop { background: rgba(0, 11, 24, .7); backdrop-filter: blur(3px); }
.sh-confirm-dialog form { display: grid; gap: 1rem; padding: 1.5rem; }
.sh-confirm-dialog-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); font-size: 1.3rem; font-weight: 900; }
.sh-confirm-dialog h2 { margin: 0; font-size: 1.25rem; }
.sh-confirm-dialog p { margin: 0; color: var(--muted); line-height: 1.5; }
.sh-confirm-dialog-actions { display: flex; justify-content: flex-end; gap: .65rem; margin-top: .25rem; }

@media (max-width: 520px) {
  .sh-confirm-dialog form { padding: 1.25rem; }
  .sh-confirm-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  form[aria-busy="true"] :is(button[type="submit"], input[type="submit"])::after,
  button.is-submitting::after { animation-duration: 1.5s; }
}

/* Dashboard fidelity correction: compact, content-driven mockup geometry. */
body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, .98fr) !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-home-work-card,
body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid > .sh-role-actions {
  height: 294px !important;
  min-height: 294px !important;
  max-height: 294px !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-home-work-card {
  padding: 18px 22px !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-clock-status > p {
  margin: 0 0 14px !important;
  color: var(--calm-text) !important;
  font-size: .9rem !important;
  font-weight: 750 !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-clock-status > p span {
  display: none !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-work-summary {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-work-summary-icon {
  display: grid !important;
  width: 54px !important;
  height: 54px !important;
  place-items: center !important;
  color: #fff !important;
  border: 1px solid rgba(101, 174, 255, .42) !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #2563d9, #2f8cff) !important;
  box-shadow: 0 10px 24px rgba(22, 102, 215, .22) !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-work-summary-icon svg {
  width: 23px !important;
  height: 23px !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-work-summary h2 {
  margin: 0 !important;
  font-size: 1.02rem !important;
  line-height: 1.25 !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-work-summary strong {
  display: block !important;
  margin-top: 5px !important;
  color: var(--calm-muted) !important;
  font-size: .78rem !important;
  font-weight: 520 !important;
  line-height: 1.45 !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-home-work-card .sh-next-shift {
  margin-top: 15px !important;
  padding-top: 12px !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-home-mobile-action {
  width: 190px !important;
  min-height: 38px !important;
  margin: 12px 0 0 70px !important;
  color: #fff !important;
  border-color: #328cff !important;
  background: #176bd8 !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-role-actions-head {
  min-height: 34px !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-role-actions-head .eyebrow {
  display: none !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-role-action-total {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #172033 !important;
  background: var(--calm-amber) !important;
  font-size: .74rem !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-role-action-grid {
  display: grid !important;
  grid-auto-rows: 62px !important;
  align-content: start !important;
  min-height: 0 !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-role-action-card {
  height: 62px !important;
  min-height: 62px !important;
  padding: 8px 0 !important;
  align-self: start !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-role-action-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 7px !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-role-action-icon svg {
  width: 20px !important;
  height: 20px !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-role-action-badge {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card {
  min-height: 196px !important;
  padding: 16px 22px !important;
  gap: 10px !important;
}

body.dashboard-calm-page .sh-home-v3 .calendar-glance-head .today-icon,
body.dashboard-calm-page .sh-home-v3 .calendar-glance-head small,
body.dashboard-calm-page .sh-home-v3 .calendar-week-arrow,
body.dashboard-calm-page .sh-home-v3 .calendar-week-today {
  display: none !important;
}

body.dashboard-calm-page .sh-home-v3 .calendar-glance-head {
  display: flex !important;
  min-height: 26px !important;
}

body.dashboard-calm-page .sh-home-v3 .calendar-glance-head h2 {
  font-size: .95rem !important;
}

body.dashboard-calm-page .sh-home-v3 .calendar-week-actions {
  margin-left: auto !important;
}

body.dashboard-calm-page .sh-home-v3 .calendar-week-actions > a {
  position: absolute !important;
  right: 22px !important;
  bottom: 17px !important;
  font-size: .74rem !important;
}

body.dashboard-calm-page .sh-home-v3 .calendar-week-strip {
  min-height: 76px !important;
  overflow: hidden !important;
  border: 1px solid var(--calm-border-soft) !important;
  border-radius: 9px !important;
}

body.dashboard-calm-page .sh-home-v3 .calendar-day-pill {
  height: 74px !important;
  min-height: 74px !important;
  border: 0 !important;
  border-right: 1px solid var(--calm-border-soft) !important;
  border-radius: 0 !important;
}

body.dashboard-calm-page .sh-home-v3 .calendar-day-pill:last-child {
  border-right: 0 !important;
}

body.dashboard-calm-page .sh-home-v3 .calendar-day-pill.is-selected {
  border: 1px solid var(--calm-blue) !important;
  border-radius: 9px !important;
  background: rgba(26, 98, 193, .17) !important;
}

body.dashboard-calm-page .sh-home-v3 .calendar-week-detail {
  min-height: 34px !important;
  padding: 8px 128px 0 2px !important;
  font-size: .72rem !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance {
  min-height: 72px !important;
  padding: 10px 18px !important;
  grid-template-columns: 130px minmax(0, 1fr) auto !important;
  align-items: center !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance-head {
  display: contents !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance-head a {
  grid-column: 3 !important;
  grid-row: 1 !important;
  font-size: .74rem !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-admin-card-grid {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-height: 50px !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance-card {
  min-height: 50px !important;
}

@media (max-width: 1100px) {
  body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid {
    grid-template-columns: 1fr !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-home-work-card,
  body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid > .sh-role-actions {
    height: auto !important;
    min-height: 250px !important;
    max-height: none !important;
  }
}

@media (max-width: 760px) {
  body.dashboard-calm-page .sh-home-v3 .sh-home-mobile-action {
    width: 100% !important;
    margin-left: 0 !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance-head {
    display: flex !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-admin-card-grid {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* Shared data display: filters, tables, status, and actions. */
:is(.module-toolbar, .data-toolbar, .list-toolbar) {
  gap: 1rem;
}

:is(.filters, .device-approval-filter, .people-filter-form, .data-filter-form) {
  display: flex;
  align-items: end;
  gap: .75rem;
  flex-wrap: wrap;
}

:is(.filters, .device-approval-filter, .people-filter-form, .data-filter-form) label {
  min-width: 160px;
}

.responsive-table {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-strong, var(--surface));
}

.responsive-table tbody tr { transition: background-color .15s ease; }
.responsive-table tbody tr:hover td { background: color-mix(in srgb, var(--blue) 5%, var(--surface-strong, var(--surface))) !important; }
.responsive-table td > strong:first-child { color: var(--text); }
.responsive-table td > small { line-height: 1.4; }

:is(.status-chip, .device-status-chip, .leave-status-chip) {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 30px;
  padding: .35rem .65rem;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: normal;
}

.status-chip.success { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.status-chip.warning { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.status-chip.danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.status-chip.employee-status-active { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.status-chip.employee-status-inactive { color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); }
.status-chip.employee-status-pending_approval,
.status-chip.employee-status-onboarding,
.status-chip.employee-status-offboarding { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: 1rem;
  color: var(--muted);
}

@media (max-width: 760px) {
  :is(.filters, .device-approval-filter, .people-filter-form, .data-filter-form) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  :is(.filters, .device-approval-filter, .people-filter-form, .data-filter-form) label,
  :is(.filters, .device-approval-filter, .people-filter-form, .data-filter-form) > :first-child {
    min-width: 0;
  }

  .sh-responsive-cards { overflow: visible; border: 0; background: transparent; }
  .sh-responsive-cards table,
  .sh-responsive-cards tbody,
  .sh-responsive-cards tr,
  .sh-responsive-cards td { display: block; width: 100%; min-width: 0; }
  .sh-responsive-cards thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .sh-responsive-cards tbody { display: grid; gap: .75rem; }
  .sh-responsive-cards tr { padding: .35rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-strong, var(--surface)); }
  .sh-responsive-cards td { display: grid; grid-template-columns: minmax(100px, 38%) minmax(0, 1fr); gap: .75rem; align-items: start; padding: .75rem 0; border: 0 !important; border-bottom: 1px solid var(--line) !important; overflow-wrap: anywhere; }
  .sh-responsive-cards td:last-child { border-bottom: 0 !important; }
  .sh-responsive-cards td::before { content: attr(data-label); color: var(--muted); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
  .sh-responsive-cards td[colspan] { display: block; padding: 0; }
  .sh-responsive-cards td[colspan]::before { display: none; }
  .sh-responsive-cards .page-actions { justify-content: flex-start; }
  .pagination { justify-content: space-between; }
}

@media (max-width: 480px) {
  :is(.filters, .device-approval-filter, .people-filter-form, .data-filter-form) { grid-template-columns: 1fr; }
  .sh-responsive-cards td { grid-template-columns: 1fr; gap: .3rem; }
}

/* Collapsed desktop navigation is click-controlled; hovering never previews it. */
@media (min-width: 1101px) {
  .super-shell.is-authenticated.sidebar-collapsed:not(.sidebar-hover-locked) .sidebar:hover,
  .super-shell.is-authenticated.sidebar-collapsed:not(.sidebar-hover-locked) .sidebar:focus-within,
  .super-shell.is-authenticated.sidebar-collapsed .sidebar {
    width: var(--superhub-sidebar-collapsed) !important;
    padding-inline: 12px !important;
    box-shadow: none !important;
  }

  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-brand {
    justify-content: center !important;
    gap: 0 !important;
    margin-inline: 0 !important;
  }

  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .brand-copy,
  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .brand-wordmark,
  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .brand-wordmark--text,
  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-workspace-panel,
  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-flat-heading,
  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-simple-link > span:not(.nav-icon),
  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-link-badge,
  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .collapse-full {
    display: none !important;
  }

  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .collapse-mini {
    display: inline !important;
  }

  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-simple-link {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    gap: 0 !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-simple-link .nav-icon {
    display: grid !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    place-items: center !important;
    justify-self: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-simple-link .nav-svg {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
  }

  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-simple-link:hover,
  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-simple-link[aria-current="page"],
  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-simple-link.active {
    border-radius: 14px !important;
    box-shadow: inset 0 0 0 1px rgba(72, 160, 255, .36) !important;
  }

  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-flat-nav {
    width: 100% !important;
    padding-inline: 0 !important;
    scrollbar-gutter: auto !important;
    scrollbar-width: none;
  }

  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-flat-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-primary-main,
  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-primary-bottom {
    width: 100% !important;
    justify-items: center !important;
  }

  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-utility-footer,
  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-collapse-footer {
    width: 100% !important;
    padding-inline: 0 !important;
  }

  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-collapse-footer {
    display: grid !important;
    place-items: center !important;
  }

  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-collapse-footer .sidebar-toggle {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding-inline: 0 !important;
  }

  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-collapse-footer .collapse-mini {
    display: grid !important;
    width: 24px !important;
    height: 24px !important;
    place-items: center !important;
    line-height: 24px !important;
    text-align: center !important;
  }
}

/* Mockup-matched dashboard palette and desktop spacing. */
body.dashboard-calm-page {
  --calm-bg: #061727;
  --calm-sidebar: #071b2d;
  --calm-topbar: #07192a;
  --calm-surface: #0c263d;
  --calm-surface-soft: #0a2137;
  --calm-border: #1b3b58;
  --calm-border-soft: rgba(105, 145, 184, .18);
  --calm-text: #f4f8fc;
  --calm-muted: #94aac1;
  --calm-blue: #2f8cff;
  --calm-purple: #8065f2;
  --calm-green: #43d397;
  --calm-amber: #f2a23a;
  --calm-red: #e75868;
  background: var(--calm-bg) !important;
}

body.dashboard-calm-page .super-shell,
body.dashboard-calm-page .layout,
body.dashboard-calm-page .page-content {
  background: var(--calm-bg) !important;
}

body.dashboard-calm-page .topbar {
  height: 80px !important;
  border-bottom-color: var(--calm-border-soft) !important;
  background: rgba(7, 25, 42, .97) !important;
  box-shadow: none !important;
}

body.dashboard-calm-page .sidebar {
  border-right-color: var(--calm-border-soft) !important;
  background: var(--calm-sidebar) !important;
}

body.dashboard-calm-page .topbar-search,
body.dashboard-calm-page .sidebar-workspace-current,
body.dashboard-calm-page .account-pill,
body.dashboard-calm-page .topbar .circle-btn,
body.dashboard-calm-page .topbar .language-select {
  border-color: var(--calm-border) !important;
  background: rgba(9, 31, 51, .82) !important;
  box-shadow: none !important;
}

body.dashboard-calm-page .topbar-search input,
body.dashboard-calm-page .topbar-search input::placeholder {
  color: var(--calm-muted) !important;
}

body.dashboard-calm-page .sh-home-v3 .social-home-header h1,
body.dashboard-calm-page .sh-home-v3 h2,
body.dashboard-calm-page .sh-home-v3 h3,
body.dashboard-calm-page .sh-home-v3 strong {
  color: var(--calm-text) !important;
}

body.dashboard-calm-page .sh-home-v3 .social-home-header span,
body.dashboard-calm-page .sh-home-v3 small,
body.dashboard-calm-page .sh-home-v3 em {
  color: var(--calm-muted) !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-home-work-card,
body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid > .sh-role-actions,
body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card,
body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance {
  border: 1px solid var(--calm-border) !important;
  border-radius: 12px !important;
  background: var(--calm-surface) !important;
  box-shadow: none !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid .sh-role-actions-head,
body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid .sh-role-action-card,
body.dashboard-calm-page .sh-home-v3 .calendar-week-detail,
body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance-card {
  border-color: var(--calm-border-soft) !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-role-action-icon,
body.dashboard-calm-page .sh-home-v3 .sh-admin-card-icon {
  color: #71b8ff !important;
  background: rgba(47, 140, 255, .16) !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-role-action-card.is-warning .sh-role-action-icon,
body.dashboard-calm-page .sh-home-v3 .sh-role-action-card.is-warning .sh-role-action-badge,
body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance-card.is-amber .sh-admin-card-icon {
  color: #ffc06b !important;
  background: rgba(242, 162, 58, .16) !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-role-action-card.is-critical .sh-role-action-icon,
body.dashboard-calm-page .sh-home-v3 .sh-role-action-card.is-critical .sh-role-action-badge,
body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance-card.is-red .sh-admin-card-icon {
  color: #ff8793 !important;
  background: rgba(231, 88, 104, .17) !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-role-action-card.is-good .sh-role-action-icon,
body.dashboard-calm-page .sh-home-v3 .sh-role-action-card.is-good .sh-role-action-badge,
body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance-card.is-green .sh-admin-card-icon {
  color: #65e3ad !important;
  background: rgba(67, 211, 151, .15) !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-role-action-badge {
  color: #9ccaff !important;
  background: rgba(47, 140, 255, .14) !important;
}

body.dashboard-calm-page .sh-home-v3 a,
body.dashboard-calm-page .sh-home-v3 button.calendar-week-view-day {
  color: var(--calm-blue);
}

body.dashboard-calm-page .sh-home-mobile-action {
  border-color: rgba(47, 140, 255, .64);
  color: #fff;
  background: #1268d8;
}

body.dashboard-calm-page .sh-home-v3 .calendar-week-arrow,
body.dashboard-calm-page .sh-home-v3 .calendar-week-today {
  color: #dce8f5;
  border-color: var(--calm-border) !important;
  background: #092036;
}

body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card .calendar-day-pill {
  color: #dce8f5;
  border-color: transparent !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card .calendar-day-pill.is-selected {
  color: #fff !important;
  border-color: rgba(47, 140, 255, .72) !important;
  background: #102e4a !important;
  box-shadow: inset 0 0 0 1px rgba(47, 140, 255, .12) !important;
}

body.dashboard-calm-page .sh-home-v3 .is-scheduled { background: var(--calm-purple) !important; }
body.dashboard-calm-page .sh-home-v3 .is-clocked { background: var(--calm-green) !important; }
body.dashboard-calm-page .sh-home-v3 .is-leave { background: #4bc6ed !important; }
body.dashboard-calm-page .sh-home-v3 .is-task { background: var(--calm-amber) !important; }

body.dashboard-calm-page .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section .sidebar-simple-link {
  color: #afc0d2 !important;
}

body.dashboard-calm-page .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section .sidebar-simple-link[aria-current="page"],
body.dashboard-calm-page .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section .sidebar-simple-link.active {
  color: #eaf4ff !important;
  background: #12355e !important;
  box-shadow: inset 3px 0 0 var(--calm-blue) !important;
}

@media (min-width: 1101px) {
  body.dashboard-calm-page .page-content {
    padding: 28px 34px 40px !important;
  }

  body.dashboard-calm-page .sh-dashboard-home.sh-home-v3 {
    max-width: 1360px !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-home-v3-main {
    gap: 18px !important;
  }

  body.dashboard-calm-page .sh-home-v3 .social-home-header {
    min-height: 70px !important;
    padding: 8px 2px 0 !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 20px !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-home-work-card,
  body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid > .sh-role-actions {
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
    padding: 24px 26px !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid .sh-role-action-card {
    min-height: 72px !important;
    padding: 11px 2px !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card {
    min-height: 238px !important;
    padding: 22px 26px !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card .calendar-week-strip {
    min-height: 84px !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card .calendar-day-pill {
    min-height: 76px !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance {
    min-height: 90px !important;
    padding: 12px 20px !important;
  }
}

html[data-theme="light"] body.dashboard-calm-page {
  --calm-bg: #f3f7fb;
  --calm-sidebar: #ffffff;
  --calm-topbar: #ffffff;
  --calm-surface: #ffffff;
  --calm-surface-soft: #f7faff;
  --calm-border: #d8e4f0;
  --calm-border-soft: rgba(83, 112, 143, .16);
  --calm-text: #102033;
  --calm-muted: #627991;
}

html[data-theme="light"] body.dashboard-calm-page .topbar {
  background: rgba(255, 255, 255, .97) !important;
}

html[data-theme="light"] body.dashboard-calm-page .topbar-search,
html[data-theme="light"] body.dashboard-calm-page .sidebar-workspace-current,
html[data-theme="light"] body.dashboard-calm-page .account-pill,
html[data-theme="light"] body.dashboard-calm-page .topbar .circle-btn,
html[data-theme="light"] body.dashboard-calm-page .topbar .language-select {
  background: #f7faff !important;
}

/* Expanded desktop navigation stays flat; only interaction and selection get a surface. */
@media (min-width: 1101px) {
  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-simple-link {
    border-color: transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-simple-link:hover {
    border-radius: 9px !important;
    background: rgba(49, 124, 214, .10) !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-simple-link[aria-current="page"],
  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-simple-link.active {
    border-radius: 9px !important;
    background: linear-gradient(90deg, rgba(37, 99, 235, .20), rgba(37, 99, 235, .06)) !important;
    box-shadow: inset 3px 0 0 #3b96ff !important;
  }
}

/* Sectioned flat sidebar: hierarchy comes from groups, not a card around every link. */
body .super-shell.is-authenticated .sidebar .sidebar-nav-section {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 12px 0 14px;
  border-top: 1px solid rgba(116, 151, 190, .16) !important;
  background: rgba(10, 34, 58, .22) !important;
}

body .super-shell.is-authenticated .sidebar .sidebar-nav-section--home {
  padding: 0 0 10px;
  border-top: 0 !important;
  background: transparent !important;
}

body .super-shell.is-authenticated .sidebar .sidebar-nav-section--team,
body .super-shell.is-authenticated .sidebar .sidebar-nav-section--organization,
body .super-shell.is-authenticated .sidebar .sidebar-nav-section--admin {
  background: rgba(15, 48, 80, .30) !important;
}

body .super-shell.is-authenticated .sidebar .sidebar-nav-section .sidebar-flat-heading {
  margin: 0 18px 7px !important;
}

body .super-shell.is-authenticated .sidebar .sidebar-nav-section .sidebar-simple-link {
  min-height: 48px;
  margin-inline: 0 !important;
  padding-inline: 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: .92rem !important;
  font-weight: 560 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body .super-shell.is-authenticated .sidebar .sidebar-nav-section .sidebar-simple-link:hover {
  border-radius: 0 !important;
  background: rgba(49, 124, 214, .09) !important;
}

body .super-shell.is-authenticated .sidebar .sidebar-nav-section .sidebar-simple-link[aria-current="page"],
body .super-shell.is-authenticated .sidebar .sidebar-nav-section .sidebar-simple-link.active {
  color: #9acbff !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, rgba(37, 99, 235, .24), rgba(37, 99, 235, .07)) !important;
  box-shadow: inset 4px 0 0 #3296ff !important;
}

body .super-shell.is-authenticated .sidebar .sidebar-nav-section--utility {
  padding-block: 8px !important;
  border-top: 0 !important;
  background: transparent !important;
}

html[data-theme="light"] body .super-shell.is-authenticated .sidebar .sidebar-nav-section {
  border-top-color: rgba(57, 88, 123, .14) !important;
  background: rgba(225, 235, 246, .38) !important;
}

html[data-theme="light"] body .super-shell.is-authenticated .sidebar .sidebar-nav-section--home,
html[data-theme="light"] body .super-shell.is-authenticated .sidebar .sidebar-nav-section--utility {
  background: transparent !important;
}

html[data-theme="light"] body .super-shell.is-authenticated .sidebar .sidebar-nav-section--team,
html[data-theme="light"] body .super-shell.is-authenticated .sidebar .sidebar-nav-section--organization,
html[data-theme="light"] body .super-shell.is-authenticated .sidebar .sidebar-nav-section--admin {
  background: rgba(209, 225, 242, .42) !important;
}

html[data-theme="light"] body .super-shell.is-authenticated .sidebar .sidebar-nav-section .sidebar-simple-link[aria-current="page"],
html[data-theme="light"] body .super-shell.is-authenticated .sidebar .sidebar-nav-section .sidebar-simple-link.active {
  color: #0e68d7 !important;
  background: linear-gradient(90deg, rgba(37, 99, 235, .17), rgba(37, 99, 235, .04)) !important;
}

@media (min-width: 1101px) {
  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-nav-section {
    width: 100% !important;
    gap: 3px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-nav-section .sidebar-simple-link {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    margin-inline: auto !important;
    padding: 0 !important;
    border-radius: 14px !important;
  }

  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-nav-section .sidebar-simple-link:hover,
  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-nav-section .sidebar-simple-link[aria-current="page"],
  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-nav-section .sidebar-simple-link.active {
    border-radius: 14px !important;
    box-shadow: inset 0 0 0 1px rgba(72, 160, 255, .36) !important;
  }
}

/* Approved sidebar reference: full-width flat sections with a compact, quiet frame. */
.sidebar-workspace-compact {
  display: none;
}

@media (min-width: 1101px) {
  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar {
    padding: 24px 0 0 !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-brand {
    min-height: 58px !important;
    margin: 0 30px 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-brand .brand-mark,
  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-brand .brand-mark img {
    width: 54px !important;
    height: 54px !important;
    border-radius: 0 !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-brand .brand-mark {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-brand strong {
    font-size: 1.28rem !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-brand small {
    display: block !important;
    font-size: .68rem !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-workspace-panel {
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-workspace-head {
    padding: 0 30px 7px !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-workspace-current,
  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-workspace-empty {
    min-height: 58px !important;
    width: 100% !important;
    padding: 4px 30px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-workspace-current:hover,
  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-workspace-current:focus-visible {
    color: inherit !important;
    background: transparent !important;
    text-decoration: none !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-workspace-actions {
    width: auto !important;
    margin: 4px 30px 0 !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid rgba(116, 151, 190, .2) !important;
    background: transparent !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-workspace-actions a {
    min-height: 38px !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-workspace-actions a:hover,
  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-workspace-actions a:focus-visible {
    color: #74b9ff !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-workspace-compact {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto 12px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    color: #94aac3 !important;
    text-decoration: none !important;
  }

  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-workspace-compact:hover,
  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-workspace-compact:focus-visible {
    color: #c9e3ff !important;
    background: rgba(37, 99, 235, .18) !important;
    box-shadow: inset 0 0 0 1px rgba(72, 160, 255, .32) !important;
  }

  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-workspace-compact .nav-icon,
  body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-workspace-compact .nav-svg {
    width: 25px !important;
    height: 25px !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-flat-nav {
    flex: 0 0 auto !important;
    min-height: auto !important;
    width: 100% !important;
    margin-inline: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: visible !important;
    scrollbar-gutter: auto !important;
    scrollbar-width: none !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-flat-nav::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-primary-main {
    width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section {
    gap: 2px !important;
    padding: 17px 24px 19px !important;
    border-top: 1px solid rgba(116, 151, 190, .19) !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    background: transparent !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section--home {
    padding: 8px 0 !important;
    border-top: 1px solid rgba(116, 151, 190, .19) !important;
    border-bottom: 0 !important;
    background: transparent !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section--team,
  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section--organization,
  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section--admin {
    background: transparent !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section .sidebar-flat-heading {
    margin: 0 0 9px !important;
    color: #8198b4 !important;
    font-size: .7rem !important;
    letter-spacing: .14em !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section .sidebar-flat-heading::after {
    content: none !important;
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section .sidebar-simple-link {
    min-height: 48px !important;
    gap: 15px !important;
    padding-inline: 0 !important;
    color: #a9bbd0 !important;
    font-size: .93rem !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section:not(.sidebar-nav-section--home) .sidebar-simple-link {
    padding-inline: 0 !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section--home .sidebar-simple-link {
    min-height: 58px !important;
    padding-inline: 24px !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section .sidebar-simple-link .nav-icon,
  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section .sidebar-simple-link .nav-svg {
    width: 25px !important;
    height: 25px !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section .sidebar-simple-link:hover {
    color: #d7e9fb !important;
    background: transparent !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section .sidebar-simple-link[aria-current="page"],
  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section .sidebar-simple-link.active {
    color: #c6e2ff !important;
    background: linear-gradient(90deg, rgba(37, 99, 235, .28), rgba(37, 99, 235, .08)) !important;
    box-shadow: inset 4px 0 0 #2e9cff !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section:not(.sidebar-nav-section--home) .sidebar-simple-link[aria-current="page"],
  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section:not(.sidebar-nav-section--home) .sidebar-simple-link.active {
    margin-inline: -24px !important;
    padding-inline: 24px !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-utility-footer {
    position: static !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin-inline: 0 !important;
    gap: 0 !important;
    padding: 0 !important;
    border-top: 1px solid rgba(116, 151, 190, .22) !important;
    background: transparent !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section--utility {
    gap: 0 !important;
    padding: 8px 24px !important;
    border: 0 !important;
    background: transparent !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section--utility .sidebar-simple-link {
    min-height: 48px !important;
    padding-inline: 0 !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-collapse-footer {
    padding: 0 !important;
    border-top: 1px solid rgba(116, 151, 190, .19) !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-collapse-footer .sidebar-toggle {
    min-height: 54px !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding-inline: 24px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-collapse-footer .sidebar-toggle:hover {
    color: #d7e9fb !important;
    background: rgba(49, 124, 214, .08) !important;
  }

  html[data-theme="light"] body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section {
    border-color: rgba(57, 88, 123, .15) !important;
    background: transparent !important;
  }

  html[data-theme="light"] body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section--home,
  html[data-theme="light"] body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-utility-footer {
    background: #ffffff !important;
  }

  html[data-theme="light"] body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section .sidebar-simple-link {
    color: #4d6480 !important;
  }

  html[data-theme="light"] body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-workspace-actions {
    border-top-color: rgba(57, 88, 123, .17) !important;
  }

  html[data-theme="light"] body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-workspace-compact {
    color: #60758d !important;
  }

  html[data-theme="light"] body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-workspace-compact:hover,
  html[data-theme="light"] body .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-workspace-compact:focus-visible {
    color: #1769c2 !important;
    background: rgba(47, 134, 255, .11) !important;
  }
}

/* Final dashboard-v3 layout authority. Keep this after legacy dashboard rules. */
.sh-dashboard-home.sh-home-v3 {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

.sh-home-v3 .sh-home-v3-main {
  display: grid !important;
  gap: 18px !important;
  padding: 0 !important;
}

.sh-home-v3 .social-home-header {
  padding: 8px 2px 0 !important;
}

.sh-home-v3 .social-home-header h1 {
  max-width: none !important;
  font-size: clamp(2rem, 2.7vw, 2.8rem) !important;
}

.sh-home-v3 .sh-home-overview-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
  gap: 16px !important;
}

.sh-home-v3 .sh-home-work-card {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 270px) !important;
  min-height: 220px !important;
  gap: 22px !important;
  padding: 26px 28px !important;
}

.sh-home-v3 .sh-home-work-card .sh-clock-action-panel {
  grid-column: auto !important;
  grid-template-columns: 1fr !important;
  min-height: 0 !important;
  padding: 12px 0 12px 24px !important;
  border-top: 0 !important;
  border-left: 1px solid rgba(136, 169, 204, .18) !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center !important;
}

.sh-home-v3 .sh-home-calendar-card {
  display: grid !important;
  min-height: 220px !important;
  padding: 26px 28px !important;
}

.sh-home-v3 .sh-admin-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
}

.sh-home-v3 .sh-admin-attendance-card {
  min-height: 98px !important;
  padding: 16px 20px !important;
  border: 0 !important;
  border-left: 1px solid rgba(119, 157, 203, .16) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sh-home-v3 .sh-admin-attendance-card:first-child {
  border-left: 0 !important;
}

.sh-home-v3 > .social-home-today {
  display: block !important;
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  margin-top: 0 !important;
}

.sh-home-v3 .home-calendar-drawer:not([hidden]) {
  margin-top: 18px !important;
}

@media (max-width: 1280px) {
  .sh-home-v3 .sh-home-overview-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 900px) {
  .sh-home-v3 .sh-home-work-card {
    grid-template-columns: 1fr !important;
  }

  .sh-home-v3 .sh-home-work-card .sh-clock-action-panel {
    grid-column: 1 / -1 !important;
    padding: 20px 0 0 !important;
    border-top: 1px solid rgba(136, 169, 204, .18) !important;
    border-left: 0 !important;
    text-align: left !important;
  }

  .sh-home-v3 .sh-admin-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sh-home-v3 .sh-admin-attendance-card:nth-child(odd) {
    border-left: 0 !important;
  }
}

@media (max-width: 620px) {
  .sh-home-v3 .sh-admin-card-grid {
    grid-template-columns: 1fr !important;
  }

  .sh-home-v3 .sh-admin-attendance-card {
    border-left: 0 !important;
  }
}

.sh-home-v3 .sh-home-work-card,
.sh-home-v3 .sh-home-calendar-card {
  margin: 0;
  border: 1px solid rgba(119, 157, 203, .22);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(14, 39, 66, .84), rgba(8, 24, 42, .68));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 42px rgba(0, 0, 0, .14);
}

.sh-home-v3 .sh-home-work-card .sh-next-shift {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(139, 174, 214, .16);
}

.sh-home-v3 .sh-home-calendar-card {
  align-content: space-between;
  gap: 20px;
}

.sh-home-v3 .sh-home-calendar-card .calendar-week-strip {
  gap: 8px;
}

.sh-home-v3 .sh-home-calendar-card .calendar-day-pill {
  min-width: 0;
  min-height: 72px;
}

.sh-home-v3 .sh-role-actions:has(.sh-role-actions-empty) {
  padding: 0;
  overflow: hidden;
}

.sh-home-v3 .sh-role-actions:has(.sh-role-actions-empty) .sh-role-actions-head {
  display: none;
}

.sh-home-v3 .sh-role-actions:has(.sh-role-actions-empty) .sh-role-actions-empty {
  height: 100%;
  min-height: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: inherit;
}

.sh-home-v3 .sh-admin-attendance {
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid rgba(119, 157, 203, .22);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(14, 39, 66, .72), rgba(8, 24, 42, .54));
}

.sh-home-v3 .sh-admin-attendance-head {
  padding: 0;
}

.sh-home-v3 .sh-admin-attendance-head h2 {
  font-size: 1.22rem;
}

.sh-home-v3 .sh-admin-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #b8d8ff;
  background: rgba(36, 111, 240, .13);
}

.sh-home-v3 .sh-admin-attendance-card.is-green .sh-admin-card-icon {
  color: #60dda0;
  background: rgba(48, 169, 100, .13);
}

.sh-home-v3 .sh-admin-attendance-card.is-amber .sh-admin-card-icon {
  color: #ffbd63;
  background: rgba(238, 135, 43, .13);
}

.sh-home-v3 .sh-admin-attendance-card.is-red .sh-admin-card-icon {
  color: #ff8596;
  background: rgba(232, 75, 97, .13);
}

.sh-home-v3 .sh-admin-attendance-card strong {
  font-size: 1.65rem;
}

.sh-home-v3 .sh-admin-card-toolbar {
  display: inline-flex;
  opacity: 0;
  pointer-events: none;
}

.sh-home-v3 .sh-admin-attendance-card:hover .sh-admin-card-toolbar,
.sh-home-v3 .sh-admin-attendance-card:focus-within .sh-admin-card-toolbar {
  opacity: 1;
  pointer-events: auto;
}

.sh-home-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(300px, .9fr);
  gap: 14px;
  align-items: stretch;
}

.sh-home-lower-grid.is-compact {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
}

.sh-home-module {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(119, 157, 203, .22);
  border-radius: 12px;
  color: #f6fbff;
  background: linear-gradient(145deg, rgba(14, 39, 66, .76), rgba(8, 24, 42, .58));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 12px 28px rgba(0, 0, 0, .10);
}

.sh-home-module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.sh-home-module-head h2 {
  margin: 0;
  color: inherit;
  font-size: 1.05rem;
}

.sh-home-module-head a {
  flex: 0 0 auto;
  color: #4a9dff;
  font-size: .78rem;
  font-weight: 720;
}

.sh-home-module .sh-message-preview-list {
  overflow: hidden;
  border: 1px solid rgba(119, 157, 203, .16);
  border-radius: 10px;
  background: rgba(5, 20, 35, .28);
}

.sh-home-module .sh-message-preview-row {
  min-height: 74px;
  padding: 12px 14px;
}

.sh-home-module .sh-message-preview-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.sh-home-shift-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 86px;
  padding: 12px;
  border: 1px solid rgba(119, 157, 203, .16);
  border-radius: 10px;
  color: #f6fbff;
  background: rgba(5, 20, 35, .28);
}

.sh-home-shift-row:hover {
  color: #fff;
  border-color: rgba(74, 157, 255, .42);
  background: rgba(37, 99, 235, .10);
}

.sh-home-shift-row > span:nth-child(2),
.sh-home-compact-empty > span:last-child {
  display: grid;
  gap: 4px;
}

.sh-home-shift-row > span:nth-child(2) small,
.sh-home-compact-empty small {
  color: #98aec8;
}

.sh-home-shift-row > em {
  padding: 5px 8px;
  border-radius: 999px;
  color: #b9a7ff;
  background: rgba(124, 92, 255, .14);
  font-size: .7rem;
  font-style: normal;
}

.sh-home-date-tile {
  display: grid;
  place-items: center;
  min-height: 50px;
  border: 1px solid rgba(119, 157, 203, .22);
  border-radius: 9px;
  background: rgba(5, 20, 35, .36);
}

.sh-home-date-tile small {
  color: #9fb3cd;
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
}

.sh-home-date-tile strong {
  color: #f6fbff;
  font-size: 1.1rem;
}

.sh-home-compact-empty {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 86px;
  padding: 12px;
  border: 1px solid rgba(119, 157, 203, .16);
  border-radius: 10px;
  background: rgba(5, 20, 35, .24);
}

.sh-home-empty-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #55a6ff;
  background: rgba(36, 111, 240, .13);
}

.sh-home-empty-icon svg {
  width: 21px;
  height: 21px;
}

.sh-home-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sh-home-quick-grid a {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 84px;
  padding: 10px 6px;
  border: 1px solid rgba(119, 157, 203, .18);
  border-radius: 10px;
  color: #bcd0e8;
  background: rgba(5, 20, 35, .26);
  font-size: .76rem;
  text-align: center;
}

.sh-home-quick-grid a:hover {
  color: #fff;
  border-color: rgba(74, 157, 255, .42);
  background: rgba(37, 99, 235, .12);
}

.sh-home-quick-grid svg {
  width: 26px;
  height: 26px;
  color: #55a6ff;
}

html[data-theme="light"] .sh-home-v3 .sh-home-work-card,
html[data-theme="light"] .sh-home-v3 .sh-home-calendar-card,
html[data-theme="light"] .sh-home-v3 .sh-admin-attendance,
html[data-theme="light"] .sh-home-v3 .sh-home-module {
  color: #102033 !important;
  border-color: #d8e4f0 !important;
  background: #fff !important;
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme="light"] .sh-home-module .sh-message-preview-list,
html[data-theme="light"] .sh-home-shift-row,
html[data-theme="light"] .sh-home-compact-empty,
html[data-theme="light"] .sh-home-date-tile,
html[data-theme="light"] .sh-home-quick-grid a {
  color: #102033;
  border-color: #d8e4f0;
  background: #f7fbff;
}

html[data-theme="light"] .sh-home-date-tile strong,
html[data-theme="light"] .sh-home-shift-row strong {
  color: #102033;
}

@media (max-width: 1280px) {
  .sh-home-lower-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sh-home-quick-actions {
    grid-column: 1 / -1;
  }

  .sh-home-quick-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .sh-home-lower-grid {
    grid-template-columns: 1fr;
  }

  .sh-home-lower-grid > * {
    grid-column: 1;
  }
}

@media (max-width: 620px) {
  .sh-home-v3 .sh-home-work-card,
  .sh-home-v3 .sh-home-calendar-card,
  .sh-home-v3 .sh-admin-attendance,
  .sh-home-module {
    padding: 16px !important;
  }

  .sh-home-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sh-home-v3 .calendar-week-strip {
    overflow-x: auto;
    grid-template-columns: repeat(7, minmax(54px, 1fr));
  }
}

/* Weekly calendar navigator */
.sh-home-v3 .sh-home-calendar-card {
  outline: none;
}

.sh-home-v3 .sh-home-calendar-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(53, 148, 255, .28);
}

.sh-home-v3 .calendar-week-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.sh-home-v3 .calendar-week-actions > a {
  margin-left: 5px;
  white-space: nowrap;
}

.sh-home-v3 .calendar-week-arrow,
.sh-home-v3 .calendar-week-today {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(128, 166, 210, .22);
  border-radius: 9px;
  color: #c4d5e9;
  background: rgba(4, 19, 33, .42);
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  cursor: pointer;
}

.sh-home-v3 .calendar-week-arrow {
  padding: 0;
  font-size: 1.3rem;
}

.sh-home-v3 .calendar-week-arrow:hover,
.sh-home-v3 .calendar-week-today:hover,
.sh-home-v3 .calendar-week-today.is-current {
  color: #fff;
  border-color: rgba(61, 150, 255, .5);
  background: rgba(37, 99, 235, .18);
}

.sh-home-v3 .calendar-week-arrow:disabled,
.sh-home-v3 .calendar-week-today:disabled {
  opacity: .5;
  cursor: wait;
}

.sh-home-v3 .sh-home-calendar-card .calendar-week-strip {
  touch-action: pan-y;
  user-select: none;
}

.sh-home-v3 .sh-home-calendar-card .calendar-day-pill {
  min-width: 0;
  border: 1px solid transparent;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}

.sh-home-v3 .sh-home-calendar-card .calendar-day-pill.is-today:not(.is-selected) {
  border-color: rgba(52, 157, 255, .48);
}

.sh-home-v3 .sh-home-calendar-card .calendar-day-pill.is-selected {
  color: #fff;
  border-color: rgba(72, 169, 255, .74);
  background: linear-gradient(145deg, rgba(28, 118, 244, .38), rgba(17, 85, 174, .22));
  transform: translateY(-1px);
}

.sh-home-v3 .calendar-week-status {
  margin: 8px 0 0;
  color: #f1b44a;
  font-size: .76rem;
  font-weight: 700;
}

.sh-home-v3 .calendar-week-detail {
  display: grid;
  grid-template-columns: minmax(145px, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(125, 160, 201, .16);
  border-radius: 10px;
  background: rgba(4, 19, 33, .26);
}

.sh-home-v3 .calendar-week-detail > strong {
  color: #f4f8fd;
  font-size: .82rem;
}

.sh-home-v3 .calendar-week-detail > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.sh-home-v3 .calendar-week-detail span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #a9bed7;
  font-size: .72rem;
  white-space: nowrap;
}

.sh-home-v3 .calendar-week-detail b {
  color: #f4f8fd;
}

.sh-home-v3 .calendar-week-detail i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
}

.sh-home-v3 .calendar-week-detail > a,
.sh-home-v3 .calendar-week-detail > .calendar-week-view-day {
  white-space: nowrap;
  font-size: .74rem;
  font-weight: 800;
}

.sh-home-v3 .calendar-week-view-day {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--refined-blue);
  cursor: pointer;
}

.dashboard-calendar-menu.is-day-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 32px));
  overflow-y: auto;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 18px;
  box-shadow: 0 0 0 100vmax rgba(2, 12, 27, .58), 0 32px 100px rgba(0, 0, 0, .48);
}

.dashboard-calendar-menu .calendar-day-close {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(142, 174, 210, .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #dce9f8;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}

.dashboard-calendar-menu .calendar-day-close svg {
  width: 20px;
  height: 20px;
}

.dashboard-calendar-menu .calendar-day-close:hover {
  border-color: rgba(103, 169, 255, .72);
  background: rgba(35, 128, 255, .16);
  color: #fff;
  transform: scale(1.04);
}

.dashboard-calendar-menu .calendar-day-close:focus-visible {
  outline: 3px solid rgba(55, 145, 255, .4);
  outline-offset: 3px;
}

html[data-theme="light"] .dashboard-calendar-menu .calendar-day-close {
  border-color: #cad9e9;
  background: #f5f9fd;
  color: #2d4967;
}

html[data-theme="light"] .dashboard-calendar-menu .calendar-day-close:hover {
  border-color: #83b8f6;
  background: #e8f3ff;
  color: #0d64ca;
}

.dashboard-calendar-menu-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-calendar-menu-summary > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 8px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

.dashboard-calendar-menu-summary i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

.dashboard-calendar-menu-summary span {
  overflow: hidden;
  color: var(--muted);
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-calendar-menu-summary strong {
  grid-column: 1 / -1;
  color: var(--text);
  font-size: 1.35rem;
}

.dashboard-calendar-menu.is-day-dialog .dashboard-calendar-menu-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sh-home-v3 .sh-home-calendar-card.is-loading .calendar-week-strip {
  opacity: .62;
}

html[data-theme="light"] .sh-home-v3 .calendar-week-arrow,
html[data-theme="light"] .sh-home-v3 .calendar-week-today {
  color: #3f5570;
  border-color: #d7e3ef;
  background: #f7fbff;
}

html[data-theme="light"] .sh-home-v3 .calendar-week-today.is-current,
html[data-theme="light"] .sh-home-v3 .calendar-week-arrow:hover,
html[data-theme="light"] .sh-home-v3 .calendar-week-today:hover {
  color: #0f69df;
  border-color: #9ec9ff;
  background: #eaf4ff;
}

html[data-theme="light"] .sh-home-v3 .calendar-week-detail {
  border-color: #dce7f2;
  background: #f7fbff;
}

html[data-theme="light"] .sh-home-v3 .calendar-week-detail > strong,
html[data-theme="light"] .sh-home-v3 .calendar-week-detail b {
  color: #102033;
}

html[data-theme="light"] .sh-home-v3 .calendar-week-detail span {
  color: #526a84;
}

/* Calm, role-aware dashboard hierarchy. */
.sh-home-v3 .social-home-header {
  display: grid !important;
  gap: 4px !important;
  padding-top: 2px !important;
}

.sh-home-v3 .social-home-header h1 {
  font-size: clamp(1.65rem, 2.2vw, 2.15rem) !important;
  letter-spacing: -.025em !important;
}

.sh-home-v3 .social-home-header span {
  font-size: .88rem !important;
}

.sh-home-v3 .sh-home-overview-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.sh-home-v3 .sh-home-work-card,
.sh-home-v3 .sh-home-overview-grid > .sh-role-actions,
.sh-home-v3 .sh-home-calendar-card,
.sh-home-v3 .sh-admin-attendance {
  border-color: rgba(119, 157, 203, .18) !important;
  background: rgba(12, 34, 58, .72) !important;
  box-shadow: none !important;
}

.sh-home-v3 .sh-home-work-card {
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 300px !important;
  padding: 26px !important;
}

.sh-home-v3 .sh-home-work-card .sh-clock-action-panel {
  display: none !important;
}

.sh-home-v3 .sh-home-overview-grid > .sh-role-actions {
  min-height: 300px !important;
  margin: 0 !important;
  padding: 24px 26px !important;
  border: 1px solid rgba(119, 157, 203, .18) !important;
  border-radius: 12px !important;
}

.sh-home-v3 .sh-home-overview-grid .sh-role-actions-head {
  margin-bottom: 8px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(119, 157, 203, .14) !important;
}

.sh-home-v3 .sh-home-overview-grid .sh-role-actions-head .eyebrow {
  display: none !important;
}

.sh-home-v3 .sh-home-overview-grid .sh-role-actions-head h2 {
  font-size: 1.18rem !important;
}

.sh-home-v3 .sh-home-overview-grid .sh-role-action-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

.sh-home-v3 .sh-home-overview-grid .sh-role-action-card {
  min-height: 64px !important;
  padding: 10px 4px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(119, 157, 203, .12) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sh-home-v3 .sh-home-overview-grid .sh-role-action-card:last-child {
  border-bottom: 0 !important;
}

.sh-home-v3 .sh-home-overview-grid .sh-role-action-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
}

.sh-home-v3 .sh-home-calendar-card {
  min-height: 0 !important;
  padding: 22px 26px !important;
}

.sh-home-v3 .sh-home-calendar-card .calendar-glance-head h2 {
  font-size: 1.2rem !important;
}

.sh-home-v3 .sh-home-calendar-card .calendar-day-pill {
  min-height: 62px !important;
}

.sh-home-v3 .sh-admin-attendance {
  padding: 16px 20px !important;
}

.sh-home-v3 .sh-admin-attendance-head h2 {
  font-size: 1rem !important;
}

.sh-home-v3 .sh-admin-attendance-card {
  min-height: 66px !important;
  padding: 8px 18px !important;
}

.sh-home-v3 .sh-admin-attendance-card small,
.sh-home-v3 .sh-admin-attendance-card h3,
.sh-home-v3 .sh-admin-attendance-card > p,
.sh-home-v3 .sh-admin-card-toolbar {
  display: none !important;
}

.sh-home-v3 .sh-admin-attendance-card-link {
  grid-template-columns: 34px minmax(0, 1fr) !important;
}

.sh-home-v3 .sh-admin-card-icon {
  width: 34px !important;
  height: 34px !important;
}

.sh-home-v3 .sh-admin-attendance-card strong {
  margin: 0 !important;
  font-size: 1.3rem !important;
}

.sh-home-v3 .sh-home-lower-grid[hidden] {
  display: none !important;
}

html[data-theme="light"] .sh-home-v3 .sh-home-overview-grid > .sh-role-actions {
  color: #102033 !important;
  border-color: #d8e4f0 !important;
  background: #fff !important;
}

@media (max-width: 1100px) {
  .sh-home-v3 .sh-home-overview-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Dashboard fidelity pass: match the calm concept's scale and rhythm. */
@media (min-width: 901px) {
  body.dashboard-calm-page .super-shell.is-authenticated:not(.sidebar-collapsed) {
    --superhub-sidebar-width: 292px !important;
  }

  body.dashboard-calm-page .super-shell.is-authenticated:not(.sidebar-collapsed) .layout {
    grid-template-columns: var(--superhub-sidebar-width) minmax(0, 1fr) !important;
  }

  body.dashboard-calm-page .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar {
    width: var(--superhub-sidebar-width) !important;
  }

  body.dashboard-calm-page .super-shell.is-authenticated:not(.sidebar-collapsed) .topbar {
    left: var(--superhub-sidebar-width) !important;
  }
}

body.dashboard-calm-page .page-content {
  padding: 24px 16px 40px !important;
}

body.dashboard-calm-page .topbar-search {
  width: min(42vw, 520px) !important;
  max-width: 520px !important;
  flex: 0 1 520px !important;
}

body.dashboard-calm-page .topbar-actions .account-pill {
  min-width: 0 !important;
  max-width: 190px !important;
  padding-right: 14px !important;
}

body.dashboard-calm-page .topbar-actions .account-pill strong {
  overflow: hidden !important;
  max-width: 112px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.dashboard-calm-page .topbar-actions .account-pill small {
  display: none !important;
}

body.dashboard-calm-page .sh-dashboard-home.sh-home-v3 {
  width: 100% !important;
  max-width: none !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-home-v3-main {
  gap: 16px !important;
}

body.dashboard-calm-page .sh-home-v3 .social-home-header {
  display: grid !important;
  gap: 3px !important;
  min-height: 50px !important;
  padding: 0 2px !important;
  visibility: visible !important;
}

body.dashboard-calm-page .sh-home-v3 .social-home-header h1 {
  display: block !important;
  color: #f5f9ff !important;
  font-size: clamp(1.55rem, 2vw, 1.9rem) !important;
  line-height: 1.1 !important;
}

body.dashboard-calm-page .sh-home-v3 .social-home-header span {
  display: block !important;
  color: #9eb3cc !important;
  font-size: .82rem !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid {
  gap: 16px !important;
  align-items: start !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-home-work-card,
body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid > .sh-role-actions {
  height: 286px !important;
  min-height: 286px !important;
  max-height: 286px !important;
  overflow: hidden !important;
  align-self: start !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-home-work-card {
  padding: 22px 24px !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-clock-status {
  display: grid !important;
  align-content: start !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-clock-status p {
  margin-bottom: 12px !important;
  font-size: .85rem !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-clock-status p span {
  width: 9px !important;
  height: 9px !important;
  flex-basis: 9px !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-clock-status h2 {
  font-size: clamp(1.55rem, 2.1vw, 1.9rem) !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-clock-status > strong {
  max-width: 620px !important;
  margin-top: 7px !important;
  font-size: .84rem !important;
  line-height: 1.45 !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-home-work-card .sh-next-shift {
  margin-top: 18px !important;
  padding-top: 14px !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-next-shift b {
  font-size: 1.08rem !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-next-shift em {
  font-size: .77rem !important;
}

.sh-home-mobile-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(230px, 100%);
  min-height: 38px;
  margin-top: 14px;
  border: 1px solid rgba(68, 151, 255, .34);
  border-radius: 8px;
  color: #b8d5f6;
  background: rgba(37, 99, 235, .16);
  font-size: .78rem;
  font-weight: 760;
}

.sh-home-mobile-action svg {
  width: 16px;
  height: 16px;
}

body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid > .sh-role-actions {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: start !important;
  padding: 20px 24px !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid .sh-role-actions-head {
  margin: 0 !important;
  padding: 0 0 12px !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid .sh-role-action-grid {
  align-content: start !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid .sh-role-action-card {
  min-height: 58px !important;
  padding-block: 8px !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card {
  gap: 12px !important;
  padding: 18px 22px !important;
}

body.dashboard-calm-page .sh-home-v3 .calendar-glance-head {
  min-height: 38px !important;
}

body.dashboard-calm-page .sh-home-v3 .calendar-glance-head .today-icon {
  width: 36px !important;
  height: 36px !important;
}

body.dashboard-calm-page .sh-home-v3 .calendar-glance-head small {
  font-size: .68rem !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card .calendar-week-strip {
  gap: 6px !important;
  padding: 0 !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card .calendar-day-pill {
  width: auto !important;
  min-width: 0 !important;
  min-height: 58px !important;
  aspect-ratio: auto !important;
  border-radius: 9px !important;
  background: transparent !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card .calendar-day-pill.is-selected {
  background: rgba(30, 101, 198, .18) !important;
}

body.dashboard-calm-page .sh-home-v3 .calendar-week-detail {
  margin-top: 2px !important;
  padding: 10px 2px 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(125, 160, 201, .14) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.dashboard-calm-page .sh-home-v3 .calendar-week-view-day {
  display: none !important;
}

body.dashboard-calm-page .sh-home-v3 .calendar-week-detail {
  grid-template-columns: minmax(160px, 1fr) auto !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance {
  display: grid !important;
  gap: 6px !important;
  padding: 12px 18px !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance-head {
  min-height: 24px !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-admin-card-grid {
  min-height: 54px !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance-card {
  min-height: 54px !important;
  padding: 6px 14px !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance-card h3 {
  display: block !important;
  margin: 1px 0 0 !important;
  color: #9eb3cc !important;
  font-size: .68rem !important;
  font-weight: 650 !important;
}

body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance-card strong {
  font-size: 1.08rem !important;
}

@media (min-width: 901px) {
  body.dashboard-calm-page .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section {
    padding-block: 12px !important;
  }

  body.dashboard-calm-page .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section .sidebar-simple-link {
    min-height: 40px !important;
    gap: 12px !important;
    font-size: .84rem !important;
  }

  body.dashboard-calm-page .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section .sidebar-simple-link .nav-icon,
  body.dashboard-calm-page .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section .sidebar-simple-link .nav-svg {
    width: 21px !important;
    height: 21px !important;
  }

  body.dashboard-calm-page .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-nav-section--home .sidebar-simple-link {
    min-height: 48px !important;
  }

  body.dashboard-calm-page .topbar-actions > .logout-btn {
    display: none !important;
  }

  body.dashboard-calm-page .topbar-actions > .language-form .language-select {
    width: 104px !important;
    min-width: 104px !important;
  }
}

@media (max-width: 1100px) {
  body.dashboard-calm-page .sh-home-v3 .sh-home-work-card,
  body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid > .sh-role-actions {
    height: auto !important;
    max-height: none !important;
  }
}

/* Role-aware sidebar groups: personal work stays visible; management tools collapse. */
.sidebar-collapsible-section > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.sidebar-collapsible-section > summary::-webkit-details-marker {
  display: none;
}

body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-collapsible-section > .sidebar-flat-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 30px !important;
  margin-bottom: 0 !important;
  color: #8da4bf !important;
}

body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-collapsible-section > .sidebar-flat-heading::after {
  content: "\203A" !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  color: #7890aa !important;
  background: transparent !important;
  font-size: 1.15rem !important;
  line-height: 1 !important;
  transform: rotate(0deg);
  transition: transform .16s ease;
}

body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-collapsible-section[open] > .sidebar-flat-heading::after {
  transform: rotate(90deg);
}

.sidebar-collapsible-links {
  display: grid;
  gap: 0;
  padding-top: 5px;
}

body.dashboard-calm-page .sidebar-collapsible-section:not([open]) {
  padding-bottom: 6px !important;
}

body.dashboard-calm-page .sidebar-collapsible-section[open] > .sidebar-collapsible-links {
  animation: sidebar-section-reveal .16s ease-out;
}

@keyframes sidebar-section-reveal {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

.sidebar-collapsible-section > summary:focus-visible {
  outline: 2px solid rgba(64, 153, 255, .72);
  outline-offset: 4px;
  border-radius: 4px;
}

html[data-theme="light"] body.dashboard-calm-page .sh-home-v3 .social-home-header h1 {
  color: #102033 !important;
}

html[data-theme="light"] body.dashboard-calm-page .sh-home-v3 .social-home-header span {
  color: #627991 !important;
}

html[data-theme="light"] body.dashboard-calm-page .sh-home-v3 .sh-home-work-card,
html[data-theme="light"] body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid > .sh-role-actions,
html[data-theme="light"] body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card,
html[data-theme="light"] body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance {
  color: #102033 !important;
  border-color: #d8e4f0 !important;
  background: #fff !important;
  box-shadow: 0 10px 28px rgba(33, 61, 91, .07) !important;
}

html[data-theme="light"] body.dashboard-calm-page .sh-home-mobile-action {
  color: #1769c2;
  border-color: #bad7f7;
  background: #edf6ff;
}

html[data-theme="light"] body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid .sh-role-action-card {
  color: #102033 !important;
  border-bottom-color: #e3ecf5 !important;
  background: transparent !important;
}

html[data-theme="light"] body.dashboard-calm-page .sh-home-v3 .calendar-week-detail {
  border-top-color: #dce7f2 !important;
  background: transparent !important;
}

html[data-theme="light"] body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance-card h3 {
  color: #627991 !important;
}

html[data-theme="light"] body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-collapsible-section > .sidebar-flat-heading {
  color: #60758d !important;
}

html[data-theme="light"] body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-collapsible-section > .sidebar-flat-heading::after {
  color: #71869d !important;
}

@media (max-width: 1100px) {
  body.dashboard-calm-page .page-content {
    padding: 24px !important;
  }

  body.dashboard-calm-page .sh-dashboard-home.sh-home-v3 {
    max-width: 900px !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid {
    gap: 14px !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-home-work-card,
  body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid > .sh-role-actions {
    min-height: 0 !important;
  }
}

@media (max-width: 760px) {
  body.dashboard-calm-page .page-content {
    padding: 18px 16px 30px !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-home-v3-main {
    gap: 12px !important;
  }

  body.dashboard-calm-page .sh-home-v3 .social-home-header {
    min-height: 44px !important;
  }

  body.dashboard-calm-page .sh-home-v3 .social-home-header h1 {
    font-size: 1.45rem !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-home-work-card,
  body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid > .sh-role-actions,
  body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card,
  body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance {
    padding: 18px !important;
    border-radius: 10px !important;
  }

  body.dashboard-calm-page .sh-home-mobile-action {
    width: 100%;
  }

  body.dashboard-calm-page .sh-home-v3 .calendar-week-actions {
    width: 100%;
  }

  body.dashboard-calm-page .sh-home-v3 .calendar-week-actions > a {
    margin-left: auto;
  }

  body.dashboard-calm-page .sh-home-v3 .calendar-week-detail {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.dashboard-calm-page .sh-home-v3 .calendar-week-detail > div {
    justify-content: flex-start !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-admin-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance-card,
  body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance-card:nth-child(odd) {
    border-left: 0 !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance-card:nth-child(even) {
    border-left: 1px solid rgba(119, 157, 203, .16) !important;
  }
}

@media (max-width: 430px) {
  body.dashboard-calm-page .sh-home-v3 .calendar-week-actions > a {
    width: 100%;
    margin: 6px 0 0;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card .calendar-week-strip {
    grid-template-columns: repeat(7, minmax(46px, 1fr)) !important;
    overflow-x: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-collapsible-section[open] > .sidebar-collapsible-links {
    animation: none !important;
  }

  .sidebar-collapsible-section > .sidebar-flat-heading::after {
    transition: none !important;
  }
}

@media (max-width: 900px) {
  .sh-home-v3 .calendar-glance-head {
    flex-wrap: wrap;
  }

  .sh-home-v3 .calendar-week-actions {
    flex: 1 0 100%;
    margin-top: 8px;
  }
}

@media (max-width: 620px) {
  .sh-home-v3 .calendar-week-actions > a {
    margin-left: auto;
  }

  .sh-home-v3 .calendar-week-strip {
    grid-template-columns: repeat(7, minmax(48px, 1fr));
  }

  .sh-home-v3 .calendar-week-detail {
    grid-template-columns: 1fr auto;
  }

  .sh-home-v3 .calendar-week-detail > div {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }

  .sh-home-v3 .calendar-week-detail > a,
  .sh-home-v3 .calendar-week-detail > .calendar-week-view-day {
    grid-column: 2;
    grid-row: 1;
  }

  .dashboard-calendar-menu-summary,
  .dashboard-calendar-menu.is-day-dialog .dashboard-calendar-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Sidebar organization dropdown: one clear switcher with creation in context. */
.sidebar-workspace-dropdown {
  position: relative;
  width: 100%;
  min-width: 0;
}

.sidebar-workspace-dropdown > summary {
  list-style: none;
}

.sidebar-workspace-dropdown > summary::-webkit-details-marker {
  display: none;
}

.sidebar-workspace-chevron,
.sidebar-workspace-option-check,
.sidebar-workspace-option-arrow {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--text-soft, #91a8c2);
  transition: color .16s ease, transform .16s ease;
}

.sidebar-workspace-chevron .nav-svg,
.sidebar-workspace-option-check .nav-svg,
.sidebar-workspace-option-arrow .nav-svg {
  width: 17px;
  height: 17px;
}

.sidebar-workspace-dropdown[open] .sidebar-workspace-chevron {
  color: var(--blue, #2f86ff);
  transform: rotate(180deg);
}

.sidebar-workspace-menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  width: auto;
  min-width: 0;
  box-sizing: border-box;
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--blue, #2f86ff) 26%, var(--line));
  border-radius: 14px;
  background: #10283f;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .34);
}

.sidebar-workspace-menu-label {
  margin: 0;
  padding: 4px 7px 5px;
  color: var(--text-soft, #91a8c2);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.sidebar-workspace-options {
  display: grid;
  gap: 4px;
  max-height: min(280px, 45vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.sidebar-workspace-option,
.sidebar-workspace-create {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text, #e8f2ff);
  text-decoration: none;
}

.sidebar-workspace-option:hover,
.sidebar-workspace-option:focus-visible,
.sidebar-workspace-create:hover,
.sidebar-workspace-create:focus-visible {
  border-color: color-mix(in srgb, var(--blue, #2f86ff) 32%, transparent);
  background: color-mix(in srgb, var(--blue, #2f86ff) 12%, transparent);
  color: var(--text, #e8f2ff);
  text-decoration: none;
  outline: none;
}

.sidebar-workspace-option.is-current {
  border-color: color-mix(in srgb, var(--blue, #2f86ff) 30%, transparent);
  background: color-mix(in srgb, var(--blue, #2f86ff) 15%, transparent);
}

.sidebar-workspace-option-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--blue, #2f86ff) 14%, transparent);
  color: var(--blue, #2f86ff);
}

.sidebar-workspace-option-icon .nav-svg {
  width: 18px;
  height: 18px;
}

.sidebar-workspace-option-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sidebar-workspace-option-copy strong,
.sidebar-workspace-option-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-workspace-option-copy strong {
  color: inherit;
  font-size: .79rem;
  font-weight: 760;
}

.sidebar-workspace-option-copy small {
  color: var(--text-soft, #91a8c2);
  font-size: .65rem;
  font-weight: 560;
}

.sidebar-workspace-option-check {
  color: #35d59a;
}

.sidebar-workspace-option:hover .sidebar-workspace-option-arrow,
.sidebar-workspace-option:focus-visible .sidebar-workspace-option-arrow,
.sidebar-workspace-create:hover .sidebar-workspace-option-arrow,
.sidebar-workspace-create:focus-visible .sidebar-workspace-option-arrow {
  color: var(--blue, #2f86ff);
  transform: translateX(2px);
}

.sidebar-workspace-create {
  margin-top: 3px;
  padding-top: 9px;
  border-top-color: color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: 0 0 10px 10px;
}

html[data-theme="light"] .sidebar-workspace-menu {
  border-color: #c9d9eb;
  background: #ffffff;
  box-shadow: 0 20px 44px rgba(21, 47, 76, .18);
}

html[data-theme="light"] .sidebar-workspace-option,
html[data-theme="light"] .sidebar-workspace-create {
  color: #102033;
}

html[data-theme="light"] .sidebar-workspace-option.is-current {
  border-color: #b7d2f5;
  background: #eaf3ff;
}

html[data-theme="light"] .sidebar-workspace-option:hover,
html[data-theme="light"] .sidebar-workspace-option:focus-visible,
html[data-theme="light"] .sidebar-workspace-create:hover,
html[data-theme="light"] .sidebar-workspace-create:focus-visible {
  border-color: #b7d2f5;
  background: #f1f7ff;
  color: #102033;
}

/* Sidebar information architecture: expandable destinations and safe scrolling. */
.super-shell.is-authenticated .sidebar {
  overflow: hidden !important;
}

.super-shell.is-authenticated .sidebar-flat-nav {
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.sidebar-nav-disclosure {
  display: block;
}

.sidebar-nav-disclosure > summary {
  list-style: none;
}

.sidebar-nav-disclosure > summary::-webkit-details-marker {
  display: none;
}

.sidebar-group-summary {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 0;
  color: var(--text-soft);
  font-size: .78rem;
  font-weight: 760;
  cursor: pointer;
  user-select: none;
}

.sidebar-group-summary:hover,
.sidebar-group-summary:focus-visible,
.sidebar-nav-disclosure[open] > .sidebar-group-summary {
  color: var(--text);
}

.sidebar-group-summary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue) 70%, transparent);
  outline-offset: 2px;
  border-radius: 8px;
}

.sidebar-group-summary .nav-icon {
  display: grid;
  place-items: center;
}

.sidebar-group-chevron {
  display: grid;
  place-items: center;
  transition: transform .16s ease;
}

.sidebar-nav-disclosure[open] .sidebar-group-chevron {
  transform: rotate(180deg);
}

.sidebar-group-links {
  display: grid;
  padding: 0 0 6px;
}

.super-shell.is-authenticated .sidebar-group-links .sidebar-simple-link {
  min-height: 38px !important;
  font-size: .75rem;
}

.super-shell.is-authenticated .sidebar-group-links .nav-icon {
  width: 18px !important;
  min-width: 18px !important;
  color: var(--text-soft);
  font-size: 1rem;
}

@media (min-width: 1101px) {
  .super-shell.is-authenticated.sidebar-collapsed .sidebar-nav-disclosure .sidebar-group-summary {
    grid-template-columns: 1fr;
    width: 48px;
    min-height: 48px;
    margin-inline: auto;
    padding: 0;
    border-radius: 10px;
  }

  .super-shell.is-authenticated.sidebar-collapsed .sidebar-nav-disclosure .sidebar-group-summary > span:not(.nav-icon),
  .super-shell.is-authenticated.sidebar-collapsed .sidebar-nav-disclosure .sidebar-group-links {
    display: none;
  }
}

@media (max-width: 1100px) {
  .super-shell.is-authenticated .sidebar {
    overflow: hidden !important;
  }

  .super-shell.is-authenticated .sidebar-flat-nav {
    flex: 1 1 auto;
    min-height: 0;
  }
}

@media (min-width: 1101px) {
  body .super-shell.is-authenticated:not(.sidebar-collapsed) .sidebar .sidebar-workspace-dropdown[open] > .sidebar-workspace-current {
    background: color-mix(in srgb, var(--blue, #2f86ff) 8%, transparent) !important;
  }
}

/* People workspace refresh: clear entry paths and a calmer employee directory. */
.people-management-hero {
  align-items: center;
  gap: 24px;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid color-mix(in srgb, var(--blue, #2f86ff) 22%, var(--line));
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 0%, rgba(27, 188, 255, .12), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 92%, #0b3156), var(--panel));
}

.people-management-hero h1 {
  margin-bottom: 8px;
}

.people-hero-copy {
  margin: 0;
  max-width: 560px;
}

.people-hero-count {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 14px 0 0;
  padding: 6px 11px;
  border: 1px solid color-mix(in srgb, var(--blue, #2f86ff) 24%, var(--line));
  border-radius: 999px;
  color: var(--blue, #2f86ff);
  background: color-mix(in srgb, var(--blue, #2f86ff) 9%, transparent);
  font-size: .78rem;
  font-weight: 800;
}

.people-invite-disclosure > summary {
  min-height: 74px;
  padding: 16px 20px;
  border-radius: 18px;
}

.add-employee-panel,
.people-directory-panel {
  border-radius: 20px;
}

.employee-mode-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.employee-mode-option {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 72px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel-soft) 84%, transparent);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.employee-mode-option > span:first-child {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--blue, #2f86ff);
  background: color-mix(in srgb, var(--blue, #2f86ff) 13%, transparent);
  font-size: 1.05rem;
}

.employee-mode-option strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-mode-option:hover,
.employee-mode-option:focus-visible {
  border-color: color-mix(in srgb, var(--blue, #2f86ff) 55%, var(--line));
  color: var(--text);
  background: color-mix(in srgb, var(--blue, #2f86ff) 10%, var(--panel));
  text-decoration: none;
  transform: translateY(-1px);
  outline: none;
}

.employee-mode-option.is-active {
  border-color: var(--blue, #2f86ff);
  background: linear-gradient(135deg, rgba(33, 103, 232, .24), rgba(24, 174, 240, .12));
  box-shadow: inset 3px 0 0 var(--blue, #2f86ff);
}

.field-optional {
  color: var(--text-soft);
  font-size: .72rem;
  font-weight: 650;
}

.people-directory-table table {
  border-collapse: separate;
  border-spacing: 0 8px;
}

.people-directory-table thead th {
  border: 0;
  color: var(--text-soft);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.people-directory-table tbody td {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-soft) 86%, transparent);
}

.people-directory-table tbody td:first-child {
  border-left: 1px solid var(--line);
  border-radius: 14px 0 0 14px;
}

.people-directory-table tbody td:last-child {
  border-right: 1px solid var(--line);
  border-radius: 0 14px 14px 0;
}

.people-department {
  color: var(--text-soft);
  font-weight: 700;
}

.people-action-trigger {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: var(--panel);
  font-size: 1.25rem;
  cursor: pointer;
}

.people-action-trigger::marker,
.people-action-trigger::-webkit-details-marker {
  display: none;
}

.people-action-menu[open]::before {
  content: "";
  position: fixed;
  z-index: 245;
  inset: 0;
  background: rgba(3, 13, 27, .58);
  backdrop-filter: blur(2px);
}

.people-action-popover {
  position: fixed;
  z-index: 250;
  top: 92px;
  right: 24px;
  left: auto;
  width: min(380px, calc(100vw - 36px));
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--blue, #2f86ff) 25%, var(--line));
  border-radius: 20px;
  background: var(--panel);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .42);
}

.people-action-person {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: -2px -2px 14px;
  padding: 4px 4px 16px;
  border-bottom: 1px solid var(--line);
}

.people-action-person > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.people-action-person strong,
.people-action-person small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-action-person small {
  color: var(--text-soft);
}

html[data-theme="light"] .people-management-hero {
  background:
    radial-gradient(circle at 92% 0%, rgba(27, 188, 255, .13), transparent 34%),
    linear-gradient(135deg, #ffffff, #f4f9ff);
}

html[data-theme="light"] .people-action-popover {
  background: #ffffff;
  box-shadow: 0 28px 70px rgba(26, 50, 77, .24);
}

@media (max-width: 760px) {
  .people-management-hero {
    align-items: stretch;
  }

  .people-management-hero .page-actions .primary-btn {
    width: 100%;
  }

  .employee-mode-switch {
    grid-template-columns: 1fr;
  }

  .employee-mode-option {
    min-height: 62px;
  }

  .people-action-popover {
    top: auto;
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: auto;
    max-height: min(76vh, 680px);
    border-radius: 22px;
  }
}

/* People directory final cascade guard — keep at the end of this bundle. */
body .employee-mode-switch {
  align-items: stretch !important;
}

body .employee-mode-switch > .employee-mode-option {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: center !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 72px !important;
  min-height: 72px !important;
  margin: 0 !important;
  padding: 13px 14px !important;
  line-height: 1.2 !important;
}

body .employee-mode-switch > .employee-mode-link {
  justify-self: stretch !important;
}

body .employee-form-section {
  margin-top: 16px !important;
  padding: 18px !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--panel-soft) 72%, transparent) !important;
}

body .employee-form-section .compact-form.two {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px 16px !important;
  margin: 0 !important;
}

body .employee-form-section-heading {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 15px !important;
}

body .employee-submit-btn {
  width: 100% !important;
  margin-top: 16px !important;
}

body .super-shell.is-authenticated .page-content > .people-management-hero {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 0 18px !important;
  padding: 2px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .super-shell.is-authenticated .people-management-hero > div:first-child,
body .super-shell.is-authenticated .people-management-hero .people-hero-copy,
body .super-shell.is-authenticated .people-management-hero .page-actions {
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .super-shell.is-authenticated .people-management-hero .people-hero-count {
  display: none !important;
}

body .super-shell.is-authenticated .people-management-hero .page-actions {
  display: flex !important;
  justify-content: flex-end !important;
}

body .people-invite-disclosure > summary {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) 34px !important;
  align-items: center !important;
  width: 100% !important;
}

body .people-action-menu[open]::before {
  content: none !important;
}

body .people-action-menu[open] > .people-action-backdrop {
  display: block !important;
}

body .people-action-popover {
  top: 112px !important;
  right: 28px !important;
  bottom: 28px !important;
  left: auto !important;
  width: min(360px, calc(100vw - 36px)) !important;
  max-height: none !important;
  padding: 18px !important;
  border-radius: 18px !important;
}

body .people-action-person {
  grid-template-columns: 46px minmax(0, 1fr) 40px !important;
  margin: 0 0 14px !important;
  padding: 0 0 16px !important;
}

body .people-action-close {
  display: grid !important;
  place-items: center !important;
}

@media (max-width: 760px) {
  body .employee-mode-switch > .employee-mode-option {
    height: 64px !important;
    min-height: 64px !important;
  }

  body .employee-form-section {
    padding: 15px !important;
  }

  body .employee-form-section-heading {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  body .employee-form-section .compact-form.two {
    grid-template-columns: 1fr !important;
  }

  body .super-shell.is-authenticated .page-content > .people-management-hero {
    align-items: stretch !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  body .super-shell.is-authenticated .people-management-hero .page-actions,
  body .super-shell.is-authenticated .people-management-hero .page-actions .primary-btn {
    width: 100% !important;
  }

  body .people-action-popover {
    top: auto !important;
    right: 10px !important;
    bottom: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-height: min(78vh, 680px) !important;
  }
}
.approval-center{display:grid;gap:24px}.approval-center-header{align-items:flex-start}.approval-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.approval-summary-card{display:grid;gap:4px;padding:18px 20px;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:inherit;text-decoration:none}.approval-summary-card strong{font-size:1.75rem}.approval-summary-card span{color:var(--muted)}.approval-summary-card.is-active{border-color:var(--primary);box-shadow:inset 3px 0 var(--primary)}.approval-summary-card.is-danger strong{color:var(--danger)}.approval-summary-card.is-warning strong{color:#f59e0b}.approval-filter-bar{display:grid;grid-template-columns:minmax(260px,2fr) repeat(2,minmax(160px,1fr)) auto;gap:14px;align-items:end;padding:18px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}.approval-filter-bar label{display:grid;gap:7px}.approval-filter-bar input,.approval-filter-bar select{width:100%}.approval-list-panel{overflow:hidden;border:1px solid var(--border);border-radius:18px;background:var(--surface)}.approval-center-row{display:grid;grid-template-columns:minmax(240px,1.2fr) minmax(420px,2fr) auto;gap:24px;align-items:center;padding:20px;border-bottom:1px solid var(--border)}.approval-center-row:last-child{border-bottom:0}.approval-center-row.is-overdue{box-shadow:inset 3px 0 var(--danger)}.approval-center-main h2{margin:8px 0 4px;font-size:1.05rem}.approval-center-main p{margin:0;color:var(--muted)}.approval-center-row dl{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0}.approval-center-row dt{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}.approval-center-row dd{margin:5px 0 0}.approval-center-actions{display:flex;align-items:center;gap:10px}.approval-center-actions details{position:relative}.approval-center-actions summary{cursor:pointer;color:var(--primary)}.approval-center-actions ol{position:absolute;right:0;z-index:5;width:280px;margin:10px 0 0;padding:14px 14px 14px 32px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-lg)}.approval-center-actions li{margin-bottom:10px}.approval-center-actions li span,.approval-center-actions li small{display:block;color:var(--muted);font-size:.75rem}@media(max-width:900px){.approval-summary-grid{grid-template-columns:repeat(2,1fr)}.approval-filter-bar{grid-template-columns:1fr 1fr}.approval-center-row{grid-template-columns:1fr}.approval-center-row dl{grid-template-columns:repeat(3,1fr)}}@media(max-width:560px){.approval-filter-bar,.approval-center-row dl{grid-template-columns:1fr}.approval-center-actions{justify-content:space-between}}
.approval-header-actions{display:flex;gap:10px;flex-wrap:wrap}.approval-operations-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.approval-operations-card{padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}.approval-operations-card h2{margin:5px 0 16px}.approval-operations-card dl{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0}.approval-operations-card dt{color:var(--muted);font-size:.78rem}.approval-operations-card dd{margin:5px 0 0;font-size:1.3rem;font-weight:700}.approval-operations-card ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}.approval-operations-card li{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}.approval-operations-card li:last-child{border:0}.approval-operations-card li small{color:var(--danger)}@media(max-width:760px){.approval-operations-grid{grid-template-columns:1fr}}

/* Compact top-mounted sidebar collapse control. */
.super-shell.is-authenticated .sidebar-brand-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 12;
  min-height: 72px;
  margin: 0 0 12px;
  padding: 8px 4px 10px;
  overflow: visible;
  background: #061625;
}
.super-shell.is-authenticated .sidebar-header-brand {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
  color: var(--text);
  overflow: hidden;
  text-decoration: none;
}
.super-shell.is-authenticated .sidebar-header-mark {
  display: block !important;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
}
.super-shell.is-authenticated .sidebar-header-mark img {
  display: block !important;
  width: 54px !important;
  height: 54px !important;
  object-fit: contain;
}
.super-shell.is-authenticated .sidebar-header-copy {
  display: grid !important;
  flex: 1 1 auto;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
  line-height: 1;
}
.super-shell.is-authenticated .sidebar-header-copy strong,
.super-shell.is-authenticated .sidebar-header-copy small {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.super-shell.is-authenticated .sidebar-header-copy strong {
  color: #fff;
  font-size: 1.28rem;
  font-weight: 600;
}
.super-shell.is-authenticated .sidebar-header-copy small {
  color: var(--text-soft);
  font-size: .68rem;
  font-weight: 400;
  line-height: 1.2;
}
.super-shell.is-authenticated .sidebar-brand-row .sidebar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.super-shell.is-authenticated .sidebar-brand-row .sidebar-brand .brand-mark {
  display: block !important;
  flex: 0 0 54px !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  overflow: visible !important;
}
.super-shell.is-authenticated .sidebar-brand-row .sidebar-brand .brand-mark img {
  display: block !important;
  width: 54px !important;
  height: 54px !important;
  object-fit: contain !important;
}
.super-shell.is-authenticated .sidebar-brand-row .brand-wordmark--text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.super-shell.is-authenticated .sidebar-brand-row .brand-wordmark--text strong,
.super-shell.is-authenticated .sidebar-brand-row .brand-wordmark--text small {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.super-shell.is-authenticated .sidebar-brand-row .sidebar-header-toggle {
  position: relative;
  z-index: 2;
}
.super-shell.is-authenticated .sidebar-header-toggle,
.super-shell.is-authenticated.sidebar-collapsed .sidebar-header-toggle {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(116, 151, 190, .18) !important;
  border-radius: 10px !important;
  color: var(--muted) !important;
  background: rgba(11, 31, 52, .22) !important;
  box-shadow: none !important;
  opacity: .78;
  transition: opacity .16s ease, color .16s ease, border-color .16s ease, background .16s ease !important;
}
.super-shell.is-authenticated .sidebar-header-toggle:hover,
.super-shell.is-authenticated .sidebar-header-toggle:focus-visible {
  border-color: rgba(116, 151, 190, .42) !important;
  color: var(--text) !important;
  background: rgba(116, 151, 190, .1) !important;
  opacity: 1;
  outline: 2px solid transparent;
}
.sidebar-collapse-icon { width: 17px; height: 17px; }
.sidebar-collapse-icon--expand { display: none; }
.super-shell.sidebar-collapsed .sidebar-collapse-icon--collapse { display: none; }
.super-shell.sidebar-collapsed .sidebar-collapse-icon--expand { display: block; }
.super-shell.is-authenticated.sidebar-collapsed .sidebar-brand-row {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 8px;
}
.super-shell.is-authenticated.sidebar-collapsed .sidebar-header-brand {
  justify-content: center;
}
.super-shell.is-authenticated.sidebar-collapsed .sidebar-header-copy {
  display: none !important;
}
.super-shell.is-authenticated.sidebar-collapsed .sidebar-header-toggle {
  grid-row: 2;
}
html[data-theme="light"] .super-shell.is-authenticated .sidebar-header-toggle {
  color: #64748b !important;
  background: rgba(255, 255, 255, .34) !important;
  border-color: rgba(78, 112, 148, .18) !important;
}
html[data-theme="light"] .super-shell.is-authenticated .sidebar-brand-row {
  background: #f7faff;
}
@media (max-width: 1100px) {
  .super-shell.is-authenticated .sidebar-header-toggle { display: none !important; }
  .super-shell.is-authenticated .sidebar-brand-row { grid-template-columns: 1fr; }
  .super-shell.is-authenticated .sidebar .sidebar-brand,
  .super-shell.is-authenticated.sidebar-collapsed .sidebar .sidebar-brand,
  .super-shell.mobile-nav-open .sidebar .sidebar-brand,
  .super-shell.mobile-nav-open.sidebar-collapsed .sidebar .sidebar-brand {
    display: flex !important;
  }
  .super-shell.is-authenticated .sidebar-brand-row .brand-wordmark--text {
    display: grid !important;
  }
}
@media (max-width: 900px) {
  .super-shell.is-authenticated .sidebar-brand-row { display: none !important; }
}

/* Notification Center tabbed workspace. */
.notification-title-copy { display: grid; gap: 5px; }
.notification-title-copy .eyebrow { margin: 0; }
.notification-title-copy p { margin: 0; color: var(--muted); font-size: .95rem; }
.notification-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 4px 22px;
  padding: 14px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  scrollbar-width: none;
}
.notification-tabs::-webkit-scrollbar { display: none; }
.notification-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  font-weight: 750;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.notification-tabs a:hover { border-color: color-mix(in srgb, var(--blue) 58%, var(--line)); }
.notification-tabs a.is-active {
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
  box-shadow: 0 10px 24px rgba(25, 119, 255, .2);
}
.notification-tabs a span {
  display: grid;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(116, 151, 190, .13);
  font-size: .72rem;
}
.notification-tabs a.is-active span { color: #fff; background: rgba(255, 255, 255, .2); }
.notification-workspace .notification-inbox-panel { padding: 4px !important; }
.notification-workspace .notification-list { display: grid; gap: 12px; }
.notification-workspace .notification-date-heading { margin: 16px 4px 0 !important; }
.notification-workspace .notification-card {
  min-height: 92px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .06);
}
.notification-workspace .notification-card.is-unread {
  border-color: color-mix(in srgb, var(--blue) 36%, var(--line));
  background: color-mix(in srgb, var(--blue) 5%, var(--surface));
}
@media (max-width: 720px) {
  .notification-tabs { margin-inline: 0; padding: 10px; border-radius: 14px; }
  .notification-tabs a { min-height: 40px; padding-inline: 14px; }
  .notification-workspace .notification-card { padding: 14px; }
}

/* Compact notification rows inspired by the review-queue reference. */
.notification-workspace .notification-list { gap: 10px; }
.notification-workspace .notification-card {
  grid-template-columns: 44px minmax(0, 1fr) auto 7px !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 0 !important;
  padding: 14px 16px !important;
  border-color: transparent !important;
  border-radius: 15px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.notification-workspace .notification-card.is-unread {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.notification-workspace .notification-category-icon {
  width: 42px !important;
  height: 42px !important;
  align-self: center !important;
}
.notification-workspace .notification-card-copy {
  min-width: 0;
  align-self: center;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.notification-open-form { display: none; }
.notification-workspace button.notification-message-link[type="submit"] {
  appearance: none;
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: inherit !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  font: inherit;
  letter-spacing: normal !important;
  text-align: left;
  cursor: pointer;
}
.notification-workspace button.notification-message-link[type="submit"]:hover .notification-message-title {
  color: var(--blue) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.notification-workspace button.notification-message-link[type="submit"]:focus-visible {
  outline: 2px solid var(--blue) !important;
  outline-offset: 5px;
}
.notification-workspace .notification-card-copy h3 {
  margin: 0 0 3px !important;
  font-size: .98rem !important;
  font-weight: 400 !important;
  line-height: 1.3;
}
.notification-message-title {
  display: block;
  margin: 0 0 3px;
  color: var(--text);
  font-size: .98rem;
  font-weight: 400 !important;
  line-height: 1.3;
}
.notification-message-body {
  display: block;
  color: var(--muted) !important;
  font-size: .86rem;
  font-weight: 400 !important;
  line-height: 1.4;
}
.notification-workspace .notification-card-copy p {
  display: -webkit-box;
  margin: 0 !important;
  overflow: hidden;
  color: var(--muted) !important;
  font-size: .86rem !important;
  font-weight: 400 !important;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.notification-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
  color: color-mix(in srgb, var(--muted) 88%, transparent);
  font-size: .75rem;
  font-weight: 400 !important;
}
.notification-workspace .notification-card.is-unread .notification-card-copy h3,
.notification-workspace .notification-card.is-unread .notification-message-title {
  color: var(--text) !important;
  font-weight: 900 !important;
}
.notification-workspace .notification-card.is-unread .notification-card-copy p,
.notification-workspace .notification-card.is-unread .notification-message-body,
.notification-workspace .notification-card.is-unread .notification-card-meta {
  color: var(--text) !important;
  font-weight: 800 !important;
}
.notification-card-meta time { color: inherit; }
.notification-workspace .notification-row-side {
  min-width: 0 !important;
  align-items: center !important;
  justify-content: center;
}
.notification-workspace .notification-actions {
  flex-wrap: nowrap !important;
  align-items: center;
  margin: 0 !important;
  gap: 7px !important;
}
.notification-workspace .notification-actions .primary-btn.small,
.notification-workspace .notification-actions .soft-btn.small {
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  white-space: nowrap;
}
.notification-workspace .notification-delete-btn {
  inline-size: 36px !important;
  block-size: 36px !important;
  min-inline-size: 36px !important;
  min-block-size: 36px !important;
  border-radius: 10px !important;
  opacity: .48 !important;
}
.notification-workspace .notification-unread-dot {
  align-self: center;
  margin: 0 !important;
}
.notification-workspace .notification-approval-meta {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(116, 151, 190, .14);
}
@media (max-width: 720px) {
  .notification-workspace .notification-card {
    grid-template-columns: 40px minmax(0, 1fr) 7px !important;
    padding: 13px !important;
  }
  .notification-workspace .notification-category-icon { width: 40px !important; height: 40px !important; }
  .notification-workspace .notification-row-side { grid-column: 2 / -1 !important; justify-self: start; }
  .notification-workspace .notification-actions { flex-wrap: wrap !important; }
}

/* Messaging workspace: compact inbox and focused two-pane conversation layout. */
.communications-page {
  display: grid;
  gap: 16px;
  min-height: calc(100vh - 150px);
}
.communications-hero {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 4px 2px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.communications-title-icon { display: none !important; }
.communications-title-row > div { display: grid; gap: 5px; }
.communications-hero h1 { font-size: clamp(2rem, 3vw, 2.8rem) !important; }
.communications-hero p { margin: 0; color: var(--muted); }
.communications-hero-actions { align-items: center; }
.message-new-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: var(--surface);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.message-new-button:hover { color: #fff; border-color: var(--blue); background: var(--blue); }
.communications-layout {
  grid-template-columns: minmax(290px, 340px) minmax(0, 1fr) !important;
  gap: 0 !important;
  min-height: calc(100vh - 230px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-soft, var(--shadow));
}
.communications-panel {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.communications-inbox { border-right: 1px solid var(--line) !important; }
.conversation-search { padding: 18px 16px 10px !important; }
.conversation-search svg { top: 32px !important; left: 30px !important; }
.conversation-search input { min-height: 48px; border-radius: 12px; }
.conversation-view-toggle {
  display: flex;
  gap: 4px;
  padding: 2px 14px 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.conversation-view-toggle::-webkit-scrollbar { display: none; }
.conversation-view-toggle button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 11px;
  border-radius: 9px;
  font-size: .82rem;
}
.conversation-list { padding: 8px !important; gap: 3px !important; }
.conversation-row { padding: 13px 12px !important; border-radius: 12px !important; }
.conversation-row.is-active { border-color: transparent !important; background: color-mix(in srgb, var(--blue) 14%, transparent) !important; }
.conversation-row-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conversation-row-title b { min-width: 22px; min-height: 22px; display: grid; place-items: center; border-radius: 999px; color: #fff; background: var(--blue); font-size: .72rem; }
.conversation-type { margin-top: 4px; }
.communications-thread { min-height: calc(100vh - 230px) !important; }
.thread-head {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 14px 20px !important;
}
.thread-head h2 { font-size: 1.1rem !important; }
.thread-head p { margin: 4px 0 0; color: var(--muted); font-size: .78rem; }
.thread-info {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--muted);
  border-radius: 999px;
  color: var(--muted);
  font-family: Georgia, serif;
  font-weight: 700;
}
.message-thread-list {
  gap: 18px !important;
  max-height: calc(100vh - 445px) !important;
  padding: 28px 30px !important;
}
.message-entry {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}
.message-entry.is-mine { grid-template-columns: minmax(0, 1fr); }
.message-sender-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: 4px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(145deg, var(--blue), var(--cyan));
  font-size: .78rem;
  font-weight: 800;
}
.message-entry .message-bubble { justify-self: start; }
.message-entry.is-mine .message-bubble { justify-self: end; }
.message-bubble {
  width: min(82%, 720px) !important;
  padding: 14px 17px !important;
  border-radius: 17px 17px 17px 5px !important;
  background: color-mix(in srgb, var(--surface-strong, var(--surface)) 92%, transparent) !important;
}
.message-bubble.is-mine {
  border-color: color-mix(in srgb, var(--blue) 74%, var(--line)) !important;
  border-radius: 17px 17px 5px 17px !important;
  color: #fff;
  background: #07386b !important;
}
.message-bubble.is-mine p,
.message-bubble.is-mine .message-bubble-head strong { color: #fff !important; }
.message-bubble-head { align-items: baseline; }
.message-bubble-head time { color: var(--muted); font-size: .72rem; white-space: nowrap; }
.message-bubble.is-mine .message-bubble-head time { color: rgba(255,255,255,.66); }
.reply-composer {
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px !important;
  margin: 0 20px 18px;
  padding: 10px 10px 10px 16px !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-strong, var(--surface)) 94%, transparent);
}
.reply-field textarea { min-height: 54px; padding: 14px 2px; resize: none; border: 0; background: transparent; box-shadow: none; }
.reply-field textarea:focus { outline: 0; }
.reply-actions { display: flex; align-items: center; gap: 10px; }
.reply-actions .composer-advanced summary { padding: 8px; color: var(--muted); font-size: .8rem; cursor: pointer; }
.message-send-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #07386b;
  cursor: pointer;
}
.message-send-button svg { width: 20px; height: 20px; }
@media (max-width: 860px) {
  .communications-layout { grid-template-columns: 1fr !important; border-radius: 16px; }
  .communications-inbox { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .communications-thread { min-height: 580px !important; }
  .message-thread-list { max-height: none !important; padding: 20px 14px !important; }
  .message-bubble { width: min(92%, 680px) !important; }
  .reply-composer { margin: 0 12px 12px; }
}

/* Messaging refinement: viewport-filling workspace and reference-like rhythm. */
.communications-page { min-height: calc(100vh - 118px) !important; gap: 0 !important; }
.communications-layout { min-height: calc(100vh - 118px) !important; }
.inbox-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 78px;
  padding: 16px 18px 8px;
}
.inbox-title-bar h1 { margin: 0; font-size: 1.75rem; letter-spacing: -.02em; }
.communications-inbox { display: flex; min-height: 0; flex-direction: column; }
.conversation-view-toggle {
  gap: 2px !important;
  padding: 4px 14px 12px !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.conversation-view-toggle button {
  min-height: 32px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
}
.conversation-view-toggle button[aria-pressed="true"] { color: #fff !important; background: #07386b !important; }
.conversation-list { min-height: 0; max-height: none !important; flex: 1; }
.conversation-list .conversation-row[hidden] { display: none !important; }
.conversation-row-copy { min-width: 0; }
.conversation-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.communications-empty[hidden],
[data-conversation-filter-empty][hidden] { display: none !important; }
.communications-thread {
  min-height: calc(100vh - 118px) !important;
  height: calc(100vh - 118px);
  overflow: hidden;
}
.message-thread-list {
  min-height: 0;
  max-height: none !important;
  padding: 34px 42px 24px !important;
}
.message-entry {
  grid-template-columns: 34px minmax(0, 1fr);
  row-gap: 5px;
}
.message-entry.is-mine { grid-template-columns: minmax(0, 1fr); }
.message-entry .message-bubble { grid-column: 2; }
.message-entry.is-mine .message-bubble { grid-column: 1; }
.message-bubble {
  width: fit-content !important;
  min-width: min(300px, 44vw);
  max-width: min(78%, 820px) !important;
  padding: 15px 18px !important;
}
.message-bubble p { margin: 0 !important; }
.message-entry-time {
  grid-column: 2;
  justify-self: start;
  color: var(--muted);
  font-size: .72rem;
}
.message-entry.is-mine .message-entry-time { grid-column: 1; justify-self: end; }
.reply-composer {
  align-self: end;
  margin: 0 28px 20px !important;
  padding: 12px 12px 12px 18px !important;
}
@media (max-width: 1100px) {
  .communications-page,
  .communications-layout { min-height: calc(100vh - 104px) !important; }
  .communications-thread { min-height: 620px !important; height: auto; }
}
@media (max-width: 860px) {
  .inbox-title-bar { min-height: 68px; }
  .communications-thread { overflow: visible; }
  .message-thread-list { padding: 24px 16px !important; }
  .message-bubble { min-width: min(220px, 68vw); max-width: 88% !important; }
}

/* Messaging visual alignment with the approved dark reference. */
.communications-layout {
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--surface) 94%, #1e293b 6%) !important;
  box-shadow: none !important;
}
.communications-inbox { background: color-mix(in srgb, var(--surface) 88%, #253248 12%) !important; }
.inbox-title-bar { min-height: 104px !important; padding: 24px 22px 12px !important; }
.inbox-title-bar h1 { font-size: 2rem !important; }
.message-new-button { width: 48px; height: 48px; border-radius: 12px; }
.conversation-search { padding: 12px 20px 14px !important; }
.conversation-search svg { top: 28px !important; left: 36px !important; }
.conversation-view-toggle { padding: 4px 20px 16px !important; }
.conversation-view-toggle button { font-size: .88rem !important; font-weight: 750; }
.conversation-row { grid-template-columns: 52px minmax(0, 1fr) !important; padding: 16px 18px !important; }
.conversation-avatar { width: 48px !important; height: 48px !important; border-radius: 999px !important; }
.conversation-row-title time { color: var(--muted); font-size: .74rem; font-weight: 600; white-space: nowrap; }
.conversation-row small { margin-top: 5px; font-size: .86rem; }
.thread-head { min-height: 88px !important; padding: 14px 24px !important; }
.thread-head .conversation-avatar { width: 48px !important; height: 48px !important; }
.thread-head h2 { font-size: 1.22rem !important; }
.communications-thread {
  position: relative;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}
.message-thread-list {
  align-content: start;
  gap: 16px !important;
  min-height: 0;
  padding: 22px 30px 16px !important;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.message-entry { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
.message-sender-avatar { width: 36px; height: 36px; }
.message-bubble {
  width: min(76%, 920px) !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 12px 16px !important;
  border-radius: 18px 18px 18px 5px !important;
  background: color-mix(in srgb, var(--surface-strong, var(--surface)) 76%, #26354d 24%) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}
.message-bubble.is-mine {
  width: min(78%, 980px) !important;
  max-width: none !important;
  border-color: rgba(24, 170, 225, .55) !important;
  border-radius: 18px 18px 5px 18px !important;
  background: #078bc7 !important;
}
.message-bubble p { font-size: .96rem; line-height: 1.5 !important; }
.message-entry-meta {
  min-width: max-content;
  margin-top: 0;
  white-space: nowrap;
}
.message-entry-time {
  display: block;
  margin-top: 0;
  white-space: nowrap;
  line-height: 1.25;
}
.reply-composer {
  grid-template-columns: 48px minmax(0, 1fr) 48px 56px !important;
  align-items: center;
  align-self: stretch;
  column-gap: 0 !important;
  row-gap: 8px !important;
  min-height: 64px;
  margin: 0 30px 16px !important;
  padding: 4px 5px 4px 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
}
.reply-field {
  display: block;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  line-height: normal;
}
.reply-field,
.reply-field textarea { width: 100%; }
.reply-field textarea {
  display: block;
  height: 56px !important;
  min-height: 56px;
  max-height: 120px;
  margin: 0;
  padding: 15px 8px 13px;
  overflow-y: auto;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f1f1f1 !important;
  font-size: 1rem;
  line-height: 1.4;
  resize: none;
}
.reply-field textarea:focus { outline: 0 !important; }
.reply-field textarea::placeholder { color: #a7a7a7 !important; opacity: 1; }
.super-shell.is-authenticated .reply-composer .reply-field textarea {
  box-sizing: border-box;
  width: 100%;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;
  padding: 16px 8px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  resize: none;
}
.reply-actions {
  display: contents;
}
.message-composer-tools { display: contents; }
.message-tool-button,
.reply-actions .composer-advanced summary {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #9d9d9d;
  background: transparent;
  line-height: 0;
  list-style: none;
  cursor: pointer;
}
.reply-actions .composer-advanced summary::-webkit-details-marker { display: none; }
.message-attachment-button {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: 0;
}
[data-toggle-message-emoji] { grid-column: 3; grid-row: 1; }
[data-toggle-message-emoji],
.message-record-button { position: relative; }
[data-toggle-message-emoji] > svg,
.message-record-button > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  transform-origin: center;
}
.reply-actions .composer-advanced { grid-column: 4; grid-row: 1; }
.reply-actions .composer-advanced[open] {
  width: 38px;
  padding: 0;
  border: 0;
  background: transparent;
}
.message-tool-button:hover,
.reply-actions .composer-advanced summary:hover { color: #d5d5d5; background: rgba(255,255,255,.06); }
.message-tool-button svg,
.reply-actions .composer-advanced summary svg {
  display: block;
  width: 27px;
  height: 27px;
  margin: 0;
}
.reply-actions .composer-advanced { position: relative; }
.message-emoji-picker {
  position: absolute;
  box-sizing: border-box;
  z-index: 30;
  bottom: calc(100% + 10px);
  right: 58px;
  left: auto;
  width: min(420px, calc(100vw - 32px));
  max-width: calc(100vw - 56px);
  padding: 12px 16px 0;
  overflow-x: hidden;
  border: 0;
  border-radius: 24px;
  color: #a5a5a5;
  background: #212121;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .48);
}
.message-emoji-picker[hidden] { display: none !important; }
.message-emoji-category-strip {
  display: flex;
  align-items: center;
  gap: 15px;
  height: 46px;
  overflow: hidden;
  font-size: 25px;
  white-space: nowrap;
}
.message-emoji-category-strip span { flex: 0 0 auto; filter: grayscale(.2); }
.message-emoji-category-strip .is-active {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: #fff;
  background: #343434;
  font-size: 30px;
}
.message-emoji-search {
  display: flex !important;
  align-items: center;
  gap: 10px;
  height: 48px;
  margin: 5px 0 8px;
  padding: 0 16px;
  border-radius: 24px;
  color: #929292 !important;
  background: #303030;
}
.message-emoji-search svg { width: 25px; height: 25px; flex: 0 0 auto; }
.super-shell.is-authenticated .message-emoji-search input {
  width: 100%;
  min-height: 0;
  height: 46px;
  padding: 0 !important;
  border: 0 !important;
  color: #ddd !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 1rem;
}
.message-emoji-search input:focus { outline: 0; }
.message-emoji-scroll {
  max-height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #696969 transparent;
}
.message-emoji-heading {
  margin: 8px 3px 10px;
  color: #969696 !important;
  font-size: .98rem;
  font-weight: 700;
}
.message-emoji-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px 6px;
  width: 100%;
  min-width: 0;
}
.message-emoji-grid button {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 1.75rem;
  cursor: pointer;
}
.message-emoji-grid button[hidden],
.message-emoji-empty[hidden] { display: none !important; }
.message-emoji-empty { padding: 38px 0; text-align: center; color: #969696; }
.message-emoji-footer {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 54px;
  margin: 6px -16px 0;
  border-top: 1px solid rgba(255,255,255,.04);
  color: #858585;
  font-size: 25px;
  font-weight: 700;
}
.message-emoji-footer .is-active { color: #fff; }
.message-emoji-footer .is-gif { font-size: .72rem; border: 2px solid currentColor; border-radius: 6px; padding: 3px; }
.message-emoji-grid button:hover,
.message-emoji-grid button:focus-visible {
  background: color-mix(in srgb, var(--blue) 15%, transparent);
  outline: none;
}
.reply-actions .composer-options {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  left: auto;
  z-index: 20;
  width: min(440px, calc(100vw - 48px));
  max-height: min(360px, calc(100vh - 120px));
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-strong, var(--surface));
  box-shadow: var(--shadow-lg, var(--shadow));
}
.message-send-button,
.message-record-button {
  display: grid;
  place-items: center;
  grid-column: 4;
  grid-row: 1;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #8774e1;
  cursor: pointer;
}
.message-send-button:hover,
.message-record-button:hover { background: #9585e6; }
.message-record-button svg,
.message-send-button svg { display: block; width: 27px; height: 27px; margin: 0; }
.message-record-button[hidden],
.message-send-button[hidden] { display: none !important; }
.voice-recording-strip {
  grid-column: 1 / 5;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 56px;
  padding: 0 8px;
}
.voice-recording-strip[hidden] { display: none !important; }
.voice-recording-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--danger, #ef4444);
  animation: voice-recording-pulse 1.1s ease-in-out infinite;
}
.voice-recording-strip strong { color: var(--text); font-size: .84rem; }
.voice-recording-strip time { color: var(--muted); font-variant-numeric: tabular-nums; }
.voice-recording-cancel,
.voice-recording-stop {
  min-height: 34px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  color: #9d9d9d;
  background: transparent;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.voice-recording-cancel { margin-left: auto; }
.voice-recording-stop { color: #fff; background: var(--danger, #ef4444); }
.reply-composer.is-recording .reply-field,
.reply-composer.is-recording .message-attachment-button,
.reply-composer.is-recording [data-toggle-message-emoji],
.reply-composer.is-recording .composer-advanced { visibility: hidden; }
@keyframes voice-recording-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.78); }
}
.reply-composer > .attachment-preview-list,
.reply-composer > .attachment-form-error {
  grid-column: 1 / -1;
}
.reply-composer > .attachment-preview-list { grid-row: 2; }
.reply-composer > .attachment-form-error { grid-row: 3; }
.reply-composer .message-send-status {
  position: absolute;
  right: 68px;
  bottom: 2px;
  margin: 0;
}
html[data-theme="light"] .reply-composer {
  border-color: transparent !important;
}
html[data-theme="light"] .super-shell.is-authenticated .reply-composer .reply-field textarea {
  border: 0 !important;
  color: #1f2937 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme="light"] .super-shell.is-authenticated .reply-composer .reply-field textarea::placeholder,
html[data-theme="light"] .message-tool-button { color: #6b7280 !important; }
html[data-theme="light"] .message-tool-button:hover { background: rgba(15, 23, 42, .06); }
@media (max-width: 860px) {
  .communications-layout { border-radius: 0 !important; }
  .message-thread-list { padding: 18px 14px 12px !important; }
  .message-bubble,
  .message-bubble.is-mine { width: 86% !important; max-width: none !important; }
  .reply-composer {
    grid-template-columns: 44px minmax(0, 1fr) 44px 52px !important;
    column-gap: 0 !important;
    margin: 0 12px 12px !important;
    padding: 3px 4px 3px 6px !important;
  }
  .message-send-button,
  .message-record-button { width: 52px; height: 52px; }
  .voice-recording-strip { grid-column: 1 / -1; padding-inline: 4px; }
  .voice-recording-strip strong { display: none; }
  .reply-actions .composer-options {
    position: fixed;
    right: 12px;
    bottom: 82px;
    left: 12px;
    width: auto;
    max-height: min(60vh, 360px);
  }
}

/* Messaging attachments: compact file cards and composer previews. */
.message-attachment-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.message-attachment-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  min-width: min(360px, 100%);
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.message-attachment-card:hover {
  border-color: color-mix(in srgb, var(--blue) 60%, var(--line));
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
  transform: translateY(-1px);
}
.message-bubble.is-mine .message-attachment-card {
  color: #fff;
  border-color: rgba(255,255,255,.24);
  background: rgba(2,25,52,.22);
}
.message-attachment-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 14%, var(--surface));
}
.message-bubble.is-mine .message-attachment-icon { color: #fff; background: rgba(255,255,255,.14); }
.message-attachment-icon svg,
.message-attachment-download { width: 20px; height: 20px; }
.message-attachment-copy { min-width: 0; }
.message-attachment-copy strong,
.message-attachment-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-attachment-copy strong { font-size: .82rem; }
.message-attachment-copy small { margin-top: 2px; color: var(--muted); font-size: .7rem; }
.message-bubble.is-mine .message-attachment-copy small { color: rgba(255,255,255,.68); }
.message-attachment-download { color: var(--muted); }
.message-bubble.is-mine .message-attachment-download { color: rgba(255,255,255,.78); }

/* Sender-side message receipts: one check = accepted, two = read. */
.message-entry-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.message-voice-note {
  display: grid;
  grid-template-columns: 38px minmax(180px, 1fr) 30px;
  align-items: center;
  gap: 10px;
  min-width: min(360px, 100%);
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}
.message-voice-icon,
.message-voice-note > a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 14%, transparent);
}
.message-voice-icon svg,
.message-voice-note > a svg { width: 18px; height: 18px; }
.message-voice-note audio { width: 100%; min-width: 0; height: 36px; }
.message-bubble.is-mine .message-voice-note { border-color: rgba(255,255,255,.24); background: rgba(2,25,52,.2); }
.message-bubble.is-mine .message-voice-icon,
.message-bubble.is-mine .message-voice-note > a { color: #fff; background: rgba(255,255,255,.14); }
.message-entry.is-mine .message-entry-meta { justify-self: end; }
.message-receipt {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--muted);
}
.message-receipt.is-read { color: var(--blue); }
.message-receipt svg {
  width: 18px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.message-receipt.is-read svg { width: 22px; }
.message-receipt small { font-size: .68rem; font-weight: 700; }
.reply-composer .attachment-preview-list { grid-column: 1 / -1; }
.attachment-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.attachment-preview-list[hidden] { display: none !important; }
.attachment-preview-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 8px;
  width: min(250px, 100%);
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface-strong, var(--surface)) 90%, transparent);
}
.attachment-preview-visual {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 8px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 13%, var(--surface));
  font-size: .58rem;
  font-weight: 850;
}
.attachment-preview-visual img { width: 100%; height: 100%; object-fit: cover; }
.attachment-preview-copy { min-width: 0; }
.attachment-preview-copy strong,
.attachment-preview-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-preview-copy strong { font-size: .74rem; }
.attachment-preview-copy small { margin-top: 2px; color: var(--muted); font-size: .66rem; }
.attachment-preview-remove {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
  font-size: 1.1rem;
  cursor: pointer;
}
.attachment-preview-remove:hover { color: #fff; background: var(--danger, #dc3545); }
.message-attachment-button,
.message-compose-attachment-button { position: relative; overflow: hidden; }
.message-attachment-button input,
.message-compose-attachment-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.message-compose-attachment-button { width: fit-content; padding: 10px 14px; cursor: pointer; }
.message-compose-attachment-button svg { width: 18px; height: 18px; }
.compose-attachment-field { display: flex; align-items: center; gap: 12px; }
.compose-attachment-field > small { color: var(--muted); }
.attachment-form-error {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--danger, #ff5b70);
  font-size: .76rem;
  font-weight: 700;
}
.attachment-form-error[hidden] { display: none !important; }
.message-send-status { margin-left: auto; color: var(--muted); font-size: .72rem; }
.reply-composer[aria-busy="true"] .message-send-button,
.compose-form[aria-busy="true"] button[type="submit"] { opacity: .62; cursor: wait; }
@media (max-width: 560px) {
  .message-attachment-card { min-width: 0; }
  .attachment-preview-row { width: 100%; }
  .compose-attachment-field { align-items: flex-start; flex-direction: column; gap: 6px; }
}

/* Final dashboard mockup fidelity overrides. Keep last in this stylesheet. */
@media (min-width: 1101px) {
  body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .98fr) !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-home-work-card,
  body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid > .sh-role-actions {
    height: 294px !important;
    min-height: 294px !important;
    max-height: 294px !important;
  }
}

body.dashboard-calm-page .sh-home-v3 .sh-home-work-card { padding: 18px 22px !important; }
body.dashboard-calm-page .sh-home-v3 .sh-clock-status > p {
  margin: 0 0 14px !important;
  color: var(--calm-text) !important;
  font-size: .9rem !important;
  font-weight: 750 !important;
}
body.dashboard-calm-page .sh-home-v3 .sh-clock-status > p span { display: none !important; }
body.dashboard-calm-page .sh-home-v3 .sh-work-summary {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
}
body.dashboard-calm-page .sh-home-v3 .sh-work-summary-icon {
  display: grid !important;
  width: 54px !important;
  height: 54px !important;
  place-items: center !important;
  color: #fff !important;
  border: 1px solid rgba(101, 174, 255, .42) !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #2563d9, #2f8cff) !important;
  box-shadow: 0 10px 24px rgba(22, 102, 215, .22) !important;
}
body.dashboard-calm-page .sh-home-v3 .sh-work-summary-icon svg { width: 23px !important; height: 23px !important; }
body.dashboard-calm-page .sh-home-v3 .sh-work-summary h2 { margin: 0 !important; font-size: 1.02rem !important; line-height: 1.25 !important; }
body.dashboard-calm-page .sh-home-v3 .sh-work-summary strong {
  display: block !important;
  margin-top: 5px !important;
  color: var(--calm-muted) !important;
  font-size: .78rem !important;
  font-weight: 520 !important;
  line-height: 1.45 !important;
}
body.dashboard-calm-page .sh-home-v3 .sh-home-work-card .sh-next-shift { margin-top: 15px !important; padding-top: 12px !important; }
body.dashboard-calm-page .sh-home-v3 .sh-home-mobile-action {
  width: 190px !important;
  min-height: 38px !important;
  margin: 12px 0 0 70px !important;
  color: #fff !important;
  border-color: #328cff !important;
  background: #176bd8 !important;
}
body.dashboard-calm-page .sh-home-v3 .sh-role-actions-head { min-height: 34px !important; }
body.dashboard-calm-page .sh-home-v3 .sh-role-actions-head .eyebrow { display: none !important; }
body.dashboard-calm-page .sh-home-v3 .sh-role-action-total {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #172033 !important;
  background: var(--calm-amber) !important;
  font-size: .74rem !important;
}
body.dashboard-calm-page .sh-home-v3 .sh-role-action-grid {
  display: grid !important;
  grid-auto-rows: 62px !important;
  align-content: start !important;
  min-height: 0 !important;
}
body.dashboard-calm-page .sh-home-v3 .sh-role-action-card {
  height: 62px !important;
  min-height: 62px !important;
  padding: 8px 0 !important;
  align-self: start !important;
}
body.dashboard-calm-page .sh-home-v3 .sh-role-action-icon { width: 38px !important; height: 38px !important; border-radius: 7px !important; }
body.dashboard-calm-page .sh-home-v3 .sh-role-action-icon svg { width: 20px !important; height: 20px !important; }
body.dashboard-calm-page .sh-home-v3 .sh-role-action-badge { width: 24px !important; height: 24px !important; min-width: 24px !important; }
body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card {
  position: relative !important;
  min-height: 196px !important;
  padding: 16px 22px !important;
  gap: 10px !important;
}
body.dashboard-calm-page .sh-home-v3 .calendar-glance-head .today-icon,
body.dashboard-calm-page .sh-home-v3 .calendar-glance-head small,
body.dashboard-calm-page .sh-home-v3 .calendar-week-arrow,
body.dashboard-calm-page .sh-home-v3 .calendar-week-today { display: none !important; }
body.dashboard-calm-page .sh-home-v3 .calendar-glance-head { display: flex !important; min-height: 26px !important; }
body.dashboard-calm-page .sh-home-v3 .calendar-glance-head h2 { font-size: .95rem !important; }
body.dashboard-calm-page .sh-home-v3 .calendar-week-actions { margin-left: auto !important; }
body.dashboard-calm-page .sh-home-v3 .calendar-week-actions > a {
  position: absolute !important;
  right: 22px !important;
  bottom: 17px !important;
  font-size: .74rem !important;
}
body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card .calendar-week-strip {
  gap: 0 !important;
  min-height: 76px !important;
  overflow: hidden !important;
  border: 1px solid var(--calm-border-soft) !important;
  border-radius: 9px !important;
}
body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card .calendar-day-pill {
  width: 100% !important;
  height: 74px !important;
  min-height: 74px !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  border: 0 !important;
  border-right: 1px solid var(--calm-border-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card .calendar-day-pill:last-child { border-right: 0 !important; }

.sh-dashboard-customize-bar { display:flex; justify-content:flex-end; gap:.5rem; }
.sh-dashboard-section-tools { display:none; position:absolute; z-index:8; top:.65rem; right:.65rem; align-items:center; gap:.4rem; padding:.3rem; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:var(--shadow-soft); }
.is-customizing-layout > [data-dashboard-section] { position:relative; outline:1px dashed color-mix(in srgb,var(--blue) 65%,var(--line)); outline-offset:4px; }
.is-customizing-layout > [data-dashboard-section] > .sh-dashboard-section-tools { display:flex; }
.is-customizing-layout > [data-dashboard-section].is-layout-hidden { display:block !important; opacity:.42; }
.is-customizing-layout > [data-dashboard-section].is-dragging { opacity:.55; }
.sh-dashboard-section-tools button { min-height:32px; padding:.35rem .6rem; border:1px solid var(--line); border-radius:9px; color:var(--text); background:var(--surface); cursor:pointer; }
.sh-dashboard-section-tools button:disabled { opacity:.38; cursor:not-allowed; }
.sh-dashboard-section-tools .sh-dashboard-drag-handle { cursor:grab; font-weight:800; letter-spacing:-.18rem; padding-inline:.65rem; touch-action:none; user-select:none; }
.sh-dashboard-section-tools .sh-dashboard-drag-handle:active { cursor:grabbing; }
@media (max-width: 720px) {
  .sh-dashboard-section-tools { position:sticky; top:.4rem; width:max-content; margin:.4rem .4rem .65rem auto; }
}
.attachment-preview-row.is-audio { width: min(420px, 100%); }
.attachment-preview-row.is-audio .attachment-preview-copy audio {
  display: block;
  width: 100%;
  height: 32px;
  margin-top: 5px;
}

/* Viewport containment: the authenticated content occupies only the space
   remaining beside the fixed sidebar. Child grids may shrink instead of
   increasing the document width; intentionally wide tables scroll locally. */
.super-shell.is-authenticated,
.super-shell.is-authenticated .layout {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.super-shell.is-authenticated .page-content {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

.super-shell.is-authenticated .page-content > *,
.super-shell.is-authenticated .topbar > *,
.super-shell.is-authenticated .topbar-actions,
.super-shell.is-authenticated .superhub-social-home,
.super-shell.is-authenticated .social-home-feed,
.super-shell.is-authenticated .social-home-today {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 1100px) {
  .super-shell.is-authenticated .page-content {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Keep Home aligned with the shared desktop content gutter used by other pages. */
@media (min-width: 1101px) {
  body.dashboard-calm-page .super-shell.is-authenticated .page-content {
    padding: calc(var(--superhub-topbar-height) + 26px) 16px 48px !important;
  }

  body.dashboard-calm-page .sh-dashboard-home.sh-home-v3 {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }

  body.dashboard-calm-page .sh-home-v3 > .sh-home-v3-main {
    padding: 0 !important;
  }
}
body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card .calendar-day-pill.is-selected {
  width: auto !important;
  /* height: 68px !important; */
  /* min-height: 68px !important; */
  /* margin: 3px 8px !important; */
  justify-self: stretch !important;
  transform: none !important;
  outline: 0 !important;
  border: 1px solid var(--calm-blue) !important;
  border-radius: 8px !important;
  background: rgba(26, 98, 193, .17) !important;
  box-shadow: inset 0 0 0 1px rgba(47, 140, 255, .12) !important;
}
body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card .calendar-day-pill:focus,
body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card .calendar-day-pill:focus-visible {
  outline: 0 !important;
}
body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card .calendar-day-pill:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(92, 174, 255, .82) !important;
}
body.dashboard-calm-page .sh-home-v3 .calendar-week-detail {
  min-height: 34px !important;
  padding: 8px 128px 0 2px !important;
  font-size: .72rem !important;
}
body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance {
  min-height: 72px !important;
  padding: 10px 18px !important;
  grid-template-columns: 130px minmax(0, 1fr) auto !important;
  align-items: center !important;
}
body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance-head { display: contents !important; }
body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance-head a { grid-column: 3 !important; grid-row: 1 !important; font-size: .74rem !important; }
body.dashboard-calm-page .sh-home-v3 .sh-admin-card-grid { grid-column: 2 !important; grid-row: 1 !important; min-height: 50px !important; }
body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance-card { min-height: 50px !important; }

@media (max-width: 760px) {
  body.dashboard-calm-page .sh-home-v3 .sh-home-mobile-action { width: 100% !important; margin-left: 0 !important; }
  body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance { display: grid !important; grid-template-columns: 1fr !important; }
  body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance-head { display: flex !important; }
  body.dashboard-calm-page .sh-home-v3 .sh-admin-card-grid { grid-column: 1 !important; grid-row: auto !important; }
}

/* Authoritative light-theme contrast layer.
   Establishes distinct canvas, panel, control, and text tiers globally while
   leaving the dark palette and feature-specific accent colors unchanged. */
html[data-theme="light"] {
  --bg: #e9f0f7;
  --bg-soft: #e2ebf4;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-solid: #ffffff;
  --surface-muted: #edf3f8;
  --panel: #ffffff;
  --panel-soft: #edf3f8;
  --line: #bdcad8;
  --border: #b8c7d6;
  --text: #0b1f33;
  --text-soft: #40566e;
  --text-muted: #536980;
  --muted: #405a73;
  --sh-light-bg: #e9f0f7;
  --sh-light-shell: #f8fafc;
  --sh-light-panel: #ffffff;
  --sh-light-panel-soft: #edf3f8;
  --sh-light-border: #bdcad8;
  --sh-light-text: #0b1f33;
  --sh-light-muted: #405a73;
  --shadow: 0 18px 42px rgba(28, 48, 70, .14);
  --shadow-soft: 0 9px 24px rgba(28, 48, 70, .10);
  --page-gradient-light: linear-gradient(135deg, #edf3f8 0%, #e5edf5 52%, #edf4f7 100%);
}

html[data-theme="light"] body,
html[data-theme="light"] .super-shell.is-authenticated {
  color: var(--text) !important;
  background: var(--page-gradient-light) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .topbar {
  background: rgba(248, 250, 252, .97) !important;
  border-bottom-color: var(--line) !important;
  box-shadow: 0 7px 20px rgba(28, 48, 70, .10) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .sidebar,
html[data-theme="light"] .super-shell.is-authenticated.sidebar-collapsed .sidebar {
  color: var(--text-soft) !important;
  background: linear-gradient(180deg, #f7f9fb 0%, #e8eff6 100%) !important;
  border-right-color: var(--line) !important;
  box-shadow: 6px 0 20px rgba(28, 48, 70, .08) !important;
}

html[data-theme="light"] .super-shell.is-authenticated .social-shell-link,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-main-link,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-sub-link,
html[data-theme="light"] .super-shell.is-authenticated .social-settings-item {
  color: #344d66 !important;
}

html[data-theme="light"] .super-shell.is-authenticated .social-shell-link .nav-icon,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-main-link .nav-icon,
html[data-theme="light"] .super-shell.is-authenticated .sidebar-sub-link .nav-icon {
  color: #4c6680 !important;
  background: rgba(50, 76, 102, .10) !important;
}

html[data-theme="light"] .muted,
html[data-theme="light"] .subtext,
html[data-theme="light"] small,
html[data-theme="light"] .helper-text,
html[data-theme="light"] .muted-row {
  color: var(--muted) !important;
}

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .topbar-search {
  color: var(--text) !important;
  background-color: #f1f5f9 !important;
  border-color: #b9c8d7 !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder,
html[data-theme="light"] .topbar-search input::placeholder {
  color: #647a90 !important;
  opacity: 1;
}

html[data-theme="light"] .hero,
html[data-theme="light"] .panel,
html[data-theme="light"] .card,
html[data-theme="light"] .module-card,
html[data-theme="light"] .dashboard-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .content-card,
html[data-theme="light"] .calendar-card,
html[data-theme="light"] .table-card,
html[data-theme="light"] .form-card,
html[data-theme="light"] .settings-card,
html[data-theme="light"] .workspace-card,
html[data-theme="light"] .action-card,
html[data-theme="light"] .communications-panel {
  color: var(--text) !important;
  background-color: var(--surface) !important;
  border-color: #c2cfdd !important;
}

html[data-theme="light"] .communications-layout,
html[data-theme="light"] .message-thread-list {
  background-color: #edf1f5 !important;
}

html[data-theme="light"] .conversation-search,
html[data-theme="light"] .reply-composer {
  background-color: #ffffff !important;
  border: 1px solid #b9c8d7 !important;
  box-shadow: 0 6px 18px rgba(28, 48, 70, .09) !important;
}

/* The top-bar account trigger is a single-line identity control. The account
   role remains available inside the opened menu instead of reserving a blank
   second row in the trigger. */
.super-shell.is-authenticated .topbar-actions > .account-menu > .account-pill {
  display: grid !important;
  grid-template-columns: 48px minmax(0, auto) !important;
  grid-template-rows: 48px !important;
  align-items: center !important;
  justify-content: start !important;
  column-gap: 12px !important;
  min-height: 58px !important;
  padding: 5px 16px 5px 6px !important;
}

.super-shell.is-authenticated .topbar-actions > .account-menu > .account-pill > span {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

.super-shell.is-authenticated .topbar-actions > .account-menu > .account-pill > strong {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

.super-shell.is-authenticated .topbar-actions > .account-menu > .account-pill > small {
  display: none !important;
}

/* One shared control rhythm across the authenticated desktop top bar. */
.super-shell.is-authenticated {
  --topbar-control-height: 52px;
}

.super-shell.is-authenticated .topbar-search,
.super-shell.is-authenticated .topbar-actions > .pill[data-theme-toggle],
.super-shell.is-authenticated .topbar-actions > .language-form .language-select,
.super-shell.is-authenticated .topbar-actions > .topbar-bell,
.super-shell.is-authenticated .topbar-actions > .account-menu > .account-pill,
.super-shell.is-authenticated .topbar-actions > .logout-btn {
  box-sizing: border-box !important;
  height: var(--topbar-control-height) !important;
  min-height: var(--topbar-control-height) !important;
  max-height: var(--topbar-control-height) !important;
  margin-block: 0 !important;
  align-self: center !important;
}

.super-shell.is-authenticated .topbar-actions > .pill[data-theme-toggle],
.super-shell.is-authenticated .topbar-actions > .topbar-bell {
  flex: 0 0 var(--topbar-control-height) !important;
  width: var(--topbar-control-height) !important;
  min-width: var(--topbar-control-height) !important;
  max-width: var(--topbar-control-height) !important;
  padding: 0 !important;
}

.super-shell.is-authenticated .topbar-actions > .account-menu > .account-pill {
  grid-template-columns: 42px minmax(0, auto) !important;
  grid-template-rows: 42px !important;
  min-width: 0 !important;
  padding: 5px 14px 5px 5px !important;
}

.super-shell.is-authenticated .topbar-actions > .account-menu > .account-pill > span {
  width: 42px !important;
  height: 42px !important;
}

@media (max-width: 900px) {
  .super-shell.is-authenticated {
    --topbar-control-height: 46px;
  }
  .super-shell.is-authenticated .topbar-actions > .account-menu > .account-pill {
    grid-template-columns: 46px !important;
    grid-template-rows: 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
  }
  .super-shell.is-authenticated .topbar-actions > .account-menu > .account-pill > span {
    width: 46px !important;
    height: 46px !important;
  }
  .super-shell.is-authenticated .topbar-actions > .account-menu > .account-pill > strong {
    display: none !important;
  }
}

/* Clock actions share the mobile meaning: green starts, red ends attendance. */
button.clock-action-in:not(:disabled):not(.is-disabled) {
  background: #16834a;
  color: #fff;
  border-color: #16834a;
}
button.clock-action-out:not(:disabled):not(.is-disabled) {
  background: #c63838;
  color: #fff;
  border-color: #c63838;
}
.account-signout { color: var(--danger, #c63838); }

/* Shared account notification preferences, matching mobile categories. */
.notification-preferences { display: grid; gap: 12px; }
.notification-expand { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.notification-preference-group { border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.notification-preference-group summary { cursor: pointer; }
.notification-preference-group summary small { display: block; color: var(--muted); margin-top: 4px; }
.notification-channels { display: flex; flex-wrap: wrap; gap: 16px 32px; padding: 20px 0 8px; }
.notification-channels label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.notification-preferences input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--blue); }
#clock-in-reminders { margin-top: 32px; scroll-margin-top: 100px; }