/* ---------------------------------------------------------------------
 * Design system: APEX ink on a Quartr-style paper canvas. White sheets sit
 * on a soft grey shelf, lifted by a hairline ring and stacked soft shadows
 * instead of borders. APEX sky-blue primary actions; colour is kept for state.
 * -------------------------------------------------------------------*/

:root {
  --font-sans:
    "InterVariable", "Inter", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", system-ui, Arial, sans-serif;
  --font-mono:
    "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Surfaces */
  --bg-app: #f6f7f8;
  --bg-sidebar: #fbfbfc;
  --bg-card: #ffffff;
  --bg-subtle: #f9fafb;
  --bg-hover: rgba(19, 26, 48, 0.035);
  --bg-active: rgba(19, 26, 48, 0.06);
  --bg-editing: #fffbeb;

  /* Text */
  --ink: #131a30;
  --ink-hover: #262f4a;
  --fg: #131a30;
  --fg-muted: #5c6478;
  --fg-faint: #9aa1b1;
  --muted: #5c6478;

  /* Lines */
  --line: #ebedf0;
  --line-strong: #dcdfe5;

  /* Accents: links, focus, selection */
  --accent: #1d4ed8;
  --accent-hover: #1e40af;
  --accent-soft: rgba(29, 78, 216, 0.08);
  --sky: #68beff;

  /* Primary actions: verismo-apex.com sky blue, navy text for contrast */
  --primary: var(--sky);
  --primary-hover: #4eb2ff;
  --primary-ink: #0b2a4a;
  --primary-ink-soft: rgba(11, 42, 74, 0.6);

  /* State */
  --good: #16a34a;
  --good-ink: #15803d;
  --good-soft: #ecfdf3;
  --bad: #dc2626;
  --bad-ink: #b42318;
  --bad-soft: #fef3f2;
  --warn: #d97706;
  --warn-ink: #b45309;
  --warn-soft: #fff8eb;

  /* Radius */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;

  /* Quartr's layered lift: hairline ring + stacked soft drops */
  --ring: 0 0 0 1px rgba(19, 26, 48, 0.06);
  --shadow-xs: 0 1px 2px rgba(19, 26, 48, 0.05);
  --shadow-sm:
    0 0 0 1px rgba(19, 26, 48, 0.06),
    0 1px 2px rgba(19, 26, 48, 0.04),
    0 3px 8px rgba(19, 26, 48, 0.03);
  --shadow-md:
    0 0 0 1px rgba(19, 26, 48, 0.06),
    0 4px 12px rgba(19, 26, 48, 0.06),
    0 12px 32px rgba(19, 26, 48, 0.06);
  --shadow-lg:
    0 0 0 1px rgba(19, 26, 48, 0.06),
    0 12px 32px rgba(19, 26, 48, 0.1),
    0 32px 80px rgba(19, 26, 48, 0.12);
  --shadow-btn:
    0 7px 4px rgba(0, 0, 0, 0.02),
    0 3px 3px rgba(0, 0, 0, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.08);

  --focus-ring: 0 0 0 3px rgba(29, 78, 216, 0.16);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01";
  color: var(--fg);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  letter-spacing: -0.006em;
}

body {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  align-items: start;
  min-height: 100vh;
  overflow-x: hidden;
}

button {
  font-family: inherit;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(19, 26, 48, 0.05);
  padding: 1px 6px;
  border-radius: 5px;
  color: var(--fg);
}

::selection {
  background: rgba(104, 190, 255, 0.35);
}

/* ---------------------------------------------------------------------
 * Sidebar
 * -------------------------------------------------------------------*/

.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--line);
  padding: 18px 12px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 10px 22px;
}
.brand-logo {
  height: 17px;
  width: auto;
  display: block;
  margin: 6px 0 4px;
}
.brand-sub {
  font-size: 13px;
  line-height: 1.25;
  color: var(--fg-muted);
  font-weight: 500;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.nav-item {
  all: unset;
  cursor: pointer;
  padding: 7px 10px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  font-weight: 550;
  letter-spacing: -0.01em;
  transition: background 0.12s ease, color 0.12s ease;
}
.nav-item:hover {
  background: var(--bg-hover);
}
.nav-item.active {
  background: var(--bg-card);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.nav-icon {
  width: 18px;
  text-align: center;
  font-size: 14px;
}

.nav-parent {
  margin-top: 10px;
}
.nav > .nav-item:first-child {
  margin-top: 0;
}
.nav-parent.active {
  background: transparent;
  box-shadow: none;
}
.nav-parent.active:hover {
  background: var(--bg-hover);
}
.nav-parent .caret {
  margin-left: auto;
  font-size: 11px;
  line-height: 1;
  color: var(--fg-faint);
  transition: transform 0.15s ease, color 0.12s ease;
}
.nav-parent:hover .caret,
.nav-parent.active .caret {
  color: var(--fg-muted);
}
.nav-parent[aria-expanded="false"] .caret {
  transform: rotate(-90deg);
}

.nav-children {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 4px 16px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
}
.nav-parent[aria-expanded="false"] + .nav-children {
  display: none;
}
.nav-child {
  font-size: 13px;
  font-weight: 450;
  letter-spacing: -0.005em;
  color: var(--fg-muted);
  padding: 6px 10px;
}
.nav-child:hover {
  color: var(--fg);
  background: var(--bg-hover);
}
.nav-child.active {
  background: var(--bg-card);
  color: var(--ink);
  font-weight: 550;
  box-shadow: var(--shadow-sm);
}
.analysis-nav-count {
  margin-left: auto;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bad-soft);
  color: var(--bad-ink);
  font-size: 11px;
  line-height: 18px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.analysis-nav-count[hidden] {
  display: none;
}

.sidebar-footer {
  margin-top: 16px;
  padding: 12px 10px 4px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.logout-btn {
  margin-left: auto;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted);
  background: var(--bg-card);
  border: 0;
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-sm);
  padding: 4px 9px;
  cursor: pointer;
}
.logout-btn:hover {
  color: var(--fg);
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.dot-muted { background: var(--fg-faint); }
.dot-good  { background: var(--good); }
.dot-bad   { background: var(--bad); }

/* ---------------------------------------------------------------------
 * Content / cards
 * -------------------------------------------------------------------*/

.content {
  padding: 40px clamp(16px, 3vw, 56px) 72px;
  max-width: 100%;
  width: 100%;
  min-width: 0;
  /* clip, not hidden: hidden makes this a scroll container and breaks
     position: sticky for everything inside it */
  overflow-x: clip;
}

.tab { display: none; }
.tab.active { display: block; }
.subtab { display: none; }
.subtab.active { display: block; }

.tab-header {
  margin-bottom: 24px;
}
.tab-header h1 {
  margin: 0 0 6px;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 560;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.tab-header p {
  margin: 0;
  color: var(--fg-muted);
  font-size: 14.5px;
  line-height: 1.5;
  max-width: 68ch;
}

.muted {
  color: var(--fg-muted);
  font-size: 13px;
}

.card {
  background: var(--bg-card);
  border: 0;
  border-radius: var(--r-lg);
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.card-head-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.card-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 580;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.card-head .muted {
  font-size: 12.5px;
}

/* ---------------------------------------------------------------------
 * Tables (sort + filter + edit)
 * -------------------------------------------------------------------*/

.table-wrap {
  overflow-x: auto;
  margin: -4px -4px 0;
  padding: 4px;
}
/* Fade the edge that hides more columns (classes set by updateTableScrollHint) */
.table-wrap.has-more-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
.table-wrap.has-more-left {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
}
.table-wrap.has-more-left.has-more-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

.table-toolbar {
  margin: 10px 0 4px;
  display: flex;
  gap: 10px;
}

.analysis-chart-wrap {
  position: relative;
  width: 100%;
  height: 340px;
  margin: 12px 0 4px;
}

.missing-ra-end-dates {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.missing-ra-end-date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-size: 13px;
}
.missing-ra-end-date-month {
  min-width: 72px;
}
.missing-ra-end-date-row input[type="date"] {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 13px;
  background: #fff;
  color: var(--fg);
}
.missing-ra-end-date-row input[type="date"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.checkbox-inline input {
  margin: 0;
}

.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 550;
  line-height: 1.4;
}
.status-pill--match {
  background: var(--good-soft);
  color: var(--good-ink);
}
.status-pill--mismatch {
  background: var(--warn-soft);
  color: var(--warn-ink);
}
.status-pill--missing_ra,
.status-pill--missing_inputs {
  background: var(--bad-soft);
  color: var(--bad-ink);
}
.status-pill--bluecross {
  background: #eef4ff;
  color: #1d4ed8;
}
.status-pill--wsib {
  background: #f5f0ff;
  color: #6b21a8;
}

.missing-billing-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 2px;
}
.missing-billing-timestamps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  width: fit-content;
  margin-top: 8px;
  padding: 12px 10px 7px;
  border: 0;
  border-radius: 6px;
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
}
.missing-billing-timestamps > span {
  color: var(--muted);
  font-size: 13px;
}
.missing-billing-timestamps > .missing-billing-timestamp-separator {
  color: #4b5563;
}
.missing-billing-progress progress {
  width: min(360px, 45vw);
  height: 10px;
  accent-color: var(--accent);
}
.missing-billing-scope {
  align-items: flex-end;
  margin-top: 12px;
}
.missing-billing-scope button {
  min-height: 38px;
}
.missing-billing-tolerance {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.missing-billing-hide-exceed {
  margin-right: 12px;
}
.missing-billing-tolerance input {
  width: 64px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--fg);
  font: inherit;
}
.missing-billing-tolerance input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.missing-billing-expand-cell {
  width: 38px;
  min-width: 38px;
  padding-left: 8px !important;
  padding-right: 4px !important;
  text-align: center;
}
.missing-billing-expand-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--fg);
  cursor: pointer;
  font: inherit;
}
.missing-billing-expand-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.missing-billing-group-row > td {
  font-weight: 600;
}
.missing-billing-group-row {
  cursor: pointer;
}
.missing-billing-group-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.missing-billing-detail-row > td {
  padding: 0 !important;
  background: var(--bg-subtle);
}
.missing-billing-detail-wrap {
  padding: 12px 16px 16px 50px;
  overflow-x: auto;
}
.missing-billing-detail-table {
  width: 100%;
  background: #fff;
}
.missing-billing-detail-table th,
.missing-billing-detail-table td {
  font-size: 12px;
}

.volume-scroll-card .card-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.volume-scroll-card .search-input {
  max-width: 220px;
}
.volume-clinics-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 8px;
}
.volume-clinic-block {
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.volume-clinic-block:first-child {
  border-top: none;
  padding-top: 0;
}
.volume-clinic-block[data-state="loading"] .volume-chart-wrap {
  opacity: 0.35;
}
.volume-clinic-block[data-state="error"] .volume-clinic-meta {
  color: var(--bad, #b42318);
}
.volume-clinic-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.volume-clinic-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.volume-clinic-head h3 code {
  font-size: 14px;
}
.volume-chart-wrap {
  height: 280px;
}
.volume-phys-details {
  margin-top: 8px;
}
.volume-phys-details summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--fg-muted);
  user-select: none;
  padding: 4px 0;
}
.volume-phys-details summary:hover {
  color: var(--fg);
}
.volume-phys-details[open] summary {
  margin-bottom: 6px;
}
.volume-phys-table {
  font-size: 12px;
}
.volume-phys-table th.align-right,
.volume-phys-table td.align-right {
  text-align: right;
}
.volume-empty {
  padding: 24px 4px;
}
.search-input {
  all: unset;
  flex: 1;
  max-width: 360px;
  padding: 8px 12px 8px 32px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: 13px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa1b1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") no-repeat 11px 50% / 14px 14px;
  color: var(--fg);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.search-input:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.search-input::placeholder {
  color: var(--fg-faint);
}
.database-search {
  box-sizing: border-box;
  flex: 0 1 280px;
  width: 280px;
  max-width: 32vw;
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.data-table thead th {
  text-align: left;
  font-weight: 500;
  color: var(--fg-muted);
  padding: 9px 12px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 12px;
  letter-spacing: 0;
  white-space: nowrap;
}
.data-table thead th.sortable {
  cursor: pointer;
  user-select: none;
}
.data-table thead th.sortable:hover {
  color: var(--fg);
}
.data-table thead th .sort-arrow {
  display: inline-block;
  width: 0.8em;
  margin-left: 4px;
  color: var(--fg-faint);
  font-size: 10px;
}
.data-table thead th.sort-asc .sort-arrow,
.data-table thead th.sort-desc .sort-arrow {
  color: var(--accent);
}

.data-table .align-center { text-align: center; }
.data-table .align-right  { text-align: right;  }
.data-table .align-left   { text-align: left;   }

.data-table thead tr.filter-row th {
  text-transform: none;
  letter-spacing: 0;
  padding: 6px 8px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 37px;
}
.filter-input {
  width: 100%;
  min-width: 90px;
  max-width: 220px;
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: 12px;
  font-family: inherit;
  background: var(--bg-card);
  color: var(--fg);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-position: calc(100% - 9px) 50%;
  background-size: 11px 11px;
  background-repeat: no-repeat;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.filter-input:hover {
  background-color: #fafafa;
}
.filter-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.filter-input::placeholder {
  color: var(--fg-faint);
}

/* ---------------------------------------------------------------------
 * Custom dropdown panel (replaces native select popup)
 * -------------------------------------------------------------------*/

.select-panel {
  position: fixed;
  z-index: 2000;
  background: #fff;
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 6px;
  max-height: 280px;
  overflow-y: auto;
  font-size: 13px;
  color: var(--fg);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
.select-panel.above {
  transform-origin: bottom center;
}
.select-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.select-option {
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.08s ease, color 0.08s ease;
}
.select-option.is-active {
  background: var(--bg-active);
  color: var(--ink);
}
.select-option.is-selected {
  font-weight: 600;
}
.select-option.is-selected:not(.is-active)::after {
  content: "✓";
  float: right;
  color: var(--accent);
  margin-left: 8px;
}
.select-option.is-active.is-selected::after {
  color: var(--accent);
}
.select-option.is-disabled {
  color: var(--fg-faint);
  pointer-events: none;
}

.select-panel::-webkit-scrollbar {
  width: 8px;
}
.select-panel::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.16);
  border-radius: 4px;
  border: 2px solid #fff;
}

.data-table tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.data-table tbody tr:last-child td {
  border-bottom: 0;
}
.data-table tbody tr:hover td {
  background: var(--bg-subtle);
}

.data-table th.row-delete-col,
.data-table td.row-delete-col,
.data-table th.row-actions-col,
.data-table td.row-actions-col {
  width: 60px;
  text-align: center;
  padding: 10px 8px;
  white-space: nowrap;
}
.row-edit-btn,
.row-delete-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 26px;
  height: 26px;
  line-height: 1;
  border-radius: var(--r-sm);
  font-size: 13px;
  transition: background 0.12s ease, color 0.12s ease;
  position: relative;
}
.row-edit-btn::after,
.row-delete-btn::after {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  background: var(--ink);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.row-edit-btn:hover::after,
.row-delete-btn:hover::after {
  opacity: 1;
}
.row-edit-btn {
  color: var(--fg-muted);
}
.row-edit-btn:hover {
  background: var(--bg-active);
  color: var(--ink);
}
.row-delete-btn {
  color: var(--fg-faint);
}
.row-delete-btn:hover {
  background: var(--bad-soft);
  color: var(--bad);
}

.data-table td.editable {
  cursor: text;
  position: relative;
}
.data-table td.editable:hover::after {
  content: "✎";
  position: absolute;
  right: 6px;
  top: 8px;
  color: var(--fg-faint);
  font-size: 11px;
}
.data-table td.editing {
  padding: 4px 6px;
  background: var(--bg-editing);
}

/* Note column: ~2× typical cell width + bordered input-like box */
.data-table th[data-col="note"],
.data-table td[data-col="note"] {
  min-width: 14rem;
  width: 14rem;
  max-width: 22rem;
}
.data-table td[data-col="note"] {
  padding-right: 22px;
}
.data-table td[data-col="note"] .note-box {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 1.75em;
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}
.data-table td[data-col="note"] .note-box--empty {
  color: var(--fg-faint);
  font-style: italic;
  font-weight: 400;
  user-select: none;
}
.data-table td[data-col="note"]:hover .note-box {
  border-color: var(--accent);
}
.data-table td[data-col="note"].editing .cell-input {
  min-height: 1.75em;
}

.cell-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-family: inherit;
  background: var(--bg-card);
  color: var(--fg);
  box-shadow: var(--focus-ring);
  outline: none;
}
.cell-input::placeholder {
  color: var(--fg-faint);
  font-style: italic;
}

.cell-subline {
  color: var(--fg-muted);
  font-size: 11px;
  margin-top: 2px;
}

/* Pills: neutral chip, a coloured dot carries the state */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--fg);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
}
.pill-good::before,
.pill-muted::before,
.pill-warn::before,
.pill-bad::before,
.pill-fail::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pill-good::before { background: var(--good); }
.pill-muted { color: var(--fg-muted); }
.pill-muted::before { background: var(--fg-faint); }
.pill-warn::before { background: var(--warn); }
.pill-bad::before,
.pill-fail::before { background: var(--bad); }

