/* The "Ledger" design system. docs/design-system.md is the reference; the two
   rules worth repeating here are that no stylesheet may write a colour literal
   (dark mode is one token block precisely because of that), and that a shadow
   means "this element floats above the page" and so belongs only to the palette,
   modals, popovers, toasts and the datepicker — never to anything in the flow. */
:root {
  color-scheme: light;
  /* Ground and ink. The neutrals carry a blue cast rather than a warm grey one:
     this is a navy-branded workspace, the ground should belong to it, and a cool
     light ground reads airier than a warm one over a whole screen of empty space. */
  --paper: #eef2f8;
  --sheet: #ffffff;
  --sheet-2: #f5f8fc;
  --ink: #16202e;
  --ink-2: #4f5b6b;
  --ink-3: #636e7d;
  --rule: #dbe3ee;
  --rule-strong: #c3cfdf;
  --field-border: #7a8899;
  /* The one accent */
  --accent: #11487d;
  --accent-hover: #0d3a66;
  --accent-soft: #e2ecf8;
  --accent-soft-2: #cddff1;
  --accent-ink: #ffffff;
  /* The one warm colour, reserved for real attention */
  --flag: #af512e;
  --flag-soft: #fbeee8;
  /* Narrow signals */
  --positive: #2e6f53;
  --positive-soft: #e6f1ea;
  --warn: #8a6220;
  --warn-soft: #f7f0e2;
  --danger: #a5372f;
  --danger-soft: #fbeae7;
  /* The signed-out brand panel. It is one fixed navy surface in BOTH themes — a
     dark panel does not need re-darkening — so it carries its own small palette
     rather than the theme's, and the no-literals rule still holds. */
  --brand-panel-top: #123252;
  --brand-panel-mid: #0d2744;
  --brand-panel-deep: #061524;
  --brand-panel-ink: #ffffff;
  --brand-panel-ink-2: #eaf1fa;
  --brand-panel-accent: #9fc6ee;
  /* Structure */
  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --focus: 0 0 0 2px var(--sheet), 0 0 0 4px var(--accent);
  /* Shadow is only for things that leave the page. */
  --shadow-pop: 0 1px 2px rgba(16, 32, 56, .07), 0 12px 32px -8px rgba(16, 32, 56, .18);
  --shadow-pop-lg: 0 2px 4px rgba(16, 32, 56, .06), 0 28px 64px -16px rgba(16, 32, 56, .26);
  /* Type */
  --font-display: "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, sans-serif;
  --font-text: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, sans-serif;
  /* Compatibility aliases. The whole stylesheet already spoke in these names, so
     re-pointing them is what carries the new palette into every existing rule. */
  --canvas: var(--paper);
  --panel: var(--sheet);
  --soft: var(--sheet-2);
  --line: var(--rule);
  --muted: var(--ink-2);
  --forest-950: #0a2a4c;
  --forest-900: var(--accent);
  --forest-700: var(--accent);
  --mint: var(--accent-soft);
  --mint-bright: var(--accent-soft-2);
  --coral: var(--flag);
  --gold: var(--warn);
  --shadow: none;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.55;
  /* Half this app's content is dates, counts, times and extension numbers.
     Proportional figures make every one of those columns ragged. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
}
/* Capped deliberately. An instrument opened forty times a day does not want a
   hero on every screen; the old scale spent 190px before any content. */
h1 { margin-bottom: .25rem; font-size: 1.375rem; line-height: 1.25; letter-spacing: -.018em; }
h2 { margin-bottom: .25rem; font-size: 1rem; line-height: 1.35; letter-spacing: -.008em; }
h3 { margin-bottom: .4rem; font-size: .875rem; line-height: 1.4; }
small { color: var(--ink-3); font-size: .8125rem; }
/* One ring, everywhere. Components that replace it must replace it, not drop it. */
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Components that set their own display (.button is inline-flex, panels are
   grid) otherwise beat the browser's [hidden] rule and stay on screen while
   scripts believe they are hidden. One global rule settles it; a component that
   deliberately reveals a hidden element still wins on specificity. */
[hidden] { display: none !important; }
/* Shown when the workspace notices the session has ended, so nobody is left
   typing into a tab that quietly signed out overnight. */
.session-expired-banner {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--warn);
  background: var(--warn-soft);
  box-shadow: var(--shadow-pop);
  font-size: .82rem;
}
.session-expired-banner p { margin: 0; }
.session-expired-banner .button { flex: 0 0 auto; }
@media (max-width: 620px) {
  .session-expired-banner { flex-direction: column; text-align: center; }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.muted { color: var(--ink-2); }
/* Every view emits one of these above its heading. Tracked-out capitals above
   every heading in an app is the loudest thing on a screen that has nothing
   urgent to say; sentence case at meta weight keeps the label and drops the
   shouting, without touching a line of markup. The colour stays the accent: an
   e2e test pins .eyebrow to --future-accent-text as a readability contract, and
   it was never the colour that shouted. */
.eyebrow {
  margin-bottom: .1rem;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 26px 20px 20px;
  color: var(--ink);
  background: var(--sheet);
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.015em;
}
.brand:hover { color: var(--ink); text-decoration: none; }
.brand > span:last-child { display: flex; flex-wrap: wrap; }
.brand strong { color: var(--accent); }
.brand small {
  flex: 0 0 100%;
  margin-top: -1px;
  color: var(--ink-3);
  font-family: var(--font-text);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 46px;
}
.brand-logo {
  grid-area: 1 / 1;
  width: 44px;
  height: 44px;
  display: block;
  object-fit: contain;
}
.brand-logo-dark { display: none; }
html[data-theme="dark"] .brand-logo-light { display: none; }
html[data-theme="dark"] .brand-logo-dark { display: block; }
.main-nav {
  min-height: 0;
  flex: 1;
  margin-top: 32px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}
.main-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 3px 0;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: .8125rem;
  font-weight: 500;
  transition: color .12s ease, background .12s ease;
}
.main-nav a span { width: 20px; color: currentColor; font-size: 1.2rem; text-align: center; }
.main-nav a .nav-icon { height: 20px; display: grid; place-items: center; flex: 0 0 20px; }
.main-nav a .nav-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.main-nav a:hover { color: var(--ink); background: var(--sheet-2); text-decoration: none; }
.main-nav a.active {
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 2px 0 var(--accent);
  font-weight: 600;
  scroll-margin-block: 24px;
}
.mobile-nav-toggle,
.mobile-dock { display: none; }
.nav-label {
  margin: 20px 12px 6px;
  color: var(--ink-3);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.sidebar-footer { margin-top: auto; }
.install-button {
  width: 100%;
  margin-bottom: 14px;
  padding: 9px;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-sm);
  color: var(--accent);
  background: transparent;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
}
.user-summary { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--rule); }
.user-summary > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.user-summary strong { overflow: hidden; color: var(--ink); font-size: .8125rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.user-summary small { overflow: hidden; color: var(--ink-2); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.avatar, .mini-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--forest-950);
  background: var(--mint-bright);
  font-weight: 700;
  text-transform: uppercase;
}
.avatar { width: 34px; height: 34px; }
.mini-avatar { width: 28px; height: 28px; font-size: .72rem; }
.account-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 6px;
  margin: 11px 0 0;
}
.account-links a, .account-links button {
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  background: var(--sheet);
  font-size: .6875rem;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}
.account-links form { display: flex; margin: 0; }
.account-links a:hover, .account-links button:hover { border-color: var(--rule-strong); color: var(--ink); background: var(--sheet-2); text-decoration: none; }
.main-content { min-width: 0; padding: 42px clamp(24px, 4vw, 64px) 70px; }
@media (min-width: 851px) {
  body.app-body {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .app-body .app-shell {
    height: 100dvh;
    min-height: 0;
  }
  .app-body .sidebar {
    position: relative;
    height: 100dvh;
  }
  .app-body .main-content {
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
  }
  body.app-body.modal-open .main-content { overflow: hidden; }
}
/* One row: the title and its description share a baseline and the actions sit
   right. The topbar already names the route, so repeating it as a hero cost
   every page about 120px before any content appeared. */
.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 24px;
  max-width: 1400px;
  margin: 0 auto 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.page-header > div:first-child { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.page-header h1 { margin-bottom: 0; }
.page-header p:not(.eyebrow) { max-width: 72ch; margin-bottom: 0; color: var(--ink-2); font-size: .8125rem; }
.page-header .eyebrow { flex: 0 0 100%; margin-bottom: 0; order: -1; }
.panel {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--sheet);
}
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.panel-heading p, .panel-heading h2 { margin-bottom: 0; }
.panel-heading .eyebrow { margin-bottom: 0; }
.panel-heading > a { font-size: .8125rem; font-weight: 600; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.button.primary { color: var(--accent-ink); background: var(--accent); }
.button.primary:hover { color: var(--accent-ink); background: var(--accent-hover); text-decoration: none; }
.button.secondary { border-color: var(--field-border); color: var(--ink); background: var(--sheet); }
.button.secondary:hover { border-color: var(--ink-3); color: var(--ink); background: var(--sheet-2); text-decoration: none; }
.button.small { min-height: 32px; padding: 6px 11px; font-size: .75rem; }
.button.wide { width: 100%; }
.button[disabled], .button:disabled { opacity: .5; cursor: not-allowed; }
.icon-button, .text-button {
  border: 0;
  color: var(--forest-900);
  background: transparent;
  cursor: pointer;
}
.icon-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  font-size: 1.1rem;
}
.icon-button:hover { border-color: var(--rule-strong); background: var(--sheet-2); }
.icon-button.danger { color: var(--danger); }
.text-button { padding: 6px; font-size: .78rem; font-weight: 600; }
.text-button.danger-text { color: var(--danger); }
.stats-grid {
  max-width: 1400px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 auto 22px;
}
.stat-card {
  min-height: 112px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 2px 12px;
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--sheet);
}
.stat-card > span { color: var(--ink-2); font-size: .8125rem; font-weight: 500; }
.stat-card strong {
  grid-row: span 2;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat-card small { align-self: end; }
.dashboard-stat-link { color: inherit; transition: border-color .12s ease; }
.dashboard-stat-link:hover,
.dashboard-stat-link:focus-visible {
  border-color: var(--rule-strong);
  color: inherit;
}
.dashboard-action-center { max-width: 1400px; margin: 0 auto 22px; padding: 22px; }
.dashboard-action-center .panel-heading { align-items: flex-end; }
.dashboard-action-center .panel-heading > div > p:last-child {
  max-width: 680px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: .76rem;
}
.dashboard-action-count {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid var(--accent-soft-2);
  border-radius: var(--radius-pill);
  color: var(--accent);
  background: var(--accent-soft);
  font-size: .6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dashboard-action-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.dashboard-action-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: inherit;
  background: var(--canvas);
  transition: border-color .12s ease;
}
.dashboard-action-item:hover,
.dashboard-action-item:focus-visible {
  border-color: var(--rule-strong);
  color: inherit;
}
.dashboard-action-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: .72rem;
  font-weight: 600;
}
.dashboard-action-item.urgent .dashboard-action-mark { color: var(--danger); background: var(--danger-soft); }
.dashboard-action-item.warning .dashboard-action-mark { color: var(--warn); background: var(--warn-soft); }
.dashboard-action-item.policy .dashboard-action-mark { color: var(--positive); background: var(--positive-soft); }
.dashboard-action-item.ticket .dashboard-action-mark { color: var(--accent); background: var(--accent-soft); }
.dashboard-action-item.announcement .dashboard-action-mark { color: var(--accent); background: var(--accent-soft); }
.dashboard-action-copy { min-width: 0; display: grid; gap: 2px; }
.dashboard-action-copy small {
  overflow: hidden;
  color: var(--ink-2);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}
.dashboard-action-copy strong,
.dashboard-action-copy > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-action-copy strong { font-size: .76rem; }
.dashboard-action-copy > span { color: var(--muted); font-size: .75rem; }
.dashboard-action-open { color: var(--accent); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.dashboard-action-empty { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px dashed var(--rule-strong); border-radius: var(--radius); background: var(--canvas); }
.dashboard-action-empty > span { width: 36px; height: 36px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--positive); background: var(--positive-soft); font-weight: 600; }
.dashboard-action-empty strong { font-size: .78rem; }
.dashboard-action-empty p { margin: 2px 0 0; color: var(--muted); font-size: .68rem; }
.dashboard-insights-grid {
  max-width: 1400px;
  display: grid;
  grid-template-columns: minmax(340px, 1.35fr) minmax(300px, 1fr) minmax(270px, .8fr);
  gap: 18px;
  margin: 0 auto 22px;
}
.dashboard-insights-grid > .panel { min-width: 0; padding: 22px; }
.dashboard-snapshot-groups { display: grid; gap: 17px; }
.dashboard-snapshot-group + .dashboard-snapshot-group { padding-top: 16px; border-top: 1px solid var(--line); }
.dashboard-snapshot-group > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dashboard-snapshot-group h3 { margin: 0; font-size: .84rem; }
.count-badge {
  min-width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  padding: 0 7px;
  border-radius: 20px;
  color: var(--forest-700);
  background: var(--mint);
  font-size: .68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dashboard-person-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 9px; }
