/* ========================================================================
   Arkos AttendPro — Phase 5C Enterprise Design System
   Preserves the Phase 5B component contracts while replacing the visual
   language with a calmer, corporate workforce-product interface.
   ======================================================================== */
:root {
  --brand: var(--company-accent, #2563eb);
  --brand-strong: #1d4ed8;
  --brand-deep: #173b75;
  --brand-soft: #eef4ff;
  --navy-950: #07111f;
  --navy-900: #0b172a;
  --navy-850: #0f1d33;
  --navy-800: #14243d;
  --slate-950: #0f172a;
  --slate-900: #172033;
  --slate-800: #273449;
  --slate-700: #344054;
  --slate-600: #475467;
  --slate-500: #667085;
  --slate-400: #98a2b3;
  --slate-300: #cbd2dc;
  --slate-200: #e2e7ee;
  --slate-150: #e9edf3;
  --slate-100: #f1f4f8;
  --slate-50: #f7f9fc;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-subtle: #f8fafc;
  --bg: #f4f6f9;
  --border: #e2e7ee;
  --border-strong: #cfd7e3;
  --text: #172033;
  --muted: #667085;
  --faint: #98a2b3;
  --success: #087a55;
  --success-soft: #e9f8f1;
  --warning: #a15c07;
  --warning-soft: #fff6e8;
  --danger: #b42318;
  --danger-soft: #fff0ee;
  --info: #175cd3;
  --info-soft: #eef4ff;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 2px 8px rgba(16, 24, 40, .06);
  --shadow-md: 0 10px 28px rgba(16, 24, 40, .09);
  --shadow-lg: 0 18px 48px rgba(7, 17, 31, .16);
  --sidebar-w: 272px;
  --sidebar-collapsed-w: 82px;
  --topbar-h: 72px;
  --ease: cubic-bezier(.2,.75,.25,1);
}

html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
a { transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
::selection { background: color-mix(in srgb, var(--brand) 22%, white); color: var(--slate-950); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 24%, transparent); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Shell ------------------------------------------------------------------ */
.app-shell { min-height: 100vh; background: var(--bg); }
.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
  border-right: 0;
  box-shadow: 8px 0 28px rgba(7, 17, 31, .10);
  color: #fff;
  overflow: visible;
  transition: width .22s var(--ease), transform .22s var(--ease);
}
.sidebar-brand {
  height: var(--topbar-h);
  padding: 0 16px 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  gap: 8px;
}
.brand-link { display: flex; align-items: center; min-width: 0; flex: 1; gap: 12px; color: #fff; }
.brand-link:hover { color: #fff; }
.brand-mark {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 84%, white), var(--brand-strong));
  color: #fff; font-size: 12px; font-weight: 850; letter-spacing: -.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 20px rgba(0,0,0,.22);
}
.brand-logo-wrap { background: #fff; padding: 5px; }
.brand-logo { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; min-width: 0; }
.brand-copy strong { color: #fff; font-size: 15px; font-weight: 760; letter-spacing: -.015em; white-space: nowrap; }
.brand-copy small { color: rgba(226,232,240,.64); font-size: 10.5px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-collapse {
  width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.10); border-radius: 8px;
  background: rgba(255,255,255,.05); color: rgba(255,255,255,.72); cursor: pointer;
}
.sidebar-collapse:hover { background: rgba(255,255,255,.10); color: #fff; }
.sidebar-collapse .icon { width: 16px; height: 16px; transition: transform .22s var(--ease); }
.nav-scroll { padding: 16px 12px 22px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.nav-section-title {
  padding: 16px 10px 7px;
  color: rgba(203,213,225,.50);
  font-size: 9.5px; line-height: 1; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden;
}
.nav-section-title:first-child { padding-top: 5px; }
.nav-link {
  position: relative;
  min-height: 42px;
  margin: 2px 0;
  padding: 9px 10px;
  gap: 11px;
  border-radius: 9px;
  color: rgba(226,232,240,.78);
  font-size: 13.25px; font-weight: 590;
}
.nav-link::after {
  content: ""; position: absolute; right: -12px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 3px 0 0 3px; background: transparent;
}
.nav-link:hover { background: rgba(255,255,255,.07); color: #fff; transform: translateX(1px); }
.nav-link.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 30%, transparent), rgba(255,255,255,.06));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.055);
}
.nav-link.active::after { background: color-mix(in srgb, var(--brand) 75%, white); }
.nav-icon { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 22px; color: rgba(203,213,225,.72); }
.nav-link:hover .nav-icon, .nav-link.active .nav-icon { color: #fff; }
.nav-icon .icon { width: 18px; height: 18px; stroke-width: 1.85; }
.nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-sub { margin-left: 0; padding-left: 43px; min-height: 34px; font-size: 12.25px; color: rgba(203,213,225,.60); }
.nav-sub-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(203,213,225,.36); position: absolute; left: 27px; }
.nav-sub.active .nav-sub-dot, .nav-sub:hover .nav-sub-dot { background: #fff; }
.sidebar-footer { padding: 12px; border-top: 1px solid rgba(255,255,255,.08); color: #fff; }
.sidebar-user { position: relative; display: grid; grid-template-columns: 36px minmax(0,1fr) 30px; align-items: center; gap: 10px; padding: 9px; border-radius: 10px; background: rgba(255,255,255,.055); }
.user-avatar { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 22%, #fff); color: var(--brand-deep); font-weight: 800; font-size: 12px; flex: 0 0 auto; }
.sidebar .user-avatar { background: rgba(255,255,255,.12); color: #fff; }
.sidebar-user-copy { display: flex; flex-direction: column; min-width: 0; }
.sidebar-user-copy strong { color: #fff; font-size: 11.75px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-copy small { color: rgba(203,213,225,.58); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-trigger { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: rgba(255,255,255,.65); cursor: pointer; border-radius: 7px; }
.sidebar-user-trigger:hover { color: #fff; background: rgba(255,255,255,.08); }
.sidebar-user-menu .menu-panel { left: 0; right: 0; width: auto; }
.menu-panel-up { bottom: calc(100% + 8px); top: auto !important; }

.main { margin-left: var(--sidebar-w); min-height: 100vh; transition: margin-left .22s var(--ease); }
.topbar {
  min-height: var(--topbar-h); height: var(--topbar-h);
  padding: 0 28px;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(16,24,40,.02);
  backdrop-filter: blur(12px);
}
.topbar-left { display: flex; align-items: center; min-width: 0; gap: 13px; }
.topbar-title-wrap { display: flex; flex-direction: column; min-width: 0; }
.topbar .page-title { font-size: 15px; font-weight: 750; line-height: 1.15; color: var(--slate-900); }
.topbar-context { margin-top: 3px; font-size: 10.5px; color: var(--slate-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hamburger { width: 38px; height: 38px; border-radius: 9px; color: var(--slate-700); }
.hamburger:hover { background: var(--slate-100); }
.topbar-account-actions { display: flex; align-items: center; gap: 9px; }
.company-clock { display: flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-subtle); color: var(--slate-500); }
.company-clock .clock-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: #fff; border: 1px solid var(--border); color: var(--brand); }
.company-clock > span:last-child { display: flex; flex-direction: column; }
.company-clock strong { color: var(--slate-800); font-size: 11.5px; line-height: 1.1; }
.company-clock small { font-size: 8.5px; max-width: 125px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.topbar-icon-action { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; color: var(--slate-600); background: #fff; }
.topbar-icon-action:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 28%, var(--border)); background: var(--brand-soft); transform: translateY(-1px); }
.topbar-create { height: 38px; }
.account-menu { position: relative; }
.account-trigger { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 4px 7px 4px 4px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--slate-600); cursor: pointer; }
.account-trigger:hover, .account-menu.is-open .account-trigger { background: var(--slate-50); border-color: var(--border); }
.account-trigger-copy { display: flex; flex-direction: column; text-align: left; max-width: 150px; }
.account-trigger-copy strong { color: var(--slate-800); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-trigger-copy small { color: var(--slate-400); font-size: 9.5px; }
.account-menu-panel { right: 0; left: auto; width: 230px; }
.account-menu-heading { display: flex; flex-direction: column; padding: 6px 8px 10px; }
.account-menu-heading strong { color: var(--slate-800); font-size: 12.5px; }
.account-menu-heading small { color: var(--slate-400); font-size: 10.5px; margin-top: 2px; }
.content { max-width: 1500px; padding: 28px 30px 42px; }
.app-footer { max-width: 1500px; width: 100%; margin: auto auto 0; padding: 18px 30px 24px; display: flex; justify-content: space-between; color: var(--slate-400); font-size: 10.5px; }

body.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-w); }
body.sidebar-collapsed .main { margin-left: var(--sidebar-collapsed-w); }
body.sidebar-collapsed .brand-copy,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-section-title,
body.sidebar-collapsed .sidebar-user-copy,
body.sidebar-collapsed .sidebar-user-menu { opacity: 0; width: 0; pointer-events: none; overflow: hidden; }
body.sidebar-collapsed .sidebar-brand { padding-left: 20px; padding-right: 16px; }
body.sidebar-collapsed .sidebar-collapse { position: absolute; right: -14px; top: 21px; background: #fff; color: var(--slate-700); border-color: var(--border); box-shadow: var(--shadow-sm); }
body.sidebar-collapsed .sidebar-collapse .icon { transform: rotate(180deg); }
body.sidebar-collapsed .nav-scroll { padding-left: 14px; padding-right: 14px; }
body.sidebar-collapsed .nav-link { justify-content: center; padding-left: 10px; padding-right: 10px; overflow: visible; }
body.sidebar-collapsed .nav-link::before { content: attr(title); position: fixed; left: 78px; z-index: 80; padding: 7px 10px; border-radius: 7px; background: var(--slate-950); color: #fff; font-size: 11px; opacity: 0; pointer-events: none; transform: translateX(-4px); transition: opacity .12s ease, transform .12s ease; box-shadow: var(--shadow-md); }
body.sidebar-collapsed .nav-link:hover::before { opacity: 1; transform: translateX(0); }
body.sidebar-collapsed .nav-sub { padding-left: 10px; }
body.sidebar-collapsed .nav-sub-dot { position: static; width: 7px; height: 7px; }
body.sidebar-collapsed .sidebar-user { display: flex; justify-content: center; padding: 8px; }

/* Page architecture ------------------------------------------------------ */
.page-intro, .page-toolbar, .session-hero, .scanner-intro {
  position: relative;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 22px;
  margin: 0 0 22px;
}
.page-intro > div:first-child, .page-toolbar > div:first-child { min-width: 0; }
.page-intro h1, .page-toolbar h1, .session-hero h1, .scanner-intro h1 {
  margin: 3px 0 6px;
  color: var(--slate-950);
  font-size: clamp(24px, 2.4vw, 31px);
  line-height: 1.18;
  font-weight: 760;
  letter-spacing: -.032em;
}
.page-intro p, .page-toolbar p, .session-hero p, .scanner-intro p { margin: 0; max-width: 680px; color: var(--slate-500); font-size: 13px; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-strong); font-size: 9.5px; line-height: 1; font-weight: 820; letter-spacing: .105em; text-transform: uppercase; }
.toolbar-actions, .quick-strip, .profile-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.section-heading h2 { margin: 0 0 4px; color: var(--slate-900); font-size: 16px; font-weight: 720; letter-spacing: -.012em; }
.section-heading h3 { margin: 0 0 4px; color: var(--slate-900); font-size: 14px; font-weight: 720; }
.section-heading p { margin: 0; color: var(--slate-500); font-size: 11.5px; }
.text-muted { color: var(--slate-500) !important; }
.text-faint { color: var(--slate-400) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.helper, .form-help, .form-hint { color: var(--slate-500); font-size: 10.5px; line-height: 1.45; }

/* Cards ----------------------------------------------------------------- */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--shadow-xs);
  overflow: visible;
}
.card-header { min-height: 58px; padding: 15px 18px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg,#fff,var(--surface-subtle)); border-radius: var(--radius) var(--radius) 0 0; }
.card-header > div { min-width: 0; }
.card-header p { margin: 3px 0 0; }
.card-title { color: var(--slate-900); font-size: 13.5px; font-weight: 730; letter-spacing: -.005em; }
.card-body { padding: 19px; }
.card-interactive { transition: transform .18s var(--ease), border-color .18s ease, box-shadow .18s ease; }
.card-interactive:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 25%, var(--border)); box-shadow: var(--shadow-md); }
.icon-tile { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: var(--brand-soft); color: var(--brand); }
.icon-tile.success { background: var(--success-soft); color: var(--success); }
.icon-tile.warning { background: var(--warning-soft); color: var(--warning); }
.icon-tile.danger { background: var(--danger-soft); color: var(--danger); }
.card-hover-action { opacity: 0; transform: translateX(-4px); transition: opacity .16s ease, transform .16s ease; }
.card:hover .card-hover-action, .kpi-card:hover .card-hover-action { opacity: 1; transform: translateX(0); }

/* Buttons --------------------------------------------------------------- */
.btn {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--slate-700);
  box-shadow: var(--shadow-xs);
  font-size: 12px;
  font-weight: 670;
  letter-spacing: -.005em;
  line-height: 1;
  justify-content: center;
  transition: transform .15s var(--ease), box-shadow .15s ease, border-color .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--slate-50); border-color: var(--slate-300); color: var(--slate-900); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
.btn-primary, a.btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 90%, white), var(--brand-strong)); border-color: var(--brand-strong); color: #fff !important; box-shadow: 0 3px 8px color-mix(in srgb, var(--brand) 24%, transparent); }
.btn-primary:hover, a.btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff !important; box-shadow: 0 7px 16px color-mix(in srgb, var(--brand) 27%, transparent); }
.btn-danger, a.btn-danger { background: #fff; border-color: color-mix(in srgb, var(--danger) 28%, var(--border)); color: var(--danger) !important; }
.btn-danger:hover, a.btn-danger:hover { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 38%, var(--border)); color: var(--danger) !important; }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--slate-100); border-color: transparent; box-shadow: none; }
.btn-subtle { background: var(--slate-50); }
.btn-sm { min-height: 32px; padding: 6px 10px; font-size: 11px; }
.icon-btn { width: 36px; padding: 0; }
.btn .icon { flex: 0 0 auto; }
.btn.is-loading { pointer-events: none; }