.row-action {
  all: unset;
  cursor: pointer;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 550;
}
.row-action:hover { text-decoration: underline; }

.empty {
  padding: 18px 4px;
  color: var(--fg-muted);
  font-size: 13px;
}

/* ---------------------------------------------------------------------
 * Form / buttons
 * -------------------------------------------------------------------*/

.form-row {
  display: flex;
  gap: 14px;
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.form-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--fg-muted);
  font-weight: 500;
}

.form-row select,
.form-row input[type="month"],
.form-row input[type="date"],
.form-row input[type="text"] {
  padding: 9px 36px 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: 13.5px;
  min-width: 200px;
  font-family: inherit;
  background: var(--bg-card);
  color: var(--fg);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
  box-shadow: var(--shadow-xs);
}
.form-row select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: calc(100% - 12px) 50%;
  background-size: 12px 12px;
}
.form-row select:hover,
.form-row input[type="month"]:hover,
.form-row input[type="date"]:hover,
.form-row input[type="text"]:hover {
  background-color: #fafafa;
}
.form-row select:focus,
.form-row input[type="month"]:focus,
.form-row input[type="date"]:focus,
.form-row input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

button.primary {
  background: var(--primary);
  color: var(--primary-ink);
  border: 1px solid transparent;
  padding: 8px 16px;
  border-radius: var(--r-md);
  font-weight: 550;
  cursor: pointer;
  font-size: 13.5px;
  font-family: inherit;
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-btn);
  transition: background 0.12s, box-shadow 0.12s, opacity 0.12s;
}
button.primary:hover { background: var(--primary-hover); }
button.primary:active { transform: translateY(0.5px); }
button.primary:disabled { opacity: 0.4; cursor: default; transform: none; }
button.primary:focus-visible,
button.ghost:focus-visible { outline: none; box-shadow: var(--focus-ring); }

button.ghost {
  background: var(--bg-card);
  color: var(--fg);
  border: 0;
  padding: 8px 14px;
  border-radius: var(--r-md);
  font-weight: 550;
  cursor: pointer;
  font-size: 13.5px;
  font-family: inherit;
  letter-spacing: -0.005em;
  box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-xs);
  transition: background 0.12s, box-shadow 0.12s;
}
button.ghost:hover { background: var(--bg-subtle); box-shadow: 0 0 0 1px #c9cdd5, var(--shadow-xs); }
button.ghost:disabled { opacity: 0.45; cursor: default; }

/* ---------------------------------------------------------------------
 * Custom confirm (replaces native window.confirm so Chrome can't suppress)
 * -------------------------------------------------------------------*/

.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(19, 26, 48, 0.24);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  animation: fadein 0.12s ease-out;
}
.confirm-box {
  background: var(--bg-card);
  border: 0;
  border-radius: var(--r-lg);
  padding: 22px 22px 18px;
  width: min(420px, calc(100% - 40px));
  box-shadow: var(--shadow-lg);
}
.confirm-msg {
  font-size: 14px;
  line-height: 1.45;
  color: var(--fg);
  margin-bottom: 18px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.confirm-actions button.primary.danger {
  background: var(--bad);
  color: #fff;
}
.confirm-actions button.primary.danger:hover {
  background: var(--bad-ink);
}

/* Custom prompt (replaces window.prompt) */
.prompt-box {
  width: min(460px, calc(100% - 40px));
}
.prompt-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: var(--fg);
}
.prompt-msg {
  font-size: 13.5px;
  color: var(--fg-muted);
  margin-bottom: 12px;
  white-space: pre-wrap;
}
.prompt-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: 14px;
  font-family: inherit;
  background: var(--bg-card);
  color: var(--fg);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  margin-bottom: 6px;
  box-sizing: border-box;
}
.prompt-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.prompt-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 14px 0 18px;
}
.prompt-helper {
  font-size: 12px;
  color: var(--fg-muted);
  margin-bottom: 14px;
}
.prompt-error {
  font-size: 12px;
  color: #dc2626;
  margin: 4px 0 12px;
}
.raw-upload-box {
  width: min(980px, calc(100% - 40px));
  max-height: calc(100vh - 60px);
  overflow: auto;
}
.raw-upload-table-wrap {
  max-height: min(420px, calc(100vh - 260px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 12px;
}
.raw-upload-table input {
  width: 100%;
  min-width: 110px;
  box-sizing: border-box;
  padding: 7px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font: inherit;
  background: var(--bg-card);
  color: var(--fg);
}
.raw-upload-warning {
  display: block;
  padding: 8px 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
}

/* ---------------------------------------------------------------------
 * Modal
 * -------------------------------------------------------------------*/

/* Lock background scroll while any modal / confirm overlay is visible.
 * padding-right preserves layout when the scrollbar disappears. */
html:has(.modal-backdrop:not([hidden])),
html:has(.confirm-overlay),
body:has(.modal-backdrop:not([hidden])),
body:has(.confirm-overlay) {
  overflow: hidden;
}
body:has(.modal-backdrop:not([hidden])),
body:has(.confirm-overlay) {
  padding-right: var(--scrollbar-w, 0px);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(19, 26, 48, 0.24);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: fadein 0.15s ease-out;
}
.modal-backdrop[hidden] {
  display: none;
}
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  background: var(--bg-card);
  width: min(620px, calc(100% - 40px));
  max-height: 85vh;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  animation: pop 0.18s cubic-bezier(.2,.8,.2,1);
}
@keyframes pop {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line);
}
.modal-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 580;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.modal-close {
  all: unset;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-muted);
  font-size: 20px;
  line-height: 1;
  transition: background 0.1s;
}
.modal-close:hover { background: var(--bg-hover); color: var(--fg); }

.modal-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-muted);
  font-weight: 500;
}
.form-field input,
.form-field select,
.form-field textarea {
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-family: inherit;
  background: var(--bg-card);
  color: var(--fg);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
  box-shadow: var(--shadow-xs);
}
.form-field select {
  padding-right: 36px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: calc(100% - 12px) 50%;
  background-size: 12px 12px;
  cursor: pointer;
}
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  background-color: #fafafa;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  background-color: var(--bg-card);
}

.form-field.checkbox-field {
  flex-direction: row;
  align-items: center;
  color: var(--fg);
  font-size: 13.5px;
}
.form-field.checkbox-field input {
  width: auto;
  margin: 0;
}

.modal-foot {
  padding: 14px 22px 16px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--bg-subtle);
}

/* ---------------------------------------------------------------------
 * Breadcrumbs — Finder-style folder path bar
 * -------------------------------------------------------------------*/

.breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--fg-muted);
}

.crumb-trail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  flex: 1;
  min-width: 0;
}

.breadcrumbs .crumb {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--fg);
  font-weight: 500;
  font-size: 12.5px;
  transition: background 0.1s ease, color 0.1s ease;
  white-space: nowrap;
}
.breadcrumbs .crumb:hover {
  background: var(--bg-hover);
  color: var(--accent);
}
.breadcrumbs .crumb.is-current {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.breadcrumbs .crumb-icon {
  font-size: 11px;
  opacity: 0.85;
}
.breadcrumbs .crumb-sep {
  color: var(--fg-faint);
  font-size: 14px;
  padding: 0 1px;
  user-select: none;
}
.breadcrumbs .crumb-up {
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  background: var(--bg-card);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 8px;
}
.breadcrumbs .crumb-up:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------------------------------------------------------------------
 * Rawfile — Mac Finder column browser
 * -------------------------------------------------------------------*/

.browser-card {
  padding: 16px 16px 14px;
}

.browser-card { position: relative; }
.rf-drop-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--accent);
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.88);
  pointer-events: none;
}
/* While dragging, the overlay takes the drop so a PDF preview iframe
   underneath can't swallow it. */
.browser-card.is-dragover .rf-drop-overlay { display: flex; pointer-events: auto; }
/* Any file drag over the app: iframes (PDF previews) stop swallowing it. */
body.is-file-drag iframe { pointer-events: none; }
.rf-drop-label {
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  text-align: center;
}

.rf-search {
  position: relative;
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.rf-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 13px;
  pointer-events: none;
}
.rf-search-input {
  flex: 1 1 auto;
  width: 100%;
  padding: 5px 8px 5px 24px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 12.5px;
  color: var(--fg);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rf-search-input:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.rf-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 12px;
  width: 12px;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") center/contain no-repeat;
  cursor: pointer;
}

/* Side-by-side: column browser left, file viewer right */
.split-view {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 560px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

#tab-report-generator .split-view {
  height: calc(100vh - 260px);
  min-height: 640px;
}
.split-left {
  flex: 0 0 var(--split-left-width, clamp(220px, 25%, 320px));
  min-width: 220px;
  max-width: calc(100% - 334px);
  display: flex;
}
.split-resizer {
  position: relative;
  flex: 0 0 14px;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  outline: none;
}
.split-resizer::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--line);
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.split-resizer::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 32px;
  transform: translate(-50%, -50%);
  border-inline: 1px solid var(--line-strong);
  opacity: 0;
  transition: opacity 0.12s ease, border-color 0.12s ease;
}
.split-resizer:hover::before,
.split-resizer:focus-visible::before,
.split-view.is-resizing .split-resizer::before {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.split-resizer:hover::after,
.split-resizer:focus-visible::after,
.split-view.is-resizing .split-resizer::after {
  opacity: 1;
  border-color: var(--accent);
}
.split-right {
  flex: 1 1 auto;
  min-width: 320px;
  display: flex;
  overflow: hidden;
}

body.is-split-resizing {
  cursor: col-resize;
  user-select: none;
}

.rawfile-columns {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.01);
}

.rf-col {
  list-style: none;
  margin: 0;
  padding: 6px 4px;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  overflow-y: auto;
  background: var(--bg-card);
}

.rf-back {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin: 0 2px 4px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--line);
  user-select: none;
  background: var(--bg-subtle);
}
.rf-back:hover {
  background: var(--bg-hover);
  color: var(--accent);
}
.rf-back .rf-name {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rf-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 8px;
  margin: 0 2px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
  color: var(--fg);
  line-height: 1.3;
}
.rf-item:hover {
  background: var(--bg-hover);
}
.rf-item.is-selected {
  background: var(--accent);
  color: #fff;
}
.rf-item.is-selected .rf-chev,
.rf-item.is-selected .rf-icon {
  color: #fff;
}

/* When the column with this selected item isn't the last one (i.e. we've
   navigated deeper), Finder dims the highlight to medium gray. */
.rf-col:not(:last-child) .rf-item.is-selected {
  background: var(--line-strong);
  color: var(--fg);
}
.rf-col:not(:last-child) .rf-item.is-selected .rf-chev,
.rf-col:not(:last-child) .rf-item.is-selected .rf-icon {
  color: var(--fg);
}