.dashboard-person-list > div { min-width: 0; display: flex; align-items: center; gap: 9px; }
.dashboard-person-list > div > span:last-child { min-width: 0; display: grid; }
.dashboard-person-list strong,
.dashboard-person-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-person-list strong { font-size: .76rem; }
.dashboard-person-list small { font-size: .75rem; }
.dashboard-team-item-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.dashboard-team-item-list > a {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: inherit;
  background: var(--canvas);
}
.dashboard-team-item-list > a:hover { border-color: var(--rule-strong); color: inherit; }
.dashboard-team-item-list > a > span:last-child { min-width: 0; display: grid; }
.dashboard-team-item-list strong,
.dashboard-team-item-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-team-item-list strong { font-size: .76rem; }
.dashboard-team-item-list small { color: var(--muted); font-size: .75rem; }
.dashboard-team-item-list em { margin-left: 5px; color: var(--danger); font-style: normal; font-weight: 800; }
.dashboard-item-mark {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--forest-700);
  background: var(--mint);
  font-size: .68rem;
  font-weight: 800;
}
.dashboard-item-mark.meeting { color: var(--accent); background: var(--accent-soft); }
.dashboard-item-mark.personal { color: var(--warn); background: var(--warn-soft); }
.dashboard-item-mark.urgent { color: var(--danger); background: var(--danger-soft); }
/* My schedule's "My work": one list of everything waiting on the person. */
.my-work-panel { max-width: 1400px; margin: 0 auto 22px; padding: 22px; }
.my-work-panel .dashboard-team-item-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
/* The department panel: full width above the insights, its groups side by side. */
.dashboard-focus-panel { max-width: 1400px; margin: 0 auto 22px; padding: 22px; }
.dashboard-focus-panel .dashboard-snapshot-groups { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.dashboard-focus-panel .dashboard-snapshot-group + .dashboard-snapshot-group { padding-top: 0; border-top: 0; }
.dashboard-focus-panel .dashboard-team-item-list { grid-template-columns: 1fr; }
.dashboard-team-item-list > a[aria-disabled="true"]:hover { border-color: var(--line); }
.mini-avatar.trip { color: var(--accent); background: var(--accent-soft); }
.mini-avatar.leave { color: var(--ink-3); background: var(--sheet-2); }
.dashboard-empty-line { margin: 0; color: var(--muted); font-size: .74rem; }
.job-summary-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.job-summary-strip > span { display: flex; align-items: baseline; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: .7rem; }
.job-summary-strip strong { color: var(--ink); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.job-summary-strip .has-overdue { border-color: var(--flag); color: var(--flag); background: var(--flag-soft); }
.job-summary-strip .has-overdue strong { color: var(--danger); }
.dashboard-job-list { display: grid; }
.dashboard-job-list > a { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 9px 0; border-top: 1px solid var(--line); color: inherit; }
.dashboard-job-list > a > span:first-child { min-width: 0; display: grid; }
.dashboard-job-list strong,
.dashboard-job-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-job-list strong { font-size: .75rem; }
.dashboard-job-list small { font-size: .75rem; }
.dashboard-job-list > a.overdue strong { color: var(--danger); }
.dashboard-announcements-panel > .panel-heading { align-items: flex-start; }
.dashboard-announcements-panel > .panel-heading > a { flex: 0 0 auto; }
.dashboard-announcement-list { display: grid; gap: 9px; }
.dashboard-announcement-preview {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: inherit;
  background: var(--canvas);
}
.dashboard-announcement-preview:hover,
.dashboard-announcement-preview:focus-visible {
  border-color: var(--rule-strong);
  color: inherit;
}
.dashboard-announcement-preview strong {
  overflow: hidden;
  font-size: .8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-announcement-preview p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: .7rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.dashboard-announcement-preview small {
  overflow: hidden;
  color: var(--muted);
  font-size: .6875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-announcement-empty { min-height: 160px; }
.dashboard-grid {
  max-width: 1400px;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr);
  gap: 22px;
  margin: 0 auto;
}
.dashboard-grid.single { grid-template-columns: 1fr; }
.dashboard-grid > .panel { padding: 25px; }
.activity-list { margin: 0; padding: 0; list-style: none; }
.activity-list li { position: relative; display: grid; grid-template-columns: 13px 1fr; gap: 10px; padding: 0 0 22px; }
.activity-list li:not(:last-child)::before { content: ""; position: absolute; top: 10px; bottom: 0; left: 4px; width: 1px; background: var(--line); }
.activity-dot { z-index: 1; width: 9px; height: 9px; margin-top: 5px; border: 2px solid var(--sheet); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.activity-entry {
  width: 100%;
  display: block;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.activity-entry:hover .activity-summary,
.activity-entry:focus-visible .activity-summary { color: var(--forest-700); }
.activity-entry:focus-visible { outline: 2px solid var(--forest-700); outline-offset: 5px; border-radius: 4px; }
.activity-list strong { display: block; font-size: .8rem; }
.activity-list p, .activity-list time { display: block; margin: 2px 0 0; color: var(--muted); font-size: .72rem; }
.activity-open { display: inline-block; margin-top: 5px; color: var(--forest-700); font-size: .69rem; font-weight: 700; }
#recent-changes-panel .panel-heading .danger-text { color: var(--danger); }
.activity-pagination {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.activity-pagination > span { min-width: 0; }
.activity-pagination > span:last-child { text-align: right; }
.activity-pagination small { color: var(--muted); text-align: center; }
.activity-pagination .button {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}
@media (max-width: 600px) {
  .activity-pagination { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-pagination small { grid-column: 1 / -1; grid-row: 1; }
}
.empty-state { display: grid; place-items: center; min-height: 230px; padding: 30px; color: var(--muted); text-align: center; }
.empty-state > span { color: var(--mint-bright); font-size: 2rem; }
.empty-state h3, .empty-state h2, .empty-state h1 { margin: 10px 0 5px; }
.empty-state p { margin-bottom: 0; }
.empty-state.compact { min-height: 110px; }
/* Calendar */
.calendar-toolbar {
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto 16px;
  padding: 18px 20px;
}
.month-control { display: flex; align-items: center; gap: 12px; }
.month-control > div { min-width: 160px; }
.month-control small { display: block; color: var(--ink-2); font-size: .75rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.month-control h2 { margin: 0; }
.calendar-filters { display: flex; gap: 14px; }
.calendar-scope { min-width: 170px; display: grid; gap: 2px; padding: 3px 0; }
.calendar-scope small { color: var(--ink-2); font-size: .75rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.calendar-scope strong { color: var(--ink); }
label { display: grid; gap: 5px; color: var(--ink-2); font-size: .75rem; font-weight: 600; }
label span { color: var(--ink-3); font-weight: 400; }
input, select, textarea {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  outline: none;
  color: var(--ink);
  background: var(--sheet);
  font-size: .8125rem;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
textarea { min-height: 76px; padding: 9px 10px; line-height: 1.55; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); }

/* Tick boxes are drawn here rather than tinted with accent-color. A tint only
   recolours the browser's own box, so a workspace of sheets and hairlines was
   still asking people to tick a piece of Windows. Drawn, they are a field like
   any other — same border token, same radius, same focus ring — and the accent
   fills them when they are on.
   The tick is a rotated corner of a box rather than an image, so it carries no
   colour of its own to keep in step with the theme; a browser that ignores
   pseudo-elements on an input still shows a filled accent box, which reads as
   checked. The radio's dot is a gradient, so it needs no pseudo-element. */
input[type="checkbox"],
input[type="radio"] {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--field-border);
  border-radius: 5px;
  background: var(--sheet);
  cursor: pointer;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover:not(:disabled),
input[type="radio"]:hover:not(:disabled) { border-color: var(--accent); }
input[type="checkbox"]::after {
  position: absolute;
  top: 3px;
  left: 5px;
  width: 6px;
  height: 10px;
  border: 2px solid var(--accent-ink);
  border-top: 0;
  border-left: 0;
  opacity: 0;
  transform: rotate(40deg);
  content: "";
}
input[type="checkbox"]:checked,
input[type="radio"]:checked { border-color: var(--accent); background: var(--accent); }
input[type="checkbox"]:checked::after { opacity: 1; }
input[type="radio"]:checked {
  background: radial-gradient(circle at center, var(--sheet) 0 3.5px, var(--accent) 3.6px);
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled { opacity: .55; cursor: not-allowed; }
/* A text field keeps its ring while the caret is in it, so the global input
   rule draws one on plain :focus. A tick box has no caret: clicking one left a
   halo sitting around it afterwards, for a control whose state is already
   visible. The ring stays for the keyboard, which is who needs it. */
input[type="checkbox"]:focus:not(:focus-visible),
input[type="radio"]:focus:not(:focus-visible) { box-shadow: none; }

/* The grey "Choose File" button is the browser's own, and the last piece of
   furniture the app does not draw. It is a secondary button here, inside the
   field frame every other control has. */
input[type="file"] { padding: 5px; cursor: pointer; }
input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 5px 12px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--sheet-2);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.calendar-filters select { min-width: 220px; }
.calendar-panel { max-width: 1400px; margin: 0 auto; padding: 0; overflow: hidden; }
.calendar-instruction {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--sheet-2);
}
.calendar-instruction p { margin: 0; color: var(--muted); font-size: .8125rem; }
.legend { flex: 0 0 auto; display: flex; gap: 14px; color: var(--muted); font-size: .75rem; }
.legend > span { display: flex; align-items: center; gap: 5px; }
.legend-dot { width: 9px; height: 9px; border: 1px solid var(--field-border); border-radius: 50%; background: var(--sheet); }
.legend-dot.remote { border-color: var(--forest-700); background: var(--mint-bright); }
.legend-dot.job { border-color: var(--warn); background: var(--warn-soft); }
.legend-dot.job.pending { border-color: var(--rule-strong); background: var(--warn-soft); }
.legend-dot.job.completed { border-color: var(--positive); background: var(--positive-soft); }
.legend-dot.job.overdue { border-color: var(--danger); background: var(--danger-soft); }
.legend-dot.closed { border-color: var(--flag); background: var(--flag-soft); }
.legend-dot.trip { border-color: var(--accent); background: var(--accent-soft); }
/* Leave is somebody being away, not an event, so it is drawn in the quiet ink
   rather than a signal colour. */
.legend-dot.leave { border-color: var(--ink-3); background: var(--sheet-2); }
.legend-dot.meeting { border-color: var(--ink-2); background: var(--sheet-2); }
/* The month grid is the app's namesake and its most-opened screen, so it is the
   one place the design spends weight: a ruled grid with a real frame, weekend
   columns on a tinted ground, and day numbers in tabular figures so the columns
   read straight down. Everything around it is deliberately quiet. */
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(115px, 1fr)); min-width: 805px; }
.weekday-heading {
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink-2);
  background: var(--sheet-2);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-align: right;
  text-transform: none;
}
.calendar-blank { min-height: 124px; border-top: 1px solid var(--rule); border-right: 1px solid var(--rule); background: var(--paper); }
.calendar-day {
  position: relative;
  min-height: 124px;
  padding: 8px;
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  background: var(--sheet);
  overflow: hidden;
  cursor: pointer;
  transition: background .12s ease, box-shadow .12s ease;
}
.calendar-day:nth-child(7n) { border-right: 0; }
/* Saturday and Sunday sit on the tinted ground, so the working week reads as a
   block without anyone having to count columns. */
.calendar-day:nth-child(7n), .calendar-day:nth-child(7n - 1) { background: var(--paper); }
.calendar-day:hover, .calendar-day:focus-visible { z-index: 1; outline: none; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.calendar-day.today { background: var(--sheet); }
.calendar-day.today .day-number { color: var(--accent-ink); background: var(--accent); }
/* A weekend, a public holiday and a Friday under the remote policy are all just
   "nothing to book here", so they share the one quiet ground the weekend columns
   use. It is deliberately NOT --flag-soft: that colour is reserved for something
   being wrong, and an ordinary Saturday is not a problem. Which kind of day it is
   is said in words by .day-status, not by hue. */
.calendar-day.closed {
  cursor: pointer;
  background-color: var(--paper);
  background-image: none;
}
.day-top { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.day-number {
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.day-status { overflow: hidden; color: var(--ink-3); font-size: .6875rem; text-overflow: ellipsis; white-space: nowrap; }
.assignment-list { display: grid; gap: 3px; margin-top: 7px; }
.assignment-chip {
  position: relative;
  overflow: hidden;
  padding: 4px 6px 4px 9px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  color: var(--ink);
  background: var(--sheet);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assignment-chip::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--chip-color, var(--accent)); }
.assignment-chip.trip::before { background: var(--accent); }
.assignment-chip.leave::before { background: var(--ink-3); }
.assignment-chip.meeting::before { background: var(--ink-2); }
.assignment-chip.room::before { background: var(--positive); }
.assignment-chip.job::before { background: var(--warn); }
.assignment-chip.job.status-completed { border-color: var(--positive); color: var(--positive); background: var(--positive-soft); text-decoration: line-through; opacity: .8; }
/* One colour per destination. The names come from schema.js and the values live
   only here, so what somebody types can never become a colour: the attribute
   selects a swatch, it does not carry one. The chip already draws a bar down its
   left edge, so the colour replaces that rather than adding decoration. */
:root {
  --trip-blue: #3b7dd8;
  --trip-teal: #12897f;
  --trip-green: #3f8f52;
  --trip-amber: #b08315;
  --trip-orange: #cb6a1c;
  --trip-rose: #c04b6e;
  --trip-violet: #7a55b5;
  --trip-slate: #5c6b7f;
}
[data-trip-color="blue"] { --trip-color: var(--trip-blue); }
[data-trip-color="teal"] { --trip-color: var(--trip-teal); }
[data-trip-color="green"] { --trip-color: var(--trip-green); }
[data-trip-color="amber"] { --trip-color: var(--trip-amber); }
[data-trip-color="orange"] { --trip-color: var(--trip-orange); }
[data-trip-color="rose"] { --trip-color: var(--trip-rose); }
[data-trip-color="violet"] { --trip-color: var(--trip-violet); }
[data-trip-color="slate"] { --trip-color: var(--trip-slate); }
.assignment-chip.trip[data-trip-color]::before { background: var(--trip-color); }
.day-assignment-row[data-trip-color] {
  padding-left: 11px;
  border-left: 3px solid var(--trip-color);
}
/* Its own row in the entry grid. As a single cell it is far taller than the
   inputs beside it, which pushed Destination and Notes onto a line of their own
   and left a hole where it used to sit. align-items: end then aligned the labels
   to nothing in particular. */
.trip-color-picker { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }
.trip-color-picker legend { padding: 0; font-size: .8125rem; font-weight: 600; }
.trip-color-picker legend span { margin-left: 5px; color: var(--muted); font-weight: 400; }
.trip-color-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 6px; }
.trip-color-swatch { display: inline-flex; cursor: pointer; }
.trip-color-swatch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.trip-color-swatch em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.trip-color-swatch span {
  display: block;
  width: 26px;
  height: 26px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--trip-color);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent) inset;
}
/* Checked and keyboard focus read the same, because the ring is the only thing
   saying which colour is chosen. */
.trip-color-swatch input:checked + span { border-color: var(--ink); }
.trip-color-swatch input:focus-visible + span { outline: 2px solid var(--forest-700); outline-offset: 2px; }
.assignment-chip.job.status-completed::before { background: var(--positive); }
.assignment-chip.job.status-cancelled { color: var(--ink-3); background: var(--sheet-2); opacity: .72; text-decoration: line-through; }
.assignment-chip.job.status-cancelled::before { background: var(--ink-3); }
.assignment-chip.job.priority-high::before { background: var(--warn); }
.assignment-chip.job.priority-urgent::before,
.assignment-chip.job.overdue::before { background: var(--danger); }
.assignment-chip.job.overdue { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.day-weekday-mobile { display: none; color: var(--muted); font-size: .75rem; font-weight: 600; }
.more-assignments { padding-left: 4px; color: var(--muted); font-size: .6875rem; }
/* The trip destination's country list, drawn by app.js because the browser's own
   datalist popup cannot be styled. The same shell as the date picker: a field
   with an icon inside it, and a popover on <body> carrying --shadow-pop. */
.country-field { position: relative; display: block; }
.country-field > input { padding-right: 40px; }
.country-field-open {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink-3);
  background: transparent;
  cursor: pointer;
  transition: color .12s ease, background .12s ease;
}
.country-field-open:hover { color: var(--accent); background: var(--sheet-2); }
.country-field-open svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.country-picker {
  position: fixed;
  z-index: 9000;
  max-height: 264px;
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--sheet);
  box-shadow: var(--shadow-pop);
  scrollbar-width: thin;
}
.country-picker-option {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: .8125rem;
  cursor: pointer;
  transition: color .12s ease, background .12s ease;
}
.country-picker-option strong { font-weight: 700; }
.country-picker-option:hover,
.country-picker-option.active { color: var(--accent); background: var(--accent-soft); }
.country-picker-option.selected { color: var(--accent-ink); background: var(--accent); }
.country-picker-empty { padding: 8px 10px; color: var(--muted); font-size: .8125rem; }
/* Two or more people in the same country that day — shown only to readers of
   both trip calendars, who alone receive overlaps from the server. */
.trip-overlap-marker { display: inline-block; max-width: 100%; margin-top: 5px; padding: 1px 6px; overflow: hidden; border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-size: .6875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.trip-overlap-note { grid-column: 1 / -1; margin: -4px 0 0; padding: 8px 10px; border-left: 3px solid var(--accent); border-radius: var(--radius); color: var(--ink); background: var(--accent-soft); font-size: .8125rem; }
.trip-overlap-list { display: grid; gap: 2px; padding: 10px 12px; border-bottom: 1px solid var(--rule); background: var(--accent-soft); }
.trip-overlap-list:last-child { border-bottom: 0; }
.trip-overlap-list strong { font-size: .875rem; }
.trip-overlap-list small { font-size: .75rem; }
.calendar-loading { grid-column: 1 / -1; min-height: 420px; display: grid; place-items: center; color: var(--muted); }
.modal-backdrop[hidden] { display: none !important; }
.modal-backdrop {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--ink) 38%, transparent);
  backdrop-filter: blur(4px);
}
body.modal-open { overflow: hidden; }
.meeting-row > span { min-width: 0; display: grid; gap: 3px; }
.meeting-row strong,
.meeting-row small { overflow-wrap: anywhere; }
.day-details-modal {
  width: min(650px, 100%);
  max-height: min(780px, calc(100vh - 48px));
  display: grid;
  gap: 18px;
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-pop-lg);
}
.day-details-modal > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.day-details-modal > header p:last-child { margin: 4px 0 0; color: var(--muted); font-size: .8125rem; }
.day-details-modal h3 { margin-bottom: 10px; }
.change-details-modal { width: min(600px, 100%); }
.change-detail-list {
  display: grid;
  grid-template-columns: minmax(130px, .45fr) minmax(0, 1fr);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.change-detail-list dt,
.change-detail-list dd {
  margin: 0;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.change-detail-list dt {
  color: var(--muted);
  background: var(--sheet-2);
  font-size: .8125rem;
  font-weight: 600;
}
.change-detail-list dd { font-size: .875rem; font-weight: 600; }
.change-detail-list dt:last-of-type,
.change-detail-list dd:last-of-type { border-bottom: 0; }
.password-input { position: relative; display: block; }
.password-input input { padding-right: 48px; }
.password-input input::-ms-reveal,
.password-input input::-ms-clear { display: none; }
.password-visibility {
  position: absolute;
  top: 50%;
  right: 5px;
  width: 36px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--forest-700);
  background: transparent;
  cursor: pointer;
}
.password-visibility:hover,
.password-visibility:focus-visible { background: var(--mint); }
.password-visibility:disabled { opacity: .35; background: transparent; cursor: not-allowed; }
.password-visibility svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.password-visibility .eye-hidden { display: none; }
.password-visibility[aria-pressed="true"] .eye-visible { display: none; }
.password-visibility[aria-pressed="true"] .eye-hidden { display: block; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; }
.day-assignment-list { display: grid; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.day-assignment-list > .empty-state { border: 0; }
.day-assignment-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.day-assignment-row:last-child { border-bottom: 0; }
.day-assignment-row > div { min-width: 0; display: flex; align-items: center; gap: 9px; }
.day-assignment-row > div > span:last-child { min-width: 0; display: grid; }
.day-assignment-row strong { overflow: hidden; font-size: .875rem; text-overflow: ellipsis; white-space: nowrap; }
.day-assignment-row small { font-size: .75rem; }
.day-assignment-row .danger-text { color: var(--danger); }
.christos-job-row { position: relative; align-items: flex-start; }
.christos-job-row.overdue { box-shadow: inset 4px 0 var(--danger); background: var(--danger-soft); }
.christos-job-row.status-completed { box-shadow: inset 4px 0 var(--positive); }
.christos-job-row.status-cancelled { opacity: .72; }
.christos-job-row > div:first-child { align-items: flex-start; }
.christos-job-row > div:first-child > span:last-child { gap: 3px; }
.christos-notification-control,
.admin-notification-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.christos-notification-control,
.admin-notification-control {
  width: 100%;
  min-width: 0;
  max-width: 1400px;
  margin-right: auto;
  margin-left: auto;
  padding: clamp(16px, 2vw, 20px);
  overflow: hidden;
}
.christos-notification-control > div:first-child,
.admin-notification-control > div:first-child {
  min-width: 0;
  max-width: 720px;
}
.christos-notification-control h2,
.admin-notification-control h2 { margin: 2px 0 8px; }
.christos-notification-control p,
.admin-notification-control p { margin: 0 0 6px; }
.christos-notification-control small,
.admin-notification-control small {
  display: block;
  color: var(--muted);
  line-height: 1.5;
}
/* Settings: the device's own FenfarDesk version. It sits directly under the
   notification panel, which carries no bottom margin of its own, so the gap
   between them has to come from this one's top. Padding, width and the inner
   type scale are the notification panel's, so the two boxes share an edge and
   their text starts on the same line. */
.device-version-panel {
  width: 100%;
  min-width: 0;
  max-width: 1400px;
  margin: 20px auto 0;
  padding: clamp(16px, 2vw, 20px);
}
.device-version-panel h2 { margin: 2px 0 8px; }
.device-version-panel p { margin: 0 0 6px; }
.device-version-panel small {
  display: block;
  max-width: 720px;
  color: var(--muted);
  line-height: 1.5;
}
.christos-notification-actions,
.admin-notification-actions {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.christos-notification-control h2,
.christos-notification-control p,
.christos-notification-control small,
.admin-notification-control h2,
.admin-notification-control p,
.admin-notification-control small,
.christos-notification-actions .button,
.christos-notification-actions .text-button,
.admin-notification-actions .button,
.admin-notification-actions .text-button {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.christos-notification-actions .button,
.christos-notification-actions .text-button,
.admin-notification-actions .button,
.admin-notification-actions .text-button {
  white-space: normal;
  text-align: center;
}
.job-badges { display: flex !important; flex-wrap: wrap; gap: 5px; margin-bottom: 2px; }
.job-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 2px 8px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  background: var(--sheet-2);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}
.job-badge.status-in_progress { border-color: var(--accent-soft-2); color: var(--accent); background: var(--accent-soft); }
.job-badge.status-completed { border-color: var(--positive); color: var(--positive); background: var(--positive-soft); }
.job-badge.status-cancelled { border-color: var(--rule-strong); color: var(--ink-3); background: var(--sheet-2); }
.job-badge.priority-high { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
.job-badge.priority-urgent,
.job-badge.overdue { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.job-row-actions { flex: 0 0 auto; display: flex !important; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px !important; }
.day-assignment-row:has(.discussion-panel) { flex-wrap: wrap; }
.discussion-toggle { margin-left: auto; white-space: nowrap; }
.discussion-panel {
  width: 100%;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--canvas);
}
.discussion-panel[hidden] { display: none; }
.discussion-heading,
.discussion-comments article header,
.discussion-attachments > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.discussion-heading small,
.discussion-comments time,
.discussion-attachments small { color: var(--muted); font-size: .75rem; }
.discussion-comments { display: grid; gap: 8px; }
.discussion-comments article { display: grid; gap: 5px; padding: 10px; border-radius: var(--radius-sm); background: var(--panel); }
.discussion-comments article p { margin: 0; white-space: pre-wrap; }
.discussion-comments article .text-button { justify-self: start; }
.discussion-attachments { display: grid; gap: 7px; }
.discussion-attachments > div { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
.discussion-attachments a { min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.discussion-comment-form,
.discussion-file-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 9px; }
.discussion-file-form input { padding: 7px; }
.day-add-person { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.day-add-person[hidden] { display: none; }
.day-add-person label, .day-add-person select { width: 100%; }
.schedule-entry-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: end;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.schedule-entry-hint { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .8125rem; }
.schedule-entry-heading { grid-column: 1 / -1; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.schedule-entry-heading p,
.schedule-entry-heading h3 { margin-bottom: 0; }
.schedule-entry-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.schedule-entry-attendees { grid-column: 1 / -1; display: grid; gap: 10px; }
.schedule-entry-form[hidden] { display: none; }
.schedule-entry-form .button { min-height: 36px; }
/* Personal and department planning */
.outlook-settings-panel,
.outlook-connect-panel,
.outlook-launch-panel {
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto 20px;
  padding: 20px;
}
/* Settings stacks this panel with the notification and version panels, which pad
   with clamp(). A fixed 24px agreed with them at a wide window and drifted as it
   narrowed — 2.4px of it by 900px — so the three boxes started their text on
   three different lines. The connect and launch panels keep 24px; they never
   share a page with these. */
.outlook-settings-panel { padding: clamp(16px, 2vw, 20px); }
.outlook-settings-panel > div:first-child,
.outlook-connect-panel > div:nth-child(2),
.outlook-launch-panel > div:nth-child(2) { min-width: 0; }
.outlook-settings-panel p,
.outlook-connect-panel p,
.outlook-launch-panel p { margin-bottom: 6px; }
.outlook-settings-panel small,
.outlook-connect-panel small { color: var(--muted); }
.outlook-settings-actions,
.outlook-launch-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.outlook-settings-actions form { margin: 0; }
.outlook-unavailable { border-style: dashed; }
.outlook-brand-mark {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  color: var(--accent-ink);
  background: var(--accent);
  font-size: 1.55rem;
  font-weight: 600;
}
.integration-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  background: var(--sheet-2);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.integration-status-badge::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-3);
  content: "";
}
.integration-status-badge.connected { color: var(--positive); border-color: var(--positive); background: var(--positive-soft); }
.integration-status-badge.connected::before { background: var(--positive); }
.integration-status-badge.waiting { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.integration-status-badge.waiting::before { background: var(--warn); }
.outlook-workspace { max-width: 1400px; margin: 0 auto 30px; }
.outlook-workspace-heading,
.personal-tasks-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 15px;
}
.outlook-workspace-heading > div:last-child { display: flex; align-items: center; gap: 9px; }
.outlook-workspace-heading p,
.outlook-workspace-heading h2,
.personal-tasks-heading p,
.personal-tasks-heading h2 { margin-bottom: 0; }
.personal-tasks-heading { max-width: 1400px; margin: 0 auto 15px; }
.outlook-sync-time { display: block; margin: -8px 0 12px; color: var(--muted); }
.outlook-schedule-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px;
}
.outlook-meeting-create,
.outlook-event-board { min-width: 0; height: 100%; padding: 20px; }
.outlook-meeting-create .panel-heading,
.outlook-event-board .panel-heading { align-items: flex-start; }
.outlook-meeting-form { display: grid; gap: 13px; }
.outlook-time-fields { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 10px; }
.outlook-meeting-form label > span { color: var(--muted); font-size: .75rem; font-weight: 500; }
.outlook-events-loading { display: grid; justify-items: center; gap: 12px; padding: 30px 20px; }
.outlook-events-loading p { margin: 0; color: var(--muted); }
.outlook-loading-spinner {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 3px solid var(--mint);
  border-top-color: var(--forest-700);
  border-radius: 50%;
  animation: outlook-spin .8s linear infinite;
}
@keyframes outlook-spin { to { transform: rotate(360deg); } }
html[data-theme="dark"] .outlook-loading-spinner { border-color: var(--accent-soft); border-top-color: var(--accent); }
.attendee-field { display: grid; gap: 6px; }
.attendee-chip-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  cursor: text;
}
.attendee-chip-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.attendee-chip-box.invalid { border-color: var(--danger); }
.attendee-chip-box input {
  flex: 1 1 150px;
  width: auto;
  min-width: 0;
  min-height: 28px;
  padding: 2px 4px;
  border: 0;
  background: transparent;
}
.attendee-chip-box input:focus { border: 0; box-shadow: none; }
.attendee-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 4px 3px 10px;
  border-radius: var(--radius-pill);
  color: var(--forest-700);
  background: var(--mint);
  font-size: .8125rem;
  font-weight: 600;
}
.attendee-chip > span { overflow-wrap: anywhere; }
.attendee-chip-remove {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font-size: .85rem;
  line-height: 1;
}
.attendee-chip-remove:hover { background: color-mix(in srgb, var(--ink) 16%, transparent); }
.attendee-hint { font-size: .75rem; }
html[data-theme="dark"] .attendee-chip-box { border-color: var(--line); background: var(--sheet); }
html[data-theme="dark"] .attendee-chip-box.invalid { border-color: var(--danger); }
html[data-theme="dark"] .attendee-chip { color: var(--accent); background: var(--accent-soft); }
html[data-theme="dark"] .attendee-chip-remove:hover { background: color-mix(in srgb, var(--ink) 16%, transparent); }
.outlook-teams-option { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas); }
.outlook-event-count {
  min-width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--forest-700);
  background: var(--mint);
  font-size: .75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.outlook-event-list { display: grid; gap: 11px; max-height: 690px; overflow-y: auto; padding-right: 4px; }
.outlook-event-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--canvas);
}
.outlook-event-card.teams-event { border-left-color: var(--ink-2); }
.outlook-event-card header,
.outlook-event-card footer { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.outlook-event-card time { min-width: 0; color: var(--muted); font-size: .75rem; font-weight: 600; }
.outlook-event-type {
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  color: var(--accent);
  background: var(--accent-soft);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.teams-event .outlook-event-type { color: var(--ink-2); background: var(--sheet-2); }
.outlook-event-card h3 { margin: 10px 0 5px; overflow-wrap: anywhere; }
.outlook-event-card p { margin-bottom: 10px; color: var(--muted); font-size: .8125rem; overflow-wrap: anywhere; }
.outlook-event-card footer { justify-content: flex-start; flex-wrap: wrap; }
.outlook-empty { min-height: 280px; }
.outlook-calendar-page-header,
.outlook-calendar-panel { max-width: 1400px; margin-right: auto; margin-left: auto; }
/* The sync line shares the calendar panel's width so its text lines up with
   the panel edge instead of the page edge. */
.outlook-calendar-sync-time { max-width: 1400px; margin: -8px auto 12px; }
.outlook-calendar-unavailable {
  max-width: 1400px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 auto;
  padding: 20px;
}
.outlook-calendar-unavailable > div:nth-child(2) { flex: 1; }
.outlook-calendar-unavailable h2,
.outlook-calendar-unavailable p { margin-bottom: 4px; }
.outlook-calendar-panel { padding: 0; overflow: hidden; }
.outlook-calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.outlook-calendar-toolbar .month-control { margin: 0; }
.outlook-calendar-summary {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 1px 8px;
  text-align: right;
}
.outlook-calendar-summary .integration-status-badge { grid-row: span 2; margin-right: 8px; }
.outlook-calendar-summary strong { color: var(--ink); font-size: 1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.outlook-calendar-summary small { color: var(--muted); font-size: .75rem; }
.outlook-calendar-scroll { overflow-x: auto; background: var(--canvas); }
.outlook-calendar-weekdays,
.outlook-calendar-grid {
  min-width: 1050px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.outlook-calendar-weekdays { border-bottom: 1px solid var(--line); background: var(--panel); }
.outlook-calendar-weekdays > div {
  padding: 8px 12px;
  color: var(--ink-2);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.outlook-calendar-day {
  min-width: 0;
  min-height: 150px;
  padding: 8px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.outlook-calendar-day:nth-child(7n) { border-right: 0; }
.outlook-calendar-day > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 26px;
  margin-bottom: 7px;
}
.outlook-calendar-day > header > time {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 600;
}
.outlook-calendar-day > header > span {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  color: var(--accent);
  background: var(--accent-soft);
  font-size: .6875rem;
  font-weight: 600;
  text-align: center;
}
.outlook-calendar-day.today > header > time { color: var(--accent-ink); background: var(--accent); }
.outlook-calendar-day.outside-month { background: color-mix(in srgb, var(--canvas) 72%, transparent); }
.outlook-calendar-day.outside-month > header,
.outlook-calendar-day.past { opacity: .5; }
.outlook-calendar-day-events { display: grid; gap: 6px; }
.outlook-calendar-event {
  min-width: 0;
  padding: 7px 8px;
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}
.outlook-calendar-event.teams-event { border-left-color: var(--ink-2); background: var(--sheet-2); }
.outlook-calendar-event > div { display: grid; gap: 2px; min-width: 0; }
.outlook-calendar-event time { color: var(--accent); font-size: .6875rem; font-weight: 600; }
.outlook-calendar-event strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: .75rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.outlook-calendar-event footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; }
.outlook-calendar-event footer a,
.outlook-calendar-event footer .text-button {
  padding: 0;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 600;
}
.outlook-calendar-empty { margin: 18px; }
.outlook-event-fallbacks { margin: 8px 0 0; color: var(--muted); }
.outlook-event-fallbacks a { font-weight: 600; }
.outlook-event-modal { max-width: 560px; }
.outlook-event-modal-facts[hidden] { display: none; }
.outlook-event-modal-facts { display: grid; gap: 10px; margin: 18px 0 0; }
.outlook-event-modal-facts > div { display: grid; gap: 2px; }
.outlook-event-modal-facts dt {
  color: var(--ink-2);
  font-size: .75rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.outlook-event-modal-facts dd { margin: 0; overflow-wrap: anywhere; font-size: .875rem; }
.outlook-event-modal-notes { margin-top: 18px; }
.outlook-event-modal-notes p { color: var(--muted); font-size: .875rem; white-space: pre-line; }
.outlook-event-modal-actions { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.outlook-event-modal-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.outlook-launch-panel { align-items: flex-start; }
.outlook-launch-panel ol { margin: 14px 0; padding-left: 22px; color: var(--muted); }
.outlook-launch-panel li + li { margin-top: 6px; }
.microsoft-callback-card { text-align: center; }
.microsoft-callback-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  border-radius: 50%;
  color: var(--accent-ink);
  background: var(--danger);
  font-size: 1.7rem;
  font-weight: 600;
}
.microsoft-callback-icon.success { background: var(--positive); }
.personal-task-layout { max-width: 1400px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; margin: 0 auto; }
.personal-task-create { position: sticky; top: 24px; height: 100%; padding: 20px; }
.personal-task-board,
.team-jobs { padding: 20px; }
/* Only the heading's title block stacks. The filter group is also a direct div
   child, and this rule used to out-specify .task-filter and stack its buttons
   vertically. */
.personal-task-create .panel-heading > div:not(.task-filter),
.personal-task-board .panel-heading > div:not(.task-filter),
.team-jobs .panel-heading > div:not(.task-filter) { display: grid; gap: 6px; }
.personal-task-create .panel-heading .eyebrow,
.personal-task-board .panel-heading .eyebrow,
.team-jobs .panel-heading .eyebrow { margin: 0; line-height: 1.2; }
.personal-task-board > .panel-heading { align-items: flex-start; }
.stacked-task-form { display: grid; gap: 13px; }
.personal-task-board { min-width: 0; }
.task-filter { display: flex; gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas); }
.task-filter .text-button { padding: 7px 10px; border-radius: var(--radius-sm); color: var(--forest-700); }
.task-filter .text-button.active { color: var(--accent-ink); background: var(--accent); }
.personal-task-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 14px; }
.personal-task-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--canvas);
}
.personal-task-card[hidden] { display: none; }
.personal-task-card.status-in_progress { border-top-color: var(--warn); }
.personal-task-card.status-completed { border-top-color: var(--positive); }
.personal-task-card header,
.personal-task-card footer { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.personal-task-card header time,
.task-no-date { color: var(--muted); font-size: .75rem; font-weight: 600; }
.personal-task-card h3 { margin: 13px 0 6px; }
.task-details { color: var(--muted); white-space: pre-wrap; }
.personal-task-reminder-summary {
  margin: 4px 0 10px;
  color: var(--muted);
  font-size: .8125rem;
  font-weight: 600;
}
.personal-task-edit { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.personal-task-edit > summary {
  padding: 4px 0;
  color: var(--muted);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.personal-task-edit > summary::-webkit-details-marker { display: none; }
.personal-task-edit > summary::before { margin-right: 6px; content: "\270E"; }
.personal-task-edit > summary:hover { color: var(--ink); }
.personal-task-edit[open] > summary { margin-bottom: 8px; }
.personal-task-edit-form { display: grid; gap: 8px; }
.personal-task-edit-form > label { display: grid; gap: 4px; font-size: .75rem; font-weight: 600; }
.personal-task-edit-form input,
.personal-task-edit-form textarea { background: var(--panel); }
.personal-task-reminder-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.personal-task-reminder-fields label { display: grid; gap: 4px; font-size: .75rem; font-weight: 600; }
.personal-task-reminder-fields input,
.personal-task-reminder-fields select { background: var(--panel); font-size: .8125rem; }
.field-hint { display: block; margin-top: 4px; color: var(--muted); font-size: .75rem; font-weight: 500; line-height: 1.4; }
.personal-task-progress-form { display: grid; gap: 8px; margin-top: auto; padding-top: 14px; }
.personal-task-progress-form textarea { min-height: 88px; background: var(--panel); }
.personal-task-progress-form .button { justify-self: start; }
.personal-task-card footer { justify-content: flex-start; flex-wrap: wrap; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 900px) {
  .outlook-settings-panel,
  .outlook-connect-panel,
  .outlook-launch-panel { align-items: flex-start; flex-wrap: wrap; }
  .outlook-settings-actions,
  .outlook-launch-actions { width: 100%; justify-content: flex-start; }
  .outlook-schedule-layout { grid-template-columns: 1fr; }
  .outlook-calendar-toolbar { align-items: flex-start; flex-direction: column; }
  .outlook-calendar-summary { text-align: left; }
  .outlook-calendar-unavailable { align-items: flex-start; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .outlook-workspace-heading { flex-direction: column; }
  .outlook-workspace-heading > div:last-child { width: 100%; flex-wrap: wrap; }
  .outlook-meeting-form input,
  .outlook-meeting-form textarea {
    font-family: inherit;
    font-size: 1rem;
  }
  .outlook-meeting-form > label > input:not([type="checkbox"]) {
    height: 42px;
    min-height: 42px;
  }
  .outlook-time-fields { grid-template-columns: 1fr; }
  .outlook-time-fields > label { min-width: 0; }
  .outlook-time-fields .date-field { min-width: 0; }
  .outlook-time-fields input[type="date"],
  .outlook-time-fields input[type="time"],
  .outlook-time-fields .date-field-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px;
    padding: 9px 11px;
    -webkit-appearance: none;
    appearance: none;
    line-height: 20px;
    text-align: left;
  }
  .outlook-time-fields input[type="date"]::-webkit-date-and-time-value,
  .outlook-time-fields input[type="time"]::-webkit-date-and-time-value {
    min-height: 0;
    margin: 0;
    text-align: left;
  }
  .outlook-event-card header { align-items: flex-start; }
}
.department-item-list { display: grid; gap: 10px; }
.department-selector {
  width: min(520px, 100%);
  max-width: none;
  margin: 0 0 20px max(0px, calc((100% - 1400px) / 2));
  padding: 18px 20px;
}
.team-item-composer { max-width: 1400px; margin: 0 auto 20px; padding: 18px 20px; }
.team-item-composer summary,
.announcement-publisher summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.team-item-composer summary::-webkit-details-marker,
.announcement-publisher summary::-webkit-details-marker { display: none; }
.team-item-composer summary > span:first-child,
.announcement-publisher summary > span:first-child { display: grid; gap: 3px; }
.team-item-composer summary small,
.announcement-publisher summary small { color: var(--ink-2); font-size: .75rem; font-weight: 600; letter-spacing: 0; line-height: 1.2; text-transform: none; }
.composer-toggle { color: var(--muted); font-size: .8125rem; }
.team-item-composer[open] summary,
.announcement-publisher[open] summary { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.department-item-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 18px; align-items: end; }
.meeting-time-fields { display: contents; }
.meeting-time-fields[hidden] { display: none; }
.department-item-form .wide-field { grid-column: span 2; }
/* The submit button, not every button in the form: the date fields put a
   calendar opener inside themselves, and this stretched it to 220px. */
.department-item-form > button { min-width: 220px; justify-self: start; align-self: end; }
.team-jobs { max-width: 1400px; min-width: 0; margin: 0 auto; }
.team-jobs-tabs { width: fit-content; margin-bottom: 16px; }
.team-jobs-count { margin-left: 4px; font-variant-numeric: tabular-nums; opacity: .8; }
.department-item-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--canvas);
}
.department-item-card.meeting { border-left-color: var(--warn); }
.department-item-card.status-completed { opacity: .72; }
.department-item-card.status-cancelled { opacity: .6; }
.department-item-card header,
.department-item-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.department-item-card header > span { display: flex; gap: 6px; }
.department-item-card time,
.department-item-card > small { color: var(--muted); font-size: .75rem; }
.department-item-card h3 { margin: 10px 0 5px; }
.department-item-card p { margin-bottom: 8px; color: var(--muted); white-space: pre-wrap; }
.department-item-card footer { justify-content: flex-start; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
/* Steps inside a job; ticking them moves the progress bar. */
.department-checklist { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas); }
.department-checklist > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.department-checklist h4 { margin: 0; font-size: .8rem; }
.department-checklist > header span { color: var(--muted); font-size: .72rem; }
.department-checklist ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.department-checklist li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.department-checklist label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .8rem; font-weight: 500; cursor: pointer; }
.department-checklist li.done label span { color: var(--muted); text-decoration: line-through; }
.department-checklist-form { display: flex; gap: 8px; }
.department-checklist-form input { flex: 1; min-width: 0; }
.department-job-away { color: var(--warn); background: var(--warn-soft); }
.department-templates { margin-top: 14px; }
.department-templates summary { cursor: pointer; font-size: .8rem; font-weight: 600; }
.department-templates ul { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.department-templates li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.department-templates li > span { display: grid; min-width: 0; }
.department-templates small { color: var(--muted); }
.department-progress-list {
  display: grid;
  gap: 9px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: progress-step;
}
.department-progress-list li {
  position: relative;
  padding: 10px 12px 10px 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--canvas);
  counter-increment: progress-step;
}
.department-progress-list li::before {
  position: absolute;
  top: 10px;
  left: 11px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent-ink);
  background: var(--accent);
  content: counter(progress-step);
  font-size: .6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.department-progress-list p { margin: 0 0 4px; color: var(--ink); }
.department-progress-list small { color: var(--muted); font-size: .75rem; }
.department-progress-form {
  display: grid;
  gap: 9px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.department-progress-form button { justify-self: start; }
.department-item-editor { margin-top: 12px; }
.department-item-editor > summary { color: var(--forest-700); font-size: .8125rem; font-weight: 600; cursor: pointer; }
.department-item-edit-form {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--canvas);
}
.department-item-edit-form .wide-field,
.department-item-edit-form button { grid-column: 1 / -1; }
.department-item-edit-form button { justify-self: start; }
.storage-meter {
  min-width: 0;
  display: grid;
  gap: 9px;
  padding-left: 24px;
  border-left: 1px solid var(--line);
}
.storage-meter > span {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}
.storage-meter strong,
.storage-meter small { overflow-wrap: anywhere; }
.storage-meter small { color: var(--muted); font-size: .8125rem; }
.storage-meter progress { height: 9px; overflow: hidden; border: 0; border-radius: var(--radius-pill); }
.file-breadcrumbs { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; padding: 14px 18px; overflow: hidden; }
.file-breadcrumbs a { color: var(--forest-700); font-weight: 600; }
.file-breadcrumbs a,
.file-breadcrumbs strong { max-width: 100%; overflow-wrap: anywhere; }
.file-breadcrumbs span { color: var(--muted); }
.folder-up {
  width: 100%;
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
}
.folder-up > span:last-child { min-width: 0; display: grid; gap: 3px; }
.folder-up strong {
  min-width: 0;
  max-width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.folder-up small {
  min-width: 0;
  max-width: 100%;
  display: block;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.personal-task-layout input::placeholder,
.personal-task-layout textarea::placeholder,
.team-item-composer input::placeholder,
.team-item-composer textarea::placeholder { color: var(--ink-3); opacity: 1; }
/* Resources and forms */
.resource-tools { max-width: 1400px; margin: 0 auto 18px; }
.search-field { position: relative; max-width: 400px; }
/* Centred on the field rather than nudged down from its top, so the icon sits
   level with the text at any field height. Drawn like the command bar's. */
.search-field-icon { position: absolute; top: 50%; left: 12px; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.search-field input { padding-left: 38px; }
.resource-grid { max-width: 1400px; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 17px; margin: 0 auto; }
.resource-card {
  min-width: 0;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--sheet);
}
.resource-icon { width: 36px; height: 36px; display: grid; place-items: center; margin-bottom: 16px; border-radius: var(--radius-sm); color: var(--accent); background: var(--accent-soft); font-size: 1.05rem; }
.resource-icon.file { color: var(--warn); background: var(--warn-soft); }
.resource-card-body { min-width: 0; }
.resource-card-body h2 { margin: 10px 0 6px; font-size: 1rem; }
.resource-card-body p { color: var(--ink-2); font-size: .8125rem; }
.resource-card-body h2,
.resource-card-body p,
.resource-card-body small,
.resource-card-body .pill {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.resource-card-body small { display: block; font-size: .75rem; }
.pill { display: inline-flex; white-space: normal; padding: 2px 8px; border-radius: var(--radius-pill); color: var(--accent); background: var(--accent-soft); font-size: .75rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.resource-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; }
.resource-actions .button { flex: 1; }
.resource-card[hidden] { display: none; }
.knowledge-page-header { max-width: 1400px; margin-right: auto; margin-left: auto; }
.knowledge-tools {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--sheet);
}
.knowledge-tools > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.knowledge-tools .search-field { width: min(100%, 620px); max-width: 620px; }
.knowledge-tools .search-field input { width: 100%; }
.knowledge-tools #resource-results-status { margin: 0; color: var(--ink-2); font-size: .8125rem; white-space: nowrap; }
.knowledge-category-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.knowledge-category {
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  background: var(--sheet-2);
  font-size: .75rem;
  font-weight: 600;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.knowledge-category span { min-width: 19px; padding: 1px 5px; border-radius: var(--radius-pill); background: var(--accent-soft); font-variant-numeric: tabular-nums; text-align: center; }
.knowledge-category:hover,
.knowledge-category.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.knowledge-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.knowledge-card-heading .resource-icon { flex: 0 0 auto; margin: 0; }
.knowledge-entry-type { color: var(--ink-2); font-size: .75rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.knowledge-filter-empty,
.knowledge-list-empty { max-width: 1400px; margin: 0 auto; }
.knowledge-editor .panel-heading p:last-child { max-width: 660px; margin: 4px 0 0; color: var(--ink-2); font-size: .8125rem; }
.ticket-knowledge-panel {
  max-width: 1400px;
  display: grid;
  grid-template-columns: minmax(230px, .85fr) minmax(0, 1.5fr) auto;
  align-items: center;
  gap: 22px;
  margin: 0 auto 18px;
  padding: 20px;
}
.ticket-knowledge-panel h2 { margin: 2px 0 5px; font-size: 1rem; }
.ticket-knowledge-panel > div:first-child > p:last-child { margin: 0; color: var(--ink-2); font-size: .8125rem; }
.ticket-knowledge-links { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ticket-knowledge-links > a {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--sheet-2);
  transition: color .12s ease, border-color .12s ease;
}
.ticket-knowledge-links > a:hover { border-color: var(--accent); color: var(--accent); }
.ticket-knowledge-links > a > span:last-child { min-width: 0; }
.ticket-knowledge-links small,
.ticket-knowledge-links strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-knowledge-links small { color: var(--ink-2); font-size: .75rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.ticket-knowledge-links strong { margin-top: 2px; font-size: .8125rem; }
.ticket-knowledge-icon { width: 28px; height: 28px; display: grid; flex: 0 0 auto; place-items: center; border-radius: var(--radius-sm); background: var(--accent-soft); }
.ticket-knowledge-panel > .button { white-space: nowrap; }
.policy-upload-panel { max-width: 1400px; margin: 0 auto 18px; padding: 18px; }
.policy-upload-panel form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) minmax(250px, 1.5fr) auto;
  gap: 14px;
  align-items: end;
}
.policy-upload-panel form .button { min-height: 36px; }
.policy-upload-panel > small { display: block; margin-top: 12px; color: var(--ink-2); }
.policies-layout {
  max-width: 1400px;
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 18px;
  margin: 0 auto;
  align-items: start;
}
.policy-library-panel { min-width: 0; padding: 16px; }
.policy-list { display: grid; gap: 8px; }
.policy-list-item {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background .12s ease, border-color .12s ease;
}
.policy-list-item:hover { border-color: var(--rule); background: var(--sheet-2); }
.policy-list-item.selected { border-color: var(--accent); background: var(--accent-soft); }
.policy-list-item > a {
  min-width: 0;
  display: flex;
  flex: 1;
  gap: 11px;
  align-items: center;
  padding: 6px;
  color: var(--ink);
  text-decoration: none;
}
.policy-list-item > a > span:last-child { min-width: 0; }
.policy-list-item strong,
.policy-list-item small { display: block; overflow-wrap: anywhere; }
.policy-list-item small { margin-top: 3px; color: var(--ink-2); font-size: .75rem; }
.policy-file-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--accent);
  background: var(--accent-soft);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 0;
}
.policy-list-item .delete-policy { flex: 0 0 auto; }
.policy-reader-panel { min-width: 0; overflow: hidden; padding: 0; }
.policy-reader-panel.empty { min-height: 680px; }
.policy-reader-heading {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--rule);
}
.policy-reader-heading h2 { margin: 2px 0 5px; }
.policy-reader-heading p { max-width: 740px; margin: 0; color: var(--ink-2); }
.policy-reader-heading .button { flex: 0 0 auto; }
.policy-pdf-frame {
  width: 100%;
  height: min(76vh, 920px);
  min-height: 680px;
  display: block;
  border: 0;
  background: var(--sheet-2);
}
.announcement-publisher { max-width: 980px; margin: 0 0 20px; padding: 18px; }
.announcement-publisher form { display: grid; gap: 14px; }
.announcement-publisher .button { justify-self: start; }
.announcement-list { max-width: 980px; display: grid; gap: 16px; margin: 0; }
.announcement-card { padding: 18px; }
.announcement-card > header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}
.announcement-card h2 { margin: 3px 0 0; }
.announcement-message {
  margin: 12px 0;
  color: var(--ink);
  line-height: 1.6;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.announcement-card footer {
  display: flex;
  gap: 10px 20px;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: .8125rem;
}
.permission-guidance { max-width: 1400px; margin: 0 auto 18px; padding: 16px 18px; }
.permission-guidance p { margin: 5px 0 0; color: var(--ink-2); }
.permissions-grid {
  max-width: 1400px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  margin: 0 auto;
}
.permission-card { padding: 18px; }
.permission-card > header {
  display: flex;
  gap: 11px;
  align-items: center;
  margin-bottom: 14px;
}
.permission-card > header > span:nth-child(2) { min-width: 0; flex: 1; }
.permission-card h2 { margin: 0; overflow-wrap: anywhere; font-size: 1rem; }
.permission-card header small { display: block; margin-top: 2px; color: var(--ink-2); }
.permission-card .status-pill { flex: 0 0 auto; }
.permission-form { display: grid; gap: 16px; }
.permission-switch-grid { display: grid; gap: 8px; }
.permission-switch {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--sheet-2);
  cursor: pointer;
}
.permission-switch input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; }
.permission-switch span { min-width: 0; }
.permission-switch strong,
.permission-switch small { display: block; }
.permission-switch small { margin-top: 2px; color: var(--ink-2); }
.permission-switch:has(input:disabled) { cursor: default; opacity: .72; }
.permission-form .button { justify-self: start; }
.admin-section { max-width: 1400px; margin: 24px auto 0; padding: 18px; }
.two-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.two-form-grid > form { min-width: 0; }
.two-form-grid > form + form { padding-left: 24px; border-left: 1px solid var(--rule); }
.two-form-grid input[type="file"] { min-width: 0; max-width: 100%; }
.stack-form { display: grid; gap: 14px; }
.stack-form > .button { justify-self: start; }
.inline-form { display: grid; gap: 13px; align-items: end; }
.user-create-form { grid-template-columns: 1.2fr 1fr 1.2fr 1.25fr 1fr 1fr auto; }
.manager-team-builder { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sheet-2); }
.manager-team-controls { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto; align-items: end; gap: 13px; }
.manager-team-summary { min-width: 130px; display: grid; padding: 9px 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--sheet); }
.manager-team-summary strong { font-size: .875rem; font-variant-numeric: tabular-nums; }
.manager-team-actions { display: flex; align-items: center; gap: 12px; }
.manager-team-actions .danger-text { margin-left: auto; color: var(--danger); }
.manager-team-members { max-height: 320px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); overflow-y: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sheet); }
.manager-team-members > label { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-bottom: 1px solid var(--rule); cursor: pointer; }
.manager-team-members > label[hidden] { display: none; }
/* The tick box is the drawn one from the form controls above. */
.manager-team-members span { display: grid; font-size: .875rem; font-weight: 600; }
.manager-team-members small { color: var(--ink-2); font-size: .75rem; font-weight: 400; }
.manager-team-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.manager-team-footer p { margin: 0; color: var(--ink-2); font-size: .8125rem; }
.form-note { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: .8125rem; }
.narrow-panel { max-width: 520px; padding: 20px; }
.settings-grid { max-width: 1400px; display: grid; grid-template-columns: minmax(300px,.75fr) minmax(380px,1.25fr); gap: 20px; margin: 0 auto; }
.settings-grid > .panel { margin: 0; padding: 18px; }
.rule-list > div { display: grid; grid-template-columns: 145px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.rule-list time { font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rule-list span { display: flex; flex-direction: column; }
.rule-list strong { font-size: .875rem; }
.holiday-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--rule); }
.holiday-grid > div { display: grid; grid-template-columns: 145px 1fr; gap: 12px; padding: 10px 12px; background: var(--sheet); font-size: .8125rem; }
.holiday-grid time { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Data table */
.table-panel { max-width: 1400px; margin: 22px auto 0; padding: 18px; }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 8px 12px; border-bottom: 1px solid var(--rule-strong); color: var(--ink-2); font-size: .75rem; font-weight: 600; letter-spacing: 0; text-align: left; text-transform: none; }
.table-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.table-sort:hover, .table-sort.active { color: var(--accent); }
.table-sort span { color: var(--ink-3); font-size: .75rem; }
.data-table td { min-width: 125px; padding: 8px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.data-table td:first-child { min-width: 180px; }
.data-table td:nth-child(2) { min-width: 180px; }
.data-table select, .table-input { min-height: 32px; padding: 5px 8px; border-color: transparent; border-radius: var(--radius-sm); background: var(--sheet-2); font-size: .8125rem; }
.data-table input:focus, .data-table select:focus { border-color: var(--accent); background: var(--sheet); }
.row-actions { white-space: nowrap; }
.row-actions .text-button { color: var(--ink-2); }
.row-actions .danger-text { color: var(--danger); }
.warning-text { display: block; margin: 3px 0 0 8px; color: var(--warn); font-size: .75rem; }
.switch { display: flex; grid-template-columns: auto; align-items: center; gap: 7px; cursor: pointer; }
.switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch span { position: relative; width: 34px; height: 19px; border-radius: var(--radius-pill); background: var(--field-border); transition: background .14s ease; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: var(--sheet); transition: transform .14s ease; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(15px); }
.switch b { font-size: .8125rem; font-weight: 500; }
.compact-search { display: flex; align-items: center; gap: 8px; }
.compact-search input { width: 220px; }
/* Departments Directory */
.directory-toolbar {
  max-width: 1400px;
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(320px, 1.2fr);
  align-items: end;
  gap: 18px;
  margin: 0 auto 20px;
  padding: 16px 18px;
}
.directory-toolbar .compact-search {
  min-width: 0;
  align-items: stretch;
  flex-direction: column;
}
.directory-toolbar .compact-search input { width: 100%; }
.directory-entry-composer {
  max-width: 1400px;
  margin: 0 auto 20px;
  padding: 16px 18px;
}
.directory-entry-composer summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}
.directory-entry-composer summary::-webkit-details-marker { display: none; }
.directory-entry-composer summary > span:first-child { display: grid; gap: 3px; }
.directory-entry-composer summary small {
  color: var(--ink-2);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.directory-entry-composer[open] summary {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.directory-entry-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  align-items: end;
  gap: 13px;
}
.directory-entry-form .button { min-height: 36px; }
.directory-panel { margin-top: 0; }
.directory-panel .panel-heading p:last-child {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: .8125rem;
}
.directory-table { table-layout: fixed; }
.directory-table th:nth-child(1) { width: 19%; }
.directory-table th:nth-child(2) { width: 27%; }
.directory-table th:nth-child(3) { width: 18%; }
.directory-table th:nth-child(4) { width: 26%; }
.directory-table td {
  min-width: 0;
  overflow-wrap: anywhere;
}
.directory-table td:first-child,
.directory-table td:nth-child(2) { min-width: 0; }
.directory-table a { font-weight: 600; }
.directory-admin-table { min-width: 1120px; table-layout: auto; }
.directory-admin-table td { min-width: 160px; }
.directory-admin-table td:nth-last-child(2) { min-width: 210px; }
.directory-admin-table td:last-child { min-width: 130px; }
.directory-empty-row td { color: var(--ink-2); text-align: center; }
/* Phone extension directory */
.phone-directory-tools {
  max-width: 1400px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin: 0 auto 18px;
}
.phone-directory-tools .search-field { width: min(520px, 100%); }
.phone-print-restricted { display: none; }
.phone-sheet {
  position: relative;
  max-width: 1120px;
  min-height: 1480px;
  margin: 0 auto;
  padding: 20px;
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--sheet);
  font-family: Arial, Helvetica, sans-serif;
}
.phone-print-grid {
  min-width: 1000px;
  display: grid;
  grid-template-columns: 39% 36% 25%;
  gap: 12px;
  align-items: start;
}
.phone-print-table { width: 100%; border: 1px solid var(--field-border); border-collapse: collapse; table-layout: fixed; }
.phone-print-table th,
.phone-print-table td {
  height: 21px;
  padding: 1px 4px;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  background: var(--sheet);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}
