/*
 * AZTCO Operations Theme
 * This is the final visual layer for both portal applications. Keep shared
 * layout, modal, field, button, and responsive decisions here.
 */

:root {
  --theme-ink: #102a28;
  --theme-ink-soft: #41605b;
  --theme-canvas: #f3f6f5;
  --theme-panel: #ffffff;
  --theme-panel-muted: #f8faf9;
  --theme-line: #dce5e2;
  --theme-line-strong: #bfd0ca;
  --theme-accent: #075f52;
  --theme-accent-hover: #03483f;
  --theme-accent-soft: #e8f2ef;
  --theme-navigation: #002623;
  --theme-focus: rgba(7, 95, 82, 0.16);
  --theme-danger: #b42318;
  --theme-dialog-width: 1120px;
  --theme-dialog-padding: 24px;
  --theme-field-height: 44px;
  --theme-radius: 8px;
  --theme-radius-sm: 6px;
  --theme-shadow: 0 28px 80px rgba(12, 38, 34, 0.22);
  --theme-on-accent: #fff;
  --theme-surface: #fff;
  --theme-surface-subtle: #f8faf9;
  --theme-primary-strong: #03483f;
  --theme-primary-muted: #41605b;

  /* Semantic status colors. Feature CSS must use these names instead of a
   * page-specific palette so any future theme can remap status presentation. */
  --theme-success: #15803d;
  --theme-warning: #b45309;
  --theme-danger: #b42318;
  --theme-info: #1d4ed8;
  --theme-status-info-bg: #eff6ff;
  --theme-status-warning-bg: #fffbeb;
  --theme-status-success-bg: #f0fdf4;
  --theme-status-danger-bg: #fef2f2;

  /* Full compatibility contract for the structural stylesheet. No color,
   * surface, elevation, or radius token is owned by app.css. */
  --primary-900: var(--theme-navigation);
  --primary-800: var(--theme-primary-strong);
  --primary-700: var(--theme-primary-muted);
  --accent-500: var(--theme-accent);
  --surface-50: var(--theme-canvas);
  --surface-100: color-mix(in srgb, var(--theme-canvas) 82%, var(--theme-panel));
  --surface-200: var(--theme-line);
  --surface-900: color-mix(in srgb, var(--theme-navigation) 82%, #000);
  --text-900: var(--theme-ink);
  --text-800: color-mix(in srgb, var(--theme-ink) 88%, var(--theme-panel));
  --text-700: var(--theme-ink-soft);
  --text-500: color-mix(in srgb, var(--theme-ink-soft) 72%, var(--theme-panel));
  --danger-600: var(--theme-danger);
  --danger-700: color-mix(in srgb, var(--theme-danger) 86%, #000);
  --success-600: var(--theme-success);
  --warning-600: var(--theme-warning);
  --shadow: 0 1px 3px color-mix(in srgb, var(--theme-ink) 7%, transparent), 0 0 0 1px color-mix(in srgb, var(--theme-line) 85%, transparent);
  --shadow-strong: 0 18px 48px color-mix(in srgb, var(--theme-navigation) 18%, transparent);
  --modal-shadow: var(--theme-shadow);
  --bg: var(--theme-canvas);
  --surface: var(--theme-panel);
  --surface-muted: var(--theme-panel-muted);
  --text: var(--theme-ink);
  --muted: var(--theme-ink-soft);
  --muted-2: var(--text-500);
  --line: var(--theme-line);
  --line-soft: color-mix(in srgb, var(--theme-line) 58%, transparent);
  --nav: var(--theme-navigation);
  --nav-2: var(--theme-primary-strong);
  --nav-text: color-mix(in srgb, var(--theme-on-accent) 78%, var(--theme-navigation));
  --nav-text-strong: var(--theme-on-accent);
  --nav-border: color-mix(in srgb, var(--theme-on-accent) 12%, transparent);
  --accent: var(--theme-accent);
  --radius: var(--theme-radius);
  --radius-sm: var(--theme-radius-sm);
  --radius-lg: calc(var(--theme-radius) + 2px);

}

body {
  background: var(--theme-canvas);
}

/* Standalone error surfaces use the same tokens as authenticated screens.
 * Error templates contain semantic markup only; all presentation lives here. */
.error-page {
  display: grid;
  min-height: 100svh;
  margin: 0;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 10%, var(--theme-accent-soft) 0, transparent 28rem),
    var(--theme-canvas);
  color: var(--theme-ink);
}
.error-page-card {
  width: min(650px, 100%);
  padding: clamp(28px, 6vw, 62px);
  border: 1px solid var(--theme-line);
  border-radius: calc(var(--theme-radius) * 3);
  background: color-mix(in srgb, var(--theme-panel) 92%, transparent);
  box-shadow: var(--theme-shadow);
  text-align: center;
}
.error-page-mark {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto 22px;
  place-items: center;
  border-radius: calc(var(--theme-radius) * 2);
  background: var(--theme-accent);
  color: var(--theme-on-accent);
  font-size: 1.55rem;
  font-weight: 850;
}
.error-page-code {
  margin: 0;
  color: var(--theme-accent);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.error-page-card h1 { margin: 10px 0 12px; font-size: clamp(1.8rem, 4vw, 2.7rem); letter-spacing: -.045em; }
.error-page-card > p:not(.error-page-code) { max-width: 470px; margin: 0 auto; color: var(--theme-ink-soft); font-size: 1rem; line-height: 1.65; }
.error-page-action {
  display: inline-flex;
  min-height: 44px;
  margin-top: 28px;
  padding: 0 18px;
  align-items: center;
  justify-content: center;
  border-radius: var(--theme-radius-sm);
  background: var(--theme-accent);
  box-shadow: 0 8px 18px var(--theme-focus);
  color: var(--theme-on-accent);
  font-weight: 800;
  text-decoration: none;
}
.error-page-action:hover { background: var(--theme-accent-hover); }
.error-page-card small { display: block; margin-top: 20px; color: var(--theme-ink-soft); font-size: .75rem; }

/* Cross-application responsive baseline. These rules are intentionally
 * component-agnostic so every existing form, modal, table and PWA screen gets
 * the same safe-area, touch-target and overflow behavior. */
html { min-height: 100%; }
body { min-width: 320px; min-height: 100svh; overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: none; }
.content, .client-content, .panel, .module-hero, .page-tab-shell, .table-wrap, .modal-card, .modal-form, .form-grid, .query-controls { min-width: 0; }
.table-wrap { max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; }

/* Persistent signed-in header shared by both portal applications. */
.content {
  grid-template-columns: minmax(0, 1fr);
  padding-top: 16px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  min-height: 70px;
  margin-bottom: 18px;
  padding: 12px 16px 12px 20px;
  border-color: var(--theme-line);
  border-radius: var(--theme-radius);
  box-shadow: 0 10px 26px rgba(12, 38, 34, 0.08);
}

.topbar h2 {
  color: var(--theme-ink);
}

.branding-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 14px;
}

.brand-color-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius);
  background: var(--theme-panel-muted);
}

.brand-color-field > span { grid-column: 1 / -1; font-weight: 800; }
.brand-color-field input[type="color"] { width: 48px; height: 40px; padding: 3px; border: 1px solid var(--theme-line-strong); border-radius: 8px; background: #fff; cursor: pointer; }
.currency-input { text-transform: uppercase; }
.brand-color-field code { min-width: 0; color: var(--theme-ink-soft); font-size: .75rem; text-align: right; }
.email-reference-setting { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, .8fr); gap: 1.25rem; align-items: center; margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid color-mix(in srgb, var(--theme-primary) 24%, var(--theme-line)); border-radius: var(--theme-radius); background: color-mix(in srgb, var(--theme-primary) 4%, var(--theme-panel)); }
.email-reference-setting > div, .email-reference-setting label { min-width: 0; }
.email-reference-setting h4 { margin: .15rem 0; color: var(--theme-ink); font-size: .96rem; }
.email-reference-setting p:not(.eyebrow) { margin: 0; color: var(--theme-ink-soft); font-size: .78rem; font-weight: 650; line-height: 1.45; }
.email-reference-setting label { display: grid; gap: .42rem; }
.email-reference-setting label > span { color: var(--theme-ink); font-size: .76rem; font-weight: 800; }
.email-reference-setting small { color: var(--theme-ink-soft); font-size: .73rem; font-weight: 650; }
.email-reference-setting output { color: var(--theme-primary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; overflow-wrap: anywhere; }
.branding-logo-row { display: grid; grid-template-columns: 72px minmax(220px, 1fr) minmax(220px, 1fr); gap: 16px; align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--theme-line); }
.branding-logo-preview { display: grid; width: 64px; height: 64px; place-items: center; overflow: hidden; border: 1px solid var(--theme-line-strong); border-radius: 12px; background: var(--theme-accent-soft); color: var(--theme-accent); font-family: "Space Grotesk", sans-serif; font-size: 1.4rem; font-weight: 700; }
.branding-logo-preview img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.branding-logo-row label small { display: block; margin-top: 6px; color: var(--theme-ink-soft); }

/* Tenant administration — Branding studio
 * Keep the visual system concise: brand identity first, then colors, then
 * the operational defaults that affect the whole tenant. */
.branding-studio { display: grid; gap: 18px; padding: clamp(18px, 3vw, 30px); overflow: hidden; }
.branding-studio-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--theme-line); }
.branding-studio-head h3 { margin: 3px 0 7px; }
.branding-studio-head > div > p:last-child { max-width: 65ch; margin: 0; color: var(--theme-ink-soft); line-height: 1.55; }
.branding-studio-badge { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; min-height: 32px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--theme-primary) 24%, var(--theme-line)); border-radius: 999px; background: var(--theme-accent-soft); color: var(--theme-accent); font-size: .76rem; font-weight: 800; white-space: nowrap; }
.branding-studio-badge svg { width: 15px; height: 15px; }
.branding-identity-card { display: grid; grid-template-columns: 72px minmax(180px, .8fr) minmax(230px, 1.2fr) minmax(190px, .75fr); align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--theme-line); border-radius: calc(var(--theme-radius) + 2px); background: linear-gradient(120deg, color-mix(in srgb, var(--theme-accent-soft) 62%, var(--theme-panel)), var(--theme-panel) 50%); }
.branding-identity-card .branding-logo-preview { width: 68px; height: 68px; border-radius: 16px; box-shadow: 0 8px 18px color-mix(in srgb, var(--theme-ink) 10%, transparent); }
.branding-identity-copy { min-width: 0; }
.branding-identity-copy h4, .branding-section h4 { margin: 2px 0 5px; color: var(--theme-ink); font-size: 1rem; }
.branding-identity-copy p:last-child, .branding-section header p:last-child { margin: 0; color: var(--theme-ink-soft); font-size: .82rem; font-weight: 600; line-height: 1.45; }
.branding-logo-upload { display: grid; min-width: 0; gap: 7px; }
.branding-logo-upload > span { color: var(--theme-ink); font-size: .78rem; font-weight: 800; }
.branding-logo-upload input[type="file"] { min-width: 0; max-width: 100%; padding: 8px; border: 1px dashed var(--theme-line-strong); border-radius: 10px; background: var(--theme-panel); color: var(--theme-ink-soft); }
.branding-logo-upload small { color: var(--theme-ink-soft); font-size: .72rem; font-weight: 650; }
.branding-remove-logo { min-height: 68px; align-content: center; }
.branding-section { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--theme-line); border-radius: calc(var(--theme-radius) + 2px); background: var(--theme-panel); }
.branding-section > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.branding-color-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.branding-operations { background: var(--theme-panel-muted); }
.branding-operations-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.branding-operations-grid .toggle-field { min-height: 100%; }
.branding-studio .email-reference-setting { margin-top: 0; }

@media (max-width: 1080px) {
  .branding-identity-card { grid-template-columns: 72px minmax(0, 1fr) minmax(230px, 1fr); }
  .branding-remove-logo { grid-column: 2 / -1; }
  .branding-operations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .branding-settings-grid { grid-template-columns: 1fr; }
  .email-reference-setting { grid-template-columns: 1fr; }
  .branding-logo-row { grid-template-columns: 64px minmax(0, 1fr); }
  .branding-logo-row .toggle-field { grid-column: 1 / -1; }
  .branding-studio { gap: 14px; padding: 15px; }
  .branding-studio-head { display: grid; gap: 10px; }
  .branding-studio-badge { justify-self: start; }
  .branding-identity-card { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .branding-identity-card .branding-logo-preview { width: 60px; height: 60px; }
  .branding-logo-upload, .branding-remove-logo { grid-column: 1 / -1; }
  .branding-section { padding: 15px; }
  .branding-color-grid, .branding-operations-grid { grid-template-columns: 1fr; }
}

.topbar p {
  color: var(--theme-ink-soft);
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  gap: 10px;
  min-width: 0;
}

.client-scope-switcher {
  display: grid;
  gap: 3px;
  min-width: 190px;
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.client-scope-switcher select {
  min-height: 38px;
  padding: 7px 34px 7px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

.portal-additional-client-access {
  display: grid;
  gap: 14px;
}

.additional-client-access-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
}

.additional-client-access-card .permission-builder-head > label {
  display: grid;
  gap: 5px;
  min-width: min(100%, 340px);
}

@media (max-width: 720px) {
  .client-scope-switcher { min-width: 0; width: 100%; }
  .client-scope-switcher select { width: 100%; }
}

.topbar-signed-user {
  display: grid;
  min-width: 0;
  gap: 1px;
  text-align: right;
}

.topbar-signed-user strong,
.topbar-signed-user span {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-signed-user strong {
  color: var(--theme-ink);
  font-size: 0.8rem;
  font-weight: 800;
}

.topbar-signed-user span {
  color: var(--theme-ink-soft);
  font-size: 0.72rem;
}

.profile-menu {
  position: relative;
  display: flex;
  flex: 0 0 auto;
}

.profile-menu-trigger[aria-expanded="true"] {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

.profile-menu-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 190;
  width: min(340px, calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid var(--theme-line-strong);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 42px rgb(17 47 42 / 18%);
  transform-origin: top right;
  animation: profile-menu-enter 140ms ease-out;
}

.profile-menu-popover[hidden] {
  display: none;
}

.profile-menu-identity {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--theme-line);
  background: linear-gradient(135deg, #f8fcfa 0%, #f1f8f5 100%);
}

.profile-menu-avatar {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--theme-accent);
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

.profile-menu-identity > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.profile-menu-eyebrow {
  color: var(--theme-accent);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.profile-menu-identity strong,
.profile-menu-identity > div > span:last-child {
  overflow: hidden;
  color: var(--theme-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-menu-identity strong {
  font-size: .88rem;
  font-weight: 800;
}

.profile-menu-identity > div > span:last-child {
  color: var(--theme-ink-soft);
  font-size: .74rem;
}

.profile-menu-actions {
  padding: 6px;
}

.profile-menu-actions > :is(button, a) {
  display: grid;
  width: 100%;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--theme-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.profile-menu-actions > :is(button, a):hover,
.profile-menu-actions > :is(button, a):focus-visible {
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
  outline: none;
}

.profile-menu-actions svg {
  width: 18px;
  height: 18px;
}

.profile-menu-actions span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.profile-menu-actions strong {
  font-size: .82rem;
  font-weight: 800;
}

.profile-menu-actions small {
  color: var(--theme-ink-soft);
  font-size: .7rem;
  line-height: 1.35;
}

@keyframes profile-menu-enter {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.topbar-icon-action {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  padding: 0;
  border: 1px solid var(--theme-line-strong);
  border-radius: var(--theme-radius-sm);
  background: #fff;
  color: var(--theme-ink);
  text-decoration: none;
  cursor: pointer;
}

.topbar-icon-action:hover,
.topbar-icon-action:focus-visible {
  border-color: #8eafa5;
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
  outline: none;
}

.topbar-icon-action svg {
  width: 19px;
  height: 19px;
}

.topbar-icon-action.signout-action:hover,
.topbar-icon-action.signout-action:focus-visible {
  border-color: #e2b4ad;
  background: #fff1ef;
  color: var(--theme-danger);
}

.topbar-icon-action[data-tooltip]::after {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 100;
  width: max-content;
  max-width: 180px;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--theme-ink);
  color: #fff;
  content: attr(data-tooltip);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.topbar-icon-action[data-tooltip]:hover::after,
.topbar-icon-action[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.notification-menu {
  position: relative;
  display: flex;
}

.notification-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--theme-danger);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1;
}

.notification-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 120;
  width: min(390px, calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius);
  background: var(--theme-panel);
  box-shadow: 0 18px 42px rgba(12, 38, 34, 0.18);
}

.notification-popover[hidden] {
  display: none;
}

.notification-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--theme-line);
  background: var(--theme-panel-muted);
}

.notification-popover-head > div {
  display: grid;
  gap: 2px;
}

.notification-popover-head strong {
  color: var(--theme-ink);
  font-size: 0.86rem;
}

.notification-popover-head span {
  color: var(--theme-ink-soft);
  font-size: 0.72rem;
}

.notification-all-link {
  color: var(--theme-accent);
  font-size: 0.76rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.notification-all-link:hover,
.notification-all-link:focus-visible {
  color: var(--theme-accent-hover);
  text-decoration: underline;
}

.notification-list {
  max-height: min(440px, calc(100vh - 150px));
  overflow-y: auto;
}

.notification-item {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid var(--theme-line);
  background: #fff;
  color: var(--theme-ink);
  cursor: pointer;
  text-align: left;
}

.notification-item:hover,
.notification-item:focus-visible {
  background: var(--theme-accent-soft);
  outline: none;
}

.notification-item strong {
  font-size: 0.8rem;
  line-height: 1.35;
}

.notification-item span {
  color: var(--theme-ink-soft);
  font-size: 0.7rem;
  text-transform: capitalize;
}

.notification-empty {
  margin: 0;
  padding: 24px 16px;
  color: var(--theme-ink-soft);
  font-size: 0.8rem;
  text-align: center;
}

.dashboard-tasks {
  margin-top: 18px;
}

.dashboard-tasks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--theme-line);
}

.dashboard-tasks-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--theme-ink);
  font-size: 0.95rem;
}

.dashboard-tasks-head h3 svg {
  width: 18px;
  color: var(--theme-accent);
}

.dashboard-tasks-head p {
  margin: 5px 0 0;
  color: var(--theme-ink-soft);
  font-size: 0.78rem;
}

.dashboard-task-list {
  display: grid;
}

.dashboard-task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--theme-line);
  color: var(--theme-ink);
  text-decoration: none;
}

.dashboard-task-item:last-child {
  border-bottom: 0;
}

.dashboard-task-item:hover,
.dashboard-task-item:focus-visible {
  color: var(--theme-accent);
  outline: none;
}

.dashboard-task-item > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.dashboard-task-item strong {
  overflow: hidden;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-task-item small {
  color: var(--theme-ink-soft);
  font-size: 0.7rem;
  text-transform: capitalize;
}

.dashboard-task-item > svg {
  width: 17px;
  flex: 0 0 auto;
}

.dashboard-task-empty {
  margin: 0;
  padding: 20px 0 4px;
  color: var(--theme-ink-soft);
  font-size: 0.8rem;
}

/* Dialog shell */
.modal-overlay {
  z-index: 200;
  place-items: center;
  padding: 28px;
  background: rgba(7, 28, 25, 0.66);
  backdrop-filter: blur(10px);
}

.modal-card,
.client-modal-card,
.contact-modal-card,
.client-editor-card,
.inventory-modal-card,
.purchase-modal-card,
.kb-modal-card,
.structure-modal-card,
.agent-modal-card,
.document-modal-card {
  width: min(var(--theme-dialog-width), calc(100vw - 56px));
  max-height: calc(100svh - 56px);
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius);
  background: var(--theme-panel);
  box-shadow: var(--theme-shadow);
}

/* Every editor uses the same resilient three-part dialog frame: the title and
 * actions stay visible while only the form body scrolls. */
.modal-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.ticket-editor-card,
.ticket-detail-card {
  width: min(1240px, calc(100vw - 56px));
  max-height: calc(100svh - 56px);
}

.ticket-detail-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}

/* Ticket panes scroll inside the dialog rather than expanding beyond it. */
.ticket-detail-layout { min-height: 0; overflow: hidden; }
.ticket-reply-panel { min-height: 0; overflow: auto; overscroll-behavior: contain; padding-inline-end: 4px; }
.ticket-thread-panel { min-height: 0; overscroll-behavior: contain; }

.record-modal-card {
  width: min(820px, calc(100vw - 56px));
}

/* Shared read-only record inspector.  It deliberately uses the same dialog
 * shell as editors, while rendering information as a compact definition list
 * that remains legible for long text and narrow screens. */
.record-detail-modal-card { width: min(900px, calc(100vw - 40px)); }
.record-detail-content { min-height: 0; overflow: auto; padding: 6px var(--theme-dialog-padding) var(--theme-dialog-padding); background: var(--theme-canvas); }
.record-detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 0; }
.record-detail-row { display: grid; grid-template-columns: minmax(132px, .7fr) minmax(0, 1.3fr); gap: 14px; align-items: start; min-width: 0; padding: 15px 0; border-bottom: 1px solid var(--theme-line); }
.record-detail-row dt { color: var(--theme-ink-soft); font-size: .72rem; font-weight: 800; letter-spacing: .02em; }
.record-detail-row dd { min-width: 0; margin: 0; color: var(--theme-ink); font-size: .81rem; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.record-detail-row dd.is-multiline { white-space: pre-wrap; font-weight: 600; }
.record-detail-rich-text { font-weight: 500; line-height: 1.72; color: var(--theme-ink); }
.record-detail-rich-text > :first-child { margin-top: 0; }
.record-detail-rich-text > :last-child { margin-bottom: 0; }
.record-detail-rich-text :is(h2, h3, h4) { margin: 1.2em 0 .45em; color: var(--theme-ink); font-size: 1em; line-height: 1.3; }
.record-detail-rich-text p { margin: .55em 0; }
.record-detail-rich-text :is(ul, ol) { margin: .65em 0; padding-inline-start: 1.35rem; }
.record-detail-rich-text blockquote { margin: .8em 0; padding: .65rem .85rem; border-inline-start: 3px solid var(--theme-accent); background: var(--theme-accent-soft); color: var(--theme-ink-soft); }
.record-detail-rich-text pre { max-width: 100%; overflow: auto; padding: .8rem; border: 1px solid var(--theme-line); border-radius: .6rem; background: var(--theme-canvas); font: .78rem/1.5 var(--font-mono, ui-monospace, monospace); }
.record-detail-rich-text table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.record-detail-rich-text :is(th, td) { min-width: 7rem; padding: .48rem .58rem; border: 1px solid var(--theme-line); text-align: start; }
.record-detail-rich-text th { background: var(--theme-accent-soft); font-weight: 800; }
.record-detail-rich-text a { color: var(--theme-accent); font-weight: 750; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.record-detail-rich-text hr { margin: 1.1rem 0; border: 0; border-top: 1px solid var(--theme-line); }
.record-detail-empty { margin: 0; color: var(--theme-ink-soft); font-style: italic; font-weight: 600; }
.record-detail-value-actions { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.record-detail-value-text { min-width: 0; overflow-wrap: anywhere; transition: color .16s ease, letter-spacing .16s ease; }
.record-detail-value-text.is-masked { letter-spacing: .13em; font-variant-numeric: tabular-nums; }
.record-detail-value-actions.is-revealed .record-detail-value-text { color: var(--theme-accent); }
.record-detail-value-controls { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; }
.record-detail-value-button { display: inline-grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 1px solid var(--theme-line); border-radius: 8px; background: var(--theme-panel); color: var(--theme-ink-soft); cursor: pointer; transition: transform .16s ease, color .16s ease, border-color .16s ease, background .16s ease; }
.record-detail-value-button:hover, .record-detail-value-button:focus-visible, .record-detail-value-button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--theme-accent) 32%, var(--theme-line)); background: var(--theme-accent-soft); color: var(--theme-accent); outline: 0; }
.record-detail-value-button:active { transform: scale(.92); }
.record-detail-value-button svg { width: 14px; height: 14px; stroke-width: 2.2; }
.record-detail-footer { justify-content: flex-end; }
.record-detail-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }
@media (max-width: 640px) { .record-detail-actions { inline-size: 100%; margin-inline-start: 0; } .record-detail-actions .btn { flex: 1 1 180px; } }
.record-inspector-row { cursor: pointer; }
.record-inspector-row:hover > td { background: color-mix(in srgb, var(--theme-accent-soft) 42%, transparent); }
.record-inspector-row:focus-within > td { background: color-mix(in srgb, var(--theme-accent-soft) 60%, transparent); }
@media (max-width: 760px) {
  .record-detail-modal-card { width: min(100vw - 20px, 900px); }
  .record-detail-list { grid-template-columns: minmax(0, 1fr); }
  .record-detail-row { grid-template-columns: minmax(110px, .55fr) minmax(0, 1.45fr); }
}

.modal-header {
  min-height: 76px;
  padding: 18px var(--theme-dialog-padding);
  border-bottom-color: var(--theme-line);
  background: var(--theme-panel);
}

.modal-header h3 {
  color: var(--theme-ink);
  font-size: 1.1rem;
  line-height: 1.2;
}

.modal-header p {
  max-width: 780px;
  margin-top: 5px;
  color: var(--theme-ink-soft);
  font-size: 0.8rem;
  line-height: 1.45;
}

.modal-header .icon-button {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-color: var(--theme-line);
  border-radius: var(--theme-radius-sm);
  color: var(--theme-ink);
}

.modal-header .icon-button:hover {
  background: var(--theme-accent-soft);
  border-color: var(--theme-line-strong);
}

.modal-form,
.client-editor-form,
.contact-editor-form,
.structure-form,
.kb-form,
.purchase-form,
.agent-form,
.inventory-form,
.document-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: var(--theme-dialog-padding);
  background: var(--theme-canvas);
  min-height: 0;
  overflow: auto;
  align-content: start;
}

.modal-footer {
  min-height: 72px;
  padding: 14px var(--theme-dialog-padding);
  border-top-color: var(--theme-line);
  background: var(--theme-panel);
}

.modal-footer .btn {
  min-height: 42px;
  padding: 0 15px;
  border-radius: var(--theme-radius-sm);
}

.modal-form .form-grid,
.modal-form .form-grid-2,
.modal-form .form-grid-3,
.modal-form .form-grid-4 {
  align-items: start;
}

.modal-form label > input,
.modal-form label > select,
.modal-form label > textarea,
.modal-form label > .multi-select-shell,
.modal-form .password-action-field {
  width: 100%;
  min-width: 0;
}

/* Knowledge Base rich-content editor */
.kb-editor-field {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.kb-editor-label-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.kb-editor-label-row .field-label {
  color: var(--theme-ink);
  font-size: 0.86rem;
  font-weight: 700;
}

.kb-editor-label-row p {
  margin: 4px 0 0;
  color: var(--theme-ink-soft);
  font-size: 0.78rem;
  line-height: 1.45;
}

.kb-editor-status {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  color: var(--theme-ink-soft);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.kb-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius-sm);
  background: var(--theme-canvas);
}

.kb-editor-toolbar button {
  display: inline-grid;
  width: 33px;
  height: 33px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--theme-ink-soft);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.kb-editor-toolbar button:hover,
.kb-editor-toolbar button:focus-visible {
  border-color: var(--theme-line-strong);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
  outline: none;
  transform: translateY(-1px);
}

.kb-editor-toolbar button svg {
  width: 16px;
  height: 16px;
}

.kb-editor-divider {
  width: 1px;
  height: 22px;
  margin: 0 2px;
  background: var(--theme-line);
}

.kb-rich-editor {
  min-height: 300px;
  padding: 18px 20px;
  overflow: auto;
  border: 1px solid var(--theme-line-strong);
  border-radius: var(--theme-radius-sm);
  background: var(--theme-panel);
  color: var(--theme-ink);
  font-size: 0.92rem;
  line-height: 1.72;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.kb-rich-editor:focus {
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 3px var(--theme-accent-soft);
}

.kb-rich-editor:empty::before {
  color: var(--theme-ink-soft);
  content: attr(data-placeholder);
  pointer-events: none;
}

.kb-rich-editor :is(h2, h3, h4) {
  margin: 1.35em 0 0.45em;
  color: var(--theme-ink);
  font-family: "Space Grotesk", sans-serif;
  line-height: 1.25;
}

.kb-rich-editor h2 { font-size: 1.35rem; }
.kb-rich-editor h3 { font-size: 1.12rem; }
.kb-rich-editor h4 { font-size: 1rem; }
.kb-rich-editor p { margin: 0 0 0.85em; }
.kb-rich-editor :is(ul, ol) { margin: 0.35em 0 1em; padding-left: 1.45rem; }
.kb-rich-editor li + li { margin-top: 0.3em; }
.kb-rich-editor blockquote { margin: 1em 0; padding: 0.7em 1em; border-left: 3px solid var(--theme-accent); background: var(--theme-accent-soft); color: var(--theme-ink-soft); }
.kb-rich-editor pre { margin: 1em 0; padding: 14px; overflow-x: auto; border-radius: 8px; background: #102c29; color: #ecf6f3; font: 0.82rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.kb-rich-editor table { width: 100%; margin: 1em 0; border-collapse: collapse; }
.kb-rich-editor :is(th, td) { min-width: 110px; padding: 9px 11px; border: 1px solid var(--theme-line); text-align: left; vertical-align: top; }
.kb-rich-editor th { background: var(--theme-canvas); color: var(--theme-ink); font-weight: 700; }
.kb-rich-editor a { color: var(--theme-accent); text-decoration: underline; }

/* Shared editor sections. This mirrors the Contact form composition. */
.modal-form .form-section,
.client-editor-form .form-section,
.contact-editor-form .form-section,
.structure-form .form-section,
.kb-form .form-section,
.purchase-form .form-section,
.agent-form .form-section,
.inventory-form .form-section,
.document-form .form-section,
.compact-modal-form .form-section,
.record-editor-form .form-section {
  display: grid;
  min-width: 0;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius);
  background: var(--theme-panel);
}

.modal-form .form-section-main {
  border-top: 3px solid var(--theme-accent);
}

.modal-form .form-section-head,
.modal-form .form-section-title {
  min-height: 42px;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--theme-line);
}

.modal-form .form-section-head h4,
.modal-form .form-section-title > span {
  color: var(--theme-ink);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.35;
}

.modal-form .form-section-head p,
.modal-form .form-section-title p {
  max-width: 660px;
  color: var(--theme-ink-soft);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
}

/* Fields */
.modal-form label {
  gap: 7px;
  color: var(--theme-ink-soft);
  font-size: 0.76rem;
  font-weight: 800;
}

.modal-form [hidden] {
  display: none !important;
}

.modal-form input,
.modal-form select,
.modal-form textarea {
  box-sizing: border-box;
  min-height: var(--theme-field-height);
  border-color: var(--theme-line-strong);
  border-radius: var(--theme-radius-sm);
  background: #fff;
  color: var(--theme-ink);
  font-size: 0.88rem;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.modal-form textarea {
  min-height: 116px;
  line-height: 1.5;
}

.modal-form input::placeholder,
.modal-form textarea::placeholder {
  color: #80918d;
}

.modal-form input:hover,
.modal-form select:hover,
.modal-form textarea:hover {
  border-color: #96aea7;
}

.modal-form input:focus,
.modal-form select:focus,
.modal-form textarea:focus {
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 3px var(--theme-focus);
}

.modal-form select[multiple] {
  min-height: 166px;
  padding: 7px;
}

.modal-form select[multiple] option {
  padding: 8px 9px;
  border-radius: 4px;
}

.form-grid {
  gap: 14px;
  align-items: end;
}

.form-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.form-grid-3,
.agent-form .form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid > label,
.form-grid > .form-help,
.form-grid > .ticket-requester-match {
  min-width: 0;
}

.form-grid > .wide-field,
.modal-form .wide-field {
  grid-column: 1 / -1;
}

.field-span-2 {
  grid-column: span 2;
}

.field-span-4 {
  grid-column: 1 / -1;
}

/* Purchase renewal is a single decision: enable it, then choose its date.
   Keep both controls on one calm baseline instead of allowing the date to
   jump to an unrelated grid row. */
.purchase-totals { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
.purchase-total-item { min-width: min(220px, 100%); padding: 14px 18px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); background: var(--theme-panel); }
.purchase-total-item span { display: block; color: var(--theme-ink-soft); font-size: .78rem; font-weight: 700; }
.purchase-total-item strong { display: block; margin-top: 5px; color: var(--theme-ink); font-size: 1.1rem; }
.purchase-grouped-totals { margin-bottom: 16px; }
.purchase-grouped-totals > summary { cursor: pointer; font-weight: 800; }
.purchase-grouped-totals > label { display: grid; gap: 6px; width: min(280px, 100%); margin: 16px 0; }
.purchase-linked-documents { display: grid; gap: 7px; }
.purchase-linked-document { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); }
.purchase-linked-document > a:first-child { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.purchase-linked-document > button { border: 0; background: none; color: var(--theme-ink-soft); cursor: pointer; }
.purchase-linked-document > button:hover { color: var(--theme-danger); }
.purchase-document-link { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: .78rem; overflow-wrap: anywhere; }
.purchase-document-link svg { flex: none; width: 14px; height: 14px; }
.purchase-renewal-control {
  display: grid;
  grid-template-columns: minmax(12rem, .9fr) minmax(15rem, 1.1fr);
  align-items: end;
  gap: var(--theme-space-3, 12px);
  min-width: 0;
}

.purchase-renewal-control > .check-field {
  align-self: end;
}

.purchase-renewal-control > label:not(.check-field) {
  min-width: 0;
}

.purchase-renewal-control > label[hidden] {
  display: none;
}

.check-field,
.switch-field {
  min-height: var(--theme-field-height) !important;
  margin: 0;
  padding: 0 2px !important;
  color: var(--theme-ink) !important;
}

.switch-field {
  padding: 0 12px !important;
  border-color: var(--theme-line-strong);
  border-radius: 999px;
  background: var(--theme-panel-muted);
}

.check-field input,
.switch-field input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  accent-color: var(--theme-accent);
}

