* { box-sizing: border-box; }
*:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
/* The hidden attribute always hides — author display rules (e.g. .field { display:
   flex }) must never resurrect a [hidden] element. */
[hidden] { display: none !important; }
/* User text-size preference: scales the root so all rem-based sizing follows. */
html { font-size: 100%; }
html[data-text-size="-3"] { font-size: 84%; }
html[data-text-size="-2"] { font-size: 89%; }
html[data-text-size="-1"] { font-size: 94.5%; }
html[data-text-size="0"]  { font-size: 100%; }
html[data-text-size="1"]  { font-size: 106%; }
html[data-text-size="2"]  { font-size: 112%; }
html[data-text-size="3"]  { font-size: 119%; }
body {
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  margin: 0;
  background: var(--bg);
  color: var(--text);
}
.icon {
  display: inline-block;
  width: var(--icon-md);
  height: var(--icon-md);
  flex: 0 0 auto;
  vertical-align: -.125em;
}
.icon-xs { width: var(--icon-xs); height: var(--icon-xs); }
.icon-sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon-md { width: var(--icon-md); height: var(--icon-md); }
.icon-lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon-xl { width: var(--icon-xl); height: var(--icon-xl); }
.icon-display { width: var(--icon-display); height: var(--icon-display); }
.skip-link {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: var(--z-skip-link);
  padding: .55rem .8rem;
  color: var(--accent-contrast);
  background: var(--accent);
  border-radius: var(--radius);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
.app-header-stack {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.app-header-stack > .topbar {
  position: relative;
  top: auto;
  z-index: 1;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background: var(--topbar-bg);
  color: var(--topbar-fg);
  border-bottom: 1px solid var(--topbar-edge);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.brand { font-weight: 600; font-size: 1.1rem; }
/* Active-navigator indicator label, shown in the top bar next to the brand. */
.nav-indicator-badge {
  margin-left: .6rem;
  padding: .12rem .5rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 999px;
  background: var(--topbar-btn-hover);
  color: var(--topbar-fg);
  border: 1px solid var(--topbar-border);
}
.nav-indicator-input { margin-top: .35rem; font-size: .82rem; }
.user-nav { display: flex; gap: 1rem; align-items: center; font-size: 0.9rem; }
.user-nav > a { color: var(--topbar-fg-muted); text-decoration: none; }
.user-nav > a:hover { text-decoration: underline; }
.user-nav small { opacity: 0.75; }
/* Expo project shortcut (super_admin only) — small pill in the topbar. */
.expo-nav { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600;
            padding: 0.2rem 0.55rem; border-radius: 6px; border: 1px solid var(--topbar-border); }
.user-nav > a.expo-nav:hover { text-decoration: none; color: var(--topbar-fg); background: var(--topbar-btn-hover); }
.expo-nav svg { display: block; }

.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-btn {
  background: transparent;
  color: var(--topbar-fg);
  border: 1px solid var(--topbar-border);
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.nav-dropdown-btn:hover { background: var(--topbar-btn-hover); }
.nav-dropdown-btn[aria-expanded="true"] { background: var(--topbar-btn-hover); }

.mode-toggle-form { margin: 0; padding: 0; display: inline-flex; }
.mode-toggle.active {
  background: var(--topbar-fg);
  color: var(--accent);
  border-color: var(--topbar-fg);
  font-weight: 600;
}
.mode-toggle.active:hover { opacity: 0.92; }

.layout-admin-mode .sidebar { background: var(--admin-sidebar-bg); border-right-color: var(--admin-sidebar-border); }
.layout-admin-mode .topbar { box-shadow: inset 0 -3px 0 0 var(--warning); }
.nav-dropdown .caret { font-size: 0.85em; opacity: 0.85; }
.nav-dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  padding: 0.25rem 0;
  display: none;
  z-index: var(--z-dropdown);
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a,
.nav-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 1rem;
  color: var(--text);
  text-decoration: none;
  font: inherit;
  font-size: 0.9rem;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-item:hover { background: var(--surface-alt); color: var(--heading); }
.nav-dropdown-form { margin: 0; }
main { max-width: 960px; margin: 2rem auto; padding: 0 1.5rem; }

.layout { display: flex; min-height: calc(100vh - var(--app-header-h, var(--topbar-h, 56px))); }
.sidebar {
  width: 242px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1rem 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--app-header-h, var(--topbar-h, 56px));
  align-self: flex-start;
  height: calc(100vh - var(--app-header-h, var(--topbar-h, 56px)));
  overflow-y: auto;
}
.sidebar nav { display: flex; flex-direction: column; flex: 1; }
.nav-link-bottom {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 0.85rem;
}
.nav-link {
  display: block;
  padding: 0.6rem 1.25rem;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  border-left: 3px solid transparent;
}
.nav-link:hover { background: var(--surface-alt); }
.nav-link.active {
  background: var(--nav-active-bg);
  border-left-color: var(--nav-active-text);
  font-weight: 600;
  color: var(--nav-active-text);
}
.nav-section {
  padding: 1rem 1.25rem 0.35rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}
.nav-group { margin: 0; padding: 0; }
.nav-group-summary {
  display: block;
  padding: 0.6rem 1.25rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--text);
  list-style: none;
  border-left: 3px solid transparent;
  position: relative;
  user-select: none;
}
.nav-group-summary::-webkit-details-marker { display: none; }
.nav-group-summary::after {
  content: "\25B8";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  line-height: 0;
  color: var(--text-faint);
  transition: transform 0.15s;
}
.nav-group[open] > .nav-group-summary::after { transform: translateY(-50%) rotate(90deg); }
.nav-group-summary:hover { background: var(--surface-alt); }
.nav-link.nav-sub {
  padding-left: 2.5rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.nav-link.nav-sub.active { color: var(--nav-active-text); }

.placeholder-card {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  color: var(--text-muted);
  margin-top: 1rem;
}
.placeholder-card p { margin: 0 0 0.5rem 0; }
.placeholder-card p:last-child { margin-bottom: 0; }

.calendar-host {
  background: var(--surface);
  padding: 1rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
/* Map FullCalendar's own palette onto the theme tokens so grid text, borders,
   and list-view surfaces follow the active light/dark theme. */
.fc {
  --fc-page-bg-color: var(--surface);
  --fc-neutral-bg-color: var(--surface-alt);
  --fc-neutral-text-color: var(--text-muted);
  --fc-border-color: var(--border);
  --fc-list-event-hover-bg-color: var(--row-hover);
  color: var(--text);
}
.fc .fc-toolbar-title { font-size: 1.25rem !important; }
.fc .fc-button {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  text-transform: capitalize;
}
.fc .fc-button:hover { background: var(--accent-hover) !important; }
.fc .fc-button-active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--warning) !important;
  border-color: var(--warning) !important;
}
.fc-event { cursor: pointer; }
.fc-event-allday {
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  padding: 2px 6px !important;
  color: var(--text) !important;
}
.btn-danger-text { color: var(--danger); }
.btn-danger-text:hover { background: color-mix(in srgb, var(--danger) 9%, var(--surface)); }

.category-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 0.85rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.legend-chip { display: inline-flex; align-items: center; gap: 0.4rem; }
.swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--border);
}

.modal {
  border: none;
  border-radius: 10px;
  padding: 1.5rem;
  max-width: 720px;
  width: 92%;
  box-shadow: var(--shadow-lg);
  background: var(--surface);
  /* <dialog> UA default is color:CanvasText — set a themed color so uncolored
     text (e.g. section headings) inherits the theme instead of falling back. */
  color: var(--text);
}
.modal::backdrop { background: var(--backdrop); }
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}
.modal-head h2 { margin: 0; }
.modal-subhead { margin: 1.5rem 0 .6rem; color: var(--heading); font-size: 1rem; }
.modal-head .btn-light { padding: 0.2rem 0.7rem; font-size: 1.25rem; line-height: 1; }
.modal .category-list { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 0.5rem; align-items: center; margin-top: 1rem; }