.phone-print-table th { height: 24px; font-size: .6875rem; }
.phone-print-table th:first-child,
.phone-print-table td:first-child { width: 8%; }
.phone-print-table th:nth-child(2),
.phone-print-table td:nth-child(2) { width: 32%; }
.phone-print-table th:nth-child(3),
.phone-print-table td:nth-child(3) { width: 43%; }
.phone-print-table th:nth-child(4),
.phone-print-table td:nth-child(4) { width: 17%; }
.phone-print-table input {
  width: 100%;
  min-height: 0;
  padding: 1px 2px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: center;
  text-transform: uppercase;
}
.phone-print-table input:hover { background: var(--sheet-2); }
.phone-print-table input:focus { border-color: var(--accent); background: var(--sheet); }
.phone-print-table .phone-row-actions {
  width: 84px;
  padding: 0 2px;
  white-space: nowrap;
}
.phone-row-actions .text-button { padding: 1px 2px; font-size: .6875rem; }
.phone-row-actions .danger-text { color: var(--danger); }
.phone-hellas-list { margin-top: 28px; }
.phone-shared-list { width: 58%; margin: 96px auto 0; }
.phone-shared-table td:first-child { width: 76%; }
.phone-shared-table td:nth-child(2) { width: 24%; }
.phone-contact-column { display: grid; }
.phone-contact-card {
  display: grid;
  gap: 7px;
  padding: 14px 8px;
  border: 2px dashed var(--rule-strong);
  color: var(--ink);
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.phone-contact-card strong { font-size: .75rem; }
.phone-contact-gap { margin-top: 12px; }
.phone-hellas-contact { margin-top: 355px; gap: 5px; }
.phone-print-date {
  position: absolute;
  right: 25px;
  bottom: 20px;
  color: var(--ink-2);
  font-size: .75rem;
}
.phone-extension-form { grid-template-columns: 1.3fr 1.2fr 1.2fr .7fr auto; }
@media screen {
  .phone-print-grid { grid-template-columns: 52% 48%; }
  .phone-contact-column { display: none; }
  .phone-editing .phone-print-table th:first-child,
  .phone-editing .phone-print-table td:first-child { width: 6%; }
  .phone-editing .phone-print-table th:nth-child(2),
  .phone-editing .phone-print-table td:nth-child(2) { width: 24%; }
  .phone-editing .phone-print-table th:nth-child(3),
  .phone-editing .phone-print-table td:nth-child(3) { width: 35%; }
  .phone-editing .phone-print-table th:nth-child(4),
  .phone-editing .phone-print-table td:nth-child(4) { width: 11%; }
  .phone-editing .phone-print-table .phone-row-actions {
    width: 24%;
    text-align: center;
    white-space: nowrap;
  }
  .phone-editing .phone-row-actions .text-button {
    display: inline-block;
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    color: var(--accent);
    background: var(--accent-soft);
    font-size: .6875rem;
  }
  .phone-editing .phone-row-actions .text-button + .text-button { margin-left: 5px; }
  .phone-editing .phone-row-actions .danger-text {
    color: var(--danger);
    background: var(--danger-soft);
  }
  .phone-editing .phone-shared-table td:first-child { width: 58%; }
  .phone-editing .phone-shared-table td:nth-child(2) { width: 16%; }
  .phone-editing .phone-shared-table .phone-row-actions { width: 26%; }
}
/* Authentication */
.auth-body { background: var(--paper); }
/* The signed-out page is the one screen in the workspace with nothing to do on
   it but one small form, so the rest of the width has to carry itself. Two flat
   panels divided by a hairline read as an unfinished page; the brand navy gives
   the left half a ground of its own and the form something to sit against. This
   is also the one place the design spends colour freely — there is no data here
   for it to compete with. */
.auth-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, .92fr) minmax(500px, 1.08fr); }
.auth-story {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 5vh, 52px);
  overflow: hidden;
  padding: clamp(32px, 4.5vw, 64px);
  border-right: 0;
  color: var(--brand-panel-ink-2);
  background:
    radial-gradient(circle at 14% 6%, color-mix(in srgb, var(--brand-panel-accent) 16%, transparent), transparent 44%),
    radial-gradient(circle at 88% 98%, color-mix(in srgb, var(--brand-panel-deep) 70%, transparent), transparent 50%),
    linear-gradient(158deg, var(--brand-panel-top) 0%, var(--brand-panel-mid) 46%, var(--brand-panel-deep) 100%);
}
/* A faint grid, the same idea as ruled paper, so the panel has some surface
   without another shape being drawn on it. */
