:root {
  --navy: #0d1b38;
  --navy-soft: #152747;
  --mint: #3abd9d;
  --mint-dark: #169276;
  --teal: #165d64;
  --green-light: #e7f8f3;
  --ink: #172332;
  --muted: #6c7886;
  --line: #dfe6e9;
  --surface: #ffffff;
  --background: #f3f7f6;
  --warning: #bb7623;
  --warning-bg: #fff5e8;
  --danger: #a34b4b;
  --shadow: 0 14px 35px rgba(13, 27, 56, 0.08);
  --radius: 18px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--background);
  color: var(--ink);
  font-family: Roboto, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
button { color: inherit; }

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(58, 189, 157, 0.28);
  outline-offset: 2px;
}

.app-shell { min-height: 100vh; }

.login-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  background:
    radial-gradient(circle at 15% 15%, rgba(58, 189, 157, .22), transparent 28%),
    radial-gradient(circle at 88% 85%, rgba(22, 93, 100, .24), transparent 31%),
    var(--navy);
  padding: 28px;
}

.login-panel {
  width: min(100%, 610px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(0,0,0,.25);
  padding: 42px;
}

.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; }
.login-brand img { width: 130px; height: auto; }
.login-brand > span { border-left: 1px solid var(--line); color: var(--teal); font-size: 12px; font-weight: 700; padding-left: 14px; }
.login-panel h1 { margin: 9px 0 10px; color: var(--navy); font-family: "Roboto Slab", Georgia, serif; font-size: clamp(28px, 5vw, 38px); letter-spacing: -.025em; }
.login-panel > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.demo-employee-picker { margin-top: 22px; border-radius: 14px; background: #f4f8f7; padding: 14px; }
.demo-employee-picker label, .demo-employee-picker small { display: block; }
.demo-employee-picker label { color: var(--navy); font-size: 11px; font-weight: 800; }
.demo-employee-picker small { margin-top: 7px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.login-account-picker { position: relative; margin-top: 7px; }
.account-picker-trigger { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); cursor: pointer; font: inherit; padding: 0 36px 0 11px; text-align: left; }
.account-picker-trigger::after { position: absolute; top: 50%; right: 13px; content: "⌄"; color: var(--teal); font-size: 15px; transform: translateY(-55%); }
.account-picker-trigger[aria-expanded="true"] { border-color: var(--mint-dark); box-shadow: 0 0 0 3px rgba(58,189,157,.13); }
.account-choice-panel { position: absolute; z-index: 60; top: calc(100% + 6px); right: 0; left: 0; display: grid; max-height: 245px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 18px 42px rgba(13,27,56,.18); padding: 6px; }
.account-choice-panel[hidden] { display: none; }
.account-choice-panel button { border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; padding: 10px; text-align: left; }
.account-choice-panel button strong, .account-choice-panel button small { display: block; }
.account-choice-panel button strong { color: var(--navy); font-size: 11px; }
.account-choice-panel button small { margin-top: 3px; font-size: 9px; }
.account-choice-panel button:hover, .account-choice-panel button.is-active { background: var(--green-light); }
.login-options { display: grid; gap: 12px; margin: 16px 0 20px; }
.login-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  padding: 16px;
  text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.login-option:hover { border-color: var(--mint); box-shadow: 0 10px 30px rgba(13,27,56,.09); transform: translateY(-2px); }
.login-option strong, .login-option small { display: block; }
.login-option strong { color: var(--navy); font-size: 15px; }
.login-option small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.login-avatar { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 800; }
.login-avatar.employee { background: var(--mint); color: var(--navy); }
.login-arrow { color: var(--mint-dark); font-size: 22px; }
.login-panel .login-note { border-radius: 12px; background: var(--green-light); color: var(--teal); font-size: 11px; padding: 12px 14px; }
.login-panel .login-note[hidden] { display: none; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 10;
  display: flex;
  width: 250px;
  flex-direction: column;
  background:
    radial-gradient(circle at 0 0, rgba(58, 189, 157, 0.19), transparent 34%),
    var(--navy);
  color: #fff;
  padding: 28px 20px 22px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #fff;
  text-decoration: none;
}

.brand img {
  width: 112px;
  height: auto;
  object-fit: contain;
}

.brand span {
  max-width: 72px;
  color: #b9c7d3;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.25;
}

.nav-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  margin-top: 46px;
}

.nav-item {
  position: relative;
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #afbdca;
  cursor: pointer;
  padding: 0 14px;
  text-align: left;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; transform: translateX(2px); }
