/* ============================================
   OAA - Our AI Assistant
   Phase 1 Stylesheet
   ============================================ */

:root {
  /* #86 UI make-over (2026-05-27) — warmth shift on the neutrals.
     Previous: cold pure-gray (#f5f6f8, #e5e7eb, #f0f1f3, #94a3b8).
     New: same lightness, slight navy tint so the surface "belongs" to
     the brand palette instead of reading as default Tailwind gray. */
  --bg: #f3f5fa;            /* was #f5f6f8 — subtle navy warmth */
  --bg-white: #ffffff;
  /* EpiEndo brand text — Navy primary (HEX #00152f). Used for headings and
     body text so the whole app reads as part of the corporate identity. */
  --text: #00152f;
  --text-secondary: #4a5d75;
  --text-muted: #8a96aa;     /* was #94a3b8 — slight navy lean */
  --border: #d9dfeb;         /* was #e5e7eb — navy-tinted */
  --border-light: #ecf0f7;   /* was #f0f1f3 — navy-tinted */
  --primary: #00152f;
  --primary-light: #1a2c4a;
  /* EpiEndo Blue — the primary accent across the app. Replaces the generic
     #3b82f6 that shipped in v0.1. */
  --accent: #05a1c0;
  --accent-hover: #0489a4;
  --accent-light: #e6f7fa;
  /* EpiEndo Turquoise (#43bac2) — secondary brand accent, lighter and warmer
     than --accent. Used for hovers, highlight states, soft accents. */
  --brand-turquoise: #43bac2;
  --brand-turquoise-light: #d5f0f2;
  /* EpiEndo Navy (#00152f) — used as the deep brand colour for headers
     and the dark surfaces in the brand guideline gradients. */
  --brand-navy: #00152f;
  /* EpiEndo Purple (#5b57a2) — agent/AI highlights, @-mentions, the warmer
     end of the brand gradient. */
  --brand-purple: #5b57a2;
  --brand-purple-light: #ede9fe;
  /* Brand gradient — purple → blue → turquoise (per brand guidelines page 25),
     used on primary CTAs and hero surfaces so the app carries the same visual
     signature as the corporate deck. */
  --brand-gradient: linear-gradient(135deg, #5b57a2 0%, #05a1c0 50%, #43bac2 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(91,87,162,0.10) 0%, rgba(5,161,192,0.10) 50%, rgba(67,186,194,0.10) 100%);
  --success: #5ba331;        /* EpiEndo Green (brand secondary) */
  --success-light: #e9f5dd;
  --warning: #dc6012;        /* EpiEndo Orange (brand accent) */
  --warning-light: #fdebd9;
  --danger: #a92e42;         /* EpiEndo Red (brand accent) */
  --danger-light: #f7dde2;
  --sidebar-width: 260px;
  --header-height: 56px;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 3px rgba(0,21,47,0.06), 0 1px 2px rgba(0,21,47,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,21,47,0.07), 0 2px 4px -2px rgba(0,21,47,0.05);
  --shadow-lg: 0 10px 25px -5px rgba(0,21,47,0.10), 0 4px 8px -3px rgba(0,21,47,0.06);

  /* #86b: priority palette (locked 2026-05-27).
     High   = brand danger red  — "this needs attention now"
     Medium = brand accent blue — "this is on track"
     Low    = slate gray         — "recedes, doesn't compete"
     Used by both the left-edge priority strip on tasks AND the new
     universal top-bar across every task row + expanded card. */
  --task-prio-high: #a92e42;
  --task-prio-high-light: #f7dde2;
  --task-prio-medium: #05a1c0;
  --task-prio-medium-light: #e6f7fa;
  --task-prio-low: #6b7a90;
  --task-prio-low-light: #eef2f7;

  /* #86c: alias variables for table backgrounds + info-banner surfaces.
     Previously these were referenced by component CSS via fallbacks like
     `var(--bg-muted, #f9fafb)` — the variables didn't exist in :root, so
     the gray fallbacks always won. Defining them here means a single edit
     here re-tints every table / banner / muted surface across the app. */
  --bg-muted: #eef2f7;           /* table zebra, group headers — pale slate */
  --bg-hover: #e6f1fb;           /* hover state — soft brand-blue tint */
  --brand-info-bg: rgba(5, 161, 192, 0.07);    /* info-banner background */
  --brand-info-border: rgba(5, 161, 192, 0.30);/* info-banner border */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ============================================
   GLOBAL <select> BASE STYLE
   ----------------------------------------------
   THE one place to change how every dropdown in OAA looks. Sets:
   - Enough right-padding so long option text never collides with the
     dropdown arrow ("clutter under arrow" bug).
   - text-overflow: ellipsis so the selected option's visible label
     clips cleanly when the column is narrow.
   - A custom SVG arrow indicator (replaces the OS default) so spacing
     is identical across browsers / sizes.
   - Brand-aligned focus ring matching --accent.

   Every existing select class (.contract-form-select, .po-field-select,
   .parties-bulk-input, etc.) inherits these defaults; module-specific
   classes can layer on extra rules (size, background) without re-doing
   the basics. When adding a new <select> anywhere in the app, you get
   this for free — only override if you have a clear reason.
   ============================================ */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Custom arrow — a small chevron, brand-blue, positioned with enough
     gap (12px from right edge) that text never collides. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%2305a1c0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-color: var(--bg-white);
  /* Reserve 28px on the right for the arrow + breathing room. */
  padding-right: 28px;
  /* Clip text instead of overflowing under the arrow. */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
select::-ms-expand { display: none; } /* hide the legacy IE/Edge native arrow */
select:disabled {
  background-color: var(--bg-muted, #f3f4f6);
  cursor: not-allowed;
  opacity: 0.7;
}
/* Tiny / dense selects (table cells, filter bars) still respect the
   ellipsis + arrow rules; just tighter padding. */
.parties-bulk-input,
.parties-bulk-actionbar-select,
.po-field-select.parties-bulk-input-short {
  padding-right: 24px;
  background-position: right 8px center;
}

/* ============================================
   LOGIN SCREEN
   ============================================ */

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* #86: the brand gradient (purple → blue → turquoise) replaces the
     generic dark-blue ramp. Layered over a deep navy base so the white
     login card still pops against contrast. */
  background:
    linear-gradient(135deg, rgba(91,87,162,0.85) 0%, rgba(5,161,192,0.85) 50%, rgba(67,186,194,0.85) 100%),
    var(--brand-navy);
  padding: 20px;
}

.login-card {
  background: var(--bg-white);
  border-radius: 16px;
  padding: 48px 40px;
  text-align: center;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.login-logo {
  font-size: 42px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -1px;
}

.login-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 2px;
  margin-bottom: 24px;
}

.login-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 28px;
}

.login-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.login-btn:hover { background: var(--primary-light); transform: translateY(-1px); }
.login-btn:active { transform: translateY(0); }

.login-error {
  margin-top: 16px;
  padding: 10px 14px;
  background: var(--danger-light);
  color: var(--danger);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

/* ============================================
   MAIN LAYOUT
   ============================================ */

.main-app {
  display: flex;
  min-height: 100vh;
}

.mobile-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--primary);
  color: white;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 100;
}

.menu-toggle {
  background: none;
  border: none;
  color: white;
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
}

.mobile-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.refresh-btn-mobile {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
}

/* ============================================
   SIDEBAR
   ============================================ */

.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-white);
  border-right: 1px solid var(--border);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 200;
  /* #86: thin brand-gradient bar across the top of the sidebar. Anchors
     the app to the corporate identity without competing with content. */
  border-top: 3px solid transparent;
  border-image: var(--brand-gradient) 1;
}

.sidebar-header {
  padding: 24px 20px 16px;
  border-bottom: 1px solid var(--border-light);
}

.sidebar-logo {
  font-size: 28px;
  font-weight: 800;
  /* #86: brand-gradient text. The flat navy reads fine but felt generic;
     the gradient threads in the same purple→blue→turquoise palette as
     the sidebar's top bar so the OAA wordmark and the bar visually echo
     each other. Color fallback for browsers that don't support
     background-clip: text. */
  color: var(--primary);
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -1px;
}

.user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-top: 12px;
}

.user-email {
  font-size: 11px;
  color: var(--text-muted);
}

.sidebar-section {
  padding: 16px 12px 8px;
}

.sidebar-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  padding: 0 8px 8px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
  cursor: pointer;
  /* Room for the active-state accent strip (#86) so width stays consistent
     across hover/active toggles. The 3px strip is drawn via border-left;
     non-active items use a transparent border to occupy the same space. */
  border-left: 3px solid transparent;
}

.sidebar-item:hover {
  background: var(--bg);
  color: var(--text);
}

.sidebar-item.active {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
  /* #86: turquoise strip down the left edge of the active item — a small,
     warm signal of "you are here" that picks up the brand's secondary
     accent. Pairs with the brand-gradient bar on the sidebar root. */
  border-left-color: var(--brand-turquoise);
}

.sidebar-item.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.sidebar-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-badge {
  margin-left: auto;
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.sidebar-badge:empty, .sidebar-badge[data-count="0"] {
  display: none;
}

.sidebar-footer {
  margin-top: auto;
  padding: 16px 20px;
  border-top: 1px solid var(--border-light);
}

/* #86b: EpiEndo corporate logo in the sidebar footer. Sized to fit the
   sidebar width (260px minus 20px padding × 2 = 220px usable). Real logo
   has a 4:1 horizontal aspect (lung mark + wordmark), so 180px wide ≈ 45px
   tall keeps it readable without crowding the Sign-out + version lines. */
.sidebar-brand-logo {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
  margin-bottom: 12px;
  opacity: 0.92;
}

.sidebar-logout {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
}

.sidebar-logout:hover { color: var(--danger); }

.sidebar-version {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 8px;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 150;
}

/* ============================================
   CONTENT AREA
   ============================================ */

.content {
  flex: 1;
  margin-left: var(--sidebar-width);
  padding: 28px 32px;
}

.view { display: none; }
.view.active { display: block; }

.view-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.view-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
}