/* Typed-confirmation modal (e.g. deleting a person linked to documents). */
.confirm-modal { max-width: 460px; }
/* pre-line: multi-item messages (e.g. Review selected) list one item per line */
.confirm-modal .confirm-msg { margin: 0.25rem 0 0.9rem; white-space: pre-line; }
/* The standalone Type “word” to confirm. line — the required word stands out. */
.confirm-modal .confirm-typeline { margin: 0 0 0.6rem; }
.confirm-modal .confirm-word {
  display: inline-block; font-weight: 700; padding: 0 0.35em;
  border: 1px solid var(--border-strong); border-radius: 4px;
  background: var(--surface-alt); color: var(--heading);
}
.confirm-modal .confirm-input {
  width: 100%; box-sizing: border-box; padding: 0.5rem 0.6rem; font: inherit;
  border: 1px solid var(--border-strong); border-radius: 6px;
}
.btn-danger {
  background: transparent; color: var(--danger); border: 1px solid var(--danger-border);
  padding: 0.25rem 1rem; border-radius: 6px; font: inherit; cursor: pointer;
}
.btn-danger:hover:not(:disabled) { background: var(--danger-border); }
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }
.category-row {
  display: grid;
  grid-template-columns: 1.3fr 2fr 60px auto;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
}
.category-row input[type="text"],
.category-row input[type="color"] {
  font: inherit;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.category-row input[type="color"] { padding: 2px; height: 36px; }
.category-row button { padding: 0.4rem 0.85rem; font-size: 0.9rem; }
.category-row-delete { display: flex; }
.content {
  flex: 1;
  margin: 0 auto;
  padding: 0.6rem 1.5rem 1.25rem;
  width: 100%;
  max-width: none;
}
.content-dashboard { padding-top: 0.6rem; }
.dash-page-title { margin: 0; color: var(--heading); font-size: 1.5rem; line-height: 1.2; }
h1 { margin-top: 0; }
.meta { color: var(--text-muted); margin-top: -0.5rem; }
code { background: var(--code-bg); padding: 0.1rem 0.35rem; border-radius: 3px; font-size: 0.9em; }
.login-card {
  max-width: 420px;
  margin: 4rem auto;
  background: var(--surface);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.auth-content { width: min(100% - 2rem, 460px); margin: 0 auto; padding: 0; }
.auth-content .login-card { width: 100%; }
.login-card h1 { color: var(--heading); font-size: 1.75rem; margin-bottom: .5rem; }
.login-card > p:first-of-type { color: var(--text-muted); }
.login-form { display: grid; gap: 1rem; }
.login-form .field { margin: 0; }
.login-form > .btn-primary { justify-content: center; min-height: var(--control-height); }
.auth-links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: .25rem 0 0; font-size: .9rem; }
.provider-button { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: 2.65rem; }
.provider-button svg { flex: 0 0 auto; }
.provider-button-microsoft { background: #2f6fd1; color: #fff; }
.provider-button-google { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.btn {
  display: block;
  padding: 0.65rem 1rem;
  margin: 0.5rem 0;
  text-decoration: none;
  border-radius: 6px;
  text-align: center;
  font-weight: 500;
}
.btn:hover { opacity: 0.92; }
.warn {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  padding: 0.75rem;
  border-radius: 6px;
  color: var(--warning);
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.card {
  background: var(--surface);
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card h2 { margin: 0 0 0.5rem 0; font-size: 1rem; color: var(--heading); }
.card p { margin: 0; font-size: 0.9rem; color: var(--text-muted); }
.card.admin { border-left: 3px solid #d1543a; }
.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card-link:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); transform: translateY(-1px); }
.card-link h2 { color: var(--heading); }
.dev-banner {
  background: #fff4e1;
  border: 1px solid #f0c14b;
  color: #5a3a00;
  padding: 0.65rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.dev-banner code { background: #f5e6c4; }
.dev-banner a { color: #5a3a00; text-decoration: underline; margin: 0 0.15rem; }
.dev-banner a:hover { background: #f5e6c4; }

.stack { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.stack textarea, .stack input {
  font: inherit;
  padding: 0.5rem 0.65rem;
  border: 1px solid #d0d4dd;
  border-radius: 6px;
  resize: vertical;
}
.success {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success);
  padding: 0.75rem;
  border-radius: 6px;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  margin-top: 1rem;
}
table.data th, table.data td {
  text-align: left;
  padding: var(--table-row-padding-standard) 0.75rem;
  border-bottom: 1px solid var(--border-faint);
  font-size: 0.9rem;
}
/* View density (per-user, Display settings › View Settings). Standard = the 0.6rem
   default above; the others step vertical row padding up/down from there. Five levels:
   super-relaxed > relaxed > standard > compact > super-compact. */
html[data-density="super-relaxed"] table.data th,
html[data-density="super-relaxed"] table.data td { padding-top: 1.05rem; padding-bottom: 1.05rem; }
html[data-density="relaxed"] table.data th,
html[data-density="relaxed"] table.data td { padding-top: var(--table-row-padding-relaxed); padding-bottom: var(--table-row-padding-relaxed); }
html[data-density="compact"] table.data th,
html[data-density="compact"] table.data td { padding-top: var(--table-row-padding-compact); padding-bottom: var(--table-row-padding-compact); }
html[data-density="super-compact"] table.data th,
html[data-density="super-compact"] table.data td { padding-top: 0.22rem; padding-bottom: 0.22rem; }
/* Super levels also tighten/loosen the row font a touch for a stronger density shift. */
html[data-density="super-compact"] table.data td { font-size: 0.85rem; }
html[data-density="super-relaxed"] table.data td { font-size: 1rem; }
table.data thead { background: var(--surface-alt); }
table.data th { font-weight: 600; color: var(--heading); }
table.data tr:last-child td { border-bottom: none; }
form.inline { display: inline; margin: 0; }
form.inline select {
  font: inherit;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
}
details summary { cursor: pointer; color: var(--heading); }
details p { margin: 0.4rem 0 0 0; font-style: italic; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  padding: 0.3rem 1rem;
  border-radius: var(--radius);
  text-decoration: none;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary .icon { width: var(--icon-md); height: var(--icon-md); }
.btn-primary:disabled,
.btn-light:disabled,
button:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }

.icon-btn-group { display: inline-flex; gap: 0.35rem; }
/* Activity: per-row icon, revealed on row hover, pinned to the far right of the row. */
.row-actions { align-items: center; }   /* keep the bigger Activity icon centered vs siblings */
.row-activity { opacity: 0; transition: opacity .12s ease; margin-left: 0.4rem; }
.data-row:hover .row-activity,
.data-row:focus-within .row-activity,
.row-activity:focus-visible { opacity: 1; }
@media (hover: none) { .row-activity { opacity: 1; } }
/* The target follows density; the glyph keeps its semantic role and does not grow the row. */
.row-activity { width: 34px; height: 34px; }
.row-activity .icon { width: var(--icon-md); height: var(--icon-md); }
html[data-density="super-relaxed"] .row-activity { width: 40px; height: 40px; }
html[data-density="relaxed"] .row-activity { width: 37px; height: 37px; }
html[data-density="compact"] .row-activity { width: 30px; height: 30px; }
html[data-density="super-compact"] .row-activity { width: 27px; height: 27px; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #d0d4dd;
  background: #fff;
  color: #1f3a5f;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
}
.icon-btn:hover { background: #f0f3f8; }
.icon-btn .icon { width: var(--icon-md); height: var(--icon-md); display: block; }
.icon-btn-danger { color: #c23a3a; border-color: #e7c4c4; }
.icon-btn-danger:hover { background: #fde6e6; }
.actions-col { width: 1%; white-space: nowrap; }

/* ===== Reusable data view (list/table) ===== */
.data-view-narrow { max-width: 720px; }
.data-view-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.data-view-title { margin: 0; font-size: 1.8rem; line-height: 1.2; }
.data-view-head .meta { margin-top: 0.2rem; }
.data-view-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.data-view-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.data-view-search {
  font: inherit;
  padding: 0.35rem 0.6rem;
  border: 1px solid #d0d4dd;
  border-radius: 6px;
  min-width: 200px;
}
.data-view-search:focus { outline: none; border-color: #1f3a5f; box-shadow: 0 0 0 2px rgba(31, 58, 95, 0.12); }
.data-view-noresults { color: #555; padding: 0.75rem 0; }
.data-view-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.filter-chip {
  background: #eef0f4;
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  font-size: 0.8rem;
  color: #555;
}
.data-view-tools { display: flex; gap: 0.35rem; }
.status-filter { display: inline-flex; }
.filter-chip-btn {
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: var(--surface-alt);
  color: var(--text-muted);
  font: inherit;
}
.filter-chip-btn:hover { background: var(--surface); }
.status-filter-dialog { max-width: 360px; width: 90%; }
.status-filter-options { display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0; }
.status-filter-options .checkbox-label { text-transform: capitalize; }
.data-view-tools .icon-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.data-row { cursor: pointer; }
.data-row:hover { background: #f5f7fb; }
.data-view-empty { color: var(--text-muted); padding: 0.5rem 0; }

/* View builder + render extras */
.view-template-switcher { margin-bottom: 0.85rem; font-size: 0.9rem; color: var(--text-muted); }
.view-template-switcher a {
  margin-left: 0.4rem;
  text-decoration: none;
  color: var(--heading);
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
}
.view-template-switcher a.active { background: var(--heading); color: var(--surface); }
.builder-columns td { vertical-align: middle; }
.builder-columns .col-field,
.builder-columns .col-label,
.builder-columns .col-width {
  width: 100%;
  font: inherit;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
}
.builder-columns .col-width { width: 6rem; }
.filter-options { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.card-field { margin: 0 0 0.35rem; font-size: 0.9rem; }
.card-field-label { color: var(--text-faint); font-weight: 600; margin-right: 0.35rem; }

.user-form { max-width: 560px; margin-top: 1rem; }
.field-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.field-row > .field { flex: 1 1 200px; }
.field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem; }
.field label { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
.field-label { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
.field input,
.field select,
.field textarea {
  font: inherit;
  padding: 0.5rem 0.65rem;
  min-height: var(--control-height);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--accent);
}
.field-hint, .field-error { margin: 0; font-size: .82rem; line-height: 1.35; }
.field-hint { color: var(--text-muted); }
.field-error { color: var(--danger); }
.required-mark { color: var(--danger); }
.has-error input, .has-error select, .has-error textarea { border-color: var(--danger); }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* Read-only (view mode + view-gated fields): render as compact plain text — no field
   box, no border, no dropdown arrow. */
.field input[readonly],
.field select[disabled],
.field textarea[readonly] {
  background: transparent;
  border-color: transparent;
  color: var(--text);
  padding: 0.1rem 0;
  cursor: default;
}
.field select[disabled] { appearance: none; -webkit-appearance: none; }
.field textarea[readonly] { resize: none; }
/* Read-only values rendered as selectable text (sfield ro path + display panels) — same
   compact look as a readonly input, but a <div> so the selection can span several fields
   and labels for copying. */
.field-ro {
  color: var(--text);
  padding: 0.1rem 0;
  min-height: 1.2em;
}
.field-ro-multiline { white-space: pre-wrap; }
.field:has(input[readonly]),
.field:has(select[disabled]),
.field:has(textarea[readonly]),
.field:has(.field-ro) { margin-bottom: 0.5rem; }
.field textarea { resize: vertical; }
.form-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.account-settings { display: grid; gap: 1.25rem; }
.account-settings + .account-settings { margin-top: 1.5rem; }
.settings-section-form { margin: 0; }
.form-action-footer { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-faint); }
.table-scroll { width: 100%; overflow-x: auto; }
.table-scroll table.data { margin-top: 0; min-width: 36rem; box-shadow: none; }

/* ============================================================
   Sectioned forms — panels that mirror the dashboard widgets
   Three section types:
     .form-section            full-width panel (default)
     .form-section.section-half  half-width panel (two sit side by side)
     .field-cols inside a panel  two columns of fields under one header
   All responsive: the second column drops below the first when narrow.
   ============================================================ */
.section-form { max-width: 1100px; margin-top: 1rem; }

/* Layout grid for the panels: 2 tracks; a panel spans 1 (half) or 2 (full) */
.form-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: 1.5rem;
  align-items: start;
}

/* Panel chrome — same surfaces/radius/shadow as a dashboard widget */
.form-section {
  grid-column: 1 / -1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.form-section.section-adaptive,
.form-section.section-half { grid-column: auto; }
.form-section.section-full { grid-column: 1 / -1; }
.form-sections > .section-full { grid-column: 1 / -1; }
/* A panel placed on its own (outside the grid) needs its own top spacing */
.form-section.section-standalone { margin-top: 1.5rem; }

.form-section-head {
  margin: 0;
  padding: 0.55rem 1rem;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--heading);
}
.form-section-body { padding: 1.1rem 1.25rem; }
/* Zero the trailing margin of whatever ends a panel body (field, field-cols, table…) */
.form-section-body > :last-child { margin-bottom: 0; }

/* Two columns of fields under one header; col 2 wraps below col 1 when narrow */
.field-cols { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin-bottom: 1rem; }
.field-col { flex: 1 1 260px; min-width: 0; }
.field-col > .field:last-child { margin-bottom: 0; }

/* Collapse to a single column on narrow screens */
@media (max-width: 820px) {
  .form-sections { grid-template-columns: 1fr; }
  .form-section.section-adaptive,
  .form-section.section-half { grid-column: 1 / -1; }
}

.workflow-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0;
  padding: .75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.workflow-panel-title { color: var(--heading); font-weight: 600; }
.workflow-panel-body { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; }
.workflow-panel-body form { margin: 0; }
@media (max-width: 640px) {
  .workflow-panel { align-items: stretch; flex-direction: column; }
  .workflow-panel-body, .workflow-panel-body form { display: grid; width: 100%; }
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.page-header h1 { margin: 0; font-size: 1.8rem; line-height: 1.2; color: var(--heading); }
.page-description { margin: .3rem 0 0; color: var(--text-muted); }
.page-header-copy { min-width: 0; }
.page-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.page-header-back { display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .4rem; color: var(--text-muted); text-decoration: none; }
.page-header-back:hover { color: var(--accent); }
.feedback { padding: .75rem 1rem; border: 1px solid; border-radius: var(--radius); margin: 0 0 1rem; }
.feedback-info { color: var(--info); background: var(--info-bg); border-color: var(--info-border); }
.feedback-success { color: var(--success); background: var(--success-bg); border-color: var(--success-border); }
.feedback-warning { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); }
.feedback-error { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--surface)); border-color: var(--danger-border); }
.empty-state { padding: 2rem; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); color: var(--text-muted); }
.empty-state h2 { margin: 0; color: var(--heading); font-size: 1.05rem; }
.empty-state p { margin: .4rem 0 0; }
.empty-state-actions { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
@media (max-width: 640px) {
  .page-header { flex-direction: column; }
  .page-header-actions { width: 100%; justify-content: flex-start; }
}

/* User-mode resource scheduling */
.rsv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .25rem 0 1rem; }
.rsv-toolbar .spacer { flex: 1; }
.rsv-daynav { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.rsv-daynav .btn-light { padding: .35rem .6rem; }
.rsv-current-day { margin-left: .5rem; }
.rsv-filters { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.rsv-filters input[type="number"] { width: 5.5rem; }
.rsv-grid-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.rsv-grid-empty { padding: 2rem; text-align: center; color: var(--text-muted); }
table.rsv-grid { border-collapse: collapse; width: 100%; min-width: 640px; }
.rsv-grid th, .rsv-grid td { border: 1px solid var(--border-faint); font-size: .85rem; }
.rsv-grid thead th { background: var(--surface-alt); padding: .5rem .6rem; text-align: left; vertical-align: top; }
.rsv-grid thead th.rsv-time-col { width: 5.2rem; }
.rsv-res-name { font-weight: 600; color: var(--heading); }
.rsv-res-meta { font-weight: 400; color: var(--text-muted); font-size: .78rem; margin-top: .15rem; }
.rsv-badge { display: inline-block; font-size: .7rem; padding: .05rem .4rem; border: 1px solid var(--border-strong); border-radius: 9px; color: var(--text-muted); margin-top: .2rem; }
.rsv-grid td.rsv-time { color: var(--text-faint); text-align: right; padding: .15rem .45rem; white-space: nowrap; border-right: 1px solid var(--border-strong); }
.rsv-grid td.rsv-cell { height: 1.65rem; padding: 0; min-width: 9rem; }
.rsv-free a { display: block; height: 100%; min-height: 1.65rem; text-decoration: none; }
.rsv-free a:hover { background: var(--nav-active-bg); outline: 1px solid var(--accent); }
.rsv-busy, .rsv-swatch-booked { background: var(--nav-active-bg); }
.rsv-busy .rsv-evt { display: block; padding: .15rem .45rem; color: var(--nav-active-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.rsv-evt:hover { text-decoration: underline; }
.rsv-pending { background: repeating-linear-gradient(45deg, var(--nav-active-bg), var(--nav-active-bg) 6px, var(--surface-alt) 6px, var(--surface-alt) 12px); }
.rsv-closed, .rsv-swatch-closed { background: var(--surface-sunken); }
.rsv-swatch-open { background: var(--surface); }
.rsv-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .5rem; color: var(--text-muted); font-size: .8rem; }
.rsv-legend .swatch { display: inline-block; width: .85rem; height: .85rem; border: 1px solid var(--border-strong); border-radius: 3px; vertical-align: -2px; margin-right: .3rem; }
@media (max-width: 640px) {
  .rsv-toolbar, .rsv-filters { align-items: stretch; flex-direction: column; }
  .rsv-toolbar .spacer { display: none; }
  .rsv-filters input[type="number"] { width: 100%; }
}

/* User activity explorer */
.activity-page { max-width: 1040px; margin: 0 auto; --cols: 120px minmax(150px,1.3fr) 160px minmax(0,2.2fr); }
.activity-head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; padding-bottom: .85rem; }
.activity-head .ah-main { flex: 1 1 auto; min-width: 0; }
.activity-head h1 { margin: 0; font-size: 1.5rem; line-height: 1.2; color: var(--heading); word-break: break-word; }
.activity-sub { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; flex-wrap: wrap; }
.activity-sub .chip { font-size: .72rem; }
.activity-count { color: var(--text-faint); font-size: .85rem; }
.act-tabs { display: flex; align-items: stretch; gap: .1rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; overflow: hidden; position: relative; }
.act-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; border: 0; background: transparent; cursor: pointer; padding: .45rem .85rem; border-bottom: 2px solid transparent; color: var(--text-muted); white-space: nowrap; max-width: 230px; }
.act-tab.overflowed { display: none; }
.act-tab .tab-sub { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.act-tab .tab-label { font-size: .9rem; font-weight: 600; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.act-tab .tab-star { color: #d4a017; }
.act-tab:hover { color: var(--heading); }
.act-tab.is-active { color: var(--heading); border-bottom-color: var(--accent); }
.act-tabmore { position: relative; display: flex; align-items: center; margin-left: auto; }
.act-more { border: 0; background: transparent; cursor: pointer; padding: .5rem .7rem; color: var(--text-muted); font-size: .85rem; white-space: nowrap; }
.act-more:hover { color: var(--heading); }
.act-more-menu { position: absolute; top: 100%; right: 0; min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: .25rem; display: none; z-index: 30; }
.act-more-menu.open { display: block; }
.act-more-item { display: flex; flex-direction: column; align-items: flex-start; width: 100%; border: 0; background: transparent; cursor: pointer; padding: .4rem .6rem; border-radius: var(--radius); text-align: left; color: var(--text); }
.act-more-item:hover { background: var(--row-hover); }
.act-controls { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1rem; }
.seg-group { display: flex; align-items: center; gap: .5rem; }
.seg-group > .seg-label { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.seg button { display: inline-flex; align-items: center; gap: .4rem; border: 0; cursor: pointer; padding: .4rem .75rem; font-size: .8rem; background: transparent; color: var(--text-muted); }
.seg button + button { border-left: 1px solid var(--border); }
.seg button.is-active { background: var(--nav-active-bg); color: var(--nav-active-text); font-weight: 600; }
.seg svg { width: 14px; height: 14px; }
.act-search { padding: .42rem .6rem; font-size: .82rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); min-width: 200px; }
.act-search:focus { outline: none; border-color: var(--accent); }
.act-panel[hidden], .act-entry[hidden] { display: none !important; }
.act-list-head { display: grid; grid-template-columns: var(--cols); gap: 1rem; padding: 0 .9rem .4rem; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.layout-boxed .act-list-head { display: none; }
.act-entries { display: flex; flex-direction: column; gap: .45rem; }
.layout-boxed .act-entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .65rem; }
.act-entry { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: inherit; transition: border-color .12s, background .12s; }
.act-entry:hover { border-color: var(--accent); background: var(--row-hover); }
.act-entry .af { min-width: 0; }
.act-entry .fv { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-type .fv, .af-date .fv { color: var(--text-muted); }
.af-subject .fv { font-weight: 600; color: var(--heading); white-space: normal; }
.af-date .fv { font-variant-numeric: tabular-nums; }
.layout-list .act-entry { display: grid; grid-template-columns: var(--cols); gap: 1rem; align-items: center; padding: .6rem .9rem; }
.layout-list .fl { display: none; }
.layout-boxed .act-entry { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .8rem; padding: .75rem .85rem; align-content: start; }
.layout-boxed .af-subject { grid-column: 1 / -1; order: -1; }
.layout-boxed .fl { display: block; font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 1px; }
.layout-boxed .af-subject .fv { font-size: 1.02rem; }
.act-empty { padding: 2.5rem 1rem; text-align: center; color: var(--text-muted); border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.act-noresults, .act-loading { padding: 1.5rem 1rem; text-align: center; color: var(--text-muted); }
@media (max-width: 760px) {
  .activity-page { --cols: minmax(90px, .8fr) minmax(0, 2fr); }
  .layout-list .act-entry, .act-list-head { grid-template-columns: var(--cols); }
  .layout-list .af-type, .layout-list .af-date { display: none; }
  .act-controls { gap: .75rem; }
  .seg-group { align-items: stretch; flex-direction: column; }
}

/* Two-column form layout: the stacked sections on the left, a side rail on the
   right (e.g. Associations). align-items:stretch makes the rail default to the
   full height of the left column. */
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 352px;
  gap: 1.5rem;
  align-items: stretch;
}
/* Side-by-side half sections share a grid row; stretch makes them equal height. */
.form-layout > .form-sections { margin: 0; align-items: stretch; }
.form-rail { display: flex; }
.form-rail > .form-section { flex: 1 1 auto; }      /* fill the stretched rail height */
/* Wider canvas when a form carries the side rail */
.section-form-rail { max-width: 1595px; }
/* Below-form blocks (Attachments, Notes, Document History, Audit) line up with the
   FORM COLUMN's right edge — the same width as the sections above (Request/Details),
   NOT the wider form+rail span: the right padding reserves the rail column (352px)
   + the form-layout gap (1.5rem). */
.form-below { max-width: 1595px; padding-right: calc(352px + 1.5rem); }
/* When a form has no rail, its below-blocks match the narrower form width. */
.form-below-narrow { max-width: 1100px; padding-right: 0; }

/* One uniform text size for the entire form scaffold — the form body (sections,
   labels, inputs) AND the Notes / Document History / Audit blocks below it.
   Everything is the same size; change it in this one place. Uses rem so the
   per-user text-size setting still scales it. */
.section-form-rail,
.form-below { --form-text: 0.95rem; }
.section-form-rail, .section-form-rail *,
.form-below, .form-below * { font-size: var(--form-text) !important; }
/* Drop the rail below the sections on narrow screens; the below-form blocks
   then span the full (single-column) width again. */
@media (max-width: 980px) {
  .form-layout { grid-template-columns: 1fr; }
  .form-below { padding-right: 0; }
}

.stepper { display: inline-flex; align-items: center; gap: 0.5rem; }
.stepper-btn {
  font: inherit;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--heading);
  font-weight: 700;
  line-height: 1;
}
.stepper-btn:hover { background: var(--surface-alt); }
.stepper-label {
  min-width: 4.5rem;
  text-align: center;
  font-weight: 600;
  color: var(--text);
}

.tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.5rem;
}
.tab-btn {
  font: inherit;
  background: none;
  border: none;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.tab-btn:hover { color: var(--heading); }
.tab-btn.active { color: var(--heading); font-weight: 600; border-bottom-color: var(--accent); }
.tab-panel.hidden { display: none; }

.voucher-area { margin-top: 1.5rem; }
.voucher-area h3 { margin: 0 0 0.5rem 0; color: var(--heading); font-size: 1rem; }

.status-tag {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 3px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: capitalize;
}
.status-draft { background: #ececf2; color: #555; }
.status-submitted { background: #e1ecf7; color: #1f3a5f; }
.status-approved { background: #e6f4ea; color: #1d4d2b; }
.status-denied { background: #fde6e6; color: #6b1f1f; }
.status-paid { background: #e6f4ea; color: #1d4d2b; }
.audit-submitted { background: #e1ecf7; color: #1f3a5f; }

/* Request priority tags */
.prio-tag {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 3px;
  font-size: 0.78rem;
  font-weight: 600;
}
.prio-low { background: #eef0f4; color: #555; }
.prio-medium { background: #e1ecf7; color: #1f3a5f; }
.prio-high { background: #fff1e0; color: #8a4b00; }
.prio-urgent { background: #fde6e6; color: #c23a3a; }

/* Request statuses (in addition to the voucher status tags) */
.status-new { background: #e1ecf7; color: #1f3a5f; }
.status-in-review { background: #fff8e1; color: #5a4a00; }
.status-in-progress { background: #fff1e0; color: #8a4b00; }
.status-completed { background: #e6f4ea; color: #1d4d2b; }
.status-rejected { background: #fde6e6; color: #6b1f1f; }

/* Staff lifecycle statuses (Person.status) + the checklist's N/A state */
.status-onboarding { background: #e1ecf7; color: #1f3a5f; }
.status-active { background: #e6f4ea; color: #1d4d2b; }
.status-offboarding { background: #fff1e0; color: #8a4b00; }
.status-inactive { background: #ececf2; color: #555; }
.status-na { background: #ececf2; color: #555; }

.inline-status { display: flex; gap: 0.5rem; align-items: center; margin: 0; }
.inline-status select {
  font: inherit;
  padding: 0.4rem 0.55rem;
  border: 1px solid #d0d4dd;
  border-radius: 4px;
}

/* ===== Reusable Notes section ===== */
/* Below-form sidecars (Notes / Document History / Attachments / Conversations /
   Resolution / admin list cards) reuse the .form-section panel chrome — one theme
   for every panel (same head band, font, radius, shadow, spacing as e.g. "Ticket").
   .notes-header-bar only ADDS the controls layout on top of .form-section-head;
   the h3 inherits the head's font so every panel title matches exactly. */
.notes-header-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.notes-header-bar h3 { margin: 0; font: inherit; color: inherit; }
/* With search/sort controls in the band, trim its padding so the band stays the
   same height as a plain panel head. */
.notes-header-bar:has(.notes-header-controls) { padding-top: 0.3rem; padding-bottom: 0.3rem; }
.notes-header-controls { display: flex; align-items: center; gap: 0.5rem; }
.notes-search {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid #d0d4dd;
  border-radius: 6px;
  min-width: 200px;
}
.notes-search:focus { outline: none; border-color: #1f3a5f; box-shadow: 0 0 0 2px rgba(31, 58, 95, 0.12); }
.notes-sort-toggle { font-size: 0.85rem; padding: 0.3rem 0.7rem; }
.notes-add-form { margin: 0 0 1rem; }
.notes-empty { padding: 0.25rem 0; }
.notes-input {
  width: 100%;
  font: inherit;
  padding: 0.6rem 0.7rem;
  border: 1px solid #d0d4dd;
  border-radius: 6px;
  resize: none;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 2.6rem;
}
.notes-add-form .btn-primary { margin-top: 0.5rem; }
.notes-list { list-style: none; padding: 0; margin: 0; }
.note-item { padding: 0.6rem 0; border-top: 1px solid #eef0f4; }
.note-item:first-child { border-top: none; }
.note-main { line-height: 1.5; }
.note-stamp { font-variant-numeric: tabular-nums; color: #1a1d24; font-weight: 600; }
.note-sep { color: #8a8f99; margin: 0 0.35rem; }
.note-body { white-space: pre-wrap; }
.note-meta { color: #8a8f99; font-size: 0.88rem; }

/* Document History — one line per event, reusing the notes section chrome. */
.history-actor { font-weight: 600; color: #1a1d24; }
.history-action { color: #3a3f4a; }
.history-audit-chip {
  display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.5rem;
  border-radius: 999px; background: #e7edf6; color: #1f3a5f;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  vertical-align: middle;
}

/* Associations sidecar (right rail) — relationship-grouped cards. Theme-driven. */
.assoc-group + .assoc-group { margin-top: 0.9rem; }
/* Section head (Documents). Same color as the relationship-type labels
   (.assoc-reltype-head, var(--heading)); People's head is intentionally omitted. */
.assoc-group-head {
  font-weight: 700; color: var(--heading);
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7rem;
  margin-bottom: 0.4rem;
}
/* Documents grouping switch — subtle right-aligned icon toggle (layers = by form type,
   clock = by date). No "Documents" label; the form-type sub-headers speak for themselves. */
.assoc-doc-toolbar { display: flex; justify-content: flex-end; margin-bottom: 0.2rem; }
.assoc-doc-toggle { display: inline-flex; gap: 1px; }
.assoc-doc-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem; padding: 0; cursor: pointer;
  border: none; background: none; color: var(--text-muted); border-radius: 4px; opacity: 0.5;
}
.assoc-doc-toggle-btn svg { width: 13px; height: 13px; }
.assoc-doc-toggle-btn:hover { opacity: 0.85; }
.assoc-doc-toggle-btn.active { opacity: 1; color: var(--heading); }
.assoc-reltype + .assoc-reltype { margin-top: 0.6rem; }
.assoc-reltype-head {
  color: var(--heading); font-size: 0.66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 0.3rem;
}
.assoc-cards { display: flex; flex-direction: column; gap: 0.4rem; }
.assoc-card {
  position: relative; display: flex; align-items: flex-start; gap: 0.55rem;
  padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-alt);
}
.assoc-card:hover { border-color: var(--border-strong); background: var(--surface); }
.assoc-card-icon { flex: 0 0 auto; display: inline-flex; color: var(--text-muted); margin-top: 0.1rem; }
.assoc-card-icon .icon { width: var(--icon-md); height: var(--icon-md); display: block; }
.assoc-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.assoc-card .assoc-name {
  font-weight: 600; color: var(--text); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.assoc-card a.assoc-name:hover { text-decoration: underline; }
.assoc-card-line {
  font-size: 0.8rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.assoc-card-actions {
  position: absolute; top: 0.3rem; right: 0.3rem; display: flex; gap: 0.2rem;
  opacity: 0; transition: opacity 0.12s ease;
}
.assoc-card:hover .assoc-card-actions,
.assoc-card:focus-within .assoc-card-actions { opacity: 1; }
.assoc-card-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: 1px solid var(--border-strong);
  border-radius: 6px; background: var(--surface); color: var(--text-muted); cursor: pointer;
}
.assoc-card-btn:hover { color: var(--heading); border-color: var(--heading); }
.assoc-card-btn.assoc-remove:hover { color: var(--danger); border-color: var(--danger-border); }
.assoc-card-btn svg { width: 13px; height: 13px; display: block; }
.assoc-sub { display: block; color: var(--text-muted); }
.assoc-empty { padding: 0.25rem 0; }

/* Attachments sidecar — a .form-section panel like the other sidecars; only the
   dropzone / rows are styled here. */
.attach-drop {
  display: block; text-align: center; cursor: pointer; font-size: 0.9rem;
  border: 1.5px dashed var(--border-strong); border-radius: 8px;
  background: var(--surface-alt); color: var(--text-muted);
  padding: 1.1rem 1rem; margin: 0 0 0.85rem;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.attach-drop:hover, .attach-drop.dragover {
  border-color: var(--heading); background: var(--surface); color: var(--text);
}
.attach-drop strong { color: var(--heading); }
/* Brief pulse when a save-prompt lands on the saved doc and scrolls to the drop zone. */
.attach-drop-highlight { animation: attach-drop-pulse 1.4s ease-in-out 2; }
@keyframes attach-drop-pulse {
  0%, 100% { border-color: var(--border-strong); background: var(--surface-alt); }
  50% { border-color: var(--heading); background: var(--surface); }
}
.attach-error { color: var(--danger); }

/* Help Desk Communications panel (rich-text reply + locked transcript). The transcript
   wrapper is a .form-section panel like the Notes / History / Attachments panels; only
   the reply editor + entries are styled here. */
.rt-toolbar { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.rt-toolbar button {
  min-width: 2rem; padding: 0.25rem 0.55rem; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface-alt);
  border-radius: 6px; color: var(--text); font-size: 0.85rem;
}
.rt-toolbar button:hover { background: var(--surface); border-color: var(--heading); }
.rt-editor {
  min-height: 6rem; border: 1.5px solid var(--border-strong); border-radius: 8px;
  background: var(--surface); padding: 0.6rem 0.75rem;
}
.rt-editor:focus { outline: none; border-color: var(--heading); }
.rt-editor:empty:before { content: attr(data-placeholder); color: var(--text-muted); }
.rt-editor img { max-width: 100%; height: auto; }
.comms-form-foot { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }
.comms-log { display: flex; flex-direction: column; gap: 0.75rem; }
.comms-entry {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.75rem; background: var(--surface-alt);
}
.comms-entry-head { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.35rem; }
.comms-entry-body img { max-width: 100%; height: auto; }
.attach-error:not([hidden]) { display: block; margin-top: 0.4rem; }
.attach-list { list-style: none; margin: 0; padding: 0; }
.attach-item {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.45rem 0.1rem; border-top: 1px solid var(--border); font-size: 0.9rem;
}
.attach-item:first-child { border-top: none; }
.attach-icon { flex: 0 0 auto; display: inline-flex; color: var(--text-muted); }
.attach-icon svg { width: 16px; height: 16px; display: block; }
.attach-name {
  flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--text); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.attach-name:hover { text-decoration: underline; }
.attach-meta { flex: 0 0 auto; font-size: 0.8rem; color: var(--text-muted); }
.attach-actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.25rem; }
.attach-actions .icon-btn { width: 28px; height: 28px; }
.attach-empty { padding: 0.25rem 0; margin: 0; }
/* Soft-deleted attachment (Audit Mode only) — tombstone styling. The badge is the
   shared .deleted-badge (defined with the list-view rules). */
.attach-item.attach-deleted .attach-icon { opacity: 0.6; }
.attach-item.attach-deleted .attach-name { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--danger); }

/* In-app viewer — preview PDFs / images / text without leaving the page (the eye, or
   clicking the name). Reuses the themed .modal; office types fall back to download. */
.attach-viewer {
  width: min(1440px, 92vw); max-width: 92vw;
  height: min(960px, 90vh); max-height: 90vh;
  box-sizing: border-box;
}
/* Scope the flex layout to the open state so closing falls back to the UA
   `dialog:not([open]) { display:none }` and the dialog reliably hides. */
.attach-viewer[open] { display: flex; flex-direction: column; }
.attach-viewer .modal-head { flex: 0 0 auto; margin-bottom: 0.75rem; gap: 0.75rem; }
.attach-viewer-title {
  flex: 1 1 auto; min-width: 0; font-size: 1.05rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attach-viewer-tools { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem; }
.attach-viewer-close { font-size: 1.25rem; line-height: 1; }
/* Body takes the rest of the dialog; the single preview child fills it 100%. */
.attach-viewer-body { flex: 1 1 auto; min-height: 0; }
.attach-preview-frame {
  display: block; width: 100%; height: 100%;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface-alt);
}
.attach-preview-img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface-alt);
}
.attach-no-preview {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; color: var(--text-muted);
}
.attach-no-preview p { margin: 0 0 1rem; }

/* ===== Scan-to-document (scan.js) + attachment hover preview ===== */
.scan-toolbar { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; }
.scan-btn { display: inline-flex; align-items: center; gap: 0.35rem; }
.scan-btn svg { width: 15px; height: 15px; }
.scan-config-btn svg { width: 16px; height: 16px; }

.scan-dialog { max-width: 600px; width: 92%; }
.scan-dialog .scan-title { font-size: 1.05rem; }
.scan-body p { margin: 0.4rem 0; }
.scan-wait { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 1.1rem 0 0.5rem; text-align: center; }
.scan-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--accent);
  animation: scan-spin 0.9s linear infinite;
}
@keyframes scan-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .scan-spinner { animation: none; } }

.scan-setup ol { margin: 0.6rem 0; padding-left: 1.3rem; }
.scan-setup li { margin: 0.45rem 0; }
.scan-setup .scan-dl { display: inline-block; margin: 0.35rem 0.5rem 0 0; }
.scan-setup .scan-dl-alt { white-space: nowrap; }

.scan-device-list { list-style: none; margin: 0.6rem 0; padding: 0; }
.scan-device { padding: 0.55rem 0; border-top: 1px solid var(--border); }
.scan-device:first-child { border-top: none; }
.scan-device-pick { display: block; cursor: pointer; }
.scan-undetected { font-style: italic; }
.scan-profile { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0 0 1.55rem; }
.scan-profile select { font-size: 0.85rem; padding: 0.15rem 0.3rem; }
.scan-add-ip { display: flex; align-items: center; gap: 0.4rem; margin: 0.5rem 0; flex-wrap: wrap; }
.scan-add-ip .scan-ip { flex: 0 1 220px; min-width: 140px; }
.scan-default-row { margin: 0.7rem 0 0; }
.scan-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.9rem; }

.scan-pick-list { list-style: none; margin: 0.6rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.scan-pick-list .scan-pick { width: 100%; text-align: left; display: block; }
.scan-remember { display: block; margin-top: 0.5rem; cursor: pointer; }

/* Hover quick-preview: a small floating look at the file under the pointer.
   pointer-events none — it is display-only and must never steal the mouse. */
.attach-hover-preview {
  position: absolute; z-index: 60; width: 340px; height: 400px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 8px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
  overflow: hidden; pointer-events: none;
}
.attach-hover-preview img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--surface-alt); }
.attach-hover-preview iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--surface-alt); }

/* "All Associations" list template: one document entry, its people stacked as sub-rows.
   A heavier top border starts each new document group; person sub-rows sit tight. */
.assoc-view-table td { vertical-align: top; }
.assoc-view-table tbody .assoc-view-start td { border-top: 2px solid var(--border-strong); }
.assoc-view-table tbody tr:not(.assoc-view-start) td { border-top: none; }
.assoc-view-table tbody .assoc-view-row:hover td { background: var(--row-hover); }

/* "All Associations (compact)": one row per document; people listed in one cell. */
.assoc-compact-table td { vertical-align: top; }
.assoc-compact-cell .assoc-compact-line { padding: 0.05rem 0; }
.assoc-compact-cell .assoc-compact-line + .assoc-compact-line { border-top: 1px dotted var(--border); }

/* "Parent / children" tree template (Districts view): parent rows carry a +/− toggle;
   child contact rows sit indented and muted under their district. */
.tree-toggle-col { width: 2rem; }
.tree-toggle {
  width: 1.5rem; height: 1.5rem; line-height: 1;
  border: 1px solid var(--border-strong); border-radius: 4px;
  background: var(--surface); color: var(--text-muted);
  font-weight: 700; cursor: pointer;
}
.tree-toggle:hover { background: var(--row-hover); color: var(--text); }
.tree-view-table tbody .tree-parent-row td { border-top: 2px solid var(--border-strong); }
/* No background of their own — child rows hover/read exactly like any data-view row. */
.tree-view-table tbody .tree-child-row td { border-top: none; }
.tree-child-cell { padding-left: 1.25rem; }
.tree-child-cell .tree-child-name { font-weight: 600; }
.tree-child-cell .tree-child-meta { color: var(--text-muted); }
.tree-child-cell .tree-child-meta::before { content: "\00b7"; margin: 0 0.5rem; color: var(--text-muted); }

/* Time Entries panel (service_hours module): hours table + inline add row. */
.time-entries-table .te-num { text-align: right; font-variant-numeric: tabular-nums; }
.time-entries-table tfoot .te-total td { font-weight: 700; border-top: 2px solid var(--border-strong); }
.te-add-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; align-items: center; }
.te-add-row .te-hours { width: 6rem; }
.te-add-row .te-subject { flex: 1 1 12rem; }

/* Activity panel on the contact/district form (districts module): rendered in the
   form's RIGHT RAIL (form-layout: beside the sections at wide widths, stacked
   below at ≤980px); the More… dialog holds the full set + date range. */
.pact-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pact-count { font-weight: 400; color: var(--text-muted); margin-left: 0.35rem; }
.pact-open-page { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.pact-open-page svg { width: 1rem; height: 1rem; display: block; }
.pact-list { display: flex; flex-direction: column; }
.pact-row {
  display: flex; gap: 0.6rem; align-items: baseline;
  padding: 0.3rem 0.4rem; border-radius: 4px;
  text-decoration: none; color: inherit; font-size: 0.9rem;
}
.pact-row:hover { background: var(--row-hover); }
.pact-row + .pact-row { border-top: 1px dotted var(--border); }
.pact-date { white-space: nowrap; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pact-type { white-space: nowrap; font-weight: 600; }
.pact-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pact-contact { color: var(--text-muted); }
.pact-more { margin-top: 0.6rem; }
.pact-range { display: flex; gap: 1rem; align-items: center; margin: 0.75rem 0; flex-wrap: wrap; }
.pact-range label { display: flex; gap: 0.4rem; align-items: center; font-size: 0.9rem; }
.pact-dialog-list { max-height: 55vh; overflow-y: auto; }

/* District/company typeahead on the Contact form (district_picker.js). */
.district-pick { position: relative; }
/* .form-section clips overflow for its rounded corners — that would cut the
   dropdown at the panel edge, so the section holding a picker overflows instead
   (the head keeps its own rounded top so the look is unchanged). */
.form-section:has(.district-pick) { overflow: visible; }
.form-section:has(.district-pick) > .form-section-head {
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}
.district-pick .dp-menu {
  /* Above neighboring form sections/controls (matches the app's dropdown layer,
     below only the sticky banners/topbar). */
  position: absolute; z-index: 100; left: 0; right: 0; top: 100%;
  max-height: 16rem; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
.district-pick .dp-item {
  display: block; width: 100%; text-align: left;
  padding: 0.4rem 0.6rem; border: none; background: none;
  color: var(--text); cursor: pointer;
}
.district-pick .dp-item:hover { background: var(--row-hover); }
.district-pick .dp-badge {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--accent, var(--text-muted));
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 0 0.4rem; margin-left: 0.4rem; vertical-align: 1px;
}

/* Associations manage dialog — larger, theme-driven, People/Documents split. */
.assoc-toolbar { margin-bottom: 0.5rem; }
.assoc-manage { display: inline-flex; align-items: center; gap: 0.3rem; }
.assoc-manage svg { width: 14px; height: 14px; }
.assoc-modal { width: min(1320px, 96vw); max-width: 96vw; }
.assoc-pane { min-height: 360px; }

/* People | Documents segmented toggle (matches the notify tab pattern) */
.assoc-mode { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; margin: 0.75rem 0 0.25rem; }
.assoc-mode-btn { background: var(--surface); color: var(--heading); border: none; padding: 0.4rem 1.1rem; font: inherit; cursor: pointer; border-right: 1px solid var(--border-strong); }
.assoc-mode-btn:last-child { border-right: none; }
.assoc-mode-btn.active { background: var(--heading); color: var(--surface); }

.assoc-staged-wrap, .assoc-add { margin-top: 0.85rem; }
.assoc-pane strong { display: inline-block; margin-bottom: 0.25rem; color: var(--heading); }
.assoc-staged { margin-top: 0.35rem; }
.assoc-staged-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-top: 1px solid var(--border); }
.assoc-staged-row:first-child { border-top: none; }
.assoc-staged-main { flex: 1 1 auto; min-width: 0; }
.assoc-staged-name { font-weight: 600; }
.assoc-tabs { display: flex; gap: 0.4rem; margin: 0.5rem 0; flex-wrap: wrap; }
.assoc-rel-select, .assoc-search, .assoc-doc-type, .assoc-doc-search {
  font: inherit; border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--surface); color: var(--text);
}
.assoc-rel-select { padding: 0.2rem 0.4rem; border-radius: 5px; }
.assoc-search { width: 100%; box-sizing: border-box; padding: 0.45rem 0.6rem; }
.assoc-results, .assoc-doc-results {
  max-height: 280px; overflow: auto; margin: 0.5rem 0;
  border: 1px solid var(--border); border-radius: 6px; padding: 0.35rem;
}
.assoc-result { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.4rem; border-radius: 4px; }
.assoc-result:hover { background: var(--surface-alt); }
.assoc-result-main { flex: 1 1 auto; min-width: 0; }
.assoc-star { border: none; background: none; cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--text-faint); padding: 0 0.15rem; }
.assoc-star.on { color: var(--heading); }
.assoc-new { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.assoc-new-foot { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; }
.assoc-person-edit { padding: 0.6rem; background: var(--surface-sunken); border-radius: 6px; margin: 0.1rem 0 0.4rem; }
.assoc-doc-row { display: flex; gap: 0.5rem; margin: 0.5rem 0; }
.assoc-doc-type { padding: 0.4rem 0.5rem; }
.assoc-doc-search { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 0.45rem 0.6rem; }
/* Picker filter tabs (own class — must not touch the data-view .filter-chip) */
.assoc-tab {
  padding: 0.25rem 0.7rem; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 0.85rem; cursor: pointer;
}
.assoc-tab.active { background: var(--heading); color: var(--surface); border-color: var(--heading); }

/* Associations v2 — inline rail editing: role chip, Primary star, pending footer, role menu. */
.assoc-role-chip {
  font: inherit; font-size: 0.72rem; line-height: 1; cursor: pointer; white-space: nowrap;
  padding: 0.15rem 0.45rem; border: 1px dashed var(--border-strong); border-radius: 999px;
  background: none; color: var(--text-faint);
}
.assoc-role-chip.empty:hover { border-color: var(--heading); color: var(--heading); }
/* Icon variant (row already typed): the role WORD lives in the group header, so this is
   just the subtle "change" affordance — a bare tag icon, brightening on hover. */
.assoc-role-chip.icon { border: none; padding: 0.1rem 0.2rem; }
.assoc-role-chip.icon:hover { color: var(--heading); }
.assoc-role-chip svg { width: 13px; height: 13px; display: block; }
.assoc-primary { border: none; background: none; cursor: pointer; font-size: 1rem; line-height: 1; color: #98a2b3; padding: 0 0.1rem; }
.assoc-primary:hover { color: #e0a920; }
.assoc-primary.on { color: #e0a920; }
span.assoc-primary { cursor: default; }   /* view-mode marker is not interactive */
/* Persistent Primary star sits inline with the name so it shows in BOTH view and edit
   without hovering (the role chip / pencil / remove stay in the hover-revealed actions). */
.assoc-name-row { display: flex; align-items: center; gap: 0.3rem; min-width: 0; }
.assoc-name-row .assoc-name { min-width: 0; flex: 0 1 auto; }
.assoc-name-row .assoc-primary { flex: 0 0 auto; font-size: 0.95rem; }
.assoc-role-menu {
  z-index: 60; min-width: 150px; max-height: 260px; overflow: auto;
  background: var(--surface-alt); border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); padding: 0.25rem;
}
.assoc-role-opt {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 0.85rem; cursor: pointer;
  padding: 0.35rem 0.55rem; border: none; border-radius: 5px; background: none; color: var(--text);
}
.assoc-role-opt:hover { background: var(--surface); }
.assoc-role-opt.on { color: var(--heading); font-weight: 600; }
.assoc-role-clear { border-top: 1px solid var(--border); margin-top: 0.2rem; color: var(--text-faint); }
.assoc-pending {
  margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px dashed var(--border-strong);
  font-size: 0.8rem; color: var(--accent, #1f6feb); font-style: italic;
}
/* Inline add typeahead (P3): persistent search bar at the top of the rail. */
.assoc-add-bar { position: relative; margin-bottom: 0.6rem; }
.assoc-add-input {
  width: 100%; box-sizing: border-box; padding: 0.5rem 0.7rem; font: inherit;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text);
}
.assoc-add-input::placeholder { color: var(--text-faint); }
.assoc-add-input:focus { outline: none; border-color: var(--heading); }
.assoc-add-results {
  position: absolute; z-index: 55; left: 0; right: 0; margin-top: 4px; max-height: min(60vh, 480px); overflow: auto;
  background: var(--surface-alt); border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42); padding: 0.3rem;
}
/* Rows/create-new inside the (now --surface-alt) overlay hover to the base surface so they
   stay legible against it. */
.assoc-add-results .assoc-result:hover { background: var(--surface); }
/* Create-contact panel: a bordered card with a filled heading bar so it's clearly distinct
   from the overlay/rail. overflow:hidden clips the full-bleed header to the rounded corners. */
.assoc-add-results .assoc-new { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 0.7rem 0.6rem; margin: 0; overflow: hidden; }
.assoc-new-head { background: var(--heading); color: var(--surface); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.02em; padding: 0.4rem 0.7rem; margin: 0 -0.7rem 0.6rem; }
/* Snug fields so all of them fit in the overlay without a lot of scrolling. */
.assoc-new .field-row { gap: 0.55rem; margin-bottom: 0; }
.assoc-new .field { margin-bottom: 0.45rem; gap: 0.12rem; }
.assoc-new .field label { font-size: 0.7rem; }
.assoc-new .field input { padding: 0.3rem 0.45rem; font-size: 0.85rem; }
.assoc-new .assoc-new-foot { margin-top: 0.35rem; }
.assoc-result-section + .assoc-result-section { border-top: 1px solid var(--border); margin-top: 0.3rem; padding-top: 0.3rem; }
.assoc-result-head { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); padding: 0.2rem 0.4rem; }
.assoc-favs .assoc-result-head { color: #e0a920; }
.assoc-add-results .assoc-result { cursor: pointer; }
.assoc-add-btn { flex: 0 0 auto; }
.assoc-add-empty { padding: 0.4rem 0.5rem; }
.assoc-create-new {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 0.85rem; cursor: pointer;
  padding: 0.45rem 0.5rem; margin-top: 0.3rem; border: none; border-top: 1px solid var(--border);
  background: none; color: var(--accent, #1f6feb);
}
.assoc-create-new:hover { background: var(--surface); }
/* Edit-mode People / Documents panels (each with its own typeahead + cards host). */
/* People and Documents render as full section panels (like .form-section); the single
   "Associations" shell that wraps them is stripped of its chrome (see .assoc-shell). */
.assoc-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); margin-bottom: 0.8rem;   /* no overflow clip: overlay can spill */
}
.assoc-panel[hidden] { display: none; }
.assoc-panel-head {
  padding: 0.55rem 0.9rem; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface-alt); border-bottom: 1px solid var(--border);
  font-size: 0.9rem; font-weight: 600; color: var(--heading);
}
.assoc-panel-body { padding: 0.75rem 0.85rem; }
.form-section.assoc-shell { border: none; background: none; box-shadow: none; overflow: visible; }
.assoc-shell > .form-section-head { display: none; }
.assoc-shell > .form-section-body { padding: 0; }
.assoc-host { display: flex; flex-direction: column; gap: 0.5rem; }
.assoc-host .assoc-empty { margin: 0.15rem 0; }
/* Rail "Actions" menu + the bulk "Edit all" dialog. */
.assoc-rail-toolbar { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; }
.assoc-rail-actions .actions-menu-toggle { padding: 0.2rem 0.6rem; }
.assoc-bulk-modal { width: min(720px, 96vw); max-width: 96vw; }
.assoc-bulk-adds { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.6rem 0 0.25rem; }
.assoc-bulk-add { flex: 1 1 240px; min-width: 0; }
.assoc-bulk-add-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.2rem; }
.assoc-bulk-body { margin-top: 0.6rem; max-height: 52vh; overflow: auto; }
.assoc-bulk-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.2rem; border-top: 1px solid var(--border); }
.assoc-bulk-row:first-child { border-top: none; }
.assoc-bulk-icon { flex: 0 0 auto; color: var(--text-muted); display: inline-flex; }
.assoc-bulk-icon svg { width: 16px; height: 16px; display: block; }
.assoc-bulk-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.assoc-bulk-role { flex: 0 0 auto; padding: 0.25rem 0.4rem; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); color: var(--text); font: inherit; }
.assoc-bulk-star { flex: 0 0 auto; font-size: 1.05rem; }
.assoc-bulk-remove { flex: 0 0 auto; }
/* "(edited)" history toggle — keeps the blue the old "edit" text link used. (The edit
   action itself is now the pencil icon in .note-actions.) */
.note-edited-toggle {
  background: none;
  border: none;
  padding: 0 0.15rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-style: italic;
  color: #2a6fc4;
  text-decoration: underline;
}
.note-history {
  list-style: none;
  margin: 0.4rem 0 0 1.75rem;
  padding: 0.4rem 0 0.2rem 0.85rem;
  border-left: 2px solid #e3e6ec;
}
.note-history-item { font-size: 0.9rem; color: #555; padding: 0.2rem 0; }
.note-history-item .note-stamp { font-weight: 500; color: #555; }
.note-edit-form { margin-top: 0.5rem; }
.note-edit-actions { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.hidden { display: none; }

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

.global-alert-section {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.alert {
  box-sizing: border-box;
  width: 100%;
  min-height: 4.25rem;
  padding: 1rem 1.5rem;
  border: 0;
  border-bottom: .25rem solid currentColor;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  font-weight: 750;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  text-align: center;
  line-height: 1.3;
}
.alert-icon {
  font-size: 1.3em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.alert-message { flex: 0 1 auto; }
/* Dismiss (X): pinned right so the centered message stays centered; inherits the
   bar's currentColor; 32px target (WCAG 2.2 target-size minimum is 24px). */
.alert { position: relative; }
.alert-dismiss {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.alert-dismiss:hover { background: rgba(255, 255, 255, 0.22); }
.alert-normal {
  background: #006be6;
  color: #ffffff;
  border-bottom-color: #004a9e;
}
.alert-warning {
  background: #ffd400;
  color: #211900;
  border-bottom-color: #e59a00;
}
.alert-high {
  background: #cf3f00;
  color: #ffffff;
  border-bottom-color: #8f2900;
  animation: alert-flash 1.4s ease-in-out infinite;
}
@keyframes alert-flash {
  0%, 100% {
    box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(207, 63, 0, 0);
  }
  50% {
    box-shadow: inset 0 0 2rem rgba(255, 214, 0, .3), 0 .2rem 1rem rgba(207, 63, 0, .5);
  }
}

.alert-critical {
  background: #e0002b;
  color: #ffffff;
  border-bottom-color: #92001c;
  animation: alert-strobe 3s infinite;
}
@keyframes alert-strobe {
  /* 0-540ms: three rapid strobe flashes */
  0%, 6%, 12% {
    box-shadow: inset 0 0 2rem rgba(255, 255, 255, .25), 0 0 1.75rem rgba(224, 0, 43, .85);
  }
  3%, 9%, 15% {
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0), 0 0 .4rem rgba(224, 0, 43, .35);
  }
  /* 540ms-3s: quiet, solid critical red */
  18%, 100% {
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alert-high,
  .alert-critical {
    animation: none;
    box-shadow: none;
  }
}

.sev-tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sev-normal { background: #e1ecf7; color: #1f3a5f; }
.sev-warning { background: #fff8e1; color: #5a4a00; }
.sev-high { background: #fde6e6; color: #6b1f1f; }
.sev-critical { background: #ff0033; color: #fff; }

.link-btn {
  background: none;
  border: none;
  color: #1f3a5f;
  cursor: pointer;
  padding: 0;
  font: inherit;
  text-decoration: underline;
}
.link-btn:hover { color: #2a4a73; }

.audit-action {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #ececf2;
  color: #555;
}
.audit-created { background: #e6f4ea; color: #1d4d2b; }
.audit-updated { background: #e1ecf7; color: #1f3a5f; }
.audit-activated { background: #e6f4ea; color: #1d4d2b; }
.audit-deactivated { background: #ececf2; color: #555; }
.audit-deleted { background: #fde6e6; color: #6b1f1f; }

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.page-head h1 { margin: 0; font-size: 1.5rem; line-height: 1.2; }
/* Half-line gap between the page title and its subtitle (overrides the global
   negative .meta margin that otherwise tucks the subheader under the h1). */
.page-head .meta { margin-top: 0.3rem; }
.page-actions { display: flex; align-items: center; gap: 0.5rem; }
.btn-light {
  font: inherit;
  background: #fff;
  border: 1px solid #d0d4dd;
  padding: 0.25rem 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  color: #1f3a5f;
  text-decoration: none;
}
.btn-light:hover { background: #f0f3f8; }
.save-status {
  font-size: 0.85rem;
  color: #5a8a5a;
  opacity: 0;
  transition: opacity 0.2s;
}
.save-status.visible { opacity: 1; }

/* ===== Notify (reusable notification controls + dialog) ===== */
/* Shared bell button base for the add (Bell+) and status bells. */
.notify-add-btn, .notify-status-btn {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  width: 24px; height: 24px; padding: 0; border: none; background: transparent;
  color: var(--text-faint); border-radius: 5px; cursor: pointer; vertical-align: middle;
}
.notify-add-btn:hover, .notify-status-btn:hover { background: var(--surface-sunken); color: var(--heading); }
.notify-add-btn .icon, .notify-status-btn .icon { width: var(--icon-md); height: var(--icon-md); }
.notify-add, .notify-status { display: inline-flex; align-items: center; vertical-align: middle; }

/* Bell+ : a small plus over the bell. */
.notify-plus {
  position: absolute; right: -1px; bottom: -2px; font-size: 0.7rem; font-weight: 800;
  line-height: 1; color: var(--heading); background: var(--surface); border-radius: 50%; padding: 0 1px;
}

/* Status bell: empty by default; solid yellow when I have unread on this doc. */
.notify-status.has-unread .notify-status-btn { color: #e0a800; }
.notify-status.has-unread .notify-status-btn svg { fill: currentColor; }
.notify-status.has-unread .notify-status-btn:hover { color: #c08f00; background: var(--surface-sunken); }
/* The form's own (primary) bell is prominent. */
.notify-status.notify-big .notify-status-btn { width: 44px; height: 44px; }
.notify-status.notify-big .notify-status-btn .icon { width: var(--icon-display); height: var(--icon-display); }

/* Leading notify column in list views */
.notify-col { width: 34px; text-align: center; padding-left: 0.45rem; padding-right: 0.25rem; }
.notify-col .notify-status { justify-content: center; }

/* Message banners at the top of a document (unread notifications' messages). */
.notify-banners { margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.notify-banner {
  display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.6rem 0.8rem;
  border: 1px solid var(--warning-border); border-left: 4px solid var(--warning);
  border-radius: var(--radius); background: var(--warning-bg);
}
.notify-banner-body { flex: 1; min-width: 0; }
.notify-banner-msg { color: var(--warning); white-space: pre-wrap; }
.notify-banner-meta { margin-top: 0.2rem; font-size: 0.78rem; color: var(--text-muted); }
.notify-banner-close { border: none; background: transparent; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--warning); padding: 0 0.2rem; }

.notify-dialog { max-width: 480px; width: 92%; }
.notify-tabs { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; margin: 0.75rem 0 0.5rem; }
.notify-tab { background: var(--surface); color: var(--heading); border: none; padding: 0.3rem 0.8rem; font: inherit; font-size: 0.85rem; cursor: pointer; border-right: 1px solid var(--border-strong); }
.notify-tab:last-child { border-right: none; }
.notify-tab.active { background: var(--heading); color: var(--surface); }
.notify-search { width: 100%; padding: 0.4rem 0.6rem; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text); margin-bottom: 0.5rem; }
.notify-users { max-height: 240px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; padding: 0.35rem; }
.notify-user { display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.4rem; border-radius: 4px; font-size: 0.9rem; }
.notify-user:hover { background: var(--surface-alt); }
.notify-empty { color: var(--text-muted); font-style: italic; padding: 0.5rem; margin: 0; }
.notify-message-label { display: block; margin-top: 0.75rem; font-weight: 600; color: var(--text-muted); font-size: 0.85rem; }
.notify-message { display: block; width: 100%; margin-top: 0.3rem; padding: 0.45rem 0.6rem; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; }
.notify-error { color: var(--danger); font-size: 0.85rem; margin: 0.4rem 0 0; }
.notify-foot { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }

/* ===== Dashboard ===== */
/* Dashboard identity: when more than one dashboard is available, the title itself
   becomes the switcher without taking on the visual weight of a toolbar control. */
/* One header row: title on the left, toolbar filling the rest, so widgets start
   as high as possible. Wraps when edit mode adds Add Widget / Cancel / Save. */
.dash-header { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin-bottom: .6rem; }
.dash-title-row { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.dash-title-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  max-width: min(32rem, 80vw);
  border-radius: var(--radius);
}
.dash-title-switcher select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 2rem;
  padding: 0;
  border: 0;
  color: transparent;
  font-size: 1rem;
  opacity: 0;
  cursor: pointer;
}
.dash-title-switcher select option {
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  -webkit-text-fill-color: var(--text);
}
.dash-title-switcher:focus-within { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.dash-title-caret {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: .25rem solid transparent;
  border-right: .25rem solid transparent;
  border-top: .35rem solid currentColor;
  color: var(--heading);
  pointer-events: none;
}
.dash-system-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: .12rem .5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .035em;
}

/* The right side shows only the builder cog in view mode. Builder mode swaps in
   dashboard management, widget, cancel, and save actions. */
.dash-toolbar { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.5rem; min-height: 32px; }
/* Global "+ New" sits at the left of the toolbar, away from the dashboard controls. */
/* Last in the toolbar, which is right-aligned -> "+ New" lands at the far right,
   matching the list views. The cog sits outside the toolbar, before the title. */
.dash-new { display: inline-flex; align-items: center; }
.dash-edit-only,
form.dash-edit-only { display: none; }
.dash-toolbar .dash-edit-only { display: none; }
body.dash-editing .dash-view-only { display: none; }
body.dash-editing .dash-edit-only { display: inline-flex; }
.btn-sm { padding: 0.32rem 0.7rem; font-size: 0.85rem; line-height: 1.2; }
.dash-cog { padding: 0.3rem 0.4rem; }
.dash-cog svg { width: 16px; height: 16px; display: block; }

/* Edit-mode dashboard settings panel (shown via .dash-edit-only) */
.dash-settings {
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
body.dash-editing .dash-settings { display: flex; }
.dash-field { display: flex; flex-direction: column; gap: 0.3rem; }
.dash-field-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.dash-field-name { flex: 1 1 200px; min-width: 180px; }
.dash-field-name input {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  width: 100%;
}
.dash-scope { display: inline-flex; gap: 0.85rem; align-items: center; }
.dash-scope label { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.9rem; color: var(--text); }
.dash-field-inline { flex-direction: row; align-items: center; gap: 0.4rem; }
.dash-settings-actions { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.dash-delete { color: #c23a3a; padding: 0.3rem 0.45rem; }
.dash-delete svg { width: 16px; height: 16px; display: block; }
.dash-delete:hover { background: #fde6e6; }
.dash-settings-error { flex-basis: 100%; color: #c23a3a; font-size: 0.85rem; margin: 0; }

.grid-stack { background: transparent; }

/* Panel card (standard system style — base for every widget) */
.grid-stack-item-content.widget {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.widget-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--heading);
}
.widget-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget-title[contenteditable="true"] { cursor: text; outline: none; overflow: visible; text-overflow: clip; border-radius: 4px; padding: 0 3px; margin: 0 -3px; }
.widget-title[contenteditable="true"]:hover { background: var(--surface-sunken); }
.widget-title[contenteditable="true"]:focus { background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--border-strong); }
.widget-actions { display: inline-flex; align-items: center; gap: 0.1rem; }
/* Header action buttons (change / remove / drag) are hidden until edit mode */
.widget-action-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-faint);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.widget-action-btn .icon { width: var(--icon-md); height: var(--icon-md); }
.widget-action-btn:hover { background: var(--surface-sunken); color: var(--heading); }
.widget-remove:hover { color: #c23a3a; }
.widget-drag { cursor: grab; }
.widget-drag:active { cursor: grabbing; }
.widget-body {
  flex: 1;
  min-height: 0;            /* allow inner content to scroll instead of overflowing */
  padding: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  overflow: hidden;
}
.widget-empty { margin: 0; font-style: italic; font-size: 0.9rem; }
.widget-placeholder { font-weight: 600; font-size: 1.05rem; color: var(--text-muted); letter-spacing: 0.02em; }

/* Per-widget settings strip (shown only in edit mode via .dash-edit-only) */
.widget-settings {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.5rem 0.85rem;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
body.dash-editing .widget-settings { display: flex; }
.widget-setting-field { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-muted); }
.widget-setting-label { font-weight: 600; }
.widget-settings select, .widget-settings input[type="text"] {
  font: inherit;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface);
  color: var(--text);
}

/* "Hide panel styling" (bare): chromeless on the dashboard; in edit mode it keeps a
   dashed outline + its header (so it stays manipulable) but no background. */
.grid-stack-item-content.widget.widget-bare { background: transparent; border-color: transparent; box-shadow: none; }
.grid-stack-item-content.widget.widget-bare .widget-head { display: none; }
.grid-stack.editing .grid-stack-item-content.widget.widget-bare { background: transparent; }
.grid-stack.editing .grid-stack-item-content.widget.widget-bare .widget-head { display: flex; }
/* Dashed outline ONLY for style-hidden panels in edit (they have no other border).
   SVG overlay so dash length + gap are controllable: '12 12' = 12px dash, 12px gap. */
.grid-stack.editing .grid-stack-item-content.widget.widget-bare::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  z-index: 5;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%25'%20height='100%25'%20fill='none'%3E%3Crect%20width='100%25'%20height='100%25'%20rx='10'%20ry='10'%20stroke='%239aa3b2'%20stroke-width='4'%20stroke-dasharray='12%2012'/%3E%3C/svg%3E");
}
.widget-bare .widget-bare-toggle { color: var(--heading); background: var(--surface-sunken); }

/* Edit-mode affordances */
.grid-stack.editing .widget-action-btn { display: inline-flex; }

/* Resize handle (bottom-right). Present only in edit mode (static grid has none);
   alwaysShowResizeHandle keeps it visible. Drawn as a corner arrow that brightens
   on hover. */
/* Single 45° two-way resize arrow. !important + hiding the pseudo-elements
   removes gridstack's default handle so there's no duplicate arrow. */
.grid-stack-item > .ui-resizable-se {
  width: 30px;
  height: 30px;
  right: 2px;
  bottom: 2px;
  transform: none;
  opacity: 0.75;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238a8f99'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='6'%20y1='6'%20x2='18'%20y2='18'/%3E%3Cpolyline%20points='12%206%206%206%206%2012'/%3E%3Cpolyline%20points='18%2012%2018%2018%2012%2018'/%3E%3C/svg%3E") !important;
}
.grid-stack-item > .ui-resizable-se:hover { opacity: 1; }
.grid-stack-item > .ui-resizable-se::after,
.grid-stack-item > .ui-resizable-se::before { content: none; }

/* Snap hint: where a dragged/resized panel will land */
.grid-stack-placeholder > .placeholder-content {
  border: 2px dashed var(--heading);
  border-radius: 10px;
  background: rgba(31, 58, 95, 0.10);
}

/* Empty state */
.dash-empty {
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
  background: var(--surface);
}
.dash-empty p { margin: 0; }

/* Add Widget catalog modal */
.widget-catalog { max-width: 640px; width: 92%; }
.widget-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
/* Section header inside the catalog grid (Pages / Admin pages / Dashboards / Views). */
.widget-catalog-group {
  grid-column: 1 / -1;
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.25rem;
}
.widget-catalog-group:first-child { margin-top: 0; }
.widget-catalog-card {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  text-align: left;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s;
}
.widget-catalog-card:hover { border-color: var(--heading); box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08); }
.widget-catalog-card:active { transform: translateY(1px); }
.widget-catalog-icon { color: var(--heading); flex: 0 0 auto; display: inline-flex; }
.widget-catalog-icon .icon { width: var(--icon-xl); height: var(--icon-xl); }
.widget-catalog-text { display: flex; flex-direction: column; gap: 0.15rem; }
.widget-catalog-name { font-weight: 600; color: var(--heading); }
.widget-catalog-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.3; }

/* Stack the layout on small screens so the sidebar doesn't push content off-screen */
@media (max-width: 760px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); padding: 0.5rem 0;
             position: static; height: auto; overflow: visible; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .nav-link { border-left: none; border-bottom: 3px solid transparent; padding: 0.5rem 1rem; }
  .nav-link.active { border-left: none; border-bottom-color: var(--heading); }
  .nav-section { display: none; }
  .content { padding: 1rem; }
  .btn-primary, .btn-light, .icon-btn, .nav-dropdown-btn, .tab-btn { min-height: 42px; }
  .icon-btn { min-width: 42px; }
  .topbar { gap: .5rem; padding: .65rem 1rem; flex-wrap: wrap; }
  .user-nav { margin-left: auto; gap: .5rem; }
}

/* ============================================================
   THEME SYSTEM (light / dark / system)
   Light variable values equal the original hardcoded colors, so
   light mode is visually unchanged. Dark mode just swaps variables.
   ============================================================ */
:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-alt: #f0f3f8;
  --surface-sunken: #f5f6f8;
  --text: #1a1d24;
  --text-muted: #555555;
  --text-faint: #8a8f99;
  --heading: #1f3a5f;
  --border: #e3e6ec;
  --border-strong: #d0d4dd;
  --border-faint: #eef0f4;
  --code-bg: #ececf2;
  --row-hover: #f5f7fb;
  --nav-active-bg: #eaf1fb;
  --nav-active-text: #1f3a5f;
  --admin-sidebar-bg: #eef2f7;
  --admin-sidebar-border: #ccd5e1;
  --danger: #c23a3a;
  --danger-border: #e7c4c4;
  --success: #1d4d2b;
  --success-bg: #e6f4ea;
  --success-border: #84c898;
  --warning: #5a4a00;
  --warning-bg: #fff8e1;
  --warning-border: #f0d36b;
  --info: #1f3a5f;
  --info-bg: #e1ecf7;
  --info-border: #b7cde4;
  /* Solid, not translucent: WCAG 2.2 focus-appearance needs >=3:1 against the
     ground; the accent already carries that contrast in every skin x theme. */
  --focus-ring: var(--accent);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  /* "Highlight links" accessibility preference — accent-tinted wash behind links. */
  --link-highlight: color-mix(in srgb, var(--accent) 16%, transparent);
  --control-height: 2.35rem;
  --control-height-sm: 2rem;
  --control-height-lg: 2.75rem;
  --topbar-h: 3.5rem;
  --app-header-h: var(--topbar-h);
  --disabled-opacity: .55;
  --transition-fast: 120ms ease;
  --transition-normal: 180ms ease;
  --z-base: 0;
  --z-sticky: 100;
  --z-dropdown: 1000;
  --z-modal: 1100;
  --z-toast: 1200;
  --z-skip-link: 2000;
  --table-row-padding-standard: .6rem;
  --table-row-padding-compact: .42rem;
  --table-row-padding-relaxed: .78rem;
  --icon-xs: .75rem;
  --icon-sm: .875rem;
  --icon-md: 1rem;
  --icon-lg: 1.125rem;
  --icon-xl: 1.25rem;
  --icon-display: 2rem;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* ----- Chrome tokens (skin-aware). Defaults below reproduce the original
     look exactly, so [data-skin="original"] (or no data-skin) is unchanged. ----- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --accent: #1f3a5f;            /* primary action / active-nav rail / links  */
  --accent-hover: #2a4a73;
  --accent-contrast: #ffffff;   /* text/icon color on top of --accent        */
  --topbar-bg: #1f3a5f;
  --topbar-fg: #ffffff;
  --topbar-fg-muted: #cfe0ff;
  --topbar-border: rgba(255, 255, 255, 0.30);
  --topbar-btn-hover: rgba(255, 255, 255, 0.12);
  --topbar-edge: transparent;   /* hairline under the topbar (light skins)    */
  --radius: 6px;                /* inputs / buttons                           */
  --radius-sm: 4px;
  --radius-lg: 8px;             /* cards / panels                             */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 1px 4px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.18);
  --backdrop: rgba(11, 18, 32, .55);
}

/* ============================================================
   SKINS — each overrides the palette + chrome tokens above. The
   active skin is chosen per-user via <html data-skin="…">. Skins
   are LIGHT-mode identities; [data-theme="dark"] below comes after
   these blocks so dark mode stays authoritative when both apply.
   "original" needs no block — it is the :root defaults.
   ============================================================ */
[data-skin="slate"] {
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-alt: #f1f5f9;
  --surface-sunken: #f8fafc;
  --text: #0f172a;
  --text-muted: #64748b;
  --text-faint: #94a3b8;
  --heading: #0f172a;
  --border: #e7ebf0;
  --border-strong: #d4dbe3;
  --border-faint: #eef2f6;
  --code-bg: #eef2f6;
  --row-hover: #f1f5f9;
  --nav-active-bg: #eef2ff;
  --nav-active-text: #4f46e5;
  --admin-sidebar-bg: #eef2ff;
  --admin-sidebar-border: #d6ddf5;
  --danger: #dc2626;
  --danger-border: #f3c6c6;
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-contrast: #ffffff;
  --topbar-bg: #ffffff;
  --topbar-fg: #0f172a;
  --topbar-fg-muted: #475569;
  --topbar-border: #e2e8f0;
  --topbar-btn-hover: #f1f5f9;
  --topbar-edge: #e2e8f0;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 1px 3px rgba(16, 24, 40, 0.06);
}
[data-skin="friendly"] {
  --bg: #f6f7f4;
  --surface: #ffffff;
  --surface-alt: #f1f3ee;
  --surface-sunken: #f6f7f4;
  --text: #1c2530;
  --text-muted: #5d6b73;
  --text-faint: #90a0a0;
  --heading: #0f3d3a;
  --border: #e6e6df;
  --border-strong: #d6d8cf;
  --border-faint: #eeeee8;
  --code-bg: #eceee6;
  --row-hover: #eef6f3;
  --nav-active-bg: #e3f4f0;
  --nav-active-text: #0d9488;
  --admin-sidebar-bg: #e8f3f0;
  --admin-sidebar-border: #cfe5df;
  --danger: #dc2626;
  --danger-border: #f0c9c9;
  --accent: #0d9488;
  --accent-hover: #0f766e;
  --accent-contrast: #ffffff;
  --topbar-bg: #ffffff;
  --topbar-fg: #16302c;
  --topbar-fg-muted: #4a5f5a;
  --topbar-border: #e6e6df;
  --topbar-btn-hover: #eef6f3;
  --topbar-edge: #e6e6df;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(20, 40, 35, 0.05);
  --shadow-md: 0 6px 16px rgba(20, 40, 35, 0.08), 0 1px 3px rgba(20, 40, 35, 0.05);
}
[data-skin="bold"] {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-alt: #f5f3ff;
  --surface-sunken: #faf9ff;
  --text: #0b1020;
  --text-muted: #5b6478;
  --text-faint: #9aa1b4;
  --heading: #0b1020;
  --border: #eceaf6;
  --border-strong: #ddd9ee;
  --border-faint: #f2f0fa;
  --code-bg: #f0eefb;
  --row-hover: #f7f5ff;
  --nav-active-bg: #efeafe;
  --nav-active-text: #6d28d9;
  --admin-sidebar-bg: #f5f3ff;
  --admin-sidebar-border: #e0daf5;
  --danger: #e11d48;
  --danger-border: #f6c9d3;
  --accent: #6d28d9;
  --accent-hover: #5b21b6;
  --accent-contrast: #ffffff;
  --topbar-bg: linear-gradient(90deg, #6d28d9 0%, #4f46e5 100%);
  --topbar-fg: #ffffff;
  --topbar-fg-muted: #e3ddff;
  --topbar-border: rgba(255, 255, 255, 0.35);
  --topbar-btn-hover: rgba(255, 255, 255, 0.16);
  --topbar-edge: transparent;
  --radius: 10px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(20, 10, 40, 0.06);
  --shadow-md: 0 8px 24px rgba(80, 40, 160, 0.12), 0 2px 6px rgba(20, 10, 40, 0.06);
}
[data-skin="navy"] {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-alt: #eef2f7;
  --surface-sunken: #f4f6f9;
  --text: #16203a;
  --text-muted: #5b6b85;
  --text-faint: #8a97ad;
  --heading: #1e3a5f;
  --border: #e2e8f0;
  --border-strong: #cfd8e3;
  --border-faint: #edf1f6;
  --code-bg: #e9eef5;
  --row-hover: #eef3fb;
  --nav-active-bg: #e7eefb;
  --nav-active-text: #2f6fed;
  --admin-sidebar-bg: #eaeff7;
  --admin-sidebar-border: #cdd8e8;
  --danger: #d23a3a;
  --danger-border: #ecc4c4;
  --accent: #2f6fed;
  --accent-hover: #2257c8;
  --accent-contrast: #ffffff;
  --topbar-bg: #1e3a5f;
  --topbar-fg: #ffffff;
  --topbar-fg-muted: #cfe0ff;
  --topbar-border: rgba(255, 255, 255, 0.28);
  --topbar-btn-hover: rgba(255, 255, 255, 0.12);
  --topbar-edge: transparent;
  --radius: 8px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 3px rgba(16, 30, 60, 0.07);
  --shadow-md: 0 4px 14px rgba(16, 30, 60, 0.10), 0 1px 3px rgba(16, 30, 60, 0.06);
}
[data-skin="modern"] {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-alt: #f9fafb;
  --surface-sunken: #eef1f5;
  --text: #172033;
  --text-muted: #667085;
  --text-faint: #8b95a5;
  --heading: #172033;
  --border: #dfe3e8;
  --border-strong: #c8ced6;
  --border-faint: #edf0f3;
  --code-bg: #eef1f5;
  --row-hover: #f1f5fb;
  --nav-active-bg: #eaf0ff;
  --nav-active-text: #1f54bc;
  --admin-sidebar-bg: #f0f3f7;
  --admin-sidebar-border: #d4dae2;
  --danger: #b42318;
  --danger-border: #efb3ae;
  --success: #176b35;
  --success-bg: #e8f5ec;
  --success-border: #87c99a;
  --warning: #8a3500;
  --warning-bg: #fff4e8;
  --warning-border: #edb67f;
  --info: #18439a;
  --info-bg: #eaf0ff;
  --info-border: #a9bff0;
  --accent: #1f54bc;
  --accent-hover: #18439a;
  --accent-contrast: #ffffff;
  --topbar-bg: #ffffff;
  --topbar-fg: #172033;
  --topbar-fg-muted: #475467;
  --topbar-border: #dfe3e8;
  --topbar-btn-hover: #f1f4f8;
  --topbar-edge: #dfe3e8;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 6px 18px rgba(16, 24, 40, 0.09), 0 1px 3px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 20px 54px rgba(16, 24, 40, 0.18);
}
[data-theme="dark"] {
  /* Native form-control chrome (date-picker calendar icon + popup, scrollbars,
     select arrows) renders dark-appropriate — otherwise the UA draws dark glyphs
     that vanish on our dark surfaces. */
  color-scheme: dark;
  --bg: #14161b;
  --surface: #1e2127;
  --surface-alt: #262b33;
  --surface-sunken: #2a2f37;
  --text: #e6e8ec;
  --text-muted: #aab0ba;
  --text-faint: #8b919c;
  --heading: #9fc3ff;
  --border: #343a44;
  --border-strong: #444b57;
  --border-faint: #2c313a;
  --code-bg: #2a2f37;
  --row-hover: #262b33;
  --nav-active-bg: #233247;
  --nav-active-text: #cfe0ff;
  --admin-sidebar-bg: #232a36;
  --admin-sidebar-border: #3a4452;
  --danger: #f08a8a;
  --danger-border: #5e3a3a;
  --success: #8fd5a3;
  --success-bg: #1d3525;
  --success-border: #356744;
  --warning: #f2d27a;
  --warning-bg: #3a321d;
  --warning-border: #65572c;
  --info: #b8d4ff;
  --info-bg: #203149;
  --info-border: #355478;
  /* Chrome tokens for dark: one coherent dark identity regardless of skin.
     radius / shadow / font intentionally inherit from the active skin. */
  --accent: #6ea8ff;
  --accent-hover: #8bb9ff;
  --accent-contrast: #0b1220;
  --topbar-bg: #1b1e24;
  --topbar-fg: #e6e8ec;
  --topbar-fg-muted: #aab4c4;
  --topbar-border: rgba(255, 255, 255, 0.16);
  --topbar-btn-hover: rgba(255, 255, 255, 0.08);
  --topbar-edge: #2a2f37;
}
/* Per-skin identity in dark mode — keeps each skin's accent + a tinted topbar so
   switching skins stays visible when the page is dark. Two-attribute selectors
   beat the single-attribute [data-theme="dark"] block above. Shared dark neutrals
   (bg/surface/text/border) come from that block; only the identity bits change. */
[data-theme="dark"][data-skin="slate"]    { --accent: #8b9cff; --accent-hover: #a7b4ff; --accent-contrast: #0b1020; --topbar-bg: #191c27; --topbar-fg-muted: #aeb6ff; --nav-active-bg: #232a45; --nav-active-text: #b7c0ff; }
[data-theme="dark"][data-skin="friendly"] { --accent: #4fd1c5; --accent-hover: #6ee7da; --accent-contrast: #08221e; --topbar-bg: #15211d; --topbar-fg-muted: #8fe3d8; --nav-active-bg: #1e3b35; --nav-active-text: #7fe0d4; }
[data-theme="dark"][data-skin="bold"]     { --accent: #a78bfa; --accent-hover: #c4b5fd; --accent-contrast: #120726; --topbar-bg: linear-gradient(90deg, #3b1d8f 0%, #3730a3 100%); --topbar-fg-muted: #d6ccff; --nav-active-bg: #2c2350; --nav-active-text: #c4b5fd; }
[data-theme="dark"][data-skin="navy"]     { --accent: #6ea8ff; --accent-hover: #8bb9ff; --accent-contrast: #0b1220; --topbar-bg: #16233a; --topbar-fg-muted: #aecbff; --nav-active-bg: #1f3252; --nav-active-text: #a9c8ff; }
[data-theme="dark"][data-skin="modern"]   { --accent: #7aa2ff; --accent-hover: #9ab9ff; --accent-contrast: #101828; --topbar-bg: #171e2c; --topbar-fg-muted: #b9c6df; --nav-active-bg: #243657; --nav-active-text: #aec5ff; }
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    color-scheme: dark;
    --bg: #14161b;
    --surface: #1e2127;
    --surface-alt: #262b33;
    --surface-sunken: #2a2f37;
    --text: #e6e8ec;
    --text-muted: #aab0ba;
    --text-faint: #8b919c;
    --heading: #9fc3ff;
    --border: #343a44;
    --border-strong: #444b57;
    --border-faint: #2c313a;
    --code-bg: #2a2f37;
    --row-hover: #262b33;
    --nav-active-bg: #233247;
    --nav-active-text: #cfe0ff;
    --admin-sidebar-bg: #232a36;
    --admin-sidebar-border: #3a4452;
    --danger: #f08a8a;
    --danger-border: #5e3a3a;
    --success: #8fd5a3;
    --success-bg: #1d3525;
    --success-border: #356744;
    --warning: #f2d27a;
    --warning-bg: #3a321d;
    --warning-border: #65572c;
    --info: #b8d4ff;
    --info-bg: #203149;
    --info-border: #355478;
    --accent: #6ea8ff;
    --accent-hover: #8bb9ff;
    --accent-contrast: #0b1220;
    --topbar-bg: #1b1e24;
    --topbar-fg: #e6e8ec;
    --topbar-fg-muted: #aab4c4;
    --topbar-border: rgba(255, 255, 255, 0.16);
    --topbar-btn-hover: rgba(255, 255, 255, 0.08);
    --topbar-edge: #2a2f37;
  }
  [data-theme="system"][data-skin="slate"]    { --accent: #8b9cff; --accent-hover: #a7b4ff; --accent-contrast: #0b1020; --topbar-bg: #191c27; --topbar-fg-muted: #aeb6ff; --nav-active-bg: #232a45; --nav-active-text: #b7c0ff; }
  [data-theme="system"][data-skin="friendly"] { --accent: #4fd1c5; --accent-hover: #6ee7da; --accent-contrast: #08221e; --topbar-bg: #15211d; --topbar-fg-muted: #8fe3d8; --nav-active-bg: #1e3b35; --nav-active-text: #7fe0d4; }
  [data-theme="system"][data-skin="bold"]     { --accent: #a78bfa; --accent-hover: #c4b5fd; --accent-contrast: #120726; --topbar-bg: linear-gradient(90deg, #3b1d8f 0%, #3730a3 100%); --topbar-fg-muted: #d6ccff; --nav-active-bg: #2c2350; --nav-active-text: #c4b5fd; }
  [data-theme="system"][data-skin="navy"]     { --accent: #6ea8ff; --accent-hover: #8bb9ff; --accent-contrast: #0b1220; --topbar-bg: #16233a; --topbar-fg-muted: #aecbff; --nav-active-bg: #1f3252; --nav-active-text: #a9c8ff; }
  [data-theme="system"][data-skin="modern"]   { --accent: #7aa2ff; --accent-hover: #9ab9ff; --accent-contrast: #101828; --topbar-bg: #171e2c; --topbar-fg-muted: #b9c6df; --nav-active-bg: #243657; --nav-active-text: #aec5ff; }
}

body { background: var(--bg); color: var(--text); }

/* Integration override: when the operating system requests reduced motion,
   suppress decorative animation and smooth scrolling across third-party and
   application components without requiring each animation to opt in. */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* surfaces */
.sidebar, .nav-dropdown-menu, .placeholder-card, .calendar-host, .modal,
.login-card, .card, table.data,
.grid-stack-item-content.widget { background: var(--surface); border-color: var(--border); }

/* header bands */
table.data thead, .widget-head { background: var(--surface-alt); }

/* headings / brand text */
h1, .card h2, .card-link h2, table.data th,
.voucher-area h3, .widget-head { color: var(--heading); }

/* body / nav text */
.nav-link, .nav-group-summary, .nav-dropdown-menu a, .nav-dropdown-item, .stepper-label,
.note-stamp, .history-actor, .history-action { color: var(--text); }

/* muted text */
.meta, .card p, .field label, .nav-link.nav-sub, .placeholder-card,
.category-legend, .data-view-empty, .data-view-noresults, .notes-empty,
.note-history-item, .tab-btn, .filter-chip { color: var(--text-muted); }

/* faint text */
.nav-section, .widget-drag, .note-sep, .note-meta { color: var(--text-faint); }

/* hovers + active nav */
.nav-link:hover, .nav-group-summary:hover, .nav-dropdown-menu a:hover { background: var(--surface-alt); }
.nav-dropdown-menu a:hover, .nav-dropdown-item:hover { background: var(--surface-alt); color: var(--heading); }
.data-row:hover { background: var(--row-hover); }
.nav-link.active { background: var(--nav-active-bg); color: var(--nav-active-text); border-left-color: var(--accent); }
.nav-link.nav-sub.active { color: var(--nav-active-text); }

/* inputs */
.field input, .field select, .field textarea, .notes-input,
.data-view-search, .notes-search, .stack input, .stack textarea,
form.inline select, .inline-status select, .category-row input[type="text"] {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.field input[readonly], .field select[disabled], .field textarea[readonly] {
  background: transparent;
  border-color: transparent;
  color: var(--text);
}

/* light/icon/stepper buttons */
.btn-light, .icon-btn, .stepper-btn {
  background: var(--surface);
  color: var(--heading);
  border-color: var(--border-strong);
}
.btn-light:hover, .icon-btn:hover, .stepper-btn:hover { background: var(--surface-alt); }

/* borders & code */
table.data th, table.data td { border-color: var(--border-faint); }
.sidebar { border-right-color: var(--border); }
.nav-link-bottom { border-top-color: var(--border); }
.tabs { border-bottom-color: var(--border); }
.note-item { border-top-color: var(--border-faint); }
.note-history { border-left-color: var(--border); }
code { background: var(--code-bg); color: var(--text); }

/* ===== Settings panel (styled like the notes section) ===== */
.panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 1rem 1.25rem 1.25rem;
  margin: 0.5rem 0 1.5rem;
}
.panel-header {
  background: var(--surface-alt);
  margin: -1rem -1.25rem 1rem;
  padding: 0.6rem 1.25rem;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.panel-header h3 { margin: 0; color: var(--heading); font-size: 1.1rem; }
.panel .field:last-child { margin-bottom: 0; }

/* Theme segmented control */
.theme-select { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; }
.theme-option {
  font: inherit;
  background: var(--surface);
  color: var(--text);
  border: none;
  border-right: 1px solid var(--border-strong);
  padding: 0.45rem 0.9rem;
  cursor: pointer;
}
.theme-option:last-child { border-right: none; }
.theme-option:hover { background: var(--surface-alt); }
.theme-option.active { background: var(--heading); color: var(--surface); font-weight: 600; }

/* Skin (appearance) picker — same buttons as the theme control, but laid out as
   wrapping pills, each carrying a swatch of that skin's accent. */
.skin-select { display: flex; flex-wrap: wrap; gap: 0.4rem; border: none; overflow: visible; }
.skin-select .theme-option {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}
.skin-dot {
  width: 12px; height: 12px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  flex: 0 0 auto;
}
.field-hint { margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--text-muted); }

/* ===== View builder / engine UI ===== */
.user-form.view-builder-form { max-width: 900px; width: 80%; }

.chip-multiselect { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip-check {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.75rem; border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer; font-size: 0.85rem; user-select: none;
}
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check.checked { background: var(--heading); color: var(--surface); border-color: var(--heading); }

.icon-picker { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.icon-opt { width: 36px; height: 36px; }
.icon-opt svg { width: 18px; height: 18px; }
.icon-opt.active { background: var(--heading); color: var(--surface); border-color: var(--heading); }
.title-icon .icon { width: var(--icon-xl); height: var(--icon-xl); vertical-align: -.15em; }

.filter-facet { position: relative; }
.filter-facet > summary { list-style: none; cursor: pointer; }
.filter-facet > summary::-webkit-details-marker { display: none; }
.filter-facet-menu {
  position: absolute; z-index: 30; margin-top: 0.3rem; min-width: 170px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.5rem 0.7rem; box-shadow: 0 6px 16px rgba(0,0,0,0.14);
}
.filter-facet-menu .checkbox-label { display: block; margin: 0.15rem 0; }

.data-view-pager { display: flex; align-items: center; gap: 1.25rem; margin-top: 0.9rem; }
.pager-summary { flex: 0 0 auto; }
.pager-size { display: inline-flex; align-items: center; gap: 0.4rem; }
.pager-size select {
  font: inherit; font-size: 0.85rem; padding: 0.2rem 0.35rem;
  border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--surface); color: var(--text);
}
.pager-links { display: flex; gap: 0.3rem; align-items: center; margin-left: auto; }
.pager-btn { padding: 0.25rem 0.6rem; font-size: 0.95rem; line-height: 1.2; }
.pager-btn.is-disabled { opacity: 0.4; cursor: default; pointer-events: none; }
.pager-pos { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 0.35rem; white-space: nowrap; }
.pager-jump {
  width: 3.6em; font: inherit; font-size: 0.85rem; text-align: center;
  padding: 0.2rem 0.25rem; border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--surface); color: var(--text);
}
.th-sort { color: inherit; text-decoration: none; }
.th-sort:hover { text-decoration: underline; }
.th-sort.active { font-weight: 700; }

.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #c0392b; }
.field-error { color: #c0392b; font-size: 0.82rem; margin-top: 0.25rem; }
.form-errors {
  background: #fdecea; border: 1px solid #f5c6cb; color: #a33;
  padding: 0.6rem 0.9rem; border-radius: 8px; margin-bottom: 1rem;
}
.form-errors p { margin: 0; font-weight: 600; }
.form-errors ul { margin: 0.3rem 0 0 1.1rem; }

.builder-calc .calc-maps { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.calc-map { display: inline-flex; flex-direction: column; gap: 0.15rem; font-size: 0.75rem; color: var(--text-muted); }

.code-editor { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85rem; line-height: 1.4; }
.code-readonly {
  background: var(--surface-sunken); padding: 0.8rem; border-radius: 8px;
  overflow: auto; font-size: 0.82rem; white-space: pre-wrap;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.view-template-switcher a { margin: 0 0.3rem; }
.view-template-switcher a.active { font-weight: 700; text-decoration: underline; }

/* toolbar: search/filters left, New right (inline with the search bar) */
.data-view-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.data-view-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; flex: 1 1 auto; }
.data-view-right { flex: 0 0 auto; }
/* Right-side toolbar group: the Actions menu sits just before the "+ New" button. */
.data-view-tools { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
/* Selected-docs counter — centered between the search/filters and the tools. */
.data-view-selected {
  margin: 0 auto; align-self: center; flex: 0 0 auto;
  font-size: 0.85rem; font-weight: 600; color: var(--heading); white-space: nowrap;
}
/* Row-selection column: narrow, click/drag target, never text-selects. */
.data-view-table .select-col {
  width: 30px; text-align: center; user-select: none; cursor: pointer; padding-right: 0;
}
/* The input is mouse-transparent: ALL mouse interaction goes through the td's
   controlled click/drag logic (no native toggle to fight = no flash). Keyboard
   focus + Space still work natively on the input itself. */
.data-view-table .row-select { pointer-events: none; vertical-align: middle; }
/* The header select-all stays a NORMAL native checkbox (click-only; no drag binds
   to the th). */
.data-view-table .row-select-all { cursor: pointer; vertical-align: middle; }
.view-new { position: relative; display: inline-block; }
.view-new > summary { list-style: none; cursor: pointer; }
.view-new > summary::-webkit-details-marker { display: none; }
.view-new-menu {
  position: absolute; right: 0; z-index: 30; margin-top: 0.3rem; min-width: 180px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.3rem; box-shadow: 0 6px 16px rgba(0,0,0,0.14);
}
.view-new-menu a { display: block; padding: 0.4rem 0.6rem; border-radius: 6px; color: var(--text); text-decoration: none; font-size: 0.9rem; }
.view-new-menu a:hover { background: var(--surface-alt); }

/* ===== Security: Access Roles, Groups, preview ===== */
/* scope/level palette (tuned for light & dark) */
:root {
  --sc-none: var(--text-faint); --sc-own: #1f6feb; --sc-group: #8250df; --sc-all: #1f883d;
  --lv-edit: #1f883d; --lv-view: #bf8700; --lv-hide: #cf222e;
}

.inline-create { display: flex; gap: 0.5rem; align-items: center; }
.inline-create input[type="text"] {
  flex: 0 1 320px; padding: 0.45rem 0.6rem; border: 1px solid var(--border-strong);
  border-radius: 6px; background: var(--surface); color: var(--text); font: inherit;
}
.count-chip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--text-muted); }
.count-chip .icon { width: var(--icon-sm); height: var(--icon-sm); }
.chip-filter { width: 100%; max-width: 360px; margin: 0 0 0.5rem; padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text); }

/* Access Role cards */
.role-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-top: 1rem; }
.role-card { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 0.9rem 1rem; }
.role-card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.role-card-head h3 { margin: 0; font-size: 1.05rem; color: var(--heading); }
.role-summary { color: var(--text-muted); font-size: 0.88rem; margin: 0.4rem 0 0.6rem; }
.scope-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.scope-pill { font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 999px;
  border: 1px solid; background: var(--surface-alt); }
.scope-none { color: var(--text-faint); border-color: var(--border); }
.scope-own { color: var(--sc-own); border-color: var(--sc-own); }
.scope-group { color: var(--sc-group); border-color: var(--sc-group); }
.scope-all { color: var(--sc-all); border-color: var(--sc-all); }

/* Role form: segmented scope control + live summary */
.seg-field { display: flex; align-items: center; gap: 1rem; }
.seg-label { min-width: 5rem; font-weight: 600; color: var(--text-muted); }
.segmented { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.seg-opt { position: relative; padding: 0.4rem 0.85rem; cursor: pointer; font-size: 0.88rem; color: var(--text);
  border-right: 1px solid var(--border-strong); background: var(--surface); user-select: none; }
.seg-opt:last-child { border-right: none; }
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt:hover { background: var(--surface-alt); }
.seg-opt.active { color: #fff; }
.seg-opt.seg-own.active { background: var(--sc-own); }
.seg-opt.seg-group.active { background: var(--sc-group); }
.seg-opt.seg-all.active { background: var(--sc-all); }
.seg-opt.seg-none.active { background: var(--text-muted); }
.role-summary-box { margin: 1.25rem 0; padding: 0.8rem 1rem; border-left: 4px solid var(--sc-own);
  background: var(--surface-alt); border-radius: 6px; }
.role-summary-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 700; }
.role-summary-box p { margin: 0.25rem 0 0; color: var(--text); }
.switch-label { display: inline-flex; align-items: center; gap: 0.5rem; }

/* Role assignment (Form Profile) */
.role-assign-list { display: flex; flex-direction: column; gap: 1rem; }
.role-assign { padding: 1rem; }
.role-assign-head { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.5rem; }
.role-assign-head h3 { margin: 0; font-size: 1.05rem; color: var(--heading); }
.role-assign-head .role-summary { margin: 0; }

/* Toggle switch (admin widget security preview) */
.admin-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.admin-toggle-label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text); }
.admin-toggle-label svg { width: 16px; height: 16px; color: var(--text-muted); }
.switch { position: relative; display: inline-flex; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track { width: 38px; height: 22px; border-radius: 999px; background: var(--border-strong);
  transition: background 0.15s; display: inline-block; position: relative; }
.switch-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.3); transition: transform 0.15s; }
.switch input:checked + .switch-track { background: var(--lv-edit); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--heading); outline-offset: 2px; }

/* Preview banner */
.security-preview-banner { position: sticky; top: 0; z-index: 90; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 1.25rem; background: #fff8e6; color: #5a4500; border-bottom: 1px solid #f3d27a; font-size: 0.9rem; }
.security-preview-banner form { margin-left: auto; }
.spb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lv-view); box-shadow: 0 0 0 3px rgba(191,135,0,0.2); }

/* Preview badges + would-hide rows */
.sec-badge { display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.45rem;
  border-radius: 999px; border: 1px solid; vertical-align: middle; line-height: 1.5; }
.sec-edit { color: var(--lv-edit); border-color: var(--lv-edit); background: rgba(31,136,61,0.08); }
.sec-view { color: var(--lv-view); border-color: var(--lv-view); background: rgba(191,135,0,0.10); }
.sec-hidden, .sec-hide { color: var(--lv-hide); border-color: var(--lv-hide); background: rgba(207,34,46,0.08); }
.sec-summary { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.6rem; padding: 0.45rem 0.7rem;
  background: #fff8e6; color: #5a4500; border: 1px solid #f3d27a; border-radius: 6px; font-size: 0.85rem; }
.sec-summary svg { width: 15px; height: 15px; }
.sec-legend { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.8rem; }
.sec-legend-label { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; }
.sec-col { width: 78px; }
tr.sec-would-hide td { opacity: 0.55; }
tr.sec-would-hide { box-shadow: inset 3px 0 0 0 var(--lv-hide); }

/* Soft-deleted record in a list view (Audit Mode) — red strikethrough + a Restore action. */
tr.row-deleted td { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--danger); }
tr.row-deleted .actions-col,
tr.row-deleted .icon-btn,
tr.row-deleted .row-deleted-badge { text-decoration: none; }
/* THE shared "deleted" badge — list rows, attachment rows, notes, cards. */
.deleted-badge, .row-deleted-badge, .attach-deleted-badge {
  display: inline-block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.02em; color: var(--danger); border: 1px solid var(--danger);
  border-radius: 999px; padding: 0 0.4rem; margin-right: 0.2rem; vertical-align: middle;
  text-decoration: none;
}

/* ===== Mileage travel entries (Claim Voucher) ===== */
/* In-panel area right after the Type field — full width of the Voucher section. */
[data-mileage-section] { margin: 0.35rem 0 1.1rem; }
/* Header matches the field labels (same size/color/weight as the Type label). */
.travel-head { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; margin: 0 0 0.45rem; }
/* "+ Add" — the standard light button at 75% size. */
.travel-add-btn { font-size: 0.75rem; padding: 0.34rem 0.64rem; }
.travel-modal { max-width: 560px; width: 92%; }
.travel-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 1rem; }
.travel-fields .travel-span2 { grid-column: 1 / -1; }
.travel-fields .field { position: relative; }
/* Address autocomplete dropdown (Photon via /geo/suggest). */
.geo-suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 6px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  max-height: 220px; overflow: auto;
}
.geo-suggest button {
  display: block; width: 100%; text-align: left; padding: 0.45rem 0.6rem;
  background: none; border: none; font: inherit; font-size: 0.88rem;
  color: var(--text); cursor: pointer;
}
.geo-suggest button:hover { background: var(--surface-alt); color: var(--heading); }
/* A picked (verified) address. */
.travel-fields input.geo-verified { border-color: var(--heading); }
/* "Other" free-text location name, revealed under its dropdown. */
.travel-fields .travel-loc-other { margin-top: 0.35rem; }
/* Miles + the override pencil side by side. */
.travel-miles-row { display: flex; align-items: center; gap: 0.4rem; }
.travel-miles-row input { flex: 1 1 auto; min-width: 0; }
.travel-miles-row .icon-btn { flex: 0 0 auto; }
/* Red flag on manually-overridden miles in the table (hover = reason). */
.travel-override { display: inline-flex; color: var(--danger); vertical-align: middle; margin-right: 0.25rem; }
.travel-override .icon { width: var(--icon-md); height: var(--icon-md); display: block; stroke-width: 3; }
.travel-table .meta { margin: 0.1rem 0 0; font-size: 0.8rem; }
/* Numeric columns never wrap — the override flag stays beside the miles value even
   at 4-digit mileage; the column grows to fit. */
.travel-table .travel-num { text-align: right; white-space: nowrap; }
.travel-table th.travel-num { min-width: 110px; }
.travel-table .travel-date { width: 86px; }   /* ~10px tighter than natural */
.travel-trip-icon { display: inline-flex; color: var(--text-muted); vertical-align: middle; }
.travel-trip-icon .icon { width: var(--icon-xl); height: var(--icon-xl); display: block; stroke-width: 3; }
/* Totals as the table's footer row: rate left, total miles under Miles, total amount
   under Amount. */
.travel-totals-row td {
  background: var(--surface-alt); border-top: 1px solid var(--border-strong);
  font-variant-numeric: tabular-nums;
}
.travel-totals-row .travel-rate { color: var(--text-muted); }
.travel-totals-row strong { color: var(--heading); }

/* Soft-deleted card (Audit Mode, cards layout) — struck text + badge + restore foot. */
.card-deleted { opacity: 0.92; }
.card-deleted .card-field { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--danger); }
.card-deleted .card-deleted-foot { display: flex; align-items: center; gap: 0.4rem; margin: 0.4rem 0 0; text-decoration: none; }

/* Soft-deleted note thread (Audit Mode) — struck body; per-note actions (pencil /
   trash / restore icons) are pinned to the RIGHT edge of each note row. */
.note-item.note-deleted .note-body { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--danger); }
.note-main { display: flex; align-items: flex-start; gap: 0.5rem; }
.note-text { flex: 1 1 auto; min-width: 0; }
.note-actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.3rem; margin-left: auto; }
.note-action-form { display: inline-flex; margin: 0; }
.note-actions .icon-btn { width: 24px; height: 24px; }
.note-actions .icon-btn svg { width: 13px; height: 13px; }

/* Restore banner on a soft-deleted record's (read-only) form. */
.deleted-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 0.75rem 0 1rem; padding: 0.7rem 1rem;
  border: 1px solid var(--danger); border-radius: 8px;
  background: var(--surface-alt); color: var(--text);
}
.deleted-banner-msg { display: inline-flex; align-items: center; gap: 0.5rem; }
.deleted-banner-msg svg { width: 18px; height: 18px; color: var(--danger); flex: 0 0 auto; }
.deleted-banner-restore { flex: 0 0 auto; white-space: nowrap; }

/* Access redesign: form-type tabs as links, preset buttons, matrix overview */
a.tab-btn { text-decoration: none; }
.access-tabs { flex-wrap: wrap; }
.access-presets { flex-wrap: wrap; max-width: 100%; }
.access-preset { border: 0; border-right: 1px solid var(--border-strong); background: var(--surface); font: inherit; }
.access-preset.active { background: var(--heading); color: #fff; }
.access-advanced { margin: 0.25rem 0 0.75rem; }
.access-advanced > summary { cursor: pointer; font-weight: 600; color: var(--heading); }
.access-preview { margin-top: 1rem; }
.table-scroll { overflow-x: auto; }
.access-matrix { border-collapse: separate; border-spacing: 0; }
.access-matrix th, .access-matrix td { text-align: center; }
.access-matrix thead th { position: sticky; top: var(--app-header-h, var(--topbar-h, 56px)); background: var(--surface-alt); z-index: 2; }
.access-matrix tbody th, .access-matrix thead th:first-child { text-align: left; }
.access-matrix th:first-child, .access-matrix td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.access-matrix thead th:first-child { z-index: 3; }
.access-matrix td a { display: inline-block; }
/* Nested "Manage (advanced)" nav subgroup */
.nav-sub-group { margin-left: 0.25rem; }
.nav-sub-group > .nav-group-summary { padding-left: 2.25rem; font-size: 0.85rem; color: var(--text-muted); }
/* Principal icons: users have none, groups a small (text-size) icon */
.principal-icon { display: inline-flex; vertical-align: -0.12em; color: var(--text-muted); margin-right: 0.15rem; }
.principal-icon svg { width: 1em; height: 1em; }
.access-add-summary svg { width: 1em; height: 1em; vertical-align: -0.12em; }
/* Security & Distribution overview (Form Profile tab) */
.sd-toolbar { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin: 1rem 0; }
.sd-toolbar .data-view-search { min-width: 220px; }
.sd-filters { flex-wrap: wrap; }
.sd-filter { border: 0; border-right: 1px solid var(--border-strong); background: var(--surface); font: inherit; }
.sd-filter:last-child { border-right: none; }
.sd-filter.active { background: var(--heading); color: #fff; }
.sd-breakout-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--text-muted); }
.sd-table td { vertical-align: top; }
.sd-summary { display: block; margin-top: 0.15rem; }
.sd-member > td { background: var(--surface-alt); }
.sd-member-name { padding-left: 1.5rem; color: var(--text-muted); }
/* Provenance: source chips on user rows, effective/superseded tags on members */
.sd-src { margin-top: 0.3rem; font-size: 0.75rem; color: var(--text-muted); }
.sd-src-chip { display: inline-block; padding: 0.05rem 0.45rem; margin-left: 0.25rem; border-radius: 999px; border: 1px solid var(--border); }
.sd-src-chip.eff { color: var(--sc-all); border-color: var(--sc-all); font-weight: 600; }
.sd-src-chip.dim { opacity: 0.5; }
.sd-mtag { font-size: 0.68rem; font-weight: 600; padding: 0.05rem 0.4rem; border-radius: 999px; border: 1px solid; margin-left: 0.35rem; }
.sd-mtag.explicit { color: var(--sc-own); border-color: var(--sc-own); text-decoration: none; }
a.sd-mtag.explicit:hover { background: var(--nav-active-bg); }
.sd-mtag.sup-admin { color: var(--heading); border-color: var(--heading); }
.sd-user { scroll-margin-top: 80px; }
tr.sd-user:target > td { background: var(--nav-active-bg); }

/* Generic Form Settings tab */
.form-settings { max-width: 1180px; }
.fs-global-toggle { margin-bottom: 1rem; max-width: 560px; }
.fs-global-message {
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-alt);
  padding: 1rem; max-width: 720px;
}
.fs-global-message p { margin-top: 0; }
.fs-category { margin-top: 1.5rem; }
.fs-table th, .fs-table td { vertical-align: top; }
.fs-table td:nth-child(1) { min-width: 220px; }
.fs-table td:nth-child(2) { width: 180px; }
.fs-table td:nth-child(3) { width: 220px; }
.fs-table select, .fs-table input {
  width: 100%; min-width: 0; padding: 0.42rem 0.55rem;
  border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--surface); color: var(--text); font: inherit;
}
.fs-table [data-fs-value]:disabled { opacity: 0.55; background: var(--surface-alt); }
.fs-global-modal { width: min(760px, 94vw); }
.fs-global-table th { text-align: left; width: 45%; }
.fs-global-table td { vertical-align: top; }

/* Principal picker: compact field + modal two-pane builder */
.picker { display: flex; align-items: flex-start; gap: 0.6rem; }
.pk-field { flex: 1; min-width: 0; border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--surface); padding: 0.5rem 0.6rem; display: flex; flex-direction: column; gap: 0.55rem; min-height: 2.4rem; }
.pk-section { display: flex; flex-direction: column; gap: 0.25rem; }
.pk-sec-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); }
.pk-rows { display: flex; flex-direction: column; gap: 0.15rem; }
.pk-people-rows { flex-direction: row; flex-wrap: wrap; gap: 0.3rem; }
.pk-empty { color: var(--text-faint); font-size: 0.85rem; }
.pk-person { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px; padding: 0.05rem 0.55rem; font-size: 0.82rem; color: var(--text); }
.pk-group-row { font-size: 0.88rem; color: var(--text); }
.pk-group-head { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; background: none; border: none; color: var(--text); font: inherit; padding: 0; }
.pk-caret { display: inline-block; width: 0.8em; transition: transform 0.12s; color: var(--text-muted); }
.pk-group-head[aria-expanded="true"] .pk-caret { transform: rotate(90deg); }
.pk-count-chip { color: var(--text-muted); font-size: 0.8rem; }
.pk-members { margin: 0.15rem 0 0.2rem 1.4rem; padding: 0; list-style: none; max-height: 8rem; overflow: auto; border-left: 2px solid var(--border); }
.pk-members li { font-size: 0.82rem; color: var(--text-muted); padding: 0.08rem 0 0.08rem 0.5rem; }
.pk-edit { white-space: nowrap; }
.picker-modal { width: min(720px, 94vw); }
.pk-search { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; margin: 0.5rem 0 0.75rem; }
.pk-builder { display: flex; gap: 0.6rem; align-items: stretch; }
.pk-col { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.pk-col > strong { font-size: 0.78rem; color: var(--text-muted); }
.pk-list { width: 100%; min-height: 240px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; }
.pk-mid { display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; }
.pk-mid button { padding: 0.3rem 0.55rem; }
.pk-foot { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
@media (max-width: 620px) { .pk-builder { flex-direction: column; } .pk-mid { flex-direction: row; justify-content: center; } }

/* Impersonation (Mimic User) */
.impersonate-banner { position: sticky; top: 0; z-index: 95; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 1.25rem; background: #efe3fb; color: #4a1f6b; border-bottom: 1px solid #cdb4e6; font-size: 0.9rem; }
.impersonate-banner a { margin-left: auto; }
.mimic-nav { color: var(--topbar-fg); background: var(--topbar-btn-hover); border: 1px solid var(--topbar-border);
  border-radius: 999px; padding: 0.12rem 0.6rem; text-decoration: none; font-size: 0.85rem; white-space: nowrap; }
.mimic-nav:hover { background: rgba(255,255,255,0.3); }

/* Access Explorer */
td.exp-diff { background: var(--nav-active-bg); }
a.pk-person { text-decoration: none; }
a.pk-person:hover { background: var(--surface-alt); }

/* ============================================================
   Form header bar (standard on every document form)
   ============================================================ */
.form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.85rem;
  margin: 0 0 1.25rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-wrap: wrap;
  /* Pinned just below the (sticky) topbar so the title + Save/Edit/Close stay in
     reach while scrolling a long form. One shared rule -> every form header. */
  position: sticky;
  top: var(--app-header-h, var(--topbar-h, 56px));
  z-index: 80;
}
.form-header-left { display: flex; align-items: center; gap: 0.6rem; min-width: 0; flex: 1 1 auto; }
.form-header-back {
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--heading); text-decoration: none;
  border-radius: 6px;
  flex-shrink: 0;
}
.form-header-back:hover { background: var(--surface); }
.form-header-back .icon { width: var(--icon-xl); height: var(--icon-xl); }
.form-header-title {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--heading);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.form-header-status { display: inline-flex; align-items: center; }
.form-header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.form-header-actions .btn-light,
.form-header-actions .btn-primary,
.form-header-actions .actions-menu-toggle { padding: 0.4rem 0.8rem; font-size: 0.9rem; }
.form-header-actions .btn-primary svg,
.form-header-actions .actions-menu-toggle svg { width: 0.95rem; height: 0.95rem; vertical-align: -0.15em; }
/* Activity: top-level icon-only action, first in the toolbar with a ~20px gap
   (0.5rem flex gap + 12px margin) before the Edit/Close/Save group. */
.form-header-actions .form-header-activity { margin-right: 12px; padding: 0.4rem; display: inline-flex; align-items: center; }
.form-header-actions .form-header-activity svg { width: 1.05rem; height: 1.05rem; display: block; }
/* "+ New <kind>" — same compact inline treatment as the Activity/bell buttons. */
.form-header-actions .form-header-new { margin-right: 12px; display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.form-header-actions .form-header-new svg { width: 1.05rem; height: 1.05rem; display: block; }

/* Compose (Bell+) in the form header — the same icon-button treatment as Activity.
   The button carries btn-light (via notify_add's btn_class); these rules align its
   size with the Activity icon and undo the plain in-body bell's transparent look. */
.form-header-actions .form-header-notify { display: inline-flex; align-items: center; margin-right: 4px; }
.form-header-notify .notify-add-btn { padding: 0.4rem; display: inline-flex; align-items: center; }
.form-header-notify .notify-add-btn svg { width: 1.05rem; height: 1.05rem; display: block; }

/* Hidden-for-now primary status bell (form_base): stays in the DOM so notify.js
   still marks the document read on open and renders the unread banners. */
.notify-quiet { display: block; height: 0; overflow: hidden; }

/* Actions dropdown (native <details>; no JS needed) */
.actions-menu { position: relative; }
.actions-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.actions-menu > summary::-webkit-details-marker { display: none; }
.actions-menu .caret { font-size: 0.85em; opacity: 0.85; margin-left: 0.15rem; }
.actions-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 12rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  padding: 0.25rem 0;
  z-index: 1000;
}
.actions-menu-form { margin: 0; }
.actions-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.95rem;
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
}
.actions-menu-item:hover { background: var(--surface-alt); color: var(--heading); }
.actions-menu-item svg { width: 0.95rem; height: 0.95rem; vertical-align: -0.15em; margin-right: 0.3rem; }
.actions-menu-danger { color: var(--danger); }
.actions-menu-danger:hover { background: var(--danger-border); }
/* Per-row Actions menu in list views — compact toggle; disabled placeholder item. */
.row-actions-menu .actions-menu-toggle { padding: 0.2rem 0.55rem; font-size: 0.82rem; white-space: nowrap; }
.row-actions-menu .actions-menu-toggle .row-deleted-badge { margin-right: 0.3rem; }
.actions-menu-item.is-disabled { color: var(--text-muted); cursor: default; }
.actions-menu-item.is-disabled:hover { background: transparent; color: var(--text-muted); }

@media (max-width: 640px) {
  .form-header { padding: 0.5rem 0.65rem; gap: 0.5rem; }
  .form-header-title { font-size: 1rem; }
  .form-header-actions { width: 100%; justify-content: flex-end; }
}

/* Per-form meta strip sits just under the header (notify status, etc.) */
.form-meta-row { display: flex; align-items: center; gap: 0.6rem; margin: -0.5rem 0 1rem; flex-wrap: wrap; }

/* ===========================================================================
   Builder chrome (shared by the Left Navigator; mirrors the dashboard builder)
   + the inline nav builder. View mode reuses .nav-link/.nav-group untouched.
   =========================================================================== */
.builder-edit-only { display: none !important; }
body.nav-editing .builder-edit-only { display: inline-flex !important; }
body.nav-editing .builder-view-only { display: none !important; }

/* Sidebar toolbar: switcher + cog (to its right). The switcher form grows (flex:1) so the
   cog (.dash-cog) is pushed to the right edge of the field. The cog (.dash-cog) and switcher
   (.dash-switcher) reuse the dashboard builder's exact styling — no overrides here. */
.nav-toolbar { display: flex; align-items: center; gap: 0.4rem; padding: 0 0.25rem 0.5rem; }
.nav-switcher-form { flex: 1 1 auto; margin: 0; }
.nav-switcher-form .dash-switcher { width: 100%; max-width: none; }

/* Edit toolbar (revealed in nav-editing). */
body.nav-editing .nav-edit-tools.builder-edit-only { display: flex !important; flex-direction: column; gap: 0.35rem; width: 100%; }
.nav-name-input { width: 100%; font: inherit; font-size: 0.85rem; padding: 0.25rem 0.4rem; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text); }
/* Name field shares its row with "+ Menu" and the delete trashcan — the input flexes
   to fit them. */
/* Name + top-bar label share the action row with the trash/cancel/save icon buttons. */
.nav-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; }
.nav-name-row .nav-name-input { flex: 1 1 6rem; min-width: 0; width: auto; }
.nav-newmenu { width: 100%; }                       /* "+ New Menu" sits on its own line above name */
.nav-act-btn { padding: 0.2rem; line-height: 0; color: var(--text-muted); border-radius: 6px; }
.nav-act-btn svg { width: 16px; height: 16px; }
.nav-act-btn:hover { background: var(--surface-sunken); color: var(--text); }
#nav-delete.nav-act-btn:hover { color: var(--danger); }
.nav-act-save { color: var(--accent); }
.nav-act-save:hover { background: var(--accent); color: var(--on-accent, #fff); }
.nav-default-label { font-size: 0.8rem; display: flex; align-items: center; gap: 0.3rem; color: var(--text-muted); }
.nav-edit-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
/* "Default" toggle rendered as a slider switch. */
.nav-default-toggle { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--text-muted); cursor: pointer; }
.nav-switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.nav-switch { position: relative; display: inline-block; width: 30px; height: 16px; background: var(--border-strong); border-radius: 999px; transition: background 0.15s; flex: 0 0 auto; }
.nav-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: var(--surface); border-radius: 50%; transition: transform 0.15s; }
.nav-switch-input:checked + .nav-switch { background: var(--accent); }
.nav-switch-input:checked + .nav-switch::after { transform: translateX(14px); }
.nav-switch-input:focus-visible + .nav-switch { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn-sm { font-size: 0.8rem; padding: 0.2rem 0.5rem; }

/* Widen the sidebar while editing so the blocks + drag have room. */
body.nav-editing .sidebar { width: 330px; }

/* Item rows: link grows, the action cluster (trash + grip) trails. */
.nav-item-row { display: flex; align-items: center; }
.nav-item-row > .nav-link { flex: 1 1 auto; min-width: 0; }
.nav-item-actions { margin-left: auto; }

/* Small icon controls — the dashboard's widget-action-btn icons, sized down for the nav. */
.nav-action { width: 26px; height: 26px; border-radius: 6px; }
.nav-action svg { width: 16px; height: 16px; }
body.nav-editing .nav-action { display: inline-flex; }   /* widget-action-btn is display:none until edit */
.nav-drag { cursor: grab; }
.nav-drag:active { cursor: grabbing; }

/* JUST-like-dashboard: in edit mode each SECTION is a dashed bordered block with a
   header bar (name + controls), and items become bordered rows. View mode is untouched. */
body.nav-editing .nav-group {
  border: 2.5px dashed var(--heading);
  border-radius: 8px; margin: 0 0 0.5rem; background: var(--surface);
}
body.nav-editing .nav-group-summary {
  display: flex; align-items: center; gap: 0.35rem;
  background: var(--surface-alt); border-radius: 6px 6px 0 0;
  padding: 0.25rem 0.3rem 0.25rem 0.7rem; border-bottom: 1px solid var(--border);
}
body.nav-editing .nav-group:not([open]) > .nav-group-summary { border-bottom: none; border-radius: 6px; }
body.nav-editing .nav-group-summary::after { display: none; }       /* drop the chevron; grip is the affordance */
body.nav-editing .nav-group-summary .nav-label { flex: 1 1 auto; }
body.nav-editing .nav-group-body { padding: 0.35rem 0.4rem 0.35rem 0.9rem; display: block; min-height: 14px; }
body.nav-editing .nav-item-row {
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); margin: 0.25rem 0; padding-right: 0.2rem;
}
body.nav-editing .nav-item-row .nav-link { cursor: default; }
body.nav-editing .nav-item-row .nav-link.active { background: none; border-left: none; }
body.nav-editing .nav-label[contenteditable="true"] { padding: 0 2px; border-radius: 3px; }
body.nav-editing .nav-label[contenteditable="true"]:focus { outline: 1px dashed var(--heading); background: var(--surface-sunken); color: var(--text); }
.nav-drag-ghost { opacity: 0.5; background: var(--surface-sunken); }

/* Add-to-nav catalog (mirrors the widget catalog). */
.builder-catalog .builder-catalog-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.builder-catalog-card {
  font: inherit; font-size: 0.85rem; padding: 0.4rem 0.6rem; border: 1px solid var(--border-strong);
  border-radius: 6px; background: var(--surface); color: var(--heading); cursor: pointer; text-align: left;
}
.builder-catalog-card:hover { background: var(--surface-sunken); }

/* Indent items nested under a section header (compounds when two levels deep). View
   mode indents the link; edit mode indents the whole row via .nav-group-body padding. */
/* Indent the whole nested body so sub-sections AND their items step in, compounding
   at each level (a sub-section's items sit one step deeper than the sub-section). */
body:not(.nav-editing) .nav-group-body { padding-left: 1.1rem; }

/* ===== Stick-to-bottom zone + toggle states (nav builder) ===== */
/* Builder fills the sidebar so the bottom zone sits at the very bottom (like Community did). */
.nav-builder { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.nav-builder > .nav-tree { flex: 1 1 auto; }
.nav-tree-bottom { flex: 0 0 auto; }
.nav-tree-bottom:not(:empty) { border-top: 1px solid var(--border); margin-top: 0.85rem; padding-top: 0.6rem; }

/* Active state for the small toggles (collapsed-by-default ON / stuck-to-bottom ON). */
.nav-action.on { color: var(--heading); background: var(--surface-sunken); }

/* The bottom drop zone is a visible, labelled target while editing. */
body.nav-editing .nav-tree-bottom {
  border-top: 1.5px dashed var(--heading); margin-top: 0.6rem; padding-top: 0.5rem; min-height: 42px;
}
body.nav-editing .nav-tree-bottom::before {
  content: "Stuck to bottom"; display: block; font-size: 0.7rem; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 0.3rem 0.2rem;
}

/* Default-view checkmark (builder only — .builder-edit-only): greyed until chosen,
   the theme's accent/selected color when set. */
.nav-view-default {
  border: none; background: none; cursor: pointer; flex: 0 0 auto;
  width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 6px;
  color: var(--text-faint); opacity: 0.4; line-height: 0;
}
.nav-view-default svg { width: 16px; height: 16px; display: block; }
.nav-view-default:hover { opacity: 0.75; }
.nav-view-default.on { opacity: 1; color: var(--accent); }

/* Catalog cards already present in the nav being edited: grayed out + flagged, no add. */
.widget-catalog-card.is-added { opacity: 0.45; cursor: not-allowed; }
.widget-catalog-card.is-added:hover { border-color: var(--border); box-shadow: none; }
.widget-catalog-card.is-added .widget-catalog-name::after {
  content: " · in nav"; color: var(--accent); font-weight: 600; font-size: 0.78rem;
}

/* --------------------------------------------------------------------------
   Staff Lifecycle (the staff record's HR tab) — token-based, incl. the app's
   first progress primitive (.progress / .progress-bar / .progress-label).
   -------------------------------------------------------------------------- */
.progress {
  flex: 1; min-width: 120px; height: 8px; border-radius: 999px;
  background: var(--surface-sunken); border: 1px solid var(--border);
  overflow: hidden;
}
.progress-bar { display: block; height: 100%; width: 0; background: var(--accent);
  border-radius: 999px; transition: width 0.25s ease; }
.progress-label { font-size: 0.82rem; color: var(--text-muted); white-space: nowrap;
  font-variant-numeric: tabular-nums; }

.lc-panel { display: flex; flex-direction: column; gap: 1rem; }
.lc-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.lc-tenure { display: flex; align-items: baseline; gap: 0.45rem; }
.lc-tenure-value { font-size: 1.05rem; font-weight: 650; color: var(--heading); }
.lc-emp-form { border-bottom: 1px solid var(--border-faint); padding-bottom: 0.85rem; }
.lc-actions { display: flex; gap: 0.75rem; align-items: flex-start; flex-wrap: wrap; }
.lc-start summary { cursor: pointer; list-style: none; display: inline-flex; }
.lc-start summary::-webkit-details-marker { display: none; }
.lc-start-form { margin-top: 0.6rem; padding: 0.75rem; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--surface-alt);
  display: flex; flex-direction: column; gap: 0.6rem; max-width: 30rem; }
.lc-levels { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }
.lc-progress-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.lc-run-label { font-weight: 650; color: var(--heading); }
.lc-chip { font-size: 0.78rem; border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 0.08rem 0.55rem; color: var(--text-muted); background: var(--surface-alt); }
.lc-section { border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; }
.lc-section-head { padding: 0.45rem 0.8rem; background: var(--surface-alt);
  border-bottom: 1px solid var(--border); font-size: 0.78rem; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
.lc-item { display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--border-faint); }
.lc-item:last-child { border-bottom: none; }
.lc-item.lc-done { background: var(--surface-sunken); }
.lc-item-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.lc-item-label { font-weight: 600; }
.lc-item-hint { font-size: 0.8rem; color: var(--text-muted); }
.lc-assignee { font-size: 0.78rem; color: var(--text-faint); }
.lc-value { max-width: 14rem; }
.lc-item-state { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
  flex-wrap: wrap; justify-content: flex-end; }
.lc-stamp { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem;
  color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lc-retired td { opacity: 0.55; }

/* --------------------------------------------------------------------------
   Modern shared presentation layer
   Incremental late overrides keep the legacy cascade stable while shared
   components converge on one token-driven visual language.
   -------------------------------------------------------------------------- */
body { line-height: 1.5; }
a { color: var(--accent); }

/* Application shell */
.topbar {
  min-height: var(--topbar-h);
  gap: var(--space-3);
  padding: .625rem clamp(1rem, 2.5vw, 1.75rem);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--topbar-edge) 75%, transparent);
}
.brand-cluster { display: flex; align-items: center; min-width: 0; gap: var(--space-2); }
.brand { color: var(--topbar-fg); font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.nav-indicator-badge { margin-left: 0; }
.user-nav { margin-left: auto; gap: var(--space-2); }
.nav-dropdown-btn {
  min-height: var(--control-height-sm);
  padding: .35rem .7rem;
  border-radius: var(--radius);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.nav-dropdown-menu {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-1);
}
.nav-dropdown-menu a,
.nav-dropdown-item { border-radius: var(--radius-sm); padding: .55rem .75rem; }
.layout-admin-mode .topbar { box-shadow: inset 0 -3px 0 var(--warning), 0 1px 0 var(--topbar-edge); }
.layout { min-width: 0; }
.sidebar {
  width: 248px;
  padding: var(--space-3) var(--space-2);
  background: var(--surface);
}
.sidebar nav { gap: 2px; }
.nav-link,
.nav-group-summary {
  border-radius: var(--radius);
  border-left-width: 3px;
  padding: .58rem .8rem;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.nav-link.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent); }
.nav-link.nav-sub { padding-left: 1.75rem; }
.nav-section { padding: 1rem .8rem .3rem; font-weight: 700; letter-spacing: .08em; }
.nav-group-summary::after { right: .7rem; color: var(--text-faint); }
.content {
  max-width: 1440px;
  padding: clamp(1rem, 2.2vw, 2rem) clamp(1rem, 2.8vw, 2.5rem) 2.5rem;
}
.account-settings { width: min(100%, 52rem); }
.auth-content { padding-block: clamp(1.5rem, 8vh, 4rem); }
.login-card { margin: 0 auto; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

/* Buttons and clickable controls */
.btn-primary,
.btn-light,
.btn-danger,
.btn-quiet,
.icon-btn,
.stepper-btn {
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}
.btn-primary,
.btn-light,
.btn-danger,
.btn-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: var(--control-height);
  padding: .45rem .85rem;
  border-radius: var(--radius);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn-primary { border: 1px solid var(--accent); box-shadow: 0 1px 1px color-mix(in srgb, var(--accent) 18%, transparent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-light {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.btn-light:hover:not(:disabled) { background: var(--surface-alt); border-color: color-mix(in srgb, var(--border-strong) 70%, var(--text-muted)); }
.btn-danger { background: var(--surface); color: var(--danger); border: 1px solid var(--danger-border); }
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 9%, var(--surface)); border-color: var(--danger); }
.btn-quiet { background: transparent; color: var(--text-muted); border: 1px solid transparent; }
.btn-quiet:hover:not(:disabled) { background: var(--surface-alt); color: var(--text); }
.btn-sm { min-height: var(--control-height-sm); padding: .32rem .65rem; font-size: .82rem; }
.icon-btn {
  width: var(--control-height-sm);
  height: var(--control-height-sm);
  min-width: var(--control-height-sm);
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: var(--radius);
}
.icon-btn:hover:not(:disabled) { background: var(--surface-alt); color: var(--text); border-color: var(--text-faint); }
.icon-btn-danger { color: var(--danger); border-color: var(--danger-border); }
.icon-btn-danger:hover:not(:disabled) { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--surface)); border-color: var(--danger); }
[aria-busy="true"].btn-primary,
[aria-busy="true"].btn-light { cursor: progress; opacity: .78; }

/* Form controls */
.field { gap: .38rem; }
.field label,
.field-label { color: var(--text-muted); font-size: .8125rem; font-weight: 650; line-height: 1.35; }
.field input,
.field select,
.field textarea,
.data-view-search,
.notes-search,
.stack input,
.stack textarea {
  border-color: var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 1px rgba(16, 24, 40, .03);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.field input:hover:not(:disabled):not([readonly]),
.field select:hover:not(:disabled),
.field textarea:hover:not(:disabled):not([readonly]) { border-color: var(--text-faint); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.data-view-search:focus-visible,
.notes-search:focus-visible,
.stack input:focus-visible,
.stack textarea:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--accent);
  box-shadow: none;
}
.field input[readonly],
.field select[disabled],
.field textarea[readonly] { box-shadow: none; }
.field :disabled:not(select),
.field select:disabled:not([data-readonly]) { opacity: var(--disabled-opacity); background: var(--surface-alt); }
input[type="checkbox"],
input[type="radio"] { accent-color: var(--accent); }
.checkbox-label,
.radio-label { min-height: 2rem; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.required-mark { font-weight: 750; }
.field-error { font-weight: 600; }
.has-error input,
.has-error select,
.has-error textarea,
[aria-invalid="true"] { border-color: var(--danger); }

/* Feedback, status, and empty states */
.feedback {
  border-radius: var(--radius-lg);
  border-left-width: 4px;
  box-shadow: var(--shadow-sm);
  line-height: 1.45;
}
.status-tag,
.prio-tag,
.sev-tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: .12rem .55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.2;
}
.status-neutral,
.status-draft,
.status-inactive,
.status-na,
.prio-low { color: var(--text-muted); background: var(--surface-sunken); border-color: var(--border); }
.status-submitted,
.status-new,
.status-onboarding,
.prio-medium { color: var(--info); background: var(--info-bg); border-color: var(--info-border); }
.status-approved,
.status-paid,
.status-completed,
.status-active { color: var(--success); background: var(--success-bg); border-color: var(--success-border); }
.status-in-review,
.status-in-progress,
.status-offboarding,
.prio-high { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); }
.status-denied,
.status-rejected,
.prio-urgent { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--surface)); border-color: var(--danger-border); }
.empty-state { padding: clamp(2rem, 6vw, 4rem); box-shadow: var(--shadow-sm); }
.empty-state-icon { display: inline-flex; margin-bottom: .75rem; color: var(--accent); }
.empty-state h2 { font-size: 1.15rem; }

/* Page headings */
.page-header { margin-bottom: 1.5rem; }
.page-header h1,
.data-view-title { font-size: clamp(1.55rem, 2vw, 1.9rem); letter-spacing: -.025em; }
.page-description { max-width: 70ch; line-height: 1.5; }

@media (max-width: 760px) {
  .sidebar { width: 100%; padding: .5rem; }
  .sidebar nav { gap: .125rem; }
  .nav-link, .nav-group-summary { padding: .55rem .7rem; }
  .topbar { align-items: flex-start; }
  .brand-cluster { min-height: var(--control-height-sm); }
  .user-nav { justify-content: flex-end; flex-wrap: wrap; }
  .content { padding: 1rem; }
  .btn-primary, .btn-light, .btn-danger, .btn-quiet, .icon-btn, .nav-dropdown-btn, .tab-btn { min-height: 44px; }
  .icon-btn { min-width: 44px; }
}
@media (max-width: 520px) {
  .topbar { position: relative; }
  .brand-cluster, .user-nav { width: 100%; }
  .user-nav { justify-content: flex-start; }
  .nav-dropdown { max-width: 100%; }
  .nav-dropdown-btn { max-width: 100%; }
}

/* Standard forms — Contact is the pilot; the same scaffold propagates the
   approved hierarchy to every document family without per-form duplication. */
.section-form { width: min(100%, 72rem); margin-top: 0; }
.section-form-rail { width: 100%; max-width: 99rem; }
.form-sections { gap: 1.25rem; }
.form-section {
  border-color: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.form-section-head {
  padding: .7rem 1rem;
  background: color-mix(in srgb, var(--surface-alt) 82%, var(--surface));
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .005em;
}
.form-section-body { padding: 1.15rem 1.25rem 1.25rem; }
.field-cols { gap: 1rem 2rem; }
.record-field .field-label { color: var(--text-faint); }
.record-field .field-ro { font-variant-numeric: tabular-nums; }
.workflow-panel {
  border-left: 4px solid var(--accent);
  padding: .8rem 1rem;
  box-shadow: var(--shadow-sm);
}
.workflow-panel-title { font-size: .875rem; }
.form-layout { align-items: start; }
.form-rail { align-self: start; }
.form-rail > .form-section {
  flex: 1 1 auto;
  background: color-mix(in srgb, var(--surface-alt) 45%, var(--surface));
  box-shadow: none;
}
.form-below .form-section { box-shadow: none; }
.form-below .form-section-head { background: var(--surface-alt); }
.form-header {
  top: calc(var(--app-header-h, var(--topbar-h)) + .5rem);
  z-index: calc(var(--z-sticky) - 10);
  padding: .65rem .75rem;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}
.form-header-title { font-size: 1.12rem; font-weight: 700; letter-spacing: -.015em; }
.form-header-back { border: 1px solid transparent; border-radius: var(--radius); }
.form-header-back:hover { border-color: var(--border); }
.form-action-footer { margin-top: 1.25rem; }
.pact-section .pact-row { border-radius: var(--radius); }
.pact-section .pact-row:hover { background: var(--row-hover); }

/* Standard views and tables */
.data-view-head { align-items: flex-start; margin-bottom: 1rem; }
.data-view-toolbar {
  align-items: center;
  min-height: 3.25rem;
  margin-bottom: .75rem;
  padding: .55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.data-view-left { row-gap: .5rem; }
.data-view-search { min-height: var(--control-height); padding: .45rem .7rem; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-muted);
}
.filter-chip-btn { transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.filter-facet-menu,
.view-new-menu { z-index: var(--z-dropdown); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.data-view-selected {
  border-radius: 999px;
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
  font-weight: 700;
}
.data-table-scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  scrollbar-gutter: stable;
}
.data-table-scroll:focus-visible { outline-offset: 3px; }
.data-table-scroll table.data { min-width: 42rem; margin-top: 0; border-radius: 0; box-shadow: none; }
table.data thead { position: sticky; top: 0; z-index: 2; }
table.data th { font-size: .76rem; letter-spacing: .035em; text-transform: uppercase; }
table.data td { vertical-align: middle; }
table.data .is-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.th-sort { color: inherit; text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.th-sort:hover,
.th-sort.active { color: var(--accent); text-decoration: underline; }
.data-row { transition: background var(--transition-fast); }
.data-row:focus-within { background: var(--row-hover); }
.row-actions .icon-btn { opacity: .68; }
.data-row:hover .row-actions .icon-btn,
.row-actions .icon-btn:focus-visible { opacity: 1; }
.data-view-pager {
  padding: .6rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.pager-jump,
.pager-size select { border-color: var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); }

@media (max-width: 760px) {
  .form-header { position: static; backdrop-filter: none; }
  .form-header-actions { justify-content: flex-start; overflow-x: auto; }
  .form-section-body { padding: 1rem; }
  .data-view-toolbar { align-items: stretch; flex-direction: column; }
  .data-view-left, .data-view-tools { width: 100%; }
  .data-view-tools { justify-content: flex-start; overflow-x: auto; padding-bottom: .15rem; }
  .data-view-search { width: 100%; min-width: 0; }
  .data-view-pager { align-items: flex-start; flex-direction: column; gap: .65rem; }
}

/* Dialog contract and secondary systems */
.modal::backdrop {
  background: var(--backdrop);
  backdrop-filter: blur(2px);
}
.app-dialog {
  width: min(92vw, 45rem);
  max-height: min(90dvh, 52rem);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.app-dialog .modal-head {
  align-items: flex-start;
  gap: 1rem;
  margin: 0;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}
.modal-title-group { flex: 1 1 auto; min-width: 0; }
.modal-title-group h2 { color: var(--heading); font-size: 1.08rem; line-height: 1.35; }
.modal-description { max-width: 65ch; margin: .25rem 0 0; color: var(--text-muted); font-size: .85rem; line-height: 1.4; }
.modal-close-form { flex: 0 0 auto; margin: 0; }
.app-dialog .modal-body { padding: 1rem; overflow-y: auto; overscroll-behavior: contain; }
.app-dialog .modal-body > :first-child { margin-top: 0; }
.app-dialog .modal-body > :last-child { margin-bottom: 0; }
.app-dialog .pk-foot {
  margin: 1.25rem -1rem -1rem;
  padding: .8rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
}
.confirm-modal { width: min(92vw, 29rem); }
.confirm-modal .confirm-input { min-height: var(--control-height); background: var(--surface); color: var(--text); }
.attach-viewer { width: min(92vw, 90rem); }
.assoc-modal { width: min(96vw, 82.5rem); }
.travel-modal { width: min(94vw, 48rem); }
.pact-dialog { width: min(94vw, 56rem); }

.form-below { display: flex; flex-direction: column; gap: 1rem; }
.form-below .form-section.section-standalone { margin-top: 0; }
.notes-header-bar { min-height: 2.6rem; }
.notes-header-controls { flex-wrap: wrap; justify-content: flex-end; }
.notes-empty,
.attach-empty,
.assoc-empty { color: var(--text-muted); font-style: normal; }

@media (max-width: 640px) {
  .app-dialog { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
  .app-dialog .modal-head { padding: .75rem; }
  .app-dialog .modal-body { padding: .75rem; }
  .app-dialog .pk-foot { margin: 1rem -.75rem -.75rem; padding: .75rem; flex-wrap: wrap; }
  .app-dialog .pk-foot > button { flex: 1 1 auto; }
  .notes-header-bar { align-items: flex-start; flex-direction: column; }
  .notes-header-controls { width: 100%; justify-content: flex-start; }
}

/* ===========================================================================
   ACCESSIBILITY DISPLAY PREFERENCES (account profile "Accessibility")
   <html> carries data-grayscale / data-invert / data-underline-links /
   data-highlight-links / data-readable-font only while the preference is on.
   Grayscale/Invert filter the top-level regions, NOT the page root: a filtered
   root becomes the containing block for position:fixed descendants, so pinned
   UI (skip link, confirm dialogs, drag helpers) would scroll away with the
   page. One shared selector list keeps the regions in step.
   =========================================================================== */
html[data-grayscale] .app-header-stack,
html[data-grayscale] .sidebar,
html[data-grayscale] main.content,
html[data-grayscale] main.auth-content,
html[data-grayscale] body > dialog { filter: grayscale(1); }
html[data-invert] .app-header-stack,
html[data-invert] .sidebar,
html[data-invert] main.content,
html[data-invert] main.auth-content,
html[data-invert] body > dialog { filter: invert(1) hue-rotate(180deg); }
html[data-grayscale][data-invert] .app-header-stack,
html[data-grayscale][data-invert] .sidebar,
html[data-grayscale][data-invert] main.content,
html[data-grayscale][data-invert] main.auth-content,
html[data-grayscale][data-invert] body > dialog { filter: grayscale(1) invert(1) hue-rotate(180deg); }
/* Photographic media reads normally under inversion (re-inverted in place). */
html[data-invert] img, html[data-invert] video, html[data-invert] canvas { filter: invert(1) hue-rotate(180deg); }
html[data-underline-links] a { text-decoration: underline; }
html[data-highlight-links] a { background: var(--link-highlight); }
html[data-readable-font] { --font-sans: Verdana, Tahoma, "DejaVu Sans", sans-serif; }
.checkbox-stack { display: grid; gap: .4rem; justify-items: start; }