.rf-icon {
  flex: 0 0 18px;
  text-align: center;
  font-size: 14px;
}
.rf-icon .file-icon-pdf,
.rfv-icon .file-icon-pdf,
.rfv-empty-icon .file-icon-pdf {
  vertical-align: -0.15em;
}
.rf-name {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.rf-search-result .rf-name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.rf-mainline {
  overflow: hidden;
  text-overflow: ellipsis;
}
.rf-subline {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg-faint);
  font-size: 11px;
  font-weight: 400;
}
.rf-item.is-selected .rf-subline {
  color: rgba(255, 255, 255, 0.78);
}
.rf-divider {
  margin: 8px 8px 4px;
  padding: 6px 0 3px;
  border-top: 1px solid var(--line);
  color: var(--fg-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rf-del {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fg-faint);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 80ms ease, background 80ms ease, color 80ms ease;
}
.rf-item:hover .rf-del,
.rf-item.is-selected .rf-del {
  opacity: 1;
}
.rf-del:hover {
  background: var(--bad-ink);
  color: #fff;
}
.rfv-delete:hover {
  background: var(--bad-ink) !important;
  color: #fff !important;
  border-color: var(--bad-ink) !important;
}
.rf-chev {
  flex: 0 0 12px;
  color: var(--fg-faint);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.rf-empty {
  padding: 12px 14px;
  color: var(--fg-faint);
  font-size: 12px;
  font-style: italic;
}

/* Quick-look style detail panel after a selected file */
.rf-detail {
  width: 280px;
  min-width: 280px;
  flex: 0 0 280px;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: var(--bg-subtle);
  border-left: 1px solid var(--line);
  overflow-y: auto;
}
.rf-detail-thumb {
  position: relative;
  width: 92px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
}
.rf-detail-icon {
  font-size: 84px;
  line-height: 1;
}
.rf-detail-ext {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}
.rf-detail-name {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  word-break: break-all;
  line-height: 1.35;
}
.rf-detail-meta {
  margin: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 4px 10px;
  font-size: 12px;
}
.rf-detail-meta dt {
  color: var(--fg-muted);
  font-weight: 500;
}
.rf-detail-meta dd {
  margin: 0;
  word-break: break-word;
  color: var(--fg);
}
.rf-detail-path {
  font-size: 10.5px;
  word-break: break-all;
  background: rgba(0, 0, 0, 0.04);
  color: var(--fg-muted);
  padding: 2px 6px;
}
.rf-download-btn {
  margin-top: auto;
  width: 100%;
}

/* ---------------------------------------------------------------------
 * Rawfile inline viewer (txt / csv / json)
 * -------------------------------------------------------------------*/

.rawfile-viewer {
  flex: 1;
  width: 100%;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.rawfile-viewer[hidden] {
  display: none;
}

/* Empty / placeholder state when no file is selected */
.rfv-empty-state {
  margin: auto;
  text-align: center;
  color: var(--fg-faint);
  font-size: 13px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.rfv-empty-icon {
  font-size: 56px;
  line-height: 1;
  opacity: 0.6;
}

/* PDF iframe fills the body */
.rfv-pdf {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg-subtle);
  display: block;
}

.rfv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-subtle);
}
.rfv-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.rfv-icon {
  font-size: 16px;
  flex: 0 0 auto;
}
.rfv-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}
.rfv-meta {
  font-size: 11.5px;
  color: var(--fg-muted);
  white-space: nowrap;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rfv-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.rfv-btn {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 7px;
}
#rfv-close {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  border-radius: 50%;
}

.rfv-body {
  overflow: auto;
  flex: 1;
}

.rfv-loading,
.rfv-error,
.rfv-empty {
  padding: 24px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 13px;
}
.rfv-error { color: var(--bad); }

.rfv-pre {
  margin: 0;
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg-card);
  white-space: pre;
  word-wrap: normal;
  overflow-wrap: normal;
}

.rfv-table-wrap {
  overflow: auto;
  height: 100%;
}
.rfv-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  font-family: var(--font-mono);
}
.rfv-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-subtle);
  color: var(--fg-muted);
  font-weight: 600;
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 11px;
}
.rfv-table tbody td {
  padding: 5px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  color: var(--fg);
  vertical-align: top;
}
.rfv-table tbody tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.018);
}
.rfv-table tbody tr:hover td {
  background: var(--accent-soft);
}

.rfv-note {
  padding: 8px 14px;
  font-size: 11.5px;
  color: var(--fg-muted);
  border-top: 1px solid var(--line);
  background: var(--bg-subtle);
}

/* Slim, Mac-like scrollbars inside the column browser */
.rawfile-columns,
.rf-col,
.rf-detail {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.rawfile-columns::-webkit-scrollbar,
.rf-col::-webkit-scrollbar,
.rf-detail::-webkit-scrollbar {
  width: 8px;
  height: 10px;
}
.rawfile-columns::-webkit-scrollbar-thumb,
.rf-col::-webkit-scrollbar-thumb,
.rf-detail::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* ---------------------------------------------------------------------
 * Report Generator: progress bar + pending list
 * -------------------------------------------------------------------*/

.progress-bar {
  height: 5px;
  width: 100%;
  background: rgba(120, 120, 128, 0.16);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 14px;
  position: relative;
}
.progress-fill {
  height: 100%;
  width: 0%;
  min-width: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  position: relative;
  overflow: hidden;
}
/* Subtle shimmer that only plays while a generation is in flight. */
.progress-bar.is-active .progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: progressShimmer 1.6s ease-in-out infinite;
}
@keyframes progressShimmer {
  to { transform: translateX(100%); }
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 10px;
  gap: 12px;
  font-size: 12px;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.progress-meta #report-progress-text {
  font-weight: 500;
  color: var(--fg);
}
.progress-meta #report-progress-current {
  font-size: 11.5px;
  opacity: 0.75;
}

.pending-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  padding: 8px;
}

.clinic-status {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
}
.clinic-status-headline {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 8px;
}
.clinic-status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 4px 16px;
  max-height: 240px;
  overflow-y: auto;
}
.clinic-status-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 8px;
  font-size: 12.5px;
  border-radius: 6px;
  background: var(--bg-card);
  border: 1px solid var(--line);
}
.clinic-status-name {
  font-weight: 500;
  color: var(--fg);
  flex: 0 0 auto;
}
.clinic-status-missing {
  color: var(--fg-faint);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pending-item {
  display: flex;
  flex-direction: column;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg-card);
  border: 1px solid var(--line);
}
.pending-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pending-name {
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pending-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fg-faint);
  flex: 0 0 auto;
}
.pending-item.is-running .pending-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  animation: pulseDot 1.2s ease-in-out infinite;
}
.pending-item.is-done  .pending-dot { background: var(--good); }
.pending-item.is-warn  .pending-dot { background: var(--warn); }
.pending-item.is-error .pending-dot { background: var(--bad); }

.pending-status {
  margin-left: auto;
  color: var(--fg-muted);
  font-size: 12px;
  white-space: nowrap;
}
.pending-item.is-error .pending-status { color: var(--bad); }
.pending-item.is-warn  .pending-status { color: #b8721a; }
.pending-item.is-done  .pending-status { color: var(--good-ink); }

.pending-subline {
  font-size: 12px;
  margin-left: 18px;
  margin-top: 2px;
  word-break: break-word;
}

.pending-toggle {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--fg-muted);
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 6px;
  cursor: pointer;
  flex: 0 0 auto;
}
.pending-toggle:hover {
  background: var(--bg-hover);
  color: var(--fg);
}

.pending-details {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  color: var(--fg);
  max-height: 220px;
  overflow-y: auto;
}
.pending-details-head {
  font-weight: 600;
  color: var(--fg-muted);
  margin-bottom: 6px;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pending-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pending-detail-list li {
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  word-break: break-word;
}
.pending-detail-pre {
  margin: 0;
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 180px;
  overflow: auto;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.2); opacity: 0.7; }
}

/* ---------------------------------------------------------------------
 * Toast / save indicator
 * -------------------------------------------------------------------*/

.toast {
  position: fixed;
  bottom: calc(20px + var(--send-dock-h, 0px));
  right: 20px;
  max-width: min(520px, calc(100vw - 40px));
  padding: 12px 18px;
  border-radius: var(--r-md);
  background: rgba(19, 26, 48, 0.95);
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: var(--shadow-lg, var(--shadow-md));
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  /* keep above modals/popups (modal z-index is 2000) */
  z-index: 9999;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
  /* allow click-to-dismiss when visible */
  pointer-events: auto;
  cursor: pointer;
}
.toast.bad {
  background: var(--bad);
}

/* ---------------------------------------------------------------------
 * Report result box
 * -------------------------------------------------------------------*/

.result {
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  color: var(--fg-muted);
  padding: 14px;
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow: auto;
  margin: 0;
}

/* ---------------------------------------------------------------------
 * Special-rule modal: day-of-week checkbox row
 * -------------------------------------------------------------------*/

.dow-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.dow-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  background: var(--bg-subtle);
}

.dow-checkbox input[type="checkbox"] {
  margin: 0;
}

.dow-checkbox:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------------------------------------------------------------------
 * Combobox: typeable input with always-visible suggestion list
 * -------------------------------------------------------------------*/

.combobox {
  position: relative;
}

.combobox > input {
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-family: inherit;
  background: var(--bg-card);
  color: var(--fg);
  width: 100%;
  box-sizing: border-box;
}

.combobox > input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.combobox > input:disabled {
  background: var(--bg-subtle, #f3f4f6);
  color: var(--fg-muted, #6b7280);
  border-color: var(--line, #e5e7eb);
  cursor: not-allowed;
  opacity: 1;
  -webkit-text-fill-color: var(--fg-muted, #6b7280);
}

.combobox-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-height: 240px;
  overflow-y: auto;
}

.combobox-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
  user-select: none;
  min-width: 0;
}

.combobox-option:hover {
  background: var(--bg-hover, var(--bg-subtle));
}

.combobox-option.disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.combobox-option.disabled:hover {
  background: transparent;
}

.combobox-label {
  flex: 1 0 42%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combobox-tag {
  font-size: 11.5px;
  color: var(--fg-muted);
  background: var(--bg-subtle);
  padding: 1px 6px;
  border-radius: 5px;
  flex: 0 0 auto;
}

.combobox-sub {
  font-size: 11.5px;
  color: var(--fg-muted);
  flex: 0 1 auto;
  min-width: 0;
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combobox-separator {
  padding: 6px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

.combobox-separator:first-child {
  border-top: 0;
  margin-top: 0;
}

.combobox-empty {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--fg-muted);
  text-align: center;
}

.combobox-host { display: block; }

/* Match form-row sizing so the combobox lines up with sibling inputs/dates */
.form-row .combobox-host {
  min-width: 240px;
}
.form-row .combobox-host .combobox-input {
  padding: 10px 14px;
  min-width: 240px;
}

/* Multi-select: chips + filter input share one bordered control.
 * Only applied when chips are actually rendered (`.with-chips`). */
.combobox.multi.with-chips .combobox-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-card);
  min-height: 40px;
  cursor: text;
  box-sizing: border-box;
}
.combobox.multi.with-chips .combobox-control:focus-within {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.combobox.multi.with-chips .combobox-input {
  border: 0;
  outline: none;
  padding: 4px 4px;
  flex: 1 1 120px;
  min-width: 100px;
  width: auto;
  background: transparent;
  font-size: 13.5px;
  box-shadow: none;
}
.combobox.multi.with-chips .combobox-input:focus {
  box-shadow: none;
  border: 0;
}
.combobox.multi.with-chips .combobox-chips {
  display: contents;
}
.combobox-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px 2px 8px;
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--fg);
  line-height: 1.5;
  max-width: 100%;
}
.combobox-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.combobox-chip-x {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--fg-muted);
  padding: 0 4px;
  border-radius: 4px;
}
.combobox-chip-x:hover {
  color: var(--fg);
  background: var(--bg-hover, rgba(0, 0, 0, 0.06));
}

/* Multi-select option checkbox affordance */
.combobox.multi .combobox-option::before {
  content: "";
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--line-strong);
  border-radius: 3px;
  flex: 0 0 auto;
  margin-right: 6px;
  background: var(--bg-card);
  font-size: 10px;
  line-height: 1;
  color: transparent;
}
.combobox.multi .combobox-option.is-selected::before {
  content: "✓";
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}

/* ---------------------------------------------------------------------
 * Special-hours modal: stacked multi-entry rows (date / hours / notes)
 * -------------------------------------------------------------------*/

#special-hours-entries {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hours-entry-row {
  display: grid;
  grid-template-columns: 1fr 140px 32px;
  gap: 8px;
  align-items: center;
}

.hours-entry-row input {
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  font-size: 13.5px;
  font-family: inherit;
  background: var(--bg-card);
  color: var(--fg);
  width: 100%;
  box-sizing: border-box;
}

.hours-entry-row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.hours-entry-row .remove-entry {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------------
 * Email Settings
 * -------------------------------------------------------------------*/

.es-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.es-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.es-actions button { padding: 7px 16px; font-size: 13px; }
.es-actions button:disabled { opacity: 0.4; cursor: default; }
.es-dirty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
  font-size: 12.5px;
  color: var(--fg-muted);
}
.es-dirty[hidden] { display: none; }
.es-dirty::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warn);
}

/* Saved templates: chips pick the one the editor below shows. */
.es-tpl-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.es-tpl-list[hidden] { display: none; }
.es-tpl-list button {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  transition: background 0.12s, box-shadow 0.12s, color 0.12s;
}
.es-tpl-list button:hover { box-shadow: inset 0 0 0 1px #c3c8d1; }
.es-tpl-list button:focus-visible { box-shadow: inset 0 0 0 1px var(--line-strong), var(--focus-ring); }
.es-tpl-list button span { font-size: 12px; color: var(--fg-faint); }
.es-tpl-list button[aria-selected="true"] {
  background: var(--primary);
  color: var(--primary-ink);
  box-shadow: var(--shadow-btn);
}
.es-tpl-list button[aria-selected="true"] span { color: var(--primary-ink-soft); }

.es-tpl-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.es-tpl-empty[hidden] { display: none; }
.es-tpl-empty p { margin: 0; color: var(--fg-muted); }

.es-tpl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.es-tpl-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 280px;
  min-width: 0;
}
.es-tpl-title .pill[hidden] { display: none; }
.es-tpl-name {
  field-sizing: content;
  min-width: 8ch;
  max-width: min(460px, 100%);
  margin-left: -10px;
  padding: 5px 10px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  font: inherit;
  font-size: 20px;
  font-weight: 560;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: background 0.12s, box-shadow 0.12s;
}
.es-tpl-name:hover { background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--line-strong); }
.es-tpl-name:focus {
  outline: none;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--accent), var(--focus-ring);
}
.es-actions .el-link-btn { padding: 0 4px; }
.es-actions .el-link-btn[hidden] { display: none; }
.es-link-danger:hover { color: var(--bad-ink); }