.form-help,
.ticket-requester-match {
  border-color: var(--theme-line) !important;
  border-radius: var(--theme-radius-sm) !important;
  background: var(--theme-panel-muted) !important;
  color: var(--theme-ink-soft) !important;
}

/* Requester lookup is an explicit, permission-aware contact picker rather
   than a browser datalist. It remains anchored to the typed field, works on
   touch devices, and keeps protected phone values out of the DOM. */
.requester-combobox { position: relative; z-index: 8; }
.requester-combobox-control { position: relative; display: block; min-width: 0; }
.requester-combobox-control > input { width: 100%; }
.requester-suggestion-list {
  position: absolute;
  z-index: 80;
  inset: calc(100% + 7px) 0 auto;
  display: grid;
  max-height: min(18rem, 38svh);
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--theme-line-strong);
  border-radius: var(--theme-radius-sm);
  background: var(--theme-panel);
  box-shadow: 0 16px 32px color-mix(in srgb, var(--theme-ink) 18%, transparent);
}
.requester-suggestion-list[hidden] { display: none; }
.requester-suggestion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  border: 0;
  border-radius: calc(var(--theme-radius-sm) - 2px);
  color: var(--theme-ink);
  background: transparent;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.requester-suggestion > span { display: grid; min-width: 0; gap: 2px; }
.requester-suggestion strong,
.requester-suggestion small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.requester-suggestion strong { font-size: .9rem; }
.requester-suggestion small { color: var(--theme-ink-soft); font-size: .78rem; font-weight: 650; }
.requester-suggestion svg { width: 17px; height: 17px; color: var(--theme-accent); }
.requester-suggestion:hover,
.requester-suggestion:focus-visible,
.requester-suggestion[aria-selected="true"] { outline: 0; background: var(--theme-accent-soft); }

@media (max-width: 760px) {
  .requester-suggestion-list { max-height: min(15rem, 32svh); }
}

/* Shared supporting controls in dynamic and repeatable editors. */
.repeatable-section,
.portal-permission-builder,
.structure-manual-permissions {
  gap: 12px;
}

.repeatable-row,
.permission-row {
  padding: 14px;
  border-color: var(--theme-line);
  border-radius: var(--theme-radius);
  background: var(--theme-panel-muted);
}

.repeatable-head,
.permission-builder-head {
  color: var(--theme-ink);
}

.password-control-field {
  grid-template-columns: minmax(0, 1fr) 42px 42px;
}

.password-control-field .icon-button,
.location-picker-control .icon-button,
.rich-editor-toolbar button {
  border-color: var(--theme-line-strong);
  border-radius: var(--theme-radius-sm);
  color: var(--theme-accent);
}

.portal-users-layout,
.contact-source-layout {
  gap: 18px;
  padding: var(--theme-dialog-padding);
  background: var(--theme-canvas);
}

.portal-users-layout .modal-form,
.contact-source-layout .contact-editor-form {
  padding: 0;
  background: transparent;
}

/* Actions */
.modal-footer .btn:not(.btn-secondary),
.modal-actions-row .btn:not(.btn-secondary) {
  background: var(--theme-accent);
}

.modal-footer .btn:not(.btn-secondary):hover,
.modal-actions-row .btn:not(.btn-secondary):hover {
  background: var(--theme-accent-hover);
}

.modal-footer .btn-secondary,
.modal-actions-row .btn-secondary {
  border-color: var(--theme-line-strong);
  background: #fff;
  color: var(--theme-ink);
}

.modal-footer .btn-secondary:hover,
.modal-actions-row .btn-secondary:hover {
  background: var(--theme-accent-soft);
  border-color: #93b5aa;
}

/* Ticket activity timeline */
.ticket-detail-layout {
  grid-template-columns: minmax(0, 1fr) minmax(330px, 400px);
  gap: 18px;
  padding: 22px;
  background: var(--theme-canvas);
}

.ticket-thread-panel,
.ticket-reply-panel {
  min-width: 0;
  border-color: var(--theme-line);
  border-radius: var(--theme-radius);
  background: var(--theme-panel);
}

.ticket-thread {
  position: relative;
  gap: 0;
  padding: 22px;
}