.auth-story::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(color-mix(in srgb, var(--brand-panel-ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--brand-panel-ink) 5%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 30% 30%, black, transparent 78%);
}
.auth-story > * { position: relative; z-index: 1; }
.auth-story .brand { color: var(--brand-panel-ink); font-size: 1.125rem; }
.auth-story .brand strong { color: var(--brand-panel-ink); }
.auth-story .brand small { color: color-mix(in srgb, var(--brand-panel-ink-2) 62%, transparent); }
/* logo-light.png is the navy mark meant for a pale ground; on this panel it is
   the white one that has to show, in either theme. */
.auth-story .brand-logo-light { display: none; }
.auth-story .brand-logo-dark { display: block; }
.auth-story-top { display: grid; gap: 14px; }
.auth-story-body { display: grid; gap: 14px; }
.auth-story-foot { display: grid; gap: 10px; }
/* What the firm does, under its own name. Kept to one sentence and one measure:
   it is orientation for a new starter, not a page of marketing. */
.auth-org {
  max-width: 44ch;
  margin-bottom: 0;
  color: color-mix(in srgb, var(--brand-panel-ink-2) 64%, transparent);
  font-size: .8125rem;
  line-height: 1.6;
}
.auth-quote {
  max-width: 34ch;
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid color-mix(in srgb, var(--brand-panel-accent) 55%, transparent);
  color: color-mix(in srgb, var(--brand-panel-ink-2) 90%, transparent);
  font-size: .9375rem;
  font-style: italic;
  line-height: 1.5;
}
.auth-story h1 {
  max-width: 17ch;
  color: var(--brand-panel-ink);
  font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  line-height: 1.15;
  letter-spacing: -.025em;
}
.auth-story-body > p { max-width: 46ch; margin-bottom: 0; color: color-mix(in srgb, var(--brand-panel-ink-2) 82%, transparent); font-size: .9375rem; line-height: 1.6; }
.auth-story .eyebrow { margin-bottom: 0; color: var(--brand-panel-accent); font-weight: 600; }
.auth-points { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.auth-points li {
  position: relative;
  padding-left: 26px;
  color: color-mix(in srgb, var(--brand-panel-ink-2) 88%, transparent);
  font-size: .875rem;
  line-height: 1.5;
}
.auth-points li::before {
  position: absolute;
  top: .45em;
  left: 0;
  width: 14px;
  height: 8px;
  border-bottom: 2px solid var(--brand-panel-accent);
  border-left: 2px solid var(--brand-panel-accent);
  content: "";
  transform: rotate(-45deg);
}
/* 58% is the floor that clears 4.5:1 against the lightest stop of the gradient,
   not just the dark corner the note happens to sit in. */
.auth-note { margin-bottom: 0; color: color-mix(in srgb, var(--brand-panel-ink-2) 58%, transparent); font-size: .75rem; }
.auth-panel { display: grid; place-items: center; padding: 28px; background: var(--paper); }
/* The card is the only object on its half of the page and behaves like a dialog
   rather than a section of a document, so it is one of the few things in the
   flow that legitimately floats. */
.auth-card {
  width: min(408px, 100%);
  display: grid;
  gap: 15px;
  padding: 30px 28px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--sheet);
  box-shadow: var(--shadow-pop);
}
.auth-card > div:first-child { display: grid; gap: 3px; }
.auth-card h2 { margin-bottom: 0; font-size: 1.25rem; }
.auth-card .muted { margin-bottom: 0; font-size: .8125rem; }
.auth-card .button { margin-top: 4px; min-height: 42px; font-size: .875rem; }
.auth-card input { font-size: 16px; }
.brand-light { align-self: flex-start; }
.flash { max-width: 1400px; margin: 0 auto 18px; padding: 10px 14px; border: 1px solid var(--accent-soft-2); border-radius: var(--radius); color: var(--ink); background: var(--accent-soft); font-size: .8125rem; }
.flash.error { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
/* flash() has always accepted "success" and two callers pass it, but only the
   base and .error were styled, so a confirmation read in the neutral accent. */
.flash.success { border-color: var(--positive); color: var(--positive); background: var(--positive-soft); }
.toast-region { position: fixed; z-index: 100; right: 22px; bottom: 22px; display: grid; gap: 8px; pointer-events: none; }
.toast { max-width: 380px; padding: 10px 14px; border-radius: var(--radius); color: var(--paper); background: var(--ink); box-shadow: var(--shadow-pop); font-size: .8125rem; animation: toast-in .2s ease; }
.toast.error { background: var(--danger); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }
.app-update-notice {
  position: fixed;
  z-index: 130;
  right: 22px;
  bottom: 22px;
  max-width: min(390px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  color: var(--ink);
  background: var(--sheet);
  box-shadow: var(--shadow-pop);
}
.app-update-notice > span { min-width: 0; display: grid; gap: 3px; }
.app-update-notice strong { font-size: .875rem; }
.app-update-notice small { color: var(--ink-2); font-size: .75rem; line-height: 1.4; }
.app-update-notice button {
  min-height: 36px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--accent-ink);
  background: var(--accent);
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
}
.error-state { max-width: 650px; margin: 10vh auto 0; }
.error-state > span { color: var(--flag); font-family: var(--font-display); font-size: 2rem; font-weight: 600; }
@media (max-width: 1150px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-action-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-insights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .user-create-form { grid-template-columns: repeat(3, 1fr); }
  .calendar-toolbar { align-items: flex-start; }
  .calendar-filters { flex-direction: column; }
  .calendar-panel { overflow-x: auto; }
  .phone-extension-form { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 850px) {
  .app-shell { display: block; }
  body.mobile-menu-open {
    position: fixed;
    right: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
  }
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 70;
    height: auto;
    min-height: 70px;
    padding: 12px 16px;
    box-shadow: var(--shadow-pop);
  }
  .sidebar.mobile-nav-open {
    position: fixed;
    inset: 0;
    height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    overscroll-behavior: contain;
  }
  .brand { width: max-content; margin: 0; }
  .brand-mark { width: 42px; height: 42px; flex-basis: 42px; }
  .brand-logo { width: 40px; height: 40px; }
  .mobile-nav-toggle {
    position: absolute;
    top: 17px;
    right: 16px;
    min-height: 38px;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    background: var(--sheet-2);
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
  }
  .sidebar.mobile-nav-open .mobile-nav-toggle { display: flex; }
  .mobile-nav-toggle i,
  .mobile-nav-toggle i::before,
  .mobile-nav-toggle i::after {
    width: 17px;
    height: 2px;
    display: block;
    border-radius: 3px;
    background: var(--ink-2);
    content: "";
    transition: background .14s ease;
  }
  .mobile-nav-toggle i { position: relative; }
  .mobile-nav-toggle i::before { position: absolute; top: -5px; }
  .mobile-nav-toggle i::after { position: absolute; top: 5px; }
  .mobile-nav-open .mobile-nav-toggle i { background: transparent; }
  .mobile-nav-open .mobile-nav-toggle i::before { top: 0; transform: rotate(45deg); }
  .mobile-nav-open .mobile-nav-toggle i::after { top: 0; transform: rotate(-45deg); }
  .main-nav {
    width: 100%;
    display: none;
    gap: 3px;
    margin: 14px 0 0;
    padding-top: 12px;
    overflow: visible;
    border-top: 1px solid var(--rule);
  }
  .mobile-nav-open .main-nav {
    min-height: 0;
    display: grid;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  .main-nav a[data-mobile-hidden="true"] { display: none; }
  .mobile-nav-open .nav-group-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .main-nav a {
    width: 100%;
    min-height: 58px;
    margin: 0;
    border: 1px solid var(--rule);
    background: var(--sheet-2);
  }
  .main-nav a span { display: grid; }
  .main-nav .nav-label { display: block; margin-top: 18px; }
  .sidebar-footer {
    position: static;
    display: none;
    margin: 14px 0 0;
    padding-top: 13px;
    border-top: 1px solid var(--rule);
  }
  .mobile-nav-open .sidebar-footer { display: block; }
  .sidebar-footer .user-summary,
  .sidebar-footer .account-links > a,
  .sidebar-footer .account-links > form { display: none; }
  .mobile-nav-open .sidebar-footer .user-summary { display: flex; }
  .mobile-nav-open .sidebar-footer .account-links > a,
  .mobile-nav-open .sidebar-footer .account-links > form { display: flex; }
  .sidebar-footer .account-links { display: grid; margin-top: 10px; }
  .main-content { padding: 20px 16px calc(104px + env(safe-area-inset-bottom)); }
  .mobile-dock {
    position: fixed;
    z-index: 65;
    right: 16px;
    bottom: 8px;
    left: 16px;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    left: max(16px, env(safe-area-inset-left));
    width: auto;
    max-width: 360px;
    min-height: 60px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: color-mix(in srgb, var(--sheet) 94%, transparent);
    box-shadow: var(--shadow-pop);
    backdrop-filter: blur(20px) saturate(1.3);
    transition: opacity .18s ease, transform .18s ease;
  }
  .mobile-dock a,
  .mobile-dock button {
    min-width: 0;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    padding: 3px 2px;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    background: transparent;
    font: inherit;
    font-size: .6875rem;
    font-weight: 600;
    cursor: pointer;
  }
  .mobile-dock a:hover,
  .mobile-dock button:hover,
  .mobile-dock a.active {
    color: var(--forest-700);
    background: var(--mint);
  }
  .mobile-dock .nav-icon { width: 19px; height: 19px; display: grid; place-items: center; }
  .mobile-dock .nav-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }
  .mobile-dock-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.mobile-menu-open .mobile-dock { opacity: 0; pointer-events: none; transform: translateY(14px); }
  .toast-region { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .app-update-notice {
    right: 12px;
    bottom: calc(92px + env(safe-area-inset-bottom));
    left: 12px;
    max-width: none;
  }
  @supports (width: 100dvw) {
    .mobile-dock { max-width: min(360px, calc(100dvw - 32px)); }
  }
  .storage-meter { padding: 18px 0 0; border-top: 1px solid var(--rule); border-left: 0; }
  input,
  select,
  textarea,
  .data-table select,
  .table-input,
  .phone-print-table input { font-size: 16px; }
  .auth-layout { grid-template-columns: 1fr; }
  /* Stacked, the panel only has to introduce the app — the form is what the
     person came for, so the supporting list stands down and the panel shrinks to
     roughly a third of the screen rather than filling it. */
  .auth-story { min-height: 0; gap: 16px; padding: 22px 20px 26px; }
  .auth-story h1 { max-width: none; font-size: 1.375rem; }
  .auth-story-body { gap: 8px; }
  .auth-story-body > p { max-width: none; font-size: .8125rem; }
  .auth-story .brand { font-size: 1rem; }
  .auth-story-top { gap: 10px; }
  .auth-org { max-width: none; font-size: .75rem; }
  .auth-points, .auth-note, .auth-quote { display: none; }
  .calendar-toolbar, .calendar-instruction { align-items: flex-start; flex-direction: column; }
  .calendar-filters { width: 100%; }
  .calendar-filters label, .calendar-filters select { width: 100%; }
  .dashboard-insights-grid { grid-template-columns: 1fr; }
  .manager-team-controls { grid-template-columns: 1fr; }
  .manager-team-footer { align-items: stretch; flex-direction: column; }
  .manager-team-footer .button { width: 100%; }
  .modal-backdrop { padding: 10px; }
  .day-details-modal { max-height: calc(100vh - 20px); padding: 20px; border-radius: var(--radius-lg); }
  .day-add-person { grid-template-columns: 1fr; }
  .christos-job-row { flex-direction: column; }
  .christos-notification-control,
  .admin-notification-control {
    align-items: stretch;
    flex-direction: column;
  }
  .christos-notification-actions,
  .admin-notification-actions {
    justify-content: flex-start;
  }
  .job-row-actions { width: 100%; justify-content: flex-start; padding-left: 37px; }
  .personal-task-layout { grid-template-columns: 1fr; }
  .personal-task-create { position: static; height: auto; }
  .department-item-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-form-grid, .settings-grid { grid-template-columns: 1fr; }
  .policy-upload-panel form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .policy-description-field { grid-column: 1 / -1; }
  .two-form-grid > form + form { padding: 20px 0 0; border-top: 1px solid var(--rule); border-left: 0; }
  .phone-directory-tools { align-items: stretch; flex-direction: column; }
}
@media (max-width: 600px) {
  .page-header { align-items: flex-start; flex-direction: column; }
  .page-header .button { width: 100%; }
  .policy-upload-panel form { grid-template-columns: 1fr; }
  .policy-description-field { grid-column: auto; }
  .policy-reader-heading { flex-direction: column; }
  .policy-reader-heading .button { width: 100%; }
  .permissions-grid { grid-template-columns: 1fr; }
  .permission-card > header { align-items: flex-start; flex-wrap: wrap; }
  .announcement-card footer { flex-direction: column; }
  .announcement-publisher .button,
  .permission-form .button { width: 100%; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  /* Two cards to a phone row leave a label like "IT Knowledge Base" too little
     width to sit beside its number, so below this width the card stacks and the
     number reads under the label instead of fighting it for the line. */
  .stat-card { min-height: 0; grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .stat-card strong { grid-row: auto; font-size: 1.5rem; }
  .dashboard-insights-grid,
  .dashboard-grid { gap: 14px; }
  .dashboard-action-center { padding: 16px; }
  .dashboard-action-center .panel-heading { align-items: flex-start; }
  .dashboard-action-list { grid-template-columns: 1fr; }
  .dashboard-action-open { display: none; }
  .dashboard-insights-grid > .panel,
  .dashboard-grid > .panel { padding: 16px; }
  .dashboard-person-list { grid-template-columns: 1fr; }
  .dashboard-team-item-list { grid-template-columns: 1fr; }
  .calendar-panel { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .calendar-instruction { margin-bottom: 8px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sheet); }
  .calendar-grid {
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0;
  }
  .weekday-heading,
  .calendar-blank { display: none; }
  .calendar-day,
  .calendar-day:nth-child(7n) {
    min-height: 66px;
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
    padding: 11px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
  }
  .calendar-day.closed { min-height: 58px; }
  .day-top { align-items: center; justify-content: flex-start; gap: 7px; }
  .day-weekday-mobile { display: block; }
  .day-status { grid-column: 1 / -1; white-space: normal; }
  .assignment-list { align-self: center; margin: 0; }
  .calendar-loading { min-height: 220px; }
  .modal-backdrop { align-items: stretch; padding: 0; }
  .day-details-modal {
    width: 100%;
    height: 100dvh;
    max-height: none;
    gap: 18px;
    padding: 18px 16px 28px;
    border: 0;
    border-radius: 0;
  }
  .day-details-modal > header {
    position: sticky;
    z-index: 5;
    top: -18px;
    padding-top: 18px;
    background: var(--sheet);
  }
  .day-add-person,
  .schedule-entry-actions {
    position: sticky;
    z-index: 4;
    bottom: -28px;
    margin: 0 -16px;
    padding: 13px 16px calc(13px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--rule);
    background: var(--sheet);
  }
  .day-add-person .button,
  .schedule-entry-actions .button { width: 100%; }
  .schedule-entry-form { grid-template-columns: 1fr; }
  .schedule-entry-heading { align-items: flex-start; }
  .discussion-comment-form,
  .discussion-file-form { grid-template-columns: 1fr; }
  .discussion-comment-form .button,
  .discussion-file-form .button { width: 100%; }
  .personal-task-board .panel-heading { align-items: stretch; flex-direction: column; }
  .task-filter { width: 100%; }
  .task-filter .text-button { flex: 1; justify-content: center; }
  .personal-task-list { grid-template-columns: 1fr; }
  .personal-task-card header { align-items: flex-start; flex-direction: column; }
  .personal-task-reminder-fields { grid-template-columns: 1fr; }
  .department-item-form { grid-template-columns: 1fr; }
  .department-item-form .wide-field { grid-column: auto; }
  .department-item-card header,
  .department-item-card footer { align-items: flex-start; flex-direction: column; }
  .button,
  .icon-button,
  input,
  select { min-height: 44px; }
  .table-panel { padding: 16px; }
  .table-panel .panel-heading { align-items: stretch; flex-direction: column; }
  .compact-search { width: 100%; align-items: stretch; flex-direction: column; }
  .compact-search input { width: 100%; }
  .table-scroll { overflow: visible; }
  #team-table,
  #team-table tbody,
  #team-table tr,
  #team-table td { width: 100%; display: block; }
  #team-table thead { display: none; }
  #team-table tbody { display: grid; gap: 12px; }
  #team-table tr { padding: 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sheet); }
  #team-table td { min-width: 0; padding: 8px 0; border: 0; }
  #team-table td::before { display: block; margin-bottom: 4px; color: var(--ink-2); font-size: .75rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
  #team-table td:nth-child(1)::before { content: "Person"; }
  #team-table td:nth-child(2)::before { content: "Username"; }
  #team-table td:nth-child(3)::before { content: "Department"; }
  #team-table td:nth-child(4)::before { content: "Access"; }
  #team-table td:nth-child(5)::before { content: "Status"; }
  #team-table .row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
  .phone-sheet { min-height: 0; padding: 10px; overflow: visible; }
  .phone-print-grid { min-width: 0; grid-template-columns: 1fr; gap: 16px; }
  .phone-hellas-list,
  .phone-shared-list { width: 100%; margin: 16px 0 0; }
  .phone-print-table { table-layout: fixed; }
  .phone-print-table th,
  .phone-print-table td { font-size: .6875rem; }
  .phone-editing .phone-print-table .phone-row-actions { width: 27%; white-space: normal; }
  .phone-editing .phone-row-actions .text-button { margin: 2px !important; padding: 4px; }
  .phone-print-date { position: static; display: block; margin-top: 14px; text-align: right; }
  .user-create-form { grid-template-columns: 1fr; }
  .auth-panel { padding: 18px; }
  .auth-card { padding: 20px; }
  .resource-grid { grid-template-columns: 1fr; }
  .policies-layout { grid-template-columns: 1fr; }
  .policy-reader-panel.empty { min-height: 360px; }
  .policy-pdf-frame { min-height: 520px; height: 70vh; }
  .legend { flex-wrap: wrap; }
  .phone-extension-form { grid-template-columns: 1fr; }
}
/* Persistent dark theme.
   A neutral graphite, not the navy-on-navy it replaced: when the panel and the
   canvas were both navy the surfaces stopped separating and the rule between
   them disappeared. Because every component now draws from tokens, this block
   is the whole theme — the per-component overrides below it are leftovers being
   retired as each surface is moved onto tokens. */
html[data-theme="dark"] {
  color-scheme: dark;
  /* The navy off the sign-in panel, carried across the workspace. It is a real
     navy rather than the blue-graphite it replaces — the same family as
     --brand-panel-mid — and it separates its surfaces better than the graphite
     did on every measure, which is the thing to watch here: the dark theme this
     app shipped with originally failed precisely because a navy panel on a navy
     canvas stopped telling itself apart. The hairline does that work. */
  --paper: #081c31;
  --sheet: #0e2a47;
  --sheet-2: #123351;
  --ink: #e8eff8;
  --ink-2: #a6bcd6;
  --ink-3: #8ca4c2;
  --rule: #1d4368;
  --rule-strong: #2b5680;
  --field-border: #4d7ea9;
  --accent: #8fbdea;
  --accent-hover: #b0d3f3;
  --accent-soft: #123a5e;
  --accent-soft-2: #1a4b76;
  --accent-ink: #06192c;
  /* The signals keep their hue but move onto grounds that belong to the navy,
     so a warning still reads warm without looking pasted on. */
  --flag: #f09c72;
  --flag-soft: #3a2418;
  --positive: #6fcaa2;
  --positive-soft: #0f3329;
  --warn: #e2b872;
  --warn-soft: #332810;
  --danger: #f19a90;
  --danger-soft: #3b1e1c;
  --forest-950: #b0d3f3;
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);
  --shadow-pop: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -8px rgba(0, 0, 0, .55);
  --shadow-pop-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 28px 64px -16px rgba(0, 0, 0, .6);
  background: var(--paper);
}
html[data-theme="dark"] a:hover { color: var(--accent-hover); }
html[data-theme="dark"] .stat-card strong { color: var(--ink); }
html[data-theme="dark"] .panel,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .resource-card,
html[data-theme="dark"] .day-details-modal,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .manager-team-members,
html[data-theme="dark"] .manager-team-summary,
html[data-theme="dark"] .holiday-grid > div {
  color: var(--ink);
  background: var(--sheet);
}
html[data-theme="dark"] .button.primary { background: var(--accent); }
html[data-theme="dark"] .button.primary:hover { background: var(--accent-hover); }
html[data-theme="dark"] .button.secondary,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  border-color: var(--rule);
  color: var(--ink);
  background: var(--sheet);
}
html[data-theme="dark"] label { color: var(--ink-2); }
html[data-theme="dark"] .text-button { color: var(--forest-700); }
html[data-theme="dark"] .text-button.danger-text { color: var(--danger); }
html[data-theme="dark"] .knowledge-category span { background: var(--accent-soft); }
html[data-theme="dark"] .knowledge-category:hover,
html[data-theme="dark"] .knowledge-category.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
html[data-theme="dark"] .ticket-knowledge-links > a { background: var(--sheet-2); }
html[data-theme="dark"] .task-filter .text-button.active {
  color: var(--accent-ink);
  background: var(--accent);
}
html[data-theme="dark"] .personal-task-layout input::placeholder,
html[data-theme="dark"] .personal-task-layout textarea::placeholder,
html[data-theme="dark"] .team-item-composer input::placeholder,
html[data-theme="dark"] .team-item-composer textarea::placeholder {
  color: var(--ink-3);
}
html[data-theme="dark"] .calendar-instruction,
html[data-theme="dark"] .weekday-heading,
html[data-theme="dark"] .calendar-blank,
html[data-theme="dark"] .manager-team-builder,
html[data-theme="dark"] .data-table select,
html[data-theme="dark"] .table-input {
  color: var(--ink);
  background: var(--sheet-2);
}
html[data-theme="dark"] .assignment-chip {
  border-color: var(--rule);
  color: var(--ink);
  background: var(--sheet);
}
/* The same eight names, lifted for a dark ground. Only the values move, so a
   destination keeps its identity across themes. */
html[data-theme="dark"] {
  --trip-blue: #6ea8f0;
  --trip-teal: #3fc0b4;
  --trip-green: #6cc07f;
  --trip-amber: #dbb04a;
  --trip-orange: #ef9550;
  --trip-rose: #e8809d;
  --trip-violet: #b18ce8;
  --trip-slate: #9db0c6;
}
html[data-theme="dark"] .trip-color-swatch span { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent) inset; }
html[data-theme="dark"] .trip-color-swatch input:checked + span { border-color: var(--ink); }
html[data-theme="dark"] .policy-list-item:hover { background: var(--sheet-2); }
/* Administrator-only data protection workspace. */
.admin-protection-header {
  padding: clamp(16px, 2.4vw, 20px);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--sheet);
}
.backup-overview-grid,
.retention-overview-grid {
  width: 100%;
  max-width: 1400px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 auto 18px;
}
.retention-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.backup-overview-grid .metric-card,
.retention-overview-grid .metric-card { box-shadow: none; }
.backup-overview-grid .metric-card strong { font-size: clamp(1rem, 1.6vw, 1.375rem); font-variant-numeric: tabular-nums; }
.backup-overview-grid .metric-card small,
.retention-overview-grid .metric-card small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.4;
}
.backup-process,
.backup-snapshot-section,
.retention-policy-layout {
  width: 100%;
  max-width: 1400px;
  margin-right: auto;
  margin-left: auto;
}
.backup-process { margin-bottom: 16px; padding: clamp(18px, 2.5vw, 28px); }
.backup-process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.backup-process-grid > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--canvas);
}
.backup-process-grid > div > span {
  grid-row: 1 / 3;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent-ink);
  background: var(--forest-700);
  font-weight: 600;
}
.backup-process-grid p { margin: 4px 0 0; color: var(--muted); font-size: .8125rem; }
.backup-warning {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  border: 1px solid var(--warn);
  border-left: 4px solid var(--warn);
  background: var(--warn-soft);
}
.backup-warning > span {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--warn-soft);
  background: var(--warn);
  font-weight: 600;
}
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 20px 0 10px;
}
.section-heading h2 { margin: 2px 0 0; }
.section-heading > span { color: var(--muted); font-size: .8125rem; }
.backup-snapshot-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.backup-snapshot-card { min-width: 0; display: grid; gap: 14px; padding: 16px; box-shadow: none; }
.backup-snapshot-card header,
.backup-snapshot-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.backup-snapshot-card h2 { margin: 3px 0 0; font-size: 1rem; }
.backup-snapshot-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.backup-snapshot-facts > div { padding: 10px; border-radius: var(--radius-sm); background: var(--canvas); }
.backup-snapshot-facts dt { color: var(--muted); font-size: .75rem; font-weight: 600; }
.backup-snapshot-facts dd { margin: 4px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.backup-snapshot-card footer { padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8125rem; }
.backup-error { color: var(--danger); overflow-wrap: anywhere; }
.backup-empty { grid-column: 1 / -1; }
.retention-policy-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .75fr);
  gap: 16px;
  margin-bottom: 16px;
}
.retention-settings,
.retention-flow { margin: 0; }
.retention-settings form { display: grid; grid-template-columns: 1fr; gap: 0; }
.retention-settings form > label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(125px, .32fr);
  align-items: center;
  gap: 18px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}