.es-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 680px;
  margin-bottom: 16px;
}
.es-switch button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: transparent;
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background 0.12s, box-shadow 0.12s;
}
.es-switch button strong { font-size: 14px; font-weight: 580; letter-spacing: -0.015em; color: var(--fg); }
.es-switch button span { font-size: 12px; color: var(--fg-muted); }
.es-switch button:hover { background: var(--bg-card); }
.es-switch button.active {
  background: var(--bg-card);
  box-shadow: 0 0 0 1.5px var(--primary), var(--shadow-sm);
}
.es-switch button:focus-visible { box-shadow: var(--focus-ring); }

.es-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.es-editor,
.es-preview {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.es-editor {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 20px 20px;
}
.es-pane { display: flex; flex-direction: column; gap: 18px; }
.es-pane[hidden] { display: none; }
.es-field { display: flex; flex-direction: column; gap: 6px; }
.es-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}
.es-hint { font-size: 12px; color: var(--fg-faint); }

/* Field palette: sticks to the top while scrolling long messages */
.es-tags {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 -20px;
  padding: 16px 20px 14px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.es-tags-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.es-tags-hint { font-size: 12px; color: var(--fg-faint); }
.es-tags-body { display: flex; flex-direction: column; gap: 6px; }
.es-tag-group {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}
.es-tag-group[hidden] { display: none; }
.es-tag-group-title {
  padding-top: 2px;
  font-size: 12px;
  color: var(--fg-faint);
}
.es-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* Shared pill look: palette tags, tags inside editors, inline hint */
.es-tag,
.rte-surface .rte-var,
.es-hint-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}
.es-tag {
  border: 0;
  cursor: grab;
  user-select: none;
  transition: background 0.1s, color 0.1s;
}
.es-tag:hover { background: var(--accent); color: #fff; }
.es-tag:active { cursor: grabbing; }
.es-tag:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.es-tag.is-inserted { background: var(--good); color: #fff; }
.rte-surface .rte-var {
  margin: 0 1px;
  cursor: grab;
  user-select: none;
  vertical-align: baseline;
}

/* Rich-text editor (wraps a hidden textarea / input) */
.rte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.rte.is-focused {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.rte.is-drop {
  border-color: var(--accent);
  border-style: dashed;
  background: #f7faff;
}
.rte-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--line);
}
.rte-btn {
  all: unset;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg-muted);
  user-select: none;
  transition: background 0.1s, color 0.1s;
}
.rte-btn:hover { background: var(--bg-hover); color: var(--fg); }
.rte-btn.is-active { background: var(--accent-soft); color: var(--accent); }
.rte-btn b { font-weight: 700; }
.rte-btn i { font-style: italic; font-family: Georgia, serif; }
.rte-btn u { text-decoration: underline; }
.rte-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rte-sep {
  width: 1px;
  height: 16px;
  margin: 0 4px;
  background: var(--line);
}
.rte-btn-source { margin-left: auto; }
.rte-surface {
  min-height: 160px;
  max-height: 440px;
  overflow-y: auto;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg);
  outline: none;
}
.rte-surface[contenteditable="true"]:empty::before {
  content: attr(data-placeholder);
  color: var(--fg-faint);
  pointer-events: none;
}
.rte-surface p { margin: 0 0 10px; }
.rte-surface p:last-child { margin-bottom: 0; }
.rte-surface ul,
.rte-surface ol { margin: 0 0 10px; padding-left: 24px; }
.rte-surface a { color: var(--accent); text-decoration: underline; }
.rte-source {
  display: none;
  box-sizing: border-box;
  width: 100%;
  min-height: 220px;
  padding: 12px 14px;
  border: 0;
  background: var(--bg-subtle);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
}
.rte.is-source .rte-surface { display: none; }
.rte.is-source .rte-source { display: block; }
.rte-hidden { display: none !important; }

/* Template editor: messages grow with their content so the page is the
   only vertical scroll. */
.es-layout .rte-surface { max-height: none; overflow-y: visible; }
.es-layout .rte-source { field-sizing: content; resize: none; }