.view-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.view-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.btn:hover { background: var(--bg); border-color: #d1d5db; }

.btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.btn-primary:hover { background: #2563eb; }

.btn-refresh .refresh-icon { display: inline-block; }
.btn-refresh.refreshing .refresh-icon { animation: spin 1s linear infinite; }
.btn-refresh.refreshing { opacity: 0.6; pointer-events: none; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.last-refresh {
  font-size: 11px;
  color: var(--text-muted);
}

/* ============================================
   DASHBOARD
   ============================================ */

.dash-alerts {
  margin-bottom: 20px;
}

.alert-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
}

.alert-item.alert-danger {
  background: var(--danger-light);
  color: #991b1b;
  border-left: 3px solid var(--danger);
}

.alert-item.alert-warning {
  background: var(--warning-light);
  color: #92400e;
  border-left: 3px solid var(--warning);
}

.alert-item.alert-info {
  background: var(--accent-light);
  color: #1e40af;
  border-left: 3px solid var(--accent);
}

.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  grid-template-rows: auto auto;
  align-items: start;
}

.dash-card {
  background: var(--bg-white);
  border-radius: var(--radius);
  /* #86: navy-tinted border replaces the flat gray. Subtle warmth — the
     card feels part of the brand surface rather than a Tailwind default. */
  border: 1px solid rgba(0, 21, 47, 0.08);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.dash-card:hover {
  box-shadow: var(--shadow-md);
}

.dash-card-full {
  grid-column: 1 / -1;
}

@media (min-width: 1600px) {
  .content { padding: 32px 48px; }
  .dash-grid { gap: 28px; }
}

@media (min-width: 2000px) {
  .content { padding: 36px 64px; }
  .dash-grid { gap: 32px; }
}

.dash-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.dash-card-header:hover { background: var(--bg); }

.dash-card-header h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.card-toggle-icon {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.25s ease;
}

.dash-card.collapsed .card-toggle-icon {
  transform: rotate(-90deg);
}

.dash-card.collapsed {
  max-height: 60px;
  overflow: hidden;
}

/* When any card is collapsed, don't stretch grid rows */
.dash-grid.calendar-collapsed,
.dash-grid.emails-collapsed,
.dash-grid.tasks-collapsed {
  align-content: start;
}

.dash-card.collapsed .dash-card-body {
  display: none !important;
}

.dash-card.collapsed .dash-card-header {
  border-bottom: none;
  padding-bottom: 16px;
}

/* ============================================
   Recent activity card (#183 Phase B+, 2026-06-08)
   ============================================ */
.activity-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.activity-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.activity-column-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1F3864;
  padding-bottom: 8px;
  border-bottom: 2px solid #1F3864;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.activity-column-count {
  background: #E6F1FB;
  color: #1F3864;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 9px;
  font-weight: 700;
  letter-spacing: 0;
}
.activity-column-body { max-height: 420px; overflow-y: auto; }
.activity-column-empty {
  padding: 24px 8px;
  text-align: center;
  color: var(--text-muted, #6b7280);
  font-size: 12px;
  font-style: italic;
}
.activity-column-more {
  text-align: center;
  padding: 8px 4px 2px;
  font-size: 12px;
}
.activity-column-more a {
  color: #2E5994;
  text-decoration: none;
  font-weight: 600;
}
.activity-column-more a:hover { text-decoration: underline; }
/* Single-column on narrow screens */
@media (max-width: 900px) {
  .activity-columns { grid-template-columns: 1fr; }
  .activity-column-body { max-height: none; }
}
/* Own events — subtle blue tint when "Include mine" is on */
/* Notification bell + panel (#183 Phase C) */
.notif-bell-wrap { position: relative; margin-top: 10px; }
.notif-bell-btn {
  background: transparent; border: none; cursor: pointer;
  color: #fff; font-size: 18px; padding: 6px 10px; border-radius: 6px;
  position: relative;
}
.notif-bell-btn:hover { background: rgba(255,255,255,0.1); }
.notif-bell-count {
  position: absolute; top: 0; right: 0;
  background: #DC3545; color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 9px; padding: 1px 5px; min-width: 14px; text-align: center;
}
.notif-panel {
  /* Opens to the RIGHT of the bell into the main content area. Previously
     used `right: 0` which aligned it to the sidebar's right edge — the
     panel ended up half-hidden behind the sidebar. */
  position: absolute; top: 0; left: 100%; margin-left: 12px; z-index: 1000;
  width: 380px; max-height: 480px;
  background: #fff; color: #1f2937;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.notif-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: #F6F7F9;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  font-size: 13px;
}
.notif-panel-list { overflow-y: auto; max-height: 400px; }
.notif-item {
  display: flex; gap: 10px; padding: 10px 12px; cursor: pointer;
  border-bottom: 1px solid #f1f3f5;
}
.notif-item:hover { background: #f5f7fa; }
.notif-item-unread { background: #F2F7FC; }
.notif-item-unread:hover { background: #E6F1FB; }
.notif-item-icon {
  flex: 0 0 22px; width: 22px; height: 22px;
  border-radius: 50%; background: #2E5994; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-line { font-size: 13px; line-height: 1.35; }
.notif-item-meta { font-size: 11px; color: var(--text-muted, #6b7280); margin-top: 2px; }

/* Notifications settings page (#183 Phase C) */
.notifications-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 900px) {
  .notifications-grid { grid-template-columns: 1fr; }
}
.notifications-section {
  padding: 16px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  background: #fff;
}
.notifications-section-title { font-size: 16px; margin: 0 0 4px; color: #1F3864; }
.notifications-section-help { font-size: 12px; color: var(--text-muted, #6b7280); margin: 0 0 12px; }
.notifications-sub-title {
  font-weight: 700; color: #1F3864; margin: 14px 0 4px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
}

/* Finance module (#54 Phase B, 2026-06-10) */
.finance-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-color, #e5e7eb);
  margin-bottom: 16px;
}
.finance-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  margin-bottom: -2px;
}
.finance-tab:hover { color: #1F3864; }
.finance-tab.active {
  color: #1F3864;
  border-bottom-color: #1F3864;
  font-weight: 700;
}
.finance-tab:disabled { color: #9ca3af; cursor: not-allowed; }
.finance-content { padding: 0; }

.finance-tree { background: #fff; border: 1px solid var(--border-color, #e5e7eb); border-radius: 8px; }
.finance-tree-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #f1f3f5;
}
.finance-tree-row:last-child { border-bottom: none; }
.finance-tree-row:hover { background: #fafbfc; }
.finance-tree-name { font-size: 14px; }
.finance-tree-actions { display: flex; gap: 6px; }

.finance-budget-table {
  border: 1px solid var(--border-color, #e5e7eb);
  font-size: 13px;
}
.finance-budget-table th {
  background: #1F3864;
  color: #fff;
  padding: 8px 6px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: sticky; top: 0; z-index: 2;
}
.finance-budget-table td {
  border-bottom: 1px solid #f1f3f5;
  padding: 2px 4px;
}
.finance-budget-table tr:hover td { background: #f8fafc; }
.finance-budget-table tr:hover td:first-child { background: #f0f4f8; }
.finance-cell:hover { background: #fcfcfc; }
.finance-cell:focus { outline: none; }

.activity-row-mine { background: #F2F7FC; }
.activity-row-mine:hover { background: #E6F1FB; }
.activity-avatar-mine {
  background: #2E5994 !important;
  outline: 2px solid #BED8F0;
}
.activity-group-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #6b7280);
  font-weight: 700;
  margin: 14px 0 6px;
}
.activity-group-label:first-child { margin-top: 0; }
.activity-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  transition: background-color 120ms ease;
}
.activity-row:hover { background: var(--bg-subtle, #f5f7fa); }
.activity-avatar {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1F3864;     /* EpiEndo navy */
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}
.activity-body { flex: 1; min-width: 0; }
.activity-line {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text, #1f2937);
  word-break: break-word;
}
.activity-meta {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  margin-top: 2px;
}
.activity-unread-dot {
  position: absolute;
  left: -4px;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2E5994;     /* EpiEndo medium blue */
}

/* ============================================
   GRID LAYOUT: COLLAPSIBLE CARD STATES
   Default: Calendar | Emails (row 1), Tasks full-width (row 2)
   When cards collapse, remaining open cards fill the space.
   ============================================ */

/* --- ONE card collapsed --- */

/* Only Calendar collapsed */
.dash-grid.calendar-collapsed:not(.emails-collapsed):not(.tasks-collapsed) {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}
.dash-grid.calendar-collapsed:not(.emails-collapsed):not(.tasks-collapsed) .dash-card[data-card="calendar"] {
  grid-column: 1 / -1;
}
.dash-grid.calendar-collapsed:not(.emails-collapsed):not(.tasks-collapsed) .dash-card[data-card="emails"] {
  grid-column: 1;
}
.dash-grid.calendar-collapsed:not(.emails-collapsed):not(.tasks-collapsed) .dash-card[data-card="tasks"] {
  grid-column: 2;
}

/* Only Emails collapsed */
.dash-grid.emails-collapsed:not(.calendar-collapsed):not(.tasks-collapsed) {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}
.dash-grid.emails-collapsed:not(.calendar-collapsed):not(.tasks-collapsed) .dash-card[data-card="emails"] {
  grid-column: 1 / -1;
  grid-row: 1;
}
.dash-grid.emails-collapsed:not(.calendar-collapsed):not(.tasks-collapsed) .dash-card[data-card="calendar"] {
  grid-column: 1;
  grid-row: 2;
}
.dash-grid.emails-collapsed:not(.calendar-collapsed):not(.tasks-collapsed) .dash-card[data-card="tasks"] {
  grid-column: 2;
  grid-row: 2;
}

/* Only Tasks collapsed */
.dash-grid.tasks-collapsed:not(.calendar-collapsed):not(.emails-collapsed) {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}
.dash-grid.tasks-collapsed:not(.calendar-collapsed):not(.emails-collapsed) .dash-card[data-card="tasks"] {
  grid-column: 1 / -1;
}

/* --- TWO cards collapsed --- */

/* Calendar + Emails collapsed → Tasks full width */
.dash-grid.calendar-collapsed.emails-collapsed:not(.tasks-collapsed) {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}
.dash-grid.calendar-collapsed.emails-collapsed:not(.tasks-collapsed) .dash-card[data-card="calendar"] {
  grid-column: 1;
  grid-row: 1;
}
.dash-grid.calendar-collapsed.emails-collapsed:not(.tasks-collapsed) .dash-card[data-card="emails"] {
  grid-column: 2;
  grid-row: 1;
}
.dash-grid.calendar-collapsed.emails-collapsed:not(.tasks-collapsed) .dash-card[data-card="tasks"] {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* Calendar + Tasks collapsed → Emails full width */
.dash-grid.calendar-collapsed.tasks-collapsed:not(.emails-collapsed) {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
}
.dash-grid.calendar-collapsed.tasks-collapsed:not(.emails-collapsed) .dash-card[data-card="calendar"] {
  grid-column: 1 / -1;
  grid-row: 1;
}
.dash-grid.calendar-collapsed.tasks-collapsed:not(.emails-collapsed) .dash-card[data-card="emails"] {
  grid-column: 1 / -1;
  grid-row: 2;
}
.dash-grid.calendar-collapsed.tasks-collapsed:not(.emails-collapsed) .dash-card[data-card="tasks"] {
  grid-column: 1 / -1;
  grid-row: 3;
}

/* Emails + Tasks collapsed → Calendar full width */
.dash-grid.emails-collapsed.tasks-collapsed:not(.calendar-collapsed) {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
}
.dash-grid.emails-collapsed.tasks-collapsed:not(.calendar-collapsed) .dash-card[data-card="calendar"] {
  grid-column: 1 / -1;
  grid-row: 1;
}
.dash-grid.emails-collapsed.tasks-collapsed:not(.calendar-collapsed) .dash-card[data-card="emails"] {
  grid-column: 1 / -1;
  grid-row: 2;
}
.dash-grid.emails-collapsed.tasks-collapsed:not(.calendar-collapsed) .dash-card[data-card="tasks"] {
  grid-column: 1 / -1;
  grid-row: 3;
}

/* --- ALL THREE collapsed --- */
.dash-grid.calendar-collapsed.emails-collapsed.tasks-collapsed {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
}
.dash-grid.calendar-collapsed.emails-collapsed.tasks-collapsed .dash-card {
  grid-column: 1;
}

/* Cross-container drop overlay on Tasks card. #86d: re-tinted from generic
   Tailwind blue rgba(59,130,246,...) to brand accent rgba. */
.cross-drop-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(5, 161, 192, 0.08);
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  pointer-events: auto;
  transition: background 0.15s;
}

.cross-drop-overlay.active {
  background: rgba(5, 161, 192, 0.18);
  border-color: var(--accent);
}

.cross-drop-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  background: var(--bg-white);
  padding: 10px 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  pointer-events: none;
}

.dash-card-link {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.dash-card-link:hover { text-decoration: underline; }

/* Inline controls inside the Active Tasks dashboard panel header
   (filter pills + Collapse all + + New Task). Positioned between the
   title and the "View all" link. */
.dash-task-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dash-task-controls .task-filters {
  display: flex;
  gap: 4px;
}
.dash-task-controls .filter-btn {
  font-size: 12px;
  padding: 4px 10px;
}
.dash-task-controls .btn {
  font-size: 12px;
  padding: 5px 12px;
}

.dash-card-body {
  padding: 12px 20px 16px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

/* Multi-column layout for card items when wide enough */
.dash-card-body.multi-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 16px;
  align-content: start;
}

.dash-card-body.multi-col > * {
  min-width: 0;
}

@media (min-width: 1400px) {
  .dash-card-body.multi-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dash-card-body.multi-col .cal-day-label { grid-column: 1 / -1; }
}

@media (min-width: 2200px) {
  .dash-card-body.multi-col.allow-3col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .dash-card-body.multi-col.allow-3col .cal-day-label { grid-column: 1 / -1; }
}

/* ---- Tasks page multi-column grid (#86 brand polish 2026-05-12) ----
   Same responsive pattern as the Dashboard's Active Tasks panel but applied
   to the standalone Tasks page container (#taskList). Group labels span all
   columns so headings break the list cleanly into Overdue/Today/etc bands.
   Expanded cards also span all columns (rule already exists generically). */
.tasks-page-grid.multi-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px 16px;
  align-content: start;
  padding: 0 4px;
}
.tasks-page-grid.multi-col > * { min-width: 0; }
.tasks-page-grid.multi-col .task-group-label,
.tasks-page-grid.multi-col .cal-day-label { grid-column: 1 / -1; }
@media (min-width: 1400px) {
  .tasks-page-grid.multi-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 2200px) {
  .tasks-page-grid.multi-col.allow-3col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
}

/* Bucket drop zones — empty state and drag-over highlight */
.cal-day-label.bucket-empty {
  opacity: 0.35;
  font-style: italic;
}
.cal-day-label[data-droppable="true"] {
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  border: 2px dashed transparent;
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  margin: 2px -8px;
}
.cal-day-label.bucket-drag-over {
  background: var(--accent-light);
  border-color: var(--accent);
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(5, 161, 192, 0.18);     /* #86d: brand-tinted focus ring */
}

/* Drag handle */
.drag-handle {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  cursor: grab;
  user-select: none;
  opacity: 0.4;
  transition: opacity 0.15s;
  margin-top: 3px;
}

.drag-handle:hover { opacity: 1; }

/* Drag states */
[draggable="true"].dragging {
  opacity: 0.4;
  border-style: dashed;
}

[draggable="true"].drag-over {
  border-color: var(--accent);
  background: var(--accent-light);
}

/* Drop insertion indicators */
[draggable="true"].drop-before {
  border-top: 3px solid var(--accent);
  margin-top: -2px;
}

[draggable="true"].drop-after {
  border-bottom: 3px solid var(--accent);
  margin-bottom: -2px;
}

/* Cross-container drop zone */
.dash-card.drop-zone-active {
  border: 2px dashed var(--accent);
  background: var(--accent-light);
  box-shadow: 0 0 0 4px rgba(5, 161, 192, 0.12);     /* #86d: brand-tinted drop ring */
}

.cal-item[draggable="true"] {
  cursor: grab;
}

.cal-item[draggable="true"].dragging {
  opacity: 0.4;
}

.empty-state {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ============================================
   CALENDAR ITEMS
   ============================================ */

.cal-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}

.cal-item:last-child { border-bottom: none; }

.cal-time {
  flex-shrink: 0;
  width: 72px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  padding-top: 1px;
}

.cal-item.past .cal-time { color: var(--text-muted); }

.cal-info { flex: 1; }

.cal-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.cal-item.past .cal-title { color: var(--text-muted); text-decoration: line-through; }

.cal-location {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 1px;
}

.cal-day-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  /* #86f: bucket section labels (TODAY / TOMORROW / NEXT 7 DAYS / YESTERDAY)
     render in brand navy by default so populated sections read clearly.
     The .bucket-empty rule above fades them to 0.35 opacity — same nav
     color, just muted — so empty buckets recede instead of competing. */
  color: var(--brand-navy);
  padding: 12px 6px 6px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 4px 4px 0 0;
  transition: background 0.12s ease;
}
.cal-day-label[data-action="na-bucket-toggle"] {
  cursor: pointer;
  user-select: none;
}
.cal-day-label[data-action="na-bucket-toggle"]:hover {
  background: var(--bg-light, #f3f4f6);
}
.na-bucket-chevron {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  transition: transform 0.15s ease;
  color: var(--text-muted);
}
.na-bucket-chevron.is-collapsed {
  transform: rotate(-90deg);
}
.na-bucket-label-text { /* natural width */ }
.na-bucket-count {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 10px;
}

.cal-day-prefix {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* ============================================
   EMAIL ITEMS
   ============================================ */

.inbox-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-white);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.filter-btn:hover { background: var(--bg); }
.filter-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
/* Clear filters button (#64) — softer styling than the regular filter buttons
   so it sits as a secondary action at the end of the row. Same shape, just
   muted text. */
.filter-btn-clear {
  color: var(--text-secondary);
  border-style: dashed;
}
.filter-btn-clear:hover { color: var(--text); border-style: solid; }

.inbox-list, .email-list {
  display: flex;
  flex-direction: column;
}

.email-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s;
  align-items: flex-start;
}

.email-item:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.email-item.unread { border-left: 3px solid var(--accent); }
.email-item.importance-high { border-left: 3px solid var(--danger); }

.email-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.email-dot.unread { background: var(--accent); }
.email-dot.read { background: var(--border); }

.email-body { flex: 1; min-width: 0; }

.email-from {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.email-item.read .email-from { font-weight: 500; }

.email-subject {
  font-size: 13px;
  color: var(--text);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.email-snippet {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.email-meta {
  flex-shrink: 0;
  text-align: right;
}

.email-date {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.email-status-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.tag-action { background: var(--warning-light); color: #92400e; }
.tag-waiting { background: var(--accent-light); color: #1e40af; }
.tag-done { background: var(--success-light); color: #065f46; }
.tag-new { background: var(--bg); color: var(--text-muted); }
.tag-not-important { background: #f3f4f6; color: #9ca3af; }

.email-icon {
  display: inline-block;
  font-size: 12px;
  margin-left: 4px;
  vertical-align: middle;
  opacity: 0.6;
}
.email-icon.email-flag {
  opacity: 1;
  color: #e74c3c;
}

/* Conversation thread — chat-style display inside expanded email */
.email-thread-section {
  margin: 12px 0;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.email-thread-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.email-thread-label[data-action="toggle-thread"] {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  margin-left: -8px;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}
.email-thread-label[data-action="toggle-thread"]:hover {
  background: var(--accent-light);
  color: var(--accent);
}
.email-thread-label .thread-caret {
  display: inline-block;
  font-size: 10px;
  transition: transform 0.15s;
}
.email-thread-label.collapsed {
  margin-bottom: 0;
}
.email-thread-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-row {
  display: flex;
  width: 100%;
}
.chat-row.from-other {
  justify-content: flex-start;
}
.chat-row.from-me {
  justify-content: flex-end;
}
.chat-bubble {
  max-width: 75%;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.chat-row.from-other .chat-bubble {
  background: #eef0f3;
  color: #1a1a2e;
  border-bottom-left-radius: 4px;
}
.chat-row.from-me .chat-bubble {
  background: #d4ebff;
  color: #0e2a44;
  border-bottom-right-radius: 4px;
}
.chat-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  margin-bottom: 4px;
  opacity: 0.85;
}
.chat-from {
  font-weight: 700;
  color: inherit;
}
.chat-date {
  white-space: nowrap;
  color: inherit;
  opacity: 0.7;
}
.chat-body {
  white-space: pre-wrap;
  color: inherit;
}

/* Unread bubble: dark ring + subtle glow (matches "you've got mail" vibe) */
.chat-bubble.chat-unread {
  box-shadow: 0 0 0 2px var(--accent, #2563eb), 0 2px 8px rgba(37, 99, 235, 0.15);
  position: relative;
}
.chat-unread-dot {
  color: var(--accent, #2563eb);
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
  margin-right: 2px;
}

/* "New since task was created" bubble: darker ring + small pill badge */
.chat-bubble.chat-new-since-task {
  box-shadow: 0 0 0 2px #1f3a8a, 0 2px 10px rgba(31, 58, 138, 0.25);
}
.chat-new-tag {
  background: #1f3a8a;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 8px;
  margin-right: 4px;
  text-transform: uppercase;
}

/* Thread count chip next to subject */
.thread-count-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
  vertical-align: middle;
}
.thread-count-chip.has-unread {
  background: var(--accent, #2563eb);
  color: #fff;
  border-color: var(--accent, #2563eb);
}

.email-wait {
  opacity: 0.6;
  border-left: 3px solid var(--text-muted);
}

.email-unread-new {
  border: 2px solid var(--primary);
  background: #f0f4ff;
  box-shadow: 0 1px 4px rgba(26, 26, 46, 0.12);
}

.email-unread-new .email-from {
  font-weight: 700;
}

.tag-wait { background: var(--bg); color: var(--text-muted); }
.tag-junk { background: var(--danger-light); color: #991b1b; }
.tag-today { background: var(--success-light); color: #065f46; }

.email-warning-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--warning-light);
  color: #92400e;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.2px;
}

/* Email expanded */
.email-expanded {
  background: var(--bg-white);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-md);
}

.email-expanded-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  cursor: pointer;
  padding: 2px 4px 8px;
  padding-right: 28px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
  position: relative;
}

.email-expanded-header:hover { background: var(--bg); }

.email-expanded-from {
  font-size: 15px;
  font-weight: 600;
}

.email-expanded-address {
  font-size: 12px;
  color: var(--text-muted);
}

.email-expanded-date {
  font-size: 12px;
  color: var(--text-muted);
}

.email-expanded-subject {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.email-expanded-preview {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
}

.email-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.email-action-btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-secondary);
}

.email-action-btn:hover { background: var(--accent); color: white; border-color: var(--accent); }
.email-action-btn.active { background: var(--accent); color: white; border-color: var(--accent); }

.email-note-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text);
  background: var(--bg);
}

.email-note-input:focus { border-color: var(--accent); background: var(--bg-white); outline: none; }

/* ============================================
   TASKS
   ============================================ */

.task-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  align-items: flex-start;
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
/* Cursor signal that the row is clickable, and a subtle brand-tinted lift
   on hover so the task feels like a card not a list row. (#86 brand polish.) */
.task-item:hover {
  border-color: var(--brand-turquoise);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

/* V2 compact row (#79) — tighter padding, smaller font, single-line layout
   so the user can see many more tasks per screen. Gets the .task-item-compact
   class on top of .task-item so existing handlers and selectors still match. */
.task-item-compact {
  padding: 9px 14px;
  gap: 10px;
  align-items: center;
}
.task-item-compact .task-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.task-row-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.task-item-compact .task-name {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.task-row-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}
.task-desc-inline {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.task-item-compact .task-checkbox { margin-top: 0; }
.task-item-compact.completed .task-desc-inline { text-decoration: line-through; }

/* Due-date pill on the compact row — brand-blue tinted background so the
   date stands out as the primary "what's next" scan target. Overdue switches
   to brand red, completed/no-date stays muted. (#86 brand polish 2026-05-12.) */
.task-due-pill {
  display: inline-block;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  background: var(--accent-light);
  color: var(--accent-hover);
  border-radius: 10px;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.task-due-pill.overdue {
  background: var(--danger-light);
  color: var(--danger);
}
.task-item.completed .task-due-pill {
  background: var(--bg);
  color: var(--text-muted);
}

/* Tighter source/badge/assignee chips inside compact rows. */
.task-item-compact .task-source { font-size: 10.5px; padding: 1px 7px; }
.task-item-compact .task-meta-badge { font-size: 10.5px; padding: 1px 6px; }
.task-item-compact .task-assignees-compact { gap: 3px; }
.task-item-compact .task-assignee-mini { font-size: 10.5px; padding: 1px 6px; }

.task-item:hover { box-shadow: var(--shadow); }

/* Task assignees (#78) — chip styles for the expanded "Shared with" section
   plus the compact strip on the collapsed task row. */
.task-assignees-section { margin: 12px 0; }
.task-assignees-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.task-assignee-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; font-size: 12px;
  /* #86b: sharee chips now use brand purple instead of muted gray so they
     match the .task-assignee-mini purple on the collapsed row. Visual
     signal "this is a person" stays consistent across compact + expanded
     views. Owner chip below remains brand-blue so you can still tell
     owner from sharee at a glance. */
  background: var(--brand-purple-light, #ede9fe); color: var(--brand-purple, #5b57a2);
  border-radius: 12px;
  font-weight: 500;
}
.task-assignee-chip-owner { background: var(--accent-light); color: var(--accent); }
.task-assignee-chip-role { font-size: 10px; opacity: 0.7; }
.task-assignee-chip-remove {
  background: none; border: none; color: var(--text-secondary); cursor: pointer;
  padding: 0 2px; font-size: 14px; line-height: 1;
}
.task-assignee-chip-remove:hover { color: var(--danger); }
.task-assignee-picker {
  padding: 4px 8px; font-size: 12px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-card, #fff);
}

/* Compact strip on the collapsed row — small badges. */
.task-assignees-compact { display: inline-flex; gap: 3px; margin-left: 6px; }
.task-assignee-mini {
  padding: 1px 6px; font-size: 10px;
  /* #86b: brand purple (matches .task-assignee-chip in the expanded card).
     Previously generic indigo (#e0e7ff/#3730a3) from Tailwind palette. */
  background: var(--brand-purple-light, #ede9fe); color: var(--brand-purple, #5b57a2);
  border-radius: 8px; font-weight: 500;
}
.task-assignee-mini-more { background: var(--bg-muted, #f3f4f6); color: var(--text-secondary); }

/* Subtasks (#79 V2) — checkbox list inside expanded task. */
.task-subtasks-section { margin: 12px 0; }
.task-subtask-count {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
  background: var(--bg-muted, #f3f4f6);
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
}
.task-subtask-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: text;
}
.task-subtask-row:hover { background: var(--bg-muted, #f3f4f6); }
.task-subtask-row input[type="checkbox"] { margin: 0; flex-shrink: 0; cursor: pointer; }
.task-subtask-text {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  outline: none;
  padding: 2px 4px;
  border-radius: 3px;
  min-width: 0;
}
.task-subtask-text:focus { background: var(--bg-card, #fff); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2); }
.task-subtask-done .task-subtask-text { text-decoration: line-through; color: var(--text-secondary); }
.task-subtask-remove {
  background: none;
  border: none;
  color: transparent;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.task-subtask-row:hover .task-subtask-remove { color: var(--text-secondary); }
.task-subtask-remove:hover { color: var(--danger); }
.task-subtask-add-row { margin-top: 4px; }
.task-subtask-add-input {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: 4px;
  background: transparent;
}
.task-subtask-add-input:focus {
  border-style: solid;
  border-color: rgba(37, 99, 235, 0.4);
  outline: none;
  background: var(--bg-card, #fff);
}

/* Comments / chat thread (#79 V2). Newest on top — input above the list. */
.task-comments-section { margin: 16px 0 8px; }
.task-comment-count { font-size: 12px; color: var(--text-secondary); font-weight: 400; }
.task-comment-input-row { margin-bottom: 12px; }
.task-comment-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card, #fff);
  resize: vertical;
  min-height: 38px;
  font-family: inherit;
}
.task-comment-input:focus { outline: none; border-color: rgba(37, 99, 235, 0.5); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }

.task-comment {
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg-muted, #f9fafb);
  margin-bottom: 8px;
  border-left: 3px solid transparent;
}
/* Agent-authored comments (#79 V2) — visually distinct from human messages
   so the user can scan the thread and see at a glance what's a system
   action vs a coworker reply. Punchier than v1 styling: stronger purple
   wash, robot prefix on the author name, and the AI badge gets size + the
   sparkles glyph for unmistakable identification. */
.task-comment-agent {
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.10) 0%, rgba(124, 58, 237, 0.04) 100%);
  border-left-color: #7c3aed;
}
.task-comment-agent .task-comment-author { color: #5b21b6; }
.task-comment-agent .task-comment-author::before {
  content: "🤖 ";
  font-size: 12px;
  margin-right: 2px;
}
.task-comment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 12px;
}
.task-comment-author { font-weight: 600; color: var(--text); }
.task-comment-time { color: var(--text-secondary); flex: 1; }
.task-comment-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  background: #7c3aed;
  color: #fff;
  border-radius: 4px;
  margin-left: 4px;
  letter-spacing: 0.5px;
}
.task-comment-ai-badge::before {
  content: "✦";
  font-size: 11px;
}
.task-comment-delete {
  background: none;
  border: none;
  color: transparent;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.task-comment:hover .task-comment-delete { color: var(--text-secondary); }
.task-comment-delete:hover { color: var(--danger); }
.task-comment-body { font-size: 13px; color: var(--text); line-height: 1.4; word-wrap: break-word; }

/* @-mention chips (#79 V2 — lightweight mentions). Inline pill within a
   comment body, accent-coloured so they read as "this is a person". */
.task-mention {
  display: inline-block;
  padding: 0 5px;
  background: rgba(37, 99, 235, 0.10);
  color: #1e40af;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.95em;
}

/* @-mention name-picker dropdown — appears below the comment input when the
   user types @. Re-added 2026-05-27 (#159) on contenteditable. Positioned
   absolutely by JS, anchored to the caret's @-token rect. Click or Enter
   inserts `@FirstName ` at caret. */
.task-mention-picker {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  padding: 4px;
  max-height: 280px;
  overflow-y: auto;
  min-width: 220px;
  font-family: inherit;
}
.task-mention-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s;
}
.task-mention-pick:hover,
.task-mention-pick.is-active {
  background: rgba(37, 99, 235, 0.10);
}
.task-mention-pick-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.task-mention-pick-email {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Compact-row meta badges — subtask progress + comment count. */
.task-meta-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 11px;
  background: var(--bg-muted, #f3f4f6);
  color: var(--text-secondary);
  border-radius: 8px;
  font-weight: 500;
}

/* New task modal — share with checkbox list. */
.task-new-share-list { display: flex; flex-wrap: wrap; gap: 6px; }
.task-new-share-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: 13px;
  background: var(--bg-muted, #f3f4f6); border-radius: 12px;
  cursor: pointer;
}
.task-new-share-chip input[type="checkbox"] { margin: 0; }
.task-new-share-chip:has(input:checked) { background: #dbeafe; color: #1e40af; }
.task-item.overdue { border-left: 3px solid var(--danger); }

/* #86c: universal top bar on every task card. Renders above the checkbox
   + body via flex-wrap (collapsed) or as a prepended block (expanded).
   Background tint + text colour come from the parent's .task-priority-*
   class so the bar's hue signals urgency. Bar TEXT names the source
   (Email thread / Contracts / POs / Manual / etc). For email-sourced
   tasks with new messages since creation, an emerald "N new" pill is
   appended — it stays distinct regardless of bar colour. */
.task-item {
  flex-wrap: wrap;
  padding-top: 0;
}
.task-top-bar {
  flex: 0 0 100%;
  margin: 0 -16px 6px;
  padding: 4px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  /* Defaults match Medium so a task with no priority renders sensibly. */
  color: var(--task-prio-medium);
  background: var(--task-prio-medium-light);
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
  border-bottom: 1px solid rgba(0, 21, 47, 0.06);
}
.task-item-compact .task-top-bar {
  margin-left: -14px;
  margin-right: -14px;
  padding-left: 14px;
  padding-right: 14px;
}
/* Priority-driven colour applied via the .task-item parent class. */
.task-item.task-priority-high .task-top-bar {
  color: var(--task-prio-high);
  background: var(--task-prio-high-light);
}
.task-item.task-priority-medium .task-top-bar {
  color: var(--task-prio-medium);
  background: var(--task-prio-medium-light);
}
.task-item.task-priority-low .task-top-bar {
  color: var(--task-prio-low);
  background: var(--task-prio-low-light);
}
.task-top-bar-icon { font-size: 13px; line-height: 1; }
.task-top-bar-label { flex: 1; }
.task-top-bar-new {
  background: #10b981;
  color: #fff;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
/* Same bar mounted at the top of the expanded card. Negative side margins
   pull the bar flush to the card's edges (the card's overflow:hidden +
   border-radius give it rounded corners up top). */
.task-expanded {
  position: relative;
}
.task-expanded .task-top-bar {
  margin: 0 -20px 16px;
  padding: 6px 20px;
  font-size: 12px;
  border-bottom: 1px solid rgba(0, 21, 47, 0.08);
}
.task-expanded.task-priority-high .task-top-bar {
  color: var(--task-prio-high);
  background: var(--task-prio-high-light);
}
.task-expanded.task-priority-medium .task-top-bar {
  color: var(--task-prio-medium);
  background: var(--task-prio-medium-light);
}
.task-expanded.task-priority-low .task-top-bar {
  color: var(--task-prio-low);
  background: var(--task-prio-low-light);
}
/* Completed tasks live in the Finished bucket. Slightly muted background +
   text so they're visibly different from active tasks but still readable.
   Strikethrough on the name reinforces "done". */
.task-item.completed {
  background: var(--bg-muted, #f6f7f9);
  border-left: 3px solid var(--border-light, #e1e4e8);
}
.task-item.completed .task-name {
  text-decoration: line-through;
  color: var(--text-secondary, #888);
}
.task-item.completed .task-detail,
.task-item.completed .task-notes {
  color: var(--text-secondary, #888);
}

.task-checkbox {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.task-body { flex: 1; min-width: 0; }

.task-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.task-item.completed .task-name { text-decoration: line-through; color: var(--text-muted); }

.task-detail {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  flex-wrap: wrap;
  align-items: center;
}

.task-due-date { font-weight: 500; }
.task-due-date.overdue { color: var(--danger); font-weight: 700; }

.task-source {
  background: var(--bg);
  padding: 1px 8px;
  border-radius: 10px;
}

.task-source-link {
  cursor: pointer;
  color: var(--accent);
  background: var(--accent-light);
  transition: all 0.15s;
}

.task-source-link:hover,
.task-source-link.is-active {
  background: var(--accent);
  color: white;
}

/* Register sources (e.g. Contracts) — amber so they stand out from Manual/Email/Calendar/Teams */
.task-source-register {
  background: #fef3c7;          /* amber-100 */
  color: #b45309;                /* amber-700 */
  font-weight: 600;
}
.task-source-register.task-source-link:hover,
.task-source-register.task-source-link.is-active {
  background: #d97706;           /* amber-600 */
  color: #ffffff;
}

/* Agent sources — purple so they stand out from Register amber */
.task-source-agent {
  background: #ede9fe;           /* violet-100 */
  color: #6d28d9;                /* violet-700 */
  font-weight: 600;
}

/* Read-only source field in the task edit form */
.task-source-readonly {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 4px 0;
}

/* =============================================================
 * Task expanded card — full-width sections below the two-column body
 * =============================================================
 * Layout order (top → bottom) inside .task-expanded:
 *   header → edit row → .task-expanded-cols (description+subtasks left,
 *   shared-with+chat right) → .task-email-section (full width) →
 *   .task-private-note-section → .task-action-row
 *
 * The email section is just a host placeholder by default — empty for
 * non-email tasks, with a top divider line for email-sourced tasks so
 * the user has a visual anchor showing "this is where the email chain
 * lives". Clicking the Email pill populates it with the chat thread.
 */
.task-email-section {
  /* No top divider by default — only email-sourced tasks get it. */
  margin-top: 4px;
}
.task-email-section--has-source {
  border-top: 1px solid var(--border, #e5e7eb);
  margin-top: 12px;
  padding-top: 12px;
}
.task-email-section:empty {
  /* Collapse to zero height when the user hasn't expanded the chain yet.
     The --has-source border above still shows so they know it's there. */
  padding-bottom: 0;
}

/* #86e: email thread banner inside the expanded card. Looks like a sibling
   to the top-bar at the top of the card — same envelope icon + label + new
   pill — but lives mid-card and click-toggles the conversation body. */
.task-email-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  background: var(--task-prio-medium-light);
  color: var(--task-prio-medium);
  border: 1px solid rgba(5, 161, 192, 0.20);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
}
.task-email-banner:hover {
  background: rgba(5, 161, 192, 0.12);
  border-color: rgba(5, 161, 192, 0.35);
}
.task-email-banner-icon { font-size: 14px; line-height: 1; }
.task-email-banner-label { flex: 1; }
.task-email-banner-new {
  background: #10b981;
  color: #fff;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.task-email-banner-chevron {
  display: inline-block;
  font-size: 9px;
  margin-left: 4px;
  transition: transform 0.18s ease;
  color: currentColor;
}
.task-email-banner.is-open .task-email-banner-chevron {
  transform: rotate(90deg);
}
.task-email-banner-body {
  margin-top: 10px;
}
.task-email-banner-body[hidden] {
  display: none;
}
.task-private-note-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #e5e7eb);
}

/* Description + Private Note: fixed-size scrollable boxes (#145).
   Resize handle removed and the height is locked at ~4 rows; overflow
   scrolls inside. This forces concise notes — typically all you need —
   without losing the ability to write longer ones when warranted. */
.task-description-field,
.task-private-note-section .note-field {
  width: 100%;
  height: 90px;
  min-height: 90px;
  max-height: 90px;
  resize: none;
  overflow-y: auto;
  line-height: 1.4;
  box-sizing: border-box;
}

/* Inline email preview within a task */
.task-email-preview {
  margin-top: 0;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 12px;
}

.task-email-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.task-email-preview-header strong {
  font-size: 13px;
  color: var(--text);
}

.task-email-preview-date {
  font-size: 11px;
  color: var(--text-muted);
}

.task-email-preview-subject {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.task-email-preview-body {
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  max-height: 400px;
  overflow-y: auto;
}

.task-email-preview .email-thread-chat {
  margin-top: 6px;
}

.task-notes {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Description field in expanded task */
.task-description-section {
  margin-top: 12px;
}

.task-description-field {
  min-height: 80px;
}

/* Description read-only preview in dashboard expanded task */
.task-description-preview {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 8px 0 12px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  max-height: 6em;
  overflow: hidden;
  white-space: pre-wrap;
}

/* Task priority indicator */
/* Priority bar on the left edge of every task row. Mirrors the colours
   of the priority buttons in the expanded task view: red high, amber
   medium, green low. The 'overdue' and 'completed' classes override
   border-left when applicable (see specificity rules elsewhere). */
/* Priority left-border — brand-aligned (#86). High = EpiEndo Red, Medium =
   EpiEndo Orange, Low = EpiEndo Green. Bar widened to 4px so it reads from
   across the room. */
/* #86c: priority left-edge strip now aligned with the new palette. The
   top-bar's tint and the strip's solid colour share the same priority
   variable so the two signals reinforce each other. */
.task-priority-high { border-left: 4px solid var(--task-prio-high); }
.task-priority-medium { border-left: 4px solid var(--task-prio-medium); }
.task-priority-low { border-left: 4px solid var(--task-prio-low); }

/* Task group headings in full Tasks page */
/* Task group labels — Overdue / Today / Upcoming / etc. Brand-coloured bands
   that visually break the list. The accent bar on the left echoes the priority
   border on task rows so the page reads as one designed system. */
.task-group-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
  padding: 14px 12px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
  transition: background 0.12s ease, color 0.12s ease;
  position: relative;
  margin-top: 6px;
}
.task-group-label::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--accent);
  margin-right: 2px;
}
.task-group-label:hover {
  background: var(--accent-light);
}

.task-group-label .task-group-count {
  font-weight: 500;
  color: var(--text-muted);
  font-size: 11px;
}

.task-group-label:first-child { padding-top: 4px; margin-top: 0; }

/* Per-group accent bar — Overdue stays danger-red, Today gets brand blue,
   Upcoming gets brand turquoise, NO DUE DATE stays neutral grey, Completed
   muted. Reads at a glance which "lane" of the day you're scanning. */
.task-group-label.overdue-label { color: var(--danger); }
.task-group-label.overdue-label::before { background: var(--danger); }
.task-group-label.completed-label { color: var(--text-muted); }
.task-group-label.completed-label::before { background: var(--text-muted); }
/* Default styling (Due Today + Upcoming + No Due Date) keeps the brand-blue
   left bar. We could split colours per group, but consistency reads cleaner
   than rainbow stripes. */

.task-group-chevron {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  transition: transform 0.15s ease;
  color: var(--text-muted);
}
.task-group-chevron.is-collapsed {
  transform: rotate(-90deg);
}

/* Expanded task in Tasks page — the universal top bar (#86c) is now the
   top accent, so we drop the old thin border-top accent and the 20px
   top padding (bar handles that visual). Side/bottom padding kept. */
.task-expanded {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 20px 20px;
  margin-bottom: 4px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;     /* clip the top-bar's negative margins to the card */
}

.task-expanded-header {
  cursor: pointer;
  padding: 2px 4px 8px;
  padding-right: 28px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
  position: relative;
}

.task-expanded-header:hover { background: var(--bg); }

.card-collapse-icon {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.card-collapse-icon:hover {
  color: var(--text);
  background: rgba(0,0,0,0.06);
}

.task-expanded-name {
  /* Bumped 2026-05-22 (#144) for better at-a-glance visibility in lists
     of expanded tasks — Finnur lives in this card. */
  font-size: 20px;
  font-weight: 700;
  color: var(--primary, #00152f);
  line-height: 1.3;
}

/* =============================================================
 * Task card colour accents (#144)
 * =============================================================
 * State-driven colours for the Priority select and the Due-date display
 * inside an expanded task card. Classes are applied in renderExpandedTask
 * based on the current task value, so the colour flips automatically
 * whenever the user changes priority / due date.
 *
 * Palette deliberately echoes the Status pill palette elsewhere in OAA
 * so users build a consistent "red = needs attention now, amber = soon,
 * green/blue = fine" mental model across modules.
 */
.task-priority-select {
  font-weight: 600;
}
.task-priority-select-high   { color: #c0392b; }   /* danger red */
.task-priority-select-medium { color: #c08824; }   /* amber */
.task-priority-select-low    { color: #4b8b3b; }   /* calm green */

/* Due-date colour states. The date-display input is readonly with a
   custom value string ("Today", "Tomorrow", "29 May 2026", "No date"),
   so colour + weight is the only visual signal. */
.date-display {
  font-weight: 500;
}
.date-display-overdue {
  color: #c0392b;       /* red — needs immediate attention */
  font-weight: 700;
}
.date-display-today {
  color: #c08824;       /* amber — due today */
  font-weight: 700;
}
.date-display-tomorrow {
  color: #185FA5;       /* OAA blue — due tomorrow */
  font-weight: 600;
}
.date-display-none {
  color: var(--text-muted, #6b7280);
  font-style: italic;
}

.task-expanded-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.task-expanded .task-edit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0;
}

.task-expanded .task-edit-row .form-group { margin-bottom: 0; }

/* V2 two-column expanded card (#79) — 60/40 grid: details left, chat right.
   The right column gets a soft divider so the chat reads as a distinct
   conversation surface. */
.task-expanded-cols {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 20px;
  margin-top: 8px;
}
.task-col { min-width: 0; }
.task-col-right {
  padding-left: 20px;
  border-left: 1px solid var(--border);
}
@media (max-width: 1100px) {
  /* Stack on narrower viewports — the right column needs at least ~340px to
     read comfortably, and below ~1100px the chart loses too much width. */
  .task-expanded-cols { grid-template-columns: 1fr; gap: 14px; }
  .task-col-right { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px solid var(--border); }
}

/* Compact modifier — Dashboard narrow Active Tasks column. Forces the
   columns to stack and tightens padding so the same markup fits a narrow
   card without horizontal scrolling. */
.task-expanded--compact {
  padding: 14px 16px;
}
.task-expanded--compact .task-edit-row {
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 10px 0;
}
.task-expanded--compact .task-expanded-cols {
  grid-template-columns: 1fr;
  gap: 14px;
}
.task-expanded--compact .task-col-right {
  padding-left: 0;
  border-left: 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.task-expanded--compact .task-expanded-name { font-size: 14px; }
.task-expanded--compact .task-action-row {
  margin-top: 10px;
  padding-top: 10px;
}

/* Custom date picker in expanded task */
.date-picker-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.date-picker-wrapper .date-display {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  background: var(--bg-white);
}

.date-picker-wrapper .date-display:hover {
  border-color: var(--accent);
}

.date-picker-wrapper .date-display:not([readonly]) {
  cursor: text;
  border-color: var(--accent);
  outline: none;
}

.date-picker-wrapper .date-hidden {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.date-picker-wrapper .date-clear {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  font-size: 16px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
}

.date-picker-wrapper .date-clear:hover {
  color: var(--danger);
  background: var(--danger-light);
}

.task-expanded .task-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

.task-expanded .btn-delete {
  margin-left: auto;
  color: var(--danger);
  border-color: var(--danger);
}

.task-expanded .btn-delete:hover {
  background: var(--danger);
  color: white;
}

/* Task filters */
.task-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* New task modal */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal {
  background: var(--bg-white);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.modal h2 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 14px;
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--accent);
  outline: none;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

/* ============================================
   INTEGRATIONS
   ============================================ */

.integrations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.integration-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.integration-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 8px 0 4px;
}

.integration-card p {
  font-size: 13px;
  color: var(--text-secondary);
}

.integration-status {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.integration-card.connected .integration-status { color: var(--success); }
.integration-card.pending .integration-status { color: var(--warning); }

.integration-detail {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}

/* ============================================
   PHASE PLACEHOLDERS
   ============================================ */

.phase-placeholder {
  text-align: center;
  padding: 80px 32px;
  color: var(--text-muted);
}

.phase-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.phase-placeholder h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.phase-placeholder p {
  font-size: 13px;
  max-width: 400px;
  margin: 0 auto;
}

/* ============================================
   AGENTS VIEW
   ============================================ */

.agents-container {
  max-width: 800px;
}

.agent-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}

.agent-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.agent-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.agent-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.agent-status {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
}

.agent-status-active {
  background: rgba(40, 167, 69, 0.1);
  color: var(--success);
}

.agent-status-inactive {
  background: rgba(108, 117, 125, 0.1);
  color: var(--text-muted);
}

.agent-mode {
  font-size: 11px;
  color: var(--text-muted);
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--bg-secondary);
}

.agent-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 16px;
  line-height: 1.5;
}

.agent-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  padding: 14px;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.agent-step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.step-label {
  font-weight: 600;
  color: var(--accent);
  min-width: 52px;
}

.step-desc {
  flex: 1;
  color: var(--text-primary);
}

.step-schedule {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.agent-actions {
  margin-bottom: 20px;
}

.agent-run-btn {
  font-size: 13px;
}

.agent-runs-section h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.agent-runs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.agent-run-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: 6px;
  font-size: 13px;
}

.run-status {
  font-size: 14px;
}

.run-status-completed { color: var(--success); }
.run-status-preview { color: var(--accent); }
.run-status-failed { color: var(--danger); }

.run-period {
  font-weight: 500;
  color: var(--text-primary);
  min-width: 120px;
}

.run-step {
  color: var(--text-secondary);
  flex: 1;
}

.run-date {
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
}

.run-by {
  color: var(--text-muted);
  font-size: 12px;
}

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

/* Agent result modal */
.agent-result-modal {
  max-width: 600px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modal-header h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.modal-close:hover {
  color: var(--text-primary);
}

.modal-body {
  /* body within modals */
}

.result-meta {
  margin-bottom: 16px;
}

.result-meta-row {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 4px 0;
}

.result-meta-row strong {
  color: var(--text-primary);
  min-width: 100px;
  display: inline-block;
}

.result-email-preview {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.result-email-preview pre {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  margin: 0;
}

/* Editable email preview */
.result-email-editor {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.result-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 4px 0 4px;
}

.result-email-subject,
.result-email-body {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border, #ddd);
  border-radius: 6px;
  background: #fff;
  color: var(--text-primary);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
}

.result-email-subject {
  margin-bottom: 12px;
}

.result-email-body {
  min-height: 260px;
  resize: vertical;
  white-space: pre-wrap;
}

.result-email-subject:focus,
.result-email-body:focus {
  outline: none;
  border-color: var(--accent, #4a6cf7);
  box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.15);
}

.result-email-subject-ro,
.result-email-body-ro {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  background: #fff;
  border: 1px solid var(--border, #eee);
  border-radius: 6px;
  padding: 8px 10px;
  white-space: pre-wrap;
  margin: 0 0 12px 0;
}

.result-edit-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 8px 0 0 0;
}

/* Per-step Preview buttons in agent card */
.agent-step {
  display: flex;
  align-items: center;
  gap: 12px;
}

.agent-step-run-btn {
  margin-left: auto;
}

.btn-small {
  padding: 4px 10px;
  font-size: 12px;
}

/* Plan modal (Step B/C) */
.plan-section {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.plan-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.plan-files-from,
.plan-files-to {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.plan-files-from code,
.plan-files-to code {
  font-size: 12px;
  background: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border, #eee);
}

.plan-files {
  margin: 8px 0 0 0;
  padding-left: 20px;
  font-size: 13px;
}

.plan-file-size {
  color: var(--text-muted);
  font-size: 11px;
}

.plan-task-name,
.plan-event {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.plan-task-due,
.plan-event-time {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.plan-warnings {
  margin-bottom: 12px;
}

.plan-warning {
  background: #fff6e0;
  border-left: 3px solid #e8a94a;
  color: #7a5200;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 6px;
}

.plan-results ul {
  margin: 4px 0;
  padding-left: 20px;
  font-size: 13px;
}

.plan-failed {
  color: var(--danger, #c0392b);
}

.result-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.btn-success {
  background: var(--success);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.btn-success:hover {
  opacity: 0.9;
}

.btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.btn-secondary:hover {
  background: var(--border);
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .mobile-header { display: flex; }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: none;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
  }

  .sidebar-overlay.visible { display: block; }

  .content {
    margin-left: 0;
    padding: 16px;
    padding-top: calc(var(--header-height) + 16px);
  }

  .dash-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

  .dash-grid .dash-card {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .view-header {
    flex-direction: column;
  }

  .view-title { font-size: 20px; }

  .email-item { padding: 12px; }
  .email-snippet { display: none; }

  .inbox-filters { gap: 4px; }
  .filter-btn { padding: 4px 10px; font-size: 11px; }

  .email-expanded { padding: 14px; }
  .email-action-row { gap: 6px; }

  .modal { padding: 20px; }

  /* Stack task edit form fields on mobile (Dashboard's narrow column already
     stacks via .task-expanded--compact; this hits the wide Tasks page on
     small screens). */
  .task-expanded .task-edit-row {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   CONTEXT MENU
   ============================================ */

.context-menu {
  position: absolute;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 500;
  min-width: 200px;
}

.context-menu-item {
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.context-menu-item:hover {
  background: var(--accent-light);
  color: var(--accent);
}

.context-menu-divider {
  height: 1px;
  background: var(--border-light);
  margin: 4px 0;
}

/* ============================================
   NOTE SECTION
   ============================================ */

.note-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

.note-field {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text);
  background: var(--bg);
  font-family: inherit;
  margin-top: 4px;
  margin-bottom: 12px;
  resize: vertical;
  min-height: 60px;
}

.note-field:focus {
  border-color: var(--accent);
  background: var(--bg-white);
  outline: none;
}

.note-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
  margin-top: 8px;
}

.note-label.shared {
  color: var(--accent);
}

/* ============================================
   DASHBOARD EXPANDED CARDS
   ============================================ */

.dash-email-expanded {
  background: var(--bg-white);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-md);
  grid-column: 1 / -1;
}

/* Task expanded inside the Dashboard's multi-col Active Tasks panel must
   span the full panel-grid width so it's not chopped by the 2-/3-column
   media-query layout. The shared `.task-expanded` is rendered there with
   the .task-expanded--compact modifier. */
.multi-col .task-expanded { grid-column: 1 / -1; }

.dash-email-expanded-header {
  margin-bottom: 12px;
  cursor: pointer;
  padding: 4px 4px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}

.dash-email-expanded-header:hover {
  background: var(--bg);
}

.dash-email-preview {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  max-height: 5.5em;
  overflow: hidden;
  white-space: pre-wrap;
}

.dash-email-expanded-from {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.dash-email-expanded-subject {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
  font-weight: 500;
}

.dash-email-expanded-date {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* The old .dash-task-expanded-* rules (header, name, meta, actions-row,
   buttons, due-inline, due-label, description, notes-row, note-col) were
   removed 2026-05-07 when the Dashboard expanded-card markup was replaced
   by the shared .task-expanded renderer. Compact-context tweaks now live
   on .task-expanded--compact (above). */

.dash-action-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.dash-action-btn {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-secondary);
}

.dash-action-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.dash-action-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Mark Complete CTA on the expanded task card — brand gradient fill so the
   primary action carries the EpiEndo signature (purple → blue → turquoise per
   brand guidelines page 25). Hover lifts slightly with a deeper shadow. */
.dash-action-btn.btn-today {
  color: white;
  background: var(--brand-gradient);
  border-color: transparent;
  font-weight: 600;
  padding: 6px 16px;
  box-shadow: 0 1px 3px rgba(5,161,192,0.25);
}
.dash-action-btn.btn-today:hover,
.dash-action-btn.btn-today.active {
  background: var(--brand-gradient);
  color: white;
  border-color: transparent;
  box-shadow: 0 3px 8px rgba(5,161,192,0.35);
  transform: translateY(-1px);
}

.dash-action-btn.btn-junk {
  color: var(--danger);
  border-color: var(--danger);
}
.dash-action-btn.btn-junk:hover,
.dash-action-btn.btn-junk.active {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

.dash-action-btn.btn-done {
  color: var(--accent);
  border-color: var(--accent);
}
.dash-action-btn.btn-done:hover,
.dash-action-btn.btn-done.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Priority buttons in the expanded task view. Soft outline when unselected,
   solid colour fill when active. Three colours map to severity: red high,
   amber medium, green low. */
.dash-action-btn.btn-priority-high {
  color: var(--danger, #dc3545);
  border-color: rgba(220, 53, 69, 0.45);
}
.dash-action-btn.btn-priority-high:hover,
.dash-action-btn.btn-priority-high.active {
  background: var(--danger, #dc3545);
  color: white;
  border-color: var(--danger, #dc3545);
}
.dash-action-btn.btn-priority-medium {
  color: #c47b00;
  border-color: rgba(196, 123, 0, 0.45);
}
.dash-action-btn.btn-priority-medium:hover,
.dash-action-btn.btn-priority-medium.active {
  background: #c47b00;
  color: white;
  border-color: #c47b00;
}
.dash-action-btn.btn-priority-low {
  color: var(--success, #28a745);
  border-color: rgba(40, 167, 69, 0.45);
}
.dash-action-btn.btn-priority-low:hover,
.dash-action-btn.btn-priority-low.active {
  background: var(--success, #28a745);
  color: white;
  border-color: var(--success, #28a745);
}

/* The .dash-task-name-* / .dash-task-expanded-name* rules (inline rename
   affordance for the Dashboard's old expanded card) were removed
   2026-05-07. The shared expanded card uses a regular text input for name
   editing; see .task-expanded .form-group input. */

@media (max-width: 480px) {
  .login-card { padding: 32px 24px; }
  .login-logo { font-size: 36px; }

  .content { padding: 12px; padding-top: calc(var(--header-height) + 12px); }
  .view-title { font-size: 18px; }

  .dash-card-body { padding: 10px 14px 14px; }
}

/* ============================================
   Contracts register (Layer 2)
   ============================================ */

.contract-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px 20px;
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
}
.contract-search-wrap {
  position: relative;
  flex: 1 1 280px;
  min-width: 180px;
  display: flex;
}
.contract-search {
  flex: 1;
  width: 100%;
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--bg-white);
  color: var(--text);
  box-sizing: border-box;
}
.contract-search:focus { outline: none; border-color: var(--accent); }
.contract-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-secondary, #888);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 16px;
  line-height: 1;
  border-radius: 4px;
}
.contract-search-clear:hover {
  background: var(--bg-hover, #f4f6fa);
  color: var(--text-primary, #222);
}
.contract-filter-select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--bg-white);
  color: var(--text);
  cursor: pointer;
}
.contract-filter-select:focus { outline: none; border-color: var(--accent); }
.contract-filter-btn {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--bg-white);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.contract-filter-btn:hover { background: var(--bg); border-color: var(--accent); }
.contract-filter-btn:active { background: var(--border); }

/* Dashboard Active Tasks mini-toolbar (Collapse all / Expand all).
   Rendered above the first date bucket inside the panel body. */
.na-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 4px 0 8px 0;
  margin-bottom: 4px;
}
.na-toolbar .filter-btn {
  padding: 4px 10px;
  font-size: 11px;
}

.contract-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px 4px;
}
.contract-toggle input { cursor: pointer; }

.contracts-container {
  padding: 12px 20px 40px;
}

.contract-group-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 18px 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background 0.12s ease;
}
.contract-group-label:hover {
  background: var(--bg-light, #f3f4f6);
  color: var(--text, #111827);
}
.contract-group-label.contract-group-expiring { color: var(--warning); }
.contract-group-chevron {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  transition: transform 0.15s ease;
  color: var(--text-muted);
}
.contract-group-chevron.is-collapsed {
  transform: rotate(-90deg);
}
.contract-group-label-text {
  /* occupies natural width between chevron and count */
}
.contract-group-count {
  color: var(--text-muted);
  font-weight: 400;
}

.contract-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  margin-bottom: 6px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.contract-item:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.contract-item.expiring-soon { border-left: 3px solid var(--warning); }
.contract-item.expired { opacity: 0.7; border-left: 3px solid var(--danger); }
.contract-item.terminated { opacity: 0.65; }

.contract-item-main {
  min-width: 0;
}
.contract-item-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contract-item-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Meta row under the title: type tag, counterparty, signed date, owner */
.contract-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-secondary);
}
.contract-item-meta > * {
  display: inline-flex;
  align-items: center;
}
/* Subtle separator dot between text items — skips the type tag (which is a pill) */
.contract-item-meta > span + span::before {
  content: '·';
  margin-right: 8px;
  color: var(--text-muted);
  opacity: 0.6;
}

.contract-type-tag {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  background: var(--accent-light);
  color: var(--accent);
  white-space: nowrap;
}
.contract-type-tag.type-Employment,
.contract-type-tag.type-ESOP { background: #f3e8ff; color: #7c3aed; }
.contract-type-tag.type-LetterOfIntent,
.contract-type-tag.type-TermSheet { background: #fef3c7; color: #b45309; }
.contract-type-tag.type-MTA,
.contract-type-tag.type-CRO { background: #dcfce7; color: #16a34a; }

.contract-status {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  /* Labels are emitted with the exact casing we want (see
     CONTRACT_STATUS_LABELS in views.js), so no text-transform here. */
}
.contract-status.status-active { background: var(--success-light); color: var(--success); }
/* completed (#179, 2026-06-04): work-based deliverable contracts finished —
   blue tint distinguishes from Active green and Expired red. */
.contract-status.status-completed { background: #dbeafe; color: #1e40af; }
.contract-status.status-draft { background: #f3f4f6; color: var(--text-secondary); }
.contract-status.status-expired { background: var(--danger-light); color: var(--danger); }
.contract-status.status-terminated { background: #f3f4f6; color: var(--text-muted); }
/* New statuses (Apr 2026):
   - partially-signed: amber — paperwork in progress, some signatures missing
   - unsigned: soft red — file exists but hasn't been signed at all
   - superseded: muted purple — replaced by a newer contract (historical) */
.contract-status.status-partially-signed { background: #fef3c7; color: #b45309; }
.contract-status.status-unsigned { background: #fee2e2; color: #b91c1c; }
.contract-status.status-superseded { background: #ede9fe; color: #6d28d9; }

/* File-issue indicator (e.g. the stored PDF is corrupted). Lives on the
   collapsed row's right cluster, sits just to the left of the doc-pin. The
   expanded-view banner below is the "full explanation" counterpart. */
.contract-file-issue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 14px;
  line-height: 1;
  border-radius: 50%;
  background: #fee2e2;
  color: #b91c1c;
  cursor: help;
  margin-right: 4px;
  flex-shrink: 0;
}
.contract-file-issue-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 3px solid #b91c1c;
  border-radius: 6px;
  color: #991b1b;
}
.contract-file-issue-banner-icon {
  font-size: 16px;
  line-height: 1.2;
  flex-shrink: 0;
}
.contract-file-issue-banner-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 2px;
}
.contract-file-issue-banner-note {
  font-size: 13px;
  color: #7f1d1d;
  line-height: 1.4;
}

/* Document history — "Previous versions" list (2026-04-22) */
.contract-doc-history-count {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 6px;
}
.contract-doc-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contract-doc-history-row {
  padding: 8px 10px;
  background: var(--bg-light, #f9fafb);
  border-left: 2px solid var(--border, #e5e7eb);
  border-radius: 4px;
  font-size: 13px;
}
.contract-doc-history-meta {
  color: var(--text-muted);
  font-size: 12px;
  margin-bottom: 2px;
}
.contract-doc-history-date {
  font-weight: 500;
  color: var(--text-secondary);
}
.contract-doc-history-link {
  color: var(--primary);
  text-decoration: none;
}
.contract-doc-history-link:hover {
  text-decoration: underline;
}
.contract-doc-history-note {
  margin-top: 4px;
  color: var(--text-secondary);
  font-style: italic;
}

/* Stacked footer for the "new version vs correction" prompt — the three
   choices are too wordy to fit comfortably in a single row, and stacking
   also makes the destructive/primary distinction clearer. */
.contract-modal-footer-stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.contract-modal-footer-stacked .contract-btn {
  width: 100%;
}

.contract-expiry {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.contract-expiry.expiring-soon { color: var(--warning); font-weight: 500; }
.contract-expiry.expired { color: var(--danger); font-weight: 500; }

/* Expiry badge — absolute date (primary) + relative (·muted suffix) */
.contract-expiry-date { font-weight: 500; }
.contract-expiry-rel {
  color: var(--text-muted);
  font-weight: 400;
}
.contract-expiry-expired .contract-expiry-date,
.contract-expiry-soon .contract-expiry-date,
.contract-expiry-warn .contract-expiry-date { font-weight: 600; }

/* "originally <date>" hint (#155) — shown when the contract has been
   extended via an addendum cascade. Grayish + italic so it's clearly
   secondary info next to the current expiry. */
.contract-expiry-original {
  color: var(--text-muted, #9ca3af);
  font-size: 0.92em;
  font-style: italic;
  font-weight: 400;
}

/* Collapsed row — counterparty bold (primary), owner muted (secondary),
   signed date shown between them */
.contract-counterparty-name {
  font-weight: 700;
  color: var(--text);
}
.contract-signed-date {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.contract-owner-muted {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.contract-addendum-badge {
  font-size: 11px;
  background: var(--primary);
  color: var(--bg-white);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
}

/* Archived pill — appears next to the contract title ONLY when the user is
   viewing the archive ("Show archived" toggle on). Kept muted so it doesn't
   compete with status / addendum pills. */
.contract-archived-pill {
  font-size: 10px;
  background: var(--text-muted);
  color: var(--bg-white);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  margin-left: 4px;
  opacity: 0.85;
}

/* Amendment pill (#180 follow-up) — appears next to the contract title when
   the row is itself an amendment of another contract. Only shows up in the
   top-level list when "Show amendments" toggle is ON. Soft amber so it
   reads as informational at a glance without competing with status pills. */
.contract-amendment-pill {
  font-size: 10px;
  background: #fef3c7;
  color: #b45309;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin-left: 4px;
}

/* "Link as amendment to…" picker rows (#178) — list of eligible parents
   in the modal opened from the expanded contract view. Click-to-select. */
.link-amendment-row {
  padding: 10px 12px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 6px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.link-amendment-row:hover {
  background: #f3f4f6;
  border-color: var(--primary);
}
.link-amendment-row-title {
  font-weight: 600;
  margin-bottom: 2px;
}
.link-amendment-row-meta {
  font-size: 12px;
  color: var(--text-muted);
}
/* Archived rows get a subtle muted background so the archive view reads as
   a distinct mode at a glance. */
.contract-item-archived {
  background: var(--bg);
  opacity: 0.9;
}
.contract-item-archived:hover { opacity: 1; }

/* Paperclip on collapsed row — indicates documentLink, clickable to open file */
.contract-doc-pin {
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  color: var(--text-muted);
  padding: 4px 6px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.contract-doc-pin:hover {
  background: var(--bg-light, #f3f4f6);
  color: var(--primary);
}

/* --- Inline contract expansion (mirrors .task-expanded pattern) --- */
.contract-expanded {
  background: var(--bg-white);
  border: 1px solid var(--accent);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  margin-bottom: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.contract-expanded-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  flex-wrap: wrap;
  background: var(--bg-white);
}
.contract-expanded-header:hover { background: var(--bg); }
.contract-expanded-title {
  flex: 1;
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
  min-width: 0;
}
.contract-expanded-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
}
.contract-expanded-body {
  padding: 16px 20px;
}
.contract-expanded-section + .contract-expanded-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
/* Cross-link from a contract section to a different module (e.g. Employment
   contract → HR timeline). Sits below detail rows, slightly inset. (#70) */
.contract-expanded-cross-link {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 13px;
}
.contract-expanded-cross-link .contract-btn-link { font-size: 13px; }

.contract-expanded-section-title {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.contract-expanded-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;  /* bar itself is a collapse target — see views.js */
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.contract-expanded-actions-right {
  display: flex;
  gap: 8px;
}
/* Buttons keep their own cursor (default button pointer behaviour from .contract-btn);
   explicit override in case browsers inherit the bar's cursor: pointer. */
.contract-expanded-actions .contract-btn {
  cursor: pointer;
}
.contract-expanded-actions:hover {
  background: var(--bg-hover, #f3f4f6);
}
@media (max-width: 640px) {
  .contract-expanded-header { padding: 12px; }
  .contract-expanded-body { padding: 12px; }
  .contract-expanded-actions { padding: 10px 12px; flex-wrap: wrap; }
  .contract-expanded-actions-right { flex: 1; justify-content: flex-end; }
}

/* --- Modal (reusable for detail, add/edit, addendum) --- */
.contract-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.contract-modal {
  background: var(--bg-white);
  border-radius: var(--radius);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.contract-modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.contract-modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.contract-modal-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.contract-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--text-muted);
  padding: 4px 8px;
}
.contract-modal-close:hover { color: var(--text); }
.contract-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}
.contract-modal-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.contract-modal-footer-right {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* --- Detail view sections --- */
.contract-detail-section {
  margin-bottom: 18px;
}
.contract-detail-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.contract-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}
.contract-detail-field {
  font-size: 14px;
}
.contract-detail-field-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.contract-detail-field-value {
  color: var(--text);
  word-break: break-word;
}
.contract-detail-field-value a { color: var(--accent); text-decoration: none; }
.contract-detail-field-value a:hover { text-decoration: underline; }
.contract-detail-notes {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 14px;
  color: var(--text);
  white-space: pre-wrap;
}

/* --- Addendum timeline --- */
.contract-addendum-timeline {
  border-left: 2px solid var(--border);
  padding-left: 16px;
  margin-top: 8px;
}
.contract-addendum-item {
  position: relative;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.contract-addendum-item::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.contract-addendum-item.addendum-extension::before { background: var(--success); }
.contract-addendum-item.addendum-scope-change::before { background: var(--warning); }
.contract-addendum-item.addendum-amendment::before { background: var(--accent); }
.contract-addendum-item.addendum-assignment::before { background: #7c3aed; }
.contract-addendum-header {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.contract-addendum-kind {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-white);
  text-transform: capitalize;
}
.contract-addendum-meta {
  font-size: 12px;
  color: var(--text-secondary);
}
.contract-addendum-summary {
  font-size: 13px;
  color: var(--text);
  margin-top: 4px;
  white-space: pre-wrap;
}
.contract-addendum-actions {
  margin-top: 6px;
  display: flex;
  gap: 10px;
  font-size: 12px;
}
.contract-addendum-actions a {
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}
.contract-addendum-actions a:hover { text-decoration: underline; }

/* --- Form --- */
.contract-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.contract-form-field { display: flex; flex-direction: column; gap: 4px; }
.contract-form-field.full-width { grid-column: 1 / -1; }
.contract-form-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.contract-form-input,
.contract-form-select,
.contract-form-textarea {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  background: var(--bg-white);
  color: var(--text);
}
.contract-form-input:focus,
.contract-form-select:focus,
.contract-form-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.contract-form-textarea { resize: vertical; min-height: 72px; }
.contract-form-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
}
.contract-form-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.contract-form-error {
  color: var(--danger);
  font-size: 13px;
  background: var(--danger-light);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}

/* =============================================================
 * OAA Buttons — central definition (#108)
 * =============================================================
 * Edit padding / radius / colors / hover here once; the whole app
 * picks it up. Legacy class names (.contract-btn, .contract-btn-primary,
 * .contract-btn-danger, .contract-btn-link) are aliased to the new
 * .oaa-btn-* visuals below so existing markup gains the unified look
 * without per-site rewrites. New render sites should call
 * OAA_UI.btn({ variant: 'primary', ... }) which emits .oaa-btn-* classes.
 */
.oaa-btn,
.contract-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-white);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.oaa-btn:hover:not(:disabled),
.contract-btn:hover:not(:disabled) {
  background: var(--bg);
}
.oaa-btn:focus-visible,
.contract-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-light);
}
.oaa-btn:disabled,
.oaa-btn.oaa-btn-disabled,
.contract-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Secondary — explicit alias of the default (.contract-btn / .oaa-btn). */
.oaa-btn-secondary { /* same as base */ }

/* Primary — brand navy filled. */
.oaa-btn-primary,
.contract-btn-primary {
  background: var(--primary);
  color: var(--bg-white);
  border-color: var(--primary);
}
.oaa-btn-primary:hover:not(:disabled),
.contract-btn-primary:hover:not(:disabled) {
  background: var(--primary-light);
  border-color: var(--primary-light);
}

/* Danger — red outlined; hover fills. */
.oaa-btn-danger,
.contract-btn-danger {
  background: var(--bg-white);
  color: var(--danger);
  border-color: var(--danger);
}
.oaa-btn-danger:hover:not(:disabled),
.contract-btn-danger:hover:not(:disabled) {
  background: var(--danger-light);
}

/* Link — text-only accent button. Sits inline next to other buttons
   without visually outweighing them. Replaces the un-styled
   .contract-btn-link which previously inherited the browser default. */
.oaa-btn-link,
.contract-btn-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: var(--primary);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.15s, color 0.15s;
}
.oaa-btn-link:hover:not(:disabled),
.contract-btn-link:hover:not(:disabled) {
  background: var(--bg);
  text-decoration: underline;
}
.oaa-btn-link:focus-visible,
.contract-btn-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-light);
}
/* Danger link — same shape as .oaa-btn-link but red, for destructive
   actions rendered inline (e.g. per-row Delete in tables). */
.oaa-btn-link-danger {
  color: var(--danger, #c0392b) !important;
}
.oaa-btn-link-danger:hover:not(:disabled) {
  background: rgba(192, 57, 43, 0.08);
  color: var(--danger, #c0392b);
}

/* Ghost — outlined, no fill. Tertiary actions. */
.oaa-btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.oaa-btn-ghost:hover:not(:disabled) {
  background: var(--bg);
}

/* Sizes. md is the default (no class). */
.oaa-btn-sm { padding: 4px 10px; font-size: 12px; }
.oaa-btn-lg { padding: 10px 18px; font-size: 16px; }

/* =============================================================
 * OAA Searchable Select — combobox with type-to-search (#137)
 * =============================================================
 * Drop-in replacement for <select>. Visible <input> for typing,
 * hidden input carrying the real value (so data-action="…" wiring
 * works unchanged). Dropdown with substring filtering + keyboard nav.
 * Used wherever a list has more than 8 options (default threshold);
 * caller can force on/off via { searchable: true|false }.
 */
.oaa-ss {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-width: 140px;
}
.oaa-ss-control {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.oaa-ss-input {
  width: 100%;
  padding: 6px 26px 6px 10px;
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  border: 1px solid var(--border, #d1d5db);
  border-radius: var(--radius-sm, 4px);
  background: #fff;
  color: var(--text, #111);
  box-sizing: border-box;
  cursor: text;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.oaa-ss-input::placeholder {
  color: #9aa0a6;
}
.oaa-ss.oaa-ss-open .oaa-ss-input,
.oaa-ss-input:focus {
  outline: none;
  border-color: #185FA5;
  box-shadow: 0 0 0 2px rgba(24, 95, 165, 0.18);
}
.oaa-ss-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  font-size: 12px;
  pointer-events: auto;
  user-select: none;
  cursor: pointer;
  transition: transform 0.15s;
}
.oaa-ss.oaa-ss-open .oaa-ss-chevron {
  transform: translateY(-50%) rotate(180deg);
}
.oaa-ss-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  margin: 4px 0 0;
  padding: 4px 0;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border, #d1d5db);
  border-radius: var(--radius-sm, 4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  display: none;
}
.oaa-ss.oaa-ss-open .oaa-ss-dropdown { display: block; }
.oaa-ss.oaa-ss-up .oaa-ss-dropdown {
  top: auto;
  bottom: 100%;
  margin: 0 0 4px;
}
.oaa-ss-opt {
  padding: 6px 12px;
  font-size: 14px;
  color: var(--text, #111);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.oaa-ss-opt:hover,
.oaa-ss-opt-active {
  background: #E6F1FB;
  color: #0C447C;
}
.oaa-ss-opt-selected {
  font-weight: 600;
}
.oaa-ss-opt-selected::before {
  content: "✓ ";
  color: #185FA5;
}
.oaa-ss-empty {
  padding: 8px 12px;
  font-size: 13px;
  color: #6b7280;
  font-style: italic;
  cursor: default;
}

/* =============================================================
 * OAA Rich Editor — minimal WYSIWYG (#146)
 * =============================================================
 * Replaces <textarea> where light formatting (Bold / Italic / Bullet /
 * Link) is useful. Toolbar above + contenteditable content area below.
 * Hidden input inside the wrapper carries the canonical value via
 * data-action so existing change-listeners plug in unchanged.
 */
.oaa-rich {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border, #d1d5db);
  border-radius: var(--radius-sm, 4px);
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.oaa-rich:focus-within {
  border-color: #185FA5;
  box-shadow: 0 0 0 2px rgba(24, 95, 165, 0.18);
}
.oaa-rich-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 6px;
  background: var(--bg, #f9fafb);
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.oaa-rich-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text, #111);
  line-height: 1.4;
}
.oaa-rich-btn:hover {
  background: rgba(24, 95, 165, 0.08);
  border-color: rgba(24, 95, 165, 0.18);
}
.oaa-rich-btn:active {
  background: rgba(24, 95, 165, 0.16);
}
.oaa-rich-btn b, .oaa-rich-btn i { font-style: italic; }
.oaa-rich-btn b { font-weight: 700; font-style: normal; }
.oaa-rich-content {
  flex: 1 1 auto;
  padding: 8px 10px;
  outline: none;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text, #111);
  overflow-y: auto;
  word-wrap: break-word;
}
/* Placeholder for empty editors — pure CSS, no JS needed. */
.oaa-rich-content[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted, #9ca3af);
  pointer-events: none;
}
.oaa-rich-content p { margin: 0 0 6px; }
.oaa-rich-content p:last-child { margin-bottom: 0; }
.oaa-rich-content ul, .oaa-rich-content ol {
  margin: 0 0 6px;
  padding-left: 22px;
}
.oaa-rich-content a {
  color: #185FA5;
  text-decoration: underline;
}
.oaa-rich-content a:hover { color: #0C447C; }

/* Fixed-size variant — used for Description + Private Note where we want
   a consistent ~4-row height with internal scroll (matches #145). */
.oaa-rich--fixed .oaa-rich-content {
  height: 90px;
  max-height: 90px;
}
/* Chat-input variant — smaller, sits inline with the send affordance. */
.oaa-rich--chat .oaa-rich-content {
  min-height: 40px;
  max-height: 120px;
}

/* --- Mobile --- */
@media (max-width: 720px) {
  .contract-filters { padding: 10px 12px; }
  .contracts-container { padding: 8px 12px 40px; }
  .contract-item {
    grid-template-columns: 1fr auto;
    row-gap: 6px;
    padding: 12px;
  }
  .contract-item-sub,
  .contract-type-tag,
  .contract-status,
  .contract-expiry,
  .contract-addendum-badge {
    grid-column: auto;
  }
  .contract-detail-grid { grid-template-columns: 1fr; }
  .contract-form-grid { grid-template-columns: 1fr; }
  .contract-modal { max-height: 100vh; border-radius: 0; }
}

/* Type-specific details section in the contract form (#45a). Sits below the
   main grid and is rebuilt when Type changes. The divider + section title
   help signal that these are extra, type-conditional fields. */
.contract-form-typespec {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.contract-form-section-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 10px;
}
/* Wide field used for multi-line typeDetails like Master scope / Payment
   schedule on the expanded view — span the whole grid so the text doesn't
   get cramped into a single column. Matches contract-detail-field-wide
   convention used in the form grid. */
.contract-detail-field-wide { grid-column: 1 / -1; }
.contract-form-input-currency { max-width: 140px; }

/* --------------------------------------------------------------
   SharePoint picker — modal that lets the user browse the
   Administration site instead of pasting a URL.
   -------------------------------------------------------------- */
.contract-form-doc-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.contract-form-doc-row .contract-form-input {
  flex: 1;
  min-width: 0;
}
.contract-form-doc-row .contract-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Phone code + number side-by-side. Code dropdown stays narrow; number
   takes the rest of the row. Auto-picks from country selection. */
.contract-form-phone-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.contract-form-phone-code {
  flex: 0 0 auto;
  width: 150px;
  min-width: 0;
}
.contract-form-phone-row .contract-form-input {
  flex: 1;
  min-width: 0;
}

/* Filename confirmation under a documentLink input — visible blue link
   so the user can verify they picked the right file. */
.contract-form-doc-preview {
  margin-top: 6px;
}
.contract-form-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent, #0066cc);
  text-decoration: none;
  font-size: 13px;
  word-break: break-word;
}
.contract-form-doc-link:hover {
  text-decoration: underline;
}
.contract-form-doc-icon {
  font-size: 14px;
}
.contract-form-doc-name {
  font-weight: 500;
}
.contract-form-doc-arrow {
  font-size: 12px;
  opacity: 0.7;
}
.sp-picker-modal {
  max-width: 640px;
}
.sp-picker-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 320px;
}
/* Site toggle row — switches between Admin / HR SharePoint sites (#72). */
.sp-picker-site-toggles {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  background: var(--bg-muted, #f3f4f6);
  border-radius: 6px;
  width: fit-content;
}
.sp-picker-site-toggle {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}
.sp-picker-site-toggle:hover { background: rgba(0, 0, 0, 0.05); }
.sp-picker-site-toggle-active {
  background: var(--bg-card, #fff);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.sp-picker-search {
  position: relative;
  margin-bottom: 12px;
}
.sp-picker-search-input {
  width: 100%;
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}
.sp-picker-search-input:focus {
  outline: none;
  border-color: var(--accent, #0066cc);
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
}
.sp-picker-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-secondary, #888);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 16px;
  line-height: 1;
  border-radius: 4px;
}
.sp-picker-search-clear:hover {
  background: var(--bg-hover, #f4f6fa);
  color: var(--text-primary, #222);
}
.sp-picker-item-name-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}
.sp-picker-item-path {
  font-size: 11px;
  color: var(--text-secondary, #888);
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-picker-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light, #eaeaea);
}
.sp-picker-crumb-link {
  background: none;
  border: none;
  color: var(--accent-blue, #0067c0);
  cursor: pointer;
  padding: 2px 4px;
  font-size: inherit;
}
.sp-picker-crumb-link:hover { text-decoration: underline; }
.sp-picker-crumb-current {
  color: var(--text-primary, #222);
  font-weight: 600;
  padding: 2px 4px;
}
.sp-picker-crumb-sep {
  color: var(--text-secondary, #888);
  margin: 0 2px;
}
.sp-picker-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  width: 100%;
  font-size: 14px;
}
.sp-picker-item:hover {
  background: var(--bg-hover, #f4f6fa);
  border-color: var(--border-light, #e5e7eb);
}
.sp-picker-item-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.sp-picker-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-picker-item-meta {
  color: var(--text-secondary, #888);
  font-size: 12px;
  flex-shrink: 0;
}
.sp-picker-item[data-kind="folder"] .sp-picker-item-name {
  font-weight: 500;
}
.sp-picker-status {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-secondary, #888);
  font-size: 14px;
}
.sp-picker-error {
  color: var(--accent-red, #c0392b);
}
.sp-picker-hint {
  flex: 1;
  font-size: 12px;
  color: var(--text-secondary, #888);
}
@media (max-width: 600px) {
  .contract-form-doc-row { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------------
   Smart NA — junk filter UI
   -------------------------------------------------------------- */

/* Per-email Junk button. Hover-revealed on the right edge of each email row. */
.email-junk-btn {
  align-self: center;
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary, #888);
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.email-item:hover .email-junk-btn { opacity: 1; }
.email-junk-btn:hover {
  background: rgba(220, 53, 69, 0.1);
  color: var(--danger, #dc3545);
  border-color: rgba(220, 53, 69, 0.3);
}
.email-junk-btn:focus { opacity: 1; outline: 2px solid var(--accent, #0066cc); outline-offset: 1px; }

/* Hidden-tasks section at the bottom of NA. */
.na-hidden-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--border, #e5e7eb);
}
.na-hidden-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 8px 4px;
  font-size: 13px;
  color: var(--text-secondary, #666);
  cursor: pointer;
  text-align: left;
}
.na-hidden-toggle:hover { color: var(--text-primary, #222); }
.na-hidden-chevron {
  display: inline-block;
  font-size: 10px;
  transition: transform 0.15s;
}
.na-hidden-chevron.is-collapsed { transform: rotate(-90deg); }
.na-hidden-manage-link {
  margin-left: auto;
  color: var(--accent, #0066cc);
  text-decoration: underline;
  font-size: 12px;
  cursor: pointer;
}
.na-hidden-manage-link:hover { color: var(--accent-dark, #004a99); }

/* Hidden email rows — shown when the "Hidden by your filters" expander is open. */
.email-item.email-hidden {
  background: var(--bg-muted, #f6f7f9);
  opacity: 0.85;
  margin-top: 4px;
  cursor: default;
}
.email-item.email-hidden:hover { box-shadow: none; border-color: var(--border, #e5e7eb); }
.email-hidden-icon {
  font-size: 16px;
  align-self: center;
  flex-shrink: 0;
  opacity: 0.6;
}
.email-hidden-rule {
  font-style: italic;
  color: var(--text-secondary, #888);
  font-size: 12px;
  margin-top: 2px;
}
.email-unhide-btn {
  align-self: center;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border, #ccc);
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-primary, #222);
}
.email-unhide-btn:hover { background: var(--bg-hover, #f0f2f5); border-color: var(--accent, #0066cc); }

/* "Adjust filter" dialog (3 radio options). */
.junk-adjust-modal { max-width: 480px; }
.junk-adjust-body {
  padding: 16px 20px;
}
.junk-adjust-body p {
  margin: 0 0 12px 0;
  color: var(--text-secondary, #666);
  font-size: 14px;
}
.junk-adjust-option {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  align-items: flex-start;
  margin-bottom: 4px;
  border: 1px solid transparent;
}
.junk-adjust-option:hover { background: var(--bg-hover, #f6f7f9); border-color: var(--border, #e5e7eb); }
.junk-adjust-option input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
}
.junk-adjust-option-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.junk-adjust-option-label strong { font-size: 14px; }
.junk-adjust-hint {
  font-size: 12px;
  color: var(--text-secondary, #888);
  font-family: monospace;
}
.junk-adjust-prefix {
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border, #ccc);
  border-radius: 4px;
  font-size: 13px;
  font-family: monospace;
  width: 100%;
  box-sizing: border-box;
}

/* "Manage filters" modal — list of all rules with disable + delete. */
.manage-filters-modal { max-width: 640px; }
.manage-filters-body {
  padding: 12px 20px;
  max-height: 60vh;
  overflow-y: auto;
}
.manage-filters-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-secondary, #888);
  font-size: 14px;
}

/* ---- Bootstrap-from-history dialog (#48) ----
   Sits on top of the Manage Filters modal. Wider so the list of sender
   groups breathes; supports a 12-week scroll without feeling cramped. */
.bootstrap-modal { max-width: 760px; }
.bootstrap-intro {
  padding: 8px 20px 0;
  font-size: 13px;
  color: var(--text-secondary, #64748b);
  line-height: 1.45;
}
.bootstrap-window-toggle {
  display: inline-flex;
  margin: 12px 20px 4px;
  background: var(--bg-muted, #f3f4f6);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.bootstrap-window-btn {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.bootstrap-window-btn:hover { color: var(--text); }
.bootstrap-window-btn.is-active {
  background: var(--bg-card, #fff);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.bootstrap-body { padding-top: 8px; }
.bootstrap-quick-select {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.bootstrap-quick-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.bootstrap-list { display: flex; flex-direction: column; gap: 4px; }
.bootstrap-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.bootstrap-row:hover { background: var(--bg-muted, #f9fafb); }
.bootstrap-row input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  cursor: pointer;
}
.bootstrap-row.is-already-filtered {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--bg-muted, #f9fafb);
}
.bootstrap-row.is-already-filtered:hover {
  background: var(--bg-muted, #f9fafb);
}
.bootstrap-row-main { flex: 1; min-width: 0; }
.bootstrap-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.bootstrap-row-sig {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.bootstrap-row-count {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  font-weight: 500;
  margin-left: auto;
  white-space: nowrap;
}
.bootstrap-row-samples {
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bootstrap-row-senders {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  margin-top: 3px;
  display: block;
}
.bootstrap-already-tag,
.bootstrap-impersonal-tag {
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 3px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.bootstrap-already-tag {
  background: #d1fae5;
  color: #065f46;
}
.bootstrap-impersonal-tag {
  background: #ede9fe;
  color: #5b21b6;
  text-transform: lowercase;
  letter-spacing: 0;
  font-style: italic;
}
.bootstrap-footer { gap: 10px; }
.manage-filters-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-light, #eef0f3);
}
.manage-filters-row:last-child { border-bottom: none; }
.manage-filters-row.is-disabled { opacity: 0.55; }
.manage-filters-row-main {
  flex: 1;
  min-width: 0;
}
.manage-filters-rule {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #222);
}
.manage-filters-sample {
  font-size: 12px;
  color: var(--text-secondary, #888);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.manage-filters-row-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.manage-filters-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}
.manage-filters-del {
  background: transparent;
  border: 1px solid var(--border, #ccc);
  color: var(--danger, #dc3545);
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.manage-filters-del:hover {
  background: rgba(220, 53, 69, 0.08);
  border-color: var(--danger, #dc3545);
}
.manage-filters-hint {
  flex: 1;
  font-size: 12px;
  color: var(--text-secondary, #888);
}

/* --------------------------------------------------------------
   Contract supersession UI
   -------------------------------------------------------------- */

/* Banner at the top of an expanded contract that has been superseded */
.contract-supersession-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 12px 0;
  background: rgba(196, 123, 0, 0.08);
  border: 1px solid rgba(196, 123, 0, 0.3);
  border-radius: 6px;
  font-size: 13px;
}
.contract-supersession-icon {
  font-size: 16px;
  color: #c47b00;
}
.contract-supersession-text {
  flex: 1;
}
.contract-supersession-date {
  color: var(--text-secondary, #888);
  font-size: 12px;
}

/* "Previous versions" list under expanded contract */
.contract-prev-versions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contract-prev-version-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-muted, #f6f7f9);
  border-radius: 6px;
  border: 1px solid var(--border-light, #e5e7eb);
}
.contract-prev-version-main {
  flex: 1;
  min-width: 0;
}
.contract-prev-version-meta {
  font-size: 12px;
  color: var(--text-secondary, #888);
  margin-top: 2px;
}

/* Row state styling */
.contract-item-superseded {
  opacity: 0.85;
  background: var(--bg-muted, #fafbfc);
}
.contract-item-superseded:hover { opacity: 1; }

/* Drag-and-drop visual feedback */
.contract-item[draggable="true"] { cursor: grab; }
.contract-item.contract-item-dragging {
  opacity: 0.5;
  cursor: grabbing;
}
.contract-item.contract-item-drop-target {
  outline: 2px dashed var(--accent, #0066cc);
  outline-offset: -2px;
  background: rgba(0, 102, 204, 0.05);
}

/* Supersession confirmation modal */
.supersession-modal { max-width: 720px; }
.supersession-body { padding: 18px 20px; }
.supersession-explainer {
  margin: 0 0 16px 0;
  font-size: 13px;
  color: var(--text-secondary, #666);
  line-height: 1.5;
}
.supersession-cards {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
}
.supersession-card {
  border: 1px solid var(--border, #d1d5db);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--bg-white, #fff);
}
.supersession-card-label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--accent, #0066cc);
  margin-bottom: 2px;
}
.supersession-card-sublabel {
  font-size: 11px;
  color: var(--text-secondary, #888);
  margin-bottom: 8px;
  font-style: italic;
}
.supersession-card-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}
.supersession-card-meta {
  font-size: 12px;
  color: var(--text-secondary, #888);
  margin-bottom: 10px;
}
.supersession-card-dates {
  margin: 0;
  display: grid;
  grid-template-columns: 70px 1fr;
  row-gap: 4px;
  font-size: 12px;
}
.supersession-card-dates dt {
  color: var(--text-secondary, #888);
  font-weight: normal;
}
.supersession-card-dates dd { margin: 0; }
.supersession-swap {
  align-self: center;
  font-size: 18px;
  padding: 8px 12px;
  cursor: pointer;
  background: var(--bg-muted, #f6f7f9);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
}
.supersession-swap:hover {
  background: var(--accent, #0066cc);
  color: white;
  border-color: var(--accent, #0066cc);
}
@media (max-width: 600px) {
  .supersession-cards { grid-template-columns: 1fr; }
  .supersession-swap { transform: rotate(90deg); justify-self: center; }
}

/* Reusable info-banner pattern (#86d). Soft brand-accent backdrop + border
   for any "FYI, here's a thing worth knowing" surface — supersession
   suggestions, smart-NA hints, post-deploy notices, etc. Anything that
   was previously a generic-blue box should adopt this class instead. */
.brand-info-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--brand-info-bg);
  border: 1px solid var(--brand-info-border);
  border-radius: 8px;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s;
}
.brand-info-banner-icon { font-size: 18px; color: var(--accent); }
.brand-info-banner-text { flex: 1; }
.brand-info-banner-cta { font-weight: 600; color: var(--accent); }
.brand-info-banner.is-clickable { cursor: pointer; }
.brand-info-banner.is-clickable:hover {
  background: rgba(5, 161, 192, 0.11);
  border-color: rgba(5, 161, 192, 0.40);
}

/* Auto-suggest banner at top of the contracts list — re-tinted from
   generic blue rgba(0, 102, 204, ...) to the brand accent (#86d). */
.supersession-suggest-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--brand-info-bg);
  border: 1px solid var(--brand-info-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-size: 13px;
}
.supersession-suggest-banner:hover {
  background: rgba(5, 161, 192, 0.11);
  border-color: rgba(5, 161, 192, 0.40);
}
.supersession-suggest-icon {
  font-size: 18px;
  color: var(--accent);
}
.supersession-suggest-text {
  flex: 1;
}
.supersession-suggest-cta {
  font-weight: 600;
  color: var(--accent, #05a1c0);
}

/* Auto-suggest modal */
.supersession-suggest-modal { max-width: 760px; }
.supersession-suggest-body {
  padding: 16px 20px;
  max-height: 65vh;
  overflow-y: auto;
}
.supersession-suggest-explainer {
  margin: 0 0 14px 0;
  font-size: 13px;
  color: var(--text-secondary, #666);
  line-height: 1.5;
}
.supersession-suggest-row {
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--bg-white, #fff);
}
.supersession-suggest-row-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.supersession-suggest-row-header strong { font-size: 14px; }
.supersession-suggest-row-type {
  font-size: 11px;
  background: var(--bg-muted, #f6f7f9);
  padding: 2px 8px;
  border-radius: 10px;
  color: var(--text-secondary, #666);
}
.supersession-suggest-row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.supersession-suggest-side {
  background: var(--bg-muted, #f9fafb);
  border-radius: 6px;
  padding: 8px 10px;
}
.supersession-suggest-side-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary, #888);
  margin-bottom: 4px;
}
.supersession-suggest-side-title {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
}
.supersession-suggest-side-meta {
  font-size: 11px;
  color: var(--text-secondary, #888);
}
.supersession-suggest-row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.supersession-suggest-empty {
  padding: 32px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary, #888);
}
@media (max-width: 600px) {
  .supersession-suggest-row-pair { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------
   Parties Registry
   -------------------------------------------------------------- */
.party-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  margin-left: 8px;
}
.party-type-company {
  background: rgba(0, 102, 204, 0.1);
  color: var(--accent, #0066cc);
}
/* Team chip on person Party rows (#96) — small monospaced badge showing
   the team code (AD, DE, etc.). Sits next to the Person type badge. */
.party-team-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--brand-purple, #5b57a2);
  background: rgba(91, 87, 162, 0.12);
  color: var(--brand-purple, #5b57a2);
  letter-spacing: 0.4px;
  margin-left: 4px;
}
/* "Approves POs" tag on person Party rows (#96) — warm orange to mark
   contractors who can sign off on POs without being EpiEndo employees. */
.party-pos-approver-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(220, 96, 18, 0.12);
  color: var(--warning, #dc6012);
  margin-left: 4px;
}

.party-type-person {
  background: rgba(40, 167, 69, 0.1);
  color: var(--success, #28a745);
}
.party-ref-count {
  font-size: 12px;
  color: var(--text-secondary, #888);
  background: var(--bg-muted, #f6f7f9);
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.party-item .contract-counterparty {
  font-weight: 400;
  color: var(--text-secondary, #888);
}
.view-subtitle {
  font-size: 13px;
  color: var(--text-secondary, #888);
  margin: 2px 0 0 0;
}

/* Bulk-edit (spreadsheet-style) table for the parties registry. Designed
   for the migration cleanup workflow — quick re-classify of 200+ records
   without modal-per-edit. */
.parties-bulk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.parties-bulk-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary, #666);
  padding: 8px 10px;
  border-bottom: 2px solid var(--border, #e5e7eb);
  background: var(--bg-muted, #f9fafb);
  position: sticky;
  top: 0;
  z-index: 1;
}
.parties-bulk-table tbody td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-light, #eef0f3);
  vertical-align: middle;
}
.parties-bulk-table tbody tr:nth-child(even) {
  background: var(--bg-muted, #f9fafb);
}
.parties-bulk-table tbody tr:hover {
  background: var(--bg-hover, #f4f6fa);
}
.parties-bulk-table tbody tr.parties-bulk-selected,
.parties-bulk-table tbody tr.parties-bulk-selected:nth-child(even) {
  /* #86d: brand-tinted selection state (was generic blue rgba(0,102,204,...)).
     Reused by POs table too since it inherits parties-bulk-table styles. */
  background: rgba(5, 161, 192, 0.10);
}
.parties-bulk-name {
  font-weight: 500;
  color: var(--text-primary, #222);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.parties-bulk-input {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary, #222);
  box-sizing: border-box;
}
.parties-bulk-input:hover {
  border-color: var(--border-light, #d1d5db);
  background: var(--bg-white, #fff);
}
.parties-bulk-input:focus {
  outline: none;
  border-color: var(--accent, #0066cc);
  background: var(--bg-white, #fff);
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
}
.parties-bulk-input.parties-bulk-saving { background: rgba(255, 200, 0, 0.08); }
.parties-bulk-input.parties-bulk-saved {
  background: rgba(40, 167, 69, 0.1);
  transition: background 0.6s;
}
.parties-bulk-input.parties-bulk-error { background: rgba(220, 53, 69, 0.1); }
.parties-bulk-na {
  color: var(--text-secondary, #aaa);
  font-style: italic;
}
.parties-bulk-ref {
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary, #666);
  font-weight: 500;
}
.parties-bulk-actions {
  white-space: nowrap;
  text-align: right;
}
.parties-bulk-actions .contract-btn-link {
  font-size: 12px;
  margin-left: 6px;
}
.parties-bulk-checkcol {
  width: 36px;
  text-align: center;
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.parties-bulk-checkcol input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
}
/* Action bar above the table — appears only when 1+ rows are selected. */
.parties-bulk-actionbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(0, 102, 204, 0.08);
  border: 1px solid rgba(0, 102, 204, 0.25);
  border-radius: 6px;
  flex-wrap: wrap;
}
.parties-bulk-actionbar-count {
  font-weight: 600;
  font-size: 13px;
  color: var(--accent, #0066cc);
  margin-right: 4px;
}
.parties-bulk-actionbar-select,
.parties-bulk-actionbar-input {
  padding: 5px 10px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg-white, #fff);
}
.parties-bulk-actionbar-input { min-width: 180px; }
.parties-bulk-actionbar-select:focus,
.parties-bulk-actionbar-input:focus {
  outline: none;
  border-color: var(--accent, #0066cc);
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
}
.parties-bulk-merge-btn {
  font-size: 13px;
  padding: 5px 14px;
}

/* Merge parties dialog */
.party-merge-body {
  padding: 16px 20px;
  max-height: 60vh;
  overflow-y: auto;
}
.party-merge-explainer {
  font-size: 13px;
  color: var(--text-secondary, #666);
  line-height: 1.5;
  margin: 0 0 14px 0;
}
.party-merge-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.party-merge-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  background: var(--bg-white, #fff);
  cursor: pointer;
}
.party-merge-row:hover { background: var(--bg-hover, #f4f6fa); }
.party-merge-row-primary {
  border-color: var(--accent, #0066cc);
  background: rgba(0, 102, 204, 0.06);
}
.party-merge-row input[type="radio"] {
  margin-top: 4px;
  flex-shrink: 0;
}
.party-merge-row-main {
  flex: 1;
  min-width: 0;
}
.party-merge-row-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}
.party-merge-row-meta {
  font-size: 12px;
  color: var(--text-secondary, #888);
}
.party-merge-row-tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary, #888);
  white-space: nowrap;
}
.party-merge-row-primary .party-merge-row-tag {
  color: var(--accent, #0066cc);
}

/* Archived party visual state — muted background + reduced opacity, mirroring
   how archived contracts look. Applies to list rows, table rows, and the
   typeahead dropdown. */
.party-item-archived {
  background: var(--bg-muted, #f6f7f9) !important;
  opacity: 0.85;
}
.party-item-archived:hover { opacity: 1; }
.parties-bulk-table tbody tr[data-party-id].party-item-archived,
.parties-bulk-table tbody tr.party-item-archived { background: var(--bg-muted, #f6f7f9); }
.party-typeahead-item-archived {
  background: var(--bg-muted, #f4f5f7);
  color: var(--text-secondary, #888);
  font-style: italic;
}
.party-typeahead-item-archived:hover { background: var(--bg-hover, #e9ecef); }
/* Greyscale the icon so the blue-window emoji loses colour entirely on
   archived rows. Pure visual signal of "this is no longer current". */
.party-typeahead-item-archived .party-typeahead-icon {
  filter: grayscale(1);
  opacity: 0.55;
}
.party-typeahead-item-archived .party-typeahead-name {
  color: var(--text-secondary, #888);
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, 0.25);
}
.party-typeahead-item-archived .party-typeahead-sub {
  color: var(--text-muted, #aaa);
}
/* Reusable "ARCHIVED" pill — used in the typeahead dropdown and the bulk
   edit table. Grey palette so it conveys state without stealing visual
   attention from the rest of the row. */
.party-archived-tag,
.party-typeahead-archived-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: var(--bg-muted, #e5e7eb);
  color: var(--text-secondary, #666);
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: middle;
  text-decoration: none;
  font-style: normal;
}

/* Party detail popup (#63 follow-up). Lightweight modal that wraps the
   existing renderPartyExpanded card so the user can pop in / pop out while
   keeping the underlying Parties Table view (sort, scroll position) intact.
   Wider than the form modals because the expanded card has two-column detail
   grids and reverse-lookup chip rows. */
.party-detail-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}
.party-detail-modal-content {
  position: relative;
  width: 100%;
  max-width: 1100px;
  background: var(--bg-card, #fff);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  overflow: hidden;
}
.party-detail-modal-content .contract-expanded {
  border: none;
  margin: 0;
  border-radius: 8px;
}
.party-detail-modal-close {
  position: absolute;
  top: 8px; right: 12px;
  width: 32px; height: 32px;
  border: none; background: transparent;
  font-size: 22px; line-height: 1;
  color: var(--text-secondary, #6b7280);
  cursor: pointer;
  border-radius: 50%;
  z-index: 1;
}
.party-detail-modal-close:hover { background: var(--bg-hover, rgba(0,0,0,0.06)); color: var(--text); }

/* People-linked compact chip layout (#63 follow-up). Replaces the original
   full-width row list which took too much vertical space — each person now
   gets a small clickable card laid out as a flex grid. Up to 5 across on
   wide screens, collapsing to 2 on tablets and 1 on phones. */
.party-people-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.party-people-chip {
  flex: 0 0 calc(20% - 7px);   /* 5 per row on desktop */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  text-align: left;
  background: var(--bg-muted, #f3f4f6);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  overflow: hidden;
}
.party-people-chip:hover { background: var(--bg-hover, rgba(99,102,241,0.08)); border-color: var(--accent, #6366f1); }
.party-people-chip-name { font-weight: 600; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.party-people-chip-meta { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 1100px) { .party-people-chip { flex: 0 0 calc(33.333% - 6px); } }
@media (max-width: 700px)  { .party-people-chip { flex: 0 0 calc(50% - 4px); } }
@media (max-width: 480px)  { .party-people-chip { flex: 0 0 100%; } }

/* Two-group action footer (#63 follow-up). Delete + Archive sit together on
   the left with a healthy gap so they don't crowd, while + Add addendum / Edit
   stay on the right. The parent .contract-expanded-actions is already flex
   with space-between. */
.contract-expanded-actions-left {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* Clickable rows in read-only Parties Table view. Mirrors the Contracts
   table pattern — clicking a row replaces it in-place with the expanded
   card spanning the full width of the table. */
.parties-bulk-row-clickable { cursor: pointer; }
.parties-bulk-row-clickable:hover { background: var(--bg-hover, rgba(99,102,241,0.04)); }
.parties-bulk-row-clickable .parties-bulk-name { font-weight: 600; }
.parties-bulk-expandedrow > td {
  padding: 0 !important;
  background: var(--bg-card, #fff);
}
.parties-bulk-expandedrow .contract-expanded {
  border: 1px solid var(--accent, #6366f1);
  border-radius: 6px;
  margin: 4px 0;
}

/* Owner-company badge (#63). Small dark pill that sits next to the company
   name in the parties list / table to mark "this is your org". Deliberately
   muted so it doesn't fight the type/category badge for attention. */
.party-owner-badge {
  display: inline-block;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: #1f2937;
  color: #fff;
  border-radius: 8px;
  margin-right: 4px;
  vertical-align: middle;
}

/* Reverse-lookup "View all N..." pull-through on a party detail page (#63).
   Sits below the top-5 list, low-key so it reads like a footer link. */
.party-reverse-lookup-more {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 13px;
}

/* Owner-company summary (replaces the contracts top-5 for the owner party
   since "all 269" doesn't make a useful preview). */
.party-owner-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--bg-muted, #f3f4f6);
  border-radius: 6px;
}
.party-owner-summary-text { font-size: 13px; color: var(--text); }

/* ============================================
   POs MODULE (#52)
   ============================================ */

.po-row {
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.po-row .contract-row-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-secondary);
}
.po-cancelled .contract-row-title { text-decoration: line-through; opacity: 0.6; }
.po-amount { font-weight: 600; color: var(--text); }
.po-date { color: var(--text-muted); }
.po-desc-snip { color: var(--text-muted); font-style: italic; }

.po-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.po-status-draft     { background: rgba(120,120,120,0.12); color: var(--text-muted); }
.po-status-issued    { background: var(--accent-light, #e6f7fa); color: var(--accent, #05a1c0); }
.po-status-fulfilled { background: rgba(91,163,49,0.14);  color: var(--success, #5ba331); }
.po-status-cancelled { background: rgba(169,46,66,0.12);  color: var(--danger, #a92e42); }

.po-expanded { padding: 14px 16px; }

.po-form {
  display: flex; flex-direction: column; gap: 14px;
  padding: 4px 0 6px;
}
.po-preview-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 12px;
  background: var(--accent-light, #e6f7fa);
  border-radius: 6px;
  border-left: 3px solid var(--accent, #05a1c0);
}
.po-preview-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--accent, #05a1c0);
  font-weight: 700;
}
.po-preview-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
.po-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 14px;
}
.po-form-field { display: flex; flex-direction: column; gap: 4px; }
.po-form-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.2px;
}
.po-form-field input,
.po-form-field select {
  padding: 6px 8px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 4px;
  background: var(--bg-white, #fff);
  font-size: 13px;
  color: var(--text);
}
.po-form-field input:focus,
.po-form-field select:focus {
  outline: none;
  border-color: var(--accent, #05a1c0);
  box-shadow: 0 0 0 2px rgba(5,161,192,0.15);
}
.po-form-row-wide { display: flex; flex-direction: column; gap: 4px; }
.po-form-row-wide label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.2px;
}
.po-form-row-wide textarea {
  padding: 6px 8px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 4px;
  background: var(--bg-white, #fff);
  font-size: 13px;
  color: var(--text);
  resize: vertical;
  min-height: 48px;
}
.po-form-actions {
  display: flex; gap: 10px; align-items: center;
  padding-top: 6px;
  border-top: 1px solid var(--border-light, #eef0f3);
}

.po-add-form-wrap {
  background: var(--bg-white, #fff);
  border: 2px dashed var(--accent, #05a1c0);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.po-add-form-header {
  font-size: 14px; font-weight: 700;
  color: var(--accent, #05a1c0);
  margin-bottom: 8px;
}

/* Table view + bulk edit (#95). 2026-05-28 — `overflow-x: auto` removed.
   It was trapping `position: sticky` on the OAA_Table header cells: the
   sticky anchored to this host's top, but when the user scrolled the
   PAGE the host moved with it, so the header never pinned to the
   viewport. With overflow visible, sticky now anchors to the body /
   page-scroll, exactly as intended. (If a very narrow viewport ever
   needs horizontal scroll back, do it via overflow-x: clip + media
   query instead — `clip` doesn't create a sticky scroll container.) */
.po-table-host {
  margin-top: 8px;
}
/* OAA_Table.Editable mount point inside the host (#158, 2026-05-27). */
.po-table-host-inner {
  display: block;
}
/* Expanded-PO panel that floats above the table when a row is opened in
   Table view. Card view still expands inline via renderPoExpanded; the
   wider PO form doesn't fit inline in table mode, so it docks above. */
.po-table-expanded-panel {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--bg-card, #fff);
  padding: 8px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.po-bulk-table {
  min-width: 1400px; /* forces horizontal scroll on narrow screens */
  font-size: 12px;
}
.po-bulk-table thead th {
  white-space: nowrap;
}
.po-bulk-table .po-seq-cell {
  width: 50px;
  text-align: right;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.po-bulk-table .po-num-cell {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.parties-bulk-input-num { text-align: right; font-variant-numeric: tabular-nums; }
.parties-bulk-num { text-align: right; font-variant-numeric: tabular-nums; }

/* PO number display — larger, monospace, with a copy-to-clipboard button
   that fades in after a 1-second hover (CSS transition-delay handles the
   timing — no JS timer needed). */
.po-number-display {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.po-number-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", Consolas, monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--text);
}
.po-copy-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  /* Show the button only after the user has been hovering for 1 second.
     Hide instantly when the cursor leaves. */
  transition-delay: 0s;
  border: 1px solid var(--accent, #05a1c0);
  background: var(--accent-light, #e6f7fa);
  color: var(--accent, #05a1c0);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 8px;
  border-radius: 10px;
  cursor: pointer;
}
.po-number-display:hover .po-copy-btn {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 1s; /* delay only on show, not on hide */
}
.po-copy-btn:hover {
  background: var(--accent, #05a1c0);
  color: #fff;
}
/* In the table cell the PO number takes the row's font-size by default;
   force the larger size + monospace there too for consistency. */
.po-bulk-table .po-num-cell .po-number-text {
  font-size: 13px; /* table is denser overall so slightly smaller, still bold/mono */
}

/* Prominent SharePoint Browse button on the contract form (#98 A). The
   original button was hard to spot — restyled to a solid brand-blue pill
   with a folder icon so users can find it at a glance. */
.contract-form-doc-row-prominent {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.contract-form-doc-row-prominent #cf_doc {
  flex: 1;
  min-width: 0;
}
.contract-btn-browse-sp {
  background: var(--accent, #05a1c0) !important;
  color: #fff !important;
  border-color: var(--accent, #05a1c0) !important;
  font-weight: 600;
  white-space: nowrap;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(5, 161, 192, 0.25);
  transition: background 0.12s, transform 0.08s, box-shadow 0.12s;
}
.contract-btn-browse-sp:hover {
  background: var(--accent-hover, #0489a4) !important;
  border-color: var(--accent-hover, #0489a4) !important;
  box-shadow: 0 4px 10px rgba(5, 161, 192, 0.35);
  transform: translateY(-1px);
}
.contract-btn-browse-sp:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(5, 161, 192, 0.25);
}

/* ============================================
   CHIP-STYLE INPUT (#94)
   Reusable tag input — used for Party aliases. The wrapper looks like a
   regular text input but contains pill chips followed by an editable
   text field. Comma/Enter commits the typed text as a new chip.
   ============================================ */
.chip-input-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  background: var(--bg-white, #fff);
  cursor: text;
  min-height: 36px;
}
.chip-input-wrap:focus-within {
  border-color: var(--accent, #05a1c0);
  box-shadow: 0 0 0 2px rgba(5,161,192,0.15);
}
.chip-input-chips {
  display: contents; /* let chips participate in the wrap's flex flow */
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 10px;
  background: var(--accent-light, #e6f7fa);
  color: var(--accent, #05a1c0);
  border: 1px solid var(--accent, #05a1c0);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  max-width: 100%;
  transition: background 0.2s, transform 0.12s;
}
.chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip-remove {
  border: none;
  background: transparent;
  color: var(--accent, #05a1c0);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 6px;
  border-radius: 50%;
}
.chip-remove:hover {
  background: var(--accent, #05a1c0);
  color: #fff;
}
.chip-dup-flash {
  background: var(--warning, #dc6012);
  color: #fff;
  border-color: var(--warning, #dc6012);
  transform: scale(1.08);
}
.chip-dup-flash .chip-remove { color: #fff; }
.chip-input-typing {
  flex: 1 1 140px;
  min-width: 120px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  padding: 2px 4px;
  color: var(--text);
}

/* Inline confirmation line under the Approver code (initials) field —
   shows "Matched: <Name>" when initials uniquely identify one staff
   member, or an ambiguity hint when multiple share the same initials (#96). */
.po-match-line {
  font-size: 11px;
  color: var(--success, #5ba331);
  margin-top: 4px;
  min-height: 14px;
}
.po-match-line .po-match-ambiguous {
  color: var(--warning, #dc6012);
}

/* ============================================
   SHARED IN-APP DIALOGS — showConfirm / showAlert
   Replaces window.confirm() / window.alert() with a centered, brand-styled
   modal so dialogs match the rest of OAA's design language.
   ============================================ */
.oaa-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 21, 47, 0.5); /* navy with alpha */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: oaa-dialog-fade 0.15s ease-out;
}
@keyframes oaa-dialog-fade { from { opacity: 0; } to { opacity: 1; } }
.oaa-dialog {
  background: var(--bg-white, #fff);
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
  min-width: 360px;
  max-width: 520px;
  border-top: 4px solid var(--accent, #05a1c0);
  animation: oaa-dialog-pop 0.18s ease-out;
}
@keyframes oaa-dialog-pop {
  from { opacity: 0; transform: translateY(-12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.oaa-dialog-warn   { border-top-color: var(--warning, #dc6012); }
.oaa-dialog-danger { border-top-color: var(--danger, #a92e42); }
.oaa-dialog-title {
  padding: 16px 20px 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.oaa-dialog-body {
  padding: 0 20px 20px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}
.oaa-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border-light, #eef0f3);
}

/* ============================================
   PO ADMIN PAGE (#100)
   Tab bar, toolbar, and inline-edit table for the 4 reference tables
   (teams / projects / studies / accountingKeys).
   ============================================ */
.po-admin-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--border, #e5e7eb);
  margin-bottom: 12px;
}
.po-admin-tab {
  background: transparent;
  border: none;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px; /* overlap parent's border */
  transition: color 0.12s, border-color 0.12s;
}
.po-admin-tab:hover { color: var(--text); }
.po-admin-tab.active {
  color: var(--accent, #05a1c0);
  border-bottom-color: var(--accent, #05a1c0);
}
.po-admin-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: var(--bg-muted, #f3f4f6);
  border-radius: 6px;
}
.po-admin-toolbar .contract-search {
  flex: 1;
  min-width: 200px;
}
.po-admin-content { overflow-x: auto; }
.po-admin-table { width: 100%; min-width: 700px; font-size: 13px; }
.po-admin-table .po-admin-actions-col { width: 1%; }
.po-admin-table .parties-bulk-num { text-align: right; }
/* Legacy: inactive-row dim for the pre-#138 hand-rolled table. OAA_Table
   doesn't use these — kept only in case other CSS references survive. */
.po-admin-row-inactive { opacity: 0.5; }
.po-admin-row-inactive:hover { opacity: 0.85; }

/* =============================================================
 * PO admin +Add panel (#138)
 * =============================================================
 * Always-visible inline form for adding new items. Sits above the
 * OAA_Table host so cell-edit re-renders don't disrupt in-flight inputs.
 */
.po-admin-add-panel {
  margin: 8px 0 16px;
  padding: 12px 14px;
  background: #E6F1FB;
  border: 1px solid #185FA5;
  border-radius: var(--radius-sm, 4px);
}
.po-admin-add-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.po-admin-add-input {
  flex: 1 1 0;
  min-width: 140px;
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: var(--radius-sm, 4px);
  background: #fff;
}
.po-admin-add-input-code { max-width: 180px; flex: 0 0 180px; }
.po-admin-add-input-vat  { max-width: 100px; flex: 0 0 100px; }
.po-admin-add-row-keys .po-admin-add-input { font-size: 13px; }
.po-admin-add-row .oaa-btn { flex: 0 0 auto; }

/* The OAA_Table host (#poAdminTableHost) inherits default OAA_Table
   styling — no extra rules needed. */

/* =============================================================
 * FX rates editor (#139)
 * =============================================================
 * Mirrors the PO admin layout: toolbar + +Add panel + OAA_Table host.
 */
.fx-rates-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.fx-rates-content { padding: 12px 16px 32px; }
.fx-rates-add-panel {
  margin: 8px 0 16px;
  padding: 12px 14px;
  background: #E6F1FB;
  border: 1px solid #185FA5;
  border-radius: var(--radius-sm, 4px);
}
.fx-rates-add-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.fx-add-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #0C447C;
  font-weight: 600;
}
.fx-add-input {
  font-size: 14px;
  padding: 6px 10px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: var(--radius-sm, 4px);
  background: #fff;
  min-width: 140px;
}
.fx-add-input-month { width: 160px; }
.fx-add-input-rate  { width: 160px; }
.fx-add-hint {
  flex: 1 1 100%;
  font-size: 12px;
  color: #185FA5;
  margin-top: 4px;
}

/* "Unsaved changes" cue on the PO Save Changes button — appears when the
   edit draft has any pending modifications. Subtle warm halo so the user
   sees the form is dirty without it being alarming. */
.po-save-dirty {
  box-shadow: 0 0 0 2px var(--warning, #dc6012);
  animation: po-save-dirty-pulse 2s ease-in-out infinite;
}
@keyframes po-save-dirty-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--warning, #dc6012); }
  50%      { box-shadow: 0 0 0 4px rgba(220, 96, 18, 0.4); }
}

/* Linked-contract indicator icon — shown next to the PO number in both the
   card list and the table view when po.contractId is set. Small chain link
   glyph in muted accent so it's noticeable but doesn't dominate. */
.po-has-contract {
  display: inline-block;
  margin-left: 6px;
  color: var(--accent, #05a1c0);
  opacity: 0.7;
  font-size: 13px;
  cursor: help;
}
.po-has-contract:hover { opacity: 1; }

/* "Linked to: <contract title>" preview shown under the Contract dropdown
   when a contract is currently selected. Replaces the "+ New contract"
   button so the two controls don't compete. Looks like a quiet link
   below the field — clicking it jumps to the contract in the Contracts
   view. */
.po-contract-preview {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 2px 8px;
  background: var(--accent-light, #e6f7fa);
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 11px;
}
.po-contract-preview-icon {
  color: var(--accent, #05a1c0);
  font-size: 12px;
}
.po-contract-preview-link {
  color: var(--accent, #05a1c0);
  font-weight: 600;
  text-decoration: none;
}
.po-contract-preview-link:hover {
  text-decoration: underline;
}

/* "+ New contract for this vendor" inline link under the Contract dropdown
   in the PO form. Sized small so it doesn't overwhelm the field. */
.po-new-contract-link {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  background: transparent;
  border: 1px dashed var(--accent, #05a1c0);
  color: var(--accent, #05a1c0);
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  font-weight: 600;
}
.po-new-contract-link:hover {
  background: var(--accent-light, #e6f7fa);
}

/* Active deep-link filter chip (#63). Sits in the filter row of Contracts /
   Parties when a "View all for X" was clicked. The × clears just this filter. */
.list-filter-chips { display: inline-flex; gap: 6px; align-items: center; }
.list-filter-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 10px;
  font-size: 12px;
  background: #eef2ff;
  color: #312e81;
  border: 1px solid #c7d2fe;
  border-radius: 12px;
}
.list-filter-chip-remove {
  border: none; background: transparent; cursor: pointer;
  font-size: 14px; line-height: 1;
  color: #312e81; padding: 0 6px;
}
.list-filter-chip-remove:hover { color: #1e1b4b; }

/* Role badge in the sidebar identity block (#60e). Small chip below the
   user name + email so the user immediately knows what tier they're on. */
.sidebar-role-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 10px;
  background: var(--bg-muted, #e5e7eb);
  color: var(--text-secondary, #4b5563);
}
.sidebar-role-badge-admin        { background: #1f2937; color: #fff; }
.sidebar-role-badge-office-admin { background: #fde68a; color: #78350f; }
.sidebar-role-badge-hr           { background: #c7d2fe; color: #312e81; }
.sidebar-role-badge-standard     { background: #e5e7eb; color: #4b5563; }

/* Role-aware UI hiding (#60e). The body element gets a class .role-admin
   / .role-office-admin / .role-hr / .role-standard from app.js once the
   profile loads.
   - .role-restrict-edit   → hidden from standard role (everyone else sees)
   - .role-restrict-delete → hidden from standard + hr (admin and
     office-admin both see). office-admin needs delete on contracts /
     parties / POs to actually do her day-to-day cleanup work; the
     backend still enforces per-module gates so the UI is just keeping
     the right buttons visible to the right people. */
body.role-standard .role-restrict-edit { display: none !important; }
body.role-standard .role-restrict-delete,
body.role-hr       .role-restrict-delete { display: none !important; }

/* HR module page (#59c). Two-pane layout: employee list left, timeline right.
   Single-pane stack on narrow screens. */
.hr-container { max-width: 1400px; }
.hr-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) { .hr-grid { grid-template-columns: 1fr; } }

/* Right pane wraps timeline + chart + ESOP so they stack vertically inside
   the second grid column (instead of auto-flowing into the narrow left col).
   No gap — child sections already carry their own margin-top + top border. */
.hr-rightpane { display: flex; flex-direction: column; min-width: 0; }

/* Employee list (left pane) */
.hr-employee-list { background: var(--bg-card, #fff); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.hr-employee-list-header { padding: 10px 14px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
.hr-employee-list-count { font-weight: 400; }
.hr-employee-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border-light, var(--border)); cursor: pointer; transition: background 0.12s; }
.hr-employee-row:last-child { border-bottom: none; }
.hr-employee-row:hover { background: var(--bg-hover, rgba(99,102,241,0.04)); }
.hr-employee-row-selected { background: var(--bg-muted, #eef2ff); }
.hr-employee-row-selected:hover { background: var(--bg-muted, #eef2ff); }
.hr-employee-row-name { font-weight: 600; font-size: 13px; color: var(--text); }
.hr-employee-row-meta { font-size: 11px; color: var(--text-secondary); }

/* Timeline (right pane) */
/* .hr-timeline / .hr-timeline-header / .hr-timeline-title removed 2026-05-07
   when the employee header was split off from the History section. The card +
   history-section pair now uses .hr-employee-card / .hr-employee-header /
   .hr-employee-title (defined further down). The leaf classes below are
   shared by both old and new layouts. */
.hr-timeline-name { font-size: 18px; font-weight: 700; color: var(--text); }
.hr-timeline-subline { font-size: 13px; color: var(--text-secondary); }
.hr-timeline-role { font-size: 13px; color: var(--text-secondary); }
.hr-timeline-country { font-size: 13px; color: var(--text-secondary); }
.hr-timeline-country-missing { color: #854d0e; background: #fef3c7; padding: 1px 8px; border-radius: 3px; font-weight: 500; }
.hr-timeline-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.hr-timeline-events { display: flex; flex-direction: column; gap: 10px; }

/* =============================================================
 * HR Salaries scenario tab (#148, 2026-05-25)
 * =============================================================
 * Toolbar (currency + scenario picker + actions) → OAA_Table.Editable
 * → totals block. Toolbar uses a wrapping flex row so it stays readable
 * on narrow viewports.
 */
.hr-salaries-view {
  padding: 0 8px;
}
.hr-salaries-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  padding: 12px 14px;
  margin: 8px 0 16px;
  background: #E6F1FB;
  border: 1px solid #185FA5;
  border-radius: var(--radius-sm, 4px);
}
.hr-sal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #0C447C;
  font-weight: 600;
}
.hr-sal-field-grow { flex: 1 1 200px; min-width: 180px; }
.hr-sal-field-toggle {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--text, #111);
  padding-bottom: 6px;
}
.hr-sal-field-label { display: block; }
.hr-sal-input {
  font-size: 14px;
  padding: 6px 10px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: var(--radius-sm, 4px);
  background: #fff;
  min-width: 140px;
}
.hr-sal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}
.hr-salaries-host {
  margin-bottom: 16px;
}
.hr-salaries-totals {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: #f9fafb;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-sm, 4px);
}
/* Each strip is one metric row: label + current/scenario/delta blocks.
   On narrow viewports the strip wraps so the blocks stack below the label. */
.hr-sal-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}
.hr-sal-strip-label {
  flex: 0 0 200px;
  align-self: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary, #00152f);
  padding: 0 4px;
}
.hr-sal-total-block {
  flex: 1 1 200px;
  min-width: 180px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-sm, 4px);
}
.hr-sal-total-label {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  margin-bottom: 4px;
}
.hr-sal-total-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--primary, #00152f);
}
.hr-sal-total-pct {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
}
.hr-sal-total-block.hr-sal-delta-up   .hr-sal-total-value { color: #c0392b; }   /* over budget */
.hr-sal-total-block.hr-sal-delta-down .hr-sal-total-value { color: #4b8b3b; }   /* under budget */
.hr-sal-row-delta {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 11px;
  border-radius: 8px;
  font-weight: 600;
}
.hr-sal-row-delta.hr-sal-delta-up   { background: rgba(192, 57, 43, 0.12); color: #c0392b; }
.hr-sal-row-delta.hr-sal-delta-down { background: rgba(75, 139, 59, 0.12); color: #4b8b3b; }

/* Modified-cell highlighting (#150). The wrapper span gets one of:
   - .hr-sal-cell-live      → matches live data (no scenario override)
   - .hr-sal-cell-modified  → scenario value differs from live (bright amber
     tint so it pops in a long table). A small "(was X)" hint follows it
     so the user remembers the original value at a glance. */
.hr-sal-cell {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 3px;
}
.hr-sal-cell-live {
  color: var(--text, #111);
}
.hr-sal-cell-modified {
  background: #FFF4D6;        /* warm amber tint */
  color: #7c5500;
  font-weight: 600;
  border: 1px solid #F0C150;
}
.hr-sal-was, .hr-sal-was-empty {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted, #6b7280);
  font-weight: 400;
}
/* #157: Calamari source marker on the unused-holiday-days cell. The dot is
   a tiny green pip placed inline with the number; hovering the cell shows
   the matched absence-type name (e.g. "Calamari: [ISL] Vacation leave"). */
.hr-sal-source-calamari {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  cursor: help;
}
.hr-sal-source-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;        /* emerald — "live data, recently pulled" */
  vertical-align: middle;
}

/* Edit-mode hint: when the table is in Bulk-edit mode, editable cells
   become inputs (the wrapper span isn't used). Lightly tint the editable
   columns' cells so the user knows where they can click. The Bulk-edit
   toggle adds .oaa-table-bulk-on to OAA_Table's root — we scope via that. */
.hr-salaries-host .oaa-table-bulk-on .oaa-table-cell-editor {
  background: #F5FAFF;
  border-color: #185FA5;
}
/* In Bulk-edit mode, inputs that hold a modified scenario value (differ
   from live) get the same amber treatment as the read-mode wrapped cell
   so the visual story is consistent across modes (#154). */
.oaa-table-cell-editor.hr-sal-editor-modified {
  background: #FFF4D6 !important;
  border-color: #F0C150 !important;
  color: #7c5500;
  font-weight: 600;
}
.hr-timeline-empty { padding: 40px 20px; text-align: center; color: var(--text-secondary); background: var(--bg-card, #fff); border: 1px dashed var(--border); border-radius: 6px; }

/* Individual event row */
.hr-event-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 14px; align-items: start; padding: 12px; background: var(--bg-muted, #f3f4f6); border-radius: 6px; }
.hr-event-date-from { font-weight: 600; font-size: 13px; color: var(--text); }
.hr-event-date-reason { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.hr-event-summary { font-size: 13px; color: var(--text); line-height: 1.5; }
.hr-event-notes { font-size: 12px; color: var(--text-secondary); margin-top: 6px; line-height: 1.5; }
.hr-event-linked { font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
.hr-event-linked .contract-btn-link { font-size: 12px; }
.hr-event-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.hr-exit-tag { display: inline-block; padding: 1px 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; background: #fecaca; color: #991b1b; border-radius: 3px; text-transform: uppercase; }

/* HR header actions — "View R&D report" button sits top-right of the page (#73). */
.hr-header-actions { display: flex; gap: 8px; align-items: center; }

/* HR top-level tabs — Timeline / Graphs (#81). Underline-style. */
.hr-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.hr-tab {
  background: transparent;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* overlap the parent border for the active underline */
  transition: color 0.15s, border-color 0.15s;
}
.hr-tab:hover { color: var(--text); }
.hr-tab-active {
  color: #1e40af;
  border-bottom-color: #1e40af;
}

/* "Show former employees" toggle — sits on the right side of the HR tab bar
   so it's visible from both Timeline and Graphs. (2026-05-11 HR cleanup.) */
.hr-show-former {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px 10px;
  user-select: none;
}
.hr-show-former input[type="checkbox"] { margin: 0; cursor: pointer; }
.hr-show-former:hover { color: var(--text); }

/* "Include former employees" tick on cumulative graph controls. */
.hr-graphs-include-former {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.hr-graphs-include-former input[type="checkbox"] { margin: 0; cursor: pointer; }

/* FORMER badge on employee rows + chips when "Show former" is on. Muted
   amber so it reads as "this person used to be here" rather than alarming. */
.hr-former-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #92400e;
  background: #fef3c7;
}
.hr-employee-row-former,
.hr-graphs-emp-row-former { opacity: 0.7; }
.hr-chip-emp.hr-chip-emp-former { font-style: italic; opacity: 0.85; }

/* Graphs view — multi-select employee list on the left + chart area right. */
.hr-graphs-list {
  padding: 12px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  height: fit-content;
  max-height: 600px;
  overflow-y: auto;
}
.hr-graphs-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.hr-graphs-list-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.hr-graphs-list-actions .contract-btn-link {
  font-size: 12px;
}
.hr-graphs-emp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s;
}
.hr-graphs-emp-row:hover { background: var(--bg-muted, #f3f4f6); }
.hr-graphs-emp-row input[type="checkbox"] { margin: 0; flex-shrink: 0; }
.hr-graphs-emp-name { font-size: 13px; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-graphs-emp-meta { font-size: 11px; color: var(--text-secondary); flex-shrink: 0; }

.hr-graphs-main {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.hr-graphs-controls {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* FX basis toggle — pill segmented control. */
.hr-fx-toggle {
  display: inline-flex;
  background: var(--bg-muted, #f3f4f6);
  border-radius: 6px;
  padding: 2px;
}
.hr-fx-toggle-btn {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.hr-fx-toggle-btn:hover { color: var(--text); }
.hr-fx-toggle-active {
  background: var(--bg-card, #fff);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Graphs chip rows (2026-05-07 — multi-select metric & employee chips).
   Lives above the chart, replaces the old single-metric dropdown. */
.hr-graphs-chip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;
  padding: 6px 0;
}
.hr-graphs-chip-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 6px;
}
.hr-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card, #fff);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.hr-chip:hover { border-color: var(--accent); color: var(--text); }
.hr-chip-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.hr-chip-active:hover {
  background: var(--accent);
  color: #fff;
}
.hr-chip-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.hr-chip-disabled:hover {
  border-color: var(--border);
  color: var(--text-secondary);
}
.hr-graphs-emp-chip-row .hr-chip-emp { font-size: 12px; }

/* All/Clear pill on the employee chip row. Green when in "All" state so it
   reads as the affordance for "everything selected — click to clear"; outline
   otherwise to invite "click to select all". Sits with the same chip
   geometry as the employee/metric chips so the row stays calm. */
.hr-chip-all {
  margin-left: 4px;
  border-color: #16a34a;
  color: #15803d;
  background: rgba(22, 163, 74, 0.08);
  font-weight: 600;
}
.hr-chip-all:hover {
  background: rgba(22, 163, 74, 0.16);
  border-color: #15803d;
  color: #14532d;
}
.hr-chip-all-cleared {
  /* "Clear" state — solid green, more prominent because it's the destructive
     action (will deselect everything) and we want the user to register it. */
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.hr-chip-all-cleared:hover {
  background: #15803d;
  border-color: #15803d;
  color: #fff;
}

/* Per-employee toggle button shown as locked when Headcount (or any other
   cumulativeOnly metric) is in the active set — clicks are no-op'd in the
   handler, this just visually signals it. */
.hr-fx-toggle-btn.hr-fx-toggle-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Visual board / employee chart (#71). Sits between timeline and ESOP. */
.hr-chart-section {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.hr-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.hr-chart-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.hr-chart-ccy-label {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.hr-chart-ccy-select {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card, #fff);
}
.hr-chart-canvas {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248, 250, 252, 1) 100%);
  border-radius: 8px;
  padding: 4px 0;
}

/* Section collapse — chevron rotates to indicate state, body hides. Matches
   the system pattern used everywhere else in OAA (Contracts, Tasks, NA,
   Inbox). No bespoke styling. (#71 follow-up; 2026-05-07 reverted the
   short-lived OPEN/dashed treatment after it felt off-pattern.) */
.hr-section-caret {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  color: var(--text-secondary);
  margin-right: 6px;
  transition: transform 0.15s, color 0.15s;
}
.hr-section-collapsed .hr-section-caret { transform: rotate(-90deg); }
.hr-section-collapsed .hr-section-body { display: none; }
/* When the chart section is collapsed, hide the currency picker too — it has
   no meaning without the chart visible. */
.hr-section-collapsed .hr-chart-ccy-label { display: none; }

/* Toggle targets — give the heading a button-like hover so it reads as
   clickable. Selector matches by data-action so it picks up the History h4,
   chart title, and ESOP h4 regardless of their own classes. */
[data-action="hr-section-toggle"] {
  cursor: pointer;
  user-select: none;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 6px;
  transition: background 0.15s;
}
[data-action="hr-section-toggle"]:hover {
  background: var(--bg);
}
[data-action="hr-section-toggle"]:hover .hr-section-caret {
  color: var(--text);
}
[data-action="hr-section-toggle"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Employee header card — pure information, no longer a click target. The
   collapsible "History" section sits below it. */
.hr-employee-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
}
.hr-employee-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hr-employee-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* History section — the events list under the employee card. Header is a
   standard h4 with the section chevron + title + count chip. */
.hr-history-section {
  margin-top: 16px;
}
.hr-section-h {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* "Employees (N)" header — now a button that toggles company-wide view. */
.hr-employee-list-header-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hr-employee-list-header-btn:hover {
  background: var(--bg-muted, #f3f4f6);
  color: var(--text);
}
.hr-list-header-active {
  background: #dbeafe !important;
  color: #1e40af !important;
  border-color: #93c5fd !important;
}
.hr-list-header-mode {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  opacity: 0.85;
}

/* Company-view right-pane layout. Mirrors employee-view spacing. */
.hr-company-view { padding: 4px 4px; }
.hr-company-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.hr-company-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.hr-company-filters {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-secondary);
}
.hr-company-filters label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hr-company-filters input[type="month"],
.hr-company-filters select {
  padding: 4px 8px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card, #fff);
}
/* Month + Year selects sit side-by-side per "From"/"To" label, with a thin
   gap. Native <input type="month"> was replaced because its picker is bad
   for jumping across years (#71 follow-up). */
.hr-company-month, .hr-company-year { margin-left: 2px; }
.hr-company-month { min-width: 100px; }
.hr-company-year { min-width: 70px; }

/* ESOP / equity section on the HR view (#76). Sits below the timeline. */
.hr-esop-section { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.hr-esop-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.hr-esop-header h4 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.hr-esop-summary { font-size: 13px; color: var(--text-secondary); }
.hr-esop-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hr-esop-table th, .hr-esop-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.hr-esop-table thead th { background: var(--bg-muted, #f3f4f6); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.hr-esop-table .rd-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hr-esop-cliff { display: inline-block; padding: 1px 6px; font-size: 10px; background: #fed7aa; color: #9a3412; border-radius: 3px; }
.hr-esop-note { margin-top: 8px; font-size: 11px; }

/* HR event modal — wider than the base 720px because the form has 11 fields
   (employee, date, reason, position, salary, currency, bonus, FTE, R&D %,
   linked contract, notes) plus an exit checkbox. The base width crams them. */
.hr-event-modal { max-width: 920px; }

/* R&D report modal (#73) — table, controls, warning chips. Print-friendly:
   we don't restyle anything for @media print since the modal content already
   reads fine when printed (rules of @media print are deferred to follow-up). */
.rd-report-controls { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.rd-report-controls label { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text-secondary); }
.rd-report-controls select { padding: 4px 8px; font-size: 13px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card, #fff); }
.rd-report-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rd-report-table th, .rd-report-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.rd-report-table thead th { background: var(--bg-muted, #f3f4f6); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.rd-report-table tfoot th { background: var(--bg-muted, #f3f4f6); font-weight: 700; }
.rd-report-table .rd-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-report-table tbody tr:hover { background: var(--bg-muted, #f8fafc); }
.rd-report-notes { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.rd-warn { display: inline-block; margin-right: 4px; padding: 1px 6px; font-size: 11px; background: #fef3c7; color: #854d0e; border-radius: 3px; }
.rd-warn-block { padding: 8px 12px; font-size: 12px; background: #fef3c7; color: #854d0e; border-radius: 4px; }

/* R&D-only filter toggle on the comp report controls (#84). */
.rd-report-filter { cursor: pointer; user-select: none; }
.rd-report-filter input[type="checkbox"] { margin: 0; cursor: pointer; }

/* R&D workforce summary block (#84) — sits above the per-person table.
   Hagstofuna-aligned headline numbers in a 4-card row. */
.rd-workforce-summary {
  margin-bottom: 18px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.04) 0%, rgba(37, 99, 235, 0.01) 100%);
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 8px;
}
.rd-workforce-summary-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rd-workforce-summary-tag {
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  background: #2563eb;
  color: #fff;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
.rd-workforce-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.rd-workforce-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
}
.rd-workforce-card-primary {
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.06);
}
.rd-workforce-card-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.rd-workforce-card-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.rd-workforce-card-primary .rd-workforce-card-value { color: #1e40af; }
.rd-workforce-card-sub {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  margin-top: 3px;
}

/* Review calendar (#77) — status pills + summary chips. */
.rev-summary { display: flex; gap: 8px; flex-wrap: wrap; }
.rev-summary-pill { padding: 4px 10px; font-size: 12px; font-weight: 600; border-radius: 4px; }
.rev-status { display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.04em; }
.rev-status-overdue { background: #fecaca; color: #991b1b; }
.rev-status-due     { background: #fed7aa; color: #9a3412; }
.rev-status-ok      { background: #d1fae5; color: #065f46; }
.rev-status-none    { background: #e5e7eb; color: #374151; }

/* User Settings admin page (#60d). Two stacked sections:
   - Users table with name+email | role dropdown | linked party | last sign-in
   - C-suite parties list with remove-tag buttons */
.user-settings-container { max-width: 1100px; }
.us-section { margin-bottom: 28px; padding: 16px 18px; background: var(--bg-card, #fff); border: 1px solid var(--border); border-radius: 6px; }
.us-section-title { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.us-section-help { font-size: 12px; color: var(--text-secondary); margin: 0 0 14px; }
.us-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.us-table thead th {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border);
  font-weight: 600; color: var(--text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
}
.us-table tbody td { padding: 10px; border-bottom: 1px solid var(--border-light, var(--border)); vertical-align: top; }
.us-table tbody tr:hover { background: var(--bg-hover, rgba(0,0,0,0.02)); }
.us-name { font-weight: 600; }
.us-email { font-size: 12px; color: var(--text-secondary); }
.us-role-select { padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; background: #fff; }
.us-role-select:disabled { opacity: 0.6; cursor: not-allowed; }
.us-csuite-list { list-style: none; padding: 0; margin: 0; }
.us-csuite-list li { padding: 6px 0; display: flex; align-items: center; gap: 10px; }
.contract-btn-tiny { font-size: 11px; padding: 2px 8px; }
/* Role definitions reference block (#66c) — one row per role with its badge
   and a one-line plain-English description of what the role grants. */
.us-role-def { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border-light, var(--border)); font-size: 13px; }
.us-role-def:last-child { border-bottom: none; }
.us-role-def .sidebar-role-badge { flex-shrink: 0; min-width: 90px; text-align: center; }
.us-role-def-text { color: var(--text-secondary); line-height: 1.5; }

/* "X / Y parties" / "X / Y contracts" count badge in the filter row. Right-aligned
   so it floats to the end of the filter line. Shared by parties and contracts views. */
.party-count-badge,
.list-count-badge {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-secondary, #888);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Bulk-edit sortable headers — click to sort, arrow indicator on active col. */
.parties-bulk-sortable {
  cursor: pointer;
  user-select: none;
}
.parties-bulk-sortable:hover {
  color: var(--accent, #0066cc);
}
.parties-bulk-sort-active {
  color: var(--accent, #0066cc);
}

/* Active / expired status badge in the Refs column of the bulk table.
   Green = at least one live contract (= keep the party). Grey = contracts
   exist but none active (= candidate to archive). */
.party-ref-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.party-ref-badge-active {
  background: rgba(40, 167, 69, 0.15);
  color: var(--success, #28a745);
}
.party-ref-badge-expired {
  background: var(--bg-muted, #f6f7f9);
  color: var(--text-secondary, #888);
}

/* --------------------------------------------------------------
   Contracts tabular view (#57) — view-only spreadsheet of contracts.
   Same group + sort logic as the card view but rendered as <table>.
   Click column header to sort. Click row to expand inline.
   -------------------------------------------------------------- */
.contracts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--bg-white, #fff);
}
.contracts-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  /* #86 polish 2026-05-28 — stronger header distinction. Navy text on a
     slate band reads decisively above the alternating data rows. */
  color: var(--brand-navy);
  padding: 10px 12px;
  border-bottom: 2px solid var(--border, #e5e7eb);
  background: var(--bg-muted, #f9fafb);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
.contracts-table-sortable {
  cursor: pointer;
  user-select: none;
}
.contracts-table-sortable:hover { color: var(--accent, #0066cc); }
.contracts-table-sort-active { color: var(--accent, #0066cc); }

.contracts-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light, #eef0f3);
  vertical-align: middle;
}
.contracts-table tbody tr:nth-child(even) {
  background: var(--bg-muted, #fafbfc);
}
.contracts-table-row { cursor: pointer; }
.contracts-table-row:hover { background: var(--bg-hover, #f4f6fa) !important; }
.contracts-table-row.contract-item-archived,
.contracts-table-row.contract-item-superseded { opacity: 0.85; }

.contracts-table-grouprow td {
  background: var(--bg-muted, #f0f2f5);
  font-weight: 600;
  font-size: 12px;
  color: var(--text-secondary, #555);
  cursor: pointer;
  padding: 8px 12px;
}
.contracts-table-grouprow:hover td { background: var(--bg-hover, #e9ecef); }
.contracts-table-grouprow .contract-group-chevron {
  display: inline-block;
  margin-right: 6px;
  font-size: 9px;
  transition: transform 0.15s;
}
.contracts-table-grouprow .contract-group-chevron.is-collapsed {
  transform: rotate(-90deg);
}
.contracts-table-grouprow .contract-group-count {
  margin-left: 8px;
  color: var(--text-muted, #999);
  font-weight: 400;
}

.contracts-table-title {
  font-weight: 500;
  color: var(--text-primary, #222);
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contracts-table-counterparty,
.contracts-table-owner {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contracts-table-signed,
.contracts-table-expiry {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Inline expanded view inside the table — full-width cell hosting the
   normal renderExpandedContract output. Reset the cell's padding so the
   expanded card gets its own breathing room. */
.contracts-table-expandedrow > td {
  padding: 0;
  background: transparent;
}
.contracts-table-expandedrow > td > .contract-expanded {
  margin: 4px 0;
}
.filter-btn.active {
  background: var(--accent, #0066cc);
  color: white;
  border-color: var(--accent, #0066cc);
}

/* Party typeahead — used in the contract form's counterparty field */
.party-typeahead-wrap {
  position: relative;
}
.party-typeahead-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-white, #fff);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  z-index: 1100;
  max-height: 320px;
  overflow-y: auto;
}
.party-typeahead-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-light, #eef0f3);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
.party-typeahead-item:last-child { border-bottom: none; }
.party-typeahead-item:hover { background: var(--bg-hover, #f4f6fa); }
.party-typeahead-icon { font-size: 16px; flex-shrink: 0; }
.party-typeahead-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.party-typeahead-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.party-typeahead-sub {
  font-size: 11px;
  color: var(--text-secondary, #888);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.party-typeahead-create {
  background: rgba(0, 102, 204, 0.04);
  color: var(--accent, #0066cc);
}
.party-typeahead-create:hover { background: rgba(0, 102, 204, 0.1); }
.party-typeahead-empty {
  padding: 12px;
  color: var(--text-secondary, #888);
  font-size: 12px;
}
.party-link-clear {
  margin-left: 6px;
  font-size: 11px;
}
.party-link-stale {
  color: var(--danger, #dc3545);
  font-size: 12px;
  font-style: italic;
}

/* =============================================================
 * Access Control (#109B) — roles matrix UI
 * ============================================================= */

.ac-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.ac-tab {
  background: transparent;
  border: none;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary, #666);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.ac-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.ac-tab:hover:not(.active) {
  color: var(--text);
}

/* Role-tab strip — sits above the matrix, one chip per role. */
.ac-role-strip {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}
.ac-role-chip {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-white);
  color: var(--text);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ac-role-chip:hover {
  background: var(--bg);
}
.ac-role-chip.active {
  background: var(--primary);
  color: var(--bg-white);
  border-color: var(--primary);
}
.ac-role-chip-new {
  border-style: dashed;
  color: var(--text-secondary);
}

/* Legend at the top of the Roles tab — what each level means. */
.ac-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 16px;
  padding: 14px 16px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 13px;
}
.ac-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ac-legend-chip {
  display: inline-block;
  min-width: 50px;
  text-align: center;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
}
.ac-legend-chip-0 { background: #EFEFE9; color: #5F5E5A; }
.ac-legend-chip-1 { background: #E6F1FB; color: #185FA5; }
.ac-legend-chip-2 { background: #B5D4F4; color: #185FA5; }
.ac-legend-chip-3 { background: #378ADD; color: white; }
.ac-legend-chip-4 { background: #0C447C; color: white; }
.ac-legend-blurb {
  color: var(--text-secondary);
  font-size: 12px;
}

/* Role card — wraps the matrix for one selected role. */
.ac-role-card {
  background: var(--bg-white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: 18px 22px;
  max-width: 920px;  /* Tighter than full-width so the module-name column
                        doesn't stretch into a huge inner gap. Leaves room
                        for the legend + role strip above to flow wider. */
}
.ac-role-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.ac-role-name-input {
  font-size: 18px;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 4px 0;
  width: 100%;
  max-width: 360px;
  border-bottom: 1px solid transparent;
}
.ac-role-name-input:focus {
  outline: none;
  border-bottom-color: var(--border);
}
.ac-role-name-input.readonly {
  pointer-events: none;
}
.ac-role-desc-input {
  display: block;
  width: 100%;
  margin-top: 6px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--text-secondary);
  resize: none;
  font-family: inherit;
  line-height: 1.4;
  padding: 2px 0;
}
.ac-role-desc-input:focus {
  outline: none;
}
.ac-system-badge {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--bg);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Matrix table — module rows with 5-segment bars. */
.ac-matrix-header,
.ac-matrix-row {
  display: grid;
  /* Module label area is content-sized (min 280px so all module names fit),
     then a fixed-width bar column. The remaining empty space lives between
     the two — keeps things tight without pinning the bar way out right. */
  grid-template-columns: minmax(280px, 380px) 320px;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--border);
}
.ac-matrix-header {
  padding-top: 18px;
  padding-bottom: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ac-matrix-header-bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  text-align: center;
  font-size: 11px;
}

.ac-matrix-row-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ac-module-chevron {
  font-size: 12px;
  width: 14px;
  text-align: center;
  color: var(--text-secondary);
  user-select: none;
  /* Default = no affordance. Modules without sub-content keep the space for
     alignment but the chevron is invisible. Only the .expandable variant gets
     a pointer cursor + hover treatment. */
  cursor: default;
}
.ac-module-chevron.no-children { visibility: hidden; }
.ac-module-chevron.expandable {
  cursor: pointer;
  transition: color 0.1s, transform 0.1s;
}
.ac-module-chevron.expandable:hover { color: var(--primary, #185FA5); }

/* The whole Contracts-row label is clickable — clicking icon / name / chevron
   all toggle the sub-section. Use a subtle hover tint to advertise it
   without competing with the bar segments visually. */
.ac-matrix-row-label-clickable {
  cursor: pointer;
  border-radius: var(--radius-sm);
  margin: -4px -6px;     /* expand the hit area + visual hover area */
  padding: 4px 6px;
  transition: background 0.1s;
}
.ac-matrix-row-label-clickable:hover {
  background: var(--bg);
}
.ac-matrix-row-label-clickable .ac-module-name {
  /* Slight emphasis so it reads as "this is the expandable parent row". */
  font-weight: 600;
}
.ac-module-icon {
  font-size: 16px;
  color: var(--text-secondary);
}
.ac-module-name {
  font-size: 14px;
  font-weight: 500;
}
.ac-module-level-pill {
  margin-left: 12px;   /* sits next to module name; was 'auto' which pushed it
                          all the way right and created a huge inner gap */
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-secondary);
}

/* Split derived-pill — diagonal two-color when the four sensitivity tiers have
   different levels (so you can see "lowest" → "highest" at a glance). When all
   four are equal we render a solid pill instead. Text uses mix-blend-mode so it
   stays readable on either side of the diagonal. */
.ac-module-level-pill.split {
  position: relative;
  background: transparent;
  color: transparent;       /* the pseudo's text takes over */
  overflow: hidden;
  padding: 0;
  display: inline-block;
}
.ac-module-level-pill.split::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--ac-low-bg, #EFEFE9) 50%, var(--ac-high-bg, #185FA5) 50.5%);
  z-index: 0;
}
.ac-module-level-pill.split > span {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 2px 8px;
  color: white;
  mix-blend-mode: difference;
}

/* The 5-segment bar. Each segment is a clickable button. */
.ac-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.ac-bar-seg {
  height: 22px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0;
  cursor: pointer;
  background: #EFEFE9;
  transition: background 0.1s, transform 0.1s;
}
.ac-bar-seg:hover:not(:disabled) {
  transform: scale(1.04);
}
.ac-bar-seg:disabled {
  cursor: not-allowed;
}
/* "Beyond max" — segments past a module's max level (e.g. Admin segment on a
   module without settings). Visually dead so the user knows they aren't
   options. */
.ac-bar-seg.beyond-max {
  background: transparent !important;
  border: 0.5px dashed var(--border);
  opacity: 0.4;
}
.ac-bar-seg.derived {
  cursor: not-allowed;
}
.ac-bar.derived .ac-bar-seg {
  cursor: not-allowed;
  opacity: 0.55;
}
.ac-bar-seg.locked {
  cursor: not-allowed;
}

/* Sensitivity sub-rows under the Contracts row — smaller bars, indented. */
.ac-sub-section {
  margin-top: 8px;
  margin-left: 30px;
  margin-bottom: 8px;
  padding: 14px 16px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}
.ac-sub-section-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0;        /* the section header (chevron + label) owns spacing now */
}

/* Each collapsible block inside the Contracts sub-section. The header row is
   click-to-toggle; the chevron rotates with state (▾ open / ▸ closed). */
.ac-sub-block {
  margin-bottom: 12px;
}
.ac-sub-block:last-of-type {
  margin-bottom: 0;
}
.ac-sub-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 6px;
  margin: 0 -6px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
  user-select: none;
}
.ac-sub-section-header:hover {
  background: var(--bg-white);
}
.ac-sub-chevron {
  font-size: 11px;
  color: var(--text-secondary);
  width: 12px;
  text-align: center;
  transition: color 0.1s;
}
.ac-sub-section-header:hover .ac-sub-chevron { color: var(--primary, #185FA5); }

.ac-sub-section-content {
  /* The actual rows / buckets live here. No extra padding so existing internal
     layouts (subRows, buckets) keep their own spacing. */
}
/* Type-filter content (the buckets block) — was .ac-type-filter-row in the
   pre-collapse layout. Keep the existing class as legacy alias so older role
   payloads / older builds render the same. */
.ac-type-filter-content,
.ac-type-filter-row {
  padding-top: 4px;
}
.ac-sub-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 280px;
  gap: 16px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--border);
}
.ac-sub-row:last-of-type { border-bottom: none; }
.ac-sub-row-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ac-sensitivity-chip {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  min-width: 78px;
  text-align: center;
  flex-shrink: 0;
}
.ac-sensitivity-chip-public      { background: #EAF3DE; color: #3B6D11; }
.ac-sensitivity-chip-internal    { background: #E6F1FB; color: #185FA5; }
.ac-sensitivity-chip-restricted  { background: #FAEEDA; color: #854F0B; }
.ac-sensitivity-chip-confidential{ background: #FCEBEB; color: #A32D2D; }
.ac-sub-blurb {
  color: var(--text-secondary);
  font-size: 12px;
}
.ac-sub-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.ac-sub-bar .ac-bar-seg {
  height: 18px;
  border-radius: 4px;
}

/* Type filter — two-bucket UX (Access / No Access). Chips drag between
   buckets or click X to move. Each canonical type lives in exactly one. */
.ac-type-filter-row {
  padding-bottom: 14px;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 12px;
}
.ac-type-help {
  font-size: 11px;
  color: var(--text-secondary);
  margin: 0 0 12px;
}
.ac-type-help code {
  background: var(--bg);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}
.ac-bucket-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 8px;
  margin-bottom: 4px;
}
.ac-bucket-label-access      { color: #0F6E56; }
.ac-bucket-label-no-access   { color: #791F1F; }
.ac-bucket-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.ac-bucket-dot-access      { background: #1D9E75; }
.ac-bucket-dot-no-access   { background: #A32D2D; }
.ac-bucket-blurb {
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-secondary);
}

.ac-bucket {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 40px;
  transition: background 0.15s, border-color 0.15s;
}
.ac-bucket-access      { background: #F4FAF6; border-color: #C0DD97; }
.ac-bucket-no-access   { background: #FDF5F5; border-color: #F7C1C1; }
.ac-bucket-drop-target {
  /* Brief visual cue when something is being dragged over the bucket. */
  background: var(--bg-white);
  border-style: dashed;
  border-color: var(--primary);
}
.ac-bucket-empty {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
  align-self: center;
}

/* Chip styling per bucket — green for Access, red+strikethrough for No Access.
   White background + colored outline keeps them readable on the tinted bucket. */
.ac-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-white);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  cursor: grab;
  user-select: none;
  transition: transform 0.1s, box-shadow 0.1s;
}
.ac-type-chip:active { cursor: grabbing; }
.ac-type-chip:hover { transform: translateY(-1px); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.ac-type-chip-dragging { opacity: 0.4; }

.ac-type-chip-access {
  color: #0F6E56;
  border: 0.5px solid #C0DD97;
}
.ac-type-chip-no-access {
  color: #791F1F;
  border: 0.5px solid #F7C1C1;
}
.ac-type-chip-no-access .ac-type-chip-label {
  text-decoration: line-through;
  text-decoration-color: rgba(121, 31, 31, 0.4);
}
.ac-type-chip-x {
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.6;
}
.ac-type-chip-x:hover { opacity: 1; }

/* C-suite override row */
.ac-csuite-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 4px;
  font-size: 13px;
  cursor: pointer;
}
.ac-csuite-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.ac-csuite-row-label {
  font-weight: 500;
}
.ac-csuite-row-blurb {
  color: var(--text-secondary);
  font-size: 12px;
}

/* Personal-grant note (always shown, not configurable) */
.ac-personal-grant-note {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 0.5px dashed var(--border);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Save / Discard footer */
.ac-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 0.5px solid var(--border);
}
.ac-dirty-pill {
  margin-right: auto;
  font-size: 12px;
  padding: 4px 10px;
  background: #FAEEDA;
  color: #854F0B;
  border-radius: var(--radius-sm);
  align-self: center;
}

/* Users tab */
.ac-users-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.ac-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--bg-white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.ac-users-table th,
.ac-users-table td {
  padding: 10px 12px;
  border-bottom: 0.5px solid var(--border);
  text-align: left;
}
.ac-users-table th {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg);
}
.ac-users-table tr:last-child td { border-bottom: none; }
.ac-users-role-select {
  font-size: 13px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--border);
  background: var(--bg-white);
}

/* Contract sensitivity tier badges (#115 Phase C). Colors mirror the Access
   Control matrix legend so the contract's sensitivity is visually consistent
   with how it's configured per role. */
.contract-sensitivity-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}
.contract-sensitivity-public       { background: #EAF3DE; color: #3B6D11; }
.contract-sensitivity-internal     { background: #E6F1FB; color: #185FA5; }
.contract-sensitivity-restricted   { background: #FAEEDA; color: #854F0B; }
.contract-sensitivity-confidential { background: #FCEBEB; color: #A32D2D; }

/* =============================================================
 * OAA_Table — Centralized table module (design v0.2)
 * =============================================================
 * Lite tier (sort + search + count + empty state) lives here.
 * Standard tier (filter chrome, group-by, view toggle) and Editable
 * tier (multi-select, bulk action bar, inline cell editors) classes
 * will be added when those tiers are built. CSS class prefix is
 * `oaa-table-*` per locked design Q1.
 */
.oaa-table-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.oaa-table-toolbar-left {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.oaa-table-toolbar-right {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
}
.oaa-table-search-wrap {
  position: relative;
  flex: 0 1 320px;
}
.oaa-table-search {
  width: 100%;
  padding: 8px 32px 8px 12px;
  font-size: 14px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  color: var(--text);
}
.oaa-table-search:focus {
  outline: none;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 2px var(--primary-light);
}
.oaa-table-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.oaa-table-search-clear:hover {
  background: var(--bg);
  color: var(--text);
}
.oaa-table-count {
  font-size: 12px;
  color: var(--text-secondary);
  /* margin-left:auto was needed when the count was the only right-aligned
     element. Now it lives inside .oaa-table-toolbar-right which handles
     alignment, so we drop it. */
}

.oaa-table-body {
  /* Wrapper so we can swap modes without disrupting the toolbar above */
}
.oaa-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  /* NOTE: no `overflow: hidden` here — would trap sticky positioning on
     the <th> cells below. Border-radius on the corners is rendered by the
     browser without clipping, which is good enough for our use. (#168) */
}
.oaa-table-th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  /* #86 — full brand-Navy header band with white text. Strong "this is
     the column key" signal, anchored in EpiEndo's primary identity color.
     Reads decisively above any data tint (slate zebras, blue accent
     status pills, etc.) and stays put on scroll thanks to the sticky
     positioning below. */
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 0; /* dark band — divider not needed */
  user-select: none;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--brand-navy);
}
/* Keep sort-affordance icons + active state visible on the dark band. */
.oaa-table-th.oaa-table-th-sortable { color: #ffffff; }
.oaa-table-th.oaa-table-th-sortable:hover {
  color: #ffffff;
  background: var(--primary-light);   /* #1a2c4a — slightly lighter navy */
}
.oaa-table-th.oaa-table-th-active {
  color: #ffffff;
  background: var(--primary-light);
}
.oaa-table-th-sortable {
  cursor: pointer;
  transition: color 0.1s, background 0.1s;
}
/* #86 2026-05-28: sortable hover + active states on the navy band are
   now defined alongside .oaa-table-th above. The original light-mode
   overrides here were leftover from the old slate-header palette;
   leaving the empty hooks here means caller-side overrides still
   target the same selectors if a future theme needs them. */
.oaa-table-td {
  padding: 10px 12px;
  border-bottom: 0.5px solid var(--border);
  vertical-align: top;
  color: var(--text);
}
.oaa-table-tr:last-child .oaa-table-td {
  border-bottom: none;
}
/* #168: zebra striping — alternating row backgrounds give the table a
   stronger "data grid" feel and match what the Contracts table already
   does. Only applied to the static <tr>s (skip the expansion rows so
   the open panel reads as one continuous surface with its source row). */
.oaa-table-tr:nth-child(odd) > .oaa-table-td {
  background: var(--bg-muted);
}
.oaa-table-tr-clickable {
  cursor: pointer;
  transition: background 0.1s;
}
.oaa-table-tr-clickable:hover {
  background: var(--bg);
}
/* #168 / 86 polish: open / expanded row + the panel below. The active
   source row gets a soft warm tint to signal "this is the one you're
   reading". The panel itself uses just padding — no harsh accent rails
   or coloured borders (Finnur removed them 2026-05-28; the row tint
   plus the bigger inner padding is enough visual grouping). */
.oaa-table-tr-expanded > .oaa-table-td {
  background: var(--bg-hover);
}
.oaa-table-tr-expansion > .oaa-table-td-expansion {
  background: var(--bg-white);
  padding: 14px 20px 18px;
  border-bottom: 0.5px solid var(--border);
}
.oaa-table-expanded-error {
  color: var(--danger);
  font-style: italic;
  font-size: 13px;
}
.oaa-table-empty-cell {
  color: var(--text-secondary);
}

.oaa-table-empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  background: var(--bg-white);
  border: 0.5px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.oaa-table-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.oaa-table-error {
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--danger-light);
  color: var(--danger);
  font-size: 13px;
}

/* ============================================================
   Filter chips + popover (Standard tier)
   ============================================================ */
.oaa-table-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.oaa-table-filter-chip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.oaa-table-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 12px;
  background: var(--bg-white);
  border: 0.5px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  color: var(--text);
  transition: background 0.1s, border-color 0.1s;
  white-space: nowrap;
}
.oaa-table-filter-chip:hover {
  background: var(--bg);
}
/* IMPORTANT — DON'T use var(--primary-light) here. In OAA it's defined as
   #1a2c4a (a darker navy than --primary), so active chips render unreadable
   dark-on-dark. Use explicit light blues that match the matrix bar palette. */
.oaa-table-filter-chip.active {
  background: #E6F1FB;
  border-color: #185FA5;
  color: #0C447C;
  font-weight: 500;
  padding-right: 8px;  /* tighter when the × is showing alongside */
}
.oaa-table-filter-chip-caret {
  font-size: 9px;
  color: var(--text-secondary);
}
.oaa-table-filter-chip.active .oaa-table-filter-chip-caret { color: #0C447C; }
.oaa-table-filter-chip-clear {
  margin-left: 2px;
  background: transparent;
  border: none;
  font-size: 14px;
  line-height: 1;
  color: #0C447C;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.7;
}
.oaa-table-filter-chip-clear:hover { opacity: 1; }
.oaa-table-filter-clear {
  padding: 4px 10px;
  background: transparent;
  border: 0.5px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
}
.oaa-table-filter-clear:hover {
  color: var(--text);
  border-color: var(--border);
}

.oaa-table-filter-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 4px;
  z-index: 100;
  display: none;
}
.oaa-table-filter-popover.open { display: block; }
.oaa-table-filter-popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.oaa-table-filter-popover-item:hover { background: var(--bg); }
.oaa-table-filter-popover-item input { margin: 0; }
.oaa-table-filter-popover-any { color: var(--text-secondary); font-style: italic; }

/* ============================================================
   Group-by selector
   ============================================================ */
.oaa-table-groupby {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.oaa-table-groupby-select {
  padding: 4px 8px;
  font-size: 12px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  color: var(--text);
  cursor: pointer;
}
.oaa-table-groupby-select:focus {
  outline: none;
  border-color: var(--primary-light, #B5D4F4);
}

/* ============================================================
   View-mode toggle (Table / Cards / Kanban)
   ============================================================ */
.oaa-table-view-toggle {
  display: inline-flex;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  overflow: hidden;
}
.oaa-table-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: transparent;
  border: none;
  border-right: 0.5px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.oaa-table-view-toggle-btn:last-child { border-right: none; }
.oaa-table-view-toggle-btn:hover { background: var(--bg); color: var(--text); }
.oaa-table-view-toggle-btn.active {
  background: var(--primary, #185FA5);
  color: white;
}
.oaa-table-view-icon { font-size: 13px; line-height: 1; }
.oaa-table-view-label { /* visible at default size; hide on narrow screens via media query below */ }

/* ============================================================
   Group headers (table + card modes when grouped)
   ============================================================ */
.oaa-table-group {
  margin-bottom: 8px;
}
.oaa-table-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  transition: background 0.1s;
}
.oaa-table-group-header:hover { background: var(--bg-white); }
.oaa-table-group-header.collapsed {
  border-radius: var(--radius-sm);
}
.oaa-table-group-chevron {
  font-size: 11px;
  color: var(--text-secondary);
  width: 12px;
  text-align: center;
}
.oaa-table-group-label {
  font-weight: 500;
  color: var(--text);
}
.oaa-table-group-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-white);
  padding: 1px 8px;
  border-radius: 999px;
  border: 0.5px solid var(--border);
}
.oaa-table-group .oaa-table {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  border-top: none;
}

/* ============================================================
   Kanban mode
   ============================================================ */
.oaa-table-kanban {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;  /* room for horizontal scrollbar without clipping cards */
}
.oaa-table-kanban-col {
  flex: 0 0 280px;
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.oaa-table-kanban-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 0.5px solid var(--border);
  background: var(--bg-white);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.oaa-table-kanban-col-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  flex: 1;
}
.oaa-table-kanban-col-count {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg);
  padding: 1px 8px;
  border-radius: 999px;
  border: 0.5px solid var(--border);
}
.oaa-table-kanban-col-body {
  flex: 1;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 80px;
  transition: background 0.15s, outline 0.15s;
}
.oaa-table-kanban-col-empty {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
  text-align: center;
  padding: 16px 0;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}
.oaa-table-kanban-col-drop-target {
  /* Light blue + dashed primary outline — DON'T use var(--primary-light)
     since it's dark navy in OAA. Use explicit hex so the drop hint is
     clearly visible as you drag over a column. */
  background: #E6F1FB;
  outline: 1px dashed #185FA5;
  outline-offset: -3px;
}
.oaa-table-kanban-card {
  background: var(--bg-white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  cursor: grab;
  transition: box-shadow 0.1s, transform 0.1s;
}
.oaa-table-kanban-card:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.oaa-table-kanban-card:active { cursor: grabbing; }
.oaa-table-kanban-card-dragging { opacity: 0.4; }

/* User card template (used by both card + kanban modes in the Access
   Control Users tab). Lightweight compact layout — name, email, role/last. */
.oaa-user-card-inner { display: flex; flex-direction: column; gap: 4px; }
.oaa-user-card-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}
.oaa-user-card-email {
  font-size: 12px;
  color: var(--text-secondary);
}
.oaa-user-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  margin-top: 2px;
}
.oaa-user-card-role {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  border: 0.5px solid var(--border);
  font-weight: 500;
}
.oaa-user-card-last {
  color: var(--text-secondary);
}
/* In kanban, the role chip is redundant (the column header already says
   the role) — hide it inside the kanban cards. */
.oaa-table-kanban-card .oaa-user-card-role { display: none; }

/* ============================================================
   Editable tier — checkboxes, bulk bar, inline editors (#120)
   ============================================================ */
.oaa-table-th-checkbox,
.oaa-table-td-checkbox {
  width: 32px;
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
}
.oaa-table-th-checkbox input,
.oaa-table-td-checkbox input {
  cursor: pointer;
  margin: 0;
}
.oaa-table-tr-selected {
  background: #FAFCFE;   /* very subtle tint so selected rows are findable */
}
.oaa-table-tr-selected:hover { background: #F0F6FB; }

/* "Bulk edit" toolbar toggle */
.oaa-table-bulk-toggle {
  padding: 5px 12px;
  background: var(--bg-white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.oaa-table-bulk-toggle:hover {
  background: var(--bg);
  border-color: #185FA5;
}
.oaa-table-bulk-toggle.active {
  background: #185FA5;
  color: white;
  border-color: #185FA5;
}

/* Bulk action bar — sits between toolbar and table body when selection > 0 */
.oaa-table-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #E6F1FB;
  border: 0.5px solid #185FA5;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  font-size: 13px;
}
.oaa-table-bulk-count {
  font-weight: 600;
  color: #0C447C;
  margin-right: 8px;
}
.oaa-table-bulk-action-group {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.oaa-table-bulk-action-select {
  padding: 4px 8px;
  font-size: 12px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  color: var(--text);
}
.oaa-table-bulk-action-apply,
.oaa-table-bulk-action-btn {
  padding: 5px 12px;
  font-size: 12px;
  border: 0.5px solid #185FA5;
  background: var(--bg-white);
  color: #0C447C;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s;
}
.oaa-table-bulk-action-apply:hover:not(:disabled),
.oaa-table-bulk-action-btn:hover:not(:disabled) {
  background: #185FA5;
  color: white;
}
.oaa-table-bulk-action-apply:disabled,
.oaa-table-bulk-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.oaa-table-bulk-clear {
  margin-left: auto;
  padding: 5px 12px;
  background: transparent;
  border: 0.5px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: #0C447C;
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}
.oaa-table-bulk-clear:hover {
  border-color: #185FA5;
  background: var(--bg-white);
}

/* Inline cell editors — sized to feel like a cell, not a form input. */
.oaa-table-cell-editor {
  font: inherit;
  font-size: 13px;
  color: var(--text);
}
.oaa-table-cell-editor-text,
.oaa-table-cell-editor-number {
  width: 100%;
  padding: 4px 6px;
  background: var(--bg-white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}
.oaa-table-cell-editor-text:focus,
.oaa-table-cell-editor-number:focus,
.oaa-table-cell-editor-select:focus {
  outline: none;
  border-color: #185FA5;
  box-shadow: 0 0 0 2px #E6F1FB;
}
.oaa-table-cell-editor-select {
  width: 100%;
  padding: 4px 6px;
  background: var(--bg-white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  cursor: pointer;
}
.oaa-table-cell-editor-checkbox {
  cursor: pointer;
}
.oaa-table-td-edit {
  /* Editor cells get a tighter padding so the input doesn't overflow */
  padding: 6px 8px;
}

/* ============================================================
   Toast (kanban DnD undo + reject messages)
   ============================================================ */
#oaa-table-toast-holder {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;  /* let the buttons inside receive clicks; container itself ignores */
}
.oaa-table-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #1F3050;
  color: white;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  font-size: 13px;
  pointer-events: auto;
  transition: opacity 0.25s;
}
.oaa-table-toast-error { background: #7C1F1F; }
.oaa-table-toast.fading { opacity: 0; }
.oaa-table-toast-msg { /* default styling */ }
.oaa-table-toast-action {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.5);
  color: white;
  padding: 3px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  cursor: pointer;
}
.oaa-table-toast-action:hover {
  background: rgba(255,255,255,0.15);
  border-color: white;
}

/* Narrow viewports — collapse the view-toggle label to icons only. */
@media (max-width: 720px) {
  .oaa-table-view-label { display: none; }
}

/* Auto-switch table → card on narrow screens (per locked design Q5).
   Callers can opt out by setting mobileBreakpoint: null in config —
   currently a JS-side toggle would be needed; this CSS rule covers the
   default. */
@media (max-width: 720px) {
  .oaa-table-mobile-switch .oaa-table,
  .oaa-table-mobile-switch .oaa-table thead,
  .oaa-table-mobile-switch .oaa-table tbody,
  .oaa-table-mobile-switch .oaa-table tr,
  .oaa-table-mobile-switch .oaa-table td {
    display: block;
  }
  .oaa-table-mobile-switch .oaa-table thead {
    display: none;
  }
  .oaa-table-mobile-switch .oaa-table tr {
    border-bottom: 0.5px solid var(--border);
    padding: 8px 0;
  }
  .oaa-table-mobile-switch .oaa-table-td {
    border-bottom: none;
    padding: 4px 12px;
  }
  .oaa-table-mobile-switch .oaa-table-td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
}