.ticket-timeline-event {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.ticket-timeline-rail {
  position: relative;
  display: flex;
  justify-content: center;
}

.ticket-timeline-event:not(:last-child) .ticket-timeline-rail::after {
  content: "";
  position: absolute;
  top: 34px;
  bottom: -14px;
  width: 1px;
  background: var(--theme-line);
}

.ticket-timeline-dot {
  z-index: 1;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #a4c6bb;
  border-radius: 50%;
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

.ticket-timeline-dot svg {
  width: 14px;
  height: 14px;
}

.ticket-timeline-card {
  min-width: 0;
  margin-bottom: 16px;
  padding: 15px 16px;
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius);
  background: #fff;
}

.ticket-timeline-event.is-internal .ticket-timeline-dot {
  border-color: #d8b277;
  background: #fff8e8;
  color: #9a6700;
}

.ticket-timeline-event.is-internal .ticket-timeline-card {
  border-color: #ead5aa;
  background: #fffdf8;
}

.ticket-timeline-event.ticket-timeline-resolution .ticket-timeline-dot {
  background: var(--color-success, #0f766e);
  color: #fff;
  border-color: var(--color-success, #0f766e);
}

.ticket-timeline-event.ticket-timeline-resolution .ticket-timeline-card {
  border-color: color-mix(in srgb, var(--color-success, #0f766e) 35%, var(--border-color, #d8e3df));
  background: color-mix(in srgb, var(--color-success, #0f766e) 6%, var(--surface, #fff));
}

.ticket-timeline-event.ticket-timeline-resolution-rejected .ticket-timeline-dot {
  color: #a04416;
  background: #fff2eb;
  border-color: #efc3ad;
}

.ticket-timeline-event.ticket-timeline-resolution-rejected .ticket-timeline-card {
  border-color: #efc3ad;
  background: #fffaf7;
}

.ticket-rejection-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted, #58706a);
  font-size: .84rem;
  font-weight: 650;
}

.ticket-rejection-author svg {
  width: 14px;
  height: 14px;
}

.ticket-rejection-feedback {
  margin-bottom: 12px;
}

.ticket-rejected-resolution {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #efd9c9;
  border-inline-start: 3px solid #c96836;
  border-radius: 10px;
  background: rgba(255, 255, 255, .72);
}

.ticket-rejected-resolution > span {
  display: block;
  margin-bottom: 5px;
  color: #91451f;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.ticket-rejected-resolution > p {
  margin: 0;
  white-space: pre-wrap;
}

.ticket-timeline-event.ticket-timeline-expenses .ticket-timeline-dot {
  color: var(--color-accent, #075f52);
  background: color-mix(in srgb, var(--color-accent, #075f52) 10%, var(--surface, #fff));
  border-color: color-mix(in srgb, var(--color-accent, #075f52) 30%, var(--border-color, #d8e3df));
}

.ticket-timeline-event.ticket-timeline-expenses .ticket-timeline-card {
  border-style: dashed;
}

.ticket-expense-list {
  display: grid;
  gap: .45rem;
  margin-top: .8rem;
}

.ticket-expense-list .ticket-timeline-record {
  width: fit-content;
  max-width: 100%;
}

.payroll-ticket-link {
  display: block;
  width: fit-content;
  margin-top: .2rem;
  color: var(--color-accent, #075f52);
  text-decoration: none;
}

.payroll-ticket-link:hover { text-decoration: underline; }

.ticket-timeline-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.ticket-timeline-card header div {
  display: grid;
  gap: 2px;
}

.ticket-timeline-card strong {
  color: var(--theme-ink);
  font-size: 0.84rem;
}

.ticket-timeline-card header span,
.ticket-timeline-card time {
  color: var(--theme-ink-soft);
  font-size: 0.74rem;
}

.ticket-timeline-card time {
  white-space: nowrap;
}

.ticket-timeline-card p {
  margin: 12px 0 0;
  color: var(--theme-ink);
  line-height: 1.55;
  white-space: pre-wrap;
}

.ticket-timeline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

.ticket-timeline-task,
.ticket-timeline-record {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  color: var(--theme-ink-soft);
  background: var(--theme-panel-muted);
  font-size: 0.73rem;
  font-weight: 700;
  text-decoration: none;
}

.ticket-timeline-task svg,
.ticket-timeline-record svg {
  width: 14px;
  height: 14px;
}

.ticket-timeline-task.pending {
  border-color: #e6c486;
  background: #fff8e8;
  color: #9a6700;
}

.ticket-timeline-task.done {
  border-color: #a4c6bb;
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

.ticket-timeline-record:hover {
  border-color: #9abbb0;
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

.ticket-timeline-empty {
  margin: 0 0 0 50px;
  padding: 14px;
  border: 1px dashed var(--theme-line-strong);
  border-radius: var(--theme-radius);
  color: var(--theme-ink-soft);
  font-size: 0.8rem;
}

.ticket-reply-panel {
  align-self: start;
  position: sticky;
  top: 0;
}

.ticket-reply-form {
  gap: 14px;
  padding: 16px;
  background: var(--theme-canvas);
}

.ticket-reply-form .modal-actions-row {
  justify-content: stretch;
}

.ticket-reply-form .modal-actions-row .btn {
  flex: 1 1 0;
  justify-content: center;
}

/* Compact, stable operational controls shared by every filtered list. */
.query-controls {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: end;
}

.query-controls > .btn,
.query-controls > button {
  width: max-content;
  min-width: 112px;
  min-height: var(--theme-field-height);
  margin: 0;
  align-self: end;
}

.query-controls .query-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(96px, 1fr));
  gap: 8px;
  align-self: end;
  min-width: 212px;
}

.query-controls .query-actions .btn {
  width: 100%;
  min-height: var(--theme-field-height);
  white-space: nowrap;
}

.query-controls select[multiple] {
  min-height: var(--theme-field-height);
}

/* Shared compact multi-choice menu: native select stays in the form, hidden. */
select.multi-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.multi-select-shell {
  position: relative;
  width: 100%;
  min-width: 0;
}

.multi-select-shell summary {
  min-height: var(--theme-field-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid var(--theme-line-strong);
  border-radius: var(--theme-radius-sm);
  background: #fff;
  color: var(--theme-ink);
  cursor: pointer;
  font: inherit;
  list-style: none;
}

.multi-select-shell summary::-webkit-details-marker { display: none; }
.multi-select-shell .multi-select-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-select-count { display: inline-grid; flex: 0 0 auto; min-width: 20px; height: 20px; place-items: center; padding: 0 5px; border-radius: 999px; background: var(--theme-accent-soft); color: var(--theme-accent); font-size: .68rem; font-weight: 850; line-height: 1; }
.multi-select-shell summary svg { width: 16px; height: 16px; color: var(--theme-ink-soft); }
.multi-select-shell[open] summary { border-color: #8fb7aa; box-shadow: 0 0 0 3px var(--theme-focus); }

.multi-select-menu {
  position: fixed;
  top: var(--multi-menu-top, 0);
  left: var(--multi-menu-left, 0);
  z-index: 1000;
  width: var(--multi-menu-width, 272px);
  box-sizing: border-box;
  max-height: var(--multi-menu-max-height, 310px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: 9px;
  overflow: hidden;
  border: 1px solid var(--theme-line-strong);
  border-radius: var(--theme-radius);
  background: #fff;
  box-shadow: 0 16px 34px rgba(12, 38, 34, .16);
}

.multi-select-menu > input { min-height: 36px; padding: 8px 9px; border: 1px solid var(--theme-line); border-radius: 6px; font: inherit; }
.multi-select-options { display: grid; gap: 2px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.multi-select-options label { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 7px 8px; border-radius: 6px; color: var(--theme-ink); cursor: pointer; font-size: .8rem; font-weight: 650; }
.multi-select-options label:hover { background: var(--theme-accent-soft); }
.single-select-option { display: flex; align-items: center; justify-content: space-between; gap: 9px; width: 100%; min-height: 34px; padding: 7px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--theme-ink); cursor: pointer; text-align: left; font: inherit; font-size: .8rem; font-weight: 650; }
.multi-select-options > [hidden] { display: none !important; }
.single-select-option:hover, .single-select-option[aria-selected="true"] { background: var(--theme-accent-soft); }
.single-select-option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.single-select-option svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--theme-accent); }
.multi-select-options input { appearance: auto; position: static; display: block; flex: 0 0 16px; width: 16px; min-width: 16px; height: 16px; min-height: 16px; margin: 0; padding: 0; opacity: 1; clip: auto; accent-color: var(--theme-accent); }
.multi-select-options span { min-width: 0; color: var(--theme-ink); line-height: 1.32; }
.multi-select-empty { margin: 6px; color: var(--theme-ink-soft); font-size: .78rem; text-align: center; }

/* Agent-group selectors use the shared picker, with short operational guidance
   kept beneath the field so long permission names never distort the modal. */
.group-choice-field { align-content: start; }
.group-choice-field small { min-height: 2.45em; margin-top: 1px; color: var(--theme-ink-soft); font-size: .73rem; font-weight: 600; line-height: 1.35; }
.group-choice-field .multi-select-shell summary { min-height: 48px; border-radius: 10px; }
.group-choice-field .multi-select-shell[open] summary { border-color: var(--theme-accent); }

/* Canonical filter rail: one layout model across every operational page. */
.query-controls {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start;
  gap: 16px;
  margin: 0;
  padding: 4px 0;
}

.query-controls > label {
  position: relative;
  display: grid;
  grid-template-rows: 20px var(--theme-field-height);
  gap: 6px;
  min-width: 0;
  margin: 0;
}

.query-controls > label > span {
  grid-row: 1;
  line-height: 20px;
}

.query-controls > label > input,
.query-controls > label > select,
.query-controls > label > .multi-select-shell {
  grid-row: 2;
  width: 100%;
  min-width: 0;
  height: var(--theme-field-height);
  margin: 0;
}

.query-controls > label:has(> small) { padding-bottom: 40px; }
.query-controls > label > small {
  position: absolute;
  top: calc(20px + 6px + var(--theme-field-height) + 6px);
  left: 0;
  right: 0;
  margin: 0;
  color: var(--theme-ink-soft);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.35;
}

.query-controls > .check-field {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: var(--theme-field-height);
  margin-top: 26px;
  padding: 0 2px;
}

.query-controls > .check-field input { width: 18px; height: 18px; }
.query-controls > .check-field span { margin: 0; }

.query-controls .query-actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  min-height: var(--theme-field-height);
  margin-top: 26px;
}

.query-controls .query-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--theme-field-height);
  justify-content: center;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .query-controls { grid-template-columns: 1fr; }
  .query-controls .query-actions,
  .query-controls > .check-field { margin-top: 0; }
}

/* Password actions live inside the input edge, not as detached form buttons. */
.password-action-field,
.password-control-field {
  position: relative;
  display: block;
  width: 100%;
}

.password-control-field > span {
  display: block;
  grid-column: auto;
  margin-bottom: 6px;
}

.password-action-field input,
.password-control-field input {
  width: 100%;
  min-width: 0;
  padding-inline-end: 88px !important;
}

.password-inline-action,
.password-action-field .icon-button,
.password-control-field .icon-button {
  position: absolute;
  z-index: 1;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  color: var(--theme-ink-soft);
  background: transparent;
  box-shadow: none;
}

.password-inline-action:hover,
.password-action-field .icon-button:hover,
.password-control-field .icon-button:hover {
  color: var(--theme-accent);
  background: var(--theme-accent-soft);
}

.password-action-field .icon-button,
.password-control-field .icon-button {
  bottom: 4px;
}

.password-action-field .icon-button {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

.password-action-field [data-password-generate],
.password-control-field [data-generate-password],
.password-control-field [data-generate-client-password] { right: 40px; }

.password-action-field [data-password-toggle],
.password-control-field [data-toggle-password],
.password-control-field [data-toggle-client-password] { right: 4px; }

/* Reply composer: the writing surface owns the detail view. */
.ticket-detail-layout {
  /* Reply workspace 60%; timeline inspector 40%. */
  grid-template-columns: minmax(460px, 1.5fr) minmax(360px, 1fr);
}

.ticket-detail-layout.timeline-hidden {
  grid-template-columns: minmax(0, 1fr);
}

.ticket-detail-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ticket-detail-layout.timeline-hidden .ticket-reply-panel {
  max-width: 920px;
  width: 100%;
  justify-self: center;
}

.ticket-reply-panel {
  position: static;
}

/* Ticket history is a contextual inspector at the right of the reply surface. */
.ticket-thread-panel { order: 2; max-height: min(70vh, 760px); overflow: auto; }
.ticket-reply-panel { order: 1; }
.ticket-reply-edited { color: var(--theme-text-muted); font-size: .78rem; font-weight: 650; }
.ticket-reply-actions { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; min-width: 0; max-width: 100%; gap: .35rem; margin-inline-start: auto; }
.ticket-reply-edit, .ticket-reply-history, .ticket-reply-resolution, .ticket-reply-delete { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 30px; padding: .3rem .55rem; border: 1px solid var(--theme-line); border-radius: 8px; background: var(--theme-panel); color: var(--theme-accent); font: inherit; font-size: .76rem; font-weight: 750; line-height: 1; cursor: pointer; white-space: nowrap; }
.ticket-reply-edit, .ticket-reply-history, .ticket-reply-resolution, .ticket-reply-delete { appearance: none; box-sizing: border-box; vertical-align: middle; }
.ticket-reply-edit:hover, .ticket-reply-history:hover, .ticket-reply-resolution:hover { border-color: var(--theme-accent); background: var(--theme-accent-soft); }
.ticket-reply-resolution { border-color: color-mix(in srgb, var(--theme-primary) 42%, var(--theme-line)); background: color-mix(in srgb, var(--theme-primary) 7%, var(--theme-panel)); color: var(--theme-primary); }
.ticket-reply-delete { color: var(--theme-danger, #a33b39); }
.ticket-reply-delete:hover { border-color: var(--theme-danger, #a33b39); background: color-mix(in srgb, var(--theme-danger, #a33b39) 10%, #fff); }
.ticket-reply-edit svg, .ticket-reply-history svg, .ticket-reply-resolution svg, .ticket-reply-delete svg { inline-size: .9rem; block-size: .9rem; flex: 0 0 auto; }
.ticket-timeline-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .65rem; }
.ticket-timeline-meta > .ticket-reply-edit,
.ticket-timeline-meta > .ticket-reply-history,
.ticket-timeline-meta > .ticket-reply-resolution,
.ticket-timeline-meta > .ticket-reply-delete { flex: 0 0 auto; min-height: 30px; line-height: 1; }
.ticket-timeline-meta > .ticket-reply-actions { flex: 0 1 auto; }
.ticket-resolution-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid color-mix(in srgb, var(--theme-border) 75%, transparent); }
.ticket-resolution-actions .btn { min-height: 36px; }
.ticket-closed-view { display: block; }
.ticket-closed-view .ticket-thread-panel { max-height: min(76vh, 900px); width: 100%; }
/* Desktop reply layout uses display:grid. Explicitly preserve the semantic
   hidden state so a closed ticket cannot render its disabled composer. */
#ticket-detail-modal .ticket-reply-panel[hidden],
#ticket-detail-modal .ticket-thread-panel[hidden] { display: none !important; }
.ticket-edit-context { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .65rem; }
.ticket-edit-context span { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .55rem; border: 1px solid var(--theme-line); border-radius: 999px; color: var(--theme-text-muted); font-size: .76rem; }
.ticket-edit-context svg { width: .85rem; height: .85rem; }
.ticket-editing-banner { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; padding: .65rem .75rem; border: 1px solid color-mix(in srgb, var(--theme-primary) 35%, var(--theme-line)); border-radius: .7rem; background: color-mix(in srgb, var(--theme-primary) 7%, var(--theme-surface)); color: var(--theme-text); font-size: .84rem; }
.ticket-editing-banner > span { display: inline-flex; align-items: center; gap: .45rem; font-weight: 650; }
.ticket-editing-banner svg { width: 1rem; height: 1rem; color: var(--theme-primary); }
.ticket-reply-change-summary { display:flex; align-items:flex-start; gap:.45rem; margin-top:.6rem; padding:.58rem .68rem; border-inline-start:3px solid var(--theme-primary); border-radius:.45rem; background:color-mix(in srgb,var(--theme-primary) 7%,var(--theme-surface)); color:var(--theme-ink-soft); font-size:.77rem; font-weight:700; line-height:1.45; }
.ticket-reply-change-summary svg { flex:0 0 auto; inline-size:.9rem; block-size:.9rem; margin-top:.08rem; color:var(--theme-primary); }
#reopen-ticket[hidden] { display: none !important; }
.modal-header-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .45rem; }
.modal-header-actions .icon-button[hidden] { display: none !important; }
.ticket-link-modal { width: min(52rem, calc(100vw - 2rem)); }
.ticket-link-picker { display: grid; grid-template-columns: minmax(11rem, .9fr) minmax(14rem, 1.4fr) auto auto; align-items: end; gap: .65rem; }
.ticket-link-picker label { min-width: 0; }
.ticket-link-results { display: grid; gap: .35rem; max-height: 18rem; overflow: auto; margin-top: .9rem; padding: .45rem; border: 1px solid var(--theme-line); border-radius: .7rem; background: var(--theme-surface-muted); }
.ticket-link-result { display: flex; align-items: center; justify-content: space-between; gap: .65rem; width: 100%; min-height: 3.25rem; padding: .65rem .75rem; border: 1px solid transparent; border-radius: .55rem; background: transparent; color: var(--theme-text); text-align: left; cursor: pointer; }
.ticket-link-result:hover, .ticket-link-result.is-selected { border-color: color-mix(in srgb, var(--theme-primary) 36%, var(--theme-line)); background: color-mix(in srgb, var(--theme-primary) 8%, var(--theme-surface)); }
.ticket-link-result span { display: grid; gap: .15rem; min-width: 0; }
.ticket-link-result small { overflow: hidden; color: var(--theme-text-muted); text-overflow: ellipsis; white-space: nowrap; }
.ticket-link-result svg { flex: 0 0 auto; width: 1rem; height: 1rem; color: var(--theme-primary); }
.ticket-link-selection { display: grid; gap: .55rem; margin-top: .9rem; padding-top: .85rem; border-top: 1px solid var(--theme-line); }
.ticket-link-selection > div:first-child { display: flex; justify-content: space-between; gap: .75rem; font-size: .85rem; }
.ticket-link-selection > div:first-child span { color: var(--theme-text-muted); }
.ticket-link-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.ticket-link-chip { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .38rem .45rem .38rem .55rem; border: 1px solid var(--theme-line); border-radius: 999px; background: var(--theme-surface); font-size: .78rem; }
.ticket-link-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-link-chip button { display: inline-grid; width: 1.25rem; height: 1.25rem; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--theme-text-muted); cursor: pointer; }
.ticket-link-chip button:hover { background: var(--theme-danger-soft); color: var(--theme-danger); }
.ticket-link-chip svg { width: .85rem; height: .85rem; }
.ticket-reply-references { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .55rem; margin-top: -.2rem; padding: .55rem .65rem; border-left: 3px solid var(--theme-primary); background: color-mix(in srgb, var(--theme-primary) 6%, var(--theme-surface)); color: var(--theme-text-muted); font-size: .78rem; }
.ticket-reply-references strong { display: inline-flex; align-items: center; gap: .3rem; color: var(--theme-text); }
.ticket-reply-references svg { width: .9rem; height: .9rem; color: var(--theme-primary); }
.ticket-reply-references span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .ticket-link-picker { grid-template-columns: 1fr 1fr; } .ticket-link-picker .btn { width: 100%; } }
.ticket-attachment-field { display: grid; gap: .35rem; padding: .65rem .75rem; border: 1px dashed var(--theme-line-strong); border-radius: 10px; background: var(--theme-panel-muted); }
.ticket-attachment-field > span { color: var(--theme-ink-soft); font-size: .78rem; font-weight: 800; }
.ticket-attachment-field small { color: var(--theme-text-muted); font-size: .72rem; }
.ticket-attachment-field input[type="file"] { max-inline-size: 100%; color: var(--theme-text-muted); font: inherit; font-size: .78rem; }
.ticket-file-input { position: fixed; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.ticket-attachment-list { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .1rem; padding: .6rem; border: 1px dashed color-mix(in srgb, var(--theme-primary) 40%, var(--theme-line)); border-radius: .65rem; background: color-mix(in srgb, var(--theme-primary) 4%, var(--theme-surface)); }
.ticket-attachment-chip { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; gap: .32rem; padding: .32rem .38rem .32rem .48rem; border: 1px solid var(--theme-line); border-radius: 999px; background: var(--theme-surface); color: var(--theme-text); font-size: .73rem; font-weight: 700; }
.ticket-attachment-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-attachment-chip small { color: var(--theme-text-muted); font-size: .67rem; font-weight: 650; white-space: nowrap; }
.ticket-attachment-chip svg { inline-size: .82rem; block-size: .82rem; color: var(--theme-primary); flex: 0 0 auto; }
.ticket-attachment-chip button { display: grid; flex: 0 0 auto; inline-size: 1.28rem; block-size: 1.28rem; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--theme-text-muted); cursor: pointer; }
.ticket-attachment-chip button:hover { background: var(--theme-danger-soft); color: var(--theme-danger); }
.ticket-reply-tools .icon-button { inline-size: 38px; block-size: 38px; }
.checkup-history-list { display: grid; gap: 10px; max-block-size: min(58vh, 540px); overflow: auto; }
.checkup-history-item { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); background: var(--theme-panel-muted); }
.checkup-history-item span, .checkup-history-item small { color: var(--theme-text-muted); }
.checkup-history-item p { margin: 2px 0 0; white-space: pre-wrap; }

/* Revision history is an inspection surface, not a raw browser prompt. */
.record-history-modal-card { inline-size: min(900px, calc(100vw - 32px)); }
.record-history-list { display: grid; gap: 12px; max-block-size: min(61vh, 620px); overflow: auto; padding-inline-end: 2px; }
.record-history-entry { display: grid; gap: 12px; padding: 15px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); background: var(--theme-panel-muted); }
.record-history-entry > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.record-history-entry > header > div { display: grid; gap: 3px; }
.record-history-entry strong { color: var(--theme-ink); font-size: .88rem; }
.record-history-entry header span, .record-history-entry time { color: var(--theme-text-muted); font-size: .74rem; font-weight: 700; }
.record-history-entry time { text-align: end; white-space: nowrap; }
.record-history-entry dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.record-history-entry dl > div { min-inline-size: 0; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--theme-line) 80%, transparent); border-radius: 8px; background: var(--theme-surface); }
.record-history-entry dt { color: var(--theme-text-muted); font-size: .66rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.record-history-entry dd { min-inline-size: 0; max-block-size: 110px; margin: 4px 0 0; overflow: auto; color: var(--theme-ink); font: 650 .76rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; white-space: pre-wrap; }
.record-history-entry footer { display: flex; justify-content: flex-end; padding-top: 2px; }
.record-history-message { padding: 11px 12px; border-left: 3px solid var(--theme-accent); background: var(--theme-surface); color: var(--theme-ink); font-size: .82rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.record-history-empty, .record-history-loading, .record-history-error { display: grid; place-items: center; gap: 7px; min-block-size: 170px; padding: 24px; border: 1px dashed var(--theme-line-strong); border-radius: var(--theme-radius-sm); color: var(--theme-text-muted); text-align: center; font-size: .82rem; }
.record-history-empty svg { inline-size: 22px; block-size: 22px; color: var(--theme-accent); }
.record-history-empty strong { color: var(--theme-ink); }
.record-history-error { border-color: color-mix(in srgb, var(--theme-danger) 45%, var(--theme-line)); color: var(--theme-danger); overflow-wrap: anywhere; }
.record-version-restore-confirm { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 18px 18px; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--theme-accent) 42%, var(--theme-line)); border-radius: var(--theme-radius-sm); background: var(--theme-accent-soft); }
.record-version-restore-confirm > div:first-child { display: grid; gap: 3px; }
.record-version-restore-confirm strong { color: var(--theme-ink); font-size: .84rem; }
.record-version-restore-confirm p { margin: 0; color: var(--theme-text-muted); font-size: .75rem; line-height: 1.45; }
.record-version-restore-confirm > div:last-child { display: flex; flex: 0 0 auto; gap: 8px; }
@media (max-width: 700px) { .record-history-entry dl { grid-template-columns: 1fr; } .record-history-entry > header, .record-version-restore-confirm { align-items: stretch; flex-direction: column; } .record-history-entry time { text-align: start; } .record-version-restore-confirm > div:last-child { justify-content: stretch; } .record-version-restore-confirm .btn { flex: 1 1 auto; } }

/* Modern binary controls: compact, aligned, and safe for dense forms. */
.check-field { display: inline-flex; align-items: center; gap: .65rem; min-height: var(--theme-field-height); padding: .6rem .75rem; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); background: var(--theme-panel-muted); font-weight: 750; }
.check-field input { inline-size: 1.1rem; block-size: 1.1rem; margin: 0; accent-color: var(--theme-accent); }
.check-field:has(input:checked) { border-color: #88b7a7; background: var(--theme-accent-soft); color: var(--theme-accent); }
.agent-access-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 2px; }
.agent-access-toggle { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 78px; padding: 14px 16px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); background: var(--theme-panel-muted); cursor: pointer; transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease; }
.agent-access-toggle:hover { border-color: #9bbdaf; background: #fff; }
.agent-access-toggle input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.agent-access-switch { position: relative; inline-size: 38px; block-size: 22px; border-radius: 999px; background: #b9c5c1; transition: background 150ms ease; }
.agent-access-switch::after { content: ""; position: absolute; inset: 3px auto 3px 3px; inline-size: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(8, 32, 27, .2); transition: transform 150ms ease; }
.agent-access-toggle input:checked + .agent-access-switch { background: var(--theme-accent); }
.agent-access-toggle input:checked + .agent-access-switch::after { transform: translateX(16px); }
.agent-access-toggle:has(input:checked) { border-color: #82ad9f; background: var(--theme-accent-soft); }
.agent-access-toggle:has(input:focus-visible) { outline: 3px solid rgba(13, 111, 89, .25); outline-offset: 2px; }
.agent-password-reset { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--theme-line); border-left: 3px solid var(--theme-accent); border-radius: var(--theme-radius-sm); background: var(--theme-panel-muted); }
.agent-password-reset > div:first-child { display: grid; gap: 3px; }
.agent-password-reset strong { color: var(--theme-ink); font-size: .85rem; }
.agent-password-reset small { color: var(--theme-ink-soft); font-size: .75rem; font-weight: 650; line-height: 1.4; }
.agent-password-reset-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 10px; }
.agent-password-reset-fields .btn { min-height: var(--theme-field-height); justify-content: center; white-space: nowrap; }
@media (max-width: 1040px) { .agent-password-reset-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .agent-password-reset-fields { grid-template-columns: 1fr; } }
.agent-access-copy { display: grid; gap: 3px; min-width: 0; }
.agent-access-copy strong { color: var(--theme-ink); font-size: .83rem; }
.agent-access-copy small { color: var(--theme-ink-soft); font-size: .73rem; font-weight: 600; line-height: 1.35; }
.agent-profile-tabs { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); background: var(--theme-panel-muted); overflow-x: auto; }
.agent-profile-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-block-size: 38px; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--theme-ink-soft); font: 750 .78rem/1.2 inherit; white-space: nowrap; cursor: pointer; transition: color 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
.agent-profile-tabs button svg { inline-size: 16px; block-size: 16px; }
.agent-profile-tabs button:hover { color: var(--theme-accent); background: #fff; }
.agent-profile-tabs button.active { border-color: color-mix(in srgb, var(--theme-accent) 34%, var(--theme-line)); background: #fff; box-shadow: 0 1px 3px rgba(8, 32, 27, .08); color: var(--theme-accent); }
.agent-profile-tabs button:focus-visible, .agent-notification-category:focus-within { outline: 3px solid color-mix(in srgb, var(--theme-accent) 28%, transparent); outline-offset: 2px; }
.agent-profile-tab-panel { min-inline-size: 0; }
.agent-notification-preferences { display: grid; gap: 16px; }
.agent-notification-intro { display: grid; gap: 4px; max-inline-size: 72ch; }
.agent-notification-intro h4 { margin: 0; color: var(--theme-ink); font-size: .95rem; }
.agent-notification-intro p, .agent-notification-summary { margin: 0; color: var(--theme-ink-soft); font-size: .78rem; font-weight: 600; line-height: 1.55; }
.agent-notification-master { grid-template-columns: 42px minmax(0, 1fr); min-block-size: 84px; }
.agent-notification-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.agent-notification-category { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 10px; min-block-size: 92px; padding: 14px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); background: var(--theme-panel-muted); cursor: pointer; transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease; }
.agent-notification-category:hover { border-color: #9bbdaf; background: #fff; }
.agent-notification-category input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.agent-notification-category > span::before { content: ""; display: block; inline-size: 16px; block-size: 16px; margin-top: 2px; border: 1.5px solid #91a9a2; border-radius: 5px; background: #fff; transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
.agent-notification-category > span { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; align-items: start; }
.agent-notification-category > span svg { grid-column: 2; inline-size: 18px; block-size: 18px; color: var(--theme-accent); }
.agent-notification-category > span strong, .agent-notification-category > span small { grid-column: 2; min-inline-size: 0; }
.agent-notification-category > span strong { margin-top: 2px; color: var(--theme-ink); font-size: .82rem; }
.agent-notification-category > span small { margin-top: 4px; color: var(--theme-ink-soft); font-size: .72rem; font-weight: 600; line-height: 1.35; }
.agent-notification-category:has(input:checked) { border-color: #82ad9f; background: var(--theme-accent-soft); }
.agent-notification-category:has(input:checked) > span::before { border-color: var(--theme-accent); background: var(--theme-accent); box-shadow: inset 0 0 0 3px #fff; }
.agent-notification-summary { padding: 11px 13px; border-left: 3px solid var(--theme-accent); border-radius: 0 var(--theme-radius-sm) var(--theme-radius-sm) 0; background: var(--theme-panel-muted); }
@media (max-width: 680px) { .agent-profile-tabs { gap: 5px; } .agent-profile-tabs button { flex: 1 0 auto; } .agent-profile-tabs button span { font-size: .74rem; } .agent-notification-category-grid { grid-template-columns: 1fr; } }
.trusted-devices-head { align-items: flex-start; gap: 16px; }
.trusted-devices-head .btn { flex: 0 0 auto; min-height: var(--theme-field-height); white-space: nowrap; }
.trusted-device-list { display: grid; gap: 8px; }
.trusted-device-row { display: grid; grid-template-columns: minmax(220px, 1.25fr) minmax(180px, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); background: var(--theme-panel-muted); }
.trusted-device-row.is-inactive { opacity: .72; background: color-mix(in srgb, var(--theme-panel-muted) 72%, #eef1f0); }
.trusted-device-primary, .trusted-device-meta { display: grid; min-width: 0; gap: 3px; }
.trusted-device-primary strong { overflow: hidden; color: var(--theme-ink); font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.trusted-device-primary span, .trusted-device-meta span { color: var(--theme-ink-soft); font-size: .74rem; font-weight: 625; line-height: 1.35; }
.trusted-device-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.trusted-device-actions .icon-button { inline-size: 34px; block-size: 34px; color: #a33b35; }
.trusted-device-empty { padding: 18px; border: 1px dashed var(--theme-line-strong); border-radius: var(--theme-radius-sm); color: var(--theme-ink-soft); font-size: .82rem; font-weight: 700; text-align: center; }
.document-file-open { display: grid; gap: 3px; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.document-file-open strong { color: var(--theme-ink); font-weight: 800; }.document-file-open:hover strong { color: var(--theme-accent); text-decoration: underline; text-underline-offset: 3px; }
.document-tree .tree-row { position: relative; }.document-tree-action-menu { flex: 0 0 auto; margin-inline-start: auto; }.document-tree-action-menu .row-action-trigger { inline-size: 30px; block-size: 30px; min-height: 30px; opacity: .7; }.tree-row:hover .document-tree-action-menu .row-action-trigger, .document-tree-action-menu:focus-within .row-action-trigger { opacity: 1; }.document-tree-action-menu .row-action-popover { min-width: 190px; }
.document-selection-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: .4rem; min-width: 0; }
.document-selection-actions .icon-button { inline-size: 32px; block-size: 32px; min-height: 32px; padding: 0; }
@media (max-width: 760px) { .trusted-devices-head { display: grid; }.trusted-devices-head .btn { inline-size: 100%; }.trusted-device-row { grid-template-columns: 1fr; gap: 8px; }.trusted-device-actions { justify-content: space-between; } }
.session-service-list { display: grid; gap: 10px; }
.session-service-empty { margin: 0; padding: 20px; border: 1px dashed var(--theme-line-strong); border-radius: var(--theme-radius-sm); color: var(--theme-ink-soft); text-align: center; font-size: .82rem; font-weight: 700; }
.session-service-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); background: var(--theme-panel-muted); }
.session-service-card > div:first-child { display: grid; min-width: 0; gap: 3px; }
.session-service-card strong { color: var(--theme-ink); font-size: .87rem; }
.session-service-card > div:first-child span { overflow: hidden; color: var(--theme-ink-soft); font-size: .76rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.session-service-card-action { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.session-card-username { display: inline-flex !important; align-items: center; gap: 5px; margin-top: 4px; color: var(--theme-ink-soft); font-size: .72rem; font-weight: 700; }
.session-card-username svg { width: 13px; height: 13px; color: var(--theme-accent); }
.session-service-card-action .btn { min-width: 136px; }
.session-card-exception { display: inline-flex; align-items: center; gap: 7px; color: var(--theme-ink-soft); font-size: .72rem; font-weight: 700; }
.session-card-exception input { width: 16px; height: 16px; margin: 0; accent-color: var(--theme-accent); }
.quick-connect-modal-card { width: min(760px, calc(100vw - 28px)); }
.quick-connect-modal-card .modal-form { overflow: auto; }
.quick-connect-modal-card .form-help { margin: 0; }
.quick-connect-history { margin: 0 var(--theme-dialog-padding) 18px; border-top: 1px solid var(--theme-line); padding-top: 16px; }
.quick-connect-history header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.quick-connect-history h4 { margin: 0; color: var(--theme-ink); font-size: .85rem; }
.quick-connect-history header p { margin: 4px 0 0; color: var(--theme-ink-soft); font-size: .74rem; line-height: 1.4; }
.quick-connect-history-list { display: grid; max-height: 190px; margin-top: 10px; overflow: auto; border: 1px solid var(--theme-line); border-radius: 10px; background: var(--theme-panel-muted); }
.quick-connect-history-list > p { margin: 0; padding: 14px; color: var(--theme-ink-soft); font-size: .78rem; }
.quick-connect-history-list article { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 13px; border-bottom: 1px solid var(--theme-line); }
.quick-connect-history-list article:last-child { border-bottom: 0; }
.quick-connect-history-list article > div { display: grid; min-width: 0; gap: 2px; }
.quick-connect-history-list strong { overflow: hidden; color: var(--theme-ink); font-size: .79rem; text-overflow: ellipsis; white-space: nowrap; }
.quick-connect-history-list span, .quick-connect-history-list small { color: var(--theme-ink-soft); font-size: .7rem; font-weight: 650; }
.quick-connect-history-list small { flex: 0 0 auto; text-align: right; }
@media (max-width: 700px) { .quick-connect-modal-card { width: min(100vw - 16px, 760px); } }
@media (max-width: 520px) { .quick-connect-history-list article { align-items: start; flex-direction: column; gap: 4px; } .quick-connect-history-list small { text-align: left; } }
.ticket-internal-note { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 12px 14px; border: 1px solid #8eb9ab; border-radius: var(--theme-radius-sm); background: var(--theme-accent-soft); cursor: pointer; }
.ticket-internal-note input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.ticket-internal-switch { position: relative; display: block; inline-size: 38px; block-size: 22px; border-radius: 999px; background: #aebeb8; transition: background 150ms ease; }
.ticket-internal-switch::after { content: ""; position: absolute; inset: 3px auto 3px 3px; inline-size: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(12,38,34,.26); transition: transform 150ms ease; }
.ticket-internal-note input:checked + .ticket-internal-switch { background: var(--theme-accent); }
.ticket-internal-note input:checked + .ticket-internal-switch::after { transform: translateX(16px); }
.ticket-internal-copy { display: grid; gap: .15rem; min-width: 0; }
.ticket-internal-copy strong { color: var(--theme-ink); font-size: .8rem; }
.ticket-internal-copy small { color: var(--theme-ink-soft); font-weight: 600; line-height: 1.4; }
.ticket-internal-note:has(input:not(:checked)) { border-color: var(--theme-line-strong); background: var(--theme-panel-muted); }
.ticket-internal-note:has(input:focus-visible) { outline: 3px solid var(--theme-focus); outline-offset: 2px; }

/* Ticket reply privacy is a standalone control, not a generic form checkbox.
 * These selectors intentionally outrank the shared modal input rules. */
#ticket-reply-form .ticket-internal-note {
  position: relative !important;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  width: 100% !important;
  min-height: 72px !important;
  margin: 2px 0 0 !important;
  padding: 14px 16px !important;
  border: 1px solid #8eb9ab !important;
  border-radius: 12px !important;
  background: linear-gradient(90deg, #e8f5f0, #f8fcfa) !important;
  box-sizing: border-box !important;
}
#ticket-reply-form .ticket-internal-note > input[name="is_internal"] {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  min-height: 1px !important;
  min-width: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0) !important;
  appearance: none !important;
}
#ticket-reply-form .ticket-internal-switch {
  display: block !important;
  position: relative !important;
  flex: 0 0 46px !important;
  inline-size: 46px !important;
  block-size: 26px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: var(--theme-accent) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 69, 57, .12) !important;
}
#ticket-reply-form .ticket-internal-switch::after {
  inline-size: 20px !important;
  block-size: 20px !important;
  transform: translateX(20px) !important;
}
#ticket-reply-form .ticket-internal-copy {
  display: grid !important;
  flex: 1 1 auto !important;
  gap: 3px !important;
  min-width: 0 !important;
  margin: 0 !important;
}
#ticket-reply-form .ticket-internal-copy strong { color: var(--theme-ink) !important; font-size: .84rem !important; line-height: 1.2 !important; }
#ticket-reply-form .ticket-internal-copy small { color: var(--theme-ink-soft) !important; font-size: .75rem !important; line-height: 1.35 !important; }
#ticket-reply-form .ticket-internal-note:has(input:not(:checked)) { border-color: var(--theme-line-strong) !important; background: #fafcfc !important; }
#ticket-reply-form .ticket-internal-note:has(input:not(:checked)) .ticket-internal-switch { background: #aebeb8 !important; }
#ticket-reply-form .ticket-internal-note:has(input:not(:checked)) .ticket-internal-switch::after { transform: translateX(0) !important; }

.ticket-attachment-preview-modal { width: min(1040px, calc(100vw - 28px)); max-height: min(860px, calc(100vh - 28px)); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.ticket-attachment-preview-body { min-height: 360px; display: grid; place-items: stretch; overflow: auto; background: var(--theme-panel-muted); border-block: 1px solid var(--theme-line); }
.ticket-attachment-preview-body iframe { width: 100%; min-height: 64vh; border: 0; background: #fff; }
.ticket-attachment-preview-unavailable { min-height: 360px; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 32px; text-align: center; color: var(--theme-ink-soft); }
.ticket-attachment-preview-unavailable svg { width: 34px; height: 34px; color: var(--theme-accent); }
.ticket-attachment-preview-unavailable strong { color: var(--theme-ink); }
.ticket-attachment-preview-trigger { appearance: none; cursor: pointer; font: inherit; text-align: left; }

.audit-record-row { cursor: pointer; }
.audit-record-row:hover td, .audit-record-row:focus-visible td { background: var(--theme-accent-soft); }
.audit-record-row:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: -2px; }
.audit-event-summary { display: block; max-width: 28rem; line-height: 1.45; color: var(--theme-ink); }
.audit-event-summary + code { display: block; margin-top: .35rem; }
.audit-record-card { width: min(920px, calc(100vw - 28px)); max-height: min(820px, calc(100vh - 28px)); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.audit-record-card .modal-header { min-width: 0; }
.audit-record-card .modal-header > div { min-width: 0; }
.audit-detail-json { min-width: 0; min-height: 0; margin: 0; padding: clamp(14px, 2vw, 20px); overflow: auto; border-top: 1px solid var(--theme-line); background: var(--theme-panel-muted); color: var(--theme-ink); font: 500 .8rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.security-monitor-card { width: min(1180px, calc(100vw - 32px)); }
.security-monitor-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; padding: 20px; background: var(--theme-panel-muted); }
.security-monitor-layout .wide-field { grid-column: 1 / -1; }
.security-monitor-layout h4 { margin: 0 0 10px; font-size: .86rem; color: var(--theme-ink-soft); }
.compact-form { display: grid; grid-template-columns: 1fr 130px; gap: 12px; align-content: start; }
.compact-form .wide-field { grid-column: 1 / -1; }
@media (max-width: 760px) { .security-monitor-layout { grid-template-columns: 1fr; padding: 14px; } .compact-form { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .agent-access-controls { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .session-service-card { align-items: flex-start; flex-direction: column; } .session-service-card-action { width: 100%; justify-content: space-between; } .session-service-card-action .btn { flex: 1 1 auto; } }

.ticket-reply-form {
  padding: 22px;
}

.ticket-reply-message-field textarea {
  min-height: 260px;
  font-size: 0.92rem;
  line-height: 1.6;
}

.ticket-reply-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 2px;
  color: var(--theme-ink-soft);
  font-size: 0.76rem;
  font-weight: 700;
}

.ticket-reply-tool-actions { display: inline-flex; align-items: center; gap: 7px; }
.ticket-reply-tool-actions .icon-button { width: 38px; height: 38px; border: 1px solid var(--theme-line-strong); background: #fff; color: var(--theme-ink-soft); }
.ticket-reply-tool-actions .icon-button:hover, .ticket-reply-tool-actions .icon-button:focus-visible { border-color: #8fb7aa; background: var(--theme-accent-soft); color: var(--theme-accent); outline: none; }
.ticket-reply-tool-actions #mark-reply-resolved.active { border-color: #78ad9d; background: var(--theme-accent-soft); color: var(--theme-accent); }

.ticket-reply-assignment-popover[hidden] { display: none; }
.ticket-reply-assignment-popover { display: grid; gap: 16px; margin-top: -2px; padding: 16px; border: 1px solid #9fc6b9; border-radius: var(--theme-radius); background: #fff; box-shadow: 0 12px 26px rgba(12, 38, 34, .1); }
.ticket-reply-assignment-popover header, .ticket-reply-assignment-popover footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ticket-reply-assignment-popover header > div { display: grid; gap: 3px; }
.ticket-reply-assignment-popover header strong { color: var(--theme-ink); font-size: .86rem; }
.ticket-reply-assignment-popover header span { color: var(--theme-ink-soft); font-size: .74rem; }
.ticket-reply-assignment-popover footer { justify-content: flex-end; }

/* Payroll bulk entry is a real, spreadsheet-like table rather than CSV text. */
.payroll-entry-grid-wrap { max-height: min(52vh, 470px); }
.payroll-entry-grid { min-width: 1040px; }
.payroll-entry-grid th { position: sticky; top: 0; z-index: 1; }
.payroll-entry-grid td { padding: 7px; vertical-align: middle; }
.payroll-entry-grid input, .payroll-entry-grid select { width: 100%; min-width: 86px; min-height: 36px; padding: 7px 8px; border: 1px solid var(--theme-line); border-radius: 6px; background: #fff; color: var(--theme-ink); font: inherit; font-size: .78rem; }
.payroll-entry-grid td:nth-child(8) input { min-width: 180px; }
.payroll-entry-grid .icon-button { width: 34px; height: 34px; color: var(--theme-danger); }
.payroll-entry-grid tr.has-error { background: #fff2f0; }
.payroll-entry-grid tr.has-error td { border-bottom-color: #e7b5ae; }

.smtp-test-row { display: grid; grid-template-columns: minmax(240px, 1fr) auto minmax(180px, .8fr); align-items: end; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--theme-line); }
.smtp-test-row .api-tag { min-height: var(--theme-field-height); display: flex; align-items: center; margin: 0; }
@media (max-width: 760px) { .smtp-test-row { grid-template-columns: 1fr; } .smtp-test-row .btn { width: 100%; justify-content: center; } }

/* A clear, compact document hierarchy with aligned expansion affordances. */
.document-tree-panel {
  padding: 16px;
  background: var(--theme-panel-muted);
}

.document-tree .tree-row {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0;
}
.document-tree .tree-row:has(.document-tree-action-menu) {
  grid-template-columns: 34px minmax(0, 1fr) 34px !important;
}
.document-tree .tree-row > .tree-node,
.document-tree .tree-row > .document-tree-action-menu {
  min-width: 0;
}
.document-tree .document-tree-action-menu {
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  margin: 0;
}

.document-tree .tree-toggle,
.document-tree .tree-toggle-spacer {
  display: grid !important;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
}

.document-tree .tree-node {
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  min-width: 0;
}

.document-tree .tree-node > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-tree .tree-node small { justify-self: end; white-space: nowrap; }
.document-tree .tree-file-count {
  display: inline-grid;
  min-width: 22px;
  height: 20px;
  place-items: center;
  padding: 0 6px;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  background: var(--theme-panel);
  color: var(--theme-ink-soft);
  font-size: .68rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Payroll links use the same tab affordance as button-based workspaces. */
.page-tabs.payroll-tabs { display: flex; align-items: center; gap: 8px; padding: 8px; }
.page-tabs.payroll-tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid transparent; border-radius: 8px; color: var(--theme-ink-soft); font-weight: 750; text-decoration: none; }
.page-tabs.payroll-tabs a:hover { background: var(--theme-accent-soft); color: var(--theme-accent); }
.page-tabs.payroll-tabs a.active { border-color: var(--theme-line-strong); background: var(--theme-accent); color: #fff; box-shadow: none; }
.page-tabs.payroll-tabs a[aria-selected="true"] { border-color: var(--theme-line-strong); background: var(--theme-accent); color: #fff; box-shadow: none; }

.tree-row {
  grid-template-columns: 30px minmax(0, 1fr);
  min-height: 38px;
  column-gap: 2px;
}

.tree-toggle,
.tree-toggle-spacer {
  width: 30px;
  height: 34px;
}

.tree-toggle {
  border: 1px solid transparent;
  border-radius: 7px;
  justify-self: center;
}

.tree-toggle svg { display: block; }

.tree-toggle:hover,
.tree-toggle:focus-visible {
  border-color: var(--theme-line);
  background: #fff;
  color: var(--theme-accent);
  outline: none;
}

.tree-node {
  min-height: 36px;
  border-radius: 7px;
  grid-template-columns: 24px minmax(0, 1fr) auto auto;
  gap: 7px;
  padding: 6px 9px;
}

.tree-item-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--theme-accent);
  background: var(--theme-accent-soft);
}

.tree-item-icon svg { width: 15px; height: 15px; stroke-width: 2; }

.tree-folder .tree-item-icon { color: #9a6700; background: #fff7e6; }

.tree-cabinet-button { font-weight: 800; }
.tree-cabinet-button .tree-item-icon { color: #fff; background: var(--theme-accent); }

.tree-node.active {
  border-color: #9bc1b5;
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

/* Manual structure access is a focused decision, not another dense form row. */
.structure-permission-dialog[hidden] { display: none; }
.structure-permission-dialog {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(16, 42, 40, 0.42);
  backdrop-filter: blur(5px);
}

.structure-permission-card {
  width: min(760px, 100%);
  overflow: hidden;
  border: 1px solid var(--theme-line-strong);
  border-radius: 12px;
  background: var(--theme-panel);
  box-shadow: var(--theme-shadow);
}

.structure-permission-card header,
.structure-permission-card footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
}

.structure-permission-card header { border-bottom: 1px solid var(--theme-line); background: var(--theme-panel-muted); }
.structure-permission-card h4 { margin: 4px 0; color: var(--theme-ink); font-size: 1rem; }
.structure-permission-card p { margin: 0; color: var(--theme-ink-soft); font-size: .8rem; }
.structure-permission-card .eyebrow { color: var(--theme-accent); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.structure-permission-card .structure-manual-permissions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 22px; }
.structure-permission-card footer { justify-content: flex-end; border-top: 1px solid var(--theme-line); }

/* Service templates use the same repeatable-field rhythm as client phone numbers. */
.service-template-builder { display: grid; gap: 16px; }
.service-template-builder-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 8px; }
.service-template-builder-head h4 { margin: 0; color: var(--theme-ink); font-size: .94rem; }
.service-template-builder-head p { margin: 4px 0 0; color: var(--theme-ink-soft); font-size: .78rem; }
.service-template-add-menu { position: relative; }
.service-template-add-menu summary { list-style: none; cursor: pointer; }
.service-template-add-menu summary::-webkit-details-marker { display: none; }
.service-template-add-menu summary svg:last-child { width: 15px; height: 15px; }
.service-template-add-menu > div { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; display: grid; width: 220px; padding: 6px; border: 1px solid var(--theme-line); border-radius: 10px; background: #fff; box-shadow: 0 16px 34px rgba(12, 38, 34, .16); }
.service-template-add-menu > div button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--theme-ink); cursor: pointer; font: inherit; font-size: .8rem; font-weight: 750; text-align: left; }
.service-template-add-menu > div button:hover { background: var(--theme-accent-soft); color: var(--theme-accent); }
.service-template-add-menu > div svg { width: 16px; height: 16px; }
.service-template-list { display: grid; gap: 14px; }
.service-template-card { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius); background: var(--theme-panel-muted); }
.service-template-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.service-template-card > header strong { color: var(--theme-ink); font-size: .86rem; }
.service-template-core { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.service-template-fields { display: grid; gap: 8px; }
.service-template-field-row { display: grid; grid-template-columns: 34px minmax(130px, 1.1fr) minmax(110px, .9fr) 120px 100px minmax(150px, 1fr) 68px 38px; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--theme-line); border-radius: 7px; background: #fff; transition: border-color .16s ease, box-shadow .16s ease, opacity .16s ease; }
.service-template-field-row label, .service-template-core label { min-width: 0; }
.field-drag-handle { display: grid; align-self: stretch; min-height: 40px; place-items: center; padding: 0; border: 1px solid var(--theme-line); border-radius: 7px; color: var(--theme-ink-soft); background: var(--theme-panel-muted); cursor: grab; }
.field-drag-handle:active { cursor: grabbing; }
.field-drag-handle:hover, .field-drag-handle:focus-visible { color: var(--theme-accent); border-color: var(--theme-accent); background: var(--theme-accent-soft); outline: 0; }
.field-drag-handle svg { width: 17px; height: 17px; }
.field-order-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; min-height: 40px; }
.field-order-controls .icon-button { width: 32px; min-width: 32px; height: 40px; min-height: 40px; padding: 0; }
.field-order-controls svg { width: 15px; height: 15px; }
.service-template-field-row.is-dragging { opacity: .48; }
.service-template-field-row.is-drop-target { border-color: var(--theme-accent); box-shadow: 0 0 0 3px var(--theme-accent-soft); }
.service-template-options { min-width: 0; }
.service-template-rdp { border-top: 1px solid var(--theme-line); padding-top: 12px; }
.service-template-rdp summary { color: var(--theme-accent); cursor: pointer; font-size: .8rem; font-weight: 800; }
.service-template-rdp .service-template-core { margin-top: 12px; }
.service-template-session-map { display: grid; gap: 12px; border-top: 1px solid var(--theme-line); padding-top: 14px; }
.service-template-session-map > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.service-template-session-map strong { color: var(--theme-ink); font-size: .84rem; }
.service-template-session-map p { margin: 3px 0 0; color: var(--theme-ink-soft); font-size: .74rem; }
.service-template-empty { margin: 0; padding: 18px; border: 1px dashed var(--theme-line-strong); border-radius: var(--theme-radius); color: var(--theme-ink-soft); font-size: .8rem; text-align: center; }
.template-table-wrap { overflow-x: auto; border: 1px solid var(--theme-line); border-radius: var(--theme-radius); background: #fff; }
.template-table { width: 100%; min-width: 520px; border-collapse: collapse; }
.template-table th, .template-table td { padding: 12px 14px; border-bottom: 1px solid var(--theme-line); text-align: left; vertical-align: middle; }
.template-table th { color: var(--theme-ink-soft); background: var(--theme-panel-muted); font-size: .72rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.template-table tr:last-child td { border-bottom: 0; }
.template-table td strong, .template-table td small { display: block; }
.template-table td small { margin-top: 3px; color: var(--theme-ink-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; }
.template-table-empty { padding: 22px !important; color: var(--theme-ink-soft); text-align: center !important; }
.template-row-menu { display: inline-flex; }
.template-row-trigger { width: 34px; height: 34px; min-height: 34px; padding: 0; }
.template-row-popover { position: fixed; top: var(--template-menu-top, 0); left: var(--template-menu-left, 0); z-index: 620; min-width: 188px; padding: 6px; border: 1px solid var(--theme-line); border-radius: 9px; background: #fff; box-shadow: 0 14px 28px rgba(12, 38, 34, .16); }
.template-row-popover[hidden] { display: none; }
.template-row-popover button, .template-action-disabled { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 9px; border: 0; border-radius: 6px; color: var(--theme-ink); background: transparent; font: inherit; font-size: .78rem; text-align: left; }
.template-row-popover button:hover { color: var(--theme-accent); background: var(--theme-accent-soft); }
.template-action-disabled { color: var(--theme-ink-soft); cursor: not-allowed; }
.row-action-popover {
  z-index: 520;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Table menus float above the viewport without changing their table's scroll
 * behavior.  Changing table overflow while a menu is open made wide inventory
 * rows expand the complete workspace and pushed action controls off-screen. */
.row-action-menu,
.template-row-menu { position: static; isolation: auto; }
.row-action-popover,
.template-row-popover {
  position: fixed;
  z-index: 1000;
  width: min(220px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100svh - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.row-action-popover button,
.row-action-popover a,
.template-row-popover button,
.template-action-disabled { min-width: 0; overflow-wrap: anywhere; }
.row-action-popover a { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 6px; color: var(--theme-ink); font: inherit; font-size: .78rem; text-decoration: none; }
.row-action-popover a:hover { color: var(--theme-accent); background: var(--theme-accent-soft); }
.document-file-action-menu { display: inline-flex; justify-content: flex-end; position: static; }
.document-file-action-menu .row-action-trigger { width: 34px; height: 34px; min-height: 34px; }
.document-file-action-menu .row-action-popover { min-width: 184px; }
.document-file-action-menu .row-action-popover .danger { color: var(--theme-danger, #a33b39); }
.table-preference-toolbar { display: flex; justify-content: flex-end; align-items: center; min-height: 0; padding: 8px 10px; border-bottom: 1px solid var(--theme-line); background: var(--theme-panel-muted); }
.table-preference-trigger { width: 36px; min-width: 36px; min-height: 34px !important; padding: 7px !important; justify-content: center; font-size: .75rem !important; }
.table-preference-popover { position: fixed; top: var(--table-preference-top, 0); left: var(--table-preference-left, 0); z-index: 1100; width: min(320px, calc(100vw - 24px)); max-height: min(560px, calc(100svh - 24px)); overflow: auto; padding: 14px; border: 1px solid var(--theme-line); border-radius: 12px; background: #fff; box-shadow: 0 18px 40px rgba(12, 38, 34, .2); }
.table-preference-popover[hidden] { display: none; }
.table-preference-popover > strong { display: block; color: var(--theme-ink); font-size: .82rem; }
.table-preference-popover > p { margin: 3px 0 12px; color: var(--theme-ink-soft); font-size: .72rem; }
.table-preference-fields { display: grid; gap: 10px; }
.table-preference-fields label { display: grid; grid-template-columns: minmax(0, 1fr) 110px 48px; align-items: center; gap: 8px; color: var(--theme-ink-soft); font-size: .72rem; }
.table-preference-fields input[type="range"] { width: 100%; accent-color: var(--theme-accent); }
.table-preference-fields output { color: var(--theme-ink); font-variant-numeric: tabular-nums; text-align: right; }
.table-preference-reset { margin-top: 12px; min-height: 32px !important; padding: 6px 10px !important; font-size: .72rem !important; }
.table-column-resizable { position: relative; }
.table-column-resizer { position: absolute; inset-block: 0; inset-inline-end: -7px; z-index: 2; width: 14px; cursor: col-resize; touch-action: none; }
.table-column-resizer::after { content: ""; position: absolute; inset-block: 8px; inset-inline-start: 6px; width: 2px; border-radius: 2px; background: transparent; transition: background .15s ease; }
.table-column-resizer:hover::after, .table-column-resizer:focus-visible::after { background: var(--theme-accent); }
.session-takeover-modal { max-width: 520px; border-top: 4px solid var(--theme-danger, #b43d3a); }
.session-takeover-countdown { margin: 14px 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--theme-danger, #b43d3a) 35%, var(--theme-line)); border-radius: 10px; color: var(--theme-danger, #b43d3a); background: color-mix(in srgb, var(--theme-danger, #b43d3a) 8%, #fff); font-weight: 700; }
.admin-session-monitor { margin-bottom: 18px; }
.sessions-admin-table td, .sessions-admin-table th { white-space: nowrap; }
.sessions-admin-table td:last-child { text-align: right; }
.table-column-resizable:hover { background: color-mix(in srgb, var(--theme-panel-muted) 82%, var(--theme-accent)); }
.table-wrap.table-menu-open,
.table-wrap:has(.row-action-popover:not([hidden])) {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  position: static;
  z-index: auto;
}
.template-table td:last-child { width: 58px; min-width: 58px; text-align: right; }
.template-row-menu { justify-content: flex-end; }

/* Shared action contract: icon and label are always centered and labels never
 * disappear at hover, focus, or narrow responsive widths. */
.btn,
.table-action,
.query-controls button,
.hero-actions > button,
.modal-footer .btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: max-content;
  min-height: 42px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: visible;
}
.btn > span,
.table-action > span,
.query-controls button > span,
.hero-actions > button > span,
.modal-footer .btn > span {
  display: inline-block;
  min-width: 0;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
.btn > svg,
.table-action > svg,
.query-controls button > svg,
.hero-actions > button > svg,
.modal-footer .btn > svg {
  flex: 0 0 auto;
}
.hero-actions,
.record-actions,
.table-actions,
.modal-footer {
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .hero-actions > button,
  .modal-footer .btn {
    flex: 1 1 auto;
    min-width: max-content;
  }
  .modal-footer { align-items: stretch; }
}

/* Permission-aware global search ------------------------------------------------ */
.global-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-width: 10.75rem;
  height: 2.7rem;
  padding: 0 .7rem .0rem .85rem;
  color: var(--theme-muted, #46645d);
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #c5d8d2);
  border-radius: .72rem;
  font: inherit;
  font-size: .86rem;
  font-weight: 750;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}
.global-search-trigger:hover, .global-search-trigger:focus-visible { color: var(--theme-primary, #006d5b); border-color: var(--theme-primary, #006d5b); box-shadow: 0 .35rem 1.1rem rgb(0 79 65 / .12); outline: 0; transform: translateY(-1px); }
.global-search-trigger i { width: 1rem; height: 1rem; }
.global-search-trigger kbd, .global-search-header kbd, .global-search-footer kbd { padding: .14rem .34rem; color: var(--theme-muted, #46645d); background: color-mix(in srgb, var(--theme-muted, #46645d) 8%, white); border: 1px solid color-mix(in srgb, var(--theme-muted, #46645d) 20%, transparent); border-radius: .28rem; font: 700 .7rem/1 Manrope, sans-serif; }
.global-search-trigger kbd { margin-left: auto; }
.global-search-overlay[hidden] { display: none !important; }
.global-search-overlay { position: fixed; z-index: 10050; inset: 0; display: none; place-items: start center; padding: min(13vh, 7rem) 1rem 1rem; background: rgb(6 28 23 / .52); backdrop-filter: blur(6px); }
.global-search-overlay.is-open { display: grid; }
.global-search-dialog { width: min(44rem, 100%); overflow: hidden; background: var(--theme-surface, #fff); border: 1px solid rgb(255 255 255 / .46); border-radius: 1rem; box-shadow: 0 1.5rem 4.5rem rgb(0 30 24 / .34); animation: global-search-enter .16s ease-out both; }
.global-search-header { display: flex; align-items: center; gap: .75rem; min-height: 4rem; padding: .65rem 1rem; border-bottom: 1px solid var(--theme-line, #d6e3df); }
.global-search-header > i { width: 1.3rem; height: 1.3rem; color: var(--theme-primary, #006d5b); }
.global-search-header input { width: 100%; min-width: 0; padding: .45rem 0; color: var(--theme-ink, #102c26); background: transparent; border: 0; outline: 0; font: 750 1rem/1.45 Manrope, sans-serif; }
.global-search-header input::placeholder { color: var(--theme-muted, #6a817a); font-weight: 550; }
.global-search-keyhint { display: inline-flex; align-items: center; gap: .3rem; color: var(--theme-muted, #55716a); font-size: .7rem; white-space: nowrap; }
.global-search-close { display: grid; place-items: center; flex: 0 0 auto; width: 2.15rem; height: 2.15rem; padding: 0; color: var(--theme-muted, #46645d); background: transparent; border: 1px solid var(--theme-line, #d6e3df); border-radius: .55rem; cursor: pointer; }
.global-search-close:hover, .global-search-close:focus-visible { color: var(--theme-primary, #006d5b); background: color-mix(in srgb, var(--theme-primary, #006d5b) 8%, white); border-color: var(--theme-primary, #006d5b); outline: 0; }
.global-search-close i { width: 1rem; height: 1rem; }
.global-search-hint { padding: .65rem 1rem; color: var(--theme-muted, #55716a); background: color-mix(in srgb, var(--theme-primary, #006d5b) 4%, white); border-bottom: 1px solid var(--theme-line, #d6e3df); font-size: .78rem; line-height: 1.4; }
.global-search-results { max-height: min(58vh, 34rem); overflow: auto; overscroll-behavior: contain; padding: .5rem; }
.global-search-result { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; width: 100%; padding: .72rem; color: inherit; text-decoration: none; border: 1px solid transparent; border-radius: .72rem; }
.global-search-result:hover, .global-search-result.active, .global-search-result:focus-visible { color: inherit; background: color-mix(in srgb, var(--theme-primary, #006d5b) 7%, white); border-color: color-mix(in srgb, var(--theme-primary, #006d5b) 28%, transparent); outline: 0; }
.global-search-result-icon { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; color: var(--theme-primary, #006d5b); background: color-mix(in srgb, var(--theme-primary, #006d5b) 10%, white); border-radius: .58rem; }
.global-search-result-icon i { width: 1.1rem; height: 1.1rem; }
.global-search-result-copy { display: grid; min-width: 0; gap: .12rem; }
.global-search-result-copy strong, .global-search-result-copy small, .global-search-result-copy em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-search-result-copy strong { color: var(--theme-ink, #102c26); font-size: .9rem; }
.global-search-result-copy small { color: var(--theme-muted, #55716a); font-size: .77rem; font-weight: 650; }
.global-search-result-copy em { color: color-mix(in srgb, var(--theme-muted, #55716a) 88%, white); font-size: .74rem; font-style: normal; }
.global-search-result-type { align-self: start; padding: .2rem .42rem; color: var(--theme-primary, #006d5b); background: color-mix(in srgb, var(--theme-primary, #006d5b) 8%, white); border-radius: 999px; font-size: .67rem; font-weight: 800; white-space: nowrap; }
.global-search-state { display: grid; place-items: center; gap: .6rem; min-height: 12rem; padding: 1rem; color: var(--theme-muted, #55716a); text-align: center; }
.global-search-state i { width: 1.5rem; height: 1.5rem; color: var(--theme-primary, #006d5b); }
.global-search-state p { margin: 0; max-width: 28rem; line-height: 1.45; }
.global-search-spinner { width: 1.4rem; height: 1.4rem; border: 2px solid color-mix(in srgb, var(--theme-primary, #006d5b) 20%, transparent); border-top-color: var(--theme-primary, #006d5b); border-radius: 50%; animation: global-search-spin .7s linear infinite; }
@keyframes global-search-spin { to { transform: rotate(360deg); } }
@keyframes global-search-enter { from { opacity: 0; transform: translateY(-.7rem) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.global-search-footer { display: flex; justify-content: space-between; gap: .75rem; padding: .7rem 1rem; color: var(--theme-muted, #55716a); border-top: 1px solid var(--theme-line, #d6e3df); font-size: .72rem; }
.global-search-footer span { display: inline-flex; align-items: center; gap: .2rem; }
@media (max-width: 760px) {
  .global-search-trigger { min-width: auto; width: 2.7rem; padding: 0; justify-content: center; }
  .global-search-trigger span, .global-search-trigger kbd { display: none; }
  .global-search-overlay { padding: max(1rem, env(safe-area-inset-top)) .65rem .65rem; place-items: start center; }
  .global-search-dialog { margin-top: .5rem; border-radius: .85rem; }
  .global-search-keyhint span { display: none; }
  .global-search-result { grid-template-columns: 2.3rem minmax(0, 1fr); }
  .global-search-result-type { display: none; }
  .global-search-footer span:last-child { display: none; }
}

/* Client portal localization: direction follows the language selected on the
   Client record.  Keep direction here so templates remain layout-neutral. */
html[dir="rtl"] body { font-family: "Tahoma", "Arial", "Manrope", sans-serif; }
html[dir="rtl"] .client-shell { flex-direction: row-reverse; }
html[dir="rtl"] .client-side-nav { border-right: 0; border-left: 1px solid var(--nav-border); }
html[dir="rtl"] .client-side-nav .nav-link,
html[dir="rtl"] .client-side-nav .brand,
html[dir="rtl"] .client-content,
html[dir="rtl"] .client-portal-table,
html[dir="rtl"] .client-profile-panel,
html[dir="rtl"] .login-panel { text-align: right; }
html[dir="rtl"] .client-side-nav .nav-link { justify-content: flex-start; }
html[dir="rtl"] .topbar-actions { flex-direction: row-reverse; }
html[dir="rtl"] .client-scope-switcher { text-align: right; }
html[dir="rtl"] .client-portal-table th,
html[dir="rtl"] .client-portal-table td { text-align: right; }
html[dir="rtl"] .login-form label,
html[dir="rtl"] .login-secondary-link,
html[dir="rtl"] .login-signal-list { direction: rtl; }
html[dir="rtl"] .login-form label i { order: 2; }
html[dir="rtl"] .login-main-action i { order: 2; }
@media (max-width: 800px) {
  html[dir="rtl"] .client-shell { flex-direction: column; }
  html[dir="rtl"] .client-side-nav { border-left: 0; border-bottom: 1px solid var(--nav-border); }
}
.inventory-filter-panel { padding: 22px 26px; }
.inventory-query-controls {
  grid-template-columns: minmax(240px, 1.15fr) minmax(220px, 1fr) minmax(180px, .78fr) !important;
  align-items: start;
}
.inventory-query-controls > label { padding-bottom: 0 !important; }
.inventory-query-controls .query-actions { width: 100%; min-width: 0; }
.inventory-query-controls .query-actions .btn { width: 100%; min-width: 0; }
/* Keep the Inventory client picker compact and aligned with Search/Load. */
.inventory-query-controls > label:first-child { width: min(100%, 420px); }
.inventory-query-controls > label:first-child .multi-select-shell { width: 100%; }
.inventory-query-controls > label { min-width: 0; }
.inventory-query-controls .multi-select-label { max-width: calc(100% - 42px); }

.inventory-client-select { min-width: 0; }
.inventory-client-select > small { display: block; margin-top: 6px; color: var(--theme-ink-soft); font-size: .7rem; font-weight: 600; line-height: 1.35; }
.inventory-filter-hint { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; color: var(--theme-ink-soft); font-size: .75rem; font-weight: 650; line-height: 1.4; }
.inventory-filter-hint svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; color: var(--theme-accent); }

/* Inventory is a template-first workspace: the selected template controls the
 * table schema. The template rail stays beside the data grid on desktop and
 * becomes a horizontal rail only when the viewport is too narrow. */
.default-template-picker { display: grid; gap: 7px; max-width: 640px; margin: 0 0 16px; color: var(--theme-ink-soft); font-size: .78rem; font-weight: 750; }
.default-template-picker select { min-height: 42px; background: var(--theme-panel-muted); border-color: var(--theme-line-strong); color: var(--theme-ink); font-weight: 750; }
.inventory-template-workspace { display: grid; grid-template-columns: minmax(220px, 272px) minmax(0, 1fr); align-items: start; gap: 22px; margin-top: 4px; }
.inventory-template-workspace.template-rail-collapsed { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
.inventory-template-content { min-width: 0; }
.inventory-template-views { position: sticky; top: 84px; min-width: 0; max-height: calc(100svh - 120px); padding: 10px; overflow: auto; border: 1px solid var(--theme-line); border-radius: var(--theme-radius); background: linear-gradient(180deg, #fbfcfb, var(--theme-panel-muted)); box-shadow: inset 0 1px 0 rgba(255,255,255,.78); scrollbar-width: thin; }
.inventory-template-rail-toggle { width: 100%; min-width: 0; height: 34px; min-height: 34px; margin: 0 0 8px; padding: 0; color: var(--theme-ink-soft); background: rgba(255,255,255,.72); }
.inventory-template-rail-toggle:hover, .inventory-template-rail-toggle:focus-visible { color: var(--theme-accent); border-color: var(--theme-accent); background: var(--theme-accent-soft); }
.inventory-template-rail-toggle svg { width: 17px; height: 17px; }
.template-rail-collapsed .inventory-template-views { padding: 6px; overflow: visible; }
.template-rail-collapsed .inventory-template-rail-toggle { margin: 0; }
.template-rail-collapsed .inventory-template-tabs { display: none; }
.inventory-template-tabs { display: grid; gap: 5px; }
.inventory-template-empty { margin: 0; padding: 10px 7px; color: var(--theme-ink-soft); font-size: .75rem; font-weight: 650; line-height: 1.4; }
.license-reminder-schedule { display: flex; align-items: flex-start; gap: 10px; min-height: 54px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--theme-accent) 25%, var(--theme-line)); border-radius: var(--theme-radius-sm); background: var(--theme-accent-soft); color: var(--theme-ink); }
.license-reminder-schedule svg { flex: 0 0 auto; width: 19px; height: 19px; color: var(--theme-accent); }
.license-reminder-schedule div { display: grid; gap: 3px; min-width: 0; }
.license-reminder-schedule strong { font-size: .8rem; }
.license-reminder-schedule span { color: var(--theme-ink-soft); font-size: .75rem; font-weight: 650; line-height: 1.4; }
.inventory-modal-card { width: min(1040px, calc(100vw - 32px)); max-height: min(88svh, 52rem); }
.inventory-modal-card .inventory-form { gap: 14px; padding-block: 18px; }
.inventory-modal-card .inventory-form > .form-section { margin: 0; }
.inventory-form .license-purchase-map { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); background: var(--theme-panel-muted); }
.inventory-form .license-purchase-map .form-section-head { min-height: 0; }
.inventory-form .license-purchase-picker { min-width: 0; }
.inventory-form .license-purchase-picker > label { display: grid; gap: 7px; min-width: 0; }
@media (max-width: 700px) { .inventory-modal-card { width: min(100vw - 16px, 1040px); max-height: calc(100svh - 16px); } .inventory-modal-card .inventory-form { padding: 14px; } }
.inventory-template-tabs::before { padding: 5px 7px 10px; color: var(--theme-ink-soft); content: "TEMPLATE VIEWS"; font-size: .66rem; font-weight: 850; letter-spacing: .09em; }
.inventory-template-tabs button { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 10px 11px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--theme-ink-soft); font: inherit; font-size: .78rem; font-weight: 760; text-align: left; cursor: pointer; transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease; }
.inventory-template-tabs button:hover { color: var(--theme-accent); background: var(--theme-accent-soft); }
.inventory-template-tabs button.active { border-color: var(--theme-accent); color: #fff; background: var(--theme-accent); box-shadow: 0 4px 10px rgba(6, 75, 62, .18); }
.inventory-template-tab-copy { display: grid; min-width: 0; gap: 2px; }
.inventory-template-tab-copy strong { overflow: hidden; color: currentColor; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.inventory-template-tab-copy small { overflow: hidden; color: currentColor; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .63rem; font-weight: 650; opacity: .7; text-overflow: ellipsis; white-space: nowrap; }
.inventory-template-tabs em { display: inline-grid; flex: 0 0 auto; min-width: 21px; height: 21px; place-items: center; padding: 0 5px; border-radius: 999px; background: rgba(12, 38, 34, .08); color: currentColor; font-size: .67rem; font-style: normal; line-height: 1; }
.inventory-template-tabs button.active em { background: rgba(255, 255, 255, .18); }
.inventory-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 12px 2px 0; color: var(--theme-ink-soft); font-size: .76rem; font-weight: 700; }
.inventory-pagination > div { display: inline-flex; align-items: center; gap: 8px; }
.inventory-pagination .btn { min-height: 36px; padding: 7px 10px; font-size: .75rem; }
.inventory-pagination .btn:disabled { opacity: .5; cursor: not-allowed; }
.inventory-page-number { min-width: 94px; text-align: center; color: var(--theme-ink); font-variant-numeric: tabular-nums; }
.inventory-empty-state { padding: 28px !important; color: var(--theme-ink-soft); text-align: center; }
.table-cell-ellipsis,
.audit-cell-primary,
.audit-cell-secondary,
.audit-details-context {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inventory-table { width: 100%; min-width: 760px; table-layout: fixed; }
.inventory-table .inventory-id-column,
.inventory-table .inventory-id-cell { width: 66px; min-width: 66px; max-width: 66px; }
.inventory-table .inventory-client-column,
.inventory-table .inventory-client-cell { width: 172px; max-width: 172px; }
.inventory-table .inventory-field-column,
.inventory-table .inventory-field-cell { width: 220px; max-width: 220px; }
.inventory-table .inventory-access-column,
.inventory-table .inventory-access-cell { width: 116px; max-width: 116px; }
.inventory-table .inventory-actions-column,
.inventory-table .inventory-actions-cell { width: 68px; }
.inventory-table .inventory-id-column { padding-right: 6px; color: var(--theme-ink-soft); text-align: left; }
.inventory-table .inventory-id-cell { display: table-cell; padding-right: 6px; vertical-align: middle; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--theme-ink-soft); }
.inventory-id-content { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.inventory-id-label { display: inline-block; min-width: 25px; color: var(--theme-ink-soft); font-size: .78rem; font-weight: 780; letter-spacing: -.01em; }
.inventory-id-cell .inventory-copy-value { width: 22px; min-width: 22px; height: 22px; min-height: 22px; padding: 0; opacity: .38; border-color: transparent; background: transparent; color: var(--theme-ink-soft); }
.inventory-id-cell .inventory-copy-value svg { width: 13px; height: 13px; }
.inventory-id-cell:hover .inventory-copy-value, .inventory-id-cell .inventory-copy-value:focus-visible, .inventory-id-cell .inventory-copy-value.is-copied { opacity: 1; border-color: var(--theme-line); background: var(--theme-panel-muted); color: var(--theme-accent); }
.inventory-table .inventory-actions-cell { white-space: nowrap; }
.task-detail-modal-card { width: min(760px, calc(100vw - 32px)); max-height: min(88svh, 52rem); display: flex; flex-direction: column; overflow: hidden; }
.task-detail-content { min-width: 0; overflow: auto; overscroll-behavior: contain; padding: 4px 24px 22px; }
.task-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.task-detail-grid > div { min-width: 0; padding: 13px 14px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); background: var(--theme-panel-muted); }
.task-detail-grid dt { margin: 0 0 5px; color: var(--theme-ink-soft); font-size: .67rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.task-detail-grid dd { margin: 0; color: var(--theme-ink); font-size: .84rem; font-weight: 760; line-height: 1.45; overflow-wrap: anywhere; }
.task-detail-grid .wide-task-detail { grid-column: 1 / -1; }
.task-checkup-work-items { display: grid; gap: 11px; margin-top: 18px; padding: 15px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); background: var(--theme-panel); }
.task-checkup-work-items > header { display: flex; align-items: center; gap: 9px; }
.task-checkup-work-items > header > svg { width: 18px; height: 18px; color: var(--theme-accent); }
.task-checkup-work-items > header > div { display: grid; gap: 2px; min-width: 0; }
.task-checkup-work-items > header strong { color: var(--theme-ink); font-size: .82rem; }
.task-checkup-work-items > header span { color: var(--theme-ink-soft); font-size: .72rem; font-weight: 650; line-height: 1.4; }
.task-checkup-work-item-list { display: grid; gap: 8px; }
.task-checkup-work-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 11px 12px; border: 1px solid var(--theme-line); border-radius: 10px; background: var(--theme-panel-muted); }
.task-checkup-work-item > div:first-child { display: grid; min-width: 0; gap: 3px; }
.task-checkup-work-item strong { color: var(--theme-ink); font-size: .8rem; overflow-wrap: anywhere; }
.task-checkup-work-item > div:first-child > span { color: var(--theme-ink-soft); font-size: .71rem; font-weight: 650; text-transform: capitalize; overflow-wrap: anywhere; }
.task-checkup-work-item-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.task-checkup-work-item-actions .icon-button { width: 34px; min-width: 34px; height: 34px; }
.task-checkup-work-item-actions .icon-button svg { width: 16px; height: 16px; }
#task-detail-actions { display: inline-flex; align-items: center; justify-content: flex-end; flex: 1 1 auto; min-width: 0; }
#task-detail-actions .table-action { min-height: 40px; }
.task-row { cursor: pointer; }
.task-row:hover, .task-row:focus-visible { background: var(--theme-panel-muted); outline: 0; }
.task-detail-timeline { display: grid; gap: 12px; margin-top: 18px; padding: 15px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); background: var(--theme-panel-muted); }
.task-detail-timeline > header { display: flex; align-items: center; gap: 9px; }
.task-detail-timeline > header svg { width: 18px; height: 18px; color: var(--theme-accent); }
.task-detail-timeline > header div { display: grid; gap: 2px; }
.task-detail-timeline > header strong { color: var(--theme-ink); font-size: .82rem; }
.task-detail-timeline > header span { color: var(--theme-ink-soft); font-size: .72rem; font-weight: 650; }
.task-detail-timeline ol { display: grid; gap: 0; margin: 0; padding: 2px 0 0 14px; list-style: none; }
.task-detail-timeline li { position: relative; display: grid; grid-template-columns: 122px minmax(0, 1fr); gap: 10px; padding: 0 0 13px 14px; border-left: 1px solid var(--theme-line); }
.task-detail-timeline li::before { position: absolute; top: 4px; left: -5px; width: 8px; height: 8px; border: 2px solid var(--theme-panel-muted); border-radius: 50%; background: var(--theme-accent); content: ""; }
.task-detail-timeline time { color: var(--theme-ink-soft); font-size: .69rem; font-weight: 750; }
.task-detail-timeline li > div { display: grid; gap: 2px; min-width: 0; }
.task-detail-timeline li strong { color: var(--theme-ink); font-size: .75rem; text-transform: capitalize; }
.task-detail-timeline li span { color: var(--theme-ink-soft); font-size: .74rem; line-height: 1.4; overflow-wrap: anywhere; }
.checkup-queue-controls { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }
.checkup-queue-controls .agent-access-toggle { margin: 0; }
@media (max-width: 560px) { .task-detail-content { padding-inline: 16px; } .task-detail-grid { grid-template-columns: 1fr; } .task-detail-grid .wide-task-detail { grid-column: auto; } .task-detail-modal-card .modal-footer { flex-wrap: wrap; } .task-detail-timeline li { grid-template-columns: 1fr; gap: 3px; } .task-checkup-work-item { align-items: flex-start; flex-direction: column; } .task-checkup-work-item-actions { width: 100%; justify-content: flex-end; } }
.ticket-resolution-links { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--theme-line); border-bottom:1px solid var(--theme-line); }
.ticket-resolution-source { display:grid; gap:.7rem; padding:.75rem; border:1px solid var(--theme-line); border-radius:.7rem; background:var(--theme-panel-muted); }
.ticket-resolution-source > div:first-child { display:grid; gap:.18rem; }
.ticket-resolution-source strong { color:var(--theme-ink); font-size:.82rem; }
.ticket-resolution-source small { color:var(--theme-ink-soft); font-size:.74rem; line-height:1.4; }
.ticket-resolution-mode { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; }
.ticket-resolution-mode label { display:flex; align-items:center; justify-content:center; gap:.42rem; min-block-size:2.3rem; min-inline-size:0; padding:.42rem .65rem; border:1px solid var(--theme-line-strong); border-radius:.6rem; background:var(--theme-surface); color:var(--theme-ink); font-size:.78rem; font-weight:750; cursor:pointer; text-align:center; }
.ticket-resolution-mode label:has(input:checked) { border-color:var(--theme-primary); background:color-mix(in srgb,var(--theme-primary) 10%,var(--theme-surface)); box-shadow:0 0 0 2px color-mix(in srgb,var(--theme-primary) 14%,transparent); }
.ticket-resolution-mode input { inline-size:1rem; block-size:1rem; accent-color:var(--theme-primary); }
@media (max-width: 520px) { .ticket-resolution-mode { grid-template-columns:1fr; } }
.ticket-resolution-links > div { min-width:0; display:grid; gap:3px; }
.ticket-resolution-links strong { color:var(--theme-ink); font-size:.82rem; }
.ticket-resolution-links small { color:var(--theme-ink-soft); font-size:.74rem; line-height:1.4; }
@media (max-width: 640px) { .ticket-resolution-links { align-items:flex-start; flex-direction:column; } }
.audit-table { width: 100%; min-width: 940px; table-layout: fixed; }
.audit-table th:nth-child(1), .audit-table td:nth-child(1) { width: 142px; }
.audit-table th:nth-child(2), .audit-table td:nth-child(2),
.audit-table th:nth-child(3), .audit-table td:nth-child(3) { width: 142px; }
.audit-table th:nth-child(4), .audit-table td:nth-child(4) { width: 170px; }
.audit-table th:nth-child(5), .audit-table td:nth-child(5) { width: 104px; }
.audit-table th:nth-child(6), .audit-table td:nth-child(6) { width: 180px; }
.audit-table td { overflow: hidden; vertical-align: middle; }
.audit-cell-secondary { margin-top: 2px; font-size: .72rem; }
.audit-event-summary { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-details-context { margin-top: 3px; color: var(--theme-ink-soft); font-size: .68rem; }
.inventory-value-cell { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.inventory-value-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-value-text.is-masked { letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.inventory-empty-value { color: var(--theme-ink-soft); }
.inventory-copy-value {
  display: inline-grid;
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  min-width: 27px;
  min-height: 27px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--theme-ink-soft);
  cursor: pointer;
  opacity: .28;
  transition: color .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease, transform .16s ease;
}
.inventory-value-cell:hover .inventory-copy-value,
.inventory-copy-value:focus-visible,
.inventory-copy-value.is-copied { opacity: 1; }
.inventory-copy-value:hover,
.inventory-copy-value:focus-visible { border-color: color-mix(in srgb, var(--theme-accent) 28%, var(--theme-line)); background: var(--theme-accent-soft); color: var(--theme-accent); outline: none; }
.inventory-copy-value:active { transform: scale(.92); }
.inventory-copy-value.is-copied { border-color: color-mix(in srgb, var(--theme-accent) 30%, var(--theme-line)); background: var(--theme-accent); color: #fff; }
.inventory-copy-value svg { width: 14px; height: 14px; stroke-width: 2.25; }
@media (hover: none) { .inventory-copy-value { opacity: .72; } }
.license-renewal-automation { display: grid; gap: 13px; margin-top: 18px; padding: 15px 16px; border: 1px solid color-mix(in srgb, var(--theme-accent) 26%, var(--theme-line)); border-radius: var(--theme-radius); background: color-mix(in srgb, var(--theme-accent-soft) 52%, #fff); }
.license-renewal-automation strong { color: var(--theme-ink); font-size: .85rem; }
.license-renewal-automation p { margin: 4px 0 0; color: var(--theme-ink-soft); font-size: .76rem; line-height: 1.45; }
.license-renewal-automation small { display: block; margin-top: 5px; color: var(--theme-ink-soft); font-size: .7rem; line-height: 1.35; }
@media (max-width: 900px) { .inventory-template-workspace { grid-template-columns: minmax(0, 1fr); } .inventory-template-views { position: static; max-height: none; padding: 4px; overflow-x: auto; overflow-y: hidden; } .inventory-template-tabs { display: inline-flex; min-width: max-content; align-items: stretch; } .inventory-template-tabs::before { display: none; } .inventory-template-tabs button { min-width: max-content; min-height: 38px; } }
@media (max-width: 720px) { .inventory-pagination { align-items: flex-start; flex-direction: column; } }
.session-client-filter { display: grid; grid-template-columns: 420px minmax(0, 1fr) !important; align-items: end; gap: 24px; margin-bottom: 18px; padding: 18px 20px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius); background: var(--theme-panel-muted); }
.session-client-filter .session-client-select { display: grid; width: 420px; max-width: 100%; gap: 7px; color: var(--theme-ink-soft); font-size: .76rem; font-weight: 800; }
.session-client-filter select { width: 100%; min-height: var(--theme-field-height); border: 1px solid var(--theme-line-strong); border-radius: var(--theme-radius-sm); background: #fff; color: var(--theme-ink); font: inherit; }
.session-client-filter .session-client-guidance { display: flex; align-items: flex-start; gap: 10px; max-width: 760px; margin: 0 0 10px; color: var(--theme-ink-soft); font-size: .76rem; font-weight: 650; line-height: 1.45; }
.session-client-guidance strong { display: block; margin-bottom: 2px; color: var(--theme-ink); font-size: .8rem; }
.session-client-filter p svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--theme-accent); }
@media (max-width: 760px) { .session-client-filter { grid-template-columns: 1fr !important; gap: 12px; } .session-client-filter .session-client-select { width: 100%; } .session-client-filter .session-client-guidance { margin: 0; } }
@media (max-width: 1120px) {
  .inventory-query-controls { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .inventory-query-controls .query-actions { grid-column: 1 / -1; width: min(100%, 360px); margin-top: 0; }
}
@media (max-width: 680px) {
  .inventory-filter-panel { padding: 18px; }
  .inventory-query-controls { grid-template-columns: 1fr !important; }
  .inventory-query-controls .query-actions { grid-column: auto; width: 100%; }
}

/* Template field rows share one responsive grid across Service, Device and
 * License editors. Controls wrap in deliberate rows instead of competing for
 * the same horizontal space inside a modal. */
@media (max-width: 1120px) {
  .service-template-modal-body .service-template-field-row {
    grid-template-columns: 38px repeat(3, minmax(0, 1fr));
  }
  .service-template-modal-body .service-template-field-row > .field-drag-handle {
    grid-row: span 2;
  }
  .service-template-modal-body .service-template-field-row > .field-order-controls,
  .service-template-modal-body .service-template-field-row > [data-remove-service-field],
  .service-template-modal-body .service-template-field-row > [data-remove-inventory-field] {
    align-self: end;
  }
}
@media (max-width: 760px) {
  .service-template-modal-card { width: min(100vw - 16px, 720px); max-height: calc(100svh - 16px); }
  .service-template-modal-body .service-template-core { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .service-template-modal-body .service-template-field-row {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: end;
  }
  .service-template-modal-body .service-template-field-row > .field-drag-handle { grid-row: span 4; }
  .service-template-modal-body .field-order-controls { width: 72px; }
  .service-template-modal-body .template-field-toggle,
  .service-template-modal-body .compact-toggle { max-width: 100%; }
}
.service-template-modal-card { width: min(1160px, calc(100vw - 32px)); max-height: min(880px, calc(100vh - 32px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.service-template-modal-body { min-height: 0; overflow: auto; padding: 18px var(--theme-dialog-padding) 22px; background: var(--theme-canvas); }
.service-template-modal-body .service-template-card { border: 0; border-radius: 0; padding: 0; background: transparent; }
.service-template-modal-body .service-template-fields,
.service-template-modal-body .inventory-template-fields { gap: 10px; }
.service-template-modal-body .service-template-field-row { background: #fff; box-shadow: 0 1px 0 rgba(12, 38, 34, .03); }
.service-template-modal-body .service-template-field-row:focus-within { border-color: color-mix(in srgb, var(--theme-accent) 56%, var(--theme-line)); box-shadow: 0 0 0 3px var(--theme-focus); }
.service-template-modal-body .service-template-core { padding: 14px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); background: var(--theme-panel-muted); }
.service-template-modal-body .table-action { justify-self: start; margin-top: 2px; }

/* Template editor — an operational configuration surface, not a plain form.
 * The same treatment applies to Service, Device, and License templates. */
.service-template-modal-card { border-color: color-mix(in srgb, var(--theme-accent) 18%, var(--theme-line)); box-shadow: 0 28px 72px rgba(7, 35, 30, .24); }
.service-template-modal-card .modal-header { position: relative; overflow: hidden; background: linear-gradient(105deg, var(--theme-panel) 0%, color-mix(in srgb, var(--theme-accent-soft) 68%, var(--theme-panel)) 100%); }
.service-template-modal-card .modal-header::after { content: ""; position: absolute; inset: auto -42px -58px auto; width: 190px; height: 190px; border: 26px solid color-mix(in srgb, var(--theme-accent) 8%, transparent); border-radius: 50%; pointer-events: none; }
.service-template-modal-card .modal-header > * { position: relative; z-index: 1; }
.service-template-modal-body { padding: 24px; }
.service-template-modal-body .service-template-card { gap: 20px; }
.service-template-modal-body .service-template-card > header { align-items: center; min-height: 60px; padding: 14px 16px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); background: #fff; box-shadow: 0 5px 18px rgba(12, 38, 34, .045); }
.service-template-modal-body .service-template-card > header strong { font-family: "Space Grotesk", Manrope, sans-serif; font-size: .98rem; letter-spacing: -.01em; }
.service-template-modal-body .service-template-card > header .api-tag { padding: 6px 9px; border-color: color-mix(in srgb, var(--theme-accent) 24%, var(--theme-line)); background: var(--theme-accent-soft); color: var(--theme-accent); }
.service-template-modal-body .service-template-core { position: relative; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding: 18px; border-color: color-mix(in srgb, var(--theme-accent) 16%, var(--theme-line)); background: color-mix(in srgb, var(--theme-accent-soft) 34%, #fff); }
.service-template-modal-body .service-template-core::before { content: "Template identity"; position: absolute; top: -10px; left: 14px; padding: 0 7px; background: var(--theme-canvas); color: var(--theme-accent); font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.service-template-modal-body .service-template-fields,
.service-template-modal-body .inventory-template-fields { position: relative; gap: 10px; padding-top: 28px; }
.service-template-modal-body .service-template-fields::before,
.service-template-modal-body .inventory-template-fields::before { content: "Record fields"; position: absolute; top: 0; left: 0; color: var(--theme-ink); font-family: "Space Grotesk", Manrope, sans-serif; font-size: .88rem; font-weight: 700; }
.service-template-modal-body .service-template-fields::after,
.service-template-modal-body .inventory-template-fields::after { content: "Drag fields to reorder. Use encrypted for values that must remain protected."; position: absolute; top: 1px; right: 0; max-width: 52%; color: var(--theme-ink-soft); font-size: .71rem; font-weight: 650; line-height: 1.35; text-align: right; }
.service-template-modal-body .service-template-field-row { grid-template-columns: 38px minmax(150px, 1.15fr) minmax(130px, 1fr) minmax(122px, .7fr) minmax(126px, .75fr) minmax(160px, 1.05fr) 70px 38px; gap: 10px; align-items: stretch; padding: 13px; border-color: color-mix(in srgb, var(--theme-ink) 10%, var(--theme-line)); border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(12, 38, 34, .035); }
.service-template-modal-body .service-template-field-row:hover { border-color: color-mix(in srgb, var(--theme-accent) 35%, var(--theme-line)); box-shadow: 0 7px 20px rgba(12, 38, 34, .07); }
.service-template-modal-body .service-template-field-row > label { display: grid; align-content: start; gap: 6px; min-width: 0; color: var(--theme-ink-soft); font-size: .68rem; font-weight: 800; letter-spacing: .02em; }
.service-template-modal-body .service-template-field-row > label input,
.service-template-modal-body .service-template-field-row > label select { min-height: 40px; padding: 8px 10px; border: 1px solid var(--theme-line); border-radius: 8px; background: var(--theme-panel); color: var(--theme-ink); font: inherit; font-size: .79rem; font-weight: 700; }
.service-template-modal-body .service-template-field-row > label input:focus,
.service-template-modal-body .service-template-field-row > label select:focus { border-color: var(--theme-accent); box-shadow: 0 0 0 3px var(--theme-focus); outline: 0; }
.service-template-modal-body .field-drag-handle { min-height: 40px; align-self: end; border-radius: 9px; background: var(--theme-panel-muted); }
.service-template-modal-body .field-order-controls { align-self: end; }
.service-template-modal-body .field-order-controls .icon-button,
.service-template-modal-body [data-remove-service-field],
.service-template-modal-body [data-remove-inventory-field] { width: 34px; min-width: 34px; height: 40px; min-height: 40px; border-radius: 9px; }
.service-template-modal-body [data-remove-service-field],
.service-template-modal-body [data-remove-inventory-field] { align-self: end; color: #b33a35; }
.service-template-modal-body .template-field-toggle,
.service-template-modal-body .compact-toggle { grid-template-columns: 32px minmax(0, 1fr) !important; align-content: center !important; align-items: center !important; min-height: 40px; margin-top: auto; padding: 7px 8px; border-radius: 9px; background: var(--theme-panel-muted); }
.service-template-modal-body .template-field-toggle .toggle-indicator,
.service-template-modal-body .compact-toggle .toggle-indicator { inline-size: 30px; block-size: 18px; }
.service-template-modal-body .template-field-toggle .toggle-indicator::after,
.service-template-modal-body .compact-toggle .toggle-indicator::after { inset: 3px auto 3px 3px; inline-size: 12px; }
.service-template-modal-body .template-field-toggle > input:checked + .toggle-indicator::after,
.service-template-modal-body .compact-toggle > input:checked + .toggle-indicator::after { transform: translateX(12px); }
.service-template-modal-body .template-field-toggle > span:last-child,
.service-template-modal-body .compact-toggle > span:last-child { display: grid; gap: 1px; font-size: .7rem; font-weight: 800; line-height: 1.1; }
.service-template-modal-body .template-field-toggle small { color: var(--theme-ink-soft); font-size: .61rem; font-weight: 650; }
.service-template-modal-body .table-action { min-height: 38px; padding: 8px 12px; border: 1px dashed color-mix(in srgb, var(--theme-accent) 42%, var(--theme-line)); border-radius: 9px; color: var(--theme-accent); background: color-mix(in srgb, var(--theme-accent-soft) 45%, #fff); }
.service-template-modal-body .table-action:hover { border-style: solid; background: var(--theme-accent); color: #fff; }
.service-template-modal-body .inventory-template-checkup,
.service-template-modal-body .license-renewal-automation,
.service-template-modal-body .service-template-session-map { padding: 18px; border: 1px solid color-mix(in srgb, var(--theme-accent) 18%, var(--theme-line)); border-radius: 12px; background: #fff; }
.service-template-modal-body .inventory-template-checkup > .toggle-field { margin: 0; }
@media (max-width: 1080px) {
  .service-template-modal-body .service-template-field-row { grid-template-columns: 38px minmax(180px, 1fr) minmax(160px, 1fr) minmax(130px, .75fr); }
  .service-template-modal-body .service-template-field-row > :is(.service-template-options, .template-field-toggle, .compact-toggle, .field-order-controls, [data-remove-service-field], [data-remove-inventory-field]) { grid-column: auto; }
}
@media (max-width: 680px) {
  .service-template-modal-body { padding: 18px; }
  .service-template-modal-body .service-template-fields::after,
  .service-template-modal-body .inventory-template-fields::after { display: none; }
  .service-template-modal-body .service-template-field-row { grid-template-columns: 38px minmax(0, 1fr); }
  .service-template-modal-body .field-drag-handle { grid-row: span 2; }
}
.dynamic-service-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius); background: var(--theme-panel-muted); }
.dynamic-service-fields-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--theme-ink); font-size: .82rem; }
.dynamic-service-fields-head span { color: var(--theme-ink-soft); font-size: .72rem; font-weight: 700; }
@media (max-width: 900px) { .service-template-core, .dynamic-service-fields { grid-template-columns: 1fr 1fr; } .service-template-field-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .service-template-builder-head { align-items: flex-start; flex-direction: column; } .service-template-core, .dynamic-service-fields, .service-template-field-row { grid-template-columns: 1fr; } }

@keyframes aztco-dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-overlay:not([hidden]) .modal-card {
  animation: aztco-dialog-in 180ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .modal-overlay:not([hidden]) .modal-card,
  .modal-form input,
  .modal-form select,
  .modal-form textarea {
    animation: none;
    transition: none;
  }
}

@media (max-width: 900px) {
  .app-shell,
  .client-shell {
    display: flex;
    flex-direction: column;
  }

  .side-nav,
  .client-side-nav {
    position: static;
    width: 100%;
    min-height: 0;
    flex: 0 0 auto;
  }

  .side-nav {
    border-right: 0;
  }

  .client-side-nav {
    gap: 6px;
    padding: 8px 10px;
  }

  .side-nav .nav-menu,
  .client-side-nav .nav-menu {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 8px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  .side-nav .nav-link,
  .client-side-nav .nav-link {
    min-height: 38px;
    flex: 0 0 auto;
    padding: 9px 11px;
    white-space: nowrap;
  }

  .content,
  .client-content {
    width: 100%;
  }

  .modal-overlay {
    place-items: end center;
    padding: 0;
  }

  .topbar {
    position: sticky;
    top: 0;
    flex-direction: row;
    align-items: center;
  }

  .modal-card,
  .client-modal-card,
  .contact-modal-card,
  .client-editor-card,
  .inventory-modal-card,
  .purchase-modal-card,
  .kb-modal-card,
  .structure-modal-card,
  .agent-modal-card,
  .document-modal-card,
  .record-modal-card,
  .ticket-editor-card,
  .ticket-detail-card {
    width: 100%;
    max-height: 92svh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 10px 10px 0 0;
  }

  .modal-header,
  .modal-footer,
  .modal-form,
  .client-editor-form,
  .contact-editor-form,
  .structure-form,
  .kb-form,
  .purchase-form,
  .agent-form,
  .inventory-form,
  .document-form,
  .portal-users-layout,
  .contact-source-layout {
    padding-right: 18px;
    padding-left: 18px;
  }

  .ticket-detail-layout {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px;
  }

  .ticket-reply-panel {
    position: static;
  }

  .dashboard-tasks-head {
    align-items: flex-start;
  }
}

/* Phone and installed-PWA contract. Full-width sheets stay within notches and
 * home-indicator areas, while controls remain usable without browser zoom. */
@media (max-width: 760px) {
  .app-shell, .client-shell { min-height: 100svh; }
  .side-nav, .client-side-nav { padding-top: env(safe-area-inset-top); }
  .content, .client-content { padding-right: max(14px, env(safe-area-inset-right)); padding-left: max(14px, env(safe-area-inset-left)); padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .topbar { top: env(safe-area-inset-top); }
  :where(input, select, textarea, button) { font-size: max(16px, 1rem); }
  :where(input, select, textarea, .multi-select-shell summary) { min-height: 44px; }
  .multi-select-menu { max-width: calc(100vw - max(24px, env(safe-area-inset-left) + env(safe-area-inset-right))) !important; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .multi-select-options label { min-height: 42px; padding-block: 9px; }
  .multi-select-menu > input { min-height: 42px; font-size: 16px; }
  .modal-overlay { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .modal-card { max-height: calc(100svh - env(safe-area-inset-top)); }
  .modal-header { padding-top: max(16px, env(safe-area-inset-top)); }
  .modal-footer { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .query-controls .query-actions, .query-controls > .btn, .query-controls > button { width: 100%; }
  .query-controls .query-actions .btn { flex: 1 1 0; justify-content: center; }
  .record-actions, .hero-actions { width: 100%; }
  .record-actions > .btn, .hero-actions > .btn { flex: 1 1 150px; justify-content: center; }
}

@media (max-width: 420px) {
  .topbar { padding-inline: 12px; }
  .topbar-actions { gap: 5px; }
  .topbar-icon-action { width: 38px; height: 38px; flex-basis: 38px; }
  .modal-footer { align-items: stretch; flex-direction: column-reverse; }
  .modal-footer .btn { width: 100%; min-height: 44px; }
}

/* External Access Policy -------------------------------------------------- */
[data-tab-panel][hidden], [data-external-access-panel][hidden] { display: none !important; }

.settings-workspace { grid-template-columns: minmax(218px, 250px) minmax(0, 1fr); align-items: start; gap: 20px; }
.settings-primary-nav { position: sticky; top: 88px; display: grid; grid-auto-rows: min-content; max-height: calc(100svh - 112px); padding: 8px; overflow: auto; border-color: var(--theme-line); border-radius: var(--theme-radius); background: var(--theme-panel); box-shadow: none; }
.settings-primary-nav button { justify-content: flex-start; width: 100%; min-height: 39px; padding-inline: 11px; border-radius: 8px; text-align: left; }
.settings-primary-nav button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-primary-nav button.active { box-shadow: none; }
.settings-workspace-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.settings-panel-stack { display: grid; min-width: 0; gap: 20px; }
.settings-section-nav { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 11px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); background: var(--theme-panel-muted); }
.settings-section-nav[hidden] { display: none; }
.settings-section-nav-label { flex: 0 0 auto; margin: 0; color: var(--theme-ink-soft); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.settings-section-nav nav { display: flex; min-width: 0; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
.settings-section-nav button { flex: 0 0 auto; min-height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--theme-ink-soft); font: inherit; font-size: .74rem; font-weight: 750; cursor: pointer; }
.settings-section-nav button:hover, .settings-section-nav button:focus-visible { border-color: var(--theme-line-strong); background: var(--theme-panel); color: var(--theme-accent); outline: none; }
.settings-form .tab-panel { display: grid; gap: 20px; min-width: 0; margin: 0; padding: clamp(18px, 2vw, 28px); overflow: clip; border-color: var(--theme-line); box-shadow: none; }
.settings-form .tab-panel > * { min-width: 0; max-width: 100%; }
.settings-form .tab-panel > :is(h3, p) { margin-block: 0; }
.settings-form .tab-panel > .quick-form { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; margin: 0; align-items: start; }
.settings-form .tab-panel > .quick-form > label { min-width: 0; }
.settings-form .tab-panel > .quick-form :is(input, select, textarea) { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
.settings-form .tab-panel:not([hidden]) { animation: settings-panel-enter .18s ease-out; }
.settings-save-bar { position: static; z-index: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; padding: 14px 16px; border: 1px solid var(--theme-line-strong); border-radius: var(--theme-radius); background: var(--theme-panel); box-shadow: 0 8px 20px rgba(12, 38, 34, .08); }
.settings-save-bar > span { color: var(--theme-ink-soft); font-size: .78rem; font-weight: 650; }
.settings-save-bar .btn { flex: 0 0 auto; }
.settings-form .tab-panel > .accounting-settings-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.accounting-settings-grid > :is(label, section) { grid-column: 1 / -1; }
.accounting-settings-grid > label:not(.toggle-field) { max-width: 48rem; }
.accounting-settings-group { display: grid; gap: 16px; margin: 0; padding: 18px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius); background: var(--theme-panel-muted); }
.accounting-settings-group > header h4 { margin: 0 0 4px; color: var(--theme-ink); font-size: .98rem; }
.accounting-settings-group > header p { margin: 0; color: var(--theme-ink-soft); font-size: .8rem; line-height: 1.45; }
.settings-validation-message { display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--theme-danger, #b5473d) 45%, var(--theme-line)); border-radius: var(--theme-radius-sm); background: #fff4f2; color: #923c33; font-size: .82rem; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.settings-validation-message[hidden] { display: none; }
.accounting-remote-target :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--theme-danger, #b5473d); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-danger, #b5473d) 17%, transparent); }
.accounting-settings-group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.accounting-settings-group-grid > label { display: grid; min-width: 0; gap: 7px; }
.accounting-settings-group-grid > label.wide-field { grid-column: 1 / -1; }
.accounting-settings-group-grid small { color: var(--theme-ink-soft); font-size: .73rem; line-height: 1.4; }
.accounting-remote-target { border-color: color-mix(in srgb, var(--theme-accent) 35%, var(--theme-line)); background: color-mix(in srgb, var(--theme-accent-soft) 48%, var(--theme-panel)); }
.accounting-settings-group.is-disabled, #accounting-branch-name-setting.is-disabled { opacity: .58; }
.settings-copy-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.settings-copy-field input { min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; }
@keyframes settings-panel-enter { from { opacity: .45; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1450px) {
  .settings-workspace-content { grid-template-columns: minmax(166px, 188px) minmax(0, 1fr); align-items: start; }
  .settings-panel-stack { grid-column: 2; }
  .settings-section-nav { position: sticky; top: 88px; grid-column: 1; display: grid; gap: 8px; padding: 12px; }
  .settings-section-nav nav { display: grid; gap: 4px; overflow: visible; }
  .settings-section-nav button { width: 100%; padding: 8px 9px; text-align: left; white-space: normal; }
}

.external-access-policy { display: grid; gap: 20px; }
.accounting-balances { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:16px; }
.accounting-balances article { display:grid; gap:4px; padding:16px; border:1px solid var(--theme-line); border-radius:var(--theme-radius); background:var(--theme-panel); }
.accounting-balances article span { color:var(--theme-ink-soft); font-size:.76rem; font-weight:800; letter-spacing:.07em; }
.accounting-balances article strong { font-size:1.2rem; }
.accounting-dialog { width:min(620px,calc(100vw - 32px)); max-height:calc(100svh - 32px); margin:auto; border:1px solid var(--theme-line); padding:0; overflow:hidden; border-radius:var(--theme-radius); background:var(--theme-panel); color:var(--theme-ink); box-shadow:var(--theme-shadow); }
.accounting-dialog::backdrop { background:rgb(0 26 23 / .42); }
.accounting-dialog .modal-form { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:0; max-height:calc(100svh - 32px); padding:0; overflow:hidden; background:var(--theme-panel); }
.accounting-dialog .modal-header { align-items:flex-start; }
.accounting-dialog .modal-header h3 { margin:3px 0 5px; }
.accounting-dialog .modal-header p:not(.eyebrow) { margin:0; color:var(--theme-ink-soft); }
.accounting-dialog-body { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; min-height:0; padding:24px; overflow:auto; background:var(--theme-canvas); }
.accounting-dialog-body .form-grid { gap:14px; }
.accounting-dialog label { display:grid; gap:6px; min-width:0; color:var(--theme-ink); font-weight:750; }
.accounting-dialog .modal-footer { margin:0; }
.accounting-mode-note { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; margin-bottom:16px; border:1px solid #b9d9d2; border-radius:var(--theme-radius); background:#edf8f5; color:var(--theme-ink); }
.accounting-mode-note.remote { border-color:#ecd29d; background:#fff8e8; }
.accounting-mode-note i { margin-top:2px; color:var(--theme-primary); }
.accounting-mode-note div { display:grid; gap:3px; }
.accounting-mode-note span { color:var(--theme-ink-soft); }
.accounting-workspace { display:grid; grid-template-columns:minmax(180px,240px) minmax(0,1fr); gap:16px; align-items:start; }
.accounting-workspace > .page-tabs { position:sticky; top:88px; display:grid; gap:6px; }
.accounting-workspace > .page-tabs button { justify-content:flex-start; }
/* A page without contextual navigation must not reserve an empty sidebar. */
.page-tab-shell--without-sidebar { grid-template-columns:minmax(0, 1fr); }
.page-tab-shell--without-sidebar > .page-tabs { display:none; }
.accounting-workspace.page-tab-shell--without-sidebar { display:block; }
.accounting-remote-handoff { display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:start; max-width:900px; margin-inline:auto; padding:clamp(24px, 4vw, 46px); }
.accounting-remote-handoff-icon { display:grid; place-items:center; width:52px; height:52px; border:1px solid color-mix(in srgb, var(--theme-primary) 32%, var(--theme-line)); border-radius:16px; background:var(--theme-accent-soft); color:var(--theme-primary); }
.accounting-remote-handoff-icon svg { width:25px; height:25px; }
.accounting-remote-handoff h3 { margin:2px 0 8px; color:var(--theme-ink); }
.accounting-remote-handoff p { margin:0; color:var(--theme-ink-soft); line-height:1.6; }
.accounting-remote-handoff > :is(label, .btn) { grid-column:2; }
.accounting-remote-handoff small { display:block; margin-top:8px; color:var(--theme-ink-soft); line-height:1.45; }
.accounting-tab { display:none; min-width:0; }
.accounting-tab.active { display:block; }
.accounting-filter-bar { align-items:start; gap:18px; }
.accounting-filters { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.accounting-filters select, .accounting-filters input { min-width:130px; max-width:180px; }
.accounting-direction { font-weight:800; text-transform:uppercase; font-size:.78rem; letter-spacing:.04em; }
.accounting-direction.in { color:#08715d; }.accounting-direction.out { color:#a64a22; }
.is-disabled { opacity:.58; }.is-disabled :is(select,input,textarea) { cursor:not-allowed; }
@media (max-width: 900px) { .accounting-workspace { grid-template-columns:1fr; }.accounting-workspace > .page-tabs { position:static; display:flex; overflow-x:auto; }.accounting-filter-bar { display:grid; }.accounting-filters { justify-content:flex-start; }.accounting-filters select,.accounting-filters input { flex:1 1 145px; max-width:none; } }
@media (max-width: 600px) { .accounting-dialog { width:calc(100vw - 20px); max-height:calc(100dvh - 20px); }.accounting-dialog .modal-form { max-height:calc(100dvh - 20px); }.accounting-dialog-body { padding:18px; }.accounting-mode-note { font-size:.9rem; }.hero-actions { width:100%; }.hero-actions .btn { flex:1; }.accounting-remote-handoff { grid-template-columns:1fr; }.accounting-remote-handoff > :is(label, .btn) { grid-column:auto; }.settings-copy-field { grid-template-columns:minmax(0,1fr) auto; } }
@media (max-width: 620px) { .inventory-share-method { grid-template-columns: 1fr; } }
.settings-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--theme-line); }
.settings-section-head h3 { margin: 4px 0 6px; }
.settings-section-head p { max-width: 74ch; margin: 0; color: var(--theme-ink-soft); }
.settings-policy-badge { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 8px 11px; border: 1px solid color-mix(in srgb, var(--theme-accent) 30%, var(--theme-line)); border-radius: 999px; background: var(--theme-accent-soft); color: var(--theme-accent); font-size: .75rem; font-weight: 800; }
.external-access-policy-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.external-access-policy-grid > label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; min-width: 0; max-width: 100%; }
.external-access-policy-grid > label > :is(input, select, textarea) { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
.external-access-policy-grid small { color: var(--theme-ink-soft); font-size: .74rem; line-height: 1.45; }
.external-access-toggle { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) !important; align-items: start; gap: 12px !important; padding: 16px; border: 1px solid var(--theme-line); border-radius: 14px; background: var(--theme-panel-muted); }
.external-access-toggle .toggle-indicator { margin-top: 2px; }
.external-access-toggle > span:last-child { display: grid; gap: 4px; min-width: 0; }
.external-access-toggle strong, .external-access-toggle small { display: block; overflow-wrap: anywhere; }
.external-access-template-note { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid #b9d9cf; border-radius: 12px; background: color-mix(in srgb, var(--theme-accent-soft) 65%, #fff); }
.external-access-template-note > svg { width: 21px; height: 21px; flex: 0 0 auto; color: var(--theme-accent); }
.external-access-template-note strong, .external-access-template-note span { display: block; }
.external-access-template-note span { margin-top: 3px; color: var(--theme-ink-soft); font-size: .82rem; line-height: 1.45; }
.external-access-review-queue { display: grid; gap: 12px; padding-top: 4px; }
.external-access-review-queue > header { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.external-access-review-queue h4 { margin: 3px 0 0; }
.external-access-request-table td { vertical-align: middle; }
.external-access-request-table code { overflow-wrap: anywhere; }
.external-access-workspace { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 20px; align-items: start; max-width: 100%; }
.external-access-nav { position: sticky; top: 88px; display: grid; min-width: 0; max-width: 220px; gap: 5px; padding-right: 14px; border-right: 1px solid var(--theme-line); }
.external-access-nav button { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 3px 9px; width: 100%; padding: 11px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--theme-ink-soft); font: inherit; text-align: left; cursor: pointer; }
.external-access-nav button svg { grid-row: span 2; width: 17px; height: 17px; margin-top: 2px; }
.external-access-nav button span { font-size: .83rem; font-weight: 800; }
.external-access-nav button small { font-size: .7rem; line-height: 1.35; }
.external-access-nav button:hover, .external-access-nav button:focus-visible { border-color: var(--theme-line); background: var(--theme-panel-muted); color: var(--theme-ink); outline: none; }
.external-access-nav button.active { border-color: color-mix(in srgb, var(--theme-accent) 30%, var(--theme-line)); background: var(--theme-accent-soft); color: var(--theme-accent); }
.external-access-content { width: 100%; min-width: 0; container-type: inline-size; }
.external-access-subpanel { min-width: 0; }
.external-access-subpanel { display: grid; gap: 18px; }
@container (min-width: 720px) { .external-access-policy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.external-access-shell {
  /* app.css sets `body { height: 100svh; overflow: hidden; }` for the
     authenticated application. Public approval pages must override it fully:
     their content grows naturally and the document scrolls when necessary. */
  height: auto !important;
  min-height: 100svh;
  margin: 0;
  overflow-x: clip !important;
  overflow-y: auto !important;
  background: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--theme-accent, #075f52) 16%, transparent), transparent 35%), var(--theme-canvas, #f3f6f5);
  color: var(--theme-ink);
}
.external-access-viewport {
  display: grid;
  min-height: 100svh;
  grid-template-rows: minmax(min-content, 1fr) auto;
  box-sizing: border-box;
}
.external-access-card {
  box-sizing: border-box;
  width: min(calc(100% - clamp(2rem, 6vw, 5rem)), 38rem);
  max-width: 100%;
  align-self: center;
  justify-self: center;
  margin: clamp(1rem, 3svh, 2.5rem) auto;
  padding: clamp(24px, 5vw, 40px);
  border: 1px solid var(--theme-line);
  border-radius: 20px;
  background: var(--theme-panel);
  box-shadow: var(--theme-shadow);
}
.external-access-brand { display: flex; align-items: center; justify-content: center; gap: .7rem; margin: 0 0 1.2rem; padding: 0 0 1rem; border-bottom: 1px solid var(--theme-line); text-align: left; }
.external-access-brand > span:last-child { display: grid; gap: .1rem; }
.external-access-brand strong { font-size: .95rem; letter-spacing: .01em; }
.external-access-brand small { color: var(--theme-ink-soft); font-size: .72rem; font-weight: 700; }
.external-access-brand-mark { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; overflow: hidden; border-radius: .65rem; background: var(--theme-accent); color: #fff; font-weight: 850; }
.external-access-brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.external-access-brand-mark > span { display: none; }
.external-access-brand-mark.is-fallback > span { display: grid; }
.external-access-brand-mark.is-fallback img { display: none; }
.external-access-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem .55rem; padding: .75rem .5rem max(1rem, env(safe-area-inset-bottom)); color: var(--theme-ink-soft); font-size: .73rem; font-weight: 650; line-height: 1.5; text-align: center; }
.external-access-footer a { color: var(--theme-accent); font-weight: 800; text-decoration: none; }
.external-access-footer a:hover, .external-access-footer a:focus-visible { text-decoration: underline; }
.external-access-card h1 { margin: 7px 0 10px; font-size: clamp(1.7rem, 4vw, 2.35rem); letter-spacing: -.035em; }
.external-access-card > p { color: var(--theme-ink-soft); line-height: 1.6; }
.external-access-mark { display: inline-grid; width: 50px; height: 50px; place-items: center; border-radius: 15px; background: var(--theme-accent); color: #fff; }
.external-access-mark svg { width: 25px; height: 25px; }
.external-access-mark-success { background: #087a63; }
.external-access-form { display: grid; gap: 15px; margin-top: 25px; }
.external-access-form label { display: grid; gap: 7px; }
.external-access-form label > span { font-size: .78rem; font-weight: 800; }
.external-access-form .btn { justify-content: center; min-height: 48px; }
.external-access-email-field { gap: 9px !important; }
.external-access-email-field > span:first-child { color: var(--theme-ink); font-size: .8rem !important; letter-spacing: .01em; }
.external-access-email-control { display: grid !important; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 11px; min-block-size: 58px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--theme-line-strong) 88%, var(--theme-accent)); border-radius: 13px; background: color-mix(in srgb, var(--theme-panel-muted) 82%, #fff); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.external-access-email-control:focus-within { border-color: var(--theme-accent); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent) 15%, transparent); }
.external-access-email-control svg { inline-size: 19px; block-size: 19px; color: var(--theme-accent); }
.external-access-email-control input { min-inline-size: 0; block-size: 54px; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; color: var(--theme-ink); font: 700 1rem/1.2 inherit; letter-spacing: -.01em; box-shadow: none; }
.external-access-email-control input::placeholder { color: color-mix(in srgb, var(--theme-ink-soft) 72%, transparent); font-weight: 600; }
.external-access-email-control:has(input[aria-invalid="true"]) { border-color: var(--theme-danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-danger) 12%, transparent); }
.external-access-email-field small { color: var(--theme-ink-soft); font-size: .74rem; font-weight: 600; line-height: 1.45; }
.external-access-network { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--theme-ink-soft); font-size: .78rem; }
.external-access-network svg { width: 16px; }
.external-access-notice { margin-top: 18px; padding: 12px 14px; border: 1px solid #efd7a4; border-radius: 10px; background: #fff9e9; color: #785400; font-size: .84rem; line-height: 1.45; }
.external-access-footnote { margin-top: 24px; font-size: .76rem; }
.external-access-active-summary { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--theme-accent) 30%, var(--theme-line)); border-radius: 12px; background: var(--theme-accent-soft); color: var(--theme-ink); font-size: .88rem; }
.external-access-active-summary svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--theme-accent); }
.external-access-active-summary code { overflow-wrap: anywhere; font-family: var(--theme-font-mono, ui-monospace, monospace); }
.external-access-expiry { display: flex; align-items: center; gap: 8px; margin: 15px 0 0; color: var(--theme-ink-soft); font-size: .86rem; }
.external-access-expiry svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--theme-accent); }
.external-access-continue { display: flex; justify-content: center; margin-top: 16px; min-height: 48px; }
.access-duration-picker { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; }
.access-duration-picker legend { padding: 0; font-size: .86rem; font-weight: 800; }
.access-duration-picker > p { margin: -5px 0 0; color: var(--theme-ink-soft); font-size: .8rem; line-height: 1.45; }
.access-duration-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 9px; }
.access-duration-option { position: relative; display: block; min-width: 0; cursor: pointer; }
.access-duration-option > input { position: absolute; opacity: 0; pointer-events: none; }
.access-duration-option-body { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 9px; min-height: 76px; padding: 13px; border: 1px solid var(--theme-line); border-radius: 12px; background: var(--theme-panel-muted); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.access-duration-option-body svg { grid-row: span 2; width: 19px; height: 19px; margin-top: 2px; color: var(--theme-ink-soft); }
.access-duration-option-body strong { font-size: .9rem; line-height: 1.2; }
.access-duration-option-body small { color: var(--theme-ink-soft); font-size: .7rem; line-height: 1.3; }
.access-duration-option > input:checked + .access-duration-option-body { border-color: var(--theme-accent); background: var(--theme-accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 15%, transparent); }
.access-duration-option > input:checked + .access-duration-option-body svg { color: var(--theme-accent); }
.access-duration-option > input:focus-visible + .access-duration-option-body { outline: 3px solid color-mix(in srgb, var(--theme-accent) 35%, transparent); outline-offset: 2px; }
.external-access-approval-modal { width: min(590px, calc(100vw - 28px)); }
.external-access-approval-modal .modal-header { align-items: flex-start; }
.external-access-approval-modal .modal-header h3 { margin: 4px 0 6px; }
.external-access-approval-modal .modal-header p:last-child { max-inline-size: 60ch; margin: 0; color: var(--theme-ink-soft); font-size: .8rem; line-height: 1.5; }
.external-access-approval-form { padding-block: 4px 18px; }
.access-duration-modal-picker { gap: 14px; }
.access-duration-modal-picker legend { color: var(--theme-ink); font-size: .88rem; }
.access-duration-modal-picker > p { margin-top: -7px; }
.access-duration-modal-picker .access-duration-options { grid-template-columns: repeat(auto-fit, minmax(154px, 1fr)); }
.access-duration-modal-picker .access-duration-option-body { min-height: 84px; }
@media (max-width: 1080px) { .settings-workspace { grid-template-columns: 210px minmax(0, 1fr); } }
@media (max-width: 900px) { .settings-workspace { grid-template-columns: 1fr; } .settings-primary-nav { position: static; display: flex; max-height: none; padding: 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; } .settings-primary-nav button { flex: 0 0 auto; width: auto; } .settings-primary-nav button span { max-width: 168px; } }
@media (max-width: 760px) { .external-access-workspace { grid-template-columns: 1fr; gap: 14px; } .external-access-nav { position: static; display: flex; max-width: none; padding: 0 0 10px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--theme-line); } .external-access-nav button { flex: 0 0 min(260px, 82vw); } }
@media (max-width: 620px) { .settings-section-head, .external-access-review-queue > header { align-items: flex-start; flex-direction: column; } .external-access-card { padding: 28px 22px; } .access-duration-options, .accounting-settings-group-grid { grid-template-columns: 1fr; } .accounting-settings-group-grid > label.wide-field { grid-column: auto; } .settings-save-bar { align-items: stretch; flex-direction: column; } .settings-save-bar .btn { width: 100%; justify-content: center; } }
@media (max-height: 760px) {
  .external-access-card { align-self: start; }
}

@media (max-width: 680px) {
  .content {
    padding-top: 14px;
  }

  .topbar {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 14px;
  }

  .topbar > div:first-child {
    min-width: 0;
  }

  .topbar-actions {
    gap: 7px;
  }

  .topbar-signed-user {
    display: none;
  }

  .dashboard-tasks-head {
    flex-direction: column;
  }

  .dashboard-tasks-head .btn {
    width: 100%;
    justify-content: center;
  }
  .modal-header {
    min-height: 72px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .modal-header p {
    font-size: 0.75rem;
  }

  .modal-form .form-section,
  .client-editor-form .form-section,
  .contact-editor-form .form-section,
  .structure-form .form-section,
  .kb-form .form-section,
  .purchase-form .form-section,
  .agent-form .form-section,
  .inventory-form .form-section,
  .document-form .form-section {
    padding: 16px;
  }

  .modal-form .form-section-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .modal-form .form-section-title p {
    max-width: none;
  }

  .form-grid-4,
  .form-grid-3,
  .form-grid-2,
  .agent-form .form-grid,
  .structure-manual-permissions {
    grid-template-columns: minmax(0, 1fr);
  }

  .field-span-2,
  .form-grid > .wide-field,
  .modal-form .wide-field {
    grid-column: auto;
  }

  .purchase-renewal-control {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal-footer {
    gap: 8px;
  }

  .modal-footer .btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 10px;
    justify-content: center;
  }

  .modal-footer .btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ticket-detail-layout,
  .ticket-thread,
  .ticket-reply-form {
    padding: 14px;
  }

  .ticket-timeline-event {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
  }

  .ticket-timeline-dot {
    width: 26px;
    height: 26px;
  }

  .ticket-timeline-event:not(:last-child) .ticket-timeline-rail::after {
    top: 30px;
  }

  .ticket-timeline-card {
    padding: 13px;
  }

  .ticket-timeline-card header {
    display: grid;
    gap: 5px;
  }

  .ticket-timeline-empty {
    margin-left: 38px;
  }
}
.sessions-workspace { min-height: 390px; }
.compact-modal { width:min(620px, calc(100vw - 28px)); }
.inventory-template-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.inventory-template-subhead { display:flex; justify-content:space-between; align-items:center; margin:0 0 .7rem; }
.session-protocol-panel { padding-top: 1.5rem; }
.session-launch-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; }
.session-launch-head h3 { margin:0 0 .35rem; }
.session-launch-head p { margin:0; color:var(--muted); }
.session-launch-action { display:flex; align-items:end; gap:.75rem; padding-bottom:.2rem; }
.session-launch-action .api-tag { min-height:2.5rem; display:flex; align-items:center; }
.session-certificate-exception { align-self:end; display:grid; grid-template-columns:auto 1fr; column-gap:.55rem; align-items:center; max-width:19rem; min-height:3.5rem; padding:.55rem .75rem; border:1px solid var(--border); border-radius:.75rem; background:color-mix(in srgb, var(--surface) 92%, #c28b22 8%); font-size:.82rem; line-height:1.25; }
.session-certificate-exception input { grid-row:1 / span 2; width:1rem; height:1rem; margin:0; accent-color:#a56500; }
.session-certificate-exception small { color:var(--muted); font-size:.72rem; }
.session-certificate-exception:has(input:disabled) { opacity:.58; cursor:not-allowed; }
.empty-state { min-height:210px; display:grid; place-content:center; gap:.6rem; text-align:center; color:var(--muted); }
.empty-state i { margin:auto; width:2rem; height:2rem; color:var(--accent); }
@media (max-width: 760px) { .session-launch-head, .session-launch-action { align-items:stretch; flex-direction:column; } .inventory-template-columns { grid-template-columns:1fr; } }

/*
 * Global button integrity layer.
 * Several older page styles set a narrow width or hide overflowing text on
 * hover. Keep one predictable action geometry across heroes, filters, forms,
 * tables and dialogs: the icon never shrinks and the label remains readable.
 */
:where(.btn, .table-action, .panel-tools > button, .quick-form > button,
  .query-controls button, .hero-actions > button, .record-actions > button,
  .table-actions > button, .modal-footer > button, .modal-actions-row > button) {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: max-content;
  max-width: 100%;
  min-height: 42px;
  padding: 10px 16px;
  line-height: 1.2;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal;
  text-align: center;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

:where(.btn, .table-action, .panel-tools > button, .quick-form > button,
  .query-controls button, .hero-actions > button, .record-actions > button,
  .table-actions > button, .modal-footer > button, .modal-actions-row > button) > :where(span, strong) {
  display: block;
  min-width: 0;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

:where(.btn, .table-action, .panel-tools > button, .quick-form > button,
  .query-controls button, .hero-actions > button, .record-actions > button,
  .table-actions > button, .modal-footer > button, .modal-actions-row > button) > :where(svg, i) {
  flex: 0 0 auto;
}

:where(.btn, .table-action, .panel-tools > button, .quick-form > button,
  .query-controls button, .hero-actions > button, .record-actions > button,
  .table-actions > button, .modal-footer > button, .modal-actions-row > button):hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(7, 95, 82, 0.14);
}

:where(.btn, .table-action, .panel-tools > button, .quick-form > button,
  .query-controls button, .hero-actions > button, .record-actions > button,
  .table-actions > button, .modal-footer > button, .modal-actions-row > button):focus-visible {
  outline: 3px solid var(--theme-focus);
  outline-offset: 2px;
}

:where(.hero-actions, .panel-tools, .query-actions, .record-actions, .table-actions, .modal-footer, .modal-actions-row) {
  align-items: center;
  flex-wrap: wrap;
}

/* Secondary actions use the same readable interaction contract as the primary
 * Add action.  The legacy `.btn:hover` rule otherwise paints the background
 * dark while leaving a secondary button's text dark as well. */
.btn.btn-secondary:hover,
.btn.btn-secondary:focus-visible,
.btn.btn-secondary:active,
.hero-actions > .btn-secondary:hover,
.record-actions > .btn-secondary:hover,
.modal-footer > .btn-secondary:hover,
.query-actions > .btn-secondary:hover {
  color: #fff;
  background: var(--theme-accent);
  border-color: var(--theme-accent);
}
.btn.btn-secondary:hover :is(span, svg, i),
.btn.btn-secondary:focus-visible :is(span, svg, i),
.btn.btn-secondary:active :is(span, svg, i) { color: inherit; }

/* Compact switch treatment for boolean operational choices.  The real input
 * remains keyboard accessible while the control reads as a deliberate state,
 * not as a loose browser checkbox. */
.toggle-field {
  grid-auto-flow: column;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  justify-content: start;
  align-items: center;
  gap: 10px !important;
  min-height: var(--theme-field-height);
  padding: 8px 11px;
  border: 1px solid var(--theme-line-strong);
  border-radius: var(--theme-radius-sm);
  background: var(--theme-panel-muted);
  color: var(--theme-ink);
  cursor: pointer;
}
.toggle-field > input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.toggle-indicator { position: relative; display: block; inline-size: 36px; block-size: 20px; border-radius: 999px; background: #b5c5bf; transition: background 150ms ease; }
.toggle-indicator::after { content: ""; position: absolute; inset: 3px auto 3px 3px; inline-size: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(12, 38, 34, .28); transition: transform 150ms ease; }
.toggle-field > input:checked + .toggle-indicator { background: var(--theme-accent); }
.toggle-field > input:checked + .toggle-indicator::after { transform: translateX(16px); }
.toggle-field:has(input:focus-visible) { outline: 3px solid var(--theme-focus); outline-offset: 2px; }
.toggle-field:has(input:checked) { border-color: #89b2a5; background: var(--theme-accent-soft); }

/* The inventory toolbar and compact salary picker use the same field/action
 * baseline as the filter rail, preventing one page from drifting vertically. */
.inventory-panel-head > .record-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.inventory-panel-head > .record-actions .api-tag { white-space: nowrap; }
.salary-hero { align-items: center; }
.agent-salary-history { display: grid; gap: 10px; min-width: 0; }
.agent-salary-history > strong { color: var(--theme-ink); font-size: .85rem; }
.agent-salary-history .table-wrap { max-width: 100%; }
.agent-salary-history .agents-table { min-width: 560px; }
.agent-salary-edit { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); background: var(--theme-panel-muted); }
.agent-salary-edit > div > strong { color: var(--theme-ink); }
.agent-salary-edit > div > p { margin: 4px 0 0; color: var(--theme-ink-soft); font-size: .78rem; line-height: 1.45; }
.agent-salary-edit .record-actions { justify-content: flex-end; }
.agent-salary-history[hidden], .agent-salary-edit[hidden] { display: none; }
.salary-month-control { display: flex; align-items: end; gap: 10px; }
.salary-month-control label { display: grid; gap: 6px; color: var(--theme-ink-soft); font-size: .75rem; font-weight: 800; }
.salary-month-control input,
.salary-month-control select { min-width: 184px; min-height: var(--theme-field-height); padding: 9px 11px; border: 1px solid var(--theme-line-strong); border-radius: var(--theme-radius-sm); background: #fff; color: var(--theme-ink); font: inherit; font-weight: 700; }
.salary-month-control select { min-width: 280px; padding-right: 34px; }
.salary-month-control :is(input, select):focus { outline: 0; border-color: var(--theme-accent); box-shadow: 0 0 0 3px var(--theme-focus); }
.salary-statement-context { min-height: 22px; margin: 0 0 12px; color: var(--theme-ink-soft); font-size: .82rem; font-weight: 700; }
.salary-periods-panel .inventory-panel-head p { margin: 4px 0 0; color: var(--theme-ink-soft); font-size: .78rem; font-weight: 600; }
.salary-summary .metric-card { min-height: 128px; }
.password-mfa-action { display: grid; align-content: end; gap: 6px; min-width: 0; }
.password-mfa-action small { min-height: 18px; color: var(--theme-ink-soft); font-size: .72rem; font-weight: 650; line-height: 1.3; }
.backup-hero { align-items: center; }
.backup-hero .hero-actions { justify-content: flex-end; }
.payroll-workspace-head {
  display: grid;
  grid-template-columns: minmax(240px, .58fr) minmax(0, 1fr);
  gap: 22px 30px;
  align-items: center;
  margin-bottom: 16px;
  padding: 22px 24px;
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius-sm);
  background: var(--theme-panel);
  box-shadow: 0 8px 28px rgba(7, 48, 42, .055);
}
.payroll-workspace-head[hidden],
[data-payroll-primary][hidden],
.payroll-vacations-workspace[hidden],
.payroll-salaries-workspace[hidden],
#salary-review-form [hidden] { display: none !important; }
.payroll-entry-grid [hidden] { display: none !important; }
.payroll-heading { min-width: 0; }
.payroll-heading h3 { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--theme-ink); font-family: "Space Grotesk", Manrope, sans-serif; font-size: clamp(1.15rem, 1.5vw, 1.4rem); letter-spacing: -.025em; }
.payroll-heading h3 svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--theme-accent); }
.payroll-heading p { max-width: 38rem; margin: 8px 0 0; color: var(--theme-ink-soft); font-size: .84rem; font-weight: 600; line-height: 1.55; }
.payroll-command-stack { display: grid; min-width: 0; gap: 9px; }
.payroll-command-bar { display: flex; align-items: end; justify-content: flex-end; flex-wrap: wrap; gap: 10px; min-width: 0; }
.payroll-submit-agent,
.payroll-submit-month { display: grid; flex: 1 1 205px; min-width: min(100%, 205px); gap: 6px; color: var(--theme-ink-soft); font-size: .72rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.payroll-view-month { display: grid; flex: 0 1 180px; gap: 6px; color: var(--theme-ink-soft); font-size: .72rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.payroll-submit-agent { flex-basis: 270px; }
.payroll-submit-agent select,
.payroll-submit-month input,
.payroll-view-month input { width: 100%; min-width: 0; min-height: var(--theme-field-height); padding: 9px 38px 9px 12px; border: 1px solid var(--theme-line-strong); border-radius: var(--theme-radius-sm); background: #fff; color: var(--theme-ink); font: inherit; font-size: .9rem; font-weight: 700; letter-spacing: normal; text-transform: none; }
.payroll-submit-month input { padding-right: 12px; }
.payroll-submit-agent select:focus,
.payroll-submit-month input:focus,
.payroll-view-month input:focus { outline: 0; border-color: var(--theme-accent); box-shadow: 0 0 0 3px var(--theme-focus); }
.payroll-command-bar > .btn { min-height: var(--theme-field-height); white-space: nowrap; }
.payroll-submit-status { min-height: 18px; margin: 0; color: var(--theme-ink-soft); font-size: .78rem; font-weight: 700; line-height: 1.35; text-align: right; }
.payroll-submit-status:not(:empty) { color: var(--theme-accent); }
.payroll-month-report { margin-bottom: 14px; }
.payroll-month-report h3 { margin: 0 0 7px; color: var(--theme-ink); font-size: 1rem; }
.payroll-month-report p { margin: 0; color: var(--theme-ink-soft); line-height: 1.5; }
.transportation-payment-label { display: block; margin-top: 4px; color: var(--theme-ink-soft); font-size: .72rem; font-weight: 700; }
.transportation-detail-card { width: min(700px, calc(100vw - 24px)); min-width: 0; }
#transportation-detail-modal { z-index: 102; }
.transportation-detail-body { min-height: 0; padding: 20px 22px; overflow-y: auto; overscroll-behavior: contain; }
.transportation-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--theme-line); border-radius: 12px; overflow: hidden; background: var(--theme-line); }
.transportation-detail-grid > div { min-width: 0; padding: 12px 14px; background: var(--theme-panel); }
.transportation-detail-grid > .wide { grid-column: 1 / -1; }
.transportation-detail-grid dt { color: var(--theme-ink-soft); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.transportation-detail-grid dd { margin: 4px 0 0; color: var(--theme-ink); font-size: .85rem; font-weight: 700; overflow-wrap: anywhere; }
.transportation-detail-grid a { color: var(--theme-accent); }
.transportation-payment-explanation, .transportation-report-context { margin: 14px 0 0; color: var(--theme-ink-soft); font-size: .82rem; line-height: 1.5; }
#transportation-detail-error:not([hidden]) { margin: 12px 0 0; color: var(--theme-danger, #a22727); font-size: .82rem; font-weight: 700; }
.transportation-history { margin-top: 20px; border-top: 1px solid var(--theme-line); padding-top: 16px; }
.transportation-history h4, .transportation-payment-form h4 { margin: 0 0 8px; color: var(--theme-ink); font-size: .9rem; }
.transportation-history ol { display: grid; gap: 10px; margin: 0; padding-left: 20px; }
.transportation-history li { color: var(--theme-ink); font-size: .78rem; }
.transportation-history li span { display: block; color: var(--theme-ink-soft); }
.transportation-history li p { margin: 3px 0 0; overflow-wrap: anywhere; }
.transportation-payment-form { display: grid; gap: 12px; margin-top: 18px; padding: 16px; border: 1px solid var(--theme-line); border-radius: 12px; background: var(--theme-panel-muted); }
.transportation-payment-form[hidden] { display: none; }
.transportation-payment-form p { margin: 0; color: var(--theme-ink-soft); font-size: .8rem; line-height: 1.45; }
.transportation-payment-form label { display: grid; gap: 6px; color: var(--theme-ink); font-size: .78rem; font-weight: 700; }
.transportation-payment-form label[hidden], .transportation-detail-actions [hidden] { display: none; }
.transportation-payment-form label strong { color: var(--theme-accent); font-size: .7rem; }
.transportation-payment-form input, .transportation-payment-form textarea { width: 100%; border: 1px solid var(--theme-line); border-radius: 8px; padding: 10px; background: var(--theme-panel); color: var(--theme-ink); font: inherit; }
.transportation-payment-form textarea { resize: vertical; }
.transportation-payment-form .modal-actions { margin-top: 2px; }
.transportation-detail-actions { flex-wrap: wrap; }
@media (max-width: 560px) { .transportation-detail-grid { grid-template-columns: 1fr; } .transportation-detail-grid > .wide { grid-column: auto; } .transportation-detail-card .transportation-detail-actions { flex-direction: column-reverse; align-items: stretch; } .transportation-detail-actions > .btn { width: 100%; min-width: 0; flex: 0 0 auto; } }
.salary-history-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.salary-history-filters label { display: grid; flex: 0 1 220px; gap: 6px; color: var(--theme-ink-soft); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.salary-history-filters input, .salary-history-filters select { width: 100%; min-height: var(--theme-field-height); padding: 9px 12px; border: 1px solid var(--theme-line-strong); border-radius: var(--theme-radius-sm); background: #fff; color: var(--theme-ink); font: inherit; font-size: .9rem; font-weight: 700; text-transform: none; }
.salary-history-filters input:focus, .salary-history-filters select:focus { outline: 0; border-color: var(--theme-accent); box-shadow: 0 0 0 3px var(--theme-focus); }
@media (max-width: 620px) {
  .content:has(.payroll-tabs-shell) .topbar { flex-wrap: wrap; }
  .content:has(.payroll-tabs-shell) .topbar > div:first-child { flex: 1 1 100%; }
  .content:has(.payroll-tabs-shell) .topbar-actions { width: 100%; justify-content: flex-end; }
  .payroll-salaries-workspace > .inventory-panel-head { flex-direction: column; align-items: stretch; }
  .payroll-salaries-workspace > .inventory-panel-head .btn { align-self: flex-start; }
}
.backup-explainer { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-left: 3px solid var(--theme-accent); }
.backup-explainer-icon { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: var(--theme-accent-soft); color: var(--theme-accent); }
.backup-explainer-icon svg { width: 22px; height: 22px; }
.backup-explainer strong { display: block; color: var(--theme-ink); font-size: .9rem; }
.backup-explainer p { max-width: 840px; margin: 4px 0 0; color: var(--theme-ink-soft); font-size: .82rem; line-height: 1.45; }
.backup-jobs-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.backup-jobs-table th, .backup-jobs-table td { padding: 12px 14px; border-bottom: 1px solid var(--theme-line); text-align: left; vertical-align: middle; }
.backup-jobs-table th { color: var(--theme-ink-soft); background: var(--theme-panel-muted); font-size: .72rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.backup-modal-card { width: min(680px, calc(100vw - 32px)); overflow: hidden; }
.timesheet-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.timesheet-summary-item { min-width: 0; padding: 18px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius); background: var(--theme-panel); box-shadow: var(--shadow); }
.timesheet-summary-item > span { display: block; color: var(--theme-ink-soft); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.timesheet-summary-item strong { display: block; margin-top: 8px; color: var(--theme-ink); font-size: 1.65rem; line-height: 1.1; }
.timesheet-summary-item small { display: block; margin-top: 8px; color: var(--theme-ink-soft); font-size: .75rem; line-height: 1.4; }
.timesheet-workspace { margin-top: 18px; }
.timesheet-tabs { justify-content: flex-start; padding: 6px; }
.timesheet-tabs button { min-height: 42px; }
.timesheet-tabs button .api-tag { margin-left: 2px; border-color: var(--theme-line); background: var(--theme-panel-muted); color: var(--theme-ink-soft); font-size: .67rem; line-height: 1; white-space: nowrap; }
.timesheet-tabs button.active .api-tag { border-color: color-mix(in srgb, #fff 42%, transparent); background: color-mix(in srgb, #fff 16%, transparent); color: #fff; }
.timesheet-workspace .tab-panel { margin: 0; }
.timesheet-table-panel { overflow: hidden; }
.timesheet-entry-table-wrap { border-top: 1px solid var(--theme-line); overflow-x: auto; overscroll-behavior-inline: contain; }
.timesheet-table { width: 100%; min-width: 1216px; table-layout: fixed; border-collapse: collapse; }
.timesheet-table th, .timesheet-table td { min-width: 0; padding: 13px 14px; border-bottom: 1px solid var(--theme-line); text-align: left; vertical-align: middle; }
.timesheet-table th { background: var(--theme-panel-muted); color: var(--theme-ink-soft); font-size: .68rem; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; white-space: nowrap; }
.timesheet-table td { color: var(--theme-ink); font-size: .8rem; }
.timesheet-table tbody tr { transition: background 150ms ease; }
.timesheet-table tbody tr:hover { background: color-mix(in srgb, var(--theme-accent-soft) 42%, transparent); }
.timesheet-col-started { width: 144px; }
.timesheet-col-agent { width: 148px; }
.timesheet-col-client { width: 172px; }
.timesheet-col-source { width: 104px; }
.timesheet-col-activity { width: 140px; }
.timesheet-col-protocol { width: 82px; }
.timesheet-col-duration { width: 100px; text-align: right !important; }
.timesheet-col-last-active { width: 144px; }
.timesheet-col-review { width: 204px; }
.timesheet-table th.timesheet-col-duration { text-align: right !important; }
.timesheet-table th.timesheet-col-review, .timesheet-table td.timesheet-col-review { text-align: right; }
.timesheet-table time { display: block; overflow: hidden; color: var(--theme-ink-soft); font-size: .75rem; font-variant-numeric: tabular-nums; font-weight: 680; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.timesheet-cell-copy { display: grid; min-width: 0; gap: 3px; }
.timesheet-cell-copy strong { overflow: hidden; color: var(--theme-ink); font-size: .8rem; font-weight: 780; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.timesheet-cell-copy small { overflow: hidden; color: var(--theme-ink-soft); font-size: .69rem; font-weight: 640; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.timesheet-source-badge, .timesheet-protocol-badge, .timesheet-duration { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; border-radius: 999px; font-size: .7rem; font-weight: 780; line-height: 1; white-space: nowrap; }
.timesheet-source-badge { gap: 5px; padding: 0 9px; border: 1px solid var(--theme-line); background: var(--theme-panel-muted); color: var(--theme-ink-soft); }
.timesheet-source-badge svg { width: 13px; height: 13px; }
.timesheet-source-badge.is-remote { border-color: color-mix(in srgb, var(--theme-accent) 30%, var(--theme-line)); background: var(--theme-accent-soft); color: var(--theme-accent); }
.timesheet-protocol-badge { min-width: 42px; padding: 0 8px; border: 1px solid var(--theme-line); background: var(--theme-panel-muted); color: var(--theme-ink-soft); letter-spacing: .035em; }
.timesheet-duration { min-width: 58px; padding: 0 9px; font-variant-numeric: tabular-nums; }
.timesheet-duration.is-productive { background: var(--theme-accent-soft); color: var(--theme-accent); }
.timesheet-duration.is-waiting { background: color-mix(in srgb, var(--theme-panel-muted) 80%, #fff); color: var(--theme-ink-soft); }
.timesheet-review-panel { margin-bottom: 0; overflow: hidden; }
.timesheet-anomaly-list { display: grid; gap: 8px; }
.timesheet-anomaly { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--theme-warning, #b7791f) 35%, var(--theme-line)); border-radius: 12px; background: var(--theme-panel-muted); }
.timesheet-anomaly > i { flex: 0 0 auto; color: var(--theme-warning, #b7791f); }
.timesheet-anomaly div { min-width: 0; flex: 1; }
.timesheet-anomaly strong { display: block; font-size: .78rem; text-transform: capitalize; }
.timesheet-anomaly p { margin: 3px 0 0; color: var(--theme-ink-soft); font-size: .78rem; }
.timesheet-review-control { display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; gap: 6px; min-width: 0; text-align: left; }
.timesheet-review-control select { min-width: 0; width: 100%; min-height: 34px; padding: 5px 8px; font-size: .74rem; }
.timesheet-review-control .icon-button { inline-size: 34px; block-size: 34px; min-height: 34px; padding: 0; }
.timesheet-reviewed { display: inline-flex; align-items: center; min-height: 28px; color: var(--theme-ink-soft); font-size: .72rem; font-weight: 700; }
.session-workspace-controls { display: grid; gap: 8px; margin: 0 0 18px; }
.session-workspace-controls article { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--theme-line); border-radius: 12px; background: var(--theme-panel); }
.session-workspace-controls strong, .session-workspace-controls small { display: block; }
.session-workspace-controls small { margin-top: 3px; color: var(--theme-ink-soft); }
.session-workspace-controls article > div:last-child { display: flex; align-items: center; gap: 6px; }
@media (max-width: 700px) { .timesheet-summary-grid { grid-template-columns: 1fr; } .timesheet-tabs { overflow-x: auto; flex-wrap: nowrap; padding: 5px; } .timesheet-tabs button { flex: 0 0 auto; } .timesheet-table { min-width: 1120px; } .timesheet-table th, .timesheet-table td { padding: 11px 12px; } }
.input-suffix { display: flex; align-items: stretch; min-width: 0; }
.input-suffix input { min-width: 0; border-radius: var(--radius-sm, 10px) 0 0 var(--radius-sm, 10px); }
.input-suffix span { display: grid; place-items: center; padding: 0 .8rem; border: 1px solid var(--line, #d6e1dd); border-left: 0; border-radius: 0 var(--radius-sm, 10px) var(--radius-sm, 10px) 0; color: var(--muted, #58706a); background: var(--surface-soft, #f5f8f7); font-size: .88rem; font-weight: 700; }
.inventory-template-checkup { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line, #d6e1dd); }
.inventory-template-field-row {
  grid-template-columns: 34px minmax(132px, 1.15fr) minmax(118px, .95fr) minmax(116px, .72fr) minmax(170px, 1.2fr) minmax(118px, .75fr) minmax(124px, .8fr) 68px 38px;
  align-items: end;
}
.inventory-template-field-row .compact-toggle {
  grid-auto-flow: column;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  gap: 7px !important;
  min-height: 40px;
  padding: 7px 8px;
  font-size: .72rem;
  font-weight: 750;
}
.inventory-template-field-row .compact-toggle .toggle-indicator { inline-size: 28px; block-size: 17px; }
.inventory-template-field-row .compact-toggle .toggle-indicator::after { inset: 3px auto 3px 3px; inline-size: 11px; }
.inventory-template-field-row .compact-toggle > input:checked + .toggle-indicator::after { transform: translateX(11px); }
.service-template-modal-body .service-template-core .template-name-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.service-template-modal-body .service-template-core .template-name-field > span {
  color: var(--theme-ink-soft);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.service-template-modal-body .service-template-core .template-name-field > small {
  color: var(--theme-ink-soft);
  font-size: .7rem;
  font-weight: 650;
  line-height: 1.35;
}
.service-template-modal-body .service-template-card[data-inventory-kind] .template-name-field {
  grid-column: 1 / -1;
  max-width: 560px;
}

/* A field is a small configuration unit: identity, definition, safeguards,
 * then actions. This avoids the former long flat row where controls appeared
 * to be connected or overlapped at common laptop widths. */
.service-template-modal-body .service-template-field-row {
  grid-template-columns: 38px minmax(280px, 1.2fr) minmax(230px, 1fr) minmax(150px, .64fr) auto;
  align-items: stretch;
}
.service-template-modal-body .template-field-identity,
.service-template-modal-body .template-field-definition {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}
.service-template-modal-body .template-field-identity > label,
.service-template-modal-body .template-field-definition > label {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  color: var(--theme-ink-soft);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.service-template-modal-body .template-field-identity input,
.service-template-modal-body .template-field-definition input,
.service-template-modal-body .template-field-definition select {
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  background: var(--theme-panel);
  color: var(--theme-ink);
  font: inherit;
  font-size: .79rem;
  font-weight: 700;
}
.service-template-modal-body .template-field-identity :is(input, select):focus,
.service-template-modal-body .template-field-definition :is(input, select):focus {
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 3px var(--theme-focus);
  outline: 0;
}
.service-template-modal-body .template-field-definition .service-template-options[hidden] { display: none !important; }
.service-template-modal-body .template-field-definition:has(.service-template-options[hidden]) { grid-template-columns: minmax(0, 1fr); }
.service-template-modal-body .template-field-flags {
  display: grid;
  align-content: end;
  gap: 7px;
  min-width: 0;
}
.service-template-modal-body .template-field-flags .compact-toggle { margin: 0; }
.service-template-modal-body .template-field-actions {
  display: flex;
  align-items: end;
  gap: 7px;
  min-width: max-content;
}
.service-template-modal-body .template-field-actions .field-order-controls { width: 70px; }
@media (max-width: 1080px) {
  .service-template-modal-body .service-template-field-row { grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1fr); }
  .service-template-modal-body .template-field-identity { grid-column: 2 / -1; }
  .service-template-modal-body .template-field-definition,
  .service-template-modal-body .template-field-flags,
  .service-template-modal-body .template-field-actions { grid-column: auto; }
}
@media (max-width: 680px) {
  .service-template-modal-body .service-template-field-row { grid-template-columns: 38px minmax(0, 1fr); }
  .service-template-modal-body .template-field-identity,
  .service-template-modal-body .template-field-definition,
  .service-template-modal-body .template-field-flags,
  .service-template-modal-body .template-field-actions { grid-column: 2; }
  .service-template-modal-body .template-field-identity,
  .service-template-modal-body .template-field-definition { grid-template-columns: minmax(0, 1fr); }
  .service-template-modal-body .template-field-actions { align-items: center; }
}
.device-checkup-actions { display: grid; align-content: end; gap: 7px; min-width: 0; }
.device-checkup-actions .btn { justify-content: center; width: 100%; white-space: nowrap; }
.device-checkup-actions small { min-height: 18px; color: var(--theme-ink-soft); font-size: .72rem; font-weight: 650; line-height: 1.3; }
.template-checkup-summary { margin-top: .9rem; padding: .85rem 1rem; border-left: 3px solid var(--accent, #0b7561); background: var(--surface-soft, #f5f8f7); }
.backup-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.backup-form-grid > label { min-width: 0; }
.launcher-workspace-tabs { margin-top: 18px; }
.launcher-module-hero { min-height: 112px; }
.launcher-module-hero .hero-actions { align-self: center; }
.launcher-request-form { display: grid; gap: 20px; }
.launcher-form-section { display: grid; gap: 18px; padding: 22px 24px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); background: var(--theme-panel-muted); }
.launcher-form-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 15px; border-bottom: 1px solid var(--theme-line); }
.launcher-form-section-head > div { display: grid; gap: 4px; min-width: 0; }.launcher-form-section-head h4 { margin: 0; color: var(--theme-ink); font-size: 1rem; letter-spacing: -.01em; }.launcher-form-section-head p { margin: 0; color: var(--theme-ink-soft); font-size: .82rem; font-weight: 625; line-height: 1.45; }.launcher-form-section-head > svg { flex: 0 0 auto; width: 21px; height: 21px; color: var(--theme-accent); }
#launcher-form .launcher-request-grid,
#launcher-form .launcher-template-fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
#launcher-form .launcher-scope-grid > .launcher-field-client { grid-column: span 4; }
#launcher-form .launcher-scope-grid > .launcher-field-template { grid-column: span 5; }
#launcher-form .launcher-scope-grid > .launcher-field-ticket { grid-column: span 3; }
#launcher-form .launcher-delivery-grid > label,
#launcher-form .launcher-template-fields > label { grid-column: span 4; }
#launcher-form .launcher-request-grid > label,
#launcher-form .launcher-template-fields > label { display: grid; align-content: start; gap: 7px; min-width: 0; }
#launcher-form .launcher-request-grid > label > span,
#launcher-form .launcher-template-fields > label > span { display: block; color: var(--theme-ink-soft); font-size: .72rem; font-weight: 850; letter-spacing: .02em; }
#launcher-form .launcher-request-grid :is(input, select),
#launcher-form .launcher-template-fields :is(input, select) { box-sizing: border-box; width: 100%; min-width: 0; min-height: 46px; padding: 0 13px; border: 1px solid var(--theme-line); border-radius: 10px; background: var(--theme-panel); color: var(--theme-ink); font: inherit; font-size: .88rem; font-weight: 700; line-height: 1.2; outline: 0; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
#launcher-form .launcher-request-grid :is(input, select):hover,
#launcher-form .launcher-template-fields :is(input, select):hover { border-color: color-mix(in srgb, var(--theme-accent) 48%, var(--theme-line)); }
#launcher-form .launcher-request-grid :is(input, select):focus,
#launcher-form .launcher-template-fields :is(input, select):focus { border-color: var(--theme-accent); box-shadow: 0 0 0 3px var(--theme-focus); }
#launcher-form .launcher-request-grid label > small { display: block; min-height: 18px; margin: 0; color: var(--theme-ink-soft); font-size: .72rem; font-weight: 600; line-height: 1.4; }
.launcher-request-grid #profile-mode-wrap[hidden],
.launcher-request-grid #existing-profile-wrap[hidden],
.launcher-template-fields[hidden] { display: none !important; }
.launcher-template-section[hidden] { display: none !important; }
.launcher-template-fields { padding: 0; border: 0; background: transparent; }
.launcher-template-fields:empty { display: none; }
.launcher-checkbox-field { grid-template-columns: 20px minmax(0, 1fr); align-items: center; min-height: 46px; padding: 0 13px; border: 1px solid var(--theme-line); border-radius: 10px; background: var(--theme-panel); cursor: pointer; }
#launcher-form .launcher-template-fields > .launcher-checkbox-field > span { grid-column: 2; grid-row: 1; color: var(--theme-ink); font-size: .8rem; letter-spacing: 0; }
#launcher-form .launcher-template-fields > .launcher-checkbox-field > input[type="checkbox"] { grid-column: 1; grid-row: 1; width: 18px; min-height: 18px; height: 18px; padding: 0; accent-color: var(--theme-accent); }
.launcher-suggestion { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 14px; border-left: 3px solid var(--theme-accent); background: color-mix(in srgb, var(--theme-accent) 7%, var(--theme-panel)); color: var(--theme-ink); font-size: .78rem; font-weight: 650; line-height: 1.45; }
.launcher-suggestion .btn { min-height: 34px; margin-left: auto; }
.launcher-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--theme-line); }
.launcher-form-actions .api-tag { max-width: min(100%, 680px); overflow-wrap: anywhere; }
.launcher-workspace-tabs .panel-heading { align-items: center; }
.launcher-workspace-tabs .panel-heading > div { min-width: 0; }
.table-search-control { display: inline-flex; align-items: center; gap: 8px; min-width: min(100%, 290px); padding: 0 11px; border: 1px solid var(--theme-line); border-radius: 9px; background: var(--theme-panel); color: var(--theme-ink-soft); }
.table-search-control:focus-within { border-color: var(--theme-accent); box-shadow: 0 0 0 3px var(--theme-focus); }
.table-search-control svg { width: 17px; height: 17px; flex: 0 0 auto; }
.table-search-control input { width: 100%; min-width: 0; height: 40px; padding: 0; border: 0; background: transparent; color: var(--theme-ink); font: inherit; font-size: .82rem; font-weight: 700; outline: 0; }
.launcher-admin-panel { min-width: 0; }
.launcher-admin-panel .inventory-panel-head { align-items: flex-start; }
.launcher-admin-panel .record-actions { flex-wrap: wrap; justify-content: flex-end; }
.launcher-admin-runtime { display: flex; align-items: flex-start; gap: 12px; margin: 2px 0 18px; padding: 14px 16px; border: 1px solid var(--theme-line); border-left: 3px solid var(--theme-accent); border-radius: var(--theme-radius-sm); background: var(--theme-panel-muted); color: var(--theme-ink); }
.launcher-admin-runtime > svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--theme-accent); }
.launcher-admin-runtime > div { display: grid; gap: 3px; min-width: 0; }
.launcher-admin-runtime strong { font-size: .86rem; }
.launcher-admin-runtime span { overflow-wrap: anywhere; color: var(--theme-ink-soft); font-size: .78rem; line-height: 1.45; }
.launcher-field-row > label > span { display: block; margin-bottom: 6px; color: var(--theme-ink-soft); font-size: .7rem; font-weight: 800; letter-spacing: .02em; }
.launcher-field-row .launcher-required { min-height: 42px; align-self: end; }
.launcher-source-review pre { max-height: 320px; margin: 8px 0 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.diagnostics-hero { min-height: 132px; }
.diagnostics-workspace { margin-top: 18px; }
.diagnostic-guide-layout { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 4px 0 20px; border-bottom: 1px solid var(--theme-line); }
.diagnostic-guide-layout > div { min-width: 0; }.diagnostic-guide-layout h3 { margin: 0; font-size: 1.18rem; }.diagnostic-guide-layout p { max-width: 760px; margin: 7px 0 0; color: var(--theme-ink-soft); line-height: 1.55; }
.diagnostic-steps { display: grid; gap: 0; max-width: 950px; margin: 10px 0 0; padding: 0; list-style: none; }.diagnostic-steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--theme-line); }.diagnostic-steps li:last-child { border-bottom: 0; }.diagnostic-steps li > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--theme-panel-muted); color: var(--theme-accent); font-size: .72rem; font-weight: 900; letter-spacing: .04em; }.diagnostic-steps strong, .diagnostic-steps small { display: block; }.diagnostic-steps small { margin-top: 4px; color: var(--theme-ink-soft); line-height: 1.5; }.diagnostic-steps em { font-style: normal; font-weight: 800; }
.diagnostic-analysis-intro { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 20px; padding: 14px 16px; border-left: 3px solid var(--theme-accent); background: var(--theme-panel-muted); color: var(--theme-ink); }.diagnostic-analysis-intro > svg { width: 21px; height: 21px; flex: 0 0 auto; color: var(--theme-accent); }.diagnostic-analysis-intro div { display: grid; gap: 3px; }.diagnostic-analysis-intro span { color: var(--theme-ink-soft); font-size: .82rem; line-height: 1.45; }
.diagnostic-decode-form { display: grid; gap: 16px; }.diagnostic-analysis-grid { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.4fr); gap: 16px; align-items: stretch; }.diagnostic-analysis-grid > label { display: grid; align-content: start; gap: 7px; min-width: 0; font-size: .82rem; font-weight: 800; color: var(--theme-ink); }.diagnostic-analysis-grid > label > span small { color: var(--theme-ink-soft); font-weight: 650; }
.diagnostic-file-picker { position: relative; min-height: 115px; padding: 12px 14px; border: 1px dashed color-mix(in srgb, var(--theme-accent) 48%, var(--theme-line)); border-radius: var(--theme-radius-sm); background: var(--theme-panel-muted); cursor: pointer; transition: border-color .16s ease, background .16s ease; }.diagnostic-file-picker:focus-within, .diagnostic-file-picker:hover { border-color: var(--theme-accent); background: color-mix(in srgb, var(--theme-panel-muted) 70%, var(--theme-accent) 4%); }.diagnostic-file-picker input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; cursor: pointer; }.diagnostic-file-picker-copy { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 9px; align-items: center; min-height: 72px; }.diagnostic-file-picker-copy svg { grid-row: span 2; width: 22px; height: 22px; color: var(--theme-accent); }.diagnostic-file-picker-copy strong { font-size: .88rem; }.diagnostic-file-picker-copy small { color: var(--theme-ink-soft); font-size: .74rem; font-weight: 650; line-height: 1.4; }
.diagnostic-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--theme-line); }.diagnostic-form-footer .form-help { margin: 0; color: var(--theme-ink-soft); font-size: .78rem; font-weight: 650; }.diagnostic-result { margin-top: 22px; border-top: 2px solid var(--theme-accent); }.diagnostic-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--theme-line); }.diagnostic-result-head h3 { margin: 0; font-size: 1.2rem; }.diagnostic-result-head p:not(.eyebrow) { margin: 5px 0 0; color: var(--theme-ink-soft); font-size: .8rem; }.diagnostic-verified { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 999px; background: color-mix(in srgb, var(--theme-accent) 11%, transparent); color: var(--theme-accent); font-size: .75rem; font-weight: 850; white-space: nowrap; }.diagnostic-verified svg { width: 16px; height: 16px; }
.diagnostic-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--theme-line); border-bottom: 1px solid var(--theme-line); }.diagnostic-summary > div { padding: 14px 16px; background: var(--theme-panel); }.diagnostic-summary dt { color: var(--theme-ink-soft); font-size: .68rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }.diagnostic-summary dd { margin: 5px 0 0; color: var(--theme-ink); font-size: .9rem; font-weight: 800; overflow-wrap: anywhere; }.diagnostic-report-grid { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); gap: 28px; padding-top: 22px; }.diagnostic-report-grid h4 { margin: 0 0 10px; font-size: .83rem; letter-spacing: .02em; }.diagnostic-alert-list { display: grid; gap: 8px; }.diagnostic-alert { display: flex; gap: 9px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--theme-line); }.diagnostic-alert svg { flex: 0 0 auto; width: 17px; height: 17px; color: #b3611e; }.diagnostic-alert div { display: grid; gap: 2px; min-width: 0; }.diagnostic-alert strong { font-size: .8rem; }.diagnostic-alert span, .diagnostic-empty { color: var(--theme-ink-soft); font-size: .77rem; line-height: 1.45; overflow-wrap: anywhere; }.diagnostic-empty { margin: 0; padding: 12px 0; }.diagnostic-evidence { overflow: auto; max-height: 420px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); }.diagnostic-evidence table { width: 100%; border-collapse: collapse; font-size: .77rem; }.diagnostic-evidence th, .diagnostic-evidence td { padding: 10px 12px; vertical-align: top; border-bottom: 1px solid var(--theme-line); text-align: left; }.diagnostic-evidence th { width: 34%; color: var(--theme-ink-soft); font-size: .7rem; letter-spacing: .02em; text-transform: capitalize; }.diagnostic-evidence tr:last-child th, .diagnostic-evidence tr:last-child td { border-bottom: 0; }.diagnostic-evidence pre { max-width: 480px; max-height: 170px; margin: 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 600 .71rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.restore-preview { margin: 0 0 16px; padding: 15px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); background: var(--theme-panel-muted); color: var(--theme-ink); font-size: .82rem; }
.restore-preview dl { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 12px 0 0; }
.restore-preview dl div { padding: 10px; border-radius: 7px; background: #fff; }
.restore-preview dt { color: var(--theme-ink-soft); font-size: .7rem; font-weight: 750; text-transform: uppercase; }
.restore-preview dd { margin: 4px 0 0; font-size: .92rem; font-weight: 800; }
@media (max-width: 700px) { .salary-month-control { width: 100%; align-items: stretch; flex-direction: column; } .salary-month-control :is(input, select) { width: 100%; min-width: 0; } .inventory-panel-head > .record-actions { justify-content: flex-start; } .backup-hero .hero-actions { justify-content: stretch; } .backup-form-grid { grid-template-columns: 1fr; } .backup-explainer { align-items: flex-start; } .restore-preview dl { grid-template-columns: 1fr; } }

@media (max-width: 980px) {
  .payroll-workspace-head { grid-template-columns: 1fr; gap: 18px; }
  .payroll-command-bar { justify-content: flex-start; }
  .payroll-submit-status { text-align: left; }
}
@media (max-width: 640px) {
  .payroll-workspace-head { padding: 18px 16px; }
  .payroll-command-bar { align-items: stretch; }
  .payroll-submit-agent, .payroll-submit-month { flex-basis: 100%; }
  .payroll-command-bar > .btn { flex: 1 1 calc(50% - 5px); justify-content: center; }
}

@media (max-width: 980px) {
  .launcher-request-grid,
  .launcher-template-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #launcher-form .launcher-request-grid,
  #launcher-form .launcher-template-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #launcher-form .launcher-scope-grid > :is(.launcher-field-client, .launcher-field-template, .launcher-field-ticket),
  #launcher-form .launcher-delivery-grid > label,
  #launcher-form .launcher-template-fields > label { grid-column: auto; }
}

@media (max-width: 640px) {
  .launcher-module-hero { min-height: 0; }
  .launcher-module-hero .hero-actions,
  .launcher-form-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .launcher-module-hero .hero-actions .btn,
  .launcher-form-actions .btn { width: 100%; justify-content: center; }
  .launcher-request-grid,
  .launcher-template-fields { grid-template-columns: minmax(0, 1fr); }
  #launcher-form .launcher-request-grid,
  #launcher-form .launcher-template-fields { grid-template-columns: minmax(0, 1fr); }
  .launcher-form-section { padding: 18px; }
  .launcher-form-section-head { padding-bottom: 13px; }
  .launcher-suggestion .btn { width: 100%; margin-left: 0; justify-content: center; }
  .diagnostic-guide-layout, .diagnostic-form-footer, .diagnostic-result-head { align-items: stretch; flex-direction: column; }
  .diagnostic-form-footer .btn { width: 100%; justify-content: center; }
  .diagnostic-analysis-grid, .diagnostic-report-grid { grid-template-columns: minmax(0, 1fr); }
  .diagnostic-summary { grid-template-columns: 1fr; gap: 1px; }
  .launcher-workspace-tabs .panel-heading { align-items: stretch; flex-direction: column; }
  .table-search-control { width: 100%; }
}

@media (max-width: 1280px) {
  .inventory-template-field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-template-field-row > .icon-button { justify-self: end; }
}

@media (max-width: 600px) {
  .inventory-template-field-row { grid-template-columns: 1fr; }
  .device-checkup-actions { align-content: stretch; }
}

@media (max-width: 700px) {
  :where(.hero-actions, .panel-tools, .query-actions, .modal-footer, .modal-actions-row) > :where(.btn, button) {
    flex: 1 1 150px;
    min-width: min(100%, 150px);
  }

  .modal-footer .btn,
  .modal-footer .btn span {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
}

/* Checkup workspace: dense operational rows, detail-first inspector. */
.checkups-hero { min-height: 126px; }
.checkups-table-panel { min-width: 0; }
.checkups-table-wrap { overflow-x: auto; }
.checkups-table { min-width: 980px; table-layout: fixed; }
.checkups-table th:nth-child(1) { width: 175px; }
.checkups-table th:nth-child(2), .checkups-table th:nth-child(3) { width: 150px; }
.checkups-table th:nth-child(4) { width: 160px; }
.checkups-table th:nth-child(5) { width: 145px; }
.checkups-table th:nth-child(6) { width: 110px; }
.checkups-table th:last-child { width: 64px; }
.checkup-row { cursor: pointer; transition: background .14s ease; }
.checkup-row:hover, .checkup-row:focus-visible { background: var(--theme-panel-muted); outline: 0; }
.checkup-row td { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkup-row td:first-child strong, .checkup-row td:first-child small { display: block; white-space: normal; }
.checkup-row td:first-child small { margin-top: 3px; color: var(--theme-ink-soft); font-size: .69rem; font-weight: 650; line-height: 1.3; }
.checkup-row-action { text-align: right; overflow: visible !important; }
.checkup-row-action .icon-button { width: 36px; height: 36px; }
.checkup-device-link { display: inline-flex; max-width: 100%; align-items: center; gap: 6px; color: var(--theme-primary); font-weight: 760; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkup-device-link:hover { text-decoration: underline; }
.checkup-device-link svg { width: 14px; height: 14px; flex: 0 0 auto; }
.wide-checkup-detail { grid-column: 1 / -1; }
.checkup-detail-summary .wide-checkup-detail dd { white-space: normal; overflow: visible; text-overflow: clip; }
.checkup-modal-card { width: min(1180px, calc(100vw - 32px)); max-height: min(90svh, 58rem); display: flex; flex-direction: column; overflow: hidden; }
.checkup-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .46fr); flex: 1 1 auto; min-height: 0; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); overflow: auto; overscroll-behavior: contain; background: var(--theme-panel); }
.checkup-main-pane { min-width: 0; padding: 18px; }
.checkup-timeline-panel { min-width: 0; padding: 18px; border-left: 1px solid var(--theme-line); background: var(--theme-panel-muted); }
.checkup-timeline-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--theme-line); }
.checkup-timeline-panel h4 { margin: 2px 0 0; color: var(--theme-ink); font-size: .94rem; }
.checkup-timeline-panel > header > svg { width: 20px; height: 20px; color: var(--theme-accent); }
.checkup-timeline-list { display: grid; gap: 0; max-height: none; margin: 0; padding: 12px 0 0 18px; overflow: visible; list-style: none; }
.checkup-timeline-item { position: relative; padding: 0 0 16px 16px; border-left: 1px solid var(--theme-line); }
.checkup-timeline-item::before { position: absolute; top: 3px; left: -5px; width: 9px; height: 9px; border: 2px solid var(--theme-panel-muted); border-radius: 50%; background: var(--theme-accent); content: ""; }
.checkup-timeline-item time { display: block; color: var(--theme-ink-soft); font-size: .68rem; font-weight: 750; }
.checkup-timeline-item p { margin: 4px 0 0; color: var(--theme-ink); font-size: .78rem; font-weight: 680; line-height: 1.45; overflow-wrap: anywhere; }
.checkup-timeline-item a { color: var(--theme-primary); font-weight: 850; text-decoration: none; }
.checkup-timeline-item a:hover { text-decoration: underline; }
.checkup-timeline-empty { padding: 16px 0 0; color: var(--theme-ink-soft); font-size: .78rem; font-weight: 650; }
.checkup-detail-summary { margin: 0 0 17px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); background: var(--theme-panel-muted); }
.checkup-detail-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--theme-line); }
.checkup-detail-summary dl > div { min-width: 0; padding: 12px 14px; background: var(--theme-panel-muted); }
.checkup-detail-summary dt { color: var(--theme-ink-soft); font-size: .68rem; font-weight: 850; letter-spacing: .03em; text-transform: uppercase; }
.checkup-detail-summary dd { margin: 5px 0 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--theme-ink); font-size: .8rem; font-weight: 750; white-space: nowrap; }
.checkup-work-instructions { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .8rem .9rem; border-top: 1px solid var(--theme-line); background: color-mix(in srgb, var(--theme-primary) 5%, var(--theme-panel-muted)); }
.checkup-work-instructions > svg { width: 1.1rem; height: 1.1rem; color: var(--theme-primary); }
.checkup-work-instructions > div { min-width: 0; }
.checkup-work-instructions strong { display: block; color: var(--theme-ink); font-size: .77rem; font-weight: 850; }
.checkup-work-instructions p { margin: .16rem 0 0; color: var(--theme-ink-soft); font-size: .74rem; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.task-detail-record-link { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; color: var(--theme-primary); font-weight: 800; text-decoration: none; }
.task-detail-record-link:hover { text-decoration: underline; }
.task-detail-record-link svg { flex: 0 0 auto; width: .9rem; height: .9rem; }
.task-required-update dd { display: grid; gap: .45rem; }
.task-required-update dd > span { display: block; padding-top: .45rem; border-top: 1px solid var(--theme-line); color: var(--theme-ink-soft); font-size: .75rem; font-weight: 700; line-height: 1.45; }
.checkup-result-form { gap: 16px; }
.checkup-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.checkup-result-grid > label { display: grid; min-width: 0; gap: 7px; }
.checkup-result-grid > label > span { color: var(--theme-ink); font-size: .77rem; font-weight: 800; }
.checkup-result-grid select { min-width: 0; }
.checkup-result-grid > .checkup-status-toggle {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 5.25rem;
  gap: .8rem;
  padding: .85rem .95rem;
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius-sm);
  background: var(--theme-panel-muted);
  cursor: pointer;
}
.checkup-status-toggle input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.checkup-status-toggle .toggle-indicator { position: relative; inline-size: 2.45rem; block-size: 1.4rem; border-radius: 999px; background: color-mix(in srgb, var(--theme-ink-soft, #60756f) 38%, var(--theme-line)); transition: background .18s ease; }
.checkup-status-toggle .toggle-indicator::after { content: ""; position: absolute; inset-block-start: .2rem; inset-inline-start: .2rem; inline-size: 1rem; block-size: 1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .22); transition: transform .18s ease; }
.checkup-status-toggle input:checked + .toggle-indicator { background: var(--theme-primary); }
.checkup-status-toggle input:checked + .toggle-indicator::after { transform: translateX(1.05rem); }
.checkup-status-toggle input:focus-visible + .toggle-indicator { outline: 3px solid color-mix(in srgb, var(--theme-primary) 30%, transparent); outline-offset: 3px; }
.checkup-status-toggle input:disabled + .toggle-indicator { opacity: .55; }
.checkup-status-toggle > span:last-child { display: grid; min-width: 0; gap: .2rem; }
.checkup-status-toggle strong { color: var(--theme-ink); font-size: .84rem; font-weight: 850; }
.checkup-status-toggle small { color: var(--theme-ink-soft); font-size: .72rem; font-weight: 650; line-height: 1.35; }
.checkup-status-toggle.is-complete { border-color: color-mix(in srgb, var(--theme-primary) 32%, var(--theme-line)); background: color-mix(in srgb, var(--theme-primary) 5%, var(--theme-panel-muted)); }
.checkup-progress-summary { display: flex; align-items: flex-start; gap: .7rem; padding: .85rem .95rem; color: var(--theme-ink); background: color-mix(in srgb, var(--theme-primary) 5%, var(--theme-panel)); border: 1px solid color-mix(in srgb, var(--theme-primary) 22%, var(--theme-line)); border-radius: var(--theme-radius-sm); }
.checkup-progress-summary > i { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .08rem; color: var(--theme-primary); }
.checkup-progress-summary > div { display: grid; gap: .18rem; min-width: 0; }
.checkup-progress-summary strong { font-size: .82rem; font-weight: 850; }
.checkup-progress-summary span { color: var(--theme-ink-soft); font-size: .74rem; font-weight: 650; line-height: 1.4; }
.checkup-final-result { display: grid; gap: .75rem; min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); background: var(--theme-panel-muted); }
.checkup-final-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; min-width: 0; }
.checkup-final-result-head > div { display: grid; gap: .2rem; min-width: 0; }
.checkup-final-result-head strong { color: var(--theme-ink); font-size: .86rem; font-weight: 850; }
.checkup-final-result-head p { margin: 0; color: var(--theme-ink-soft); font-size: .75rem; font-weight: 650; line-height: 1.45; }
.checkup-final-result-head > small { flex: 0 1 17rem; color: var(--theme-ink-soft); font-size: .7rem; font-weight: 700; line-height: 1.35; text-align: end; }
.checkup-final-result-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.checkup-final-result-options label { position: relative; display: grid; min-width: 0; cursor: pointer; }
.checkup-final-result-options input { position: absolute; opacity: 0; pointer-events: none; }
.checkup-final-result-options label > span { display: grid; grid-template-columns: 1.15rem minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: start; column-gap: .65rem; row-gap: .18rem; min-height: 5rem; padding: .9rem; border: 1px solid var(--theme-line); border-radius: .7rem; background: var(--theme-panel); transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.checkup-final-result-options i { grid-row: span 2; width: 1.1rem; height: 1.1rem; color: var(--theme-primary); }
.checkup-final-result-options strong { color: var(--theme-ink); font-size: .8rem; font-weight: 850; }
.checkup-final-result-options small { color: var(--theme-ink-soft); font-size: .7rem; font-weight: 650; line-height: 1.35; }
.checkup-final-result-options input:checked + span { border-color: var(--theme-primary); background: color-mix(in srgb, var(--theme-primary) 7%, var(--theme-panel)); box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--theme-primary) 13%, transparent); }
.checkup-final-result-options input[value="not_fine"]:checked + span { border-color: var(--theme-danger, #b64040); background: color-mix(in srgb, var(--theme-danger, #b64040) 6%, var(--theme-panel)); box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--theme-danger, #b64040) 12%, transparent); }
.checkup-final-result-options input[value="not_fine"]:checked + span i { color: var(--theme-danger, #b64040); }
.checkup-final-result-options input:disabled + span { cursor: not-allowed; opacity: .58; }
.checkup-final-result.is-locked { border-style: dashed; background: color-mix(in srgb, var(--theme-panel-muted) 85%, var(--theme-panel)); }

/* Checkup history is a review workflow, not a second dashboard. Keep its
   filter strip dense, aligned, and consistent with the portal's other queues. */
.checkup-filter-panel { margin-bottom: 1rem; }
.checkup-query-controls { grid-template-columns: minmax(11rem, .7fr) minmax(11rem, .7fr) minmax(16rem, 1.25fr) auto; align-items: end; }
.checkup-query-controls .query-actions { align-self: end; }
.checkup-query-controls .query-actions .btn { min-height: 2.85rem; }
.checkup-filter-search { min-width: 0; }
.checkup-filter-search input { min-width: 0; }
@media (max-width: 900px) {
  .checkup-query-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checkup-query-controls .query-actions { grid-column: 1 / -1; }
}
@media (max-width: 580px) {
  .checkup-query-controls { grid-template-columns: 1fr; }
  .checkup-query-controls .query-actions { grid-column: auto; }
  .checkup-query-controls .query-actions > * { flex: 1 1 9rem; }
}
.checkup-protected-value { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 12px; border: 1px solid var(--theme-line); border-radius: 8px; background: var(--theme-panel-muted); color: var(--theme-ink-soft); font-size: .78rem; font-weight: 750; }
.checkup-protected-value svg { width: 16px; height: 16px; color: var(--theme-accent); }
.checkup-result-form textarea:disabled, .checkup-result-form select:disabled { cursor: default; opacity: .78; }
.checkup-result-form .modal-actions { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .65rem; margin: 0 -2px; padding: .85rem 2px 2px; background: var(--theme-panel); }
.checkup-assignment-control { display: grid; gap: 7px; padding: 13px 14px; border: 1px solid var(--theme-line); border-radius: var(--theme-radius-sm); background: var(--theme-panel-muted); }
.checkup-assignment-control > span { color: var(--theme-ink); font-size: .77rem; font-weight: 850; }
.checkup-assignment-control > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: center; }
.checkup-assignment-control small { color: var(--theme-ink-soft); font-size: .72rem; font-weight: 650; line-height: 1.4; }

/* Compact, stable IDs make operational records directly linkable without
   competing with the primary record title. */
.record-permalink { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 24px; padding: 0 7px; border: 1px solid var(--theme-line); border-radius: 999px; color: var(--theme-accent); font-size: .69rem; font-weight: 800; line-height: 1; text-decoration: none; }
.record-permalink:hover, .record-permalink:focus-visible { border-color: var(--theme-accent); background: var(--theme-accent-soft); color: var(--theme-accent); outline: 0; }
.document-file-title { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.document-file-title .document-file-open { min-width: 0; flex: 1 1 auto; }

/* Dynamic inventory uploads use the same restrained field language as the
   rest of the record form.  The selected file remains readable without
   widening a modal or inventory table cell. */
.inventory-template-upload-field { display: grid; gap: .45rem; min-width: 0; }
.inventory-template-upload-field input[type="file"] { max-width: 100%; min-width: 0; padding: .52rem; color: var(--theme-ink-soft); font-size: .76rem; }
.inventory-template-upload-field small { display: flex; align-items: center; flex-wrap: wrap; gap: .42rem; color: var(--theme-ink-soft); font-size: .72rem; font-weight: 650; line-height: 1.35; }
.inventory-template-upload-current,
.inventory-upload-value { display: inline-flex; align-items: center; min-width: 0; gap: .35rem; color: var(--theme-accent); font-weight: 800; text-decoration: none; }
.inventory-template-upload-current:hover,
.inventory-upload-value:hover { color: var(--theme-primary); text-decoration: underline; text-underline-offset: 3px; }
.inventory-template-upload-current span,
.inventory-upload-value span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-template-upload-current { max-width: min(100%, 28rem); }
.inventory-template-upload-empty { color: var(--theme-ink-soft); font-style: italic; }
.inventory-upload-value { max-width: 100%; }
.inventory-upload-name-list { display: grid; gap: .32rem; min-width: 0; }
.inventory-upload-name { display: inline-flex; align-items: center; gap: .34rem; min-width: 0; color: var(--theme-accent); font-weight: 750; }
.inventory-upload-name span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-detail-row.is-wide { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); gap: 9px; padding-block: 18px; }
.record-detail-row.is-wide dt { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.record-detail-support { flex: 0 0 auto; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--theme-accent) 20%, var(--theme-line)); border-radius: 999px; color: var(--theme-accent); background: var(--theme-accent-soft); font-size: .66rem; font-weight: 800; letter-spacing: .01em; text-transform: none; }
.record-detail-file-list { display: grid; gap: 2px; width: min(100%, 48rem); border: 1px solid color-mix(in srgb, var(--theme-accent) 16%, var(--theme-line)); border-radius: .8rem; background: color-mix(in srgb, var(--theme-accent-soft) 34%, var(--theme-panel)); overflow: hidden; }
.record-detail-file-menu { min-width: 0; background: transparent; }
.record-detail-file-menu + .record-detail-file-menu { border-top: 1px solid var(--theme-line); }
.record-detail-file-menu summary { display: flex; align-items: center; gap: .65rem; max-width: 100%; min-height: 3.2rem; padding: .7rem .8rem; cursor: pointer; color: var(--theme-ink); font-weight: 780; list-style: none; transition: background .16s ease, color .16s ease; }
.record-detail-file-menu summary:hover, .record-detail-file-menu summary:focus-visible { background: color-mix(in srgb, var(--theme-accent) 8%, transparent); color: var(--theme-accent); outline: 0; }
.record-detail-file-menu summary svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--theme-accent); }
.record-detail-file-menu summary::-webkit-details-marker { display: none; }
.record-detail-file-menu summary::after { content: "Actions  ›"; margin-left: auto; color: var(--theme-ink-soft); font-size: .69rem; font-weight: 780; letter-spacing: .02em; transition: color .16s ease, transform .16s ease; }
.record-detail-file-menu[open] summary { background: color-mix(in srgb, var(--theme-accent) 10%, transparent); color: var(--theme-accent); }
.record-detail-file-menu[open] summary::after { color: var(--theme-accent); transform: translateX(2px); }
.record-detail-file-menu summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-detail-file-menu-actions { display: flex; flex-wrap: wrap; gap: .45rem; padding: .65rem .8rem .8rem 3.1rem; border-top: 1px solid var(--theme-line); background: var(--theme-panel); animation: record-file-actions-in .16s ease-out both; }
.record-detail-file-menu-actions .btn { min-width: 116px; justify-content: center; }
@keyframes record-file-actions-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) { .record-detail-row.is-wide dt { align-items: flex-start; flex-direction: column; } .record-detail-file-menu-actions { padding-left: .8rem; } .record-detail-file-menu-actions .btn { flex: 1 1 130px; } }
.inventory-template-upload-list,
.inventory-upload-value-list { display: grid; gap: .38rem; width: 100%; min-width: 0; }
.inventory-template-upload-item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; padding: .42rem .48rem; border: 1px solid var(--theme-border); border-radius: .55rem; background: var(--theme-surface-muted); }
.inventory-template-upload-item .inventory-template-upload-current { flex: 1 1 auto; }
.inventory-template-upload-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .25rem; }
.inventory-template-upload-actions .icon-button { width: 2rem; height: 2rem; min-width: 2rem; padding: .35rem; }
.inventory-template-upload-pending { display: grid; gap: .3rem; }
.inventory-template-upload-pending:empty { display: none; }
.inventory-template-upload-pending-item { display: flex; min-width: 0; align-items: center; gap: .45rem; padding: .4rem .48rem; color: var(--theme-ink-soft); background: color-mix(in srgb, var(--theme-accent) 8%, transparent); border-radius: .5rem; }
.inventory-template-upload-pending-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-template-upload-pending-item .icon-button { margin-left: auto; width: 1.9rem; height: 1.9rem; min-width: 1.9rem; padding: .3rem; }
@media (max-width: 620px) { .inventory-template-upload-item { align-items: flex-start; flex-direction: column; } .inventory-template-upload-actions { align-self: flex-end; } }

/* Knowledge Base reading view: metadata remains compact while the actual
   article sits on a quiet white document surface. This stays within the
   shared record-inspector system instead of introducing a one-off dialog. */
.record-detail-row.kb-detail-reading-surface {
  display: block;
  margin-block: 12px;
  padding: clamp(18px, 3vw, 32px);
  border: 1px solid color-mix(in srgb, var(--theme-accent) 14%, var(--theme-line));
  border-radius: calc(var(--theme-radius-sm) + 4px);
  background: #fff;
  box-shadow: 0 10px 28px rgba(12, 38, 34, .06);
}
.record-detail-row.kb-detail-reading-surface dt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--theme-accent);
  font-size: .74rem;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.record-detail-row.kb-detail-reading-surface dt::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--theme-accent);
  box-shadow: 0 0 0 4px var(--theme-accent-soft);
  content: "";
}
.record-detail-row.kb-detail-reading-surface dd {
  max-width: 76ch;
  color: var(--theme-ink);
  font-size: .94rem;
  line-height: 1.82;
}
.record-detail-row.kb-detail-reading-surface .record-detail-rich-text :is(h2, h3, h4) {
  margin-top: 1.55em;
  font-size: 1.12em;
}
.record-detail-row.kb-detail-reading-surface .record-detail-rich-text table {
  margin-block: 1.2rem;
  border: 1px solid var(--theme-line);
  border-radius: .7rem;
  background: #fff;
}
.record-detail-row.kb-detail-reading-surface .record-detail-rich-text :is(th, td) { padding: .68rem .75rem; }
.record-detail-row.kb-detail-reading-surface .record-detail-rich-text pre { background: #f7faf9; }
.record-detail-row.kb-detail-reading-surface .record-detail-rich-text.kb-content-copy-locked {
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}
.record-detail-row.kb-detail-reading-surface .record-detail-file-list {
  width: min(100%, 42rem);
  background: color-mix(in srgb, var(--theme-accent-soft) 48%, #fff);
}
.record-detail-row.kb-detail-reading-surface .record-detail-file-menu summary::after {
  content: "Open actions  ›";
}
@media (max-width: 640px) {
  .record-detail-row.kb-detail-reading-surface { margin-inline: -2px; padding: 18px; }
  .record-detail-row.kb-detail-reading-surface dd { font-size: .9rem; }
}

/* Document rows may contain long Arabic or English names.  Keep the table as
   the information surface: text is constrained within its own cell and
   reference controls live only in the selected-folder header, the folder
   action menu, or the file detail dialog. */
.documents-table { width: 100%; min-width: 980px; table-layout: fixed; }
.documents-table th,
.documents-table td { min-width: 0; vertical-align: top; overflow: hidden; }
.documents-table th:nth-child(1), .documents-table td:nth-child(1) { width: 25%; }
.documents-table th:nth-child(2), .documents-table td:nth-child(2) { width: 17%; }
.documents-table th:nth-child(3), .documents-table td:nth-child(3) { width: 12%; }
.documents-table th:nth-child(4), .documents-table td:nth-child(4) { width: 15%; }
.documents-table th:nth-child(5), .documents-table td:nth-child(5) { width: 10%; }
.documents-table th:nth-child(6), .documents-table td:nth-child(6) { width: 7%; }
.documents-table th:nth-child(7), .documents-table td:nth-child(7) { width: 9%; }
.documents-table th:nth-child(8), .documents-table td:nth-child(8) { width: 5%; overflow: visible; }
.document-file-title { display: block; width: 100%; min-width: 0; }
.document-file-title .document-file-open { display: grid; width: 100%; min-width: 0; }
.document-file-title .document-file-open strong,
.document-file-title .document-file-open .muted-line {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: plaintext;
}
/* Compatibility guard for a previously rendered row template.  It prevents
   cached/injected inline reference controls from corrupting the file column. */
#document-files-body .document-reference-actions,
#document-files-body .document-reference,
#document-files-body .record-permalink { display: none !important; }

/* Configured payroll values remain readable beneath the monthly totals. */
#summary-extra-breakdown { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin-top: 14px; }
.payroll-extra-summary-item { display: inline-flex; min-width: 0; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--theme-line); border-radius: 999px; background: var(--theme-panel-muted); color: var(--theme-ink-soft); font-size: .74rem; font-weight: 700; }
.payroll-extra-summary-item strong { color: var(--theme-ink); font-weight: 850; }
.payroll-extra-summary-item span { white-space: nowrap; }
.payroll-salaries-workspace { margin-top: 16px; min-height: min(56svh, 640px); animation: aztco-payroll-workspace-in 180ms ease-out both; }
.payroll-salaries-workspace > .inventory-panel-head { align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--theme-line); }
.payroll-salaries-workspace > .table-wrap { margin-top: 16px; }
@keyframes aztco-payroll-workspace-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.payroll-review-modal { width: min(1240px, calc(100vw - 32px)); max-height: min(880px, calc(100svh - 32px)); grid-template-rows: auto minmax(0, 1fr); border-color: color-mix(in srgb, var(--theme-accent) 18%, var(--theme-line)); box-shadow: 0 28px 76px rgba(7, 35, 30, .24); }
.payroll-review-modal .modal-header { position: relative; overflow: hidden; background: linear-gradient(105deg, var(--theme-panel) 0%, color-mix(in srgb, var(--theme-accent-soft) 62%, var(--theme-panel)) 100%); }
.payroll-review-modal .modal-header::after { position: absolute; right: -42px; bottom: -64px; width: 190px; height: 190px; border: 26px solid color-mix(in srgb, var(--theme-accent) 8%, transparent); border-radius: 50%; content: ""; pointer-events: none; }
.payroll-review-modal .modal-header > * { position: relative; z-index: 1; }
.payroll-review-form { min-height: 0; overflow: hidden; grid-template-rows: minmax(0, 1fr) auto; gap: 18px; padding: 22px 24px 18px; background: color-mix(in srgb, var(--theme-panel-muted) 82%, var(--theme-panel)); }
.payroll-review-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .36fr); min-height: 0; border: 1px solid var(--theme-line); border-radius: 16px; background: var(--theme-panel); overflow: hidden; }
.payroll-review-main { display: grid; align-content: start; gap: 20px; min-width: 0; min-height: 0; padding: 20px; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.payroll-calculation-panel { min-width: 0; }
.payroll-calculation-panel > header { display: grid; gap: 4px; margin: 0 0 12px; }
.payroll-calculation-panel .eyebrow { margin: 0; color: var(--theme-ink-soft); font-size: .68rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.payroll-calculation-panel h4 { margin: 0; color: var(--theme-ink); font-size: 1.05rem; }
.payroll-calculation-panel p { max-width: 48rem; margin: 0; color: var(--theme-ink-soft); font-size: .8rem; font-weight: 600; line-height: 1.45; }
.salary-review-calculation { border: 1px solid var(--theme-line); border-radius: 14px; background: var(--theme-panel-muted); overflow: hidden; }
.salary-review-calculation dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--theme-line); }
.salary-review-calculation dl > div { min-width: 0; min-height: 108px; padding: 16px 18px; background: var(--theme-panel); display: grid; align-content: center; gap: 5px; }
.salary-review-calculation .salary-review-net { background: color-mix(in srgb, var(--theme-accent-soft) 62%, var(--theme-panel)); }
.salary-review-calculation dt { color: var(--theme-ink-soft); font-size: .72rem; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; }
.salary-review-calculation dd { min-width: 0; margin: 0; color: var(--theme-ink); font-size: 1.08rem; font-weight: 850; line-height: 1.25; overflow-wrap: anywhere; }
.salary-review-calculation small { display: block; min-width: 0; color: var(--theme-ink-soft); font-size: .72rem; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.salary-component-button { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--theme-accent); font: inherit; font-weight: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.salary-component-button svg { width: 16px; height: 16px; flex: 0 0 auto; transition: transform .18s ease; }
.salary-component-button[aria-expanded="true"] svg { transform: rotate(90deg); }
.salary-component-button:hover { text-decoration: underline; }
.salary-component-button:focus-visible { outline: 3px solid var(--theme-focus); outline-offset: 4px; border-radius: 3px; }
.salary-component-details { margin-top: 14px; padding: 16px; border: 1px solid var(--theme-line); border-radius: 14px; background: var(--theme-panel); }
.salary-component-details > header { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.salary-component-details .eyebrow { margin: 0 0 3px; color: var(--theme-ink-soft); font-size: .68rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.salary-component-details h5 { margin: 0; color: var(--theme-ink); font-size: .95rem; }
.salary-component-details > p { margin: 8px 0 13px; color: var(--theme-ink-soft); font-size: .78rem; font-weight: 650; line-height: 1.45; }
.salary-component-details > header > strong { color: var(--theme-accent); font-size: 1rem; }
.salary-source-table { min-width: 780px; }
.salary-source-table td { vertical-align: top; }
.salary-source-table td small { display: block; margin-top: 3px; color: var(--theme-ink-soft); font-size: .72rem; }
.payroll-review-fields { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.payroll-review-fields label { min-width: 0; }
.payroll-review-fields textarea { min-height: 150px; }
.payroll-review-fields label > span { display: flex; align-items: center; gap: 8px; }
.payroll-review-fields em { padding: 3px 7px; border-radius: 999px; background: var(--theme-accent-soft); color: var(--theme-accent); font-size: .66rem; font-style: normal; font-weight: 850; letter-spacing: .03em; text-transform: uppercase; }
.payroll-review-fields small { display: block; max-width: 62rem; color: var(--theme-ink-soft); font-size: .77rem; font-weight: 600; line-height: 1.5; }
.payroll-adjustments { min-width: 0; padding: 2px 0 0; }
.payroll-adjustments-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.payroll-adjustments-head .eyebrow { margin: 0 0 3px; color: var(--theme-ink-soft); font-size: .68rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.payroll-adjustments-head h4 { margin: 0; color: var(--theme-ink); font-size: 1rem; }
.payroll-adjustments-head p { max-width: 42rem; margin: 4px 0 0; color: var(--theme-ink-soft); font-size: .78rem; font-weight: 600; line-height: 1.45; }
.payroll-adjustments-head .btn { flex: 0 0 auto; min-height: 42px; }
.payroll-adjustment-table-wrap { overflow-x: auto; border: 1px solid var(--theme-line); border-radius: 12px; background: var(--theme-panel); }
.payroll-adjustment-table { width: 100%; min-width: 820px; border-collapse: collapse; }
.payroll-adjustment-table th { padding: 10px 12px; border-bottom: 1px solid var(--theme-line); color: var(--theme-ink-soft); font-size: .68rem; font-weight: 850; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.payroll-adjustment-table .muted-label { margin-left: 4px; color: var(--theme-ink-soft); font-size: .62rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.payroll-adjustment-table td { padding: 8px 10px; border-bottom: 1px solid var(--theme-line); vertical-align: middle; }
.payroll-adjustment-table tr:last-child td { border-bottom: 0; }
.payroll-adjustment-table th:nth-child(1), .payroll-adjustment-table td:nth-child(1) { width: 25%; }
.payroll-adjustment-table th:nth-child(2), .payroll-adjustment-table td:nth-child(2) { width: 33%; }
.payroll-adjustment-table th:nth-child(3), .payroll-adjustment-table td:nth-child(3) { width: 17%; }
.payroll-adjustment-table th:nth-child(4), .payroll-adjustment-table td:nth-child(4) { width: 21%; }
.payroll-adjustment-table th:last-child, .payroll-adjustment-table td:last-child { width: 44px; padding-inline: 5px; text-align: center; }
.payroll-adjustment-table input, .payroll-adjustment-table select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: var(--theme-panel-muted); color: var(--theme-ink); font: inherit; font-size: .84rem; font-weight: 650; }
.payroll-adjustment-table input:hover, .payroll-adjustment-table select:hover { border-color: var(--theme-line-strong); background: var(--theme-panel); }
.payroll-adjustment-table input:focus, .payroll-adjustment-table select:focus { outline: 0; border-color: var(--theme-accent); box-shadow: 0 0 0 3px var(--theme-focus); background: var(--theme-panel); }
.payroll-adjustment-remove { width: 36px; height: 36px; color: var(--theme-danger, #b83b3b); }
.payroll-adjustment-preview { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 0; color: var(--theme-ink-soft); font-size: .78rem; font-weight: 650; }
.payroll-adjustment-preview strong { color: var(--theme-ink); font-weight: 850; }
.payroll-adjustment-preview span { color: var(--theme-line-strong); }
.payroll-review-timeline { min-width: 0; min-height: 0; padding: 22px 20px 14px; overflow: auto; overscroll-behavior: contain; border-left: 1px solid var(--theme-line); background: linear-gradient(180deg, color-mix(in srgb, var(--theme-accent-soft) 54%, var(--theme-panel)) 0%, var(--theme-panel) 100%); }
.payroll-review-timeline header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.payroll-review-timeline .eyebrow { margin: 0 0 3px; color: var(--theme-ink-soft); font-size: .68rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.payroll-review-timeline h4 { margin: 0; color: var(--theme-ink); font-size: .96rem; }
.payroll-review-timeline ol { display: grid; gap: 0; max-height: min(520px, 50svh); margin: 0; padding: 0; overflow: auto; list-style: none; overscroll-behavior: contain; scrollbar-gutter: stable; }
.payroll-timeline-event { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 11px 0; }
.payroll-timeline-event:not(:last-child)::before { position: absolute; top: 28px; bottom: -8px; left: 7px; width: 1px; background: var(--theme-line-strong); content: ""; }
.payroll-timeline-marker { z-index: 1; width: 15px; height: 15px; margin-top: 3px; border: 3px solid var(--theme-panel); border-radius: 50%; background: var(--theme-accent); box-shadow: 0 0 0 1px var(--theme-line-strong); }
.payroll-timeline-event time { display: block; color: var(--theme-ink-soft); font-size: .72rem; font-weight: 700; }
.payroll-timeline-event strong { display: block; margin-top: 2px; color: var(--theme-ink); font-size: .77rem; font-weight: 850; text-transform: capitalize; }
.payroll-timeline-event p { margin: 3px 0 0; color: var(--theme-ink-soft); font-size: .8rem; font-weight: 600; line-height: 1.45; }
.payroll-timeline-empty { padding: 8px 0 12px; color: var(--theme-ink-soft); font-size: .8rem; }
.payroll-rejection-modal { width: min(620px, calc(100vw - 32px)); }
.payroll-rejection-form { gap: 18px; }
.payroll-rejection-form textarea { min-height: 160px; }
.payroll-rejection-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 2px 0 0; border: 0; background: transparent; }
.payroll-review-actions { position: sticky; bottom: -18px; z-index: 2; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin: 0 -2px; padding: 16px 2px 2px; border: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--theme-panel-muted) 0%, transparent), var(--theme-panel-muted) 24%); }
.payroll-review-actions .btn { flex: 0 1 auto; min-height: 46px; }

/* Vacation approval uses the same restrained payroll workspace vocabulary. */
@media (min-width: 761px) and (max-width: 1000px) {
  .purchase-form .form-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.payroll-vacations-workspace { display: grid; gap: 20px; margin-top: 16px; min-height: min(56svh, 640px); animation: aztco-payroll-workspace-in 180ms ease-out both; }
.payroll-vacations-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 2px 0 18px; border-bottom: 1px solid var(--theme-line); }
.payroll-vacations-head > div:first-child { min-width: 0; }
.payroll-vacations-head h3 { margin: 0; }
.payroll-vacations-head p:not(.eyebrow) { max-width: 58rem; margin: 5px 0 0; color: var(--theme-ink-soft); line-height: 1.5; }
.payroll-vacations-head .hero-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.payroll-vacations-head .btn { min-height: 44px; white-space: nowrap; }
.vacation-toolbar { display: grid; grid-template-columns: minmax(180px, 540px) minmax(0, 1fr); align-items: end; gap: 18px; padding: 0; }
.vacation-toolbar-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vacation-toolbar-filters label:only-child { grid-column: 1 / -1; max-width: 260px; }
.vacation-toolbar label { display: grid; gap: 6px; min-width: 0; font-weight: 800; color: var(--theme-ink-soft); }
.vacation-toolbar select { width: 100%; min-height: 44px; }
.vacation-toolbar .api-tag { justify-self: start; margin: 0 0 2px; }
.vacation-deduction, .vacation-paid { display: block; margin-top: 5px; font-size: .72rem; font-weight: 800; }
.vacation-deduction { color: var(--theme-danger); }
.vacation-paid { color: var(--theme-success, var(--theme-accent)); }
.vacation-modal-card, .vacation-review-modal { width: min(720px, calc(100vw - 28px)); max-height: min(790px, calc(100svh - 28px)); grid-template-rows: auto minmax(0, 1fr); }
.vacation-modal-card .modal-header, .vacation-review-modal .modal-header { align-items: flex-start; }
.vacation-request-form { display: grid; min-height: 0; gap: 20px; padding: 22px 24px; overflow: auto; }
.vacation-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vacation-type-grid label { position: relative; min-width: 0; cursor: pointer; }
.vacation-type-grid input { position: absolute; opacity: 0; pointer-events: none; }
.vacation-type-grid span { display: grid; gap: 5px; min-height: 112px; padding: 16px; border: 1px solid var(--theme-line); border-radius: 14px; background: var(--theme-panel); color: var(--theme-ink); transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.vacation-type-grid label:hover span { transform: translateY(-1px); border-color: var(--theme-accent); }
.vacation-type-grid label.is-selected span { border-color: var(--theme-accent); background: var(--theme-accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 18%, transparent); }
.vacation-type-grid i { width: 19px; color: var(--theme-accent); }
.vacation-type-grid strong { font-size: .92rem; }
.vacation-type-grid small { color: var(--theme-ink-soft); line-height: 1.35; }
.vacation-fields { align-items: end; }
.vacation-request-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--theme-line); }
.vacation-request-actions .btn { flex: 0 0 auto; min-width: 138px; min-height: 44px; }
.vacation-review-summary { padding: 14px 16px; border: 1px solid var(--theme-line); border-radius: 14px; background: var(--theme-panel-muted); }
.vacation-review-summary dl { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px; margin: 0; }
.vacation-review-summary div { min-width: 0; }
.vacation-review-summary dt { margin-bottom: 4px; color: var(--theme-ink-soft); font-size: .72rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.vacation-review-summary dd { margin: 0; overflow-wrap: anywhere; font-weight: 750; }
.vacation-pay-decision { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
.vacation-pay-decision legend { grid-column: 1 / -1; padding: 0; color: var(--theme-ink); font-size: .88rem; font-weight: 850; }
.vacation-pay-decision legend span { margin-left: 6px; color: var(--theme-danger); font-size: .72rem; }
.choice-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--theme-line); border-radius: 14px; cursor: pointer; }
.choice-row:has(input:checked) { border-color: var(--theme-accent); background: var(--theme-accent-soft); }
.choice-row input { flex: 0 0 auto; margin-top: 3px; accent-color: var(--theme-accent); }
.choice-row span { display: grid; gap: 3px; }
.choice-row small { color: var(--theme-ink-soft); line-height: 1.4; }
.salary-statement-unavailable { display: flex; align-items: center; gap: 14px; max-width: 760px; padding: 22px; border-left: 3px solid var(--theme-accent); }
.salary-statement-unavailable > i { flex: 0 0 auto; width: 24px; height: 24px; color: var(--theme-accent); }
.salary-statement-unavailable h3 { margin: 0; font-size: 1rem; }
.salary-statement-unavailable p { margin: 4px 0 0; color: var(--theme-ink-soft); line-height: 1.5; }
@media (max-width: 720px) { .payroll-vacations-head { align-items: flex-start; flex-direction: column; } .payroll-vacations-head .hero-actions { justify-content: flex-start; width: 100%; } .vacation-type-grid, .vacation-pay-decision { grid-template-columns: 1fr; } .vacation-toolbar, .vacation-toolbar-filters { grid-template-columns: 1fr; align-items: stretch; } .vacation-toolbar .api-tag { justify-self: stretch; } .vacation-review-summary dl { grid-template-columns: 1fr; } .vacation-request-actions .btn { flex: 1 1 12rem; } }
@media (max-width: 640px) {
  .checkup-workspace { grid-template-columns: 1fr; }
  .checkup-main-pane, .checkup-timeline-panel { padding: 14px; }
  .checkup-timeline-panel { border-top: 1px solid var(--theme-line); border-left: 0; }
  .checkup-detail-summary dl, .checkup-result-grid { grid-template-columns: 1fr; }
  .checkup-final-result-options { grid-template-columns: 1fr; }
  .checkup-final-result-head { flex-direction: column; gap: .35rem; }
  .checkup-final-result-head > small { flex-basis: auto; text-align: start; }
  .salary-review-calculation dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-review-form { overflow: auto; grid-template-rows: auto auto; }
  .payroll-review-workspace { grid-template-columns: 1fr; overflow: visible; }
  .payroll-review-main { padding: 16px; overflow: visible; }
  .payroll-review-timeline { padding: 16px; overflow: visible; border-top: 1px solid var(--theme-line); border-left: 0; }
  .payroll-review-timeline ol { max-height: 260px; }
  .payroll-review-fields { grid-template-columns: 1fr; }
  .payroll-review-actions .btn { flex: 1 1 12rem; }
  .payroll-rejection-actions .btn { flex: 1 1 12rem; }
  .payroll-adjustments-head { align-items: start; flex-direction: column; }
  .payroll-adjustments-head .btn { width: 100%; }
  .payroll-salaries-workspace { min-height: 0; }
  .checkup-assignment-control > div { grid-template-columns: 1fr; }
  .checkup-work-instructions { grid-template-columns: auto minmax(0, 1fr); }
  .checkup-work-instructions .btn { grid-column: 1 / -1; width: 100%; }
}

/* Modal resilience: long records and revision controls must never escape the
   dialog or be hidden behind a footer. */
.task-detail-modal-card .modal-footer,
.checkup-modal-card .modal-header,
.task-detail-modal-card .modal-header {
  flex: 0 0 auto;
}
.task-detail-modal-card .modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
  flex-wrap: wrap;
}
.ticket-timeline-card { min-width: 0; overflow: hidden; }
.ticket-timeline-card .ticket-timeline-meta { min-width: 0; }
.ticket-timeline-card .ticket-reply-actions { margin-inline-start: 0; }
@media (max-width: 640px) {
  .checkup-modal-card,
  .task-detail-modal-card { width: min(100% - 20px, 48rem); max-height: calc(100svh - 20px); }
  .checkup-result-form .modal-actions { justify-content: stretch; }
  .checkup-result-form .modal-actions > .btn { flex: 1 1 10rem; }
  .ticket-timeline-meta > .ticket-reply-actions { flex-basis: 100%; }
}
/* Agent-facing system documentation */
.documentation-hero {
  align-items: center;
}

.documentation-search {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: min(100%, 31rem);
  min-height: 3.25rem;
  padding: .25rem 1rem;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #d8e5e0);
  border-radius: .9rem;
  box-shadow: 0 .4rem 1.4rem rgb(7 61 50 / .08);
}

.documentation-search i { color: var(--primary, #006d5b); flex: 0 0 auto; }
.documentation-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; }

.documentation-workspace {
  display: grid;
  grid-template-columns: minmax(12rem, .55fr) minmax(16rem, .9fr) minmax(23rem, 1.55fr);
  gap: 1rem;
  align-items: start;
  margin-top: 1.25rem;
}

.documentation-categories,
.documentation-guides,
.documentation-viewer {
  min-width: 0;
  border: 1px solid var(--border, #d8e5e0);
  border-radius: 1rem;
  background: var(--surface, #fff);
  box-shadow: 0 .45rem 1.4rem rgb(7 61 50 / .06);
}

.documentation-categories { padding: 1rem; }
.documentation-categories-heading,
.documentation-results-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.documentation-categories-heading { padding: .15rem .2rem .75rem; font-weight: 750; }
.documentation-count { color: var(--muted, #55716a); font-size: .8rem; font-weight: 650; }
.documentation-category-list { display: grid; gap: .35rem; }
.documentation-category {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; min-height: 2.55rem;
  padding: .5rem .65rem; color: inherit; text-align: left; font: inherit; font-weight: 650; background: transparent;
  border: 1px solid transparent; border-radius: .65rem; cursor: pointer;
}
.documentation-category:hover, .documentation-category:focus-visible { background: color-mix(in srgb, var(--primary, #006d5b) 7%, white); border-color: color-mix(in srgb, var(--primary, #006d5b) 25%, transparent); outline: 0; }
.documentation-category.active { color: #fff; background: var(--primary, #006d5b); }
.documentation-category b { min-width: 1.55rem; padding: .1rem .4rem; text-align: center; border-radius: 999px; background: rgb(255 255 255 / .15); font-size: .75rem; }

.documentation-guides { padding: 1rem; }
.documentation-results-heading { padding: .1rem .1rem .85rem; border-bottom: 1px solid var(--border, #d8e5e0); }
.documentation-results-heading h2 { margin: .15rem 0 0; font-size: 1.08rem; }
.documentation-guide-list { display: grid; gap: .55rem; padding-top: .85rem; }
.documentation-guide { position: relative; display: grid; gap: .25rem; width: 100%; padding: .8rem 2.45rem .8rem .85rem; text-align: left; color: inherit; background: transparent; border: 1px solid var(--border, #d8e5e0); border-radius: .75rem; cursor: pointer; font: inherit; }
.documentation-guide:hover, .documentation-guide:focus-visible, .documentation-guide.active { border-color: var(--primary, #006d5b); background: color-mix(in srgb, var(--primary, #006d5b) 6%, white); outline: 0; }
.documentation-guide strong { font-size: .92rem; line-height: 1.3; }
.documentation-guide small { display: -webkit-box; overflow: hidden; color: var(--muted, #55716a); line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.documentation-guide i { position: absolute; top: 50%; right: .75rem; width: 1rem; transform: translateY(-50%); color: var(--primary, #006d5b); }
.documentation-guide-category { color: var(--primary, #006d5b); font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .045em; }

.documentation-viewer { min-height: 32rem; padding: clamp(1rem, 2.2vw, 2rem); }
.documentation-viewer-header { padding-bottom: 1rem; border-bottom: 1px solid var(--border, #d8e5e0); }
.documentation-viewer-header h2 { margin: .75rem 0 .45rem; font-size: clamp(1.25rem, 2vw, 1.7rem); }
.documentation-viewer-header p { margin: 0; color: var(--muted, #55716a); line-height: 1.55; }
.documentation-body { color: var(--text, #122d28); line-height: 1.65; }
.documentation-body h2 { margin: 1.45rem 0 .5rem; font-size: 1.12rem; }
.documentation-body h3 { margin: 1.05rem 0 .3rem; font-size: 1rem; }
.documentation-body p, .documentation-body li { max-width: 72ch; }
.documentation-body ol, .documentation-body ul { padding-left: 1.35rem; }
.documentation-body code { padding: .12rem .32rem; color: var(--primary, #006d5b); background: color-mix(in srgb, var(--primary, #006d5b) 8%, white); border-radius: .25rem; font-size: .9em; }
.documentation-empty { display: grid; place-items: center; min-height: 16rem; text-align: center; color: var(--muted, #55716a); }
.documentation-empty h2 { margin: .7rem 0 .2rem; }
.documentation-empty p { margin: 0; }
.documentation-empty.compact { min-height: 5rem; }

@media (max-width: 1100px) {
  .documentation-workspace { grid-template-columns: minmax(12rem, .6fr) minmax(19rem, 1.4fr); }
  .documentation-viewer { grid-column: 1 / -1; min-height: auto; }
}
@media (max-width: 700px) {
  .documentation-hero { display: grid; gap: 1rem; }
  .documentation-search { width: 100%; }
  .documentation-workspace { grid-template-columns: 1fr; }
  .documentation-category-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .documentation-viewer { grid-column: auto; }
}

/* Global Search — a compact command surface with a stable visual hierarchy. */
.global-search-trigger {
  min-width: 8.1rem;
  min-height: 2.55rem;
  gap: .48rem;
  padding: .38rem .5rem .38rem .72rem;
  color: var(--theme-ink, #102c26);
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #d6e3df);
  border-radius: .72rem;
  box-shadow: 0 .15rem .5rem rgb(0 46 37 / .05);
}
.global-search-trigger:hover,
.global-search-trigger:focus-visible {
  background: color-mix(in srgb, var(--theme-primary, #006d5b) 5%, white);
  box-shadow: 0 .45rem 1.2rem rgb(0 53 43 / .13);
}
.global-search-overlay {
  align-items: start;
  padding: clamp(1rem, 11svh, 7rem) 1rem 1rem;
  background: rgb(5 29 23 / .58);
  backdrop-filter: blur(9px);
}
.global-search-dialog {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  width: min(46rem, 100%);
  max-height: min(76svh, 43rem);
  border: 1px solid color-mix(in srgb, var(--theme-line, #d6e3df) 85%, white);
  border-radius: 1rem;
  box-shadow: 0 1.8rem 5rem rgb(0 30 24 / .36);
}
.global-search-header {
  display: flex;
  align-items: center;
  gap: .72rem;
  min-height: 4.35rem;
  padding: .78rem 1rem;
}
.global-search-brandmark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  color: #fff;
  background: var(--theme-primary, #006d5b);
  border-radius: .7rem;
  box-shadow: 0 .35rem .85rem rgb(0 79 65 / .18);
}
.global-search-brandmark i { width: 1.15rem; height: 1.15rem; }
.global-search-heading { display: grid; min-width: 0; gap: .05rem; }
.global-search-heading span { color: var(--theme-muted, #55716a); font-size: .7rem; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }
.global-search-heading strong { color: var(--theme-ink, #102c26); font-size: 1rem; line-height: 1.25; }
.global-search-close { margin-left: auto; width: 2.35rem; height: 2.35rem; border-radius: .65rem; }
.global-search-input-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 1rem .75rem;
  min-height: 3.25rem;
  padding: .35rem .45rem .35rem .9rem;
  background: color-mix(in srgb, var(--theme-primary, #006d5b) 3%, white);
  border: 1px solid var(--theme-line, #d6e3df);
  border-radius: .76rem;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.global-search-input-row:focus-within {
  background: #fff;
  border-color: var(--theme-primary, #006d5b);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--theme-primary, #006d5b) 15%, transparent);
}
.global-search-input-row > i { width: 1.12rem; height: 1.12rem; flex: 0 0 auto; color: var(--theme-primary, #006d5b); }
.global-search-input-row input { width: 100%; min-width: 0; padding: .45rem 0; color: var(--theme-ink, #102c26); background: transparent; border: 0; outline: 0; font: 700 .98rem/1.45 Manrope, sans-serif; }
.global-search-input-row input::placeholder { color: var(--theme-muted, #6a817a); font-weight: 550; }
.global-search-keyhint { padding-right: .15rem; }
.global-search-hint { padding: .68rem 1rem; background: transparent; font-size: .78rem; }
.global-search-results { min-height: 9rem; max-height: none; padding: .55rem .7rem; }
.global-search-result { gap: .9rem; padding: .75rem; border-radius: .75rem; transition: background .14s ease, border-color .14s ease, transform .14s ease; }
.global-search-result:hover,
.global-search-result.active,
.global-search-result:focus-visible { transform: translateY(-1px); }
.global-search-result-copy em { display: -webkit-box; overflow: hidden; white-space: normal; text-overflow: clip; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.global-search-state { min-height: 13rem; }
.global-search-footer { align-items: center; padding: .74rem 1rem; background: color-mix(in srgb, var(--theme-primary, #006d5b) 3%, white); }
.record-audit-meta { margin: .45rem 0 0; color: var(--theme-muted, #6a817a); font-size: .8rem; font-weight: 650; line-height: 1.45; }
@media (max-width: 640px) {
  .global-search-overlay { padding: max(.65rem, env(safe-area-inset-top)) .55rem .55rem; }
  .global-search-dialog { width: 100%; max-height: calc(100svh - 1.25rem); border-radius: .85rem; }
  .global-search-header { min-height: 4rem; padding: .7rem .8rem; }
  .global-search-input-row { margin: 0 .8rem .65rem; }
  .global-search-keyhint { display: none; }
  .global-search-hint { padding: .6rem .8rem; }
  .global-search-results { padding: .45rem; }
  .global-search-footer { justify-content: center; padding: .65rem .8rem; }
  .global-search-footer span:first-child { display: none; }
}

/* External inventory shares deliberately use a separate, calm read-only surface. */
.inventory-share-overlay { z-index: 320; }
.inventory-share-card { width: min(760px, calc(100vw - 2rem)); }
.inventory-share-result { padding: .85rem 1rem; border: 1px solid color-mix(in srgb, var(--theme-primary, #006d5b) 28%, #d8e5e1); border-radius: .8rem; background: color-mix(in srgb, var(--theme-primary, #006d5b) 5%, white); }
.inventory-share-result > span { display: block; margin-bottom: .45rem; font-size: .82rem; font-weight: 800; color: var(--theme-muted, #516b64); }
.inventory-share-result > div { display: flex; gap: .5rem; align-items: center; }
.inventory-share-result input { min-width: 0; flex: 1; }
.inventory-share-history { display: grid; gap: .55rem; max-height: 17rem; overflow: auto; }
.inventory-share-history-row { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: .72rem .8rem; border: 1px solid var(--theme-line, #d8e5e1); border-radius: .7rem; background: #fff; }
.inventory-share-history-row > div { display: grid; min-width: 0; gap: .15rem; }
.inventory-share-history-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-share-history-row span,.inventory-share-history-row small { color: var(--theme-muted, #516b64); font-size: .78rem; }
.inventory-share-method { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
.inventory-share-method legend { width: 100%; margin-bottom: 6px; color: var(--theme-ink); font-size: .82rem; font-weight: 800; }
.inventory-share-method label { display: flex; min-width: 0; gap: 9px; align-items: flex-start; padding: 12px; border: 1px solid var(--theme-line); border-radius: .7rem; background: var(--theme-panel); cursor: pointer; }
.inventory-share-method input { width: auto; min-width: auto; margin-top: 3px; accent-color: var(--theme-primary); }
.inventory-share-method span { display: grid; gap: 3px; min-width: 0; }
.inventory-share-method strong { color: var(--theme-ink); font-size: .84rem; }
.inventory-share-method small { color: var(--theme-ink-soft); font-size: .75rem; line-height: 1.35; }
.inventory-share-method label:has(input:checked) { border-color: color-mix(in srgb, var(--theme-primary) 58%, var(--theme-line)); background: color-mix(in srgb, var(--theme-primary) 7%, var(--theme-panel)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-primary) 11%, transparent); }
.inventory-share-code-result input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; letter-spacing: .18em; text-align: center; }
.secure-share-page { --secure-share-primary: var(--theme-primary, #006d5b); --secure-share-ink: #15352f; --secure-share-muted: #5b766f; --secure-share-line: #d8e5e1; position: relative; isolation: isolate; height: auto !important; min-height: 100vh; min-height: 100svh; margin: 0; overflow-x: clip !important; overflow-y: auto !important; color: var(--secure-share-ink); background: #f5f8f7; font-family: Manrope, Inter, system-ui, sans-serif; }
.secure-share-ambient { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--secure-share-primary) 10%, transparent), transparent 28rem), linear-gradient(145deg, #edf5f2, #f9fbfa 48%, #e9f0ee); }
.secure-share-ambient::after { position: absolute; right: -10rem; bottom: -12rem; width: 34rem; height: 34rem; border: 1px solid color-mix(in srgb, var(--secure-share-primary) 11%, transparent); border-radius: 50%; box-shadow: 0 0 0 4rem color-mix(in srgb, var(--secure-share-primary) 3%, transparent), 0 0 0 8rem color-mix(in srgb, var(--secure-share-primary) 2%, transparent); content: ""; }
.secure-share-viewport { position: relative; z-index: 1; display: grid; min-height: 100vh; min-height: 100svh; grid-template-rows: minmax(0, 1fr) auto; box-sizing: border-box; }
.secure-share-shell { display: flex; width: min(100% - 2rem, 28rem); min-width: 0; align-items: center; justify-content: center; margin: 0 auto; padding: 1rem 0; }
.secure-share-card-shell { width: min(100% - 2rem, 46rem); }
.secure-share-brand { display: flex; align-items: center; gap: .7rem; margin: 0; color: #315a51; letter-spacing: .01em; }
.secure-share-brand-copy { display: grid; gap: .1rem; min-width: 0; }
.secure-share-brand-copy strong { color: var(--secure-share-ink); font-size: .88rem; letter-spacing: .015em; }
.secure-share-brand-copy small { color: #607b74; font-size: .72rem; font-weight: 750; }
.secure-share-mark { display: grid; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: .65rem; color: white; background: var(--secure-share-primary); box-shadow: 0 .35rem .85rem color-mix(in srgb, var(--secure-share-primary) 18%, transparent); }
.secure-share-mark img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.secure-share-mark > span { display: none; font-size: 1rem; font-weight: 850; }
.secure-share-mark.is-fallback > span { display: grid; }
.secure-share-mark.is-fallback img { display: none; }
.secure-share-panel { padding: clamp(1.4rem, 4vw, 2.4rem); border: 1px solid color-mix(in srgb, var(--secure-share-primary) 17%, var(--secure-share-line)); border-radius: 1.15rem; background: rgba(255,255,255,.92); box-shadow: 0 1.5rem 4rem rgba(21, 53, 47, .11); }
.secure-share-panel > .secure-share-brand { margin: 0 0 1.45rem; padding: 0 0 1.15rem; border-bottom: 1px solid var(--secure-share-line); }
.secure-share-access-panel { box-sizing: border-box; width: 100%; max-width: 28rem; margin: 0 auto; padding: clamp(1.2rem, 4vw, 1.55rem); animation: secure-share-enter .34s cubic-bezier(.2,.8,.2,1) both; }
.secure-share-access-panel > .secure-share-brand { justify-content: center; margin-bottom: .95rem; padding-bottom: .8rem; }
.secure-share-access-panel .secure-share-brand-copy { text-align: left; }
.secure-share-intro { display: grid; width: min(100%, 24rem); justify-items: center; margin: 0 auto; text-align: center; }
.secure-share-intro .secure-share-eyebrow { margin-bottom: .35rem; }
.secure-share-intro h1 { width: 100%; margin: 0; font-size: clamp(1.35rem, 4vw, 1.65rem); letter-spacing: -.025em; text-align: center; }
.secure-share-intro > p:not(.secure-share-eyebrow) { width: 100%; margin: .55rem 0 0; text-align: center; }
.secure-share-eyebrow { margin: 0 0 .4rem; color: var(--secure-share-primary); font-size: .76rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.secure-share-panel h1 { margin: 0; font-size: clamp(1.55rem, 4vw, 2.25rem); line-height: 1.15; }
.secure-share-panel > p:not(.secure-share-eyebrow):not(.secure-share-error) { margin: .55rem 0 0; color: #537169; line-height: 1.55; }
.secure-share-progress { display: flex; width: max-content; max-width: 100%; align-items: center; justify-content: center; gap: .65rem; margin: 0 auto 1.35rem; padding: .5rem .7rem; border: 1px solid var(--secure-share-line); border-radius: 999px; background: #f7faf9; list-style: none; }
.secure-share-progress li { display: flex; align-items: center; gap: .42rem; min-width: 0; color: #789089; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.secure-share-progress li > span { display: grid; width: 1.55rem; height: 1.55rem; flex: 0 0 auto; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: .68rem; }
.secure-share-progress li.is-complete { color: var(--secure-share-primary); }
.secure-share-progress li.is-complete > span { color: #fff; border-color: var(--secure-share-primary); background: var(--secure-share-primary); }
.secure-share-progress li.is-current { color: var(--secure-share-ink); }
.secure-share-progress li.is-current > span { border-color: var(--secure-share-primary); box-shadow: 0 0 0 .16rem color-mix(in srgb, var(--secure-share-primary) 12%, transparent); }
.secure-share-form { display: grid; width: min(100%, 24rem); gap: .75rem; margin: 1.15rem auto 0; }
.secure-share-form label { display: grid; gap: .45rem; color: #315a51; font-size: .88rem; font-weight: 800; }
.secure-share-code-control { display: block; overflow: hidden; border: 1px solid #b9d0c9; border-radius: .8rem; background: #fff; transition: border-color .16s ease, box-shadow .16s ease; }
.secure-share-code-control:focus-within { border-color: var(--secure-share-primary); box-shadow: 0 0 0 .24rem color-mix(in srgb, var(--secure-share-primary) 15%, transparent); }
.secure-share-form input { width: 100%; box-sizing: border-box; padding: .78rem 1rem; border: 0; outline: 0; color: var(--secure-share-ink); background: transparent; font: 800 1.2rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .34em; text-align: center; }
.secure-share-form small { color: var(--secure-share-muted); font-size: .77rem; font-weight: 650; line-height: 1.5; }
.secure-share-delivery-status { width: min(100%, 24rem); margin: .85rem auto 0; color: var(--secure-share-muted); font-size: .76rem; font-weight: 700; line-height: 1.45; text-align: center; }
.secure-share-resend-form { display: flex; justify-content: center; margin-top: .6rem; }
.secure-share-resend-form button { padding: .2rem .35rem; border: 0; color: var(--secure-share-primary); background: transparent; font: inherit; font-size: .78rem; font-weight: 800; text-decoration: underline; text-underline-offset: .2rem; cursor: pointer; }
.secure-share-resend-form button:hover, .secure-share-resend-form button:focus-visible { color: var(--secure-share-ink); }
.secure-share-resend-form button:focus-visible { outline: 2px solid var(--secure-share-primary); outline-offset: .2rem; border-radius: .2rem; }
.secure-share-form .button { width: 100%; min-height: 2.9rem; justify-content: center; margin-top: .1rem; }
.secure-share-submit { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-height: 3rem !important; padding: .72rem 1rem; border: 1px solid color-mix(in srgb, var(--secure-share-primary) 82%, #003d34); border-radius: .82rem; background: var(--secure-share-primary); box-shadow: 0 .7rem 1.35rem color-mix(in srgb, var(--secure-share-primary) 24%, transparent); color: #fff; font-size: .9rem; font-weight: 850; letter-spacing: .005em; transition: transform .16s ease, background .16s ease, box-shadow .16s ease; }
.secure-share-submit:hover { background: color-mix(in srgb, var(--secure-share-primary) 88%, #002e27); box-shadow: 0 .9rem 1.7rem color-mix(in srgb, var(--secure-share-primary) 31%, transparent); transform: translateY(-1px); }
.secure-share-submit:active { box-shadow: 0 .35rem .8rem color-mix(in srgb, var(--secure-share-primary) 22%, transparent); transform: translateY(0); }
.secure-share-submit:focus-visible { outline: 3px solid color-mix(in srgb, var(--secure-share-primary) 32%, #fff); outline-offset: 3px; }
.secure-share-submit-arrow { display: grid; width: 1.42rem; height: 1.42rem; place-items: center; border-radius: 50%; background: rgb(255 255 255 / .16); font-size: 1.05rem; line-height: 1; transition: transform .16s ease, background .16s ease; }
.secure-share-submit:hover .secure-share-submit-arrow { background: rgb(255 255 255 / .24); transform: translateX(.16rem); }
.secure-share-error { margin: 1rem 0 0; padding: .75rem .85rem; border-radius: .65rem; color: #8a2424; background: #fff0ef; font-weight: 700; }
.secure-share-section { margin-top: 1rem; padding: 1rem; border: 1px solid #dbe8e4; border-radius: .85rem; background: #fbfdfc; }
.secure-share-section h2 { margin: 0 0 .85rem; font-size: 1rem; }
.secure-share-fields { display: grid; grid-template-columns: 1fr; gap: .6rem; margin: 0; }
.secure-share-fields > div { padding: .78rem .85rem; border: 1px solid #e0ebe7; border-radius: .65rem; background: #fff; }
.secure-share-fields dt { color: #5b766f; font-size: .73rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.secure-share-fields dd { margin: .28rem 0 0; overflow-wrap: anywhere; color: #173b34; font-weight: 700; line-height: 1.45; }
.secure-share-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem .55rem; margin: 0 .25rem; padding: .75rem .5rem max(1rem, env(safe-area-inset-bottom)); color: #6a837d; font-size: .73rem; font-weight: 650; line-height: 1.5; text-align: center; }
.secure-share-footer a { color: #315a51; font-weight: 850; text-decoration: none; text-underline-offset: .2rem; }
.secure-share-footer a:hover, .secure-share-footer a:focus-visible { color: var(--secure-share-primary); text-decoration: underline; }
.secure-share-footer a:focus-visible { outline: 2px solid var(--secure-share-primary); outline-offset: .2rem; border-radius: .2rem; }
.secure-share-footer-divider { color: #a2b6b0; }
@keyframes secure-share-enter { from { opacity: 0; transform: translateY(.8rem); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .secure-share-access-panel { animation: none; } }
@media (max-width: 640px) {
  .inventory-share-history-row { align-items: stretch; flex-direction: column; }
  .inventory-share-history-row button { align-self: flex-start; }
  .secure-share-shell { width: min(100% - 1rem, 28rem); padding-top: max(.75rem, env(safe-area-inset-top)); }
  .secure-share-card-shell { width: min(100% - 1rem, 46rem); }
  .secure-share-panel { padding: 1.2rem; border-radius: .95rem; }
  .secure-share-fields { grid-template-columns: 1fr; }
  .secure-share-footer { padding-top: 1.35rem; padding-bottom: max(.35rem, env(safe-area-inset-bottom)); }
  .secure-share-footer-divider { display: none; }
  .secure-share-footer > span { flex-basis: 100%; }
  .secure-share-access-panel { width: 100%; }
  .secure-share-progress { gap: .45rem; padding-inline: .55rem; }
  .secure-share-progress li { gap: .35rem; font-size: .66rem; }
  .secure-share-progress li > span { width: 1.35rem; height: 1.35rem; font-size: .62rem; }
}

/* Agent directory: email is often the longest operational value.  The fixed
   table rhythm prevents it from pushing or painting over adjacent columns. */
.agents-directory-table { width: 100%; min-width: 980px; table-layout: fixed; }
.agents-directory-table th:nth-child(1) { width: 19%; }
.agents-directory-table th:nth-child(2) { width: 22%; }
.agents-directory-table th:nth-child(3) { width: 15%; }
.agents-directory-table th:nth-child(4) { width: 12%; }
.agents-directory-table th:nth-child(5) { width: 15%; }
.agents-directory-table th:nth-child(6) { width: 10%; }
.agents-directory-table th:nth-child(7) { width: 7%; }
.agents-directory-table :is(th, td) { min-width: 0; overflow-wrap: anywhere; }
.agent-contact-cell { min-width: 0; }
.agent-email { display: block; overflow: hidden; color: var(--theme-ink); font-weight: 750; line-height: 1.42; overflow-wrap: anywhere; }
.agent-contact-cell .muted-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ticket reply composer: the action remains available while long notes,
   assignments, and attachments scroll in the editor body. */
@media (min-width: 761px) {
  .ticket-detail-layout { min-height: 0; }
  .ticket-reply-panel {
    align-self: stretch;
    position: relative;
    display: grid;
    min-height: 0;
    overflow: hidden;
  }
  .ticket-reply-form {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto auto;
    min-height: 0;
    height: 100%;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }
  .ticket-reply-form .form-section-main {
    min-height: 0;
    margin: 0;
    padding: 22px;
    overflow: auto;
    overscroll-behavior: contain;
  }
  .ticket-reply-submit-bar {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 14px 22px;
    border-top: 1px solid var(--theme-line);
    background: var(--theme-panel);
    box-shadow: 0 -8px 18px color-mix(in srgb, var(--theme-ink) 6%, transparent);
  }
  .ticket-reply-submit-bar .btn { min-height: 44px; }
  .ticket-reply-form > .ticket-requester-match,
  .ticket-reply-form > .api-tag { margin: 0 22px 14px; }
}

@media (max-width: 760px) {
  .ticket-reply-submit-bar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--theme-line);
    background: var(--theme-panel);
    box-shadow: 0 -8px 18px color-mix(in srgb, var(--theme-ink) 7%, transparent);
  }
}