.rte-single .rte-surface {
  min-height: 0;
  max-height: none;
  padding: 9px 12px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Preview */
.es-preview {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.es-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.es-preview-sample {
  margin-left: 6px;
  font-weight: 400;
  color: var(--fg-faint);
}
.es-preview-head { flex-wrap: wrap; }
.es-preview-pick {
  flex: 1 1 160px;
  min-width: 0;
  max-width: 260px;
  padding: 4px 8px;
  border: 0;
  border-radius: 6px;
  background: var(--bg-app);
  font: inherit;
  font-size: 12px;
  color: var(--fg);
  cursor: pointer;
}
.es-preview-pick[hidden] { display: none; }
.es-preview-pick:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.es-seg {
  display: inline-flex;
  padding: 2px;
  background: var(--bg-app);
  border-radius: 8px;
}
.es-seg button {
  all: unset;
  cursor: pointer;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--fg-muted);
  border-radius: 6px;
}
.es-seg button.active {
  background: var(--bg-card);
  color: var(--fg);
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.es-device {
  padding: 20px;
  background: var(--bg-app);
}
.es-mail {
  margin: 0 auto;
  padding: 22px 24px 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.es-device[data-device="mobile"] .es-mail {
  width: 375px;
  max-width: 100%;
  padding: 18px 16px 20px;
  border: 8px solid var(--ink);
  border-radius: 32px;
}
.es-mail-subject {
  margin-bottom: 18px;
  font-size: 20px;
  line-height: 1.3;
  color: #202124;
  overflow-wrap: anywhere;
}
.es-mail-subject.is-empty { color: var(--fg-faint); font-style: italic; }
.es-device[data-device="mobile"] .es-mail-subject { font-size: 17px; }
.es-mail-meta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
}
.es-mail-avatar {
  flex: 0 0 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.es-mail-who {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #202124;
}
.es-mail-who > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.es-mail-addr { font-size: 12px; color: #5f6368; }
.es-mail-date { font-size: 12px; color: #5f6368; white-space: nowrap; }
.es-mail-body {
  display: block;
  width: 100%;
  height: 200px;
  border: 0;
}
.es-mail-attach {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}
.es-mail-attach:empty { display: none; }
.es-mail-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 7px 12px 7px 8px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  font-size: 12.5px;
  color: #202124;
}
.es-mail-file > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.es-mail-file b {
  padding: 2px 4px;
  border-radius: 3px;
  background: #ea4335;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

@media (max-width: 1180px) {
  .es-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
 * Send-Email modal: recipient picker
 * -------------------------------------------------------------------*/

.modal:has(.send-email-form) {
  width: min(880px, calc(100% - 40px));
  max-height: 90vh;
}
.modal:has(.se-picker) {
  width: min(960px, calc(100% - 40px));
}

.modal:has(.se-compose:not([hidden])) {
  width: min(1240px, calc(100% - 40px));
  max-height: 92vh;
}

.se-pick-step,
.se-compose {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.se-pick-step[hidden],
.se-compose[hidden] { display: none; }

.se-template {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.se-template select {
  padding: 2px 6px;
  border: 0;
  border-radius: 6px;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font: inherit;
  color: var(--fg);
  cursor: pointer;
}
.se-template select:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Send custom email: Write email step */
.sec-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: end;
}
.sec-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  font-size: 13.5px;
  color: var(--fg);
  white-space: nowrap;
  cursor: pointer;
}
.sec-save input { margin: 0; }
.sec-bar input:disabled { opacity: 0.55; }
/* Stick to the modal's top edge, not inside its padding. */
.se-compose .es-tags { top: -20px; }
.sec-addrs { border-bottom: 1px solid var(--line); }
.sec-addr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 16px;
  font-size: 13px;
  color: var(--fg-muted);
}
.sec-addr + .sec-addr { border-top: 1px solid var(--line); }
.sec-addr > span { width: 22px; flex-shrink: 0; }
.sec-addr:focus-within { background: var(--bg-subtle); }

/* Directory picker (Send Email modal) */
.se-pick-pane {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.se-pick-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-subtle);
  font-size: 12.5px;
}
.se-crumbs {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.se-crumb {
  all: unset;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--accent);
}
.se-crumb:hover { background: var(--accent-soft); }
.se-crumb.is-current {
  color: var(--fg);
  cursor: default;
}
.se-crumb-sep {
  color: var(--fg-muted);
  user-select: none;
}
.se-pick-counts {
  font-size: 12px;
  color: var(--fg-muted);
  white-space: nowrap;
}
.se-pick-counts.has-sel {
  color: var(--accent);
  font-weight: 600;
}

.se-tree {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 360px;
  overflow-y: auto;
}
.se-tree-row {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.se-tree-row:last-child { border-bottom: 0; }
.se-tree-row:hover { background: var(--bg-hover); }
.se-tree-empty,
.se-tree-loading {
  padding: 18px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 12.5px;
  font-style: italic;
}
.se-tree-empty.bad {
  color: var(--bad-ink);
  font-style: normal;
}
.se-check {
  all: unset;
  cursor: pointer;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
  background: var(--bg-card);
  margin: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.1s, border-color 0.1s;
}
.se-check:hover { border-color: var(--accent); }
.se-check.is-checked {
  background: var(--accent);
  border-color: var(--accent);
}
.se-check.is-checked::after {
  content: "";
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.se-check.is-mixed {
  background: var(--accent);
  border-color: var(--accent);
}
.se-check.is-mixed::after {
  content: "";
  width: 8px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}
.se-row-main {
  all: unset;
  cursor: pointer;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  min-width: 0;
}
.se-tree-row.is-folder .se-row-main { cursor: pointer; }
.se-tree-row.is-file .se-row-main { cursor: default; }
.se-row-icon { font-size: 14px; line-height: 1; }
.se-row-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.se-tree-row.is-folder .se-row-name { color: var(--accent); }
.se-row-sub {
  font-size: 11.5px;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.se-groups { display: flex; flex-direction: column; gap: 14px; }
.se-groups-loading,
.se-groups-empty {
  padding: 14px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 12.5px;
  font-style: italic;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
}
.se-groups-empty.bad {
  color: var(--bad-ink);
  border-color: var(--bad-ink);
  font-style: normal;
}
.se-groups-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.se-groups-head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.se-groups-actions {
  display: flex;
  gap: 8px;
}
.se-group-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.se-group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.se-group-cycle {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 8px;
  font-weight: 600;
}
.se-group-name { font-weight: 600; font-size: 14px; }
.se-group-id { font-size: 12px; margin-left: 6px; }
.se-group-counts { font-size: 12px; color: var(--fg-muted); }

.send-email-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.send-email-meta {
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--fg-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.send-email-meta strong { color: var(--fg); margin-right: 4px; }

.recipient-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.recipient-section-title .row-action {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.recipient-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  max-height: 280px;
  overflow-y: auto;
}
.recipient-row {
  display: grid;
  grid-template-columns: 22px minmax(180px, 1.2fr) minmax(180px, 1.4fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.recipient-info { min-width: 0; }
.recipient-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  margin-top: 2px;
  font-size: 11.5px;
}
.recipient-mode {
  color: var(--fg-muted);
  font-family: var(--font-mono);
}
.recipient-pay {
  font-family: var(--font-mono);
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
}
.recipient-pay.money-good {
  background: var(--good-soft);
  color: var(--good-ink);
}
.recipient-pay.money-bad {
  background: var(--bad-soft);
  color: var(--bad-ink);
}
.recipient-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.recipient-row:last-child { border-bottom: 0; }
.recipient-row.is-disabled {
  opacity: 0.6;
}
.recipient-row input[type="checkbox"] { margin: 0; }
.recipient-row input[type="email"] {
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  font-size: 12.5px;
  font-family: inherit;
  background: var(--bg-card);
  color: var(--fg);
  width: 100%;
  box-sizing: border-box;
}
.recipient-row input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.recipient-name { font-weight: 500; }
.recipient-attach {
  font-size: 11px;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recipient-warn {
  color: #b8721a;
  font-size: 11.5px;
}

.send-email-templates label {
  font-size: 12px;
  color: var(--fg-muted);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.send-email-templates input,
.send-email-templates textarea {
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  font-size: 13px;
  font-family: var(--font-mono);
  background: var(--bg-card);
  color: var(--fg);
}
.send-email-templates textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.5;
}
.send-email-templates input:focus,
.send-email-templates textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.send-email-preview {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.send-email-preview .preview-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.send-email-preview .preview-label {
  font-weight: 600;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}
.send-email-preview .preview-subject {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.send-email-preview .preview-frame {
  width: 100%;
  height: 380px;
  border: 0;
  background: #fff;
}

.send-email-result {
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  max-height: 220px;
  overflow-y: auto;
}
.send-email-result.is-bad { border-color: var(--bad); color: var(--bad); }
.send-email-result.is-good { border-color: var(--good); }
.send-email-result ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------------------------------------------------------------------
 * Edit Report modal — a copy of the PDF pages on the grey shelf, with
 * every printed figure editable in place. Paper uses the report's font
 * (Roboto Light / Bold) and black hairline grid so it reads like the PDF.
 * -------------------------------------------------------------------*/

.modal:has(.er-form),
.modal:has(.er-doc) {
  width: min(1040px, calc(100% - 40px));
  max-height: 92vh;
}
.modal-head h3 .er-title-meta {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 450;
  letter-spacing: 0;
  color: var(--fg-muted);
}
.modal-body.er-modal-form {
  padding: 0;
  background: var(--bg-app);
}

/* Status line under the title: hint, or the yellow "check these" banner */
.er-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-subtle);
  font-size: 12.5px;
  color: var(--fg-muted);
  min-height: 44px;
  box-sizing: border-box;
}
.er-banner.is-warn {
  background: #fef9c3;
  border-bottom-color: #fde68a;
  color: #713f12;
}
.er-banner-text { flex: 1; min-width: 0; line-height: 1.4; }
.er-banner-text strong { color: #422006; font-weight: 600; }
.er-banner-icon { display: flex; flex: none; }
.er-banner-next { flex: none; padding: 5px 12px; font-size: 12.5px; }

.er-doc {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 24px 24px 32px;
}
.er-page { display: flex; flex-direction: column; gap: 8px; }
.er-cap {
  width: min(100%, 780px);
  margin: 0 auto;
  font-size: 11.5px;
  font-weight: 560;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
}
.er-paper {
  position: relative;
  width: min(100%, 780px);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 44px 60px 48px;
  background: #fff;
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
  font-family: "Roboto", var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  color: #000;
}
.er-plogo {
  position: absolute;
  top: 14px;
  right: 22px;
  height: 18px;
  opacity: 0.9;
}
.er-ptitle {
  margin: 8px 0 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #000;
}
.er-ph3 { margin: 0 0 14px; font-size: 14px; font-weight: 700; }
.er-psub { font-size: 15px; margin-top: 2px; }
.er-psub-split {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.er-psub-cycle { font-size: 11.5px; }
.er-psub-cycle span { margin-left: 22px; }
.er-rule { border: 0; border-top: 2px solid #000; margin: 6px 0 22px; }
.er-rule-thin { border-top-width: 1px; margin: 18px 0 26px; }
.er-addr {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  font-size: 13px;
}
.er-addr > div { display: flex; flex-direction: column; gap: 6px; }
.er-addr strong { font-weight: 700; }
.er-addr-r { text-align: right; align-items: flex-end; }
.er-pnote { margin: 12px 0 0; font-size: 12px; line-height: 1.5; }
.er-pnote strong { font-weight: 700; }
.er-aside {
  margin: 14px 0 0;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-muted);
}

.er-scroll { overflow-x: auto; }

/* Report tables */
.er-sheet {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.er-sheet-gap { margin-top: 24px; }
.er-sheet th {
  padding: 8px 6px;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
}
.er-sheet td {
  position: relative;
  border: 1px solid #000;
  padding: 0;
  height: 34px;
}
.er-sheet .er-d { padding: 0 10px; text-align: left; }
.er-sheet tr.er-b .er-d { font-weight: 700; }
.er-sheet tr.er-sub .er-d { padding-left: 24px; }
.er-sheet tr.er-sub .er-in { font-weight: 300; }
.er-sheet tr.er-b .er-v .er-in { font-weight: 700; }
.er-sheet tr.er-total td { background: rgba(236, 227, 209, 0.5); }
.er-sheet td.er-empty { background: none; }
.er-sheet tr.er-noline td { border-color: transparent; border-bottom-color: #000; }
/* Fixed columns like the PDF, so a long label never squeezes the figure */
.er-sheet-remit,
.er-sheet-fhg { table-layout: fixed; }
.er-sheet-remit :is(th, td):first-child { width: 50%; }
.er-sheet-fhg { font-size: 12px; }
.er-sheet-fhg td { height: 28px; }
.er-sheet-fhg :is(th, td):first-child { width: 71%; }
.er-sheet-split :is(th, td):first-child { width: 48%; }
.er-fhg-wrap { max-width: 560px; margin: 0 auto; }
.er-sheet td.er-ro { padding: 0 10px; text-align: right; color: #000; }
.er-sheet tr.er-mirror-row td { color: #000; }

/* Editable figure: fills its cell, looks like printed text until hovered */
.er-in {
  width: 100%;
  height: 100%;
  min-height: 26px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
  cursor: text;
  transition: background-color 0.1s ease;
}
.er-sheet td.er-v { cursor: text; }
.er-in:hover { background: rgba(29, 78, 216, 0.05); }
.er-in:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: #fff;
}
.er-in.is-edited { color: var(--accent); }
.er-in.is-invalid { outline: 2px solid var(--bad); outline-offset: -2px; background: var(--bad-soft); }
.er-in::placeholder { color: #a3a8b4; font-weight: 300; }

/* Figure written inside a description, e.g. "Split Rate: 70/30" */
.er-in-inline {
  display: inline-block;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 1px 3px;
  text-align: left;
  border-bottom: 1px dashed #9aa1b1;
}
.er-in-inline:hover { border-bottom-color: var(--accent); }

/* Direction label: "Total Pay to Physician" / "... from Physician to Clinic" */
.er-sign {
  appearance: none;
  -webkit-appearance: none;
  max-width: 100%;
  padding: 2px 18px 2px 0;
  border: 0;
  border-bottom: 1px dashed #9aa1b1;
  border-radius: 0;
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23131a30' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 2px center;
  font: inherit;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
}
.er-sign:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.er-sign.is-edited { color: var(--accent); }

/* Yellow "check this value" warning */
.er-sheet td.is-flagged,
.er-offpage-in.is-flagged { background: #fef9c3; }
.er-sheet tr.er-total td.is-flagged { background: #fef3a8; }
.er-sheet td.is-flagged { box-shadow: inset 0 0 0 2px #facc15; }
.er-flag {
  all: unset;
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
}
.er-flag:hover { background: rgba(161, 98, 7, 0.12); }
.is-flagged > .er-in { padding-left: 30px; }
.er-flag:focus-visible { outline: 2px solid var(--accent); }

/* User-added revenue rows (Edit only) */
.er-extra-label { display: flex; align-items: center; gap: 4px; }
.er-extra-label .er-in {
  flex: 1;
  min-width: 0;
  padding: 0;
  text-align: left;
  font-weight: 700;
}
.er-x {
  all: unset;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  text-align: center;
  line-height: 22px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--fg-faint);
  cursor: pointer;
}
.er-x:hover { background: var(--bad-soft); color: var(--bad); }
.er-x:focus-visible { outline: 2px solid var(--accent); }
.er-sheet tr.er-extra.is-new td { animation: er-row-in 0.25s ease-out; }
@keyframes er-row-in { from { background: var(--accent-soft); } to { background: transparent; } }
.er-sheet tr.er-add-row td {
  border: 1px dashed #b8bdc8;
  height: auto;
  padding: 6px 8px;
  font-family: var(--font-sans);
  font-weight: 400;
}
.er-add {
  all: unset;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 560;
  color: var(--accent);
  cursor: pointer;
}
.er-add:hover { background: var(--accent-soft); }
.er-add:focus-visible { outline: 2px solid var(--accent); }
.er-add-hint { margin-left: 8px; font-size: 11.5px; color: var(--fg-muted); }

/* Claim details / previous cycle / WSIB */
.er-sheet-detail { min-width: 640px; font-size: 11.5px; }
.er-sheet-detail th { border: 1px solid #000; font-size: 11px; line-height: 1.2; padding: 6px 4px; }
.er-sheet-detail td { height: 24px; }
.er-sheet-detail .er-in { padding: 0 6px; }
.er-sheet-detail td:nth-child(3) .er-in,
.er-sheet-detail td:nth-child(4) .er-in { text-align: center; }
.er-sheet-detail .er-fixed { padding: 0 6px; text-align: center; white-space: nowrap; }
.er-sheet-detail tfoot td,
.er-sheet-wsib tfoot td { padding: 0 6px; font-weight: 700; text-align: right; }
.er-sheet-detail tfoot td:first-child,
.er-sheet-wsib tfoot td:first-child { text-align: left; }
.er-sheet-detail tr.er-hidden-row td { color: #9aa1b1; background: #fafafa; }
.er-sheet-detail tr.er-hidden-row .er-in { color: #9aa1b1; }
.er-sheet-wsib { width: 360px; margin: 0 auto; }
.er-sheet-wsib th { border: 1px solid #000; }
.er-sheet-wsib td:first-child .er-in { text-align: center; }
.er-rules { margin-bottom: 16px; font-size: 11.5px; }
.er-rules strong { display: block; padding-bottom: 3px; border-bottom: 1px solid #8c8c8c; font-weight: 700; }
.er-rules ul { margin: 6px 0 0; padding-left: 18px; }

/* Value that isn't printed but is used elsewhere (FHG split model) */
.er-offpage {
  width: min(100%, 780px);
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.er-offpage-text { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--fg-muted); }
.er-offpage-text strong { color: var(--fg); font-weight: 600; font-size: 13px; }
.er-offpage-in {
  position: relative;
  width: 160px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.er-offpage-in .er-in { font-weight: 600; }

@media (max-width: 767px) {
  .er-banner { padding: 10px 16px; flex-wrap: wrap; }
  .er-doc { padding: 16px 12px 24px; gap: 20px; }
  .er-paper { padding: 28px 16px 24px; font-size: 12px; }
  .er-plogo { display: none; }
  .er-ptitle { font-size: 18px; }
  .er-addr { padding: 0; font-size: 12px; }
  .er-sheet td { height: 32px; }
  .er-sheet .er-d { padding: 4px 8px; }
  .er-sheet tr.er-sub .er-d { padding-left: 16px; }
  .er-add-hint { display: block; margin: 2px 0 0 6px; }
  .er-sheet-wsib { width: 100%; }
  /* Inputs are forced to 16px on phones (iOS zoom), so give figures room */
  .er-paper { font-size: 14px; }
  .er-sheet-fhg { font-size: 13px; }
  .er-sheet-remit :is(th, td):first-child { width: 56%; }
  .er-sheet-fhg :is(th, td):first-child { width: 56%; }
  .er-sheet-split :is(th, td):first-child { width: 50%; }
  .er-sheet .er-in { padding: 0 6px; }
  .er-sheet .er-sign { max-width: 100%; text-overflow: ellipsis; }
  .er-banner-more { display: none; }
  .er-offpage { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------
 * Referral Invoice Generator
 * -------------------------------------------------------------------*/

.form-row input[type="number"],
.form-row input[type="email"] {
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: 13.5px;
  min-width: 200px;
  font-family: inherit;
  background: var(--bg-card);
  color: var(--fg);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.form-row input[type="number"]:hover,
.form-row input[type="email"]:hover { background-color: #fafafa; }
.form-row input[type="number"]:focus,
.form-row input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.muted-inline {
  color: var(--fg-muted);
  font-weight: 400;
  font-size: 11.5px;
  margin-left: 4px;
}

.invoice-billto {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-top: 4px;
}
.invoice-billto > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  user-select: none;
}
.invoice-billto[open] > summary { margin-bottom: 10px; }

.invoice-col-pick { width: 50px; text-align: center; }
.invoice-col-amt {
  width: 140px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#invoice-lines-table tfoot td {
  border-top: 2px solid var(--line-strong);
  padding-top: 10px;
  font-weight: 600;
}
.invoice-row.is-bad { background: #fef6f6; }
.invoice-pdfpath {
  font-size: 11.5px;
  color: var(--fg-muted);
  word-break: break-all;
}

.invoice-result-body {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fafafa;
}
.invoice-pdf-frame {
  width: 100%;
  height: 720px;
  border: 0;
  display: block;
  background: #fff;
}

.modal:has(.invoice-email-form) {
  width: min(560px, calc(100% - 40px));
}
.invoice-email-preview {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-subtle);
  overflow: hidden;
}
.invoice-email-preview-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 8px 12px 0;
}
.invoice-email-preview-body {
  margin: 0;
  padding: 8px 12px 12px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  color: var(--fg);
}

a.primary {
  display: inline-block;
  text-decoration: none;
  background: var(--primary);
  color: var(--primary-ink);
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  transition: background 0.12s;
}
a.primary:hover { background: var(--primary-hover); }

/* Badges & pagination */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 550;
}
.badge-ok { background: var(--good-soft); color: var(--good-ink); }
.badge-bad { background: var(--bad-soft); color: var(--bad-ink); }

.pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px 2px;
  justify-content: center;
}
.pagination:empty { display: none; }
.page-btn {
  background: var(--bg-card);
  color: var(--fg);
  border: 0;
  border-radius: var(--r-md);
  box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-xs);
  padding: 6px 12px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 550;
}
.page-btn:hover { background: var(--bg-subtle); }
.page-btn:disabled { opacity: 0.4; cursor: default; }
.page-info { font-size: 13px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }

.error-cell {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bad-ink);
  font-size: 12px;
}
.card-head-right { display: flex; gap: 0.5rem; align-items: center; }
td.nowrap, .nowrap { white-space: nowrap; }

.missing-email-list {
  list-style: none;
  margin: 0;
  padding: 0 4px 8px;
  max-height: 320px;
  overflow: auto;
}
.missing-email-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 4px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.missing-email-list .missing-what { min-width: 0; }
.missing-email-list .missing-fix-btn {
  flex: none;
  padding: 4px 10px;
  font-size: 12.5px;
}
.missing-email-list .why { color: var(--bad); font-weight: 600; }
.missing-email-list .why-warn { color: var(--warn-ink); }

/* Fix all: one row of inputs per missing-configuration gap. */
.mfx-box {
  width: min(760px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
}
.mfx-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin: 4px 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.mfx-section-title {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 12px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
}
.mfx-row {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.mfx-section:last-child .mfx-row:last-child { border-bottom: 0; }
.mfx-row.is-bad { background: #fef2f2; }
.mfx-who { font-size: 13.5px; margin-bottom: 6px; }
.mfx-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mfx-inputs:has(> :only-child) { grid-template-columns: 1fr; }
.mfx-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mfx-field span { font-size: 11.5px; color: var(--muted); }
.mfx-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font: inherit;
  background: var(--bg-card);
}
.mfx-row-error { margin-top: 6px; color: var(--bad); font-size: 12.5px; }
@media (max-width: 767px) {
  .mfx-inputs { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
 * Email Log: one sheet with view tabs, state filters and a bulk bar
 * -------------------------------------------------------------------*/

.el-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.el-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.el-toolbar button.ghost { padding: 7px 12px; font-size: 13px; white-space: nowrap; }
.el-sync-status { font-size: 12.5px; color: var(--fg-muted); white-space: nowrap; }
.el-sync-status[hidden] { display: none; }
.el-countdown {
  font-size: 12.5px;
  color: var(--fg-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  cursor: default;
}
.el-toolbar button.el-compose { padding: 7px 14px; font-size: 13px; white-space: nowrap; }
.el-toolbar button.el-refresh {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  color: var(--fg);
}
.el-refresh svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.el-refresh.is-spinning svg { animation: el-spin 0.8s linear infinite; }
@keyframes el-spin { to { transform: rotate(360deg); } }
.el-sync-error { color: var(--bad-ink); font-weight: 550; }

.el-card { padding: 0; overflow: hidden; }

/* View tabs: underline, Quartr-style */
.el-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
}
.el-views { display: flex; gap: 22px; }
.el-views button {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 0 13px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -0.01em;
  color: var(--fg-muted);
  transition: color 0.12s, border-color 0.12s;
}
.el-views button:hover { color: var(--fg); }
.el-views button.active { color: var(--ink); border-bottom-color: var(--primary); }
.el-views button:focus-visible { box-shadow: var(--focus-ring); border-radius: 4px; }
.el-view-count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bg-active);
  color: var(--fg-muted);
  font-size: 11.5px;
  line-height: 18px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.el-views button.active .el-view-count { background: var(--primary); color: var(--primary-ink); }
.el-search.search-input { box-sizing: border-box; flex: 0 1 300px; width: 300px; padding-top: 7px; padding-bottom: 7px; }

/* State filters + bulk bar */
.el-subbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 10px 20px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.el-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.el-filters button {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  transition: background 0.12s, box-shadow 0.12s, color 0.12s;
}
.el-filters button:hover { box-shadow: inset 0 0 0 1px #c3c8d1; }
.el-filters button:focus-visible { box-shadow: inset 0 0 0 1px var(--line-strong), var(--focus-ring); }
.el-filters button span {
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.el-filters button[aria-checked="true"] {
  background: var(--primary);
  color: var(--primary-ink);
  box-shadow: var(--shadow-btn);
}
.el-filters button[aria-checked="true"] span { color: var(--primary-ink-soft); }
.el-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.el-dot-action { background: var(--warn); }
.el-dot-failed { background: var(--bad); }
.el-dot-open { background: var(--fg-faint); }

.el-bulk { display: flex; align-items: center; gap: 12px; animation: fadein 0.12s ease-out; }
.el-bulk[hidden] { display: none; }
.el-bulk-label { font-size: 13px; font-weight: 550; color: var(--ink); font-variant-numeric: tabular-nums; }
.el-bulk button.primary { padding: 6px 14px; font-size: 13px; }
.el-link-btn {
  all: unset;
  cursor: pointer;
  font-size: 13px;
  color: var(--fg-muted);
}
.el-link-btn:hover { color: var(--fg); text-decoration: underline; }

/* Tables */
.el-table-wrap { margin: 0; padding: 0; }
.el-view[data-view-pane="attention"] .el-table-wrap { max-height: 640px; overflow-y: auto; }
.el-table thead th:first-child,
.el-table tbody td:first-child { padding-left: 20px; }
.el-table thead th:last-child,
.el-table tbody td:last-child { padding-right: 20px; }
.el-table td { vertical-align: middle; }
.el-view[data-view-pane="resolved"] .pagination { padding-bottom: 14px; border-top: 1px solid var(--line); }
.el-empty {
  padding: 56px 20px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 14px;
}
.el-empty[hidden],
.el-table[hidden] { display: none; }

.el-row { cursor: pointer; }
.el-row.is-selected td,
.el-row.is-selected:hover td { background: rgba(104, 190, 255, 0.1); }
.el-check-col { width: 28px; padding-right: 0 !important; cursor: default; }
.el-check-col input { cursor: pointer; width: 15px; height: 15px; margin: 0; accent-color: var(--primary); vertical-align: middle; }
.el-ticket {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 550;
  color: var(--fg);
}
/* max-width: 0 lets a table column shrink and ellipsise instead of
   forcing the table wider than its card */
.el-recipient {
  width: 20%;
  min-width: 140px;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-subject { min-width: 160px; font-weight: 500; }
.el-subject .cell-subline { font-weight: 400; }
.el-details { width: 32%; max-width: 0; }
.el-snippet {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--fg-muted);
}
.el-snippet b { color: var(--fg); font-weight: 550; }
.el-snippet-error { color: var(--bad-ink); }
.el-due { font-size: 11.5px; color: var(--fg-muted); }
.el-due.overdue { color: var(--bad-ink); font-weight: 600; }
.el-thread-count {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bg-active);
  color: var(--fg-muted);
  font-size: 11.5px;
  line-height: 18px;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 900px) {
  .el-bar { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 12px; }
  .el-search.search-input { width: 100%; max-width: none; flex: none; }
  .el-clear-filters { align-self: flex-end; margin: 0 0 8px; }
}

body.ticket-open { overflow: hidden; }

/* Ticket popup: centered over a blurred page */
.ticket-backdrop {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(19, 26, 48, 0.24);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  animation: fadein 0.15s ease-out;
}
.ticket-backdrop[hidden] { display: none; }

.ticket-modal {
  position: relative;
  width: min(1100px, 100%);
  height: min(880px, 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-card);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  animation: ticket-pop 0.18s cubic-bezier(.2, .8, .2, 1);
}
@keyframes ticket-pop {
  from { transform: translateY(8px) scale(0.985); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.ticket-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 16px 24px;
  border-bottom: 1px solid var(--line);
}
.ticket-head-main { flex: 1; min-width: 0; }
.ticket-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 580;
  letter-spacing: -0.025em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticket-head-sub { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ticket-kind { font-size: 12.5px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.ticket-status-btn { padding: 7px 14px; font-size: 13px; flex-shrink: 0; }
.ticket-status-btn.is-resolve { color: var(--good-ink); }

.ticket-body {
  flex: 1;
  min-height: 0;
  /* the popup's only scroller, both ways: thread, composer and details move
     together, and a wide email widens the thread column instead of scrolling
     inside its own frame */
  overflow: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: minmax(min-content, 1fr) 260px;
}
.ticket-main {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--bg-app);
}
.ticket-timeline {
  flex: 1;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Details panel: pinned beside the thread while it scrolls */
.ticket-side {
  position: sticky;
  top: 0;
  align-self: start;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ticket-props { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.ticket-prop { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ticket-prop dd { margin: 0; overflow-wrap: anywhere; }
.ticket-prop-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-faint);
}
.ticket-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ticket-person-name { font-weight: 600; }
.ticket-person-addr { color: var(--fg-muted); font-size: 12.5px; overflow-wrap: anywhere; }
.ticket-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ticket-files li {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#ticket-due {
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg-card);
}
#ticket-due:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

/* Message cards */
.tk-card {
  flex-shrink: 0;
  background: var(--bg-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.tk-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.tk-card-out .tk-card-head { background: var(--bg-subtle); }
.tk-card-action,
.tk-card-failed {
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.35), 0 0 0 4px rgba(220, 38, 38, 0.06);
}
.tk-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  background: hsl(var(--av-h, 210) 60% 92%);
  color: hsl(var(--av-h, 210) 45% 32%);
}
/* contain: one-line labels truncate rather than widen the thread column */
.tk-who { flex: 1; min-width: 0; contain: inline-size; }
.tk-name {
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-addr { font-weight: 400; color: var(--fg-muted); font-size: 12.5px; }
.tk-sub {
  font-size: 12px;
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-card-head time { font-size: 12px; color: var(--fg-muted); white-space: nowrap; }
/* Email Log rows: ⋯ actions */
.el-table .el-more-col { width: 36px; padding-left: 0 !important; text-align: right; cursor: default; }
.el-table tbody td.el-more-col { padding-right: 12px !important; }
.el-more-btn {
  all: unset;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  font-size: 16px;
  color: var(--fg-muted);
}
.el-more-btn:hover,
.el-more-btn[aria-expanded="true"] { background: var(--bg-hover); color: var(--fg); }
.el-more-btn:focus-visible { box-shadow: var(--focus-ring); }
.el-menu {
  position: fixed;
  z-index: 300;
  min-width: 140px;
  padding: 4px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
}
.el-menu[hidden] { display: none; }
.el-menu button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  width: 100%;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg);
}
.el-menu button:hover,
.el-menu button:focus-visible { background: var(--bg-hover); }

/* Email Log headers: Excel-style sort + filter menu on every column */
.el-table thead th[data-col] { padding-top: 6px; padding-bottom: 6px; }
.el-col-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 -6px;
  padding: 3px 6px;
  border-radius: 6px;
  color: inherit;
  white-space: nowrap;
}
.el-col-btn:hover,
.el-col-btn[aria-expanded="true"] { background: var(--bg-hover); color: var(--fg); }
.el-col-btn:focus-visible { box-shadow: var(--focus-ring); }
.el-col-btn.is-filtered,
.el-col-btn.is-sorted { color: var(--ink); font-weight: 600; }
.el-col-sort { color: var(--accent); font-size: 11px; }
.el-col-sort:empty { display: none; }
.el-col-chevron {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.45;
}
.el-col-btn:hover .el-col-chevron,
.el-col-btn[aria-expanded="true"] .el-col-chevron { opacity: 1; }
.el-col-funnel { display: none; width: 11px; height: 11px; fill: var(--accent); }
.el-col-btn.is-filtered .el-col-funnel { display: block; }
.el-col-btn.is-filtered .el-col-chevron { display: none; }

.el-clear-filters { margin-left: auto; white-space: nowrap; }
.el-clear-filters[hidden] { display: none; }

.el-colmenu {
  position: fixed;
  z-index: 300;
  box-sizing: border-box;
  width: 280px;
  max-width: calc(100vw - 16px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  font-weight: 400;
  color: var(--fg);
  text-align: left;
}
.el-colmenu[hidden] { display: none; }
.el-colmenu-sort { display: flex; flex-direction: column; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.el-colmenu-sort button,
.el-colmenu-clear {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  width: 100%;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg);
}
.el-colmenu-sort button:hover,
.el-colmenu-sort button:focus-visible,
.el-colmenu-clear:hover:not(:disabled),
.el-colmenu-clear:focus-visible { background: var(--bg-hover); }
.el-colmenu-sort button[aria-pressed="true"] { background: var(--bg-active); color: var(--ink); font-weight: 600; }
.el-colmenu-clear { margin-top: 4px; }
.el-colmenu-clear:disabled { cursor: default; color: var(--fg-faint); }
.el-colmenu-search.search-input { box-sizing: border-box; width: 100%; margin: 4px 0; padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
.el-colmenu-list {
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.el-colmenu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  cursor: pointer;
}
.el-colmenu-item:hover { background: var(--bg-hover); }
.el-colmenu-item input { margin: 0; flex-shrink: 0; }
.el-colmenu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.el-colmenu-all .el-colmenu-label { color: var(--fg-muted); }
.el-colmenu-n { color: var(--fg-faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.el-colmenu-note { padding: 10px; color: var(--fg-muted); }
.el-colmenu-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 6px; }
.el-colmenu-foot button { padding: 6px 14px; font-size: 13px; }

/* Composer while forwarding: what's forwarded, and which attachments go */
.ticket-forward {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-subtle);
  font-size: 12.5px;
  color: var(--fg-muted);
}
.ticket-forward[hidden] { display: none; }
.ticket-forward-head { display: flex; align-items: center; gap: 8px; }
.ticket-forward-head > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-forward-head b { font-weight: 600; color: var(--fg); }
.ticket-forward-x {
  all: unset;
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  font-size: 15px;
  color: var(--fg-muted);
}
.ticket-forward-x:hover { background: rgba(0, 0, 0, 0.08); color: var(--fg); }
.ticket-forward-files { display: flex; flex-wrap: wrap; gap: 6px; }
.ticket-forward-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--fg);
  cursor: pointer;
}
.ticket-forward-file input { margin: 0; }
.ticket-forward-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-forward-file:has(input:not(:checked)) span { color: var(--fg-faint); text-decoration: line-through; }
.tk-chip {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 600;
}
.tk-chip-action { background: var(--bad-soft); color: var(--bad-ink); }
.tk-card-body { padding: 14px 16px; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.tk-frame { display: block; width: 100%; min-height: 24px; border: 0; }
.tk-quote-toggle {
  all: unset;
  cursor: pointer;
  margin-top: 8px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--fg-muted);
  font-size: 11px;
  line-height: 16px;
}
.tk-quote-toggle:hover { background: rgba(0, 0, 0, 0.1); }
.tk-error {
  padding: 8px 16px;
  background: var(--bad-soft);
  border-bottom: 1px solid rgba(220, 38, 38, 0.18);
  color: var(--bad-ink);
  font-size: 12.5px;
  font-weight: 500;
}
.tk-error:last-child { border-bottom: 0; }

.tk-text { white-space: pre-wrap; }
.tk-attachments { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 14px; }
.tk-attachment {
  font: inherit;
  font-size: 12px;
  color: var(--fg);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg-app);
}
button.tk-attachment { cursor: pointer; text-align: left; }
button.tk-attachment:hover { border-color: var(--accent); color: var(--accent); }
.ticket-files button.tk-attachment {
  all: unset;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.ticket-files button.tk-attachment:hover { color: var(--accent); text-decoration: underline; }
.tk-quoted { margin-top: 8px; }
.tk-quoted summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--fg-muted);
  font-size: 11px;
  line-height: 16px;
}
.tk-quoted summary::-webkit-details-marker { display: none; }
.tk-quoted .tk-text {
  margin-top: 6px;
  padding-left: 10px;
  border-left: 2px solid var(--line-strong);
  color: var(--fg-muted);
  font-size: 13px;
}
.tk-muted { color: var(--fg-muted); font-size: 13px; font-style: italic; }

.tk-note {
  flex-shrink: 0;
  padding: 10px 14px;
  border-radius: var(--r-lg);
  background: var(--warn-soft);
  border: 1px dashed rgba(180, 83, 9, 0.3);
  font-size: 13.5px;
  line-height: 1.5;
}
.tk-note header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.tk-note-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--warn-ink);
}
.tk-note time { font-size: 12px; color: var(--fg-muted); }

/* Composer */
.ticket-composer {
  padding: 10px 24px 18px;
  border-top: 1px solid var(--line);
  background: var(--bg-app);
}
.ticket-composer [hidden] { display: none !important; }
.ticket-mode { display: flex; gap: 2px; margin-bottom: 8px; }
.ticket-mode button {
  all: unset;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
}
.ticket-mode button:hover { color: var(--fg); }
.ticket-mode button.active { background: var(--bg-card); color: var(--fg); box-shadow: var(--shadow-sm); }
.ticket-compose-card {
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.ticket-compose-card:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.ticket-compose-card.is-note { background: var(--warn-soft); border-color: rgba(180, 83, 9, 0.3); }
.ticket-compose-card.is-note:focus-within { box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.14); }
.ticket-to {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--fg-muted);
}
.ticket-to > span { width: 22px; flex-shrink: 0; }
.ticket-subject-row input {
  all: unset;
  flex: 1;
  min-width: 0;
  padding: 6px 2px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg);
}
.ticket-subject-row input::placeholder { color: var(--fg-muted); font-weight: 400; }

/* New email: the same popup with just the composer — no thread, details or
   note/reply switch until it's sent and becomes a ticket. */
.ticket-modal.is-compose { width: min(780px, 100%); height: min(640px, 100%); }
.is-compose .ticket-timeline,
.is-compose .ticket-side,
.is-compose .ticket-mode,
.is-compose #ticket-status-btn,
.is-compose #ticket-forward-btn,
.is-compose #ticket-state { display: none; }
.is-compose .ticket-body { grid-template-columns: minmax(0, 1fr); }
.is-compose .ticket-main { border-right: 0; }
.is-compose .ticket-composer { flex: 1; display: flex; flex-direction: column; padding-top: 18px; border-top: 0; }
.is-compose .ticket-compose-card { flex: 1; display: flex; flex-direction: column; }
.is-compose #ticket-input { flex: 1 0 auto; min-height: 220px; }
.addr-tags {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 3px 0;
  cursor: text;
}
.addr-tags input {
  all: unset;
  flex: 1;
  min-width: 60px;
  padding: 3px 2px;
  font-size: 13.5px;
  color: var(--fg);
}
.addr-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 2px 4px 2px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  font-size: 12.5px;
  line-height: 18px;
  color: var(--fg);
  cursor: default;
}
.addr-tag > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addr-tag.invalid {
  background: var(--bad-soft);
  color: var(--bad-ink);
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.35);
}
.addr-tag button,
.tk-attach-chip button {
  all: unset;
  cursor: pointer;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  text-align: center;
  line-height: 18px;
  font-size: 14px;
  color: var(--fg-muted);
  flex-shrink: 0;
}
.addr-tag button:hover,
.tk-attach-chip button:hover { background: rgba(0, 0, 0, 0.1); color: var(--fg); }
.ticket-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 180px;
  padding: 14px 16px;
  outline: none;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: text;
}
.ticket-input.is-empty::before {
  content: attr(data-placeholder);
  color: var(--fg-faint);
  pointer-events: none;
}
.ticket-input img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--line);
  vertical-align: bottom;
}
.ticket-compose-card.is-dragover { border-color: var(--accent); box-shadow: var(--focus-ring); }
.ticket-attach-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; }
.tk-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 4px 3px 10px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  font-size: 12px;
  color: var(--fg);
}
.tk-attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tk-attach-chip small { color: var(--fg-muted); flex-shrink: 0; }
.ticket-composer-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
}
.ticket-attach-btn {
  all: unset;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--fg-muted);
}
.ticket-attach-btn:hover { background: rgba(0, 0, 0, 0.05); color: var(--fg); }
.ticket-composer-foot #ticket-send { margin-left: auto; padding: 7px 18px; }
.ticket-draft-status {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--fg-muted);
  white-space: nowrap;
}
.ticket-draft-status:not([hidden]) + #ticket-send { margin-left: 0; }
.ticket-draft-discard {
  all: unset;
  cursor: pointer;
  margin-left: 4px;
  padding: 3px 6px;
  border-radius: 6px;
  color: var(--bad);
}
.ticket-draft-discard:hover { background: rgba(0, 0, 0, 0.05); }
.el-draft-pill { margin-left: 4px; vertical-align: 1px; }
/* a saved New email draft waits behind the button */
.el-compose.has-draft::after {
  content: "· draft";
  margin-left: 6px;
  font-weight: 500;
  opacity: 0.8;
}

@media (max-width: 860px) {
  .ticket-backdrop { padding: 0; }
  .ticket-modal, .ticket-modal.is-compose { height: 100%; border-radius: 0; }
  .ticket-body { grid-template-columns: minmax(0, 1fr); }
  .ticket-main { border-right: 0; }
  .ticket-side { display: none; }
}

/* Report picker: a compact dialog over the dimmed ticket popup */
.report-picker {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(17, 24, 39, 0.22);
  animation: fadein 0.15s ease-out;
}
.report-picker[hidden] { display: none; }

/* Attachment viewer: larger dialog on the same dimmed overlay */
.att-dialog {
  width: min(960px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-card);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
  animation: ticket-pop 0.18s cubic-bezier(.2, .8, .2, 1);
}
.att-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 12px 20px;
  border-bottom: 1px solid var(--line);
}
.att-head h4 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.att-action { flex-shrink: 0; padding: 6px 12px; font-size: 12.5px; }
.att-action[hidden] { display: none; }
.att-body { flex: 1; min-height: 0; display: grid; background: var(--bg-app); }
.att-body iframe { width: 100%; height: 100%; border: 0; }
.att-body img { max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; }
.att-status { margin: auto; padding: 24px; color: var(--fg-muted); font-size: 13px; text-align: center; }
.att-status.is-error { color: var(--bad-ink); }
.rp-dialog {
  width: min(520px, 100%);
  height: min(560px, 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-card);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
  animation: ticket-pop 0.18s cubic-bezier(.2, .8, .2, 1);
}
.rp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 8px;
}
.rp-head h4 { margin: 0; font-size: 16px; font-weight: 600; }
.rp-search { padding: 4px 20px 8px; }
.rp-search input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-card);
  color: var(--fg);
}
.rp-search input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.rp-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 0 20px 8px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--line);
}
.rp-crumbs button {
  all: unset;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  color: var(--accent);
}
.rp-crumbs button:hover { background: var(--accent-soft); }
.rp-crumbs button:last-child { color: var(--fg); font-weight: 600; cursor: default; background: none; }
.rp-sep, .rp-crumb-note { color: var(--fg-faint); }
.rp-crumb-note { padding: 2px 6px; }
.rp-list { flex: 1; overflow-y: auto; padding: 6px 12px 12px; }
.rp-section {
  padding: 12px 8px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-faint);
}
.rp-row {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 13px;
  color: var(--fg);
}
.rp-row:hover { background: rgba(0, 0, 0, 0.04); }
.rp-row:focus-visible { box-shadow: var(--focus-ring); }
.rp-row.selected { background: var(--accent-soft); }
.rp-icon { flex-shrink: 0; }
.rp-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
}
.rp-name small { color: var(--fg-muted); font-size: 11.5px; }
.rp-chev { color: var(--fg-faint); font-size: 18px; line-height: 1; }
.rp-size { color: var(--fg-muted); font-size: 11.5px; flex-shrink: 0; }
.rp-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--line-strong);
  background: var(--bg-card);
  box-sizing: border-box;
  position: relative;
}
.rp-row.selected .rp-check { background: var(--accent); border-color: var(--accent); }
.rp-row.selected .rp-check::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.rp-view {
  all: unset;
  cursor: pointer;
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
  color: var(--accent);
  visibility: hidden;
}
.rp-row:hover .rp-view,
.rp-row:focus-within .rp-view { visibility: visible; }
.rp-view:hover { background: var(--accent-soft); }
.rp-empty { padding: 20px; text-align: center; color: var(--fg-muted); font-size: 12.5px; }
.rp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}
.rp-over { color: var(--bad-ink); }

/* =====================================================================
 * Phone & tablet app shell (< 1024px)
 * The sidebar gives way to a top app bar, a sticky sub-page switcher and
 * a bottom tab bar; phones (< 768px) also restack tables, forms and
 * dialogs for touch.
 * ===================================================================*/

.m-appbar,
.m-segments,
.m-tabbar,
.m-sheet-backdrop { display: none; }

@media (max-width: 1023px) {
  :root {
    --appbar-h: 52px;
    --tabbar-h: 58px;
    --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
    --shell-top: calc(var(--appbar-h) + env(safe-area-inset-top));
    --shell-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  }

  html { -webkit-text-size-adjust: 100%; }
  body {
    display: block;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
  }
  .sidebar { display: none; }

  .content {
    padding: calc(var(--shell-top) + 4px) var(--gutter) calc(var(--shell-bottom) + 40px);
  }

  /* Top app bar */
  .m-appbar {
    display: flex;
    align-items: center;
    position: fixed;
    inset: 0 0 auto;
    z-index: 150;
    height: var(--shell-top);
    padding: env(safe-area-inset-top) var(--gutter) 0;
    background: rgba(246, 247, 248, 0.82);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, background 0.2s;
  }
  .m-appbar.is-scrolled {
    background: rgba(251, 251, 252, 0.86);
    border-bottom-color: var(--line);
  }
  .m-appbar-logo {
    height: 16px;
    width: auto;
    transition: opacity 0.2s;
  }
  .m-appbar-title {
    position: absolute;
    left: 72px;
    right: 72px;
    top: env(safe-area-inset-top);
    height: var(--appbar-h);
    line-height: var(--appbar-h);
    text-align: center;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
  }
  .m-appbar.is-scrolled .m-appbar-title { opacity: 1; transform: none; }
  .m-appbar.is-scrolled .m-appbar-logo { opacity: 0; }
  .m-appbar-status { margin-left: auto; width: 8px; height: 8px; }

  /* Sub-page switcher, pinned under the app bar */
  .m-segments {
    display: flex;
    gap: 6px;
    position: sticky;
    top: var(--shell-top);
    z-index: 120;
    margin: 0 calc(var(--gutter) * -1) 6px;
    padding: 8px var(--gutter) 10px;
    overflow-x: auto;
    scrollbar-width: none;
    background: rgba(246, 247, 248, 0.86);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    scroll-padding-inline: var(--gutter);
  }
  .m-segments::-webkit-scrollbar { display: none; }
  .m-segments[hidden] { display: none; }
  .m-segments button {
    all: unset;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    font-size: 14px;
    font-weight: 550;
    letter-spacing: -0.01em;
    color: var(--fg);
    cursor: pointer;
    white-space: nowrap;
  }
  .m-segments button.active {
    background: var(--primary);
    color: var(--primary-ink);
    box-shadow: var(--shadow-btn);
  }
  .m-seg-count {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--bad);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    font-weight: 650;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .m-seg-count[hidden] { display: none; }

  .tab-header { margin: 14px 0 20px; }

  /* Bottom tab bar */
  .m-tabbar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed;
    inset: auto 0 0;
    z-index: 150;
    height: var(--shell-bottom);
    padding: 0 max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));
    background: rgba(251, 251, 252, 0.88);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--line);
  }
  .m-tabbar button {
    all: unset;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--fg-faint);
    cursor: pointer;
    transition: color 0.12s;
  }
  .m-tabbar button.active { color: var(--ink); }
  .m-tabbar button:focus-visible .m-tab-icon { box-shadow: var(--focus-ring); border-radius: 8px; }
  .m-tab-icon { position: relative; display: grid; place-items: center; width: 26px; height: 26px; }
  .m-tab-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .m-tabbar button.active .m-tab-icon svg { stroke-width: 2.1; }
  .m-tab-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0; }
  .m-tab-badge {
    position: absolute;
    top: -3px;
    left: 17px;
    min-width: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--bad);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(251, 251, 252, 0.95);
    font-style: normal;
    font-size: 10.5px;
    line-height: 17px;
    font-weight: 650;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .m-tab-badge[hidden] { display: none; }

  /* "More" bottom sheet */
  .m-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 260;
    background: rgba(19, 26, 48, 0);
    transition: background 0.2s;
  }
  .m-sheet-backdrop[hidden] { display: none; }
  .m-sheet-backdrop.is-open { background: rgba(19, 26, 48, 0.24); }
  .m-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    max-width: 520px;
    padding: 6px 16px calc(18px + env(safe-area-inset-bottom));
    background: var(--bg-app);
    border-radius: 18px 18px 0 0;
    box-shadow: var(--shadow-lg);
    transform: translateY(100%);
    transition: transform 0.24s cubic-bezier(.2, .8, .2, 1);
  }
  .m-sheet-backdrop.is-open .m-sheet { transform: none; }
  .m-sheet-grabber { width: 36px; height: 5px; margin: 4px auto 14px; border-radius: 3px; background: var(--line-strong); }
  .m-sheet-group {
    background: var(--bg-card);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 14px;
  }
  .m-sheet-row {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 16px;
    font-size: 15.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--fg);
    cursor: pointer;
  }
  .m-sheet-row + .m-sheet-row { box-shadow: inset 0 1px 0 var(--line); }
  .m-sheet-row:active { background: var(--bg-subtle); }
  .m-sheet-static { cursor: default; color: var(--fg-muted); font-size: 14px; }
  .m-sheet-icon { display: grid; place-items: center; width: 24px; color: var(--fg-muted); }
  .m-sheet-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .m-sheet-chev { margin-left: auto; color: var(--fg-faint); font-size: 22px; line-height: 1; }
  .m-sheet-danger { color: var(--bad-ink); }
  .m-sheet-danger .m-sheet-icon { color: var(--bad); }

  /* Toasts float above the tab bar */
  .toast {
    left: var(--gutter);
    right: var(--gutter);
    bottom: calc(var(--shell-bottom) + 12px + var(--send-dock-h, 0px));
    max-width: none;
  }

  /* Email Log: selection becomes a floating action bar */
  .el-bulk {
    position: fixed;
    left: var(--gutter);
    right: var(--gutter);
    bottom: calc(var(--shell-bottom) + 12px);
    z-index: 140;
    margin: 0 auto;
    max-width: 560px;
    padding: 10px 10px 10px 16px;
    border-radius: 14px;
    background: var(--primary);
    box-shadow: var(--shadow-lg);
    animation: bulk-up 0.2s cubic-bezier(.2, .8, .2, 1);
  }
  @keyframes bulk-up {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
  .el-bulk-label { color: var(--primary-ink); flex: 1; }
  .el-bulk .el-link-btn { color: var(--primary-ink-soft); }
  .el-bulk button.primary { background: #fff; color: var(--primary-ink); padding: 8px 16px; }
  .el-view[data-view-pane="attention"] .el-table-wrap { max-height: none; overflow: visible; }

  /* Long split panes stack */
  .split-view,
  #tab-report-generator .split-view {
    flex-direction: column;
    height: auto;
    min-height: 0;
    gap: 12px;
  }
  .split-left {
    flex: none;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 46vh;
    min-height: 300px;
  }
  .split-resizer { display: none; }
  .rawfile-viewer,
  .tab-header { scroll-margin-top: calc(var(--shell-top) + 12px); }
  .es-tags { top: calc(var(--shell-top) + 52px); }
  .split-right { min-width: 0; min-height: 60vh; }
  .rawfile-columns { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Bigger touch targets */
  button.primary,
  button.ghost { min-height: 40px; }
  .row-edit-btn,
  .row-delete-btn { width: 34px; height: 34px; }
  .es-tag-list .es-tag { min-height: 32px; padding-inline: 11px; }
  .breadcrumbs .crumb { min-height: 32px; box-sizing: border-box; }
  .el-filters button { min-height: 32px; box-sizing: border-box; }
  /* no hover on touch: keep the file delete button visible and tappable */
  .rf-del { flex-basis: 32px; width: 32px; height: 32px; font-size: 18px; opacity: 1; }
}

/* Tablets: roomier bar with icon + label side by side */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --gutter: max(32px, env(safe-area-inset-left), env(safe-area-inset-right)); --tabbar-h: 60px; }
  .m-tabbar { padding-inline: max(48px, env(safe-area-inset-left)); }
  .m-tabbar button { flex-direction: row; gap: 8px; }
  .m-tab-label { font-size: 13px; letter-spacing: -0.005em; }
  .m-tab-badge { left: auto; right: 13px; }
}