.retention-settings label > span:first-child { display: grid; gap: 4px; }
.retention-settings label small { color: var(--muted); font-weight: 400; line-height: 1.4; }
.retention-input { position: relative; display: flex; align-items: center; }
.retention-input input { padding-right: 62px; }
.retention-input small { position: absolute; right: 13px; pointer-events: none; }
.retention-settings .button { width: max-content; margin-top: 16px; }
.retention-flow { display: grid; align-content: start; gap: 18px; padding: clamp(16px, 2vw, 20px); }
.retention-flow ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.retention-flow li { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 11px; min-height: 72px; }
.retention-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 0;
  left: 14px;
  width: 2px;
  background: var(--line);
}
.retention-flow li > span {
  z-index: 1;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  color: var(--forest-900);
  background: var(--panel);
  font-weight: 600;
}
.retention-flow li p { margin: 3px 0 0; color: var(--muted); font-size: .8125rem; }
.retention-note { margin: 0; padding: 12px; border-radius: var(--radius-sm); color: var(--muted); background: var(--canvas); font-size: .8125rem; }
.retention-history { margin-bottom: 0; }
@media (max-width: 1000px) {
  .backup-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .retention-policy-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .backup-process-grid,
  .retention-overview-grid,
  .backup-snapshot-list { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .backup-overview-grid { grid-template-columns: 1fr; }
  .backup-snapshot-card header,
  .backup-snapshot-card footer,
  .section-heading { align-items: flex-start; flex-direction: column; }
  .backup-snapshot-facts { grid-template-columns: 1fr; }
  .backup-snapshot-card .button { width: 100%; }
  .retention-settings form > label { grid-template-columns: 1fr; gap: 9px; }
  .retention-settings .button { width: 100%; }
}
@media print {
  @page { size: A4 portrait; margin: 8mm; }
  html, body { color-scheme: light !important; }
  body.app-body,
  body.app-body .app-shell,
  body.app-body .main-content {
    height: auto;
    overflow: visible;
  }
  /* Paper is white and ink is black whichever theme the screen was in, so the
     palette tokens are the wrong thing to ask here. Canvas/CanvasText are the
     printed sheet itself, under the color-scheme: light set above. */
  html[data-theme="dark"],
  html[data-theme="dark"] body,
  html[data-theme="dark"] .main-content,
  html[data-theme="dark"] .phone-sheet,
  html[data-theme="dark"] .phone-print-table,
  html[data-theme="dark"] .phone-print-table th,
  html[data-theme="dark"] .phone-print-table td {
    color: CanvasText !important;
    background: Canvas !important;
  }
  .phone-sheet,
  .phone-print-table,
  .phone-print-table th,
  .phone-print-table td,
  .phone-print-table input,
  .phone-contact-card {
    color: CanvasText !important;
    background: Canvas !important;
    print-color-adjust: economy !important;
    -webkit-print-color-adjust: economy !important;
  }
  /* On paper the grid has to survive a tired office laser, so the ink weight the
     screen does not want lives here. */
  .phone-print-table { border: 2px solid CanvasText !important; }
  .phone-print-table th,
  .phone-print-table td { border: 1px solid CanvasText !important; }
  .sidebar, .calendar-toolbar, .calendar-instruction, .page-header .button { display: none !important; }
  .app-shell { display: block; }
  .main-content { padding: 0; }
  .panel { box-shadow: none; }
  .phone-page-header, .phone-directory-tools, .phone-admin-only, .toast-region { display: none !important; }
  .phone-view-only { display: none !important; }
  .phone-print-restricted {
    display: block !important;
    margin: 30mm auto;
    color: CanvasText;
    font-size: 14pt;
    text-align: center;
  }
  .phone-sheet {
    width: 100%;
    max-width: none;
    min-height: 276mm;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .phone-print-grid {
    min-width: 0;
    grid-template-columns: 39% 36% 25%;
    grid-template-rows: auto auto auto;
    gap: 2.4mm;
  }
  .phone-main-column { grid-column: 1; grid-row: 1 / span 3; }
  .phone-secondary-column,
  .phone-contact-column { display: contents; }
  .phone-secondary-column > .phone-print-table { grid-column: 2; grid-row: 1; }
  .phone-hellas-list { grid-column: 2; grid-row: 2; }
  .phone-shared-list { grid-column: 2; grid-row: 3; }
  .phone-contact-column > .phone-contact-card:first-child {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
  }
  .phone-hellas-contact {
    grid-column: 3;
    grid-row: 2;
    align-self: start;
  }
  .phone-print-table { border-width: .45mm; }
  .phone-print-table thead { display: none; }
  .phone-print-table th,
  .phone-print-table td {
    height: 4.05mm;
    padding: 0 .7mm;
    font-size: 8.4pt;
    line-height: 1;
  }
  .phone-print-table td { font-weight: 600; }
  .phone-print-table .phone-number { font-weight: 800; }
  .phone-print-table th { height: 4.3mm; font-size: 6.6pt; }
  .phone-print-table input {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 8.4pt;
    font-weight: 600;
  }
  .phone-entry[hidden] { display: table-row !important; }
  .phone-hellas-list { margin-top: 7mm; }
  .phone-shared-list { width: 58%; margin-top: 8mm; }
  .phone-contact-card {
    gap: 1.7mm;
    padding: 3mm 1.5mm;
    border-width: .45mm;
    font-size: 6.8pt;
  }
  .phone-contact-card strong { font-size: 7.4pt; }
  .phone-contact-gap { margin-top: 3mm; }
  .phone-hellas-contact { margin-top: 7mm; gap: 1.2mm; }
  html, body, .main-content { background: Canvas; }
  .phone-print-date { right: 0; bottom: -8mm; font-size: 6.5pt; }
}
/* Accessibility and operational administration */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.department-job-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  grid-column: 1 / -1;
}
.department-job-summary {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .75rem 0;
}
.department-job-summary span {
  max-width: 100%;
  padding: 4px 9px;
  overflow-wrap: anywhere;
  border-radius: var(--radius-pill);
  color: var(--muted);
  background: var(--canvas);
  font-size: .6875rem;
  font-weight: 600;
}
.department-job-summary .priority-high,
.department-job-summary .priority-urgent {
  color: var(--danger);
  background: var(--danger-soft);
}
.department-progress-meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  margin: .6rem 0;
}
.department-progress-meter progress,
.storage-meter progress {
  width: 100%;
  min-width: 0;
  accent-color: var(--forest-700);
}
.department-collaboration {
  margin-top: .9rem;
  border-top: 1px solid var(--line);
  padding-top: .7rem;
}
.department-collaboration > summary {
  cursor: pointer;
  font-weight: 600;
}
.department-collaboration > summary span {
  display: inline-grid;
  place-items: center;
  min-width: 1.6rem;
  min-height: 1.6rem;
  margin-left: .3rem;
  border-radius: var(--radius-pill);
  background: var(--canvas);
}
.department-collaboration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: .8rem;
}
.department-comment-list,
.department-attachment-list {
  display: grid;
  gap: .55rem;
  margin: .5rem 0 .8rem;
  padding: 0;
  list-style: none;
}
.department-comment-list li,
.department-attachment-list li {
  min-width: 0;
  padding: .65rem;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.department-comment-list li > div,
.department-attachment-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .35rem;
}
.department-comment-list p {
  white-space: pre-wrap;
}
.department-comment-form,
.department-attachment-form {
  display: grid;
  gap: .5rem;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.metric-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.metric-card span,
.metric-card strong {
  display: block;
  overflow-wrap: anywhere;
}
.metric-card span {
  color: var(--muted);
  font-size: .8125rem;
}
.metric-card strong {
  margin-top: .35rem;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-variant-numeric: tabular-nums;
}
.admin-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(17rem, .8fr);
  gap: 1rem;
  margin-bottom: 1rem;
}
.activity-trend {
  display: grid;
  grid-template-columns: repeat(14, minmax(1.3rem, 1fr));
  align-items: end;
  gap: .35rem;
  min-height: 12rem;
  overflow-x: auto;
}
.activity-trend > div {
  display: grid;
  grid-template-rows: 8rem auto auto;
  align-items: end;
  text-align: center;
}
.activity-trend span {
  width: 70%;
  height: var(--activity-height);
  min-height: .35rem;
  margin: 0 auto;
  border-radius: .3rem .3rem 0 0;
  background: var(--forest-700);
}
.activity-trend small {
  font-size: .6875rem;
}
.admin-health-list {
  display: grid;
  gap: .7rem;
}
.admin-health-list div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
}
.admin-health-list dd {
  margin: 0;
  text-align: right;
  font-weight: 700;
}
.admin-quick-links,
.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}
.report-builder form,
.retention-settings form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 1rem;
}
.report-actions {
  margin: 0;
}
.backup-warning {
  margin-bottom: 1rem;
  border-left: 4px solid var(--warn);
}
.status-pill {
  display: inline-block;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-size: .6875rem;
  font-weight: 600;
  background: var(--sheet-2);
}
.status-ready {
  color: var(--positive);
  background: var(--positive-soft);
}
.status-failed {
  color: var(--danger);
  background: var(--danger-soft);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
@media (max-width: 1000px) {
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-dashboard-grid,
  .department-collaboration-grid {
    grid-template-columns: 1fr;
  }
  .report-builder form,
  .retention-settings form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .metric-grid,
  .department-job-fields,
  .report-builder form,
  .retention-settings form {
    grid-template-columns: 1fr;
  }
  .activity-trend {
    min-width: 36rem;
  }
}
/* Keep reports, backups, and retention content inside their panels. */
.report-builder,
.retention-settings,
.backup-warning,
.data-table-panel {
  width: 100%;
  min-width: 0;
  max-width: 1400px;
  margin-right: auto;
  margin-left: auto;
  padding: clamp(16px, 2.4vw, 26px);
  overflow: hidden;
}
.report-builder *,
.retention-settings *,
.backup-warning *,
.data-table-panel * {
  min-width: 0;
  max-width: 100%;
}
.report-builder label,
.retention-settings label {
  overflow-wrap: anywhere;
}
.report-builder input,
.report-builder select,
.retention-settings input,
.retention-settings select {
  width: 100%;
}
.report-actions {
  min-width: 0;
}
.report-actions .button,
.retention-settings .button,
.page-header > .button {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}
.backup-warning strong,
.backup-warning p,
.data-table-panel th,
.data-table-panel td,
.status-pill {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.backup-warning p {
  margin: .35rem 0 0;
}
.data-table-panel .table-scroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}
.data-table-panel table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  table-layout: fixed;
}
.data-table-panel th,
.data-table-panel td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
  white-space: normal;
}
.data-table-panel th {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.data-table-panel td .text-button,
.data-table-panel td .button {
  max-width: 100%;
  white-space: normal;
}
.page-header > div,
.panel-heading > div,
.metric-grid,
.metric-card {
  min-width: 0;
  max-width: 100%;
}
.page-header h1,
.page-header p,
.panel-heading h2,
.metric-card span,
.metric-card strong {
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (max-width: 620px) {
  .report-builder,
  .retention-settings,
  .backup-warning,
  .data-table-panel {
    padding: 15px;
  }
  .report-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .report-actions .button,
  .retention-settings .button {
    width: 100%;
  }
  .data-table-panel table {
    min-width: 620px;
  }
}
/* Keep every administrator-dashboard value inside its card. */
.metric-grid,
.admin-dashboard-grid {
  width: 100%;
  min-width: 0;
  max-width: 1400px;
  margin-right: auto;
  margin-left: auto;
}
.metric-card,
.admin-dashboard-grid > .panel {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.admin-dashboard-grid > .panel {
  padding: clamp(16px, 2.4vw, 26px);
}
.metric-card span,
.metric-card strong,
.admin-dashboard-grid h2,
.admin-dashboard-grid p,
.admin-dashboard-grid dt,
.admin-dashboard-grid dd,
.admin-dashboard-grid a,
.activity-trend small,
.activity-trend strong {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.activity-trend {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}
.activity-trend > div {
  min-width: 0;
}
.admin-health-list,
.admin-health-list div,
.admin-health-list dt,
.admin-health-list dd {
  min-width: 0;
  max-width: 100%;
}
.admin-health-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
}
.admin-quick-links {
  min-width: 0;
  max-width: 100%;
}
.admin-quick-links .button {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}
@media (max-width: 620px) {
  .activity-trend {
    min-width: 0;
    grid-template-columns: repeat(14, minmax(2.25rem, 1fr));
  }
  .admin-health-list div {
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-health-list dd {
    text-align: left;
  }
  .directory-toolbar,
  .directory-entry-form {
    grid-template-columns: 1fr;
  }
  .directory-toolbar,
  .directory-entry-composer {
    padding: 16px;
  }
  .directory-entry-form .button {
    width: 100%;
  }
  .directory-panel .table-scroll {
    overflow: visible;
  }
  .directory-table,
  .directory-table tbody,
  .directory-table tr,
  .directory-table td {
    width: 100%;
    min-width: 0;
    display: block;
  }
  .directory-table {
    min-width: 0;
  }
  .directory-table thead {
    display: none;
  }
  .directory-table tbody {
    display: grid;
    gap: 12px;
  }
  .directory-table tr {
    padding: 13px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--forest-700);
    border-radius: var(--radius);
    background: var(--canvas);
  }
  .directory-table tr[hidden] {
    display: none;
  }
  .directory-table td {
    padding: 8px 0;
    border: 0;
  }
  .directory-table td::before {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }
  .directory-table td:nth-child(1)::before { content: "Name"; }
  .directory-table td:nth-child(2)::before { content: "Title"; }
  .directory-table td:nth-child(3)::before { content: "Mobile number"; }
  .directory-table td:nth-child(4)::before { content: "Email"; }
  .directory-admin-table td:nth-child(5)::before { content: "Department"; }
  .directory-admin-table td:nth-child(6)::before { content: "Actions"; }
  .directory-table .row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}
/* Final layout precedence for the retention form. */
.retention-settings form {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 0;
}
@media (max-width: 620px) {
  .retention-settings form > label {
    grid-template-columns: 1fr;
    gap: 9px;
  }
}
/* IT support submission and protected ticket workspace. */
.ticket-page-header {
  max-width: 1400px;
}
.ticket-success {
  max-width: 1400px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 auto 18px;
  padding: 14px 16px;
  border: 1px solid var(--positive);
  border-radius: var(--radius);
  color: var(--positive);
  background: var(--positive-soft);
}
.ticket-success > span {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--positive-soft);
  background: var(--positive);
  font-weight: 600;
}
.ticket-success p {
  margin: 2px 0 0;
  font-size: .8125rem;
}
.ticket-support-layout {
  max-width: 1400px;
  display: grid;
  grid-template-columns: minmax(420px, .9fr) minmax(480px, 1.1fr);
  align-items: start;
  gap: 20px;
  margin: 0 auto;
}
.ticket-create-panel,
.my-tickets-panel,
.ticket-queue-panel {
  padding: 20px;
}
.ticket-form-step {
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  color: var(--forest-700);
  background: var(--mint);
  font-size: .6875rem;
  font-weight: 600;
  white-space: nowrap;
}
.ticket-create-form {
  display: grid;
  gap: 20px;
}
.ticket-create-form > label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-weight: 600;
}
.ticket-create-form > label > span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ticket-create-form em,
.ticket-priority-field em {
  color: var(--danger);
  font-size: .6875rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.ticket-create-form label > small {
  font-weight: 400;
}
.ticket-create-form input[type="text"],
.ticket-create-form input:not([type]),
.ticket-create-form textarea {
  width: 100%;
}
.ticket-priority-field {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
}
.ticket-priority-field legend {
  width: 100%;
  margin-bottom: 9px;
  color: var(--ink);
  font-weight: 600;
}
.ticket-priority-field > label {
  min-width: 0;
  position: relative;
  cursor: pointer;
}
.ticket-priority-field input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ticket-priority-field > label > span {
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--canvas);
  transition: border-color .14s ease, background .14s ease;
}
.ticket-priority-field input:checked + span {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.ticket-priority-field input:focus-visible + span {
  outline: none;
  box-shadow: var(--focus);
}
.ticket-priority-field strong {
  color: var(--ink);
}
.ticket-priority-field small {
  overflow-wrap: anywhere;
  font-size: .6875rem;
  font-weight: 400;
}
.ticket-file-field input {
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  opacity: 0;
}
.ticket-file-picker {
  min-height: 64px;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center;
  gap: 2px !important;
  padding: 14px 16px;
  position: relative;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  color: var(--forest-900);
  background: var(--canvas);
  cursor: pointer;
}
.ticket-file-picker::before {
  content: "+";
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  border-radius: var(--radius-sm);
  color: var(--accent-ink);
  background: var(--forest-700);
  font-size: 1rem;
}
.ticket-file-field input:focus-visible + .ticket-file-picker {
  outline: none;
  box-shadow: var(--focus);
}
.ticket-submit {
  justify-content: center;
  width: 100%;
}
.ticket-submit:disabled,
.ticket-update-form .button:disabled {
  opacity: .6;
  cursor: wait;
  transform: none;
}
.ticket-privacy-note {
  margin: -9px 0 0;
  color: var(--muted);
  font-size: .75rem;
  text-align: center;
}
.my-tickets-panel {
  min-width: 0;
}
.my-ticket-list {
  display: grid;
  gap: 12px;
}
.my-ticket-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--canvas);
}
.my-ticket-card[data-status="in_progress"] { border-left-color: var(--forest-700); }
.my-ticket-card[data-status="resolved"] { border-left-color: var(--positive); }
.my-ticket-card > header,
.my-ticket-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.my-ticket-card > header > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.my-ticket-card time {
  color: var(--muted);
  font-size: .75rem;
  text-align: right;
}
.ticket-number,
.ticket-table-id {
  color: var(--forest-700);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.my-ticket-title {
  margin-top: 13px;
}
.my-ticket-title > div {
  min-width: 0;
}
.my-ticket-title h3 {
  margin-bottom: 5px;
}
.my-ticket-title p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: .8125rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ticket-status,
.ticket-priority {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 800;
  white-space: nowrap;
}
.ticket-status.status-new { color: var(--accent); background: var(--accent-soft); }
.ticket-status.status-in_progress { color: var(--warn); background: var(--warn-soft); }
.ticket-status.status-resolved { color: var(--positive); background: var(--positive-soft); }
.ticket-priority.priority-low { color: var(--ink-2); background: var(--sheet-2); box-shadow: inset 0 0 0 1px var(--rule); }
.ticket-priority.priority-medium { color: var(--warn); background: var(--warn-soft); }
.ticket-priority.priority-high { color: var(--danger); background: var(--danger-soft); }
.ticket-attachment {
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  font-size: .76rem;
}
.ticket-attachment > span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ticket-attachment strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticket-assignee {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: .75rem;
}
.ticket-resolution {
  margin-top: 13px;
  padding: 12px;
  border-radius: 10px;
  color: var(--positive);
  background: var(--positive-soft);
}
.ticket-resolution p {
  margin: 4px 0;
  color: var(--ink);
  font-size: .8rem;
  white-space: pre-wrap;
}
.ticket-due {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: .73rem;
  font-weight: 700;
}
.ticket-due.overdue { border-color: var(--danger); color: var(--danger); }
.ticket-confirmed {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--positive);
  background: var(--positive-soft);
  font-size: .78rem;
  font-weight: 600;
}
.ticket-awaiting {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--muted);
  background: color-mix(in srgb, var(--line) 45%, transparent);
  font-size: .78rem;
  font-weight: 600;
}
/* Shared fixes and known issues. Suggestions sit inside the new-ticket form;
   the outage strip, known-issue cards, queue chips and share form belong to the
   IT queue. */