/* Forms ----------------------------------------------------------------- */
.form-group { margin-bottom: 15px; }
.form-label { margin-bottom: 6px; color: var(--slate-700); font-size: 11px; font-weight: 700; }
.form-control, select.form-control, textarea.form-control {
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--slate-800);
  box-shadow: inset 0 1px 2px rgba(16,24,40,.025);
  font-size: 12.5px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
textarea.form-control { min-height: 92px; line-height: 1.5; }
.form-control:hover { border-color: var(--slate-300); }
.form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 13%, transparent); }
.form-control:disabled, .form-control[readonly] { background: var(--slate-50); color: var(--slate-500); }
.form-row { gap: 14px; }
.filters-row {
  padding: 11px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--shadow-xs);
}
.filters-row .form-control { min-height: 36px; }
.search-bar .icon { left: 12px; color: var(--slate-400); }
.search-bar input { padding-left: 36px; }
.check-card, .setting-toggle, .channel-option {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.check-card:hover, .setting-toggle:hover, .channel-option:hover { border-color: color-mix(in srgb, var(--brand) 28%, var(--border)); box-shadow: var(--shadow-sm); }
.check-card:has(input:checked), .setting-toggle:has(input:checked), .channel-option:has(input:checked) { border-color: color-mix(in srgb, var(--brand) 44%, var(--border)); background: var(--brand-soft); }

/* Tables and action menus ------------------------------------------------ */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--shadow-xs);
  overflow: auto;
}
table.data-table, table.table { font-size: 12px; }
table.data-table th, table.table th {
  height: 42px;
  padding: 10px 13px;
  background: #f7f9fc;
  color: var(--slate-500);
  border-bottom: 1px solid var(--border);
  font-size: 9.5px;
  font-weight: 780;
  letter-spacing: .055em;
  text-transform: uppercase;
}
table.data-table td, table.table td { min-height: 54px; padding: 11px 13px; border-bottom-color: var(--slate-150); color: var(--slate-600); }
table.data-table tr, table.table tr { transition: background-color .12s ease, box-shadow .12s ease; }
table.data-table tbody tr:hover, table.table tbody tr:hover { background: #f9fbff; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--brand) 65%, white); }
table.data-table tbody tr:hover .row-actions, table.table tbody tr:hover .row-actions { opacity: 1; }
.row-actions { display: flex; justify-content: flex-end; gap: 5px; opacity: .72; transition: opacity .15s ease; }
.employee-register-table td:first-child, .employee-register-table th:first-child { padding-left: 15px; }
.menu { position: relative; }
.menu-panel {
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  z-index: 100;
}
.menu-panel:not(.menu-panel-up) { top: calc(100% + 6px); }
.menu-item { display: flex; align-items: center; width: 100%; min-height: 34px; gap: 9px; padding: 8px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--slate-700); font-size: 11.5px; text-align: left; cursor: pointer; }
.menu-item:hover { background: var(--slate-100); color: var(--slate-950); }
.menu-item.danger { color: var(--danger); }
.menu-item.danger:hover { background: var(--danger-soft); color: var(--danger); }
.menu-item .icon { width: 15px; height: 15px; color: var(--slate-400); }
.menu-item:hover .icon { color: currentColor; }
.menu-separator { height: 1px; margin: 5px 3px; background: var(--border); }

/* Status chips ----------------------------------------------------------- */
.badge, .status-badge {
  min-height: 23px; padding: 4px 8px;
  border-radius: 999px;
  font-size: 9.5px; line-height: 1; font-weight: 780; letter-spacing: .015em;
}
.badge-success, .status-active, .status-open { background: var(--success-soft); color: var(--success); border: 1px solid color-mix(in srgb,var(--success) 18%,transparent); }
.badge-warning, .status-paused, .status-scheduled { background: var(--warning-soft); color: var(--warning); border: 1px solid color-mix(in srgb,var(--warning) 18%,transparent); }
.badge-danger, .status-failed { background: var(--danger-soft); color: var(--danger); border: 1px solid color-mix(in srgb,var(--danger) 18%,transparent); }
.badge-info { background: var(--info-soft); color: var(--info); border: 1px solid color-mix(in srgb,var(--info) 16%,transparent); }
.badge-muted, .status-closed, .status-expired, .status-cancelled, .status-archived, .status-draft { background: var(--slate-100); color: var(--slate-600); border: 1px solid var(--border); }