/* Email Log reads like a mail inbox on phones and tablets */
@media (max-width: 1023px) {
  .el-table thead { display: none; }
  .el-table,
  .el-table tbody { display: block; width: auto; }
  .el-table tbody tr { border-bottom: 1px solid var(--line); }
  .el-table tbody tr:last-child { border-bottom: 0; }
  .el-table tbody tr.el-row {
    display: grid;
    column-gap: 12px;
    row-gap: 3px;
    padding: 14px 16px;
    margin: 0;
  }
  .el-table tbody tr.el-row td {
    display: block;
    padding: 0 !important;
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    min-width: 0;
  }
  .el-table tbody tr.el-row td::before { content: none; }
  .el-table tbody tr.el-row:active td { background: transparent; }
  .el-table tbody tr.el-row:active { background: var(--bg-subtle); }
  .el-row.is-selected { background: rgba(104, 190, 255, 0.1); }
  .el-row.is-selected td { background: transparent !important; }
  .el-table .cell-subline { font-size: 12px; }
  .el-recipient { font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.01em; max-width: none; width: auto; min-width: 0; }
  .el-subject { min-width: 0; }
  .el-details { max-width: none; width: auto; }
  .el-snippet { font-size: 13.5px; }

  #email-attention-table tr.el-row {
    grid-template-columns: 22px minmax(0, 1fr) auto auto;
    grid-template-areas:
      "check recip  time   time"
      "check subj   subj   subj"
      "check detail detail detail"
      "check state  ticket more";
  }
  #email-attention-table tr.el-row > td:nth-child(8) { grid-area: more; align-self: center; justify-self: end; }
  #email-attention-table tr.el-row > td:nth-child(1) { grid-area: check; padding-top: 2px !important; }
  #email-attention-table tr.el-row > td:nth-child(2) { grid-area: ticket; justify-self: end; align-self: center; }
  #email-attention-table tr.el-row > td:nth-child(2) .cell-subline { display: none; }
  #email-attention-table tr.el-row > td:nth-child(3) { grid-area: state; margin-top: 6px; }
  #email-attention-table tr.el-row > td:nth-child(4) { grid-area: recip; }
  #email-attention-table tr.el-row > td:nth-child(5) { grid-area: subj; }
  #email-attention-table tr.el-row > td:nth-child(6) { grid-area: detail; }
  #email-attention-table tr.el-row > td:nth-child(7) { grid-area: time; font-size: 12.5px; }
  #email-attention-table .el-check-col { width: auto; }
  #email-attention-table .el-check-col input { width: 20px; height: 20px; }

  #email-resolved-table tr.el-row {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-areas:
      "recip    recip  recip  sent"
      "subj     subj   subj   subj"
      "delivery thread ticket more";
  }
  #email-resolved-table tr.el-row > td:nth-child(7) { grid-area: more; align-self: center; justify-self: end; }
  #email-resolved-table tr.el-row > td:nth-child(1) { grid-area: ticket; justify-self: end; align-self: center; }
  #email-resolved-table tr.el-row > td:nth-child(2) { grid-area: delivery; margin-top: 6px; }
  #email-resolved-table tr.el-row > td:nth-child(3) { grid-area: recip; }
  #email-resolved-table tr.el-row > td:nth-child(4) { grid-area: subj; }
  #email-resolved-table tr.el-row > td:nth-child(5) { grid-area: sent; font-size: 12.5px; color: var(--fg-muted); }
  #email-resolved-table tr.el-row > td:nth-child(6) { grid-area: thread; align-self: center; }
  #email-resolved-table tbody tr:not(.el-row) td { padding: 24px 16px !important; }

}