.ticket-known-issue {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ink);
  background: var(--accent-soft);
  font-size: .78rem;
}
.ticket-suggestions { display: grid; gap: 10px; }
.ticket-known-issue-banner {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-left: 4px solid var(--warn);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--warn-soft);
}
.ticket-known-issue-banner p { margin: 0; font-size: .82rem; white-space: pre-wrap; }
.ticket-known-issue-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ticket-fix-heading { margin: 2px 0 0; color: var(--muted); font-size: .78rem; font-weight: 700; }
.ticket-fix-card { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sheet); }
.ticket-fix-card summary { cursor: pointer; color: var(--ink); font-size: .85rem; font-weight: 600; }
.ticket-fix-card p { margin: 8px 0 0; color: var(--ink); font-size: .82rem; white-space: pre-wrap; }
.ticket-outage,
.ticket-known-issues { margin-bottom: 16px; padding: 20px; }
.ticket-outage {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-left: 4px solid var(--warn);
}
.ticket-outage-summary { min-width: 0; flex: 1 1 320px; }
.ticket-outage-summary h2 { margin: 2px 0 6px; }
.ticket-outage-summary p { margin: 0; color: var(--muted); font-size: .8rem; }
.ticket-inline-form { flex: 0 1 460px; min-width: 0; }
.ticket-inline-form > summary { list-style: none; cursor: pointer; }
.ticket-inline-form > summary::-webkit-details-marker { display: none; }
.ticket-inline-form form { display: grid; gap: 10px; margin-top: 10px; }
.ticket-inline-form form > label { display: grid; gap: 4px; font-size: .8rem; font-weight: 600; }
.ticket-declare-tickets { display: grid; gap: 6px; margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ticket-declare-tickets legend { padding: 0 4px; font-size: .78rem; font-weight: 700; }
.ticket-declare-option { align-items: flex-start; font-weight: 400; }
.ticket-declare-option span { display: grid; min-width: 0; }
.ticket-declare-option small { color: var(--muted); }
.known-issue-list { display: grid; gap: 12px; }
.known-issue-card { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: var(--radius-sm); }
.known-issue-card h3 { margin: 0; font-size: .95rem; }
.known-issue-card small { color: var(--muted); }
.known-issue-message { margin: 0; font-size: .85rem; white-space: pre-wrap; }
.known-issue-tickets { margin: 0; color: var(--muted); font-size: .78rem; }
.known-issue-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.known-issue-actions .ticket-inline-form { flex: 0 0 auto; }
.known-issue-actions .ticket-inline-form[open] { flex: 1 1 100%; }
.ticket-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.ticket-chip {
  display: inline-block;
  max-width: 100%;
  padding: 2px 8px;
  overflow: hidden;
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: .7rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticket-chip.known { color: var(--ink); background: var(--warn-soft); }
.ticket-chip.probable { color: var(--ink); background: var(--flag-soft); }
.ticket-attach { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ticket-share { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ticket-share-form { display: grid; gap: 10px; }
.ticket-share-form h3 { margin: 0; }
.ticket-share-form label { display: grid; gap: 4px; font-size: .8rem; font-weight: 600; }
.ticket-shared-status { margin: 0; padding: 8px 10px; border-radius: 10px; color: var(--positive); background: var(--positive-soft); font-size: .78rem; font-weight: 600; }
/* Ticket conversation thread and update history */
.ticket-thread { margin-top: 14px; border-top: 1px solid var(--line); }
.ticket-thread-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0 9px;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}
.ticket-thread-toggle::after {
  margin-left: auto;
  color: var(--muted);
  content: "▾";
}
.ticket-thread-toggle[aria-expanded="true"]::after { content: "▴"; }
.ticket-thread-count {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--line) 55%, transparent);
  font-size: .68rem;
  text-align: center;
}
.ticket-thread-body { display: grid; gap: 12px; padding-bottom: 6px; }
.ticket-thread-body[hidden] { display: none; }
.ticket-message-list {
  max-height: 320px;
  display: grid;
  gap: 9px;
  overflow-y: auto;
  padding-right: 4px;
}
.ticket-message {
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
}
.ticket-message.role-it { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.ticket-message > header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 5px;
  font-size: .75rem;
}
.ticket-message > header strong { font-size: .8125rem; }
.ticket-message-role {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--line) 55%, transparent);
  color: var(--muted);
  font-size: .6875rem;
  font-weight: 600;
}
.ticket-message > header time { margin-left: auto; color: var(--muted); font-size: .75rem; }
.ticket-message p { margin: 0; font-size: .875rem; line-height: 1.5; white-space: pre-wrap; }
.ticket-message-form { display: grid; gap: 8px; }
.ticket-message-form textarea { min-height: 72px; background: var(--panel); }
.ticket-message-form .button { justify-self: start; }
.ticket-confirm-actions {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet-2);
}
.ticket-confirm-actions p { margin: 0; font-size: .8125rem; line-height: 1.5; }
.ticket-confirm-actions textarea { min-height: 56px; background: var(--panel); }
.ticket-confirm-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.ticket-history h4 { margin: 0 0 8px; font-size: .8125rem; }
.ticket-history-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ticket-history-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.ticket-history-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.ticket-history-type {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--line) 55%, transparent);
  color: var(--muted);
  font-size: .6875rem;
  font-weight: 600;
  white-space: nowrap;
}
.ticket-history-list strong { font-size: .8125rem; font-weight: 600; }
.ticket-history-list small { grid-column: 2; color: var(--muted); font-size: .75rem; }
.ticket-empty {
  min-height: 240px;
}
.ticket-stat-grid {
  max-width: 1400px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0 auto 18px;
}
.ticket-stat {
  min-width: 0;
  min-height: 76px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--panel);
  cursor: pointer;
  text-align: left;
  transition: border-color .12s ease, background-color .12s ease;
}
.ticket-stat span {
  font-size: .8125rem;
  font-weight: 600;
}
.ticket-stat strong {
  color: var(--ink);
  font-size: 1.375rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ticket-stat:hover,
.ticket-stat.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.ticket-stat.active {
  box-shadow: inset 0 0 0 1px var(--accent);
}
.ticket-stat.urgent strong {
  color: var(--danger);
}
.ticket-queue-panel {
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
}
.ticket-queue-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.ticket-queue-toolbar h2,
.ticket-queue-toolbar p {
  margin-bottom: 0;
}
.ticket-queue-filters {
  display: flex;
  gap: 9px;
}
.ticket-queue-filters input,
.ticket-queue-filters select {
  min-height: 36px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.ticket-queue-filters input {
  width: min(270px, 30vw);
}
.ticket-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.ticket-table {
  width: 100%;
  min-width: 1150px;
  border-collapse: collapse;
}
.ticket-table th {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--sheet-2);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}
.ticket-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}
.ticket-table-row:last-child td {
  border-bottom: 0;
}
.ticket-table-row:hover td {
  background: var(--sheet-2);
}
.ticket-table td time {
  display: block;
  width: 126px;
  color: var(--muted);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}