/* Empty, notice and flash states ---------------------------------------- */
.empty-state { padding: 48px 24px; border: 1px dashed var(--border-strong); border-radius: 11px; background: linear-gradient(180deg,#fff,var(--slate-50)); }
.empty-state.compact { padding: 24px 18px; border: 0; background: transparent; }
.empty-state .icon { width: 36px; height: 36px; margin-bottom: 11px; color: var(--slate-300); }
.empty-state h3 { color: var(--slate-800); font-size: 13.5px; }
.empty-state p { color: var(--slate-500); font-size: 11.5px; }
.notice { border-radius: 9px; border-width: 1px; font-size: 11.5px; }
.notice-info { background: var(--info-soft); color: #244a87; border-color: #d7e5ff; }
.flash-stack { top: 18px; right: 20px; max-width: 410px; }
.flash { display: flex; align-items: flex-start; gap: 9px; min-width: 310px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--slate-700); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease; }
.flash.show { opacity: 1; transform: translateY(0); }
.flash-symbol { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; background: var(--brand-soft); color: var(--brand); flex: 0 0 auto; }
.flash-success .flash-symbol { background: var(--success-soft); color: var(--success); }
.flash-warning .flash-symbol { background: var(--warning-soft); color: var(--warning); }
.flash-danger .flash-symbol, .flash-error .flash-symbol { background: var(--danger-soft); color: var(--danger); }

/* Dashboard -------------------------------------------------------------- */
.dashboard-hero {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 20px; align-items: end;
  padding: 24px 25px;
  margin-bottom: 18px;
  border: 1px solid #dbe5f5;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 90% 0%, color-mix(in srgb,var(--brand) 16%,transparent), transparent 36%),
    linear-gradient(135deg,#ffffff 0%,#f5f8fd 100%);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.dashboard-hero h1 { margin: 4px 0 6px; font-size: 29px; line-height: 1.15; letter-spacing: -.035em; color: var(--slate-950); }
.dashboard-hero p { margin: 0; color: var(--slate-500); font-size: 12.5px; }
.dashboard-hero-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dashboard-date { display: flex; align-items: center; gap: 7px; color: var(--brand-strong); font-weight: 700; font-size: 10.5px; }
.kpi-grid.premium, .executive-kpi-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin-bottom: 17px; }
.kpi-card {
  position: relative;
  display: grid; grid-template-columns: 42px minmax(0,1fr) 20px; align-items: center; gap: 12px;
  min-height: 116px;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: transform .18s var(--ease), border-color .18s ease, box-shadow .18s ease;
}
.kpi-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: transparent; transition: background-color .18s ease; }
.kpi-card:hover { color: inherit; transform: translateY(-3px); border-color: color-mix(in srgb,var(--brand) 23%,var(--border)); box-shadow: var(--shadow-md); }
.kpi-card:hover::before { background: var(--brand); }
.kpi-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: var(--brand-soft); color: var(--brand); }
.kpi-icon .icon { width: 20px; height: 20px; }
.kpi-icon.success { background: var(--success-soft); color: var(--success); }
.kpi-icon.warning { background: var(--warning-soft); color: var(--warning); }
.kpi-icon.danger { background: var(--danger-soft); color: var(--danger); }
.kpi-card-copy { min-width: 0; }
.kpi-label { color: var(--slate-500); font-size: 9.5px; line-height: 1; font-weight: 760; letter-spacing: .065em; text-transform: uppercase; }
.kpi-value { margin: 6px 0 2px; color: var(--slate-950); font-size: 27px; line-height: 1; font-weight: 770; letter-spacing: -.035em; }
.kpi-card small { color: var(--slate-400); font-size: 9.75px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-arrow { color: var(--slate-300); opacity: 0; transform: translateX(-4px); transition: opacity .16s ease, transform .16s ease, color .16s ease; }
.kpi-card:hover .kpi-arrow { opacity: 1; transform: translateX(0); color: var(--brand); }
.dashboard-grid { grid-template-columns: minmax(0,1.55fr) minmax(330px,.75fr); gap: 16px; margin-bottom: 16px; }
.dashboard-card { overflow: hidden; }
.dashboard-card .card-body { min-height: 270px; }
.dashboard-card-action { font-size: 10.5px; font-weight: 700; color: var(--brand); display: flex; align-items: center; gap: 5px; }
.trend-chart { min-height: 205px; gap: 10px; padding: 13px 5px 0; border-bottom: 1px solid var(--border); background: repeating-linear-gradient(to top, transparent 0, transparent 49px, var(--slate-100) 50px); }
.trend-day { gap: 8px; }
.trend-bars { height: 170px; gap: 4px; align-items: end; }
.trend-bars .bar { min-height: 3px; width: 8px; border-radius: 4px 4px 1px 1px; transition: filter .15s ease, transform .15s ease; }
.trend-bars .bar:hover { filter: brightness(.92); transform: scaleX(1.2); }
.trend-bars .present, .dot.present { background: var(--brand); }
.trend-bars .late, .dot.late { background: #f0a23a; }
.trend-bars .absent, .dot.absent { background: #d45d55; }
.chart-legend { padding-top: 13px; color: var(--slate-500); font-size: 10px; }
.attention-list { display: flex; flex-direction: column; gap: 8px; }
.attention-item { display: grid; grid-template-columns: 38px minmax(0,1fr) 18px; align-items: center; gap: 11px; min-height: 67px; padding: 11px; border: 1px solid var(--border); border-radius: 10px; color: inherit; background: #fff; }
.attention-item:hover { color: inherit; border-color: color-mix(in srgb,var(--brand) 24%,var(--border)); background: #fbfdff; transform: translateX(2px); }
.attention-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; background: var(--brand-soft); color: var(--brand); }
.attention-icon.warning { background: var(--warning-soft); color: var(--warning); }
.attention-icon.danger { background: var(--danger-soft); color: var(--danger); }
.attention-item strong { display: block; color: var(--slate-800); font-size: 11.5px; }
.attention-item small { display: block; margin-top: 2px; color: var(--slate-500); font-size: 9.5px; }
.attention-arrow { color: var(--slate-300); }
.dashboard-lower-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(360px,.9fr); gap: 16px; }
.department-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.department-card { padding: 13px; border: 1px solid var(--border); border-radius: 10px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.department-card:hover { border-color: color-mix(in srgb,var(--brand) 22%,var(--border)); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.department-card strong { color: var(--slate-800); font-size: 11.5px; }
.department-card small { color: var(--slate-500); font-size: 9.5px; }
.progress { height: 6px; margin: 10px 0 7px; border-radius: 999px; background: var(--slate-100); overflow: hidden; }
.progress span { border-radius: inherit; background: linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 68%,#74a1ff)); }
.session-list { display: flex; flex-direction: column; gap: 8px; }
.session-list-item { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--border); border-radius: 10px; color: inherit; }
.session-list-item:hover { color: inherit; border-color: color-mix(in srgb,var(--brand) 24%,var(--border)); background: #fbfdff; }
.session-list-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; background: var(--brand-soft); color: var(--brand); }
.session-list-item strong { display: block; color: var(--slate-800); font-size: 11.5px; }
.session-list-item small { display: block; color: var(--slate-500); font-size: 9.5px; margin-top: 2px; }
.recent-activity-list { display: flex; flex-direction: column; }
.recent-activity-item { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--slate-150); }
.recent-activity-item:last-child { border-bottom: 0; }
.recent-activity-avatar { width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; background: var(--slate-100); color: var(--brand); font-size: 10px; font-weight: 800; }
.recent-activity-avatar img { width: 100%; height: 100%; object-fit: cover; }
.recent-activity-item strong { display: block; color: var(--slate-800); font-size: 10.5px; }
.recent-activity-item small { display: block; color: var(--slate-500); font-size: 9.25px; margin-top: 2px; }
.recent-activity-time { color: var(--slate-400); font-size: 9px; text-align: right; }
.quick-action-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.quick-action-card { position: relative; display: flex; align-items: center; gap: 10px; min-height: 65px; padding: 11px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: inherit; overflow: hidden; }
.quick-action-card:hover { color: inherit; border-color: color-mix(in srgb,var(--brand) 25%,var(--border)); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.quick-action-card .icon-tile { width: 35px; height: 35px; border-radius: 9px; }
.quick-action-card strong { display: block; color: var(--slate-800); font-size: 10.5px; }
.quick-action-card small { display: block; color: var(--slate-400); font-size: 8.75px; margin-top: 2px; }

/* Employee register and profile ----------------------------------------- */
.employee-register-summary {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr));
  margin-bottom: 14px;
  border: 1px solid var(--border); border-radius: 11px; background: #fff; box-shadow: var(--shadow-xs); overflow: hidden;
}
.employee-register-summary > div { position: relative; min-height: 78px; padding: 15px 16px; border-right: 1px solid var(--border); }
.employee-register-summary > div:last-child { border-right: 0; }
.employee-register-summary > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: color-mix(in srgb,var(--brand) 45%,white); opacity: 0; transition: opacity .15s ease; }
.employee-register-summary > div:hover::before { opacity: 1; }
.employee-register-summary span { display: block; color: var(--slate-500); font-size: 9.5px; font-weight: 680; }
.employee-register-summary strong { display: block; margin-top: 7px; color: var(--slate-950); font-size: 22px; line-height: 1; letter-spacing: -.03em; }
.employee-thumb { width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--brand-soft); color: var(--brand); }
.employee-cell { gap: 11px; color: inherit; }
.employee-cell:hover { color: inherit; }
.employee-cell strong { color: var(--slate-800); font-size: 11.5px; }
.employee-cell small { color: var(--slate-400); font-size: 9.5px; }
.employee-code { color: var(--slate-700); font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 10.5px; }
.account-status-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.account-status-cell small { color: var(--slate-400); font-size: 9px; }
.bulk-account-bar { border: 1px solid color-mix(in srgb,var(--brand) 28%,var(--border)); border-radius: 11px; background: linear-gradient(180deg,#fff,var(--brand-soft)); box-shadow: var(--shadow-md); }
.profile-header { border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(135deg,#fff,#f7f9fd); box-shadow: var(--shadow-sm); }
.profile-avatar { border: 4px solid #fff; box-shadow: 0 0 0 1px var(--border), var(--shadow-sm); }
.tabs-shell { border: 1px solid var(--border); border-radius: 11px; background: #fff; padding: 4px; box-shadow: var(--shadow-xs); }
.tabs-shell [role="tab"] { border-radius: 8px; font-size: 11px; font-weight: 680; }
.tabs-shell [role="tab"].active { background: var(--brand-soft); color: var(--brand-strong); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--brand) 16%,transparent); }
.detail-grid { border-radius: 10px; overflow: hidden; }
.account-action-panel, .account-empty-state, .account-identity-card, .account-detail-grid { border-radius: 10px; }

/* Sessions and scanner --------------------------------------------------- */
.session-table .session-name-link, .session-name-link { color: var(--slate-800); font-weight: 700; }
.session-name-link:hover { color: var(--brand); }
.session-hero { padding: 22px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(135deg,#fff,#f6f8fc); box-shadow: var(--shadow-sm); }
.session-hero .eyebrow { color: var(--brand); }
.kpi-strip { border-radius: 11px; overflow: hidden; box-shadow: var(--shadow-xs); }
.kpi-strip > div { background: #fff; }
.kpi-strip span { color: var(--slate-500); font-size: 9px; font-weight: 700; }
.kpi-strip strong { color: var(--slate-900); font-size: 14px; }
.form-workspace, .form-surface { border-radius: 12px; box-shadow: var(--shadow-xs); }
.form-workspace .tab-list { background: #f7f9fc; border-radius: 11px 11px 0 0; }
.method-card, .scope-card { border-radius: 10px; }
.review-block { border-radius: 10px; background: var(--slate-50); border-color: var(--border); }
.scanner-shell { gap: 16px; }
.scanner-workspace, .scanner-result-panel, .scanner-recent-section { border-radius: 13px; border-color: var(--border); box-shadow: var(--shadow-xs); }
.scanner-mode-tabs { padding: 5px; gap: 4px; background: var(--slate-100); border-radius: 10px; }
.scanner-mode-tabs button { border-radius: 7px; font-size: 10.5px; font-weight: 700; }
.scanner-mode-tabs button.active { background: #fff; color: var(--brand); box-shadow: var(--shadow-xs); }
.scanner-video-shell { border-radius: 13px; background: var(--navy-950); overflow: hidden; }
.scanner-guide { color: color-mix(in srgb,var(--brand) 70%,white); }
.scanner-state { border-radius: 999px; }
.premium-results, .premium-confirm, .manual-preview-identity, .manual-preview-facts { border-radius: 10px; }
.manual-result.premium-result { transition: background-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.manual-result.premium-result:hover, .manual-result.premium-result.is-active { transform: translateX(1px); }
.manual-result-photo, .manual-preview-photo { border-radius: 10px; }
.manual-next-action, .manual-result-action { border-radius: 999px; }

/* Settings, communications and reports ---------------------------------- */
.settings-layout { gap: 18px; }
.settings-nav { border-radius: 12px; border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow-xs); padding: 8px; }
.settings-nav a { min-height: 36px; display: flex; align-items: center; border-radius: 8px; color: var(--slate-600); font-size: 11px; font-weight: 650; }
.settings-nav a:hover { background: var(--slate-100); color: var(--slate-900); }
.settings-nav a.active { background: var(--brand-soft); color: var(--brand); }
.settings-section { scroll-margin-top: 92px; }
.settings-section .card-header { min-height: 64px; }
.employee-id-preview, .delivery-choice-panel { border-radius: 10px; }
.portal-settings-grid, .delivery-options { gap: 10px; }
.communication-tabs { background: #fff; border: 1px solid var(--border); border-radius: 11px; padding: 5px; }
.report-summary, .summary-grid { gap: 12px; }
.report-card { border-radius: 11px; }

/* Employee portal -------------------------------------------------------- */
.portal-shell { max-width: 1180px; margin: 0 auto; }
.portal-hero { border-radius: 16px; background: linear-gradient(135deg,var(--navy-900),var(--navy-800)); box-shadow: var(--shadow-md); color: #fff; overflow: hidden; }
.portal-hero h1, .portal-hero strong { color: #fff; }
.portal-hero p, .portal-hero small { color: rgba(226,232,240,.72); }
.portal-stat, .portal-card { border-radius: 12px; border-color: var(--border); box-shadow: var(--shadow-xs); }

/* Auth ------------------------------------------------------------------ */
.auth-page { background: #eef2f7; }
.auth-card { border-radius: 16px; border-color: var(--border); box-shadow: var(--shadow-lg); overflow: hidden; }
.auth-brand { background: linear-gradient(145deg,var(--navy-900),var(--navy-950)); }
.auth-heading h1 { color: var(--slate-950); letter-spacing: -.025em; }
.auth-heading p { color: var(--slate-500); }
.auth-card .form-control { min-height: 44px; }

/* Modals ---------------------------------------------------------------- */
.modal-overlay, .modal-backdrop { backdrop-filter: blur(4px); }
.modal-box { border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; }
.modal-header, .modal-footer { background: var(--slate-50); border-color: var(--border); }
.session-modal .session-timeout-card { max-width: 420px; display: grid; grid-template-columns: 55px minmax(0,1fr); align-items: start; padding: 18px; border-radius: 14px; box-shadow: var(--shadow-lg); }
.session-timeout-card .card-body { padding: 0 0 0 14px; }
.modal-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 12px; background: var(--warning-soft); color: var(--warning); }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1220px) {
  .executive-kpi-grid, .kpi-grid.premium { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-lower-grid { grid-template-columns: 1fr; }
  .account-trigger-copy { display: none; }
}
@media (max-width: 1050px) {
  .sidebar { transform: translateX(-100%); width: var(--sidebar-w); }
  .sidebar.open { transform: translateX(0); }
  .main, body.sidebar-collapsed .main { margin-left: 0; }
  .hamburger { display: grid; place-items: center; }
  .sidebar-collapse { display: none; }
  .content { padding: 24px 22px 36px; }
  .topbar { padding: 0 20px; }
  body.sidebar-collapsed .brand-copy,
  body.sidebar-collapsed .nav-label,
  body.sidebar-collapsed .nav-section-title,
  body.sidebar-collapsed .sidebar-user-copy,
  body.sidebar-collapsed .sidebar-user-menu { opacity: 1; width: auto; pointer-events: auto; }
  body.sidebar-collapsed .nav-link { justify-content: flex-start; }
  body.sidebar-collapsed .sidebar-user { display: grid; }
}
@media (max-width: 820px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-hero { grid-template-columns: 1fr; align-items: start; }
  .dashboard-hero-actions { justify-content: flex-start; }
  .company-clock { display: none; }
  .employee-register-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .employee-register-summary > div:nth-child(2) { border-right: 0; }
  .employee-register-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .department-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .content { padding: 20px 14px 30px; }
  .topbar { padding: 0 13px; }
  .topbar-context, .topbar-create span, .topbar-icon-action, .account-trigger > .icon { display: none; }
  .account-trigger { padding: 3px; }
  .page-intro, .page-toolbar, .session-hero, .scanner-intro { flex-direction: column; gap: 13px; }
  .page-intro h1, .page-toolbar h1, .session-hero h1, .scanner-intro h1 { font-size: 25px; }
  .executive-kpi-grid, .kpi-grid.premium { grid-template-columns: 1fr; }
  .kpi-card { min-height: 100px; }
  .quick-action-grid { grid-template-columns: 1fr; }
  .employee-register-summary { grid-template-columns: 1fr; }
  .employee-register-summary > div { border-right: 0; border-bottom: 1px solid var(--border); }
  .employee-register-summary > div:last-child { border-bottom: 0; }
  .filters-row { align-items: stretch; }
  .filters-row .form-control, .filters-row .search-bar { width: 100%; min-width: 0; }
  .app-footer { padding-left: 14px; padding-right: 14px; }
  .flash-stack { left: 12px; right: 12px; top: 12px; max-width: none; }
  .flash { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@media print {
  .sidebar, .topbar, .app-footer, .toolbar-actions, .quick-strip, .row-actions { display: none !important; }
  .main { margin-left: 0 !important; }
  .content { max-width: none; padding: 0; }
  .card, .table-wrap { box-shadow: none; }
}

/* Phase 5C employee summary refinements */
.register-summary-item { display: flex; align-items: center; gap: 12px; }
.employee-register-summary .register-summary-icon { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 36px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); }
.employee-register-summary .register-summary-icon.success { background: var(--success-soft); color: var(--success); }
.employee-register-summary .register-summary-icon.warning { background: var(--warning-soft); color: var(--warning); }
.employee-register-summary .register-summary-icon.danger { background: var(--danger-soft); color: var(--danger); }
.employee-register-summary .register-summary-icon .icon { width: 17px; height: 17px; }
.employee-register-summary .register-summary-copy { display: flex; flex-direction: column; }
.employee-register-summary .register-summary-copy > span { color: var(--slate-500); }
.employee-register-summary .register-summary-copy > strong { margin-top: 6px; }
.profile-kpis { border-radius: 11px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.profile-kpis > div { display: flex; align-items: center; gap: 10px; min-height: 78px; padding: 13px; background: #fff; }
.profile-kpi-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); }
.profile-kpi-icon.success { background: var(--success-soft); color: var(--success); }
.profile-kpi-icon.warning { background: var(--warning-soft); color: var(--warning); }
.profile-kpi-icon.danger { background: var(--danger-soft); color: var(--danger); }
.profile-kpi-icon .icon { width: 16px; height: 16px; }
.profile-kpis > div > span:last-child { display: flex; flex-direction: column; }
.profile-kpis small { color: var(--slate-500); font-size: 9px; }
.profile-kpis strong { color: var(--slate-900); font-size: 17px; margin-top: 3px; }

/* Phase 5C session index */
.session-overview-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 11px; margin-bottom: 14px; }
.session-overview-card { display: grid; grid-template-columns: 36px minmax(0,1fr) 16px; align-items: center; gap: 10px; min-height: 78px; padding: 13px; border: 1px solid var(--border); border-radius: 11px; background: #fff; color: inherit; box-shadow: var(--shadow-xs); }
.session-overview-card:hover { color: inherit; border-color: color-mix(in srgb,var(--brand) 24%,var(--border)); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.session-overview-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: var(--brand-soft); color: var(--brand); }
.session-overview-icon.success { background: var(--success-soft); color: var(--success); }
.session-overview-icon.warning { background: var(--warning-soft); color: var(--warning); }
.session-overview-icon.muted { background: var(--slate-100); color: var(--slate-500); }
.session-overview-icon .icon { width: 17px; height: 17px; }
.session-overview-card small { display: block; color: var(--slate-500); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .045em; }
.session-overview-card strong { display: block; margin-top: 5px; color: var(--slate-900); font-size: 20px; line-height: 1; }
.session-overview-card .card-hover-action { color: var(--brand); }
.session-filter-bar .search-bar { min-width: 300px; }
.session-table td small { display: block; margin-top: 3px; color: var(--slate-400); font-size: 9.5px; }
.method-summary { display: block; max-width: 180px; color: var(--slate-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media(max-width:1100px){.session-overview-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.session-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.session-filter-bar .search-bar{min-width:0}}
@media(max-width:460px){.session-overview-grid{grid-template-columns:1fr}}

/* Phase 5C reports */
.report-summary-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 11px; margin-bottom: 14px; }
.report-summary-card { display: flex; align-items: center; gap: 11px; min-height: 76px; padding: 13px; border: 1px solid var(--border); border-radius: 11px; background: #fff; box-shadow: var(--shadow-xs); }
.report-summary-icon { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 36px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); }
.report-summary-icon.success { background: var(--success-soft); color: var(--success); }
.report-summary-icon.warning { background: var(--warning-soft); color: var(--warning); }
.report-summary-icon.danger { background: var(--danger-soft); color: var(--danger); }
.report-summary-icon .icon { width: 17px; height: 17px; }
.report-summary-card small { display: block; color: var(--slate-500); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.report-summary-card strong { display: block; color: var(--slate-900); font-size: 20px; line-height: 1; margin-top: 5px; }
.report-filter-bar { gap: 8px; }
.report-filter-bar .form-control { min-width: 125px; }
@media(max-width:1050px){.report-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){.report-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.report-summary-grid{grid-template-columns:1fr}}

/* Phase 5C communications */
.communication-status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; margin-bottom:15px; }
.communication-status-card { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:78px; padding:13px; border:1px solid var(--border); border-radius:11px; background:#fff; color:inherit; box-shadow:var(--shadow-xs); }
.communication-status-card:hover { color:inherit; border-color:color-mix(in srgb,var(--brand) 24%,var(--border)); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.communication-status-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:9px; background:var(--brand-soft); color:var(--brand); }
.communication-status-icon.success { background:var(--success-soft); color:var(--success); }
.communication-status-icon.danger { background:var(--danger-soft); color:var(--danger); }
.communication-status-icon.muted { background:var(--slate-100); color:var(--slate-500); }
.communication-status-icon .icon { width:18px; height:18px; }
.communication-status-card small { display:block; color:var(--slate-500); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.communication-status-card strong { display:block; margin-top:4px; color:var(--slate-850); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.communication-workspace .section-panel { margin-top:14px; border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow:var(--shadow-xs); overflow:hidden; }
.service-toggle { padding:13px; }
.gateway-test { display:grid; grid-template-columns:minmax(180px,1fr) minmax(320px,1.3fr); gap:18px; align-items:center; margin-top:18px; padding:14px; border:1px solid var(--border); border-radius:10px; background:var(--slate-50); }
.gateway-test strong { display:block; color:var(--slate-800); font-size:11.5px; }
.gateway-test small { display:block; color:var(--slate-500); font-size:9.5px; margin-top:2px; }
.gateway-test .inline-test { display:flex; gap:8px; margin:0; }
.gateway-test .form-control { flex:1; }
.template-list { display:flex; flex-direction:column; gap:9px; }
.template-editor { border:1px solid var(--border); border-radius:10px; background:#fff; overflow:hidden; }
.template-editor summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:11px 13px; cursor:pointer; background:var(--slate-50); }
.template-editor summary:hover { background:#f3f6fa; }
.template-editor summary > span:first-child { display:flex; flex-direction:column; }
.template-editor summary strong { color:var(--slate-800); font-size:11.5px; }
.template-editor summary small { color:var(--slate-500); font-size:9px; margin-top:2px; }
.template-editor form { padding:0 14px 14px; }
@media(max-width:1000px){.communication-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.gateway-test{grid-template-columns:1fr}.gateway-test .inline-test{flex-direction:column}}
@media(max-width:520px){.communication-status-grid{grid-template-columns:1fr}}

/* Phase 5C employee portal */
.portal-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; align-items:center; padding:24px; }
.portal-identity { display:flex; align-items:center; gap:15px; min-width:0; }
.portal-avatar { width:60px; height:60px; display:grid; place-items:center; flex:0 0 60px; border-radius:15px; overflow:hidden; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.16); color:#fff; font-size:17px; font-weight:800; }
.portal-avatar img { width:100%; height:100%; object-fit:cover; }
.portal-date { color:#93b6f6; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.portal-hero h1 { margin:4px 0 4px; font-size:25px; line-height:1.1; letter-spacing:-.03em; }
.portal-hero p { margin:0; font-size:11px; }
.portal-today-action { display:flex; flex-direction:column; align-items:flex-end; gap:8px; min-width:190px; }
.portal-today-action > strong { font-size:11px; color:#fff; }
.portal-state { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:6px 9px; border-radius:999px; font-size:9.5px; font-weight:750; }
.portal-state.in { background:rgba(59,130,246,.18); color:#cfe1ff; }
.portal-state.complete { background:rgba(16,185,129,.17); color:#c9f8e8; }
.portal-state.ready { background:rgba(255,255,255,.10); color:#e7edf7; }
.portal-action-button { min-width:130px; background:#fff; border-color:#fff; color:var(--navy-900); }
.portal-action-button:hover { background:#edf4ff; border-color:#edf4ff; color:var(--navy-900); }
.portal-overview-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; margin:15px 0; }
.portal-stat { display:flex; align-items:center; gap:11px; min-height:78px; padding:13px; border:1px solid var(--border); border-radius:11px; background:#fff; box-shadow:var(--shadow-xs); }
.portal-stat-icon { width:36px; height:36px; display:grid; place-items:center; flex:0 0 36px; border-radius:9px; background:var(--brand-soft); color:var(--brand); }
.portal-stat-icon.success { background:var(--success-soft); color:var(--success); }
.portal-stat-icon.warning { background:var(--warning-soft); color:var(--warning); }
.portal-stat-icon.danger { background:var(--danger-soft); color:var(--danger); }
.portal-stat small { display:block; color:var(--slate-500); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.portal-stat strong { display:block; color:var(--slate-900); font-size:20px; margin-top:5px; line-height:1; }
.portal-content-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.65fr); gap:15px; }
.portal-side-stack { display:flex; flex-direction:column; gap:15px; }
.portal-schedule { display:flex; align-items:center; gap:12px; }
.portal-schedule strong { color:var(--slate-800); font-size:12px; }
.portal-schedule p { margin:3px 0 0; color:var(--slate-600); font-size:11px; }
.portal-schedule small { color:var(--slate-400); font-size:9px; }
.portal-account-list { display:flex; flex-direction:column; }
.portal-account-list > div, .portal-account-list > a { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:9px; min-height:52px; padding:9px 0; border-bottom:1px solid var(--slate-150); color:inherit; }
.portal-account-list > div:last-child, .portal-account-list > a:last-child { border-bottom:0; }
.portal-account-list > a:hover { color:inherit; transform:translateX(2px); }
.portal-account-list > div > span, .portal-account-list > a > span { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:var(--slate-100); color:var(--brand); }
.portal-account-list p { margin:0; min-width:0; }
.portal-account-list strong { display:block; color:var(--slate-800); font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.portal-account-list small { display:block; color:var(--slate-400); font-size:8.75px; margin-top:2px; }
@media(max-width:900px){.portal-content-grid{grid-template-columns:1fr}.portal-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.portal-hero{grid-template-columns:1fr}.portal-today-action{align-items:flex-start}.portal-overview-grid{grid-template-columns:1fr}.portal-identity{align-items:flex-start}}

/* ========================================================================
   Phase 5C completion pass — enterprise workspaces and content surfaces
   ======================================================================== */
.page-header, .page-heading, .page-actions {
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  margin-bottom:16px;
}
.page-header h1, .page-heading h1, .page-actions h1 { margin:0 0 4px; color:var(--slate-950); font-size:24px; line-height:1.15; letter-spacing:-.025em; }
.page-header p, .page-heading p, .page-actions p { margin:0; color:var(--slate-500); font-size:12px; }
.page-toolbar-actions, .action-strip { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.filter-bar {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px; margin-bottom:15px; border:1px solid var(--border); border-radius:11px;
  background:#fff; box-shadow:var(--shadow-xs);
}
.filter-bar .grow { min-width:240px; }
.filter-bar .form-control { min-height:36px; width:auto; }
.table-shell { border:1px solid var(--border); border-radius:11px; background:#fff; box-shadow:var(--shadow-xs); overflow:auto; }
.table-wrap-flush { border:0; border-radius:0; box-shadow:none; }
.p-0 { padding:0 !important; }
.form-shell { width:100%; margin-inline:auto; }
.form-panel, .section-panel {
  border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow:var(--shadow-xs); overflow:hidden;
}
.section-panel { padding:18px; }
.tabs {
  display:flex; align-items:center; gap:4px; width:max-content; max-width:100%; overflow:auto;
  padding:4px; margin-bottom:15px; border:1px solid var(--border); border-radius:10px; background:#fff; box-shadow:var(--shadow-xs);
}
.tab {
  display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:7px 12px;
  border-radius:7px; color:var(--slate-500); font-size:11px; font-weight:700; white-space:nowrap;
}
.tab:hover { color:var(--slate-900); background:var(--slate-50); }
.tab.active { color:var(--brand-strong); background:var(--brand-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 14%,transparent); }
.notice-success, .notice.success { background:var(--success-soft); border-color:color-mix(in srgb,var(--success) 20%,transparent); color:var(--success); }
.notice-danger, .notice.danger { background:var(--danger-soft); border-color:color-mix(in srgb,var(--danger) 20%,transparent); color:var(--danger); }
.notice-warning, .notice.warning { background:var(--warning-soft); border-color:color-mix(in srgb,var(--warning) 20%,transparent); color:var(--warning); }

/* Reusable overview cards ------------------------------------------------ */
.department-overview-grid, .schedule-overview-grid, .access-overview-grid, .audit-overview-grid, .backup-overview-grid {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; margin-bottom:15px;
}
.backup-overview-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.overview-stat {
  display:flex; align-items:center; gap:11px; min-height:78px; padding:13px;
  border:1px solid var(--border); border-radius:11px; background:#fff; box-shadow:var(--shadow-xs);
  transition:transform .18s var(--ease), border-color .18s ease, box-shadow .18s ease;
}
.overview-stat:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--brand) 22%,var(--border)); box-shadow:var(--shadow-sm); }
.overview-stat-icon, .entity-icon, .role-summary-icon {
  width:37px; height:37px; display:grid; place-items:center; flex:0 0 37px;
  border-radius:9px; background:var(--brand-soft); color:var(--brand);
}
.overview-stat-icon.success { background:var(--success-soft); color:var(--success); }
.overview-stat-icon.warning { background:var(--warning-soft); color:var(--warning); }
.overview-stat-icon.danger { background:var(--danger-soft); color:var(--danger); }
.overview-stat-icon .icon, .entity-icon .icon, .role-summary-icon .icon { width:17px; height:17px; }
.overview-stat small { display:block; color:var(--slate-500); font-size:9px; font-weight:760; text-transform:uppercase; letter-spacing:.05em; }
.overview-stat strong { display:block; margin-top:5px; color:var(--slate-950); font-size:21px; line-height:1; }
.overview-stat strong.overview-date { font-size:17px; }
.entity-cell { display:flex; align-items:center; gap:10px; min-width:0; }
.entity-cell.compact { gap:8px; }
.entity-cell > div { min-width:0; }
.entity-cell strong { display:block; color:var(--slate-850); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.entity-cell small { display:block; margin-top:2px; color:var(--slate-400); font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.entity-avatar {
  width:34px; height:34px; display:grid; place-items:center; flex:0 0 34px;
  border-radius:9px; background:linear-gradient(145deg,var(--brand-soft),#fff); border:1px solid #dce8fb;
  color:var(--brand-strong); font-size:11px; font-weight:800;
}
.entity-avatar.small { width:29px; height:29px; flex-basis:29px; border-radius:8px; font-size:9px; }
.attendance-progress { min-width:110px; }
.attendance-progress > div { display:flex; align-items:baseline; gap:4px; }
.attendance-progress strong { color:var(--slate-800); font-size:11px; }
.attendance-progress span { color:var(--slate-400); font-size:9px; }
.mini-progress { display:block; width:100%; height:4px; margin-top:6px; border-radius:999px; overflow:hidden; background:var(--slate-100); }
.mini-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--brand),#60a5fa); }

/* Schedule cards and detail --------------------------------------------- */
.schedule-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.schedule-card { border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow:var(--shadow-xs); overflow:hidden; }
.schedule-card-head { display:flex; align-items:flex-start; gap:11px; padding:15px; border-bottom:1px solid var(--slate-150); }
.schedule-card-icon { width:39px; height:39px; display:grid; place-items:center; flex:0 0 39px; border-radius:10px; background:var(--brand-soft); color:var(--brand); }
.schedule-card-icon .icon { width:18px; height:18px; }
.schedule-card-head strong { color:var(--slate-900); font-size:13px; }
.schedule-card-head small { display:block; margin-top:3px; color:var(--slate-400); font-size:9px; }
.schedule-card-body { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; padding:15px; }
.schedule-card-body div { min-width:0; }
.schedule-card-body small { display:block; color:var(--slate-400); font-size:8.5px; text-transform:uppercase; letter-spacing:.045em; font-weight:740; }
.schedule-card-body strong { display:block; margin-top:4px; color:var(--slate-700); font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.schedule-card-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:50px; padding:9px 15px; background:var(--slate-50); border-top:1px solid var(--slate-150); color:var(--slate-400); font-size:9.5px; }
.schedule-detail-hero {
  display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px; margin-bottom:15px;
  border:1px solid #dbe5f5; border-radius:14px; background:linear-gradient(135deg,#fff,#f5f8fd); box-shadow:var(--shadow-sm);
}
.schedule-detail-main { display:flex; align-items:center; gap:14px; min-width:0; }
.schedule-detail-icon { width:50px; height:50px; display:grid; place-items:center; flex:0 0 50px; border-radius:13px; background:var(--brand-soft); color:var(--brand); }
.schedule-detail-icon .icon { width:23px; height:23px; }
.schedule-detail-hero h1 { margin:0 0 4px; color:var(--slate-950); font-size:24px; letter-spacing:-.025em; }
.schedule-detail-hero p { margin:0; color:var(--slate-500); font-size:11px; }
.schedule-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.schedule-time-display { display:flex; align-items:center; gap:12px; margin-bottom:17px; }
.schedule-time-display span { color:var(--slate-950); font-size:20px; font-weight:760; letter-spacing:-.025em; }
.schedule-time-display i { width:32px; height:1px; background:var(--slate-300); }
.weekday-row { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:16px; }
.weekday-row span { min-height:30px; display:grid; place-items:center; border:1px solid var(--border); border-radius:7px; background:var(--slate-50); color:var(--slate-400); font-size:9px; font-weight:730; }
.weekday-row span.active { border-color:#cfe0fc; background:var(--brand-soft); color:var(--brand-strong); }
.schedule-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.schedule-facts div { padding:10px; border:1px solid var(--border); border-radius:9px; background:var(--slate-50); }
.schedule-facts small, .premium-key-values dt { display:block; color:var(--slate-400); font-size:8.5px; font-weight:730; text-transform:uppercase; letter-spacing:.04em; }
.schedule-facts strong, .premium-key-values dd { display:block; margin:4px 0 0; color:var(--slate-800); font-size:10.5px; }
.premium-key-values { margin:0; }
.premium-key-values > div { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:42px; border-bottom:1px solid var(--slate-150); }
.premium-key-values > div:last-child { border-bottom:0; }
.premium-key-values dd { margin:0; text-align:right; }

/* Access-control workspace --------------------------------------------- */
.role-accordion-list { display:flex; flex-direction:column; gap:9px; }
.role-accordion { border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#fff; }
.role-accordion > summary { display:flex; align-items:center; gap:10px; min-height:60px; padding:11px 13px; cursor:pointer; background:var(--slate-50); list-style:none; }
.role-accordion > summary::-webkit-details-marker { display:none; }
.role-accordion > summary:hover { background:#f3f6fa; }
.role-accordion > summary .grow { min-width:0; }
.role-accordion > summary strong { display:block; color:var(--slate-800); font-size:11.5px; }
.role-accordion > summary small { display:block; margin-top:2px; color:var(--slate-400); font-size:9px; }
.role-accordion > summary > .icon:last-child { color:var(--slate-400); transition:transform .18s ease; }
.role-accordion[open] > summary > .icon:last-child { transform:rotate(180deg); }
.role-permission-form { padding:15px; border-top:1px solid var(--border); }
.permission-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.permission-option { display:flex; align-items:center; gap:8px; min-height:38px; padding:8px 9px; border:1px solid var(--border); border-radius:8px; background:#fff; cursor:pointer; }
.permission-option:hover { border-color:color-mix(in srgb,var(--brand) 28%,var(--border)); background:var(--brand-soft); }
.permission-option:has(input:checked) { border-color:#bed3f7; background:var(--brand-soft); }
.permission-option input { accent-color:var(--brand); }
.permission-option strong { color:var(--slate-600); font-size:9.25px; font-weight:650; }
.form-actions { display:flex; justify-content:flex-end; margin-top:12px; }
.modal-box-wide { width:min(900px,calc(100vw - 32px)); }

/* Audit and backups ----------------------------------------------------- */
.audit-action { display:inline-flex; padding:5px 7px; border-radius:6px; background:var(--slate-100); color:var(--slate-700); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:9px; font-weight:650; }
.audit-change { display:grid; grid-template-columns:28px minmax(0,1fr); gap:2px 5px; max-width:230px; }
.audit-change small { color:var(--slate-400); font-size:8px; text-transform:uppercase; }
.audit-change span { color:var(--slate-500); font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.backup-location { display:grid; grid-template-columns:25px minmax(0,1fr) auto; align-items:center; gap:10px; padding:12px 13px; margin-bottom:15px; border:1px solid #d7e5ff; border-radius:10px; background:var(--info-soft); color:#294f8a; }
.backup-location > .icon { width:17px; height:17px; }
.backup-location span { display:flex; align-items:center; gap:8px; min-width:0; }
.backup-location strong { font-size:10px; white-space:nowrap; }
.backup-location code { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9.5px; }
.backup-location small { color:#5875a6; font-size:9px; }

/* Day processing -------------------------------------------------------- */
.process-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:15px; align-items:start; }
.process-card { max-width:none; }
.process-date-form { display:flex; align-items:flex-end; gap:9px; }
.process-preview-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:17px; }
.process-stat { display:flex; align-items:center; gap:9px; min-height:69px; padding:10px; border:1px solid var(--border); border-radius:9px; background:var(--slate-50); }
.process-stat-icon { width:32px; height:32px; display:grid; place-items:center; flex:0 0 32px; border-radius:8px; background:var(--brand-soft); color:var(--brand); }
.process-stat-icon.success { background:var(--success-soft); color:var(--success); }
.process-stat-icon.warning { background:var(--warning-soft); color:var(--warning); }
.process-stat-icon.danger { background:var(--danger-soft); color:var(--danger); }
.process-stat-icon .icon { width:15px; height:15px; }
.process-stat small { display:block; color:var(--slate-400); font-size:8px; text-transform:uppercase; font-weight:730; }
.process-stat strong { display:block; margin-top:3px; color:var(--slate-900); font-size:18px; line-height:1; }
.process-impact-note { display:flex; align-items:flex-start; gap:9px; padding:12px; margin-top:14px; border:1px solid #d7e5ff; border-radius:9px; background:var(--info-soft); color:#294f8a; }
.process-impact-note > .icon { flex:0 0 auto; margin-top:2px; }
.process-impact-note strong { display:block; font-size:10.5px; }
.process-impact-note p { margin:3px 0 0; font-size:9.5px; }
.process-submit { display:flex; justify-content:flex-end; margin-top:14px; }
.process-guidance { padding:18px; border:1px solid var(--border); border-radius:12px; background:linear-gradient(145deg,var(--navy-900),var(--navy-950)); color:#fff; box-shadow:var(--shadow-md); }
.process-guidance-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.10); color:#fff; }
.process-guidance h3 { margin:14px 0 6px; font-size:14px; }
.process-guidance p { margin:0; color:rgba(226,232,240,.72); font-size:10.5px; }
.process-guidance ul { margin:14px 0 0; padding-left:17px; color:rgba(226,232,240,.72); font-size:9.75px; }
.process-guidance li + li { margin-top:7px; }

/* Manual attendance register ------------------------------------------- */
.premium-manual-summary { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin:14px 0; }
.premium-manual-summary > div { display:flex; align-items:center; gap:8px; min-height:62px; padding:9px; border:1px solid var(--border); border-radius:9px; background:#fff; box-shadow:var(--shadow-xs); }
.manual-summary-icon { width:30px; height:30px; display:grid; place-items:center; flex:0 0 30px; border-radius:8px; background:var(--brand-soft); color:var(--brand); }
.manual-summary-icon.success { background:var(--success-soft); color:var(--success); }
.manual-summary-icon.warning { background:var(--warning-soft); color:var(--warning); }
.manual-summary-icon.muted { background:var(--slate-100); color:var(--slate-500); }
.manual-summary-icon .icon { width:14px; height:14px; }
.premium-manual-summary p { margin:0; }
.premium-manual-summary strong { display:block; color:var(--slate-900); font-size:17px; line-height:1; }
.premium-manual-summary span:not(.manual-summary-icon) { display:block; margin-top:3px; color:var(--slate-400); font-size:8px; text-transform:uppercase; letter-spacing:.035em; }
.manual-toolbar { border:1px solid var(--border); border-radius:10px; background:#fff; box-shadow:var(--shadow-xs); }
.manual-table-wrap { margin-top:10px; }

/* Enterprise authentication -------------------------------------------- */
body.is-guest { background:#eaf0f7; }
.enterprise-auth-shell {
  min-height:100vh; display:grid; grid-template-columns:minmax(420px,.95fr) minmax(480px,1.05fr);
  background:#eef2f7;
}
.auth-showcase {
  position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:100vh;
  padding:44px 52px; overflow:hidden; color:#fff;
  background:
    radial-gradient(circle at 86% 15%,rgba(59,130,246,.34),transparent 34%),
    radial-gradient(circle at 0% 100%,rgba(37,99,235,.22),transparent 42%),
    linear-gradient(145deg,var(--navy-900),var(--navy-950));
}
.auth-showcase::after { content:""; position:absolute; width:380px; height:380px; right:-170px; bottom:-170px; border:1px solid rgba(255,255,255,.08); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018); }
.auth-showcase-brand, .auth-mobile-brand { display:flex; align-items:center; gap:11px; position:relative; z-index:1; }
.auth-product-mark { width:42px; height:42px; display:grid; place-items:center; flex:0 0 42px; border-radius:11px; background:linear-gradient(145deg,#4f8df8,var(--brand-strong)); color:#fff; font-size:11px; font-weight:850; box-shadow:0 10px 24px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.28); }
.auth-showcase-brand strong, .auth-mobile-brand strong { display:block; color:inherit; font-size:14px; }
.auth-showcase-brand small, .auth-mobile-brand small { display:block; margin-top:1px; color:rgba(226,232,240,.62); font-size:9.5px; }
.auth-showcase-copy { position:relative; z-index:1; max-width:520px; margin:auto 0; }
.eyebrow.light { color:#91b7fc; }
.auth-showcase-copy h1 { max-width:480px; margin:9px 0 13px; color:#fff; font-size:40px; line-height:1.08; letter-spacing:-.045em; }
.auth-showcase-copy p { max-width:500px; margin:0; color:rgba(226,232,240,.73); font-size:13px; line-height:1.7; }
.auth-feature-list { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.auth-feature-list > div { display:flex; align-items:flex-start; gap:8px; min-width:0; padding:11px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(255,255,255,.045); backdrop-filter:blur(6px); }
.auth-feature-list .icon { width:16px; height:16px; flex:0 0 auto; color:#8fb7ff; margin-top:1px; }
.auth-feature-list strong { display:block; color:#fff; font-size:9.5px; }
.auth-feature-list small { display:block; margin-top:2px; color:rgba(203,213,225,.58); font-size:8px; line-height:1.35; }
.enterprise-auth-card {
  width:min(470px,calc(100% - 48px)); margin:auto; padding:44px 46px;
  border:1px solid var(--border); border-radius:16px; background:#fff; box-shadow:0 22px 60px rgba(15,23,42,.12);
}
.enterprise-auth-shell > .enterprise-auth-card { align-self:center; }
.auth-mobile-brand { display:none; margin-bottom:30px; color:var(--slate-900); }
.auth-mobile-brand small { color:var(--slate-400); }
.enterprise-auth-card .auth-heading { margin-bottom:23px; }
.enterprise-auth-card .auth-heading h1 { margin:5px 0 6px; color:var(--slate-950); font-size:29px; line-height:1.15; letter-spacing:-.035em; }
.enterprise-auth-card .auth-heading p { margin:0; color:var(--slate-500); font-size:11.5px; }
.auth-form { display:flex; flex-direction:column; gap:2px; }
.field-with-icon { position:relative; }
.field-with-icon .field-icon { position:absolute; left:12px; top:50%; width:16px; height:16px; transform:translateY(-50%); color:var(--slate-400); pointer-events:none; }
.field-with-icon .form-control { padding-left:38px; }
.enterprise-auth-card .form-control { min-height:44px; border-radius:8px; }
.field-label-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.field-label-row a, .auth-form-options a, .auth-footnote a { color:var(--brand-strong); font-size:10px; font-weight:680; }
.auth-form-options { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:1px 0 13px; }
.auth-form-options .form-check { display:flex; align-items:center; gap:7px; margin:0; color:var(--slate-500); font-size:10px; }
.auth-form-options input { accent-color:var(--brand); }
.auth-submit { min-height:44px; justify-content:center; margin-top:1px; }
.auth-support-note { display:flex; align-items:flex-start; gap:8px; padding:10px; margin-top:18px; border:1px solid #d7e5ff; border-radius:8px; background:var(--info-soft); color:#426492; font-size:9.25px; line-height:1.5; }
.auth-support-note .icon { flex:0 0 auto; margin-top:1px; }
.auth-footnote { margin:15px 0 0; color:var(--slate-400); font-size:9.5px; text-align:center; }
.auth-single-shell { min-height:100vh; display:grid; place-items:center; padding:28px; background:radial-gradient(circle at 50% 0%,#f8fbff,#eaf0f7 55%,#e5ebf3); }
.auth-recovery-card { position:relative; width:min(460px,100%); }
.auth-recovery-wide { width:min(700px,100%); }
.auth-back-link { display:inline-flex; align-items:center; gap:5px; margin-bottom:24px; color:var(--slate-500); font-size:10px; font-weight:650; }
.auth-recovery-icon { width:44px; height:44px; display:grid; place-items:center; margin-bottom:18px; border-radius:11px; background:var(--brand-soft); color:var(--brand); }
.auth-recovery-icon .icon { width:20px; height:20px; }
.reset-code-field { text-align:center; letter-spacing:.3em; font-weight:750; }

/* Responsive completion pass ------------------------------------------- */
@media(max-width:1100px){
  .permission-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .premium-manual-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
  .auth-feature-list{grid-template-columns:1fr}
}
@media(max-width:920px){
  .department-overview-grid,.schedule-overview-grid,.access-overview-grid,.audit-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .schedule-card-grid,.schedule-detail-grid,.process-layout{grid-template-columns:1fr}
  .enterprise-auth-shell{grid-template-columns:1fr;padding:30px}
  .auth-showcase{display:none}
  .auth-mobile-brand{display:flex}
  .enterprise-auth-card{width:min(500px,100%)}
}
@media(max-width:680px){
  .page-header,.page-heading,.page-actions,.page-toolbar,.schedule-detail-hero{flex-direction:column;align-items:stretch}
  .page-toolbar-actions,.action-strip{justify-content:flex-start}
  .department-overview-grid,.schedule-overview-grid,.access-overview-grid,.audit-overview-grid,.backup-overview-grid{grid-template-columns:1fr 1fr}
  .schedule-card-body,.process-preview-grid{grid-template-columns:1fr 1fr}
  .permission-grid{grid-template-columns:1fr}
  .backup-location{grid-template-columns:25px minmax(0,1fr)}
  .backup-location small{grid-column:2}
  .premium-manual-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .enterprise-auth-shell{padding:18px}
  .enterprise-auth-card{padding:30px 24px;width:100%}
}
@media(max-width:430px){
  .department-overview-grid,.schedule-overview-grid,.access-overview-grid,.audit-overview-grid,.backup-overview-grid,.premium-manual-summary,.schedule-card-body,.process-preview-grid{grid-template-columns:1fr}
  .auth-single-shell{padding:14px}
  .enterprise-auth-card{padding:26px 19px}
  .enterprise-auth-card .form-row{grid-template-columns:1fr}
}
.enterprise-auth-card { max-width:470px; }
.auth-recovery-wide { max-width:700px; }
.modal-box-wide { max-width:900px; }

/* Phase 5C.2 — scanner session visibility and department previews -------- */
.scanner-paused-card {
  display: grid;
  grid-template-columns: 46px minmax(220px,.75fr) minmax(320px,1.25fr);
  gap: 16px;
  align-items: center;
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid color-mix(in srgb,var(--warning) 28%,var(--border));
  border-radius: 13px;
  background: linear-gradient(135deg,#fff,#fffaf0);
  box-shadow: var(--shadow-xs);
}
.scanner-paused-icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 11px; background: var(--warning-soft); color: var(--warning);
}
.scanner-paused-icon .icon { width: 20px; height: 20px; }
.scanner-paused-copy h2 { margin: 4px 0 3px; color: var(--slate-900); font-size: 14px; }
.scanner-paused-copy p { margin: 0; color: var(--slate-500); font-size: 10.5px; }
.scanner-paused-list { display: flex; flex-direction: column; gap: 7px; }
.scanner-paused-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px; background: rgba(255,255,255,.86);
}
.scanner-paused-item > div { min-width: 0; }
.scanner-paused-item strong { display: block; color: var(--slate-800); font-size: 11.5px; }
.scanner-paused-item span { display: block; margin-top: 2px; color: var(--slate-400); font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-primary-actions { position: relative; z-index: 4; }

@media (min-width: 901px) { .department-table-wrap { overflow: visible; } }
.department-head-link { color: var(--slate-700); font-weight: 650; text-decoration: none; }
.department-head-link:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.department-employee-popover { position: relative; display: inline-flex; }
.department-employee-trigger {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 7px 4px 4px;
  border: 1px solid transparent; border-radius: 10px; color: inherit; text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.department-employee-trigger:hover,
.department-employee-popover:focus-within .department-employee-trigger {
  border-color: color-mix(in srgb,var(--brand) 22%,var(--border)); background: var(--brand-soft); box-shadow: var(--shadow-xs);
}
.department-avatar-stack { display: flex; align-items: center; padding-left: 5px; }
.department-mini-avatar {
  width: 27px; height: 27px; display: grid; place-items: center; margin-left: -5px;
  overflow: hidden; border: 2px solid #fff; border-radius: 9px; background: var(--slate-100); color: var(--brand);
  font-size: 8px; font-weight: 800; box-shadow: 0 1px 3px rgba(15,23,42,.12);
}
.department-mini-avatar img,
.department-preview-avatar img { width: 100%; height: 100%; object-fit: cover; }
.department-mini-avatar.more { background: var(--navy-800); color: #fff; }
.department-employee-count { display: flex; flex-direction: column; min-width: 34px; }
.department-employee-count strong { color: var(--slate-800); font-size: 11px; line-height: 1.05; }
.department-employee-count small { color: var(--slate-400); font-size: 8.5px; line-height: 1.05; margin-top: 2px; }
.department-employee-trigger > .icon { width: 13px; height: 13px; color: var(--slate-400); transition: transform .15s ease; }
.department-employee-popover:hover .department-employee-trigger > .icon,
.department-employee-popover:focus-within .department-employee-trigger > .icon { transform: rotate(180deg); color: var(--brand); }
.department-employee-panel {
  position: absolute; left: 50%; top: calc(100% + 8px); z-index: 520;
  width: min(390px, calc(100vw - 36px)); padding: 7px;
  border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%,-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}
.department-employee-popover:hover .department-employee-panel,
.department-employee-popover:focus-within .department-employee-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%,0);
}
.department-preview-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 9px 10px 8px; border-bottom: 1px solid var(--border); }
.department-preview-header > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.department-preview-header strong { color: var(--slate-850); font-size: 12px; }
.department-preview-header > span { color: var(--slate-400); font-size: 8.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
.department-preview-list { padding: 4px 0; }
.department-preview-person {
  display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px;
  min-height: 48px; padding: 6px 8px; border-radius: 8px; color: inherit; text-decoration: none;
}
.department-preview-person:hover,
.department-preview-person:focus-visible { background: var(--slate-50); outline: none; }
.department-preview-avatar {
  width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden;
  border-radius: 9px; background: var(--brand-soft); color: var(--brand); font-size: 9px; font-weight: 800;
}
.department-preview-identity { min-width: 0; }
.department-preview-identity strong { display: block; color: var(--slate-800); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.department-preview-identity small { display: block; margin-top: 2px; color: var(--slate-400); font-size: 8.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.department-preview-person .badge { font-size: 8px; }
.department-preview-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 8px 10px;
  border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; color: var(--brand-strong); font-size: 10px; font-weight: 730; text-decoration: none;
}
.department-preview-footer:hover { background: var(--brand-soft); }
.department-preview-footer .icon { width: 14px; height: 14px; }
.department-empty-link { color: var(--slate-500); font-size: 10.5px; text-decoration: none; }
.department-empty-link:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .scanner-paused-card { grid-template-columns: 42px 1fr; }
  .scanner-paused-list { grid-column: 1 / -1; }
  .department-employee-panel { display: none; }
}
@media (max-width: 620px) {
  .scanner-paused-item { align-items: flex-start; flex-direction: column; }
  .scanner-paused-item form, .scanner-paused-item .btn { width: 100%; }
}

/* Phase 5C.3 — Corporate rotating-QR attendance station ------------------ */
.qr-kiosk {
  --kiosk-navy: #0d1d33;
  --kiosk-navy-soft: #162a47;
  --kiosk-line: #dce3ec;
  --kiosk-bg: #f3f6fa;
  position: relative;
  width: 100%;
  min-height: 620px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border: 1px solid var(--kiosk-line);
  border-radius: 14px;
  background: var(--kiosk-bg);
  box-shadow: 0 12px 34px rgba(15, 23, 42, .08);
  color: var(--slate-900);
}
.qr-kiosk-header {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 22px;
  background: var(--kiosk-navy);
  border-bottom: 1px solid rgba(255,255,255,.10);
  color: #fff;
}
.qr-kiosk-brand,
.qr-kiosk-header-meta,
.qr-kiosk-clock,
.qr-kiosk-open-state,
.qr-kiosk-footer,
.qr-kiosk-help,
.qr-latest-activity,
.qr-refresh-panel { display: flex; align-items: center; }
.qr-kiosk-brand { min-width: 0; gap: 12px; }
.qr-kiosk-logo {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 8px;
  background: #fff;
}
.qr-kiosk-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.qr-kiosk-logo-text { background: var(--brand); color: #fff; border-color: rgba(255,255,255,.18); font-size: 11px; font-weight: 850; letter-spacing: .04em; }
.qr-kiosk-brand-copy { display: flex; flex-direction: column; min-width: 0; }
.qr-kiosk-brand-copy strong { color: #fff; font-size: 15px; line-height: 1.15; font-weight: 780; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qr-kiosk-brand-copy small { margin-top: 4px; color: rgba(226,232,240,.68); font-size: 10px; letter-spacing: .02em; }
.qr-kiosk-header-meta { justify-content: flex-end; gap: 22px; }
.qr-kiosk-open-state { gap: 8px; color: #d9f7e9; font-size: 11px; font-weight: 720; white-space: nowrap; }
.qr-kiosk-open-state i {
  width: 8px;
  height: 8px;
  display: block;
  border-radius: 2px;
  background: #32c48d;
  box-shadow: 0 0 0 3px rgba(50,196,141,.14);
  animation: kiosk-status-breathe 2.4s ease-in-out infinite;
}
@keyframes kiosk-status-breathe { 0%,100%{opacity:1} 50%{opacity:.55} }
.qr-kiosk-clock { flex-direction: column; align-items: flex-end; min-width: 205px; }
.qr-kiosk-clock strong { color: #fff; font-size: 14px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.qr-kiosk-clock small { margin-top: 5px; color: rgba(226,232,240,.64); font-size: 9px; white-space: nowrap; }
.qr-kiosk-exit {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 7px;
  background: rgba(255,255,255,.07);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.qr-kiosk-exit:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.32); }
.qr-kiosk-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(500px, 1.45fr) minmax(315px, .72fr);
  gap: 0;
  background: var(--kiosk-bg);
}
.qr-code-workspace {
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  padding: 34px 42px;
  border-right: 1px solid var(--kiosk-line);
  background: #fff;
}
.qr-workspace-heading { width: min(590px, 100%); text-align: center; }
.qr-workspace-heading .eyebrow,
.qr-session-heading .eyebrow { color: var(--brand-strong); font-size: 9px; letter-spacing: .11em; }
.qr-workspace-heading h3 { margin: 7px 0 5px; color: var(--slate-950); font-size: clamp(23px, 2.2vw, 34px); line-height: 1.12; letter-spacing: -.035em; }
.qr-workspace-heading p { max-width: 560px; margin: 0 auto; color: var(--slate-500); font-size: 12px; }
.qr-code-stage { display: grid; place-items: center; width: 100%; }
.qr-kiosk .qr-kiosk-frame {
  width: min(390px, 46vh, 62vw);
  min-width: 270px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px solid #cfd8e5;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15,23,42,.08);
}
.qr-kiosk .qr-kiosk-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  transition: opacity .18s ease;
}
.qr-kiosk .qr-kiosk-frame img.is-refreshing { opacity: .58; }
.qr-refresh-panel {
  width: min(590px, 100%);
  min-height: 58px;
  position: relative;
  gap: 11px;
  padding: 10px 12px 13px;
  overflow: hidden;
  border: 1px solid var(--kiosk-line);
  border-radius: 9px;
  background: var(--slate-50);
}
.qr-refresh-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: var(--brand);
}
.qr-refresh-icon .icon { width: 16px; height: 16px; }
.qr-refresh-copy { display: flex; flex-direction: column; min-width: 0; }
.qr-refresh-copy strong { color: var(--slate-800); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.qr-refresh-copy small { margin-top: 2px; color: var(--slate-400); font-size: 9px; }
.qr-progress-track { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; background: #e5eaf1; }
.qr-progress-track > span { display: block; height: 100%; width: 0; background: var(--brand); transition: width .85s linear; }
.qr-session-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  background: var(--kiosk-bg);
}
.qr-session-heading { padding-bottom: 18px; border-bottom: 1px solid var(--kiosk-line); }
.qr-session-heading h3 { margin: 7px 0 4px; color: var(--slate-950); font-size: 21px; line-height: 1.2; letter-spacing: -.025em; }
.qr-session-heading > span:last-child { color: var(--slate-400); font-size: 9.5px; font-weight: 720; letter-spacing: .04em; }
.qr-session-details { display: grid; gap: 0; margin: 7px 0 0; }
.qr-session-details > div { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--kiosk-line); }
.qr-session-details dt { color: var(--slate-400); font-size: 9px; font-weight: 760; text-transform: uppercase; letter-spacing: .06em; }
.qr-session-details dd { margin: 0; color: var(--slate-700); font-size: 10.5px; font-weight: 620; text-align: right; overflow-wrap: anywhere; }
.qr-kiosk-metrics { display: grid; grid-template-columns: repeat(3,1fr); margin: 20px 0; border: 1px solid var(--kiosk-line); border-radius: 9px; background: #fff; overflow: hidden; }
.qr-kiosk-metrics > div { min-width: 0; padding: 12px 10px; border-right: 1px solid var(--kiosk-line); text-align: center; }
.qr-kiosk-metrics > div:last-child { border-right: 0; }
.qr-kiosk-metrics span { display: block; color: var(--slate-400); font-size: 8.5px; line-height: 1.2; }
.qr-kiosk-metrics strong { display: block; margin-top: 5px; color: var(--slate-900); font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; }
.qr-latest-activity {
  min-height: 68px;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--kiosk-line);
  border-left: 3px solid var(--brand);
  border-radius: 8px;
  background: #fff;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.qr-latest-activity.is-updated { border-color: color-mix(in srgb, var(--success) 58%, var(--kiosk-line)); border-left-color: var(--success); background: var(--success-soft); box-shadow: 0 5px 18px rgba(8,122,85,.10); }
.qr-latest-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 7px; background: var(--brand-soft); color: var(--brand); }
.qr-latest-icon .icon { width: 16px; height: 16px; }
.qr-latest-copy { min-width: 0; display: flex; flex-direction: column; }
.qr-latest-copy small { color: var(--slate-400); font-size: 8.5px; }
.qr-latest-copy strong { margin-top: 2px; color: var(--slate-800); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qr-latest-copy span { margin-top: 2px; color: var(--slate-500); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qr-kiosk-help { gap: 9px; margin-top: auto; padding-top: 20px; color: var(--slate-500); }
.qr-kiosk-help > .icon { flex: 0 0 auto; color: var(--brand); }
.qr-kiosk-help > span { display: flex; flex-direction: column; }
.qr-kiosk-help strong { color: var(--slate-700); font-size: 10px; }
.qr-kiosk-help small { margin-top: 2px; font-size: 8.8px; }
.qr-kiosk-footer {
  min-height: 62px;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 20px;
  border-top: 1px solid var(--kiosk-line);
  background: #fff;
}
.qr-kiosk-footer > span { display: inline-flex; align-items: center; gap: 7px; color: var(--slate-500); font-size: 9.5px; }
.qr-kiosk-footer > span .icon { color: var(--success); }

.qr-kiosk:fullscreen,
.qr-kiosk.is-fullscreen {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.qr-kiosk:fullscreen .qr-kiosk-header,
.qr-kiosk.is-fullscreen .qr-kiosk-header { min-height: 82px; padding-left: 32px; padding-right: 32px; }
.qr-kiosk:fullscreen .qr-kiosk-body,
.qr-kiosk.is-fullscreen .qr-kiosk-body { grid-template-columns: minmax(590px,1.55fr) minmax(360px,.72fr); }
.qr-kiosk:fullscreen .qr-code-workspace,
.qr-kiosk.is-fullscreen .qr-code-workspace { padding: 24px 48px; gap: 14px; }
.qr-kiosk:fullscreen .qr-kiosk-frame,
.qr-kiosk.is-fullscreen .qr-kiosk-frame { width: min(440px, 54vh); }
.qr-kiosk:fullscreen .qr-session-panel,
.qr-kiosk.is-fullscreen .qr-session-panel { padding: 28px 34px; }
.qr-kiosk:fullscreen .qr-kiosk-footer,
.qr-kiosk.is-fullscreen .qr-kiosk-footer { min-height: 56px; }

@media (max-width: 1000px) {
  .qr-kiosk-body { grid-template-columns: minmax(430px, 1.2fr) minmax(290px,.8fr); }
  .qr-code-workspace { padding: 28px 26px; }
  .qr-session-panel { padding: 26px 22px; }
  .qr-kiosk-header-meta { gap: 12px; }
  .qr-kiosk-clock { min-width: 175px; }
}
@media (max-width: 780px) {
  .qr-kiosk { min-height: 0; }
  .qr-kiosk-header { align-items: flex-start; padding: 14px 16px; }
  .qr-kiosk-header-meta { align-items: flex-end; flex-wrap: wrap; }
  .qr-kiosk-open-state { order: 2; }
  .qr-kiosk-clock { min-width: 0; }
  .qr-kiosk-clock small { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
  .qr-kiosk-body { grid-template-columns: 1fr; }
  .qr-code-workspace { border-right: 0; border-bottom: 1px solid var(--kiosk-line); }
  .qr-kiosk .qr-kiosk-frame { width: min(360px, 78vw); min-width: 220px; }
  .qr-session-panel { min-height: 430px; }
  .qr-kiosk-footer { align-items: stretch; flex-direction: column; }
  .qr-kiosk-footer .btn { width: 100%; }
}
@media (max-width: 520px) {
  .qr-kiosk-brand-copy small, .qr-kiosk-clock small { display: none; }
  .qr-kiosk-header { min-height: 64px; }
  .qr-kiosk-logo { width: 36px; height: 36px; flex-basis: 36px; }
  .qr-kiosk-header-meta { gap: 9px; }
  .qr-kiosk-clock strong { font-size: 11px; }
  .qr-code-workspace { padding: 24px 16px; }
  .qr-workspace-heading h3 { font-size: 24px; }
  .qr-kiosk .qr-kiosk-frame { padding: 12px; }
  .qr-session-panel { padding: 22px 16px; }
  .qr-session-details > div { grid-template-columns: 72px minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .qr-kiosk-open-state i { animation: none; }
  .qr-kiosk .qr-kiosk-frame img,
  .qr-progress-track > span,
  .qr-latest-activity { transition: none; }
}

/* Phase 5C.4 — employee self-service attendance station */
.portal-attendance-station { margin-top: 15px; overflow: hidden; border-radius: 14px; }
.portal-station-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding: 20px 22px; border-bottom: 1px solid var(--border); background: #fff; }
.portal-station-heading h2 { margin: 4px 0 5px; color: var(--slate-900); font-size: 20px; letter-spacing: -.02em; }
.portal-station-heading p { max-width: 760px; margin: 0; color: var(--slate-500); font-size: 10.5px; line-height: 1.55; }
.portal-security-mark { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 34px; padding: 7px 10px; border: 1px solid #b9e6d2; border-radius: 8px; background: var(--success-soft); color: var(--success); font-size: 9.5px; font-weight: 760; }
.portal-security-mark .icon { width: 15px; height: 15px; }
.portal-station-grid { display: grid; grid-template-columns: minmax(420px,1.08fr) minmax(320px,.92fr); min-height: 390px; }
.portal-scanner-panel { min-width: 0; padding: 18px 20px 20px; border-right: 1px solid var(--border); background: var(--slate-50); }
.portal-scanner-status-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 10px; }
.portal-scanner-status-row strong { display: block; color: var(--slate-850); font-size: 12px; }
.portal-scanner-status-row small { display: block; margin-top: 2px; color: var(--slate-400); font-size: 9px; }
.portal-camera-state { padding: 5px 8px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--slate-500); font-size: 8.5px; font-weight: 760; text-transform: uppercase; letter-spacing: .04em; }
.portal-video-shell { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16/9; min-height: 240px; overflow: hidden; border: 1px solid #cbd5e1; border-radius: 10px; background: #07111f; }
.portal-video-shell video { width: 100%; height: 100%; object-fit: cover; }
.portal-video-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 20px; background: linear-gradient(145deg,#0b172a,#12243d); color: #fff; text-align: center; }
.portal-video-placeholder[hidden] { display: none; }
.portal-video-placeholder .icon { width: 34px; height: 34px; color: #a9c6f7; }
.portal-video-placeholder strong { color: #fff; font-size: 13px; }
.portal-video-placeholder small { max-width: 270px; color: #9fb0c8; font-size: 9.5px; line-height: 1.45; }
.portal-scan-guide { pointer-events: none; position: absolute; inset: 18%; }
.portal-scan-guide span { position: absolute; width: 34px; height: 34px; border-color: rgba(255,255,255,.92); border-style: solid; }
.portal-scan-guide span:nth-child(1) { top: 0; left: 0; border-width: 3px 0 0 3px; }
.portal-scan-guide span:nth-child(2) { top: 0; right: 0; border-width: 3px 3px 0 0; }
.portal-scan-guide span:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 3px 3px; }
.portal-scan-guide span:nth-child(4) { right: 0; bottom: 0; border-width: 0 3px 3px 0; }
.portal-scanner-controls { display: grid; grid-template-columns: auto auto minmax(160px,1fr); gap: 8px; margin-top: 10px; }
.portal-scanner-controls .form-control { min-width: 0; }
.portal-privacy-note { display: flex; align-items: flex-start; gap: 6px; margin: 11px 0 0; color: var(--slate-500); font-size: 8.8px; line-height: 1.45; }
.portal-privacy-note .icon { flex: 0 0 auto; margin-top: 1px; color: var(--brand); }
.portal-session-panel { min-width: 0; display: flex; flex-direction: column; padding: 18px 20px 20px; background: #fff; }
.portal-session-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid var(--border); }
.portal-session-panel-heading strong { display: block; color: var(--slate-850); font-size: 12px; }
.portal-session-panel-heading small { display: block; margin-top: 2px; color: var(--slate-400); font-size: 9px; }
.portal-session-panel-heading > span { min-width: 26px; padding: 5px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 9px; font-weight: 800; text-align: center; }
.portal-session-list { display: flex; flex-direction: column; gap: 9px; margin-top: 11px; }
.portal-session-item { padding: 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--slate-50); }
.portal-session-main { display: flex; align-items: center; gap: 9px; }
.portal-session-icon { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 30px; border-radius: 7px; background: #fff; color: var(--brand); border: 1px solid var(--border); }
.portal-session-main strong { display: block; color: var(--slate-800); font-size: 10.5px; }
.portal-session-main small { display: block; margin-top: 2px; color: var(--slate-400); font-size: 8.5px; }
.portal-session-facts { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0; }
.portal-session-facts span { padding: 4px 6px; border-radius: 5px; background: #fff; border: 1px solid var(--border); color: var(--slate-500); font-size: 7.8px; font-weight: 700; }
.portal-session-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.portal-session-empty { min-height: 155px; }
.portal-upload-fallback { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--border); }
.portal-upload-fallback > span { color: var(--slate-400); font-size: 8.5px; }
@media(max-width:980px){.portal-station-grid{grid-template-columns:1fr}.portal-scanner-panel{border-right:0;border-bottom:1px solid var(--border)}}
@media(max-width:640px){.portal-station-heading{flex-direction:column}.portal-security-mark{align-self:flex-start}.portal-scanner-panel,.portal-session-panel{padding:15px}.portal-video-shell{min-height:210px}.portal-scanner-controls{grid-template-columns:1fr 1fr}.portal-scanner-controls .form-control{grid-column:1/-1}.portal-upload-fallback{align-items:flex-start;flex-direction:column}}

/* Phase 5C.5 — premium top-hero login experience ------------------------ */
body.is-guest { overflow-x:hidden; background:#f5f7fa; }
.login-page {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at 15% 78%,color-mix(in srgb,var(--brand) 5%,transparent),transparent 30%),
    #f5f7fa;
}
.login-hero {
  position:relative;
  min-height:clamp(250px,34vh,350px);
  overflow:hidden;
  isolation:isolate;
  background:var(--navy-900);
  color:#fff;
}
.login-hero-slides,
.login-hero-slide,
.login-hero-slide img,
.login-hero-shade { position:absolute; inset:0; width:100%; height:100%; }
.login-hero-slide {
  opacity:0;
  transform:scale(1.025);
  transition:opacity .95s var(--ease),transform 6.4s linear;
}
.login-hero-slide.is-active { opacity:1; transform:scale(1.065); }
.login-hero-slide img { display:block; object-fit:cover; }
.login-hero-slide:nth-child(1) img { object-position:center 47%; }
.login-hero-slide:nth-child(2) img { object-position:center 43%; }
.login-hero-slide:nth-child(3) img { object-position:center 46%; }
.login-hero-shade {
  z-index:1;
  background:
    linear-gradient(90deg,rgba(5,15,29,.78),rgba(8,21,39,.49) 42%,rgba(8,21,39,.62)),
    linear-gradient(180deg,rgba(5,15,29,.20),rgba(5,15,29,.56));
}
.login-hero-shade::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:48%;
  background:linear-gradient(180deg,transparent,rgba(4,12,24,.34));
}
.login-hero-inner {
  position:relative;
  z-index:2;
  width:min(1180px,calc(100% - 56px));
  min-height:clamp(250px,34vh,350px);
  margin:0 auto;
  padding:26px 0 34px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  text-align:center;
}
.login-brand {
  display:inline-flex;
  align-items:center;
  gap:11px;
  max-width:min(540px,100%);
  padding:7px 12px 7px 7px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:13px;
  background:rgba(7,17,31,.34);
  box-shadow:0 10px 28px rgba(0,0,0,.16);
  backdrop-filter:blur(10px);
}
.login-brand-mark {
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:10px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 82%,white),var(--brand-strong));
  color:#fff;
  font-size:11px;
  font-weight:850;
  letter-spacing:-.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 7px 17px rgba(0,0,0,.20);
}
.login-brand-logo { padding:5px; background:#fff; }
.login-brand-logo img { width:100%; height:100%; object-fit:contain; }
.login-brand-copy { min-width:0; text-align:left; line-height:1.18; }
.login-brand-copy strong {
  display:block;
  overflow:hidden;
  color:#fff;
  font-size:13.5px;
  font-weight:760;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.login-brand-copy small {
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:rgba(226,232,240,.70);
  font-size:9.5px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.login-hero-message {
  width:min(750px,100%);
  padding:8px 18px 4px;
  transition:opacity .2s ease,transform .2s ease;
}
.login-hero-message.is-changing { opacity:.12; transform:translateY(5px); }
.login-hero-kicker {
  display:block;
  margin-bottom:8px;
  color:color-mix(in srgb,var(--brand) 48%,#fff);
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.login-hero-message h1 {
  margin:0;
  color:#fff;
  font-size:clamp(27px,3vw,42px);
  line-height:1.07;
  letter-spacing:-.045em;
  text-shadow:0 5px 22px rgba(0,0,0,.26);
}
.login-hero-message p {
  max-width:690px;
  margin:10px auto 0;
  color:rgba(235,241,249,.80);
  font-size:clamp(11px,1.1vw,13px);
  line-height:1.65;
  text-shadow:0 3px 15px rgba(0,0,0,.28);
}
.login-hero-dots { display:flex; align-items:center; justify-content:center; gap:7px; }
.login-hero-dots button {
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:99px;
  background:rgba(255,255,255,.48);
  cursor:pointer;
  transition:width .22s var(--ease),background .22s ease,transform .22s ease;
}
.login-hero-dots button:hover { background:#fff; transform:scale(1.08); }
.login-hero-dots button.is-active { width:25px; background:color-mix(in srgb,var(--brand) 54%,#fff); }
.login-access {
  position:relative;
  z-index:3;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 22px 20px;
}
.login-card.enterprise-auth-card {
  position:relative;
  width:min(430px,100%);
  max-width:430px;
  margin:-42px auto 0;
  padding:36px 38px 30px;
  border:1px solid rgba(207,215,227,.90);
  border-radius:16px;
  background:rgba(255,255,255,.985);
  box-shadow:0 22px 58px rgba(15,23,42,.16),0 2px 7px rgba(15,23,42,.05);
}
.login-card::before {
  content:"";
  position:absolute;
  inset:0 18px auto;
  height:3px;
  border-radius:0 0 8px 8px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
  opacity:.82;
}
.login-card-brand { display:none; justify-content:center; margin-bottom:16px; }
.login-card-logo {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:5px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  color:var(--brand);
  font-size:12px;
  font-weight:850;
  box-shadow:var(--shadow-sm);
}
.login-card-logo img { width:100%; height:100%; object-fit:contain; }
.login-heading { text-align:center; }
.login-card.enterprise-auth-card .login-heading { margin-bottom:22px; }
.login-card.enterprise-auth-card .login-heading h1 { margin-top:5px; font-size:28px; }
.login-card.enterprise-auth-card .login-heading p { font-size:11px; line-height:1.55; }
.login-form .form-group { margin-bottom:13px; }
.login-form .form-label { color:var(--slate-700); font-size:10px; font-weight:720; }
.login-card.enterprise-auth-card .form-control {
  min-height:45px;
  border-color:#d7dee8;
  background:#fbfcfe;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.login-card.enterprise-auth-card .form-control:hover { border-color:#c4cedb; background:#fff; }
.login-card.enterprise-auth-card .form-control:focus {
  border-color:color-mix(in srgb,var(--brand) 66%,#b8c4d6);
  background:#fff;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 11%,transparent);
}
.login-password-field .form-control { padding-right:42px; }
.password-toggle {
  position:absolute;
  top:50%;
  right:8px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--slate-400);
  cursor:pointer;
}
.password-toggle:hover { background:var(--slate-100); color:var(--slate-700); }
.password-toggle span { display:grid; place-items:center; }
.login-submit { min-height:46px; border-radius:9px; box-shadow:0 8px 18px color-mix(in srgb,var(--brand) 24%,transparent); }
.login-submit:hover { transform:translateY(-1px); box-shadow:0 11px 24px color-mix(in srgb,var(--brand) 28%,transparent); }
.login-assurance {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 15px;
  margin-top:16px;
  padding-top:15px;
  border-top:1px solid var(--slate-150);
  color:var(--slate-400);
  font-size:8.75px;
  font-weight:650;
}
.login-assurance span { display:inline-flex; align-items:center; gap:5px; }
.login-assurance .icon { color:var(--brand); }
.login-help { margin:15px 0 8px; color:var(--slate-500); font-size:9.5px; text-align:center; }
.login-footer {
  width:min(760px,100%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:auto;
  padding-top:12px;
  color:var(--slate-400);
  font-size:9px;
}
.login-footer span + span::before { content:"•"; margin-right:8px; color:var(--slate-300); }

@media(max-width:720px){
  .login-hero { min-height:245px; }
  .login-hero-inner { min-height:245px; width:min(100% - 30px,680px); padding:18px 0 28px; }
  .login-brand { padding:6px 10px 6px 6px; }
  .login-brand-mark { width:38px; height:38px; flex-basis:38px; }
  .login-hero-message { padding-inline:2px; }
  .login-hero-message p { max-width:520px; }
  .login-card.enterprise-auth-card { margin-top:-30px; padding:31px 26px 27px; }
}
@media(max-width:460px){
  .login-hero { min-height:225px; }
  .login-hero-inner { min-height:225px; padding:14px 0 24px; }
  .login-brand { max-width:94%; }
  .login-brand-copy strong { font-size:12px; }
  .login-hero-message h1 { font-size:25px; }
  .login-hero-message p { display:none; }
  .login-access { padding-inline:13px; }
  .login-card.enterprise-auth-card { margin-top:-22px; padding:28px 20px 25px; border-radius:14px; }
  .login-card.enterprise-auth-card .login-heading h1 { font-size:25px; }
  .login-assurance { gap:7px 11px; }
  .login-help { max-width:300px; }
}
@media(prefers-reduced-motion:reduce){
  .login-hero-slide,.login-hero-message,.login-submit,.login-hero-dots button { transition:none !important; }
  .login-hero-slide.is-active { transform:none; }
}

/* Phase 5C.7 — Premium sidebar interaction ------------------------------ */
.nav-parent-row {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}
.nav-parent-row .nav-parent {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 39px;
}
.nav-group-toggle {
  position: absolute;
  right: 7px;
  top: 50%;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(203, 213, 225, .55);
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease;
}
.nav-group-toggle:hover,
.nav-group-toggle:focus-visible {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.nav-group-toggle .icon { transition: transform .2s var(--ease); }
.nav-children {
  max-height: 150px;
  opacity: 1;
  overflow: hidden;
  transition: max-height .24s var(--ease), opacity .16s ease, margin .24s var(--ease);
}
.nav-group.is-children-collapsed .nav-children {
  max-height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.nav-group.is-children-collapsed .nav-group-toggle .icon { transform: rotate(-90deg); }

.sidebar-hover-card,
.sidebar-flyout {
  position: fixed;
  z-index: 3600;
  opacity: 0;
  transform: translateX(-5px) scale(.985);
  transform-origin: left center;
  transition: opacity .14s ease, transform .16s var(--ease);
}
.sidebar-hover-card.is-visible,
.sidebar-flyout.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.sidebar-hover-card {
  width: min(260px, calc(100vw - 24px));
  padding: 10px 12px 11px;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 10px;
  background: #0f1b2f;
  color: #fff;
  box-shadow: 0 18px 42px rgba(7,17,31,.24), 0 2px 8px rgba(7,17,31,.16);
  pointer-events: none;
}
.sidebar-hover-card::before,
.sidebar-flyout::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 18px;
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
}
.sidebar-hover-card::before { background: #0f1b2f; border-left: 1px solid rgba(148,163,184,.24); border-bottom: 1px solid rgba(148,163,184,.24); }
.sidebar-hover-card strong {
  display: block;
  font-size: 12.25px;
  line-height: 1.25;
  font-weight: 750;
  letter-spacing: -.01em;
}
.sidebar-hover-card span {
  display: block;
  margin-top: 3px;
  color: rgba(226,232,240,.68);
  font-size: 10.75px;
  line-height: 1.4;
}
.sidebar-flyout {
  width: min(304px, calc(100vw - 24px));
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 22px 54px rgba(7,17,31,.20), 0 3px 12px rgba(7,17,31,.10);
}
.sidebar-flyout::before { background: #fff; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sidebar-flyout-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 10px 11px;
  border-bottom: 1px solid var(--slate-150);
}
.sidebar-flyout-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.sidebar-flyout-icon .icon { width: 19px; height: 19px; }
.sidebar-flyout-heading > span:last-child { min-width: 0; }
.sidebar-flyout-heading strong {
  display: block;
  color: var(--slate-900);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 780;
}
.sidebar-flyout-heading small {
  display: block;
  margin-top: 3px;
  color: var(--slate-500);
  font-size: 10.5px;
  line-height: 1.35;
}
.sidebar-flyout-list { padding: 6px 0 1px; }
.sidebar-flyout-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--slate-700);
}
.sidebar-flyout-item:hover,
.sidebar-flyout-item:focus-visible {
  background: var(--slate-50);
  color: var(--slate-950);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--brand) 70%, white);
  outline: 0;
}
.sidebar-flyout-item.is-active {
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.sidebar-flyout-item strong {
  display: block;
  font-size: 11.75px;
  line-height: 1.25;
  font-weight: 700;
}
.sidebar-flyout-item small {
  display: block;
  margin-top: 2px;
  color: var(--slate-500);
  font-size: 9.75px;
  line-height: 1.3;
}
.sidebar-flyout-arrow {
  color: var(--slate-400);
  font-size: 18px;
  line-height: 1;
  text-align: center;
  transition: transform .14s ease, color .14s ease;
}
.sidebar-flyout-item:hover .sidebar-flyout-arrow,
.sidebar-flyout-item:focus-visible .sidebar-flyout-arrow {
  color: var(--brand);
  transform: translateX(2px);
}

@media (min-width: 1051px) {
  :root { --sidebar-collapsed-w: 88px; }
  body.sidebar-collapsed .nav-link::before { display: none !important; content: none !important; }
  body.sidebar-collapsed .nav-section-title {
    width: auto;
    height: 1px;
    margin: 15px 10px 12px;
    padding: 0;
    overflow: visible;
    opacity: 1;
    pointer-events: none;
    background: rgba(255,255,255,.09);
  }
  body.sidebar-collapsed .nav-section-title:first-child { margin-top: 5px; }
  body.sidebar-collapsed .nav-section-title span { display: none; }
  body.sidebar-collapsed .nav-scroll { padding: 15px 17px 22px; }
  body.sidebar-collapsed .nav-link:not(.nav-sub) {
    width: 50px;
    min-height: 48px;
    margin: 4px auto;
    padding: 0;
    justify-content: center;
    border-radius: 12px;
  }
  body.sidebar-collapsed .nav-link:not(.nav-sub)::after {
    right: -19px;
    top: 10px;
    bottom: 10px;
  }
  body.sidebar-collapsed .nav-icon {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }
  body.sidebar-collapsed .nav-icon .icon {
    width: 21px;
    height: 21px;
    stroke-width: 1.9;
  }
  body.sidebar-collapsed .nav-parent-row { justify-content: center; }
  body.sidebar-collapsed .nav-parent-row .nav-parent { flex: 0 0 50px; padding: 0; }
  body.sidebar-collapsed .nav-group-toggle,
  body.sidebar-collapsed .nav-children { display: none; }
  body.sidebar-collapsed .sidebar-brand { padding-left: 19px; padding-right: 19px; justify-content: center; }
  body.sidebar-collapsed .brand-link { flex: 0 0 40px; }
  body.sidebar-collapsed .sidebar-footer { padding: 12px 19px; }
  body.sidebar-collapsed .sidebar-user {
    width: 50px;
    min-height: 50px;
    margin: 0 auto;
    padding: 8px;
    border-radius: 12px;
  }
  body.sidebar-collapsed .sidebar .user-avatar { width: 34px; height: 34px; }
}

@media (max-width: 1050px) {
  .sidebar-hover-card,
  .sidebar-flyout { display: none !important; }
  .nav-parent-row .nav-parent { padding-right: 39px; }
}
@media (min-width: 1051px) {
  body.sidebar-collapsed .nav-group.has-active-child .nav-parent {
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 30%, transparent), rgba(255,255,255,.06));
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.055);
  }
  body.sidebar-collapsed .nav-group.has-active-child .nav-parent::after {
    background: color-mix(in srgb, var(--brand) 75%, white);
  }
  body.sidebar-collapsed .nav-group.has-active-child .nav-parent .nav-icon { color: #fff; }
}

/* Phase 5C Part 8 — schedule module integrity and workspace polish */
.module-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 18px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(15, 23, 42, .04);
}
.module-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
}
.module-tab:hover,
.module-tab:focus-visible {
  border-color: var(--border);
  background: var(--surface-soft, #f7f9fc);
  color: var(--text);
  transform: translateY(-1px);
}
.module-tab.active {
  border-color: color-mix(in srgb, var(--brand) 22%, var(--border));
  background: color-mix(in srgb, var(--brand) 8%, #fff);
  color: var(--brand);
  box-shadow: 0 3px 10px rgba(15, 23, 42, .05);
}
.module-tab .icon { width: 16px; height: 16px; }

.schedule-management-layout {
  display: grid;
  grid-template-columns: minmax(290px, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.schedule-editor-card {
  position: sticky;
  top: 88px;
  overflow: hidden;
}
.schedule-editor-card .card-header { align-items: flex-start; }
.card-header-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
  background: color-mix(in srgb, var(--brand) 9%, #fff);
  color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 15%, var(--border));
}
.card-header-icon.warning {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 18%, var(--border));
}
.card-header-icon .icon { width: 19px; height: 19px; }
.schedule-records-panel { min-width: 0; }
.stacked-form { display: flex; flex-direction: column; gap: 14px; }
.stacked-form .form-group { margin: 0; }
.optional-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.field-help {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
}
.option-stack { display: grid; gap: 8px; }
.setting-choice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.setting-choice:hover {
  border-color: color-mix(in srgb, var(--brand) 26%, var(--border));
  background: color-mix(in srgb, var(--brand) 2.5%, #fff);
  box-shadow: 0 5px 14px rgba(15, 23, 42, .045);
}
.setting-choice input { margin-top: 3px; accent-color: var(--brand); }
.setting-choice span { display: flex; flex-direction: column; min-width: 0; }
.setting-choice strong { color: var(--text); font-size: 12px; }
.setting-choice small { margin-top: 2px; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.table-subline { display: block; margin-top: 3px; color: var(--muted); font-size: 10.5px; }
.align-right { text-align: right; }
.justify-end { justify-content: flex-end; }
.btn-danger-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--danger);
}
.btn-danger-ghost:hover,
.btn-danger-ghost:focus-visible {
  border-color: color-mix(in srgb, var(--danger) 18%, var(--border));
  background: var(--danger-soft);
  color: var(--danger);
}
.entity-icon.warning {
  color: var(--warning);
  background: var(--warning-soft);
}
.form-error-summary { margin-bottom: 14px; }
.form-error-summary ul { margin: 7px 0 0 18px; padding: 0; }
.form-error-summary li { margin: 2px 0; }
.schedule-form-shell { max-width: 1020px; }

@media (max-width: 1050px) {
  .schedule-management-layout { grid-template-columns: 1fr; }
  .schedule-editor-card { position: static; }
}
@media (max-width: 720px) {
  .module-tabs { padding: 4px; border-radius: 10px; }
  .module-tab { min-height: 36px; padding: 0 10px; }
  .schedule-overview-grid { grid-template-columns: 1fr 1fr; }
  .schedule-records-panel .premium-filter-bar { align-items: stretch; }
  .schedule-records-panel .premium-filter-bar > * { width: 100%; }
  .align-right { text-align: left; }
  .justify-end { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .schedule-overview-grid { grid-template-columns: 1fr; }
}
.assignment-form-grid {
  display: grid;
  grid-template-columns: minmax(160px,.7fr) minmax(250px,1.35fr) minmax(150px,.7fr) minmax(150px,.7fr);
  gap: 13px;
  align-items: end;
}
.assignment-form-grid .form-group { margin: 0; }
.assignment-notes-field { grid-column: 1 / 4; }
.assignment-submit { display: flex; justify-content: flex-end; align-items: end; }
@media (max-width: 980px) {
  .assignment-form-grid { grid-template-columns: 1fr 1fr; }
  .assignment-target-field,.assignment-notes-field { grid-column: auto; }
  .assignment-submit { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .assignment-form-grid { grid-template-columns: 1fr; }
}