/* ---------------------------------------------------------------------
 * Data tables become stacked cards on phones and tablets; each cell
 * carries its column name (data-label, set by labelTableCells).
 * -------------------------------------------------------------------*/

@media (max-width: 1023px) {
  .table-wrap { overflow: visible; margin: 0; padding: 0; }
  .data-table thead { display: none; }
  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td { display: block; width: auto; }
  .data-table tbody tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .data-table tbody tr:last-child { border-bottom: 0; }
  .data-table tbody tr:hover td { background: transparent; }
  .data-table tbody td {
    display: block;
    min-width: 0 !important;
    max-width: none !important;
    padding: 3px 0 !important;
    border: 0;
    text-align: right;
    /* a long email or ID drops below its label instead of splitting */
    overflow-wrap: normal;
  }
  /* floated label: multi-line values stack on the right */
  .data-table tbody td::before {
    content: attr(data-label);
    float: left;
    max-width: 45%;
    margin-right: 16px;
    text-align: left;
    color: var(--fg-muted);
    font-size: 13px;
    font-weight: 450;
  }
  .data-table tbody td[data-label=""]::before,
  .data-table tbody td:not([data-label])::before { content: none; }
  .data-table tbody td::after { content: ""; display: table; clear: both; }
  /* column alignment from the desktop table doesn't apply to cards */
  .data-table tbody td.align-center,
  .data-table tbody td.align-left { text-align: right; }
  .data-table tbody td:first-child {
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding-bottom: 6px !important;
  }
  .data-table tbody td:first-child::before { content: none; }
  .data-table tbody td[colspan] { text-align: center; font-weight: 400; color: var(--fg-muted); }
  .data-table td.editable:hover::after { content: none; }
  .data-table td[data-col="note"] { width: auto; }
  .data-table td[data-col="note"] .note-box { text-align: left; }
  .data-table td.row-actions-col,
  .data-table td.row-delete-col { width: auto; padding-top: 8px !important; text-align: right; }
}