.ticket-title-cell {
  width: 27%;
  min-width: 235px;
}
.ticket-title-cell > strong,
.ticket-title-cell > small,
.ticket-requester > strong,
.ticket-requester > a {
  display: block;
}
.ticket-title-cell > small {
  max-width: 340px;
  overflow: hidden;
  margin-top: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticket-requester {
  display: block;
  min-width: 160px;
}
.ticket-requester > a,
.ticket-requester > small {
  margin-top: 2px;
  font-size: .75rem;
}
.ticket-owner {
  display: block;
  min-width: 120px;
}
.ticket-detail-row > td {
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: var(--sheet-2);
}
.ticket-detail-row[hidden],
.ticket-table-row[hidden] {
  display: none;
}
.ticket-detail-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .8fr);
  gap: 20px;
  padding: 18px;
  border-left: 4px solid var(--accent);
}
.ticket-issue-detail,
.ticket-update-form {
  min-width: 0;
}
.ticket-description-full {
  min-height: 76px;
  margin: 14px 0;
  color: var(--ink);
  font-size: .875rem;
  white-space: pre-wrap;
}
.ticket-issue-detail dl {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 0;
}
.ticket-issue-detail dl > div {
  min-width: 145px;
}
.ticket-issue-detail dt {
  color: var(--ink-2);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.ticket-issue-detail dd {
  margin: 2px 0 0;
  font-size: .8125rem;
  font-weight: 600;
}
.ticket-update-form {
  padding-left: 20px;
  border-left: 1px solid var(--line);
}
.ticket-update-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0;
}
.ticket-update-fields label {
  display: grid;
  gap: 5px;
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 600;
}
.ticket-update-fields .wide-field {
  grid-column: 1 / -1;
}
.ticket-update-form textarea {
  resize: vertical;
}
.ticket-update-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ticket-update-actions .danger-text {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--rule));
  background: var(--danger-soft);
}
.ticket-update-actions .danger-text:hover {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, var(--sheet));
}
.ticket-filter-empty {
  margin-top: 12px;
}
html[data-theme="dark"] .ticket-success {
  border-color: color-mix(in srgb, var(--positive) 40%, var(--rule));
  color: var(--positive);
  background: var(--positive-soft);
}
html[data-theme="dark"] .ticket-priority-field input:checked + span,
html[data-theme="dark"] .ticket-stat:hover,
html[data-theme="dark"] .ticket-stat.active {
  background: var(--accent-soft);
}
html[data-theme="dark"] .ticket-confirmed {
  color: var(--positive);
  background: var(--positive-soft);
}
html[data-theme="dark"] .ticket-resolution {
  color: var(--positive);
  background: var(--positive-soft);
}
html[data-theme="dark"] .ticket-detail-row > td,
html[data-theme="dark"] .ticket-table-row:hover td {
  background: var(--sheet-2);
}
html[data-theme="dark"] .ticket-update-actions .danger-text {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--rule));
  background: var(--danger-soft);
}
@media (max-width: 1180px) {
  .ticket-support-layout {
    grid-template-columns: 1fr;
  }
  .ticket-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ticket-detail-shell {
    grid-template-columns: 1fr;
  }
  .ticket-update-form {
    padding: 18px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}
@media (max-width: 700px) {
  .ticket-create-panel,
  .my-tickets-panel,
  .ticket-queue-panel {
    padding: 16px;
  }
  .ticket-priority-field {
    grid-template-columns: 1fr;
  }
  .ticket-priority-field > label > span {
    min-height: 58px;
  }
  .my-ticket-card > header,
  .my-ticket-title,
  .ticket-queue-toolbar,
  .ticket-queue-filters {
    align-items: stretch;
    flex-direction: column;
  }
  .my-ticket-card time {
    text-align: left;
  }
  .ticket-stat-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ticket-stat {
    min-height: 68px;
    padding: 12px;
  }
  .ticket-queue-filters input,
  .ticket-queue-filters select,
  .ticket-queue-filters label {
    width: 100%;
  }
  .ticket-table-scroll {
    overflow: visible;
    border: 0;
  }
  .ticket-table,
  .ticket-table tbody {
    min-width: 0;
    display: grid;
    gap: 12px;
  }
  .ticket-table thead {
    display: none;
  }
  .ticket-table-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    padding: 14px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--rule-strong);
    border-radius: var(--radius);
    background: var(--sheet);
  }
  .ticket-table-row[data-ticket-status="in_progress"] { border-left-color: var(--forest-700); }
  .ticket-table-row[data-ticket-status="resolved"] { border-left-color: var(--positive); }
  .ticket-table-row td {
    min-width: 0;
    display: block;
    padding: 0;
    border: 0;
  }
  .ticket-table-row td:nth-child(3),
  .ticket-table-row td:nth-child(4),
  .ticket-table-row td:nth-child(7),
  .ticket-table-row td:nth-child(8) {
    grid-column: 1 / -1;
  }
  .ticket-table-row td:nth-child(2)::before,
  .ticket-table-row td:nth-child(4)::before,
  .ticket-table-row td:nth-child(7)::before {
    display: block;
    margin-bottom: 3px;
    color: var(--ink-2);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }
  .ticket-table-row td:nth-child(2)::before { content: "Created"; }
  .ticket-table-row td:nth-child(4)::before { content: "Requester"; }
  .ticket-table-row td:nth-child(7)::before { content: "Assigned to"; }
  .ticket-title-cell {
    width: auto;
  }
  .ticket-title-cell > small {
    max-width: none;
    white-space: normal;
  }
  .ticket-table td time {
    width: auto;
  }
  .ticket-table-row .open-ticket-detail {
    width: 100%;
  }
  .ticket-detail-row {
    display: block;
    margin-top: -12px;
  }
  .ticket-detail-row > td {
    display: block;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
  }
  .ticket-detail-shell {
    padding: 18px;
  }
  .ticket-update-fields {
    grid-template-columns: 1fr;
  }
  .ticket-update-fields .wide-field {
    grid-column: auto;
  }
  .ticket-update-form .button {
    width: 100%;
  }
  .ticket-update-actions {
    align-items: stretch;
    flex-direction: column;
  }
}
/* Centrally indexed network files. */
.network-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.network-source-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.network-source-card h2 { margin: 5px 0 3px; }
.network-source-card code,
.network-file-result code {
  display: block;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: .8125rem;
}
.network-source-card > strong { align-self: center; font-size: 1rem; font-variant-numeric: tabular-nums; }
.network-source-card > p { grid-column: 1 / -1; margin: 2px 0 0; color: var(--muted); }
.network-source-card .network-source-error { color: var(--danger); }
.network-source-state {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  background: var(--sheet-2);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.network-source-state.ready {
  color: var(--positive);
  background: var(--positive-soft);
}
.network-source-state.indexing {
  color: var(--warn);
  background: var(--warn-soft);
}
.network-source-state.warning {
  color: var(--warn);
  background: var(--warn-soft);
}
.network-source-state.error {
  color: var(--danger);
  background: var(--danger-soft);
}
.network-source-state.unavailable {
  color: var(--ink-3);
  background: var(--sheet-2);
}
.network-file-search-panel {
  margin-bottom: 16px;
  padding: 16px;
}
.network-file-search-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 260px) auto;
  gap: 14px;
  align-items: end;
}
.network-file-search-form > * { min-width: 0; }
.network-file-search-form label { margin: 0; }
.network-file-search-form .button { min-height: 36px; }
.network-file-search-panel .form-note { margin: 12px 0 0; }
.network-folder-browser {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet-2);
}
.network-folder-browser[hidden] { display: none; }
.network-folder-browser-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.network-folder-browser-heading h2 { margin: 2px 0 0; font-size: 1rem; }
.network-folder-browser-heading .eyebrow { margin: 0; }
.network-folder-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
}
.network-folder-breadcrumbs > span { color: var(--muted); }
.network-folder-breadcrumbs button {
  padding: 3px 5px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--accent);
  background: transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.network-folder-breadcrumbs button:hover,
