:root {
  --ink: #192b35;
  --muted: #657680;
  --line: #dfe7e9;
  --surface: #ffffff;
  --canvas: #f4f7f7;
  --brand: #116466;
  --brand-soft: #e6f1f0;
  --positive: #2d7a56;
  --warning: #a26918;
  --attention: #a94742;
  --shadow: 0 10px 30px rgba(32, 59, 66, 0.06);
  --focus: rgba(17,100,102,.13);
}

* { box-sizing: border-box; }
html { font-size: 16px; min-height: 100%; }
body { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--ink); font-family: Inter, "Segoe UI", system-ui, sans-serif; }
a { color: var(--brand); }

.topbar {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--brand); color: white; font-weight: 750; }
.brand strong, .brand small { display: block; line-height: 1.2; }
.brand small { margin-top: 3px; color: var(--muted); font-size: .72rem; letter-spacing: .03em; }
.user-block { display: flex; align-items: center; gap: 18px; font-size: .88rem; }
.user-block a { color: var(--muted); text-decoration: none; }

.app-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: calc(100vh - 72px); }
.sidebar { padding: 24px 16px; background: #edf2f2; border-right: 1px solid var(--line); }
.sidebar nav { position: sticky; top: 24px; display: grid; gap: 4px; }
.sidebar .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid transparent; border-radius: 10px; color: #3d515b; text-decoration: none; font-size: .89rem; font-weight: 560; }
.sidebar .nav-item:hover { border-color: rgba(17,100,102,.08); background: rgba(255,255,255,.78); color: var(--ink); }
.sidebar .nav-item.active { border-color: rgba(17,100,102,.12); background: var(--surface); color: var(--brand); box-shadow: 0 6px 18px rgba(32,59,66,.05); }
.nav-icon { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; background: rgba(255,255,255,.7); color: #6d7d84; font-size: .61rem; font-weight: 800; letter-spacing: .03em; }
.nav-item.active .nav-icon { background: var(--brand-soft); color: var(--brand); }
.nav-label { margin: 18px 11px 4px; color: #87969c; font-size: .65rem; font-weight: 750; text-transform: uppercase; letter-spacing: .13em; }
.nav-label:first-child { margin-top: 4px; }
.school-context { display: grid; gap: 3px; margin-bottom: 15px; padding: 0 10px 15px; border-bottom: 1px solid rgba(101,118,128,.16); }
.school-context-code { color: var(--brand); font-size: .72rem; font-weight: 800; letter-spacing: .09em; }
.school-context-name { color: #566871; font-size: .73rem; line-height: 1.35; }
.content { width: 100%; max-width: 1460px; padding: 44px clamp(24px, 5vw, 72px) 80px; }
.standalone { margin: 0 auto; }

.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 30px; }
.page-heading h1 { margin: 3px 0 7px; font-size: clamp(1.75rem, 3vw, 2.45rem); font-weight: 690; letter-spacing: -.035em; }
.page-heading p:not(.eyebrow) { max-width: 680px; margin: 0; color: var(--muted); }
.eyebrow { margin: 0; color: var(--brand); font-size: .72rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }

.school-switcher { min-width: 150px; }
label { display: block; margin-bottom: 6px; color: #50626b; font-size: .8rem; font-weight: 650; }
input, select, textarea { width: 100%; border: 1px solid #ccd8db; border-radius: 9px; padding: 10px 11px; background: white; color: var(--ink); }
input[type="checkbox"] { width: auto; accent-color: var(--brand); }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--focus); border-color: var(--brand); }

.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 12px; }
.metric { min-height: 116px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.metric span { display: block; min-height: 2.4em; color: var(--muted); font-size: .79rem; }
.metric strong { display: block; margin-top: 8px; font-size: 2rem; font-weight: 680; }
.metric-positive strong { color: var(--positive); }
.metric-warning strong { color: var(--warning); }
.metric-attention strong { color: var(--attention); }

.status-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; margin: 18px 0 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.status-strip div { display: flex; justify-content: space-between; gap: 12px; padding: 13px 16px; background: rgba(255,255,255,.76); }
.status-strip span { color: var(--muted); font-size: .78rem; }

.panel { margin-top: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 24px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin: 3px 0 0; font-size: 1.15rem; }
.panel-heading p.quiet { max-width: 700px; margin: 7px 0 0; line-height: 1.45; }
.refresh-status, .quiet { color: var(--muted); font-size: .8rem; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 11px 18px; background: #f8fafa; color: #6d7d84; font-size: .71rem; text-align: left; text-transform: uppercase; letter-spacing: .065em; }
td { padding: 14px 18px; border-top: 1px solid #edf1f2; vertical-align: top; font-size: .88rem; }
.audit-activity-panel { overflow: hidden; }
.audit-table { min-width: 1120px; table-layout: fixed; }
.audit-table th { padding: 13px 16px; background: #edf4f8; color: #456276; }
.audit-table td { padding: 17px 16px; line-height: 1.38; }
.audit-table th:nth-child(1), .audit-table td:nth-child(1) { width: 11%; }
.audit-table th:nth-child(2), .audit-table td:nth-child(2) { width: 18%; }
.audit-table th:nth-child(3), .audit-table td:nth-child(3) { width: 13%; }
.audit-table th:nth-child(4), .audit-table td:nth-child(4) { width: 23%; }
.audit-table th:nth-child(5), .audit-table td:nth-child(5) { width: 10%; }
.audit-table th:nth-child(6), .audit-table td:nth-child(6) { width: 25%; }
.audit-table tbody tr:hover { background: #fbfdff; }
.audit-when { color: #284b67; font-weight: 700; white-space: normal; }
.audit-person strong, .audit-affected strong { display: block; color: #183955; font-size: .93rem; }
.audit-action { color: #315b79; font-weight: 720; overflow-wrap: anywhere; }
.audit-identifier { margin-top: 4px; color: #5a7080; font-size: .72rem; overflow-wrap: anywhere; }
.audit-identifier code, .audit-technical-details code { color: #395d76; font-size: .71rem; white-space: normal; overflow-wrap: anywhere; }
.audit-change-summary { color: #496578; }
.audit-reason { margin: 0 0 8px; color: #2c506a; font-weight: 650; line-height: 1.42; }
.audit-changes { display: grid; gap: 5px; margin: 0; }
.audit-changes div { display: grid; grid-template-columns: minmax(82px, .7fr) minmax(0, 1.3fr); gap: 7px; }
.audit-changes dt { color: #6c7f8d; font-size: .72rem; font-weight: 750; }
.audit-changes dd { margin: 0; color: #506a7c; overflow-wrap: anywhere; }
.audit-changes dd strong { color: #1f4b67; font-weight: 740; }
.audit-technical-details { margin-top: 10px; color: #617887; font-size: .73rem; }
.audit-technical-details summary { width: max-content; cursor: pointer; color: #176da4; font-weight: 720; }
.audit-technical-details dl { display: grid; gap: 4px; margin: 8px 0 0; }
.audit-technical-details dl div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 6px; }
.audit-technical-details dt { color: #758895; }
.audit-technical-details dd { margin: 0; overflow-wrap: anywhere; }
.status-pill { display: inline-block; padding: 4px 8px; border-radius: 99px; background: #f1f4f4; color: #52636a; font-size: .72rem; white-space: nowrap; }
.status-positive { background: #e8f4ed; color: var(--positive); }
.tabular { font-variant-numeric: tabular-nums; }
.employee-link { color: var(--ink); font-weight: 700; text-decoration: none; }
.employee-link:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

.notice { margin-bottom: 22px; padding: 12px 15px; border-radius: 10px; transition: opacity .5s; }
.notice-success { background: #e8f4ed; color: #235f43; }
.notice-error { background: #f9e9e7; color: #8d3733; }
.notice-fade { opacity: .45; }
.empty-state { max-width: 650px; padding: 38px; border: 1px dashed #c6d3d6; border-radius: 16px; background: rgba(255,255,255,.65); }
.empty-state h2 { font-size: 1.2rem; }

.button, button { display: inline-flex; align-items: center; justify-content: center; width: auto; border: 0; border-radius: 9px; padding: 10px 14px; background: var(--brand); color: white; font-size: .84rem; font-weight: 650; text-decoration: none; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.button:hover, button:hover { color: white; transform: translateY(-1px); box-shadow: 0 5px 14px rgba(17,100,102,.13); }
.button-secondary { background: #e8eeee; color: #334b54; }
.button-secondary:hover { color: #223c45; background: #dfe8e8; }
.button-danger { background: #9f4540; }
.button-small { padding: 7px 10px; font-size: .75rem; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.compact-select { display: inline-block; width: auto; min-width: 132px; padding: 7px 8px; font-size: .75rem; }

.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
details.form-drawer { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.72); }
details.form-drawer > summary { padding: 15px 18px; color: var(--brand); font-weight: 650; cursor: pointer; }
details.form-drawer > form, details.form-drawer > div { padding: 4px 18px 20px; }
.field-note { margin-top: 5px; color: var(--muted); font-size: .72rem; }
.compact-drawer { max-width: 360px; }
.embedded-drawer { margin: 0; border-width: 1px 0 0 !important; border-radius: 0 !important; background: #fbfcfc !important; }

.two-column { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr); gap: 22px; align-items: start; }
.stack { display: grid; gap: 18px; }
.subtle-card { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.7); }
.subtle-card h3 { margin: 0 0 8px; font-size: 1rem; }
.inline-form { display: inline-flex; align-items: center; gap: 7px; }
.inline-form input, .inline-form select { width: auto; min-width: 105px; padding: 7px 8px; }
.checkbox-label { display: flex; align-items: center; gap: 7px; }

.table-tools { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(160px, 210px) minmax(160px, 210px); gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: #fbfcfc; }
.table-tools label { margin-bottom: 5px; }
.employee-result-count { color: var(--muted); font-size: .78rem; }
.employee-result-count strong { color: var(--ink); font-size: .95rem; }
.employee-setup-form { flex-wrap: wrap; }
.employee-setup-form .employee-number-verification { flex-basis: 100%; margin: 2px 0; }
.employee-number-verification { color: #284a63; font-weight: 700; }
.employee-number-verification input[type="checkbox"] { width: 18px; min-width: 18px; height: 18px; flex: 0 0 18px; }
.employee-number-correction { max-width: 980px; }
.punch-cycle-reset { max-width: 980px; }
.notice-panel { max-width: 980px; margin: 18px 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; }
.notice-panel strong { display: block; margin-bottom: 4px; }
.notice-panel p { margin: 0; line-height: 1.5; }
.notice-panel-warning { border-color: #e6c88e; background: #fff7e8; color: #714a0d; }
.setup-panel { border-color: #d5e3e1; }

.schedule-layout { grid-template-columns: minmax(0, 1.5fr) minmax(360px, .85fr); }
.schedule-card { margin-top: 0; }
.schedule-name-field { max-width: 420px; margin-bottom: 16px; }
.weekday-grid { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 10px; margin: 12px 0 16px; }
.weekday-card { padding: 13px; }
.weekday-card label:not(:first-child) { margin-top: 9px; }
.calendar-actions { flex-wrap: nowrap; }
.is-disabled { opacity: .48; }

.settings-form { padding: 22px 24px 25px; }
.settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.input-suffix { display: flex; align-items: stretch; }
.input-suffix input { border-radius: 9px 0 0 9px; }
.input-suffix span { display: flex; align-items: center; padding: 0 11px; border: 1px solid #ccd8db; border-left: 0; border-radius: 0 9px 9px 0; background: #f5f8f8; color: var(--muted); font-size: .75rem; }
.settings-note { margin-top: 18px; padding: 12px 14px; border-left: 3px solid var(--brand); border-radius: 0 8px 8px 0; background: var(--brand-soft); color: #39585e; font-size: .8rem; }
.notification-list { display: grid; }
.notification-rule { border-top: 1px solid var(--line); background: white; }
.notification-rule:first-child { border-top: 0; }
.notification-rule > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 24px; cursor: pointer; list-style-position: inside; }
.notification-rule > summary strong, .notification-rule > summary small { display: block; }
.notification-rule > summary strong { margin-bottom: 4px; color: var(--ink); font-size: .9rem; }
.notification-rule > summary small { max-width: 760px; color: var(--muted); font-size: .75rem; font-weight: 400; line-height: 1.4; }
.notification-rule > form { padding: 4px 24px 24px; }
.notification-toggles { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-bottom: 16px; padding: 12px 14px; border-radius: 9px; background: #f7f9f9; }

.back-link { margin: -12px 0 20px; font-size: .82rem; }
.back-link a { color: var(--muted); text-decoration: none; }
.heading-actions { display: flex; gap: 10px; }
.profile-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--line); box-shadow: var(--shadow); }
.profile-summary > div { min-height: 112px; padding: 18px; background: var(--surface); }
.profile-summary span, .profile-summary small { display: block; color: var(--muted); }
.profile-summary span { margin-bottom: 9px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.profile-summary strong { display: block; font-size: 1rem; }
.profile-summary small { margin-top: 6px; font-size: .72rem; line-height: 1.35; }
.employee-history-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); margin-top: 0; }
.latest-punches-table { table-layout: fixed; }
.latest-punches-table th, .latest-punches-table td { padding-inline: 14px; }
.latest-punches-table th:nth-child(1), .latest-punches-table td:nth-child(1) { width: 30%; }
.latest-punches-table th:nth-child(2), .latest-punches-table td:nth-child(2) { width: 18%; }
.latest-punches-table th:nth-child(3), .latest-punches-table td:nth-child(3) { width: 21%; }
.latest-punches-table th:nth-child(4), .latest-punches-table td:nth-child(4) { width: 31%; }
.latest-punches-table .status-pill { max-width: 100%; white-space: normal; text-align: center; }
.report-filters { display: grid; grid-template-columns: minmax(240px, 1fr) 180px 180px auto; gap: 12px; align-items: end; }

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .status-strip { grid-template-columns: repeat(3, 1fr); }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-column { grid-template-columns: 1fr; }
  .weekday-grid { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
  .profile-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .topbar { height: 64px; padding: 0 18px; }
  .user-block span { display: none; }
  .app-shell { display: block; }
  .sidebar { overflow-x: auto; padding: 9px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar nav { position: static; display: flex; width: max-content; }
  .sidebar .nav-item { white-space: nowrap; }
  .school-context { display: none; }
  .nav-icon { display: none; }
  .nav-label { display: none; }
  .content { padding: 30px 18px 60px; }
  .page-heading { align-items: start; flex-direction: column; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .status-strip { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .table-tools { grid-template-columns: 1fr; }
  .weekday-grid { grid-template-columns: 1fr 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .profile-summary { grid-template-columns: 1fr 1fr; }
  .report-filters { grid-template-columns: 1fr; }
  .heading-actions { width: 100%; }
  .heading-actions .button { width: 100%; }
}
@media (max-width: 460px) {
  .metric-grid, .status-strip, .weekday-grid, .profile-summary { grid-template-columns: 1fr; }
}

/* Professional portal visual system */
:root {
  --ink: #13283d;
  --muted: #607387;
  --line: #d7e2ed;
  --surface: #ffffff;
  --canvas: #f2f6fb;
  --brand: #0874b9;
  --brand-deep: #082b52;
  --brand-soft: #e7f3fb;
  --teal: #087f83;
  --positive: #17724d;
  --warning: #a85f0b;
  --attention: #b33f3b;
  --shadow: 0 12px 34px rgba(15, 45, 76, .08);
  --focus: rgba(8, 116, 185, .16);
}

body {
  background:
    radial-gradient(circle at 96% 4%, rgba(24, 133, 184, .07), transparent 24rem),
    var(--canvas);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 80px;
  padding: 0 28px;
  border: 0;
  background: linear-gradient(112deg, #071f3d 0%, #0a3159 68%, #0b4866 100%);
  box-shadow: 0 7px 22px rgba(4, 28, 53, .18);
}

.brand { color: #fff; gap: 13px; }
.brand:hover { color: #fff; }
.brand-mark {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 13px;
  background: linear-gradient(145deg, #1591cb, #0b718b);
  box-shadow: inset 0 1px rgba(255,255,255,.25), 0 6px 18px rgba(0,0,0,.18);
}
.brand-mark svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brand strong { font-size: 1rem; letter-spacing: .01em; }
.brand small { color: #bcd3e7; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.topbar-tools { display: flex; align-items: center; gap: 22px; }
.global-school-switcher { display: flex; align-items: center; gap: 9px; }
.global-school-switcher label { margin: 0; color: #b8cee1; font-size: .67rem; letter-spacing: .08em; text-transform: uppercase; }
.global-school-switcher select { width: min(350px, 32vw); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff; font-size: .78rem; }
.global-school-switcher select:focus { border-color: rgba(255,255,255,.65); outline-color: rgba(255,255,255,.18); }
.global-school-switcher option { color: var(--ink); background: white; }
.user-block { gap: 10px; color: white; }
.user-block > span:last-child { display: grid; gap: 1px; }
.user-block strong { max-width: 180px; overflow: hidden; color: #fff; font-size: .76rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.user-block a { color: #bcd3e7; font-size: .7rem; }
.user-block a:hover { color: #fff; }
.user-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.15); color: white; font-weight: 750; }

.app-shell { grid-template-columns: 244px minmax(0, 1fr); min-height: calc(100vh - 80px); }
.sidebar {
  padding: 25px 15px;
  border-right: 0;
  background: linear-gradient(180deg, #0c3158 0%, #092744 100%);
  box-shadow: inset -1px 0 rgba(255,255,255,.06);
}
@media (min-width: 761px) {
  .sidebar {
    position: sticky;
    top: 80px;
    align-self: start;
    height: calc(100vh - 80px);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .sidebar nav { position: static; }
}
.school-context { margin: 0 8px 16px; padding: 0 4px 17px; border-color: rgba(255,255,255,.12); }
.school-context-code { color: #69d3dc; }
.school-context-name { color: #bdd0e2; }
.sidebar .nav-item { color: #c6d7e6; border-radius: 10px; }
.sidebar .nav-item:hover { border-color: rgba(255,255,255,.07); background: rgba(255,255,255,.07); color: #fff; }
.sidebar .nav-item.active { border-color: rgba(93,204,218,.22); background: linear-gradient(100deg, rgba(26,145,178,.34), rgba(255,255,255,.09)); color: #fff; box-shadow: inset 3px 0 #51c9d4, 0 8px 18px rgba(0,0,0,.1); }
.nav-icon { background: rgba(255,255,255,.07); color: #a9c1d5; }
.nav-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-icon svg path:first-child:last-child { fill: currentColor; stroke: none; }
.nav-item.active .nav-icon { background: rgba(255,255,255,.13); color: #7be1e7; }
.nav-label { color: #7895ad; }
.content { max-width: 1540px; padding-top: 40px; }

.page-heading h1 { color: #102b45; font-weight: 730; }
.eyebrow { color: var(--brand); }
.panel { border-color: #d4e0eb; border-radius: 16px; box-shadow: var(--shadow); }
.panel-heading { background: linear-gradient(180deg, #fff, #fbfdff); }
.metric { position: relative; overflow: hidden; border-color: #d4e0eb; box-shadow: var(--shadow); }
.metric::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: #7fa2bd; content: ""; }
.metric-positive::before { background: #2f9d71; }
.metric-warning::before { background: #e29b35; }
.metric-attention::before { background: #cf5b56; }
th { background: #f1f6fa; color: #5a7083; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: #f8fbfe; }
.button, button { background: linear-gradient(135deg, #0874b9, #08688f); box-shadow: 0 5px 14px rgba(8, 103, 151, .16); }
.button-secondary { background: #e8f0f6; color: #244b67; box-shadow: none; }
.button-secondary:hover { color: #163c59; background: #dbe9f3; }
.status-positive { background: #e1f3ea; }

.access-tools { grid-template-columns: minmax(260px, 1fr) minmax(220px, 300px); }
.cross-school-access { margin-bottom: 22px; }
.cross-school-access-form { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.45fr) minmax(185px, .72fr) auto; gap: 14px; align-items: end; }
.cross-school-access-form .form-field { display: grid; gap: 5px; min-width: 0; }
.cross-school-access-form .form-field label { margin: 0; }
.cross-school-access-action { padding-bottom: 1px; }
.recipient-fieldset { min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 11px; }
.recipient-fieldset legend { float: none; width: auto; margin: 0 0 2px; padding: 0; color: #39556b; font-size: .8rem; font-weight: 700; }
.recipient-checklist { display: grid; gap: 8px; margin-top: 12px; }
.recipient-checklist .checkbox-label { margin: 0; padding: 7px 9px; border-radius: 8px; background: #f5f8fb; font-weight: 560; }
.recipient-checklist small { display: block; margin-top: 2px; color: var(--muted); font-size: .68rem; font-weight: 400; }
.recipient-people { max-height: 190px; overflow-y: auto; padding-right: 3px; }
.notification-test-form { display: flex; align-items: center; gap: 10px; padding: 0 24px 24px; }
.clock-key-choice { display: flex; flex-direction: column; justify-content: center; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #f7fafc; }
.config-key { display: block; max-width: 260px; margin-top: 5px; overflow: hidden; color: #4e687d; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }

.landing-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); gap: clamp(40px, 7vw, 100px); align-items: center; min-height: calc(100vh - 190px); padding: 30px 2vw 60px; }
.landing-copy h1 { max-width: 720px; margin: 14px 0 20px; color: #092c50; font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 780; line-height: 1.02; letter-spacing: -.055em; }
.landing-copy h1 span { color: var(--brand); }
.landing-lead { max-width: 620px; margin-bottom: 28px; color: #536b80; font-size: 1.08rem; line-height: 1.7; }
.microsoft-button { gap: 11px; padding: 13px 18px; font-size: .9rem; }
.microsoft-button svg { width: 19px; height: 19px; }
.landing-security { margin-top: 12px; color: var(--muted); font-size: .72rem; }
.landing-preview { overflow: hidden; border: 1px solid #cbdbe8; border-radius: 22px; background: white; box-shadow: 0 28px 80px rgba(16, 53, 86, .16); transform: rotate(.4deg); }
.preview-header { display: flex; justify-content: space-between; padding: 20px 22px; background: linear-gradient(120deg, #0b3158, #0a6379); color: white; font-size: .85rem; font-weight: 700; }
.live-dot { color: #9ef1d0; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.preview-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.preview-metrics div { display: grid; gap: 3px; padding: 21px; background: #f9fbfd; }
.preview-metrics strong { color: #123855; font-size: 1.65rem; }
.preview-metrics span { color: var(--muted); font-size: .72rem; }
.preview-line { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 18px 22px; border-top: 1px solid #e8eef4; }
.preview-line strong, .preview-line small { display: block; }
.preview-line strong { font-size: .82rem; }
.preview-line small { margin-top: 3px; color: var(--muted); font-size: .69rem; }
.preview-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #dff2eb; color: #17724d; font-size: .68rem; font-weight: 800; }
.preview-avatar.blue { background: #e1eefb; color: #1765a0; }

@media (max-width: 980px) {
  .global-school-switcher label { display: none; }
  .global-school-switcher select { width: min(290px, 38vw); }
  .landing-hero { grid-template-columns: 1fr; min-height: auto; }
  .landing-preview { max-width: 660px; transform: none; }
}

@media (max-width: 760px) {
  .topbar { height: auto; min-height: 68px; padding: 10px 16px; }
  .topbar-tools { gap: 9px; }
  .global-school-switcher select { width: min(200px, 42vw); padding: 8px; }
  .user-block > span:last-child { display: none; }
  .user-avatar { display: grid !important; }
  .app-shell { min-height: calc(100vh - 68px); }
  .sidebar { background: #0b2d50; }
  .access-tools { grid-template-columns: 1fr; }
  .notification-test-form { align-items: flex-start; flex-direction: column; }
  .landing-hero { padding: 15px 0 40px; }
  .landing-copy h1 { font-size: clamp(2.45rem, 13vw, 4rem); }
}

@media (max-width: 520px) {
  .brand small { display: none; }
  .brand strong { font-size: .88rem; }
  .brand-mark { width: 36px; height: 36px; }
  .global-school-switcher select { width: 145px; }
  .preview-metrics { grid-template-columns: 1fr; }
}

/* Operations and administration refinement */
.brand-school-marks {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.brand-school-marks img { width: 48px; height: 27px; object-fit: contain; }
.landing-school-logos { display: flex; align-items: center; gap: 22px; max-width: 670px; margin-bottom: 34px; }
.landing-school-logos img { width: 30%; max-height: 68px; object-fit: contain; }
.global-school-switcher {
  padding: 6px 8px 6px 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}
.global-school-switcher select { min-height: 38px; border-radius: 8px; font-weight: 650; }

th { font-weight: 800; letter-spacing: .075em; }
td { color: #20394f; }
.status-negative { background: #fae9e8; color: var(--attention); }
.role-pill { padding: 6px 10px; border: 1px solid #c9ddea; background: #e9f3fa; color: #155b87; font-size: .76rem; font-weight: 700; }
.checkbox-label { min-height: 32px; font-size: .82rem; }
.checkbox-label input[type="checkbox"], input[data-review-checkbox], input[data-select-all-reviews] { width: 18px; height: 18px; flex: 0 0 18px; }

.metric-card {
  display: grid;
  align-content: start;
  min-height: 132px;
  padding: 19px 20px;
  border: 1px solid #d4e0eb;
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--shadow);
}
.metric-card > span:first-child { color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .055em; }
.metric-card > strong { margin: 8px 0 5px; color: #123855; font-size: 2rem; line-height: 1; }
.metric-card > strong small { color: var(--muted); font-size: .8rem; font-weight: 600; }
.metric-card > a { align-self: end; margin-top: 12px; font-size: .76rem; font-weight: 700; text-decoration: none; }
.admin-metric-grid, .compact-metrics { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
.audit-diagnostic-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.audit-diagnostic-grid .metric-card > strong { font-size: 1.1rem; line-height: 1.25; overflow-wrap: anywhere; }
.admin-destination-grid { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 13px; margin: 22px 0; }
.admin-destination { display: grid; grid-template-columns: auto 1fr; gap: 2px 11px; align-items: center; padding: 17px; border: 1px solid #d4e0eb; border-radius: 14px; background: linear-gradient(145deg, #fff, #f7fbfe); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); }
.admin-destination:hover { border-color: #9fc7df; color: var(--brand); transform: translateY(-1px); }
.admin-destination .destination-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 37px; height: 37px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font-size: .65rem; font-weight: 850; letter-spacing: .04em; }
.admin-destination strong { font-size: .88rem; }
.admin-destination small { color: var(--muted); font-size: .68rem; line-height: 1.35; }
.balanced-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.balanced-columns > .panel { margin-top: 0; }

.status-banner { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin: 0 0 22px; padding: 17px 20px; border: 1px solid #bdd9e9; border-radius: 14px; background: linear-gradient(105deg, #eaf5fb, #f7fbfd); color: #244d68; }
.status-banner > div { display: grid; gap: 3px; }
.status-banner > div:last-child { min-width: 235px; text-align: right; }
.status-banner span { color: var(--muted); font-size: .76rem; }
.subtle-status-banner { margin-top: 18px; }
.page-filter { min-width: 280px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: var(--shadow); }
.page-filter label { margin-bottom: 4px; }
.compact-form-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); max-width: 980px; }
.compact-form { display: grid; gap: 14px; padding: 22px 24px 25px; }
.plain-check-list { display: grid; gap: 13px; margin: 0; padding: 22px 28px 25px 45px; color: #365267; font-size: .86rem; line-height: 1.5; }

.clock-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 22px 0; }
.clock-card { margin-top: 0; padding: 21px; }
.clock-card-header { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.clock-card-header h2 { margin: 4px 0 3px; font-size: 1.22rem; }
.clock-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 18px -21px; border-block: 1px solid var(--line); background: var(--line); }
.clock-facts > div { min-height: 88px; padding: 14px 20px; background: #f9fbfd; }
.clock-facts dt { margin-bottom: 5px; color: var(--muted); font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.clock-facts dd { margin: 0; color: #173b57; font-size: .84rem; font-weight: 700; }
.clock-facts small { display: block; margin-top: 4px; color: var(--muted); font-size: .68rem; }
.inline-alert { display: grid; gap: 3px; margin-bottom: 15px; padding: 11px 13px; border-left: 3px solid var(--attention); background: #fff4f3; color: #743c39; font-size: .75rem; }
.clock-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.inline-details { position: relative; }
.inline-details > summary { color: var(--brand); font-size: .76rem; font-weight: 700; cursor: pointer; }
.clock-edit-form { display: grid; grid-template-columns: repeat(2, minmax(145px, 1fr)); gap: 10px; width: min(620px, 75vw); margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f8fbfd; }
.clock-edit-form .checkbox-label, .clock-edit-form .field-note, .clock-edit-form .config-key, .clock-edit-form button { grid-column: 1 / -1; }

.filter-panel { padding: 18px 20px; }
.filter-grid { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(180px, 260px) 160px 160px auto; gap: 12px; align-items: end; }
.filter-actions { display: flex; gap: 8px; }
.pagination { display: flex; justify-content: center; gap: 16px; align-items: center; padding: 17px; border-top: 1px solid var(--line); font-size: .8rem; }
.pagination a { font-weight: 700; text-decoration: none; }

.notification-rule > summary { border-left: 4px solid transparent; }
.notification-rule > summary:hover { border-left-color: var(--brand); background: #f6fbfe; }
.notification-rule[open] > summary { border-left-color: var(--brand); background: #edf7fc; }
.notification-rule > summary::marker { color: var(--brand); }
.settings-form { max-width: 1120px; margin-inline: auto; }
.notification-rule > summary, .notification-rule > form { max-width: 1120px; margin-inline: auto; }
.notification-test-form { max-width: 1120px; margin-inline: auto; }

@media (max-width: 1180px) {
  .admin-destination-grid { grid-template-columns: repeat(3, 1fr); }
  .clock-card-grid { grid-template-columns: 1fr; }
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-actions { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .brand-school-marks img { width: 39px; }
  .admin-metric-grid, .compact-metrics { grid-template-columns: repeat(2, 1fr); }
  .admin-destination-grid { grid-template-columns: repeat(2, 1fr); }
  .balanced-columns { grid-template-columns: 1fr; }
  .status-banner { align-items: start; flex-direction: column; }
  .status-banner > div:last-child { min-width: 0; text-align: left; }
  .compact-form-grid { grid-template-columns: 1fr; }
  .cross-school-access-form { grid-template-columns: 1fr; }
  .cross-school-access-action { padding-bottom: 0; }
}

@media (max-width: 620px) {
  .brand-school-marks img:not(:first-child) { display: none; }
  .landing-school-logos { align-items: flex-start; flex-direction: column; gap: 13px; }
  .landing-school-logos img { width: auto; max-width: 245px; max-height: 52px; }
  .admin-destination-grid, .filter-grid { grid-template-columns: 1fr; }
  .clock-facts, .clock-edit-form { grid-template-columns: 1fr; }
  .clock-edit-form { width: 100%; }
}

/* Page-content readability and compact live operations */
.content .page-heading p:not(.eyebrow) { font-size: 1rem; line-height: 1.58; }
.content .panel-heading h2 { color: #173651; font-size: 1.24rem; font-weight: 730; letter-spacing: -.012em; }
.content .panel-heading p.quiet { font-size: .86rem; }
.content label { font-size: .86rem; font-weight: 700; }
.content input, .content select, .content textarea { font-size: .94rem; }
.content th { padding-block: 13px; color: #476278; font-size: .76rem; }
.content td { font-size: .93rem; line-height: 1.42; }
.content .quiet { font-size: .84rem; line-height: 1.45; }
.content .status-pill { font-size: .78rem; font-weight: 650; }
.panel-body { padding: 20px 24px 22px; }
.panel-body > :first-child { margin-top: 0; }
.panel-body > :last-child { margin-bottom: 0; }
.metric { color: var(--ink); text-decoration: none; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.metric:hover { border-color: #9fc7df; color: var(--ink); transform: translateY(-1px); box-shadow: 0 15px 38px rgba(15, 45, 76, .12); }
.employee-link { color: #075f99; font-weight: 720; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.status-warning { background: #fff0d8; color: #8a530d; }

/* Notification center: purposeful status, rules, and evidence without a long settings form. */
.notification-heading { margin-bottom: 17px; }
.notification-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, .95fr);
  gap: 24px;
  margin: 0 0 22px;
  padding: 24px 27px;
  border: 1px solid #bcd8e8;
  border-radius: 18px;
  background: linear-gradient(115deg, #0b3b63 0%, #0b5c71 100%);
  color: #fff;
  box-shadow: 0 15px 28px rgba(15, 50, 78, .12);
}
.notification-overview-main { display: flex; align-items: center; gap: 17px; }
.notification-overview-icon { display: grid; flex: 0 0 50px; width: 50px; height: 50px; place-items: center; border-radius: 15px; background: rgba(255,255,255,.16); color: #c1f6da; font-size: 1.65rem; font-weight: 800; }
.notification-overview .eyebrow { color: #bde9f4; }
.notification-overview h2 { margin: 2px 0 5px; color: #fff; font-size: 1.45rem; }
.notification-overview p { max-width: 650px; margin: 0; color: rgba(255,255,255,.84); font-size: .9rem; line-height: 1.48; }
.notification-overview-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 18px; align-content: center; margin: 0; }
.notification-overview-facts div { min-width: 0; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.notification-overview-facts dt { margin-bottom: 3px; color: #bde9f4; font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.notification-overview-facts dd { overflow-wrap: anywhere; margin: 0; color: #fff; font-size: .85rem; font-weight: 650; }
.compact-panel { margin-bottom: 22px; }
.email-control-panel .panel-heading { padding-bottom: 16px; }
.inline-control-form { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 24px; }
.prominent-checkbox { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-weight: 500; }
.prominent-checkbox input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--brand); }
.prominent-checkbox strong, .prominent-checkbox small { display: block; }
.prominent-checkbox strong { color: var(--ink); font-size: .92rem; }
.prominent-checkbox small { margin-top: 3px; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.notification-rules-panel { overflow: hidden; }
.notification-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.notification-rule-card { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.notification-rule-card:nth-child(2n) { border-right: 0; }
.notification-rule-card summary { display: grid; grid-template-columns: 35px minmax(0, 1fr) auto 18px; align-items: center; gap: 11px; min-height: 95px; padding: 16px 18px; cursor: pointer; list-style: none; }
.notification-rule-card summary::-webkit-details-marker { display: none; }
.notification-rule-card summary:hover { background: #f6faff; }
.notification-rule-card[open] { grid-column: span 2; border-right: 0; background: #fbfdff; }
.notification-rule-card[open] summary { min-height: auto; border-bottom: 1px solid var(--line); background: #f6faff; }
.notification-rule-mark { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 11px; background: #e5f3fb; color: #0870ac; font-weight: 800; }
.notification-rule-summary { min-width: 0; }
.notification-rule-summary strong, .notification-rule-summary small { display: block; }
.notification-rule-summary strong { color: #183650; font-size: .91rem; }
.notification-rule-summary small { margin-top: 3px; color: var(--muted); font-size: .73rem; line-height: 1.36; }
.details-arrow { color: #527189; font-size: 1rem; transition: transform .16s ease; }
.notification-rule-card[open] .details-arrow { transform: rotate(180deg); }
.notification-rule-body { padding: 19px 20px 20px; }
.notification-toggles { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid #d5e6f0; border-radius: 12px; background: #f6fbfe; }
.notification-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.notification-form-grid .full-span { grid-column: 1 / -1; margin: 0; }
.recipient-role-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.notification-test-form { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 13px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.notification-history-panel { margin-top: 22px; overflow: hidden; }
.delivery-filter-form { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .8rem; }
.delivery-filter-form select { min-width: 132px; padding: 7px 28px 7px 9px; font-size: .8rem; }
.delivery-table th { white-space: nowrap; }
.delivery-table td { vertical-align: top; }
.delivery-error { max-width: 280px; margin-top: 6px; color: var(--attention); font-size: .72rem; line-height: 1.35; overflow-wrap: anywhere; }
.empty-state { display: grid; gap: 4px; padding: 35px 24px; color: var(--muted); text-align: center; }
.empty-state strong { color: #25455f; font-size: .96rem; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 17px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }

@media (max-width: 980px) {
  .notification-overview { grid-template-columns: 1fr; }
  .notification-rule-grid { grid-template-columns: 1fr; }
  .notification-rule-card, .notification-rule-card:nth-child(2n) { border-right: 0; }
  .notification-rule-card[open] { grid-column: auto; }
  .recipient-role-list { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .notification-overview { padding: 21px; }
  .notification-overview-main { align-items: flex-start; }
  .notification-overview-facts { grid-template-columns: 1fr; }
  .inline-control-form { align-items: stretch; flex-direction: column; }
  .inline-control-form button { align-self: flex-start; }
  .notification-form-grid { grid-template-columns: 1fr; }
  .notification-rule-card summary { grid-template-columns: 35px minmax(0, 1fr) 18px; }
  .notification-rule-card summary .status-pill { grid-column: 2; justify-self: start; }
  .notification-rule-card summary .details-arrow { grid-column: 3; grid-row: 1; }
  .delivery-filter-form { align-items: flex-start; flex-direction: column; }
  .pagination { align-items: stretch; flex-direction: column; }
}
.compact-inline-filter { display: flex; align-items: center; gap: 9px; min-width: 155px; }
.compact-inline-filter label { margin: 0; }
.compact-inline-filter select { width: auto; min-width: 112px; }
.compact-history-filter { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(130px, .75fr) auto; gap: 11px; align-items: end; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #f8fbfd; }
.compact-history-filter .filter-actions { padding-bottom: 1px; }
.preview-label { color: #bce9f1; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }

/* Employee self-service history stays compact as a school year grows. */
.my-time-layout { align-items: start; }
.my-time-sections { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 20px; }
.my-time-sections a { padding: 8px 12px; border: 1px solid #c8dce9; border-radius: 999px; background: rgba(255,255,255,.76); color: #285773; font-size: .78rem; font-weight: 720; text-decoration: none; }
.my-time-sections a:hover { border-color: #78aeca; background: #f3f9fd; color: #0b5d95; }
.employee-overview { display: grid; grid-template-columns: minmax(180px, .78fr) minmax(0, 2.22fr); gap: 0; margin-bottom: 22px; overflow: hidden; border: 1px solid #c9dce9; border-radius: 16px; background: linear-gradient(105deg, #0b3b63, #0b6679); box-shadow: 0 13px 30px rgba(16, 56, 87, .12); color: #fff; }
.employee-overview-heading { display: grid; align-content: center; gap: 4px; padding: 20px 23px; }
.employee-overview-heading .eyebrow { color: #bceaf2; }
.employee-overview-heading h2 { margin: 0; color: #fff; font-size: 1.2rem; }
.employee-overview-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: rgba(255,255,255,.13); }
.employee-overview-metrics > div { display: grid; align-content: center; min-height: 104px; padding: 18px 21px; border-left: 1px solid rgba(255,255,255,.21); }
.employee-overview-metrics span { color: #cceaf1; font-size: .72rem; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; }
.employee-overview-metrics strong { margin-top: 5px; color: #fff; font-size: 1.25rem; line-height: 1.12; overflow-wrap: anywhere; }
.employee-overview-metrics small { margin-top: 5px; color: rgba(255,255,255,.78); font-size: .75rem; line-height: 1.35; }
.my-time-layout [id], .employee-overview { scroll-margin-top: 100px; }
.history-filter { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) minmax(125px, .75fr) auto; gap: 11px; align-items: end; padding: 14px 18px; border-block: 1px solid var(--line); background: #f8fbfd; }
.history-filter label { margin-bottom: 4px; }
.history-filter .filter-actions { padding-bottom: 1px; }
.history-filter .filter-actions a { white-space: nowrap; }
.my-time-layout .form-drawer > form { display: grid; gap: 13px; }
.my-time-layout .form-drawer .form-field { display: grid; gap: 5px; }
.my-time-layout .form-drawer label { margin: 0; }
.my-time-layout .form-drawer .field-note { margin: -5px 0 0; }
.my-time-layout .form-drawer button { justify-self: start; margin-top: 2px; }
.table-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 15px 18px; border-top: 1px solid var(--line); color: #486277; font-size: .82rem; font-weight: 650; }
.timeoff-approver-list { max-width: 700px; }

/* Landscape tablets retain the rail but give self-service history its full width. */
@media (max-width: 1320px) {
  .my-time-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .employee-overview { grid-template-columns: 1fr; }
  .employee-overview-heading { padding-bottom: 16px; }
  .employee-overview-metrics > div:first-child { border-left: 0; }
}

@media (max-width: 760px) {
  .compact-inline-filter { align-items: flex-start; flex-direction: column; }
  .compact-history-filter { grid-template-columns: 1fr; }
  .history-filter { grid-template-columns: 1fr; }
  .history-filter .filter-actions { padding-bottom: 0; }
  .table-pagination { justify-content: space-between; gap: 8px; }
  .my-time-sections { flex-wrap: nowrap; margin-bottom: 16px; padding-bottom: 2px; overflow-x: auto; }
  .my-time-sections a { flex: 0 0 auto; }
  .employee-overview-metrics { grid-template-columns: 1fr; }
  .employee-overview-metrics > div { min-height: auto; border-top: 1px solid rgba(255,255,255,.21); border-left: 0; }
}