/* Tablets: two fields per line so cards don't stretch into long rows */
@media (min-width: 768px) and (max-width: 1023px) {
  .data-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    padding: 14px 0;
  }
  .data-table tbody td:first-child,
  .data-table tbody td.row-actions-col,
  .data-table tbody td.row-delete-col,
  .data-table tbody td[colspan] { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------
 * Phones (< 768px)
 * -------------------------------------------------------------------*/

@media (max-width: 767px) {
  :root { --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right)); }

  .tab-header h1 { font-size: 30px; letter-spacing: -0.035em; }
  .tab-header p { font-size: 14px; }

  .card { padding: 16px; border-radius: 14px; margin-bottom: 14px; }
  .card-head { flex-wrap: wrap; align-items: flex-start; margin-bottom: 12px; }
  .card-head-left { flex-wrap: wrap; row-gap: 2px; }
  .card-head-actions { flex-wrap: wrap; }

  /* iOS zooms into any field under 16px */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .ticket-input,
  .rte-surface { font-size: 16px !important; }

  .form-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .form-row label { width: 100%; }
  .form-row select,
  .form-row input[type="month"],
  .form-row input[type="date"],
  .form-row input[type="text"] { min-width: 0; width: 100%; }
  .form-row > button { width: 100%; }

  .search-input,
  .database-search { flex: 1 1 100%; width: 100%; max-width: none; box-sizing: border-box; }
  .table-toolbar { flex-wrap: wrap; }

  /* Email Log reads like a mail inbox */
  .el-header { align-items: stretch; }
  .el-toolbar { justify-content: flex-start; }
  .el-sync-status { width: 100%; }
  .el-bar { padding: 0 16px 12px; }
  .el-views { gap: 18px; }
  .el-subbar { padding: 10px 0; min-height: 0; }
  .el-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 16px;
    width: 100%;
  }
  .el-filters::-webkit-scrollbar { display: none; }
  .el-filters button { flex-shrink: 0; padding: 7px 12px; }
  .el-empty { padding: 40px 16px; }

  .sec-bar { grid-template-columns: minmax(0, 1fr); }
  .sec-save { padding-bottom: 0; }
  .es-tpl-name { font-size: 18px; }

  /* Dialogs rise from the bottom as sheets */
  .modal-backdrop,
  .confirm-overlay { align-items: flex-end; }
  .modal,
  .modal:has(.send-email-form),
  .modal:has(.se-picker) {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - env(safe-area-inset-top) - 16px) !important;
    border-radius: 18px 18px 0 0;
    animation: sheet-up 0.26s cubic-bezier(.2, .8, .2, 1);
  }
  .modal-head { padding: 16px 16px 12px; }
  .modal-body { padding: 16px; }
  .se-compose .es-tags { top: -16px; }
  .modal-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .modal-foot button { flex: 1; }
  .confirm-box,
  .prompt-box {
    width: 100% !important;
    border-radius: 18px 18px 0 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    animation: sheet-up 0.26s cubic-bezier(.2, .8, .2, 1);
  }
  .confirm-actions button { flex: 1; }
  @keyframes sheet-up {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: none; opacity: 1; }
  }

  .pagination { flex-wrap: wrap; }
  .es-tags { position: static; }
  .es-switch { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .es-header { flex-direction: column; align-items: stretch; gap: 12px; }
}

/* Full-screen ticket view respects the notch and home indicator */
@media (max-width: 860px) {
  .ticket-modal { padding-top: env(safe-area-inset-top); }
  .ticket-composer { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .ticket-timeline { padding: 16px; }
  .ticket-composer { padding-left: 16px; padding-right: 16px; }
}

/* Installed to the home screen: no rubber-band reveal of the page edge */
@media (display-mode: standalone) {
  html, body { overscroll-behavior: none; }
}

/* ---------------------------------------------------------------------
 * Send dock: email-send progress. Minimized it's a pill in the
 * bottom-right corner; expanded it's a panel listing each clinic.
 * -------------------------------------------------------------------*/

.send-dock {
  position: fixed;
  right: 20px;
  bottom: 20px;
  /* under the ticket popup (190) and modals, so it never covers their buttons */
  z-index: 180;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.send-dock[hidden] { display: none; }
.send-dock[data-state="expanded"] .send-pill,
.send-dock[data-state="minimized"] .send-panel { display: none; }

/* progress ring; --p (0-100) is set from JS */
.send-ring {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: conic-gradient(var(--primary) calc(var(--p, 0) * 1%), var(--bg-active) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
}
.is-done .send-ring { background: var(--good); }
.is-done.has-failed .send-ring { background: var(--bad); }

.send-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  animation: send-up 0.2s cubic-bezier(.2, .8, .2, 1);
}
.send-pill:hover { background: var(--bg-subtle); }
.send-pill:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--shadow-lg); }
.send-dock.has-failed .send-pill { color: var(--bad-ink); }

.send-panel {
  width: min(360px, calc(100vw - 40px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-card);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  animation: send-up 0.2s cubic-bezier(.2, .8, .2, 1);
}
@keyframes send-up {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.send-panel-head {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 12px 10px 8px 16px;
}
.send-panel-head h4 { flex: 1; margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.send-icon-btn {
  all: unset;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  color: var(--fg-muted);
  cursor: pointer;
}
.send-icon-btn[hidden] { display: none; }
.send-icon-btn:hover { background: var(--bg-hover); color: var(--fg); }
.send-icon-btn:focus-visible { box-shadow: var(--focus-ring); }
.send-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.send-summary { padding: 0 16px 12px; }
.send-bar {
  display: flex;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bg-active);
}
.send-bar i, .send-bar b { display: block; height: 100%; transition: width 0.3s ease; }
.send-bar i { background: var(--primary); }
.send-bar b { background: var(--bad); }
.send-counts {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.send-counts b { color: var(--bad-ink); font-weight: 600; }

.send-jobs {
  list-style: none;
  margin: 0;
  padding: 4px 8px;
  max-height: 240px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
}
.send-job {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  padding: 8px;
  font-size: 12.5px;
}
.send-job + .send-job { border-top: 1px solid var(--line); }
.send-job-name { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.send-job-name small { margin-left: 4px; font-weight: 400; color: var(--fg-muted); }
.send-job-count { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.send-job.has-failed .send-job-count { color: var(--bad-ink); }
.send-job .send-bar { grid-column: 1 / -1; height: 4px; }
.send-job-error {
  grid-column: 1 / -1;
  font-size: 11.5px;
  color: var(--bad-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.send-panel-foot {
  display: flex;
  justify-content: flex-end;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}

/* Email Log status bar: same progress, opens the dock */
.el-sendbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 10px 10px 16px;
  border-radius: var(--r-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  font-size: 13px;
}
.el-sendbar[hidden] { display: none; }
.el-sendbar-text { font-weight: 550; white-space: nowrap; font-variant-numeric: tabular-nums; }
.el-sendbar.has-failed .el-sendbar-text { color: var(--bad-ink); }
.el-sendbar .send-bar { flex: 1; min-width: 60px; }
.el-sendbar button.ghost { padding: 6px 12px; font-size: 12.5px; flex-shrink: 0; }

@media (max-width: 1023px) {
  .send-dock { right: var(--gutter, 16px); bottom: calc(var(--shell-bottom, 0px) + 12px); }
}