.network-folder-breadcrumbs button:focus-visible { background: var(--accent-soft); }
.network-folder-breadcrumbs button:disabled {
  color: var(--ink);
  cursor: default;
  opacity: 1;
}
.network-folder-status { margin: 10px 0; color: var(--muted); }
.network-folder-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  max-height: 360px;
  overflow: auto;
}
.network-folder-entry {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--panel);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.network-folder-entry:hover,
.network-folder-entry:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--rule));
  background: var(--accent-soft);
}
.network-folder-entry strong { overflow-wrap: anywhere; }
.network-folder-entry > span:last-child { color: var(--muted); font-size: .8125rem; }
.network-folder-icon {
  position: relative;
  width: 23px;
  height: 16px;
  border-radius: 3px;
  background: var(--ink-3);
}
.network-folder-icon::before {
  position: absolute;
  top: -4px;
  left: 2px;
  width: 10px;
  height: 5px;
  border-radius: 3px 3px 0 0;
  background: var(--ink-3);
  content: "";
}
.network-file-results-panel { padding: 16px; }
.network-file-results-panel .empty-state[hidden] { display: none; }
.network-file-results {
  display: grid;
  gap: 10px;
}
.network-file-result {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.network-file-result:first-child { border-top: 0; }
.network-file-result > div { min-width: 0; }
.network-file-result.context-menu-open {
  border-radius: var(--radius);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.network-file-result h3 { margin: 0 0 3px; overflow-wrap: anywhere; font-size: .875rem; }
.network-file-result p { margin: 0 0 3px; overflow-wrap: anywhere; color: var(--muted); }
.network-file-result small { display: block; margin-bottom: 5px; overflow-wrap: anywhere; }
.network-file-type {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink-2);
  background: var(--sheet-2);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 0;
}
.network-file-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.network-file-actions .button[hidden] { display: none; }
#network-file-results-more { margin-top: 16px; }
#network-file-results-more[hidden] { display: none; }
.network-file-context-menu {
  position: fixed;
  z-index: 10000;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-pop);
}
.network-file-context-menu[hidden] { display: none; }
.network-file-context-menu button {
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.network-file-context-menu button:hover,
.network-file-context-menu button:focus-visible {
  color: var(--accent);
  background: var(--accent-soft);
}
@media (max-width: 850px) {
  .network-source-grid { grid-template-columns: 1fr; }
  .network-file-search-panel,
  .network-file-results-panel { padding: 16px; }
  .network-file-search-form { grid-template-columns: 1fr; }
  .network-file-search-form .button { width: 100%; }
  .network-folder-browser-heading { align-items: flex-start; }
  .network-folder-list { grid-template-columns: 1fr; }
  .network-file-result {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
  }
  .network-file-type { width: 40px; height: 40px; }
  .network-file-actions { grid-column: 1 / -1; }
  .network-file-actions .button { flex: 1; }
}
@media (max-width: 420px) {
  .ticket-stat-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1100px) {
  .ticket-knowledge-panel {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .ticket-knowledge-panel > .button {
    justify-self: start;
  }
}
@media (max-width: 700px) {
  .knowledge-tools > div:first-child {
    align-items: stretch;
    flex-direction: column;
  }
  .knowledge-tools #resource-results-status {
    white-space: normal;
  }
  .ticket-knowledge-links {
    grid-template-columns: 1fr;
  }
  .ticket-knowledge-panel > .button {
    width: 100%;
  }
}
/* Summarize Risk. Panels carry no padding or margin of their own — every page
   sets its own, the way .forms-page does — so without this the report's tables
   sat flush against their borders and against each other, with no gap at all
   between one section and the next. */
.risk-page { display: flex; flex-direction: column; gap: 16px; }
.risk-page > .panel { padding: 18px; }
.risk-page > .panel > h2 { margin-bottom: 12px; }
.risk-page > .panel > .data-table { margin-bottom: 0; }
/* ai_views.js emits .page-head rather than .page-header, so it was the one page
   with no rule under its title and a description running the full window width.
   Same treatment, same measure, without touching that module's markup. */
.page-head {
  max-width: 1400px;
  /* Not `0 auto`: .risk-page is a flex column, where an auto side margin stops the
     item stretching and centres it at its content width instead — which put the
     title in the middle of the page, out of line with the panel underneath. */
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.page-head > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.page-head h1 { margin-bottom: 0; }
.page-head p { max-width: 72ch; margin-bottom: 0; color: var(--ink-2); font-size: .8125rem; }
.risk-page > .page-head { margin-bottom: 18px; }