.nav-item.is-active { background: rgba(58, 189, 157, .15); color: #fff; }

.nav-marker {
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 3px;
  transform: rotate(45deg);
}

.nav-item.is-active .nav-marker { border-color: var(--mint); background: var(--mint); }
.nav-count { margin-left: auto; border-radius: 999px; background: var(--mint); color: var(--navy); font-size: 11px; font-weight: 800; padding: 2px 7px; }
.nav-count-group { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-count-group[hidden] { display: none; }
.nav-count-group .nav-count { margin-left: 0; }
.nav-count.is-blocked { background: var(--warning); }
.nav-count.is-ready { background: var(--mint); }
.nav-count.is-backoffice { background: var(--warning); }
.nav-count.is-employee { background: var(--mint); }

.sidebar-footer { display: grid; gap: 16px; }
.workspace-user { display: flex; align-items: center; gap: 10px; }
.workspace-user .avatar { display: grid; width: 36px; height: 36px; place-items: center; overflow: hidden; border-radius: 10px; background: var(--mint); color: var(--navy); font-size: 12px; font-weight: 800; background-position: center; background-size: cover; }
.workspace-user strong, .workspace-user small { display: block; }
.workspace-user strong { font-size: 13px; }
.workspace-user small { margin-top: 2px; color: #91a4b6; font-size: 11px; }
.demo-badge { width: fit-content; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: #9eb0c1; font-size: 10px; letter-spacing: .07em; padding: 5px 9px; text-transform: uppercase; }
.topbar-context { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.environment-badge { display: inline-flex; width: fit-content; align-items: center; border: 1px solid #e6b66a; border-radius: 999px; background: #fff4df; color: #8b5200; font-size: 9px; font-weight: 900; letter-spacing: .08em; padding: 5px 9px; text-transform: uppercase; }
.environment-badge.is-local { border-color: #8fd9c7; background: var(--green-light); color: var(--mint-dark); }
.switch-role { width: fit-content; border: 0; border-bottom: 1px solid rgba(255,255,255,.23); background: transparent; color: #b9c7d3; cursor: pointer; font-size: 11px; padding: 0 0 3px; }
.switch-role:hover { color: #fff; }

.main-content {
  min-height: 100vh;
  margin-left: 250px;
  padding: 0 34px 60px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: rgba(243, 247, 246, .91);
  border-bottom: 1px solid rgba(213, 224, 225, .8);
  backdrop-filter: blur(12px);
}

.topbar h1 { margin: 2px 0 0; font-family: "Roboto Slab", Georgia, serif; font-size: clamp(24px, 3vw, 31px); letter-spacing: 0; }
.mobile-topbar-home { display: none; }
.eyebrow, .section-label { margin: 0; color: var(--mint-dark); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.safety-badge { border: 1px solid #edcfa9; border-radius: 999px; background: var(--warning-bg); color: var(--warning); font-size: 9px; font-weight: 800; letter-spacing: .04em; padding: 7px 10px; text-transform: uppercase; white-space: nowrap; }
.topbar-quick-reset { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 7px 12px; text-transform: uppercase; }
.topbar-quick-reset:hover { border-color: var(--mint); color: var(--mint-dark); }

.period-control { display: flex; min-height: 48px; align-items: center; gap: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 5px 18px rgba(13,27,56,.04); padding: 0 4px; }
.period-control button { width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font-size: 22px; line-height: 1; }
.period-control button:hover { background: var(--green-light); }
.period-picker-wrap { display: grid; min-width: 184px; gap: 1px; padding: 4px 3px; }
.period-picker-caption { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.period-picker-fields { display: grid; grid-template-columns: minmax(96px,1fr) 72px; gap: 4px; align-items: center; }
.period-picker-fields input { width: 100%; height: 26px; border: 0; outline: 0; background: transparent; color: var(--navy); cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
.period-picker-fields input { cursor: text; }
.period-picker-fields input:focus-visible, .month-picker-trigger:focus-visible, .month-choice-panel button:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--mint); }
.month-picker { position: relative; display: block; min-width: 0; }
.period-control .month-picker-trigger, .customer-timesheet-upload-grid .month-picker-trigger { display: flex; width: 100%; min-height: 26px; align-items: center; justify-content: space-between; gap: 8px; border: 0; border-radius: 7px; background: transparent; color: var(--navy); padding: 3px 6px; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; text-align: left; }
.month-picker-trigger::after { color: var(--muted); content: "▾"; font-size: 10px; }
.period-control .month-picker-trigger:hover, .customer-timesheet-upload-grid .month-picker-trigger:hover { background: var(--green-light); }
.month-choice-panel { position: absolute; z-index: 80; top: calc(100% + 7px); left: 0; display: grid; width: 292px; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 18px 42px rgba(13,27,56,.18); padding: 10px; }
.month-choice-panel[hidden] { display: none; }
.period-control .month-choice-panel button, .customer-timesheet-upload-grid .month-choice-panel button { width: auto; height: auto; min-height: 34px; border: 1px solid transparent; border-radius: 8px; background: var(--surface-muted); color: var(--ink); padding: 7px 8px; cursor: pointer; font: inherit; font-size: 10px; font-weight: 700; line-height: 1.2; }
.period-control .month-choice-panel button:hover, .customer-timesheet-upload-grid .month-choice-panel button:hover { border-color: var(--mint); background: var(--green-light); }
.period-control .month-choice-panel button.is-active, .customer-timesheet-upload-grid .month-choice-panel button.is-active { border-color: var(--mint-dark); background: var(--mint); color: var(--navy); }
html[data-theme="dark"] .period-control .month-picker-trigger,
html[data-theme="dark"] .customer-timesheet-upload-grid .month-picker-trigger { color: var(--ink); background: #0c1723; }
html[data-theme="dark"] .month-picker-trigger::after { color: var(--muted); }
html[data-theme="dark"] .month-choice-panel { background: #0c1723; }
html[data-theme="dark"] .period-control .month-choice-panel button,
html[data-theme="dark"] .customer-timesheet-upload-grid .month-choice-panel button { background: #132131; color: var(--ink); }
html[data-theme="dark"] .period-control .month-choice-panel button:hover,
html[data-theme="dark"] .customer-timesheet-upload-grid .month-choice-panel button:hover { background: #183148; }
.notification-button { position: relative; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.notification-button span { position: absolute; inset: 11px 12px 12px; border: 2px solid var(--navy); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom: 0; }
.notification-button::after { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: var(--mint); content: ""; }

.view { display: none; animation: viewIn .28s ease; }
.view.is-active { display: block; }
@keyframes viewIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.hero-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 32px;
  align-items: center;
  min-height: 220px;
  margin: 24px 0 16px;
  border-radius: 14px;
  background: linear-gradient(120deg, #0d1b38 0%, #102746 62%, #164b57 100%);
  color: #fff;
  padding: 30px 34px;
  box-shadow: 0 12px 30px rgba(13,27,56,.12);
}

.hero-card::after { display: none; }
.hero-copy { position: relative; z-index: 1; }
.hero-copy h2 { max-width: 670px; margin: 9px 0 10px; font-family: "Roboto Slab", Georgia, serif; font-size: clamp(28px, 4vw, 38px); letter-spacing: 0; line-height: 1.12; }
.hero-copy p { max-width: 680px; margin: 0; color: #d2dce4; font-size: 14px; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.button { min-height: 42px; border: 1px solid transparent; border-radius: 11px; cursor: pointer; font-size: 13px; font-weight: 700; padding: 10px 17px; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-1px); }
}
.button:disabled { cursor: not-allowed; filter: grayscale(.25); opacity: .48; transform: none; }
.button-primary { background: var(--mint); color: var(--navy); box-shadow: 0 8px 18px rgba(58,189,157,.2); }
.button-primary:hover { background: #48caa9; box-shadow: 0 11px 23px rgba(58,189,157,.25); }
.button-ghost { border-color: var(--line); background: #fff; color: var(--navy); }
.hero-card .button-ghost { border-color: rgba(255,255,255,.19); background: rgba(255,255,255,.08); color: #fff; }
.hero-card .button-ghost:hover { background: rgba(255,255,255,.13); }
.hero-task-math { position: relative; z-index: 1; display: grid; gap: 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(255,255,255,.06); padding: 18px; }
.hero-task-math > span { color: #b9c7d4; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hero-task-math > strong { font-family: "Roboto Slab", Georgia, serif; font-size: 26px; }
.hero-task-math > div { display: grid; gap: 3px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 10px; }
.hero-task-math small { color: #b9c7d4; font-size: 10px; }
.hero-task-math b { color: #fff; font-size: 12px; line-height: 1.4; }

.dashboard-next-action-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,auto); gap: 28px; align-items: center; margin-bottom: 16px; border: 1px solid var(--line); border-left: 4px solid var(--mint-dark); border-radius: 10px; background: var(--surface); padding: 18px 24px; box-shadow: 0 4px 14px rgba(13,27,56,.035); }
.dashboard-next-action-card.is-waiting { border-left-color: var(--warning); background: linear-gradient(135deg,var(--surface),var(--warning-bg)); }
.dashboard-next-action-card.is-complete { border-left-color: var(--mint-dark); background: linear-gradient(135deg,var(--surface),var(--green-light)); }
.dashboard-next-action-copy h3 { margin: 5px 0 7px; color: var(--navy); font-family: "Roboto Slab", Georgia, serif; font-size: 20px; }
.dashboard-next-action-copy p { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; color: var(--ink); font-size: 11px; }
.dashboard-next-action-copy p span::before { margin-right: 8px; color: var(--muted); content: "·"; }
.dashboard-next-action-copy > small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.dashboard-next-action-side { display: grid; justify-items: end; gap: 4px; text-align: right; }
.dashboard-next-action-side > strong { color: var(--navy); font-size: 12px; }
.dashboard-next-action-side > small { color: var(--muted); font-size: 11px; }
.dashboard-next-action-side > div { margin-top: 9px; }
.dashboard-next-action-side .small-button { min-height: 42px; border-color: var(--warning); background: var(--surface); color: var(--navy); font-size: 11px; padding: 10px 17px; }
.text-button { border: 0; background: transparent; color: var(--teal); cursor: pointer; font-size: 12px; font-weight: 800; padding: 7px; }
.text-button:hover { color: var(--mint-dark); }
.text-button.danger-text { color: var(--danger); }
.text-button.danger-text:hover { color: #7f3030; }

.close-card { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 17px; background: rgba(255,255,255,.06); padding: 20px; }
.close-card strong, .close-card small { display: block; }
.close-card strong { font-size: 13px; }
.close-card small { max-width: 150px; margin-top: 5px; color: #9eb0c1; font-size: 11px; line-height: 1.45; }
.progress-ring { --size: 70px; display: grid; flex: 0 0 auto; width: var(--size); height: var(--size); place-items: center; border-radius: 50%; background: conic-gradient(var(--mint) calc(var(--progress) * 1%), rgba(255,255,255,.11) 0); }
.progress-ring::before { grid-area: 1/1; width: 53px; height: 53px; border-radius: 50%; background: var(--navy-soft); content: ""; }
.progress-ring span { z-index: 1; grid-area: 1/1; font-size: 13px; font-weight: 800; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card { min-height: 128px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 20px; box-shadow: none; }
.metric-card.attention { border-color: #efddc7; background: linear-gradient(150deg, #fff, #fff8ef); }
.metric-label { display: block; color: var(--muted); font-size: 11px; font-weight: 600; }
.metric-card > strong { display: block; margin: 10px 0 8px; color: var(--navy); font-family: "Roboto Slab", Georgia, serif; font-size: 28px; }
.metric-card > strong small { color: #9aa4ae; font-size: 15px; }
.metric-link { display: block; width: fit-content; margin-top: 13px; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--teal); cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; padding: 0 0 2px; }
.metric-link:hover { color: var(--navy); }
.metric-note { color: var(--muted); font-size: 11px; }
.metric-note.positive { color: var(--mint-dark); }

.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 28px rgba(13,27,56,.035); }
#admin-task-panel { scroll-margin-top: 104px; }
.workflow-panel { margin-bottom: 18px; padding: 24px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px 17px; }
.workflow-panel .panel-heading { padding: 0 0 24px; }
.workflow-overview { display: grid; grid-template-columns: minmax(230px,.38fr) minmax(0,1fr); gap: 24px; align-items: center; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-muted); padding: 18px; }
.workflow-progress-card { display: flex; width: 100%; align-items: center; gap: 14px; margin: 0; border-right: 1px solid var(--line); color: var(--navy); padding: 2px 20px 2px 0; }
.workflow-progress-card .progress-ring { --size: 54px; background: conic-gradient(var(--mint-dark) calc(var(--progress) * 1%), #dfe8e5 0); }
.workflow-progress-card .progress-ring::before { width: 41px; height: 41px; background: var(--surface); }
.workflow-progress-card strong, .workflow-progress-card small { display: block; }
.workflow-progress-card strong { font-size: 11px; }
.workflow-progress-card small { max-width: 320px; margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.workflow-heading-meta { display: grid; justify-items: end; gap: 3px; text-align: right; }
.workflow-heading-meta strong { color: var(--navy); font-size: 12px; }
.workflow-heading-meta small { color: var(--muted); font-size: 10px; }
.panel-heading h3, .settings-card h3, .summary-card h3 { margin: 4px 0 0; font-family: "Roboto Slab", Georgia, serif; font-size: 19px; }
.updated-label { color: var(--muted); font-size: 10px; }
.workflow-track { display: flex; align-items: center; justify-content: space-between; }
.workflow-step { display: flex; min-width: 126px; align-items: center; gap: 11px; color: #99a4ae; }
.workflow-step > span { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: #fafcfc; font-size: 11px; font-weight: 800; }
.workflow-step strong, .workflow-step small { display: block; }
.workflow-step strong { color: #73808c; font-size: 12px; }
.workflow-step small { margin-top: 3px; font-size: 9px; }
.workflow-step.is-done > span { border-color: var(--mint); background: var(--mint); color: var(--navy); }
.workflow-step.is-done strong, .workflow-step.is-current strong { color: var(--navy); }
.workflow-step.is-current > span { border-color: var(--mint); background: var(--green-light); color: var(--mint-dark); }
.workflow-line { flex: 1; height: 1px; min-width: 20px; background: var(--line); margin: 0 12px; }
.workflow-line.is-done { background: var(--mint); }

.table-wrap { overflow-x: auto; }
.data-table, .hours-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 14px 22px; border-top: 1px solid #edf1f2; text-align: left; white-space: nowrap; }
.data-table th { color: #87929d; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.data-table td { font-size: 12px; }
.data-table td strong, .data-table td small { display: block; }
.data-table td small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.person-cell { display: flex; align-items: center; gap: 10px; }
.mini-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--green-light); color: var(--teal); font-size: 10px; font-weight: 800; }

.status-pill { display: inline-flex; min-height: 25px; align-items: center; border-radius: 999px; font-size: 9px; font-weight: 800; padding: 4px 9px; }
.status-approved, .status-sent { background: var(--green-light); color: var(--mint-dark); }
.status-submitted, .status-ready { background: #eaf1fa; color: #315d91; }
.status-concept { background: #f1f2f3; color: #6f7b86; }
.status-warning { background: var(--warning-bg); color: var(--warning); }

.view-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin: 35px 0 22px; }
.view-heading h2 { margin: 5px 0 7px; font-family: "Roboto Slab", Georgia, serif; font-size: clamp(27px, 3.5vw, 37px); letter-spacing: -.025em; }
.view-heading p { max-width: 680px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.approval-heading-actions { align-items: center; }
.approval-period-filters { max-width: min(650px, 62vw); flex-wrap: wrap; justify-content: flex-end; }
.approval-period-filters button { white-space: nowrap; }
.dashboard-team-actions { align-items: center; }
.dashboard-team-panel .panel-heading { align-items: flex-end; padding-bottom: 14px; }
.dashboard-team-panel .panel-heading p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.dashboard-team-table-wrap { padding: 0 16px 16px; }
.dashboard-team-table { border-collapse: separate; border-spacing: 0 8px; }
.dashboard-team-table th { border: 0; padding-block: 8px; }
.dashboard-team-table td { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-muted); padding-block: 15px; }
.dashboard-team-table td:first-child { border-left: 1px solid var(--line); border-radius: 12px 0 0 12px; }
.dashboard-team-table td:last-child { border-right: 1px solid var(--line); border-radius: 0 12px 12px 0; text-align: right; }
.dashboard-team-table .person-cell strong { color: var(--navy); font-size: 12px; }
.dashboard-team-table .dashboard-team-row.status-submitted td { border-color: #cbdcf0; background: #f7faff; }
.dashboard-team-table .dashboard-team-row.status-correction td,
.dashboard-team-table .dashboard-team-row.status-draft td { border-color: #edc58f; background: #fffaf4; }
.dashboard-team-action { min-width: 116px; }

.correction-banner { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 14px; align-items: start; margin: 0 0 18px; border: 1px solid #edc58f; border-radius: 16px; background: var(--warning-bg); color: var(--ink); padding: 17px 19px; }
.correction-banner.dashboard-correction { grid-template-columns: auto minmax(0,1fr) auto; align-items: center; }
.correction-banner-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--warning); color: #fff; font-size: 16px; font-weight: 900; }
.correction-banner strong, .correction-banner p, .correction-banner small { display: block; }
.correction-banner strong { color: var(--warning); font-size: 12px; }
.correction-banner p { margin: 5px 0 4px; font-size: 12px; line-height: 1.5; white-space: pre-line; }
.correction-banner small { color: var(--muted); font-size: 9px; }

.timesheet-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }
.timesheet-panel { overflow: hidden; }
.assignment-bar { display: grid; grid-template-columns: 1.4fr .6fr .7fr; gap: 18px; background: var(--navy); color: #fff; padding: 20px 24px; }
.assignment-bar small, .assignment-bar strong { display: block; }
.assignment-bar small { color: #9fb0c0; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.assignment-bar strong { margin-top: 5px; font-size: 12px; }
.hours-view-toolbar { display: grid; grid-template-columns: minmax(180px,.7fr) minmax(320px,1.6fr) auto; gap: 18px; align-items: center; border-bottom: 1px solid var(--line); background: #fbfdfd; padding: 14px 24px; }
.hours-view-toolbar > div:first-child strong, .hours-view-toolbar > div:first-child small { display: block; }
.hours-view-toolbar > div:first-child strong { color: var(--navy); font-size: 11px; }
.hours-view-toolbar > div:first-child small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.hours-week-filter { width: fit-content; max-width: 100%; overflow-x: auto; }
.hours-week-filter button { white-space: nowrap; }
.hours-visible-total { text-align: right; }
.hours-visible-total span, .hours-visible-total strong { display: block; }
.hours-visible-total span { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.hours-visible-total strong { margin-top: 3px; color: var(--navy); font-size: 13px; }
.hours-table th, .hours-table td { min-width: 88px; border-bottom: 1px solid #edf1f2; padding: 11px 10px; text-align: center; vertical-align: middle; }
.hours-table th { background: #fafcfc; color: #7a8792; font-size: 10px; }
.hours-table tbody tr { transition: background .15s ease; }
.hours-table tbody tr:hover { background: #fbfdfd; }
.hours-table td:first-child { min-width: 100px; color: var(--teal); font-size: 11px; font-weight: 800; }
.hours-day-entry { display: grid; justify-items: center; gap: 7px; width: fit-content; margin: 0 auto; cursor: text; }
.hours-table .date-number { display: inline-flex; min-width: 46px; min-height: 19px; align-items: center; justify-content: center; border-radius: 999px; background: var(--green-light); color: var(--teal); font-size: 8px; font-weight: 900; letter-spacing: .02em; text-transform: lowercase; }
.hours-table input { width: 64px; height: 42px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--navy); font-size: 14px; font-weight: 700; text-align: center; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.hours-table input:hover { border-color: #b9d9d1; }
.hours-table input:focus { outline: 0; border-color: var(--mint); box-shadow: 0 0 0 4px rgba(58,189,157,.14); transform: translateY(-1px); }
.hours-table .outside-month { background: #fafcfc; color: #c6ced1; }
.outside-month-mark { display: grid; width: 64px; height: 42px; place-items: center; margin: 26px auto 0; border-radius: 11px; background: #f4f7f7; color: #bdc7cb; }
.hours-table .week-total { color: var(--navy); font-size: 12px; font-weight: 800; }
.hours-table tfoot th { border: 0; background: var(--green-light); color: var(--teal); text-align: right; }
.hours-table tfoot th:last-child { text-align: center; }
.timesheet-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; }
.timesheet-actions p { margin: 0; }
.timesheet-actions strong, .timesheet-actions small { display: block; }
.timesheet-actions strong { font-size: 12px; }
.timesheet-actions small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.summary-card { align-self: start; padding: 24px; }
.summary-card dl { margin: 22px 0; }
.summary-card dl div { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid #edf1f2; padding: 12px 0; }
.summary-card dt { color: var(--muted); font-size: 11px; }
.summary-card dd { margin: 0; color: var(--navy); font-size: 11px; font-weight: 800; }
.summary-note { border-radius: 13px; background: var(--green-light); padding: 16px; }
.summary-note strong { color: var(--teal); font-size: 11px; }
.summary-note p { margin: 6px 0 0; color: #517178; font-size: 10px; line-height: 1.55; }

.approval-list { display: grid; gap: 20px; }
.approval-period-group { display: grid; gap: 11px; }
.approval-period-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; padding: 0 4px; }
.approval-period-heading h3 { margin: 4px 0 0; color: var(--navy); font-family: "Roboto Slab", Georgia, serif; font-size: 20px; }
.approval-card { display: grid; grid-template-columns: 1.2fr .8fr .75fr auto; gap: 22px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 20px 22px; box-shadow: 0 7px 22px rgba(13,27,56,.03); }
.approval-person { display: flex; align-items: center; gap: 12px; }
.approval-person .mini-avatar { width: 42px; height: 42px; }
.approval-person strong, .approval-person small, .approval-data strong, .approval-data small { display: block; }
.approval-person strong, .approval-data strong { font-size: 12px; }
.approval-person small, .approval-data small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.approval-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.empty-state { border: 1px dashed #b9d9d1; border-radius: 20px; background: #f8fcfb; padding: 70px 25px; text-align: center; }
.empty-check { display: grid; width: 48px; height: 48px; place-items: center; margin: 0 auto 15px; border-radius: 50%; background: var(--mint); color: var(--navy); font-weight: 900; }
.empty-state h3 { margin: 0; font-family: "Roboto Slab", Georgia, serif; }
.empty-state p { color: var(--muted); font-size: 12px; }
.approval-empty-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.invoice-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 22px; }
.invoice-month-overview { display: grid; gap: 16px; margin-bottom: 17px; border: 1px solid var(--line); border-left: 4px solid var(--mint); border-radius: 15px; background: #fff; padding: 16px 18px; box-shadow: 0 5px 18px rgba(13,27,56,.025); }
.invoice-month-overview[hidden] { display: none; }
.invoice-month-overview[data-state="blocked"] { border-left-color: var(--warning); background: linear-gradient(135deg,#fff,#fffaf4); }
.invoice-month-overview[data-state="ready"] { border-left-color: var(--mint); background: linear-gradient(135deg,#fff,#f7fffc); }
.invoice-month-overview-head { display: grid; grid-template-columns: minmax(0,.7fr) minmax(360px,1.3fr); gap: 16px; align-items: center; }
.invoice-month-overview-copy h3 { margin: 5px 0 0; color: var(--navy); font-family: "Roboto Slab", Georgia, serif; font-size: 18px; }
.invoice-month-overview-copy p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.invoice-month-overview-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 8px; }
.invoice-month-overview-item { display: grid; min-height: 62px; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.82); color: var(--navy); cursor: pointer; padding: 10px 12px; text-align: left; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.invoice-month-overview-item:hover, .invoice-month-overview-item.is-current { border-color: #9edccb; background: var(--green-light); box-shadow: 0 8px 18px rgba(13,27,56,.07); transform: translateY(-1px); }
.invoice-month-overview[data-state="blocked"] .invoice-month-overview-item.is-blocked,
.invoice-month-overview-item.is-blocked.is-current { border-color: #f0d2a8; background: var(--warning-bg); }
.invoice-month-overview-item.is-controlled { border-color: #cfe8e0; background: #f7fffc; }
.invoice-month-overview-item.is-controlled.is-current { border-color: var(--mint-dark); background: var(--green-light); }
.invoice-month-overview-item strong, .invoice-month-overview-item small { display: block; }
.invoice-month-overview-item strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.invoice-month-overview-item small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.invoice-month-overview-action { display: grid; gap: 4px; justify-items: end; }
.invoice-month-overview-action small { border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--navy); font-size: 9px; font-weight: 900; padding: 5px 8px; text-decoration: none; }
.invoice-month-overview-item.is-detail-open .invoice-month-overview-action small { border-color: var(--mint-dark); background: var(--mint); }
.invoice-month-overview-item.is-blocked .invoice-month-overview-action small { border-color: #f0d2a8; }
.invoice-month-overview-empty { border: 1px dashed var(--line); border-radius: 12px; background: rgba(255,255,255,.65); color: var(--muted); font-size: 10px; font-weight: 800; padding: 13px; text-align: center; }
.month-batch-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(190px,260px); gap: 18px 26px; align-items: center; margin-bottom: 17px; border: 1px solid var(--line); border-left: 4px solid var(--mint-dark); border-radius: 15px; background: var(--surface); padding: 19px 21px; box-shadow: 0 5px 18px rgba(13,27,56,.025); }
.month-batch-card[hidden], .invoice-status-guide[hidden], #invoice-detail-panel[hidden] { display: none; }
.invoice-month-overview .month-batch-card { margin-bottom: 0; box-shadow: none; }
.month-batch-card[data-state="blocked"] { border-left-color: var(--warning); background: linear-gradient(135deg, #fff, #fffaf4); }
.month-batch-card[data-state="ready"] { border-left-color: var(--mint); background: linear-gradient(135deg, #fff, #f7fffc); }
.month-batch-card[data-state="controlled"] { border-left-color: var(--mint-dark); }
.month-batch-card[data-state="empty"] { border-left-color: var(--line); }
.month-batch-summary { min-width: 0; }
.month-batch-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 12px; margin-top: 5px; }
.month-batch-title-row h3 { margin: 0; color: var(--navy); font-family: "Roboto Slab", Georgia, serif; font-size: 19px; }
.month-batch-summary > p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.month-batch-progress { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 11px; align-items: center; min-width: 0; }
.month-batch-progress::before { grid-area: 1/1; height: 9px; border-radius: 999px; background: #e5ecea; content: ""; }
.month-batch-progress > span { z-index: 1; grid-area: 1/1; width: 0; max-width: 100%; height: 9px; border-radius: 999px; background: var(--mint-dark); transition: width .2s ease; }
.month-batch-card[data-state="blocked"] .month-batch-progress > span { background: var(--warning); }
.month-batch-progress > strong { color: var(--navy); font-size: 11px; }
.month-batch-blockers { display: grid; grid-column: 1/-1; gap: 8px; border-top: 1px solid var(--line); padding-top: 13px; }
.month-batch-blockers[hidden] { display: none; }
.month-batch-blocker { display: grid; grid-template-columns: minmax(170px,1fr) minmax(150px,.75fr) auto; gap: 14px; align-items: center; border-radius: 12px; background: rgba(255,255,255,.78); padding: 11px 12px; }
.month-batch-blocker-copy, .month-batch-blocker-owner { min-width: 0; }
.month-batch-blocker-copy strong, .month-batch-blocker-copy small, .month-batch-blocker-owner strong, .month-batch-blocker-owner small { display: block; }
.month-batch-blocker-copy strong, .month-batch-blocker-owner strong { overflow: hidden; color: var(--navy); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.month-batch-blocker-copy small, .month-batch-blocker-owner small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.month-batch-blocker .small-button { min-width: 126px; }
.invoice-status-guide { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 17px; }
.invoice-status-guide > div { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 14px 16px; box-shadow: 0 5px 18px rgba(13,27,56,.025); }
.invoice-status-guide > div.is-current { border-color: #9edccb; background: var(--green-light); box-shadow: 0 6px 20px rgba(58,189,157,.09); }
.invoice-status-guide > div.is-blocked { border-color: #f0d2a8; background: var(--warning-bg); }
.invoice-status-guide > div > span { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 9px; background: var(--green-light); color: var(--teal); font-size: 11px; font-weight: 900; }
.invoice-status-guide > div.is-current > span { background: var(--mint); color: var(--navy); }
.invoice-status-guide > div.is-blocked > span { background: var(--warning); color: var(--navy); }
.invoice-status-guide p, .invoice-status-guide strong, .invoice-status-guide small { display: block; margin: 0; }
.invoice-status-guide strong { color: var(--navy); font-size: 11px; }
.invoice-status-guide small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.mail-route-guide { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 17px; }
.mail-route-guide article { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 15px 16px; box-shadow: 0 5px 18px rgba(13,27,56,.025); }
.mail-route-guide article > span { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 9px; background: var(--green-light); color: var(--teal); font-size: 11px; font-weight: 900; }
.mail-route-guide article.is-payroll { border-color: #a9d8cc; background: #f8fcfb; }
.mail-route-guide strong, .mail-route-guide small { display: block; }
.mail-route-guide strong { color: var(--navy); font-size: 11px; }
.mail-route-guide small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.payroll-table td:nth-child(4) { min-width: 235px; }
.segmented-control { display: flex; gap: 4px; border-radius: 10px; background: #f0f4f4; padding: 3px; }
.segmented-control button { border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 700; padding: 7px 12px; }
.segmented-control button.is-active { background: #fff; color: var(--navy); box-shadow: 0 3px 9px rgba(13,27,56,.08); }
.invoice-action { display: flex; align-items: center; gap: 6px; }
.invoice-action-note { color: var(--muted); font-size: 9px; font-weight: 700; }
.small-button { border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--teal); cursor: pointer; font-size: 10px; font-weight: 800; padding: 7px 10px; }
.small-button:hover { border-color: var(--mint); background: var(--green-light); }
.small-button.send { border-color: var(--mint); background: var(--mint); color: var(--navy); }

.employee-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.employee-card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 22px; box-shadow: 0 8px 24px rgba(13,27,56,.035); }
.employee-card-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.employee-card-head .mini-avatar { width: 45px; height: 45px; }
.employee-identity { display: flex; align-items: center; gap: 12px; }
.employee-identity strong, .employee-identity small { display: block; }
.employee-identity strong { font-size: 13px; }
.employee-identity small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.employee-details { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 20px; }
.employee-details div { border-radius: 11px; background: #f7f9f9; padding: 12px; }
.employee-details small, .employee-details strong { display: block; }
.employee-details small { color: var(--muted); font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }
.employee-details strong { margin-top: 5px; font-size: 10px; }

.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 17px; }
.settings-section-nav { display: flex; flex-wrap: wrap; gap: 7px; margin: -6px 0 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow); padding: 8px; }
.settings-section-nav button { border: 1px solid transparent; border-radius: 999px; background: var(--surface-muted); color: var(--muted); cursor: pointer; padding: 8px 12px; font-size: 10px; font-weight: 800; }
.settings-section-nav button:hover, .settings-section-nav button:focus-visible { border-color: var(--mint-dark); outline: 0; background: var(--green-light); color: var(--teal); }
.settings-card[id] { scroll-margin-top: 18px; }
.settings-card { padding: 24px; }
.settings-card.full-width { grid-column: 1/-1; }
.settings-card h3 { margin-bottom: 20px; }
.reminder-rules { display: grid; gap: 10px; margin-top: 18px; }
.reminder-rule { position: relative; display: grid; grid-template-columns: minmax(300px,1fr) 170px 150px; gap: 14px; align-items: center; overflow: visible; border: 1px solid var(--line); border-radius: 13px; background: #fbfdfd; padding: 13px 15px; }
.reminder-rule .check-row { display: flex; align-items: flex-start; gap: 9px; color: var(--ink); }
.reminder-rule .check-row input { flex: 0 0 auto; width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--mint-dark); }
.reminder-rule .check-row strong, .reminder-rule .check-row small { display: block; }
.reminder-rule .check-row strong { font-size: 10px; }
.reminder-rule .check-row small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.reminder-choice-field { min-width: 0; color: var(--muted); font-size: 9px; font-weight: 700; }
.reminder-choice-field > span, .reminder-fixed-moment small, .reminder-fixed-moment strong { display: block; }
.reminder-fixed-moment small { margin-bottom: 5px; color: var(--muted); font-size: 9px; font-weight: 700; }
.reminder-fixed-moment strong { color: var(--ink); font-size: 10px; }
.reminder-choice-picker { position: relative; margin-top: 4px; }
.standard-choice-picker { display: block; width: 100%; min-width: 150px; margin-top: 6px; }
.preference-row .standard-choice-picker { width: 180px; margin-top: 0; }
.reminder-choice-trigger { display: flex; width: 100%; height: 40px; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); cursor: pointer; padding: 0 11px; font: inherit; font-size: 10px; font-weight: 700; text-align: left; }
.reminder-choice-trigger:hover, .reminder-choice-trigger[aria-expanded="true"] { border-color: var(--mint-dark); box-shadow: 0 0 0 3px rgba(58,189,157,.12); }
.reminder-choice-trigger:focus-visible, .reminder-choice-panel button:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--mint); }
.reminder-choice-trigger:disabled { cursor: not-allowed; opacity: .46; box-shadow: none; }
.reminder-choice-panel { position: absolute; z-index: 90; top: calc(100% + 6px); right: 0; left: 0; display: grid; gap: 4px; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 16px 36px rgba(13,27,56,.18); padding: 5px; }
.reminder-choice-panel[hidden] { display: none; }
.reminder-choice-panel button { border: 0; border-radius: 7px; background: transparent; color: var(--ink); cursor: pointer; padding: 9px 10px; font: inherit; font-size: 10px; font-weight: 700; text-align: left; }
.reminder-choice-panel button:hover, .reminder-choice-panel button.is-active { background: var(--green-light); color: var(--teal); }
.reminder-fixed-moment { color: var(--muted); font-size: 10px; }
.reminder-schedule-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 15px; border-radius: 12px; background: var(--green-light); padding: 13px 15px; }
.reminder-schedule-summary { min-width: 0; color: var(--teal); }
.reminder-schedule-summary > strong { display: block; margin-bottom: 7px; font-size: 10px; }
.reminder-schedule-summary > div { display: flex; flex-wrap: wrap; gap: 6px; }
.reminder-schedule-summary span { display: block; border: 1px solid rgba(14,119,94,.16); border-radius: 999px; background: rgba(255,255,255,.58); padding: 5px 8px; font-size: 9px; line-height: 1.35; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; }
.organization-settings-grid { align-items: start; }
.brand-logo-setting { display: grid; gap: 10px; }
.brand-logo-preview { display: flex; align-items: center; gap: 14px; min-height: 72px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-muted); padding: 12px 14px; }
.brand-logo-preview img { width: 130px; max-height: 54px; object-fit: contain; object-position: left center; }
.form-grid label { color: var(--muted); font-size: 10px; font-weight: 700; }
.form-grid input, .form-grid select { width: 100%; height: 42px; margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); padding: 0 12px; }
.settings-template-intro { margin: -6px 0 18px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.customer-timesheet-template-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.customer-timesheet-template-card { display: grid; gap: 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-muted); padding: 16px; }
.customer-timesheet-template-card h4 { margin: 4px 0 0; color: var(--ink); font-size: 15px; }
.customer-timesheet-template-card label { color: var(--muted); font-size: 10px; font-weight: 700; }
.customer-timesheet-template-card input, .customer-timesheet-template-card textarea { display: block; width: 100%; margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; padding: 10px 12px; }
.customer-timesheet-template-card input { min-height: 42px; }
.customer-timesheet-template-card textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.customer-timesheet-template-card > small { color: var(--muted); font-size: 9px; line-height: 1.5; }
.form-grid input.is-invalid, .modal-form input.is-invalid, .modal-form textarea.is-invalid { border-color: var(--danger); background: #fff7f7; box-shadow: 0 0 0 3px rgba(163,75,75,.09); }
.settings-warning { margin: 15px 0 0; border-radius: 11px; background: var(--warning-bg); color: var(--warning); font-size: 10px; line-height: 1.5; padding: 11px 13px; }
.invoice-identity-preview { display: grid; gap: 3px; border: 1px solid rgba(58,189,157,.34); border-radius: 12px; background: var(--green-light); padding: 13px 15px; }
.invoice-identity-preview span { color: var(--teal); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.invoice-identity-preview strong { color: var(--ink); font-family: "Roboto Slab", Georgia, serif; font-size: 17px; }
.invoice-identity-preview small { color: var(--muted); font-size: 10px; }
.hero-owner-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.hero-owner-badge { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; font: inherit; font-size: 10px; font-weight: 800; padding: 7px 11px; cursor: pointer; transition: border-color .18s ease, transform .18s ease; }
.hero-owner-badge b { font-size: 12px; }
.hero-owner-badge.is-backoffice { background: rgba(187,118,35,.2); color: #ffe0ab; }
.hero-owner-badge.is-employee { background: rgba(58,189,157,.16); color: #bff5e8; }
.hero-owner-badge:hover { border-color: rgba(255,255,255,.55); transform: translateY(-1px); }
.hero-owner-badge:focus-visible { outline: 3px solid rgba(255,255,255,.55); outline-offset: 2px; }
.safe-domain-note { margin: 15px 0 5px; border-radius: 11px; background: var(--green-light); color: var(--teal); font-size: 10px; line-height: 1.5; padding: 11px 13px; }
.email-template-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.email-preview { margin-top: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fbfcfc; }
.email-preview > div { display: grid; grid-template-columns: 95px 1fr; gap: 15px; border-bottom: 1px solid #e9eeee; padding: 10px 14px; }
.email-preview span { color: var(--muted); font-size: 10px; }
.email-preview strong { color: var(--navy); font-size: 11px; overflow-wrap: anywhere; }
.email-preview strong small { color: var(--warning); font-size: 9px; }
.email-preview p { margin: 0; background: #fff; color: var(--ink); font-size: 12px; line-height: 1.55; padding: 20px 14px; }
.template-list { display: grid; gap: 10px; margin-top: 18px; }
.template-item { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.4fr) auto; align-items: center; gap: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcfc; padding: 14px; }
.template-person { display: flex; align-items: center; gap: 11px; min-width: 0; }
.template-person strong, .template-person small, .template-subject strong, .template-subject small { display: block; }
.template-person strong, .template-subject strong { overflow: hidden; color: var(--navy); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.template-person small, .template-subject small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.route-list { display: grid; }
.route-list > div { display: flex; min-height: 58px; align-items: center; gap: 11px; border-bottom: 1px solid #edf1f2; }
.route-list > div:last-child { border-bottom: 0; }
.route-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); }
.route-dot.gmail { background: #d45c55; }
.route-list p { flex: 1; margin: 0; }
.route-list strong, .route-list small { display: block; }
.route-list strong { font-size: 11px; }
.route-list small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.toggle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.toggle-grid label { position: relative; display: flex; gap: 11px; border: 1px solid var(--line); border-radius: 13px; cursor: pointer; padding: 15px; }
.toggle-grid input { position: absolute; opacity: 0; }
.toggle-grid label > span { position: relative; flex: 0 0 auto; width: 31px; height: 18px; border-radius: 999px; background: #cbd3d6; transition: background .2s ease; }
.toggle-grid label > span::after { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; content: ""; transition: transform .2s ease; }
.toggle-grid input:checked + span { background: var(--mint); }
.toggle-grid input:checked + span::after { transform: translateX(13px); }
.toggle-grid p { margin: 0; }
.toggle-grid strong, .toggle-grid small { display: block; }
.toggle-grid strong { font-size: 10px; }
.toggle-grid small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.4; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(5,13,27,.58); padding: 20px; backdrop-filter: blur(5px); }
.modal-backdrop[hidden] { display: none; }
.modal { position: relative; width: min(470px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; border-radius: 22px; background: #fff; padding: 30px; box-shadow: 0 30px 80px rgba(0,0,0,.26); animation: modalIn .2s ease; }
.modal.is-wide { width: min(780px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; }
@keyframes modalIn { from { opacity: 0; transform: scale(.97) translateY(8px); } to { opacity: 1; transform: none; } }
.modal h2 { margin: 8px 0; font-family: "Roboto Slab", Georgia, serif; }
.modal > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; white-space: pre-line; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 10px; background: #f1f4f4; cursor: pointer; font-size: 21px; }
.modal-summary { display: grid; gap: 8px; margin: 20px 0; border-radius: 14px; background: #f6f9f8; padding: 15px; }
.modal-summary > div { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 11px; }
.modal-summary strong { color: var(--navy); }
.modal-summary .customer-timesheet-submission-review { flex-direction: column; gap: 6px; }
.modal-queue { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; margin: 20px 0 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; }
.modal-queue[hidden] { display: none; }
.modal-queue > div { min-width: 0; text-align: center; }
.modal-queue strong, .modal-queue small { display: block; }
.modal-queue strong { color: var(--navy); font-size: 11px; }
.modal-queue small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.modal-queue .small-button { min-width: 92px; }
.modal-queue .small-button:disabled { cursor: not-allowed; opacity: .42; }
.customer-timesheet-submission-review pre { margin: 4px 0 0; border-top: 1px solid #dfe8e5; padding-top: 10px; white-space: pre-wrap; color: var(--ink); font: inherit; line-height: 1.6; }
.modal-form { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px !important; color: var(--muted); }
.modal-form label { display: block; color: var(--muted); font-size: 10px; font-weight: 700; }
.modal-form label.full, .modal-form .full { grid-column: 1/-1; }
.modal-form input, .modal-form textarea { display: block; width: 100%; margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 12px; padding: 10px 12px; }
.modal-form input { height: 40px; }
.modal-form textarea { min-height: 105px; resize: vertical; line-height: 1.5; }
.modal-form .form-help { margin: 0; border-radius: 10px; background: var(--green-light); color: var(--teal); font-size: 9px; line-height: 1.5; padding: 10px 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 150; max-width: 350px; border-radius: 12px; background: var(--navy); color: #fff; box-shadow: var(--shadow); font-size: 12px; opacity: 0; padding: 14px 18px; pointer-events: none; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; }
.toast.is-visible { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-card { grid-template-columns: 1fr; }
  .close-card { max-width: 370px; }
  .timesheet-layout { grid-template-columns: 1fr; }
  .summary-card { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
  .summary-card .section-label, .summary-card h3 { grid-column: 1/-1; }
  .approval-card { grid-template-columns: 1fr 1fr; }
  .approval-actions { justify-content: flex-end; }
}

@media (max-width: 820px) {
  .sidebar { inset: auto 0 0; width: auto; height: 68px; padding: 7px 10px; box-shadow: 0 -7px 25px rgba(13,27,56,.16); }
  .brand, .sidebar-footer { display: none; }
  .nav-list { display: grid; grid-template-columns: repeat(6,1fr); gap: 3px; margin: 0; }
  .nav-item { min-width: 0; min-height: 54px; flex-direction: column; justify-content: center; gap: 5px; padding: 3px; text-align: center; }
  .nav-item span:nth-child(2) { overflow: hidden; width: 100%; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .nav-count { position: absolute; top: 3px; right: 8px; }
  .nav-count-group { position: absolute; top: 3px; right: 4px; gap: 2px; }
  .nav-count-group .nav-count { position: static; padding: 1px 5px; }
  .nav-marker { width: 7px; height: 7px; }
  .main-content { margin-left: 0; padding: 0 18px 95px; }
  .topbar { min-height: 82px; }
  .eyebrow { display: none; }
  .notification-button { display: none; }
  .safety-badge { display: none; }
  .topbar-quick-reset { display: none; }
  .hero-card { margin-top: 20px; padding: 28px; }
  .workflow-track { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .workflow-heading-meta { justify-items: start; text-align: left; }
  .dashboard-next-action-card { grid-template-columns: 1fr; gap: 16px; }
  .dashboard-next-action-side { justify-items: start; text-align: left; }
  .dashboard-next-action-side .button, .dashboard-next-action-side .small-button { width: 100%; }
  .dashboard-next-action-side > div { width: 100%; }
  .workflow-line { display: none; }
  .workflow-step { min-width: 0; }
  .assignment-bar { grid-template-columns: 1fr 1fr; }
  .assignment-bar > div:first-child { grid-column: 1/-1; }
  .hours-view-toolbar { grid-template-columns: 1fr; }
  .hours-visible-total { text-align: left; }
  .reminder-rule { grid-template-columns: 1fr 1fr; }
  .reminder-rule .check-row { grid-column: 1/-1; }
  .invoice-month-overview-head { grid-template-columns: 1fr; }
  .invoice-month-overview-action { justify-items: start; }
  .month-batch-card { grid-template-columns: 1fr; }
  .month-batch-blockers { grid-column: auto; }
  .invoice-status-guide { grid-template-columns: 1fr; }
  .employee-grid, .settings-grid { grid-template-columns: 1fr; }
  .toggle-grid { grid-template-columns: 1fr; }
  .settings-card.full-width { grid-column: auto; }
  .template-item { grid-template-columns: 1fr auto; }
  .template-subject { grid-column: 1/-1; grid-row: 2; }
  body[data-role="employee"] .nav-list { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 590px) {
  .login-screen { align-items: start; padding: 18px 12px; }
  .login-panel { border-radius: 20px; padding: 28px 20px; }
  .login-brand { margin-bottom: 30px; }
  .login-option { gap: 11px; padding: 14px 12px; }
  .login-avatar { width: 39px; height: 39px; }
  .main-content { padding-inline: 12px; }
  .topbar h1 { font-size: 21px; }
  .period-picker-wrap { min-width: 166px; }
  .period-picker-fields { grid-template-columns: minmax(86px,1fr) 68px; }
  .period-picker-fields input, .period-control .month-picker-trigger { font-size: 10px; }
  .hero-card { border-radius: 18px; padding: 24px 20px; }
  .hero-copy h2 { font-size: 29px; }
  .hero-actions, .hero-actions .button { width: 100%; }
  .hours-week-filter { width: 100%; }
  .hours-week-filter button { flex: 0 0 auto; }
  .reminder-rule { grid-template-columns: 1fr; }
  .reminder-rule .check-row { grid-column: auto; }
  .month-batch-blocker { grid-template-columns: 1fr; }
  .month-batch-blocker .small-button { width: 100%; }
  .reminder-schedule-footer { align-items: stretch; flex-direction: column; }
  .reminder-schedule-footer .small-button { width: 100%; }
  .close-card { align-items: flex-start; padding: 15px; }
  .progress-ring { --size: 60px; }
  .progress-ring::before { width: 45px; height: 45px; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .metric-card { min-height: 115px; padding: 16px; }
  .metric-card > strong { font-size: 22px; }
  .panel-heading { align-items: flex-start; padding: 18px; }
  .updated-label { display: none; }
  .view-heading { align-items: flex-start; flex-direction: column; }
  .view-heading .button { width: 100%; }
  .heading-actions { width: 100%; }
  .approval-heading-actions { align-items: stretch; flex-direction: column; }
  .approval-heading-actions .segmented-control { width: 100%; }
  .approval-heading-actions .segmented-control button { flex: 1; }
  .timesheet-actions { align-items: stretch; flex-direction: column; }
  .summary-card { display: block; }
  .approval-card { grid-template-columns: 1fr; }
  .approval-actions { justify-content: stretch; }
  .approval-actions .button { flex: 1; }
  .invoice-toolbar { align-items: flex-start; flex-direction: column; }
  .segmented-control { width: 100%; overflow-x: auto; }
  .employee-details, .form-grid { grid-template-columns: 1fr; }
  .modal { padding: 25px 20px; }
  .modal-form { grid-template-columns: 1fr; }
  .modal-form label.full, .modal-form .full { grid-column: auto; }
  .modal-queue { grid-template-columns: 1fr 1fr; }
  .modal-queue > div { grid-column: 1/-1; grid-row: 1; }
  .modal-queue .small-button { width: 100%; }
  .modal-actions .button { flex: 1; }
  .toast { right: 12px; bottom: 82px; left: 12px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* v0.7: accounts, notifications, employee dashboard and help */
.demo-account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.demo-account-grid .demo-employee-picker { margin-top: 0; }

.topbar-popover { position: relative; }
.notification-button .bell-shape { position: absolute; inset: 11px 12px 12px; border: 2px solid var(--navy); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom: 0; }
.notification-button::after { display: none; }
.notification-button b { position: absolute; top: -6px; right: -6px; display: grid; min-width: 20px; height: 20px; place-items: center; border: 2px solid var(--background); border-radius: 999px; background: var(--mint); color: var(--navy); font-size: 9px; padding: 0 4px; }
.profile-menu-button { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; padding: 0; }
.topbar-avatar, .profile-menu-avatar, .profile-photo-preview { display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: var(--mint); color: var(--navy); font-size: 11px; font-weight: 900; background-position: center; background-size: cover; }
.topbar-avatar { width: 32px; height: 32px; }
.profile-menu-avatar { width: 42px; height: 42px; }
.popover-panel { position: absolute; top: calc(100% + 11px); right: 0; z-index: 60; width: min(360px, calc(100vw - 28px)); overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 24px 55px rgba(13,27,56,.18); }
.popover-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); padding: 16px; }
.popover-heading small, .popover-heading strong { display: block; }
.popover-heading small { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.popover-heading strong { margin-top: 3px; font-size: 13px; }
.icon-button { display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 9px; background: var(--green-light); color: var(--teal); cursor: pointer; font-size: 16px; }
.notification-list { max-height: 365px; overflow-y: auto; }
.notification-item { display: grid; grid-template-columns: 9px 1fr; gap: 11px; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; padding: 14px 16px; text-align: left; }
.notification-item:hover { background: var(--green-light); }
.notification-item-dot { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: transparent; }
.notification-item.is-unread .notification-item-dot { background: var(--mint); }
.notification-item strong, .notification-item small, .notification-item span { display: block; }
.notification-item strong { color: var(--ink); font-size: 11px; }
.notification-item span { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.notification-item small { margin-top: 6px; color: var(--teal); font-size: 9px; }
.notification-empty { color: var(--muted); font-size: 11px; line-height: 1.5; padding: 26px 18px; text-align: center; }
.popover-footer-button { width: 100%; border: 0; background: #f6f9f8; color: var(--teal); cursor: pointer; font-size: 10px; font-weight: 800; padding: 13px; }
.notification-test-actions { border-top: 1px solid var(--line); background: #f6f9f8; padding: 11px 13px; }
.notification-test-actions > small { display: block; margin-bottom: 7px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.notification-test-actions > p { margin: -2px 0 8px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.notification-test-actions > div { display: flex; flex-wrap: wrap; gap: 6px; }
.notification-test-actions button { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--teal); cursor: pointer; font-size: 8px; font-weight: 800; padding: 6px 8px; }
.profile-menu { width: 270px; padding: 8px; }
.profile-menu-person { display: flex; align-items: center; gap: 11px; margin-bottom: 5px; border-radius: 12px; background: var(--green-light); padding: 12px; }
.profile-menu-person strong, .profile-menu-person small { display: block; }
.profile-menu-person strong { font-size: 11px; }
.profile-menu-person small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.profile-menu > button { width: 100%; border: 0; border-radius: 9px; background: transparent; color: var(--ink); cursor: pointer; font-size: 11px; padding: 10px 11px; text-align: left; }
.profile-menu > button:hover { background: #f3f7f6; }
.profile-menu .danger-menu-item { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; color: var(--danger); }

.employee-hero { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(270px,.75fr); gap: 34px; align-items: center; margin: 30px 0 18px; border-radius: 24px; background: linear-gradient(135deg, #0d1b38, #174b55); color: #fff; padding: 36px 40px; box-shadow: 0 18px 45px rgba(13,27,56,.14); }
.employee-hero h2 { margin: 9px 0 8px; color: #fff; font-family: "Roboto Slab", Georgia, serif; font-size: clamp(28px,4vw,40px); }
.employee-hero p { margin: 6px 0 4px; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.5; }
.employee-next-action-label { display: block; margin-top: 22px; color: var(--mint); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.employee-next-action-meta { display: block; margin-bottom: 17px; color: #b9c7d4; font-size: 10px; }
.employee-hero-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.employee-all-actions-button { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.08); color: #fff; }
.employee-all-actions-button:hover { background: rgba(255,255,255,.15); }
.employee-all-actions-button[hidden] { display: none; }
.employee-month-progress { border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: rgba(255,255,255,.07); padding: 21px; }
.employee-month-progress small, .employee-month-progress strong, .employee-month-progress span { display: block; }
.employee-month-progress small { color: #9eb0c1; font-size: 10px; }
.employee-month-progress strong { margin-top: 7px; font-family: "Roboto Slab", Georgia, serif; font-size: 28px; }
.employee-month-progress > span { margin-top: 3px; color: #b9c7d4; font-size: 10px; }
.linear-progress { height: 8px; margin-top: 18px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.12); }
.linear-progress span { height: 100%; border-radius: inherit; background: var(--mint); }
.employee-customer-timesheet-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; align-items: center; margin: 0 0 18px; border: 1px solid var(--line); border-left: 4px solid var(--mint-dark); border-radius: 16px; background: var(--surface); padding: 19px 22px; box-shadow: 0 10px 28px rgba(13,27,56,.07); }
.employee-customer-timesheet-card.is-open { border-color: #e7d4a8; border-left-color: var(--warning); background: var(--warning-bg); }
.employee-customer-timesheet-card.is-complete { border-left-color: var(--mint-dark); }
.employee-customer-timesheet-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 7px; }
.employee-customer-timesheet-heading h3 { margin: 0; color: var(--navy); font-family: "Roboto Slab", Georgia, serif; font-size: 20px; }
.employee-customer-timesheet-card p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.employee-customer-timesheet-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.employee-metrics .compact-metric { font-size: 20px; }
.employee-open-overview { scroll-margin-top: 110px; margin: 0 0 22px; overflow: hidden; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,249,247,.98)); box-shadow: 0 16px 34px rgba(13,27,56,.06); }
.employee-open-overview .panel-heading { align-items: flex-start; }
.employee-open-overview-list { display: grid; gap: 12px; padding: 0 24px 24px; }
.employee-open-month { border: 1px solid #dbe6e2; border-radius: 18px; background: linear-gradient(135deg, #fff, #fbfefd); overflow: hidden; }
.employee-open-month.is-current { border-color: var(--mint-dark); box-shadow: 0 0 0 2px rgba(37,150,124,.08), 0 12px 24px rgba(13,27,56,.08); }
.employee-open-month-heading { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 14px; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; padding: 15px 16px; text-align: left; transition: background .16s ease; }
.employee-open-month-heading:hover { background: #f4faf8; }
.employee-open-month-heading-copy { min-width: 0; }
.employee-open-month-heading-copy strong, .employee-open-month-heading-copy small { display: block; }
.employee-open-month-heading-copy strong { color: var(--navy); font-size: 14px; }
.employee-open-month-heading-copy small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.employee-open-month-heading-side { display: flex; align-items: center; gap: 10px; }
.employee-open-month-chevron { width: 9px; height: 9px; flex: 0 0 auto; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(-45deg); transition: transform .18s ease; }
.employee-open-month-heading[aria-expanded="true"] .employee-open-month-chevron { transform: rotate(45deg); }
.employee-open-month-body { border-top: 1px solid #e4ece8; background: #fbfefd; }
.employee-open-action-list { display: grid; }
.employee-open-action-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: center; padding: 14px 16px; }
.employee-open-action-row + .employee-open-action-row { border-top: 1px solid #e4ece8; }
.employee-open-action-copy span, .employee-open-action-copy strong, .employee-open-action-copy small { display: block; }
.employee-open-action-copy span { color: var(--mint-dark); font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.employee-open-action-copy strong { margin-top: 4px; color: var(--navy); font-size: 12px; }
.employee-open-action-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.employee-open-month-heading .status-pill { min-width: 138px; justify-content: center; }
.employee-history { display: grid; }
.employee-history-head { display: grid; grid-template-columns: 1fr .8fr .8fr auto; gap: 18px; align-items: center; border-top: 1px solid var(--line); background: var(--surface-muted); color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .08em; padding: 10px 24px; text-transform: uppercase; }
.employee-history-row { display: grid; grid-template-columns: 1fr .8fr .8fr auto; gap: 18px; align-items: center; border-top: 1px solid var(--line); padding: 15px 24px; }
.employee-history-row strong, .employee-history-row small { display: block; }
.employee-history-row strong { font-size: 11px; }
.employee-history-row small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.employee-history-current { display: inline-flex; margin-left: 8px; border-radius: 999px; background: var(--green-light); color: var(--mint-dark); font-size: 8px; font-weight: 900; padding: 4px 7px; vertical-align: middle; }

.timesheet-submit-note { margin: 0; color: var(--muted); font-size: 11px; font-style: italic; }
.admin-task-panel { margin-bottom: 18px; overflow: hidden; }
.admin-task-heading { align-items: flex-start; }
.admin-task-heading h3 { margin-bottom: 4px; }
.admin-task-heading p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.admin-task-heading > .small-button { flex: 0 0 auto; }
.admin-task-filters { display: flex; flex-wrap: wrap; gap: 7px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-muted); padding: 11px 24px; }
.admin-task-filters button { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 9px; font-weight: 800; padding: 8px 11px; }
.admin-task-filters button.is-active { border-color: var(--mint-dark); background: var(--green-light); color: var(--mint-dark); }
.admin-task-list { display: grid; }
.admin-task-month + .admin-task-month { border-top: 10px solid var(--surface-muted); }
.admin-task-month-heading { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 18px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface-muted); color: inherit; cursor: pointer; font: inherit; padding: 14px 24px; text-align: left; }
.admin-task-month-heading:hover { background: color-mix(in srgb, var(--surface-muted) 78%, var(--green-light)); }
.admin-task-month-heading:focus-visible { position: relative; z-index: 1; outline: 3px solid color-mix(in srgb, var(--mint-dark) 35%, transparent); outline-offset: -3px; }
.admin-task-month-heading-copy, .admin-task-month-heading-copy > span, .admin-task-month-heading-copy > strong, .admin-task-month-heading small { display: block; }
.admin-task-month-heading-copy > span { color: var(--mint-dark); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.admin-task-month-heading-copy > strong { margin-top: 3px; color: var(--navy); font-family: "Roboto Slab", Georgia, serif; font-size: 16px; }
.admin-task-month-heading small { color: var(--muted); font-size: 9px; font-weight: 700; text-align: right; }
.admin-task-month-heading-side { display: flex; align-items: center; gap: 14px; color: inherit; letter-spacing: normal; text-transform: none; }
.admin-task-month-heading-side small { font-size: 11px; }
.admin-task-month-chevron { width: 9px; height: 9px; flex: 0 0 auto; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(45deg); transition: transform .18s ease; }
.admin-task-month-heading[aria-expanded="false"] .admin-task-month-chevron { transform: rotate(-45deg); }
.admin-task-owner-heading { border-bottom: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .04em; padding: 10px 24px; text-transform: uppercase; }
.admin-task-owner-heading.is-actionable { color: var(--mint-dark); }
.admin-task-owner-heading.is-waiting { color: #a86b13; }
.admin-task-row { display: grid; grid-template-columns: minmax(145px,.7fr) minmax(175px,.8fr) minmax(260px,1.25fr) auto; gap: 16px; align-items: center; border-bottom: 1px solid var(--line); padding: 15px 24px; }
.admin-task-owner-group:last-child .admin-task-row:last-child { border-bottom: 0; }
.admin-task-row.is-actionable { box-shadow: inset 4px 0 0 var(--mint-dark); }
.admin-task-row.is-waiting { box-shadow: inset 4px 0 0 var(--warning); background: color-mix(in srgb, var(--warning-bg) 26%, var(--surface)); }
.admin-task-kind span, .admin-task-kind strong, .admin-task-person strong, .admin-task-person small, .admin-task-note small { display: block; }
.admin-task-kind span { color: var(--mint-dark); font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.admin-task-kind strong { margin-top: 4px; color: var(--navy); font-size: 11px; }
.admin-task-person strong { font-size: 11px; }
.admin-task-person small, .admin-task-note small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.admin-task-note .status-pill { margin-bottom: 4px; }
.admin-task-action { display: flex; justify-content: flex-end; }
.admin-task-action .small-button { white-space: nowrap; }

.open-periods-panel { margin-bottom: 18px; }
.open-periods-intro { margin: 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; padding: 13px 24px; }
.open-periods-list { display: grid; }
.open-period-row { display: grid; grid-template-columns: minmax(140px,.55fr) minmax(250px,1fr) minmax(280px,auto); gap: 18px; align-items: center; border-top: 1px solid var(--line); padding: 15px 24px; }
.open-period-row.is-overdue { box-shadow: inset 3px 0 0 var(--warning); }
.open-period-month strong, .open-period-month small, .open-period-status strong, .open-period-status small { display: block; }
.open-period-month strong { color: var(--navy); font-family: "Roboto Slab", Georgia, serif; font-size: 15px; }
.open-period-month small, .open-period-status small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.open-period-status strong { font-size: 11px; }
.open-period-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.dashboard-action-empty { border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; padding: 24px; }

.summary-hours-input { width: 72px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-weight: 800; text-align: right; padding: 0 8px; }
.employee-scope-filter { width: fit-content; margin: 0 0 16px; }
.team-account-overview { display: grid; grid-template-columns: minmax(220px,.8fr) minmax(360px,1.2fr); gap: 24px; align-items: center; margin-bottom: 16px; padding: 20px 24px; }
.team-account-overview-copy h3 { margin: 4px 0 2px; }
.team-account-overview-copy small, .team-account-group small { color: var(--muted); font-size: 9px; }
.team-account-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.team-account-group { display: flex; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-muted); padding: 12px 14px; }
.team-account-group strong, .team-account-group small { display: block; }
.team-account-group strong { font-size: 11px; }
.team-account-avatars { display: flex; min-width: 48px; padding-left: 8px; }
.team-account-avatar { display: grid; place-items: center; width: 30px; height: 30px; margin-left: -8px; border: 2px solid var(--surface); border-radius: 50%; background: var(--green-light); color: var(--teal); font-size: 8px; font-weight: 900; }
.team-account-avatar.admins { background: var(--navy); color: #fff; }
.employee-card.is-inactive { opacity: .72; }
.employee-card-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.administrators-panel { margin-top: 22px; }
.administrator-list { display: grid; }
.administrator-row { display: grid; grid-template-columns: 1fr auto auto; gap: 15px; align-items: center; border-top: 1px solid var(--line); padding: 14px 24px; }
.account-conflict-focus {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px rgba(66, 196, 164, 0.18);
}
.administrator-person { display: flex; align-items: center; gap: 11px; }
.administrator-person strong, .administrator-person small { display: block; }
.administrator-person strong { font-size: 11px; }
.administrator-person small { margin-top: 3px; color: var(--muted); font-size: 9px; }

.profile-editor { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.profile-photo-preview { width: 82px; height: 82px; border-radius: 22px; font-size: 20px; }
.profile-editor-copy strong, .profile-editor-copy small { display: block; }
.profile-editor-copy strong { font-size: 14px; }
.profile-editor-copy small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.profile-photo-control { margin-top: 9px; }
.profile-photo-control input { width: 100%; font-size: 10px; }
.preference-list { display: grid; gap: 11px; }
.preference-row { display: grid; grid-template-columns: 1fr auto; gap: 15px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 13px; }
.preference-row strong, .preference-row small { display: block; }
.preference-row strong { font-size: 11px; }
.preference-row small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.preference-row select { min-width: 140px; height: 36px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); padding: 0 9px; }
.preference-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--mint-dark); }
.modal-form select { display: block; width: 100%; height: 40px; margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); padding: 0 10px; }
.modal-form .check-row { display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--line); border-radius: 10px; padding: 11px; }
.modal-form .check-row input { width: 17px; height: 17px; margin: 0; accent-color: var(--mint-dark); }

.announcement-list { display: grid; }
.announcement-item { border-top: 1px solid var(--line); padding: 20px 24px; }
.announcement-item.is-draft { background: color-mix(in srgb, var(--background) 72%, var(--surface)); }
.announcement-item.is-withdrawn { border-left: 4px solid var(--warning); background: color-mix(in srgb, var(--warning-bg) 42%, var(--surface)); }
.announcement-item:first-child { border-top: 0; }
.announcement-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.announcement-item-head h3 { margin: 8px 0 0; font-family: "Roboto Slab", Georgia, serif; font-size: 18px; }
.announcement-item-head > small { color: var(--muted); font-size: 9px; white-space: nowrap; }
.announcement-item > p { margin: 13px 0; color: var(--ink); font-size: 12px; line-height: 1.6; white-space: pre-line; }
.announcement-meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.announcement-meta span { border-radius: 10px; background: var(--background); color: var(--muted); font-size: 9px; line-height: 1.45; padding: 10px 12px; }
.announcement-meta strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 10px; }
.announcement-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; margin-top: 13px; }

.recipient-settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 22px 0 12px; }
.recipient-settings-heading h4 { margin: 3px 0 0; font-size: 17px; }
.mail-recipient-settings-list, .mail-route-choice-list { display: grid; gap: 10px; }
.mail-recipient-setting, .mail-route-choice { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-muted); }
.mail-recipient-setting.is-inactive { opacity: .62; }
.mail-recipient-setting strong, .mail-route-choice strong { display: block; }
.mail-recipient-setting small, .mail-route-choice small { display: block; margin-top: 3px; color: var(--muted); }
.mail-acceptance-console { margin-top: 22px; padding: 16px; border: 1px solid rgba(200,125,16,.32); border-radius: 14px; background: var(--surface-muted); }
.mail-acceptance-scenarios { display: grid; gap: 9px; }
.mail-acceptance-scenario { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.mail-acceptance-copy { min-width: 0; }
.mail-acceptance-copy strong, .mail-acceptance-copy small { display: block; }
.mail-acceptance-copy small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.mail-acceptance-label { display: inline-block !important; width: fit-content; margin: 0 0 3px; padding: 2px 7px; border-radius: 999px; background: #fff0dc; color: #9a5a00 !important; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
html[data-theme="dark"] .mail-acceptance-label { background: #4b3520; color: #ffd59b !important; }
.mail-delivery-history { margin-top: 24px; padding-top: 2px; border-top: 1px solid var(--line); }
.mail-delivery-history-list { display: grid; gap: 9px; }
.mail-delivery-history-item { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(180px,.8fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-muted); }
.mail-delivery-history-main, .mail-delivery-history-meta { min-width: 0; }
.mail-delivery-history-main strong, .mail-delivery-history-main small, .mail-delivery-history-meta span { display: block; }
.mail-delivery-history-main strong { overflow-wrap: anywhere; }
.mail-delivery-history-main small, .mail-delivery-history-meta span { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
.mail-delivery-history-state { display: grid; justify-items: end; gap: 5px; text-align: right; }
.mail-delivery-history-state small { color: var(--muted); font-size: 9px; white-space: nowrap; }

@media (max-width: 760px) {
  .mail-acceptance-console { padding: 13px; }
  .mail-acceptance-scenario { grid-template-columns: 1fr; align-items: start; }
  .mail-acceptance-scenario .small-button { width: 100%; min-height: 44px; }
  .mail-delivery-history-item { grid-template-columns: 1fr; align-items: start; }
  .mail-delivery-history-state { justify-items: start; text-align: left; }
  #refresh-mail-delivery-history { min-height: 44px; }
}

.customer-timesheet-upload-panel { margin-top: 22px; }
.customer-timesheet-flow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.customer-timesheet-flow li { display: grid; gap: 4px; align-content: start; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-muted); padding: 12px 14px; }
.customer-timesheet-flow strong, .customer-timesheet-flow span { display: block; }
.customer-timesheet-flow span { color: var(--muted); font-size: 11px; line-height: 1.5; }
.customer-timesheet-upload-grid { display: grid; grid-template-columns: minmax(180px,.65fr) minmax(240px,1fr) minmax(300px,auto); gap: 14px; align-items: end; margin-top: 18px; }
.customer-timesheet-upload-grid label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.customer-timesheet-upload-grid input { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); padding: 9px 11px; }
.customer-timesheet-period-control { display: grid; gap: 7px; }
.customer-timesheet-field-label { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.customer-timesheet-period-fields { display: grid; grid-template-columns: minmax(120px,1fr) 92px; gap: 8px; }
.customer-timesheet-upload-grid .customer-timesheet-period-fields .month-picker-trigger { min-height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); padding: 9px 11px; }
.customer-month-choice-panel { width: min(292px,calc(100vw - 48px)); }
.customer-timesheet-upload-actions { display: flex; gap: 9px; justify-content: flex-end; }
.customer-timesheet-upload-actions .button:disabled { opacity: .48; cursor: not-allowed; }
.customer-timesheet-action-help { grid-column: 1/-1; color: var(--muted); font-size: 10px; line-height: 1.5; }
.customer-timesheet-action-help.is-warning { color: var(--warning); font-weight: 700; }
.customer-timesheet-action-help.is-ready { color: var(--teal); font-weight: 700; }
.customer-timesheet-current { margin-top: 16px; }
.customer-timesheet-current > div, .customer-timesheet-admin-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-muted); padding: 13px 15px; }
.customer-timesheet-current strong, .customer-timesheet-current small, .customer-timesheet-admin-row strong, .customer-timesheet-admin-row small { display: block; }
.customer-timesheet-current small, .customer-timesheet-admin-row small { margin-top: 4px; color: var(--muted); }
.customer-timesheet-mail-preview { display: grid; gap: 10px; margin-top: 16px; border: 1px solid #cde9e1; border-left: 3px solid var(--accent); border-radius: 9px; background: #effaf7; padding: 14px 16px; }
.customer-timesheet-mail-preview-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.customer-timesheet-mail-preview-heading > div { min-width: 0; }
.customer-timesheet-mail-preview span, .customer-timesheet-mail-preview strong { display: block; }
.customer-timesheet-mail-preview span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.customer-timesheet-mail-preview strong { margin-top: 4px; }
.customer-timesheet-mail-preview pre { margin: 0; white-space: pre-wrap; color: var(--ink); font: inherit; line-height: 1.65; }
.customer-timesheet-admin-panel .panel-heading p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.customer-timesheet-admin-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 16px 20px 20px; }
.customer-timesheet-admin-row { display: grid; grid-template-columns: 1fr; gap: 13px; align-items: stretch; min-width: 0; padding: 16px; }
.customer-timesheet-admin-person strong { color: var(--navy); font-size: 13px; }
.customer-timesheet-admin-meta { display: grid; grid-template-columns: minmax(90px,.35fr) minmax(0,1fr); gap: 8px; }
.customer-timesheet-admin-meta > span { min-width: 0; border-radius: 9px; background: var(--surface); padding: 9px 10px; }
.customer-timesheet-admin-meta small { margin: 0 0 4px; font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }
.customer-timesheet-admin-meta strong { overflow-wrap: anywhere; font-size: 10px; }
.customer-timesheet-admin-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.customer-timesheet-admin-row-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.admin-hours-detail { display: grid; gap: 8px; }
.admin-hours-detail > div { display: flex; justify-content: space-between; gap: 20px; }
.admin-hours-detail small { color: var(--muted); }
@media (max-width: 820px) {
  .admin-task-heading { align-items: stretch; flex-direction: column; }
  .admin-task-heading .button { width: 100%; }
  .admin-task-month-heading { align-items: flex-start; flex-direction: column; }
  .admin-task-month-heading small { text-align: left; }
  .admin-task-month-heading-side { width: 100%; justify-content: space-between; }
  .admin-task-row { grid-template-columns: 1fr; gap: 9px; }
  .admin-task-action { justify-content: stretch; }
  .admin-task-action .small-button { width: 100%; }
  .workflow-overview { grid-template-columns: 1fr; gap: 16px; }
  .workflow-progress-card { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 16px; }
  .employee-customer-timesheet-card { grid-template-columns: 1fr; }
  .employee-customer-timesheet-actions { display: grid; grid-template-columns: 1fr; justify-content: stretch; }
  .employee-customer-timesheet-actions .button { width: 100%; }
  .employee-open-month-body-copy { flex-direction: column; align-items: stretch; }
  .employee-open-month-body-copy .small-button { width: 100%; }
  .customer-timesheet-template-grid { grid-template-columns: 1fr; }
  .customer-timesheet-flow { grid-template-columns: 1fr; }
  .customer-timesheet-upload-grid { grid-template-columns: 1fr; }
  .customer-timesheet-upload-grid .button { width: 100%; }
  .customer-timesheet-period-fields { grid-template-columns: minmax(0,1fr) 92px; }
  .customer-timesheet-upload-actions { display: grid; grid-template-columns: 1fr; }
  .customer-timesheet-current > div { grid-template-columns: 1fr; }
  .customer-timesheet-admin-list { grid-template-columns: 1fr; padding: 12px; }
  .customer-timesheet-admin-row { grid-template-columns: 1fr; }
  .customer-timesheet-admin-row-actions { justify-content: flex-start; }
  .customer-timesheet-mail-preview-heading { align-items: stretch; flex-direction: column; }
  .customer-timesheet-mail-preview-heading .small-button { width: 100%; }
}

@media (max-width: 700px) {
  .dashboard-team-panel .panel-heading { align-items: flex-start; }
  .dashboard-team-table-wrap { padding: 0 12px 12px; overflow: visible; }
  .dashboard-team-table thead { display: none; }
  .dashboard-team-table, .dashboard-team-table tbody { display: block; width: 100%; }
  .dashboard-team-table tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; margin: 0 0 10px; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
  .dashboard-team-table td { display: block; min-width: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 12px; white-space: normal; }
  .dashboard-team-table td::before { display: block; margin-bottom: 5px; color: var(--muted); content: attr(data-label); font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .dashboard-team-table td:first-child { grid-column: 1/-1; border: 0; border-radius: 0; }
  .dashboard-team-table td:last-child { grid-column: 1/-1; border: 0; border-top: 1px solid var(--line); border-radius: 0; text-align: left; }
  .dashboard-team-table .dashboard-team-action { width: 100%; min-height: 40px; }
  .customer-timesheet-admin-footer { align-items: stretch; flex-direction: column; }
  .customer-timesheet-admin-row-actions, .customer-timesheet-admin-row-actions .small-button { width: 100%; }
}
.modal-form label.route-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; }
.modal-form .route-toggle input { display: inline-block; width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--mint-dark); }

.invoice-document-preview { padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: #122034; }
.invoice-source-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.invoice-source-columns section h4 { margin: 0 0 10px; padding: 6px 8px; background: #eee; font-size: 13px; }
.invoice-source-field { display: grid; grid-template-columns: minmax(120px,.9fr) minmax(0,1.3fr); gap: 12px; min-height: 25px; font-size: 11px; line-height: 1.45; }
.invoice-source-field strong { font-weight: 500; white-space: pre-line; }
.invoice-source-spacer { height: 12px; }
.invoice-source-spacer.small { height: 5px; }
.invoice-source-intro { margin-top: 58px; font-size: 11px; }
.invoice-source-intro p { margin: 0 0 8px; }
.invoice-source-intro .invoice-source-field { grid-template-columns: 120px 1fr; }
.invoice-source-totals { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; margin: 55px 0 0; font-size: 11px; }
.invoice-source-payment { margin: 58px 0 0; font-size: 11px; line-height: 1.65; }
.invoice-source-closing { margin-top: 50px; font-size: 11px; }
.invoice-source-closing p + p { margin-top: 28px; }
.invoice-preview-head, .invoice-preview-parties, .invoice-preview-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.invoice-preview-head { padding-bottom: 22px; border-bottom: 2px solid #39bda4; }
.invoice-preview-head h3 { margin: 0 0 8px; font-size: 30px; }
.invoice-preview-meta { text-align: right; }
.invoice-preview-parties { margin: 22px 0; }
.invoice-preview-parties p, .invoice-preview-head p { margin: 5px 0; white-space: pre-line; }
.invoice-preview-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.invoice-preview-table th, .invoice-preview-table td { padding: 11px 8px; border-bottom: 1px solid #dfe7e5; text-align: right; }
.invoice-preview-table th:first-child, .invoice-preview-table td:first-child { text-align: left; }
.invoice-preview-totals > div:last-child { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; }
.invoice-preview-total { padding-top: 8px; border-top: 2px solid #122034; font-size: 18px; font-weight: 800; }
.invoice-preview-watermark { margin-top: 24px; padding: 10px; border-radius: 9px; background: #fff5e8; color: #9b5e13; text-align: center; font-weight: 800; }
.invoice-branded-template { overflow: hidden; padding: 0; border: 0; border-radius: 16px; box-shadow: 0 14px 40px rgba(13,27,56,.12); }
.invoice-brand-header { display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; min-height: 174px; background: var(--navy); color: #fff; padding: 28px 34px; }
.invoice-brand-logo img { display: block; width: 155px; max-width: 100%; }
.invoice-brand-logo span { display: block; margin-top: 12px; color: #bfd9d2; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.invoice-brand-title { text-align: right; }
.invoice-brand-title h3 { margin: 0; color: #fff; font-size: 34px; letter-spacing: .02em; }
.invoice-brand-title > small { display: block; }
.invoice-brand-title > small { margin-top: 9px; color: #dceae6; font-size: 10px; }
.invoice-brand-number-line { display: flex; justify-content: flex-end; align-items: baseline; gap: 5px; margin-top: 7px; color: #fff; }
.invoice-brand-number-line span { font-size: 8px; font-weight: 800; }
.invoice-brand-number-line strong { color: #fff; font-size: 14px; }
.invoice-brand-title > span { display: inline-block; margin-top: 11px; border-radius: 999px; background: var(--mint); color: var(--navy); font-size: 8px; font-weight: 900; padding: 7px 12px; }
.invoice-brand-accent { height: 6px; background: var(--mint); }
.invoice-brand-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 28px 34px 0; }
.invoice-brand-party { min-height: 238px; border: 1px solid var(--line); border-radius: 16px; background: #f6f9f8; padding: 22px 24px; }
.invoice-brand-party.recipient { border-color: transparent; background: var(--green-light); }
.invoice-brand-label { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .045em; text-transform: uppercase; }
.invoice-brand-party h4 { margin: 13px 0 9px; color: var(--navy); font-size: 19px; }
.invoice-brand-party p { margin: 0; font-size: 11px; line-height: 1.7; }
.invoice-brand-party .invoice-brand-identity { margin: -4px 0 8px; color: var(--teal); font-size: 9px; font-weight: 800; }
.invoice-brand-party dl { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 7px 12px; margin: 16px 0 0; border-top: 1px solid var(--line); padding-top: 13px; font-size: 10px; }
.invoice-brand-party.recipient dl { grid-template-columns: auto 1fr; border-color: #c6e9e0; }
.invoice-brand-party dt { color: var(--muted); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.invoice-brand-party dd { margin: 0; font-weight: 700; }
.invoice-brand-contact { margin-top: 12px !important; color: var(--teal); font-size: 9px !important; }
.invoice-brand-references { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin: 20px 34px 0; border-radius: 15px; background: var(--navy-soft); color: #fff; padding: 20px 24px; }
.invoice-brand-references span, .invoice-brand-references strong { display: block; }
.invoice-brand-references span { color: #a9c6c0; font-size: 7px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.invoice-brand-references strong { margin-top: 10px; color: #fff; font-size: 15px; }
.invoice-brand-intro { margin: 24px 34px 0; font-size: 11px; line-height: 1.65; }
.invoice-brand-intro p { margin: 0 0 5px; }
.invoice-branded-template .invoice-preview-table { width: calc(100% - 68px); margin: 24px 34px 0; }
.invoice-branded-template .invoice-preview-table th { border: 0; background: var(--navy); color: #fff; font-size: 9px; text-transform: uppercase; }
.invoice-branded-template .invoice-preview-table th:first-child { border-radius: 10px 0 0 10px; }
.invoice-branded-template .invoice-preview-table th:last-child { border-radius: 0 10px 10px 0; }
.invoice-branded-template .invoice-preview-table td { border: 0; background: #f6f9f8; font-size: 11px; }
.invoice-branded-template .invoice-preview-table td:first-child, .invoice-branded-template .invoice-preview-table td:last-child { font-weight: 800; }
.invoice-brand-totals { display: grid; grid-template-columns: 1fr auto; gap: 10px 24px; width: 46%; margin: 24px 34px 0 auto; font-size: 10px; }
.invoice-brand-totals span { color: var(--muted); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.invoice-brand-totals strong { text-align: right; }
.invoice-brand-totals .invoice-preview-total { border-color: var(--mint); color: var(--navy); }
.invoice-brand-payment { margin: 28px 34px 0; border-radius: 15px; background: var(--green-light); padding: 18px 22px; }
.invoice-brand-payment p { margin: 9px 0 0; color: var(--teal); font-size: 10px; line-height: 1.65; }
.invoice-brand-closing { margin: 26px 34px; font-size: 11px; }
.invoice-brand-closing p { margin: 0 0 8px; }
.invoice-brand-closing strong { color: var(--navy); }
.invoice-brand-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 54px; background: var(--navy); color: #dceae6; font-size: 8px; padding: 14px 34px; }
.invoice-brand-footer strong { color: var(--mint); }
.announcement-withdrawal-note { border: 1px solid color-mix(in srgb, var(--warning) 32%, var(--line)); border-radius: 10px; background: var(--warning-bg); color: var(--warning); font-size: 10px; line-height: 1.55; margin: 13px 0; padding: 11px 12px; }
.announcement-withdrawal-note strong { display: block; margin-bottom: 3px; }
.announcement-archive-filter { width: fit-content; margin: 0 0 16px; }
.employee-announcement-list { display: grid; }
.employee-announcement-card { border-top: 1px solid var(--line); padding: 20px 24px; }
.employee-announcement-card:first-child { border-top: 0; }
.employee-announcement-card.is-unread { box-shadow: inset 4px 0 0 var(--mint-dark); }
.employee-announcement-card.is-withdrawn { background: color-mix(in srgb, var(--warning-bg) 40%, var(--surface)); }
.employee-announcement-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.employee-announcement-card h3 { margin: 8px 0 0; font-family: "Roboto Slab", Georgia, serif; font-size: 18px; }
.employee-announcement-card header > small { color: var(--muted); font-size: 9px; white-space: nowrap; }
.employee-announcement-card > p { color: var(--ink); font-size: 12px; line-height: 1.65; margin: 13px 0; white-space: pre-line; }
.employee-announcement-card footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 9px; }
.recipient-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.recipient-choice { display: flex !important; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.recipient-choice input { width: 17px !important; height: 17px !important; margin: 0 !important; accent-color: var(--mint-dark); }
.recipient-choice strong, .recipient-choice small { display: block; }
.recipient-choice strong { color: var(--ink); font-size: 10px; }
.recipient-choice small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.fixed-audience { border: 1px solid var(--line); border-radius: 10px; background: var(--background); padding: 12px; }
.fixed-audience strong, .fixed-audience span { display: block; }
.fixed-audience strong { color: var(--ink); font-size: 10px; }
.fixed-audience span { margin-top: 4px; font-size: 9px; }

.help-launcher { position: fixed; right: 24px; bottom: 22px; z-index: 80; display: flex; min-height: 48px; align-items: center; gap: 8px; border: 0; border-radius: 999px; background: var(--navy); color: #fff; cursor: pointer; box-shadow: 0 16px 38px rgba(13,27,56,.25); padding: 6px 15px 6px 7px; }
.help-launcher > span { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; background: var(--mint); color: var(--navy); font-size: 16px; font-weight: 900; }
.help-launcher strong { font-size: 11px; }
.help-panel { position: fixed; right: 24px; bottom: 82px; z-index: 90; display: grid; width: min(420px, calc(100vw - 28px)); max-height: min(700px, calc(100vh - 110px)); grid-template-rows: auto auto minmax(120px,1fr) auto; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 28px 70px rgba(13,27,56,.24); }
.help-panel header { display: flex; align-items: center; justify-content: space-between; gap: 15px; background: linear-gradient(135deg, #0d1b38, #174b55); color: #fff; padding: 18px; }
.help-panel header small, .help-panel header strong { display: block; }
.help-panel header small { color: #9eb0c1; font-size: 9px; text-transform: uppercase; }
.help-panel header strong { margin-top: 3px; font-size: 13px; }
.help-header-actions { display: flex; align-items: center; gap: 8px; }
.help-clear { border: 0; background: transparent; color: #d7e7e7; cursor: pointer; font: inherit; font-size: 10px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.help-clear:hover { color: #fff; }
.help-messages { display: grid; align-content: start; gap: 10px; overflow-y: auto; background: #f6f9f8; padding: 15px; }
.help-message { max-width: 88%; border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 4px 14px rgba(13,27,56,.05); font-size: 11px; line-height: 1.55; padding: 11px 13px; }
.help-message.user { justify-self: end; background: var(--navy); color: #fff; }
.help-message p { margin: 0; white-space: pre-line; }
.help-message a { display: inline-block; margin-top: 9px; color: var(--teal); font-weight: 800; }
.help-message .small-button { margin-top: 9px; }
.help-contact-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.help-contact-actions a, .help-contact-actions button { display: inline-flex; align-items: center; width: auto; margin: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--teal); cursor: pointer; font: inherit; font-size: 9px; font-weight: 800; padding: 7px 9px; text-decoration: none; }
.help-contact-actions a:hover, .help-contact-actions button:hover { border-color: var(--teal); }
.help-faq { border-top: 1px solid var(--line); background: var(--surface); padding: 12px; }
.help-faq-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.help-faq-heading strong { color: var(--navy); font-size: 11px; }
.help-faq-heading small { color: var(--muted); font-size: 8px; }
.help-suggestions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 9px; max-height: 150px; overflow-y: auto; }
.help-suggestions button { display: flex; min-height: 36px; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--teal); cursor: pointer; font-size: 9px; font-weight: 700; padding: 8px 10px; text-align: left; }
.help-suggestions button::after { content: "›"; font-size: 14px; line-height: 1; }
.help-suggestions button:hover { border-color: var(--teal); background: var(--green-light); }
.help-suggestions [data-help-topic="contact"] { grid-column: 1 / -1; border-color: transparent; background: var(--green-light); color: var(--navy); font-weight: 900; }
.help-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; border-bottom: 1px solid var(--line); background: var(--surface); padding: 11px; }
.help-form input { min-width: 0; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); padding: 0 11px; }
.help-form button { border: 0; border-radius: 10px; background: var(--mint); color: var(--navy); cursor: pointer; font-size: 10px; font-weight: 900; padding: 0 14px; }
.help-inline-topics { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.help-inline-topics button { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--navy); cursor: pointer; font-size: 10px; font-weight: 900; padding: 8px 11px; text-align: left; }
.help-inline-topics button:hover { border-color: var(--mint); background: var(--green-light); }

html[data-theme="dark"] { color-scheme: dark; --ink: #e7eef4; --muted: #9aaab7; --line: #2a3a4a; --surface: #111d2b; --background: #09131f; --green-light: #15352f; --teal: #64d7bd; --mint-dark: #51caae; --warning-bg: #332618; --warning: #efb76f; --shadow: 0 14px 35px rgba(0,0,0,.35); }
html[data-theme="dark"] .login-screen { background: radial-gradient(circle at 15% 15%, rgba(58,189,157,.17), transparent 28%), #07111d; }
html[data-theme="dark"] .login-panel,
html[data-theme="dark"] .approval-card,
html[data-theme="dark"] .invoice-month-overview,
html[data-theme="dark"] .invoice-status-guide > div,
html[data-theme="dark"] .month-batch-card,
html[data-theme="dark"] .month-batch-card[data-state="blocked"],
html[data-theme="dark"] .month-batch-card[data-state="ready"],
html[data-theme="dark"] .mail-route-guide article,
html[data-theme="dark"] .employee-card,
html[data-theme="dark"] .small-button,
html[data-theme="dark"] .button-ghost { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .invoice-month-overview[data-state="blocked"],
html[data-theme="dark"] .invoice-month-overview[data-state="ready"],
html[data-theme="dark"] .month-batch-blocker { background: rgba(9,19,31,.52); }
html[data-theme="dark"] .invoice-month-overview-item { border-color: var(--line); background: #0d1825; color: var(--ink); }
html[data-theme="dark"] .invoice-month-overview-item:hover,
html[data-theme="dark"] .invoice-month-overview-item.is-current { background: #10231f; }
html[data-theme="dark"] .invoice-month-overview-item.is-blocked.is-current { background: var(--warning-bg); }
html[data-theme="dark"] .invoice-month-overview-empty { background: rgba(9,19,31,.42); }
html[data-theme="dark"] .month-batch-progress::before { background: #263746; }
html[data-theme="dark"] .topbar { border-color: var(--line); background: rgba(9,19,31,.92); }
html[data-theme="dark"] .demo-employee-picker,
html[data-theme="dark"] .modal-summary,
html[data-theme="dark"] .employee-details div,
html[data-theme="dark"] .segmented-control,
html[data-theme="dark"] .help-messages { background: #0d1825; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .account-picker-trigger,
html[data-theme="dark"] .account-choice-panel,
html[data-theme="dark"] .hours-table input,
html[data-theme="dark"] .form-grid input,
html[data-theme="dark"] .form-grid select,
html[data-theme="dark"] .modal-form input,
html[data-theme="dark"] .modal-form textarea { border-color: var(--line); background: #0c1723; color: var(--ink); }
html[data-theme="dark"] .account-choice-panel button strong { color: var(--ink); }
html[data-theme="dark"] .main-content h1,
html[data-theme="dark"] .view-heading h2,
html[data-theme="dark"] .panel h3,
html[data-theme="dark"] .metric-card > strong,
html[data-theme="dark"] .data-table strong,
html[data-theme="dark"] .summary-card dd,
html[data-theme="dark"] .template-person strong,
html[data-theme="dark"] .template-subject strong,
html[data-theme="dark"] .approval-data strong,
html[data-theme="dark"] .approval-person strong { color: var(--ink); }
html[data-theme="dark"] .data-table th,
html[data-theme="dark"] .data-table td,
html[data-theme="dark"] .hours-table th,
html[data-theme="dark"] .hours-table td,
html[data-theme="dark"] .summary-card dl div { border-color: var(--line); }
html[data-theme="dark"] .hours-table th,
html[data-theme="dark"] .hours-table .outside-month { background: #0d1825; }
html[data-theme="dark"] .hours-table tbody tr:hover { background: #0e1a27; }
html[data-theme="dark"] .outside-month-mark { background: #111d2b; color: #607181; }
html[data-theme="dark"] .help-faq-heading strong { color: var(--ink); }
html[data-theme="dark"] .metric-card.attention { border-color: #5f4327; background: linear-gradient(150deg,#111d2b,#211a12); }
html[data-theme="dark"] .modal { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .correction-banner { border-color: #60482a; }
html[data-theme="dark"] .mail-route-guide article.is-payroll { border-color: #28584d; background: #0e201d; }
html[data-theme="dark"] .hours-view-toolbar,
html[data-theme="dark"] .reminder-rule { border-color: var(--line); background: #0d1825; }
html[data-theme="dark"] .reminder-choice-trigger, html[data-theme="dark"] .reminder-choice-panel { border-color: var(--line); background: #101d2d; color: var(--ink); }
html[data-theme="dark"] .reminder-schedule-summary span { background: rgba(13,27,56,.38); }
html[data-theme="dark"] .customer-timesheet-mail-preview { border-color: #28584d; background: #0e201d; }

@media (max-width: 1100px) {
  .employee-hero { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .notification-button { display: block; }
  .profile-menu-button { width: 38px; height: 38px; }
  .topbar-actions { gap: 6px; }
  .employee-history-row { grid-template-columns: 1fr 1fr; }
  .employee-history-head { display: none; }
  .administrator-row { grid-template-columns: 1fr auto; }
  .mail-recipient-setting, .mail-route-choice { grid-template-columns: 1fr auto; }
  .invoice-preview-head, .invoice-preview-parties, .invoice-preview-totals, .invoice-source-columns { grid-template-columns: 1fr; }
  .invoice-preview-meta { text-align: left; }
  .invoice-source-field { grid-template-columns: 1fr; gap: 2px; }
  .invoice-source-intro { margin-top: 30px; }
  body[data-role="employee"] .nav-list { grid-template-columns: repeat(3,1fr); }
  .mail-route-guide { grid-template-columns: 1fr; }
  .announcement-meta { grid-template-columns: 1fr; }
}

@media (max-width: 590px) {
  .demo-account-grid { grid-template-columns: 1fr; }
  .topbar { gap: 8px; }
  .topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
  .period-control { order: 2; }
  .notification-button { width: 38px; height: 38px; }
  .profile-menu-button { width: 38px; height: 38px; }
  .employee-hero { border-radius: 18px; padding: 26px 20px; }
  .employee-open-action-row { grid-template-columns: 1fr; }
  .employee-open-action-row .small-button { width: 100%; }
  .employee-hero-actions .button { width: 100%; }
  .employee-history-row { grid-template-columns: 1fr; }
  .admin-task-month-heading, .admin-task-owner-heading, .admin-task-row { padding-inline: 18px; }
  .correction-banner.dashboard-correction { grid-template-columns: auto 1fr; }
  .correction-banner.dashboard-correction .button { grid-column: 1/-1; width: 100%; }
  .open-period-row { grid-template-columns: 1fr; }
  .open-period-actions { justify-content: stretch; }
  .open-period-row .small-button { width: 100%; }
  .administrator-row { grid-template-columns: 1fr; }
  .team-account-overview, .team-account-groups { grid-template-columns: 1fr; }
  .mail-recipient-setting, .mail-route-choice { grid-template-columns: 1fr; }
  .recipient-settings-heading { align-items: flex-start; flex-direction: column; }
  .invoice-document-preview { padding: 18px; }
  .invoice-branded-template { padding: 0; }
  .invoice-brand-header, .invoice-brand-parties { grid-template-columns: 1fr; }
  .invoice-brand-header { gap: 22px; padding: 26px 22px; }
  .invoice-brand-title { text-align: left; }
  .invoice-brand-number-line { justify-content: flex-start; }
  .invoice-brand-parties { padding: 22px 18px 0; }
  .invoice-brand-party { min-height: auto; }
  .invoice-brand-references { grid-template-columns: 1fr; margin-inline: 18px; }
  .invoice-brand-intro { margin-inline: 18px; }
  .invoice-branded-template .invoice-preview-table { width: calc(100% - 36px); margin-inline: 18px; }
  .invoice-brand-totals { width: auto; margin-inline: 18px; }
  .invoice-brand-payment { margin-inline: 18px; }
  .invoice-brand-closing { margin-inline: 18px; }
  .invoice-brand-footer { align-items: flex-start; flex-direction: column; padding-inline: 18px; }
  .announcement-item { padding: 18px; }
  .announcement-item-head { flex-direction: column; }
  .employee-announcement-card { padding: 18px; }
  .employee-announcement-card header, .employee-announcement-card footer { align-items: flex-start; flex-direction: column; }
  .announcement-archive-filter { width: 100%; overflow-x: auto; }
  .recipient-choice-grid { grid-template-columns: 1fr; }
  .help-launcher { right: 12px; bottom: 78px; }
  .help-panel { right: 12px; bottom: 136px; max-height: calc(100vh - 155px); }
  .help-suggestions { grid-template-columns: 1fr; }
  .help-suggestions [data-help-topic="contact"] { grid-column: 1; }
}

/* v0.9.45 · mobiele bediening: dezelfde functies, maar met duidelijke touch-layouts. */
@media (max-width: 720px) {
  html, body { overflow-x: hidden; }

  .main-content {
    width: 100%;
    padding: 0 14px 96px;
  }

  .topbar {
    display: grid;
    min-height: auto;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 10px;
    padding: 13px 0 12px;
  }

  .mobile-topbar-home {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .mobile-brand-home,
  .mobile-role-switch {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    color: var(--navy);
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    padding: 8px 11px;
    box-shadow: 0 5px 18px rgba(13,27,56,.04);
  }

  .mobile-brand-home {
    max-width: min(190px, 58vw);
    gap: 9px;
  }

  .mobile-brand-home img {
    width: 72px;
    max-width: 35vw;
    height: auto;
    object-fit: contain;
  }

  .mobile-brand-home span {
    white-space: nowrap;
  }

  .mobile-role-switch {
    flex: 0 0 auto;
    background: var(--green-light);
    color: var(--teal);
  }

  .topbar-title {
    min-width: 0;
  }

  .mobile-version-badge {
    display: inline-flex;
    margin-top: 4px;
    color: var(--muted);
  }

  .topbar h1 {
    overflow: hidden;
    max-width: 100%;
    font-size: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-actions {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0,1fr) auto auto;
    gap: 8px;
    align-items: center;
  }

  .topbar-quick-reset:not([hidden]) {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    justify-self: start;
    padding-inline: 14px;
  }

  .period-control {
    order: -1;
    grid-column: 1 / -1;
    width: 100%;
    min-height: 54px;
    justify-content: space-between;
    gap: 5px;
    padding: 4px;
  }

  .period-control > button {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    font-size: 24px;
  }

  .period-picker-wrap {
    flex: 1 1 auto;
    min-width: 0;
    padding: 3px 5px;
  }

  .period-picker-caption {
    font-size: 7px;
    text-align: center;
  }

  .period-picker-fields {
    grid-template-columns: minmax(0,1fr) 76px;
    gap: 5px;
  }

  .period-control .month-picker-trigger,
  .period-picker-fields input {
    min-height: 32px;
    font-size: 12px;
    text-align: center;
  }

  .month-choice-panel {
    left: 50%;
    width: min(330px, calc(100vw - 32px));
    max-height: 58vh;
    grid-template-columns: repeat(2, minmax(0,1fr));
    overflow-y: auto;
    transform: translateX(-50%);
  }

  .period-control .month-choice-panel button,
  .customer-timesheet-upload-grid .month-choice-panel button {
    min-height: 42px;
    font-size: 11px;
  }

  .notification-button,
  .profile-menu-button {
    width: 42px;
    height: 42px;
  }

  .popover-panel {
    position: fixed;
    top: 82px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100vh - 170px);
    overflow-y: auto;
  }

  .view-heading {
    gap: 12px;
    margin: 24px 0 16px;
  }

  .view-heading h2 {
    font-size: clamp(25px, 8vw, 33px);
    line-height: 1.08;
  }

  .view-heading p {
    font-size: 12px;
  }

  .heading-actions,
  .heading-actions .button,
  .heading-actions .small-button {
    width: 100%;
  }

  .invoice-month-overview,
  .month-batch-card,
  .panel,
  .metric-card,
  .employee-customer-timesheet-card,
  .dashboard-next-action-card {
    border-radius: 15px;
  }

  .invoice-month-overview {
    padding: 14px;
  }

  .invoice-month-overview-head {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .invoice-month-overview-copy h3 {
    font-size: 17px;
  }

  .invoice-month-overview-list {
    grid-template-columns: 1fr;
  }

  .invoice-month-overview-item {
    min-height: 74px;
    gap: 10px;
    padding: 12px;
  }

  .invoice-month-overview-item strong {
    white-space: normal;
  }

  .invoice-month-overview-action {
    align-self: stretch;
    justify-items: end;
  }

  .invoice-detail-toggle {
    width: 100%;
    min-height: 42px;
    margin-top: 10px;
  }

  .month-batch-card {
    grid-template-columns: 1fr;
    padding: 15px;
  }

  .month-batch-title-row h3 {
    font-size: 18px;
  }

  .month-batch-progress {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .month-batch-progress > strong {
    justify-self: start;
  }

  .invoice-status-guide {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .invoice-status-guide > div {
    min-height: 58px;
    padding: 12px;
  }

  .invoice-toolbar {
    gap: 11px;
    padding: 13px 14px;
  }

  .invoice-toolbar .segmented-control {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    overflow: visible;
  }

  .invoice-toolbar .segmented-control button {
    min-height: 40px;
    padding-inline: 8px;
    white-space: normal;
  }

  .table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .invoice-table {
    min-width: 0;
  }

  .invoice-table thead {
    display: none;
  }

  .invoice-table,
  .invoice-table tbody,
  .invoice-table tr,
  .invoice-table td {
    display: block;
    width: 100%;
  }

  .invoice-table tr {
    border-top: 1px solid var(--line);
    padding: 12px 14px;
  }

  .invoice-table tr:first-child {
    border-top: 0;
  }

  .invoice-table td {
    display: grid;
    grid-template-columns: minmax(94px,.42fr) minmax(0,1fr);
    gap: 12px;
    align-items: start;
    border: 0;
    padding: 8px 0;
    white-space: normal;
  }

  .invoice-table td::before {
    color: var(--muted);
    content: "";
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .invoice-table td:nth-child(1)::before { content: "Factuur"; }
  .invoice-table td:nth-child(2)::before { content: "Consultant"; }
  .invoice-table td:nth-child(3)::before { content: "Broker"; }
  .invoice-table td:nth-child(4)::before { content: "Bedrag"; }
  .invoice-table td:nth-child(5)::before { content: "Status"; }
  .invoice-table td:nth-child(6)::before { content: "Actie"; }

  .invoice-action {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    justify-items: stretch;
  }

  .invoice-action .small-button,
  .invoice-action-note {
    width: 100%;
    min-height: 40px;
    text-align: center;
  }

  .admin-task-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px 14px;
    -webkit-overflow-scrolling: touch;
  }

  .admin-task-filters button {
    flex: 0 0 auto;
    min-height: 39px;
  }

  .admin-task-month-heading,
  .admin-task-owner-heading,
  .admin-task-row,
  .open-period-row,
  .open-periods-intro,
  .administrator-row,
  .announcement-item,
  .employee-announcement-card {
    padding-inline: 14px;
  }

  .admin-task-row {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .admin-task-kind strong,
  .admin-task-person strong,
  .admin-task-note small,
  .month-batch-blocker-copy strong,
  .month-batch-blocker-owner strong {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .button,
  .small-button,
  .text-button,
  .metric-link {
    min-height: 42px;
  }

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

  .metric-card {
    min-height: auto;
    padding: 16px;
  }

  .hero-card,
  .employee-hero {
    min-height: auto;
    margin-top: 16px;
    padding: 22px 18px;
  }

  .hero-copy h2,
  .employee-hero h2 {
    font-size: clamp(27px, 9vw, 34px);
  }

  .employee-customer-timesheet-card,
  .employee-history-row {
    grid-template-columns: 1fr;
  }

  .employee-customer-timesheet-actions {
    justify-content: stretch;
  }

  .modal-backdrop {
    align-items: end;
    padding: 10px;
  }

  .modal {
    width: 100%;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    border-radius: 20px 20px 16px 16px;
    padding: 24px 18px 18px;
  }

  .modal h2 {
    padding-right: 38px;
    font-size: 23px;
    line-height: 1.12;
  }

  .modal-summary > div {
    flex-direction: column;
    gap: 4px;
  }

  .modal-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .modal-actions .button {
    width: 100%;
  }

  .modal-queue {
    grid-template-columns: 1fr 1fr;
  }

  .modal-queue > div {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .help-launcher {
    right: 12px;
    bottom: 78px;
    min-height: 44px;
    padding-right: 8px;
  }

  .help-launcher strong {
    display: none;
  }

  .help-panel {
    right: 12px;
    bottom: 132px;
    left: 12px;
    width: auto;
    max-height: calc(100vh - 150px);
  }
}

@media (max-width: 390px) {
  .main-content { padding-inline: 10px; }
  .mobile-brand-home { max-width: 54vw; }
  .mobile-brand-home img { width: 60px; }
  .mobile-brand-home span { font-size: 10px; }
  .mobile-role-switch { padding-inline: 9px; }
  .period-picker-fields { grid-template-columns: minmax(0,1fr) 66px; }
  .period-control > button { width: 38px; flex-basis: 38px; }
  .topbar-actions { grid-template-columns: minmax(0,1fr) auto auto; }
  .invoice-month-overview-item { grid-template-columns: 1fr; }
  .invoice-month-overview-action { justify-items: start; }
  .invoice-toolbar .segmented-control { grid-template-columns: 1fr; }
  .invoice-table td { grid-template-columns: 1fr; gap: 3px; }
}