/* ===========================================================================
   FOATT design system — warm paper background, muted forest accent.
   Tokens, app shell, sidebar, and the shared building blocks used across
   the bank-feed flow (stat strip, saved views, filter bar, table, modal).
   =========================================================================== */

:root {
  --foatt-bg:           #f3f1ec;
  --foatt-bg-soft:      #ede9e1;
  --foatt-surface:      #fbfaf7;
  --foatt-surface-alt:  #f7f5f0;
  --foatt-border:       #e5e2db;
  --foatt-border-soft:  #ede9e1;
  --foatt-text:         #0e0e0c;
  --foatt-text-muted:   #26241f;
  --foatt-text-subtle:  #6b665c;
  --foatt-text-faint:   #9a948a;
  --foatt-accent:       #2f5d3d;
  --foatt-accent-soft:  #eaf1ec;
  --foatt-accent-text:  #234a30;
  --foatt-accent-edge:  #cfe0d4;
  --foatt-emerald:      #1f7a3f;
  --foatt-emerald-soft: #eaf1ec;
  --foatt-amber:        #a26b1a;
  --foatt-amber-soft:   #f6efe1;
  --foatt-amber-edge:   #e8d4a8;
  --foatt-rose:         #a8341e;
  --foatt-rose-soft:    #f4e8e3;
  --foatt-mono:         "ui-monospace", "SFMono-Regular", "Menlo", monospace;
}

html.foatt-app, html.foatt-app body {
  background: var(--foatt-bg);
  color: var(--foatt-text);
}

.foatt-app body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- App shell ----------------------------------------------------- */
.foatt-shell {
  display: flex;
  width: 100%;
  min-height: 100vh;
  background: var(--foatt-bg);
  color: var(--foatt-text);
}

.foatt-main {
  flex: 1;
  min-width: 0;
  padding: 24px 28px 40px;
  overflow-x: hidden;
}

.foatt-main-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---------- Sidebar ------------------------------------------------------- */
.foatt-sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--foatt-surface);
  border-right: 1px solid var(--foatt-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: width .18s ease;
}

.foatt-sidebar[data-collapsed="true"] {
  width: 60px;
}

.foatt-sidebar-brand {
  padding: 16px 14px 14px;
  border-bottom: 1px solid var(--foatt-border-soft);
}

.foatt-sidebar[data-collapsed="true"] .foatt-sidebar-brand {
  padding: 16px 8px 14px;
}

.foatt-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.foatt-sidebar[data-collapsed="true"] .foatt-brand-row { justify-content: center; }

.foatt-logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--foatt-accent);
  color: var(--foatt-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 1px 2px rgba(35,74,48,.25);
}

.foatt-brand-text { min-width: 0; flex: 1; }
.foatt-brand-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--foatt-text);
  line-height: 1.1;
  letter-spacing: -0.4px;
}
.foatt-brand-tag {
  font-size: 10.5px;
  color: var(--foatt-text-subtle);
  line-height: 1.2;
  margin-top: 2px;
  letter-spacing: 0.2px;
}

.foatt-sidebar[data-collapsed="true"] .foatt-brand-text { display: none; }

.foatt-company-switcher {
  margin-top: 14px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--foatt-bg-soft);
  border: 1px solid var(--foatt-border-soft);
  cursor: pointer;
  text-align: left;
  color: var(--foatt-text);
  font-family: inherit;
}

.foatt-sidebar[data-collapsed="true"] .foatt-company-switcher {
  margin-top: 12px;
  padding: 6px;
  justify-content: center;
}

.foatt-company-mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--foatt-text-muted);
  flex-shrink: 0;
}

.foatt-company-meta { flex: 1; min-width: 0; }
.foatt-company-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--foatt-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.foatt-company-sub { font-size: 10px; color: var(--foatt-text-subtle); }

.foatt-sidebar[data-collapsed="true"] .foatt-company-meta,
.foatt-sidebar[data-collapsed="true"] .foatt-company-switcher .foatt-icon-chev { display: none; }

.foatt-sidebar-nav {
  padding: 12px 10px;
  flex: 1;
  overflow-y: auto;
}

.foatt-sidebar[data-collapsed="true"] .foatt-sidebar-nav { padding: 10px 8px; }

.foatt-nav-section {
  font-size: 10px;
  font-weight: 600;
  color: var(--foatt-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 10px 6px;
}

.foatt-sidebar[data-collapsed="true"] .foatt-nav-section {
  padding: 8px 0 4px;
  text-align: center;
}
.foatt-sidebar[data-collapsed="true"] .foatt-nav-section-label { display: none; }
.foatt-sidebar[data-collapsed="true"] .foatt-nav-section::after { content: "·"; }

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

.foatt-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--foatt-text-muted);
  background: transparent;
  text-decoration: none;
  position: relative;
  transition: background .12s;
}

.foatt-nav-item:hover { background: var(--foatt-bg-soft); }

.foatt-nav-item[aria-current="page"] {
  background: var(--foatt-accent);
  color: var(--foatt-surface);
  font-weight: 600;
}

.foatt-nav-item .foatt-nav-icon { color: var(--foatt-text-faint); display: flex; }
.foatt-nav-item[aria-current="page"] .foatt-nav-icon { color: var(--foatt-surface); }

.foatt-nav-label { flex: 1; }

.foatt-nav-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--foatt-amber-soft);
  color: var(--foatt-amber);
  letter-spacing: 0.2px;
}

.foatt-nav-item[aria-current="page"] .foatt-nav-badge {
  background: rgba(251,250,247,.22);
  color: var(--foatt-surface);
}

.foatt-nav-badge-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--foatt-amber);
}

.foatt-sidebar[data-collapsed="true"] .foatt-nav-item {
  padding: 8px;
  justify-content: center;
}
.foatt-sidebar[data-collapsed="true"] .foatt-nav-label,
.foatt-sidebar[data-collapsed="true"] .foatt-nav-badge { display: none; }
.foatt-sidebar:not([data-collapsed="true"]) .foatt-nav-badge-dot { display: none; }

.foatt-sidebar-toggle {
  position: absolute;
  right: -10px;
  top: 70px;
  width: 20px;
  height: 24px;
  border-radius: 6px;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  color: var(--foatt-text-subtle);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(14,14,12,.06);
  z-index: 2;
  padding: 0;
}

.foatt-sidebar-user {
  padding: 12px;
  border-top: 1px solid var(--foatt-border-soft);
}
.foatt-sidebar[data-collapsed="true"] .foatt-sidebar-user { padding: 8px; }

.foatt-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
}
.foatt-sidebar[data-collapsed="true"] .foatt-user-row {
  padding: 0;
  justify-content: center;
}

.foatt-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2f5d3d, #4a7a58);
  color: var(--foatt-surface);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.foatt-user-meta { flex: 1; min-width: 0; }
.foatt-user-name { font-size: 12px; font-weight: 600; color: var(--foatt-text); }
.foatt-user-email {
  font-size: 10px;
  color: var(--foatt-text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.foatt-sidebar[data-collapsed="true"] .foatt-user-meta,
.foatt-sidebar[data-collapsed="true"] .foatt-user-row > svg { display: none; }

/* ---------- Page header --------------------------------------------------- */
.foatt-page-header { display: flex; flex-direction: column; gap: 6px; }

/* Breadcrumb row — wraps the breadcrumb on the left and a small
   action cluster (presence pills, share button) on the far right.
   Breadcrumb shrinks first if the actions need the room. */
.foatt-breadcrumb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.foatt-breadcrumb-row .foatt-breadcrumb {
  flex: 1 1 auto;
  min-width: 0;
}
.foatt-breadcrumb-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.foatt-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--foatt-text-subtle);
  flex-wrap: wrap;
}
.foatt-breadcrumb a {
  color: var(--foatt-text-subtle);
  text-decoration: none;
}
.foatt-breadcrumb a:hover { color: var(--foatt-text); }
.foatt-breadcrumb-current { color: var(--foatt-text); font-weight: 500; }

.foatt-page-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.foatt-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--foatt-text);
  letter-spacing: -0.4px;
}

.foatt-page-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--foatt-text-subtle);
  max-width: 640px;
}

.foatt-page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ---------- Buttons ------------------------------------------------------- */
.foatt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  height: 32px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  border: 1px solid var(--foatt-border);
  background: var(--foatt-surface);
  color: var(--foatt-text);
  box-shadow: 0 1px 0 rgba(14,14,12,.03);
  text-decoration: none;
  transition: background .12s, border-color .12s;
}
.foatt-btn:hover { background: var(--foatt-bg-soft); }

.foatt-btn-sm { padding: 5px 10px; font-size: 12px; height: 28px; gap: 5px; }
.foatt-btn-lg { padding: 9px 16px; font-size: 14px; height: 38px; gap: 7px; }

.foatt-btn-primary {
  background: var(--foatt-text);
  color: var(--foatt-surface);
  border-color: var(--foatt-text);
  box-shadow: 0 1px 0 rgba(14,14,12,.18), 0 1px 2px rgba(14,14,12,.12);
}
.foatt-btn-primary:hover { background: #1c1c19; }

.foatt-btn-accent {
  background: var(--foatt-accent);
  color: var(--foatt-surface);
  border-color: var(--foatt-accent);
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 1px 2px rgba(35,74,48,.25);
}
.foatt-btn-accent:hover { background: #264c33; }

.foatt-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--foatt-text-muted);
  box-shadow: none;
}
.foatt-btn-ghost:hover { background: var(--foatt-bg-soft); }

.foatt-btn-danger {
  background: var(--foatt-surface);
  color: var(--foatt-rose);
  border-color: var(--foatt-border);
}
.foatt-btn-danger:hover { background: var(--foatt-rose-soft); }

.foatt-integration-tile:hover {
  border-color: var(--foatt-text-muted);
  transform: translateY(-1px);
}

.foatt-icon-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--foatt-text-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.foatt-icon-btn:hover { background: var(--foatt-bg-soft); color: var(--foatt-text); }

/* ---------- Stat strip ---------------------------------------------------- */
.foatt-stat-strip {
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 12px;
  display: flex;
  overflow: hidden;
}

.foatt-stat {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--foatt-border-soft);
  border-bottom: 2px solid transparent;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: inherit;
  color: inherit;
  text-decoration: none;
}

.foatt-stat:last-child { border-right: none; }
.foatt-stat:hover { background: var(--foatt-surface-alt); }

.foatt-stat[aria-current="true"] {
  background: var(--foatt-bg-soft);
  border-bottom-color: var(--foatt-text);
}
.foatt-stat[data-tone="amber"][aria-current="true"] { border-bottom-color: var(--foatt-amber); }
.foatt-stat[data-tone="emerald"][aria-current="true"] { border-bottom-color: var(--foatt-emerald); }

.foatt-stat-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--foatt-bg-soft);
  color: var(--foatt-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.foatt-stat[data-tone="amber"]   .foatt-stat-icon { background: var(--foatt-amber-soft);   color: var(--foatt-amber); }
.foatt-stat[data-tone="emerald"] .foatt-stat-icon { background: var(--foatt-emerald-soft); color: var(--foatt-emerald); }
.foatt-stat[data-tone="rose"]    .foatt-stat-icon { background: var(--foatt-rose-soft);    color: var(--foatt-rose); }

.foatt-stat-meta { min-width: 0; }
.foatt-stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--foatt-text-subtle);
  letter-spacing: 0.1px;
}
.foatt-stat-value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 1px;
}
.foatt-stat-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--foatt-text);
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
}
.foatt-stat-delta {
  font-size: 11px;
  color: var(--foatt-text-subtle);
  font-weight: 500;
}
.foatt-stat-delta-pos { color: var(--foatt-emerald); }

/* ---------- Saved-views segmented control --------------------------------- */
.foatt-segmented {
  display: inline-flex;
  padding: 3px;
  border-radius: 9px;
  background: var(--foatt-bg-soft);
  border: 1px solid var(--foatt-border-soft);
  gap: 0;
}

.foatt-segmented-item {
  padding: 5px 11px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--foatt-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  text-decoration: none;
}
.foatt-segmented-item:hover { color: var(--foatt-text); }
.foatt-segmented-item[aria-current="page"] {
  background: var(--foatt-surface);
  color: var(--foatt-text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15,23,42,.08);
}
.foatt-segmented-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--foatt-amber);
}
.foatt-segmented-count {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background: transparent;
  color: var(--foatt-text-faint);
  font-variant-numeric: tabular-nums;
}
.foatt-segmented-item[aria-current="page"] .foatt-segmented-count {
  background: var(--foatt-bg-soft);
  color: var(--foatt-text-subtle);
}
.foatt-segmented-item[data-tone="amber"][aria-current="page"] .foatt-segmented-count {
  background: var(--foatt-amber-soft);
  color: var(--foatt-amber);
}

/* ---------- Filter bar ---------------------------------------------------- */
.foatt-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 10px;
  flex-wrap: wrap;
}

.foatt-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 220px;
  padding: 8px 10px;
  background: var(--foatt-bg-soft);
  border-radius: 7px;
  border: 1px solid transparent;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.foatt-search:focus-within {
  background: var(--foatt-surface);
  border-color: var(--foatt-accent);
  box-shadow: 0 0 0 3px var(--foatt-accent-soft);
}
.foatt-search input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: var(--foatt-text);
  flex: 1;
  font-family: inherit;
  min-width: 0;
}
.foatt-search input::placeholder { color: var(--foatt-text-faint); }
.foatt-kbd {
  font-size: 10px;
  font-weight: 600;
  color: var(--foatt-text-faint);
  padding: 2px 5px;
  border: 1px solid var(--foatt-border);
  border-radius: 4px;
  background: var(--foatt-surface);
}

.foatt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 7px;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  font-size: 12px;
  color: var(--foatt-text);
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
}
.foatt-chip-label {
  color: var(--foatt-text-subtle);
  font-weight: 400;
}
.foatt-chip[data-active="true"] {
  background: var(--foatt-accent-soft);
  border-color: var(--foatt-accent-edge);
  color: var(--foatt-accent-text);
}
.foatt-chip[data-active="true"] .foatt-chip-label { color: var(--foatt-accent-text); opacity: .7; }

.foatt-divider-v {
  width: 1px;
  height: 22px;
  background: var(--foatt-border);
  margin: 0 2px;
}

/* ---------- Card ---------------------------------------------------------- */
.foatt-card {
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 12px;
  overflow: hidden;
}

.foatt-card-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--foatt-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.foatt-card-header-tight {
  padding: 12px 18px;
}

.foatt-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--foatt-text);
}

.foatt-card-subtitle {
  font-size: 12px;
  color: var(--foatt-text-subtle);
  margin-top: 1px;
}

.foatt-card-body { padding: 18px; }

/* ---------- Bank account grid card --------------------------------------- */
.foatt-account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.foatt-account-card {
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s;
}
.foatt-account-card:hover {
  border-color: var(--foatt-accent-edge);
  transform: translateY(-1px);
}

.foatt-account-card-head { display: flex; align-items: center; gap: 10px; }

.foatt-account-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--foatt-bg-soft);
  border: 1px solid var(--foatt-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--foatt-text-muted);
}

.foatt-account-name { font-size: 13px; font-weight: 600; color: var(--foatt-text); }
.foatt-account-bank {
  font-size: 11px;
  color: var(--foatt-text-subtle);
  font-family: var(--foatt-mono);
}

.foatt-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 500;
}
.foatt-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
}
.foatt-status-connected { color: var(--foatt-emerald); }
.foatt-status-connected .foatt-status-dot { background: var(--foatt-emerald); }
.foatt-status-warning { color: var(--foatt-amber); }
.foatt-status-warning .foatt-status-dot { background: var(--foatt-amber); }

.foatt-account-balance {
  font-size: 22px;
  font-weight: 600;
  color: var(--foatt-text);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.foatt-account-sync {
  font-size: 11px;
  color: var(--foatt-text-faint);
  margin-top: 1px;
}

.foatt-account-flag {
  padding: 8px 10px;
  border-radius: 7px;
  background: var(--foatt-amber-soft);
  color: var(--foatt-amber);
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

/* ---------- Activity list ------------------------------------------------- */
.foatt-activity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--foatt-border-soft);
}
.foatt-activity:last-child { border-bottom: none; }

.foatt-activity-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--foatt-bg-soft);
  color: var(--foatt-text-muted);
}
.foatt-activity-icon[data-tone="indigo"]  { background: var(--foatt-accent-soft);  color: var(--foatt-accent-text); }
.foatt-activity-icon[data-tone="emerald"] { background: var(--foatt-emerald-soft); color: var(--foatt-emerald); }
.foatt-activity-icon[data-tone="amber"]   { background: var(--foatt-amber-soft);   color: var(--foatt-amber); }
.foatt-activity-icon[data-tone="rose"]    { background: var(--foatt-rose-soft);    color: var(--foatt-rose); }

.foatt-activity-text { flex: 1; font-size: 13px; color: var(--foatt-text); }
.foatt-activity-time { font-size: 11px; color: var(--foatt-text-faint); }

/* ---------- Transactions table ------------------------------------------- */
.foatt-table { width: 100%; }

.foatt-table-bulk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--foatt-bg-soft);
  border-bottom: 1px solid var(--foatt-border-soft);
  font-size: 12px;
  color: var(--foatt-text-subtle);
}

.foatt-table-bulk-left { display: flex; align-items: center; gap: 12px; }

.foatt-table-grid {
  display: grid;
  grid-template-columns: 30px 110px minmax(280px, 1.4fr) minmax(220px, 1fr) 130px 90px;
  align-items: flex-start;
}

.foatt-table-head {
  padding: 9px 20px;
  border-bottom: 1px solid var(--foatt-border);
  background: var(--foatt-surface-alt);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--foatt-text-subtle);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.foatt-table-head .foatt-th-right { text-align: right; }

.foatt-row {
  padding: 12px 20px;
  border-bottom: 1px solid var(--foatt-border-soft);
  background: var(--foatt-surface);
  position: relative;
  text-decoration: none;
  color: inherit;
}
.foatt-row:hover { background: var(--foatt-surface-alt); }
.foatt-row:last-child { border-bottom: none; }

.foatt-row[data-density="compact"] {
  padding: 8px 16px;
  align-items: center;
}

.foatt-row[data-highlight="true"] {
  background: var(--foatt-amber-soft);
}
.foatt-row[data-highlight="true"]::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--foatt-amber);
}

.foatt-cell-date-day {
  font-size: 13px;
  font-weight: 500;
  color: var(--foatt-text);
  font-variant-numeric: tabular-nums;
}
.foatt-cell-date-type {
  font-size: 10.5px;
  color: var(--foatt-text-faint);
  margin-top: 1px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 500;
}

.foatt-cell-desc {
  font-size: 13px;
  font-weight: 500;
  color: var(--foatt-text);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.foatt-cell-desc-norm {
  font-size: 10.5px;
  color: var(--foatt-text-faint);
  font-family: var(--foatt-mono);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.foatt-cell-amount {
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}
.foatt-cell-amount-neg { color: var(--foatt-rose); }
.foatt-cell-amount-pos { color: var(--foatt-emerald); }
.foatt-cell-amount-bal {
  font-size: 10.5px;
  color: var(--foatt-text-faint);
  margin-top: 2px;
  font-weight: 400;
}

.foatt-cell-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.foatt-table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--foatt-border-soft);
  background: var(--foatt-surface-alt);
  font-size: 12px;
  color: var(--foatt-text-subtle);
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- Contact cells (matched / suggested / unassigned) ------------- */
.foatt-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}
.foatt-badge-matched   { background: var(--foatt-emerald-soft); color: var(--foatt-emerald); }
.foatt-badge-suggested { background: var(--foatt-amber-soft);   color: var(--foatt-amber); }
.foatt-badge-confidence { font-size: 10px; opacity: 0.7; font-weight: 600; }

.foatt-rule-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--foatt-text-subtle);
  margin-top: 3px;
}
.foatt-rule-hint a {
  color: var(--foatt-accent-text);
  text-decoration: underline;
  text-decoration-color: var(--foatt-accent-edge);
}

.foatt-suggested-actions { display: flex; gap: 4px; margin-top: 5px; }
.foatt-suggested-accept {
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--foatt-accent);
  color: var(--foatt-surface);
  border: none;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.foatt-suggested-reject {
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--foatt-surface);
  color: var(--foatt-text-muted);
  border: 1px solid var(--foatt-border);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.foatt-suggested-reason {
  font-size: 10.5px;
  color: var(--foatt-text-subtle);
  line-height: 1.4;
  max-width: 280px;
  margin-top: 4px;
}

.foatt-unassigned-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 6px;
  background: var(--foatt-surface);
  border: 1px dashed var(--foatt-border);
  font-size: 12px;
  color: var(--foatt-text-subtle);
  cursor: pointer;
  font-family: inherit;
}

.foatt-link-rule {
  background: transparent;
  border: none;
  padding: 1px 0;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--foatt-accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: inherit;
  text-decoration: none;
}

/* ---------- Modal --------------------------------------------------------- */
.foatt-modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.4);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 64px;
  z-index: 50;
}

.foatt-modal {
  width: 100%;
  max-width: 640px;
  background: var(--foatt-surface);
  border-radius: 14px;
  box-shadow: 0 24px 48px -12px rgba(15,23,42,.32), 0 0 0 1px rgba(15,23,42,.06);
  overflow: hidden;
}

.foatt-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--foatt-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.foatt-modal-header-left { display: flex; align-items: center; gap: 10px; }

.foatt-modal-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--foatt-accent-soft);
  color: var(--foatt-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.foatt-modal-title { font-size: 14px; font-weight: 600; color: var(--foatt-text); }
.foatt-modal-sub { font-size: 11px; color: var(--foatt-text-subtle); }

.foatt-modal-source {
  padding: 12px 20px;
  background: var(--foatt-bg-soft);
  border-bottom: 1px solid var(--foatt-border-soft);
  display: flex;
  align-items: center;
  gap: 12px;
}

.foatt-modal-source-tag {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--foatt-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.foatt-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.foatt-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--foatt-border-soft);
  background: var(--foatt-surface-alt);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.foatt-modal-footnote {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--foatt-text-subtle);
}

/* ---------- IF / THEN block ---------------------------------------------- */
.foatt-block-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.foatt-block-tag[data-tone="indigo"]  { background: var(--foatt-accent-soft);  color: var(--foatt-accent-text); }
.foatt-block-tag[data-tone="emerald"] { background: var(--foatt-emerald-soft); color: #047857; }

.foatt-block {
  padding: 14px;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 8px;
}
.foatt-block[data-tone="indigo"]  { border-left: 3px solid var(--foatt-accent); }
.foatt-block[data-tone="emerald"] { border-left: 3px solid var(--foatt-emerald); }

.foatt-block-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.foatt-field-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--foatt-text-subtle);
  margin-bottom: 5px;
  display: block;
}

.foatt-input,
.foatt-select {
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  font-size: 13px;
  color: var(--foatt-text);
  outline: none;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.foatt-input:focus, .foatt-select:focus { border-color: var(--foatt-accent); }
.foatt-input-mono { font-family: var(--foatt-mono); }

.foatt-select { padding-right: 28px; appearance: none; -webkit-appearance: none; cursor: pointer; }

.foatt-select-wrap { position: relative; }
.foatt-select-wrap > svg.foatt-select-chev {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--foatt-text-subtle);
  pointer-events: none;
}

.foatt-add-condition {
  padding: 4px 10px 4px 8px;
  border-radius: 6px;
  background: var(--foatt-surface);
  border: 1px dashed var(--foatt-border);
  font-size: 12px;
  color: var(--foatt-text-subtle);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  margin-top: 10px;
}

.foatt-scope {
  padding: 12px;
  border-radius: 8px;
  background: var(--foatt-bg-soft);
  border: 1px solid var(--foatt-border-soft);
}

.foatt-scope-text { font-size: 13px; font-weight: 500; color: var(--foatt-text); }
.foatt-scope-emph { color: var(--foatt-accent-text); font-weight: 600; }
.foatt-scope-sub { font-size: 11px; color: var(--foatt-text-subtle); margin-top: 2px; }

/* ---------- Transaction show ---------------------------------------------- */
.foatt-show-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: flex-start;
}

@media (max-width: 1024px) {
  .foatt-show-grid { grid-template-columns: 1fr; }
}

.foatt-show-main { display: flex; flex-direction: column; gap: 16px; }
.foatt-show-side { display: flex; flex-direction: column; gap: 12px; }

.foatt-hero-card {
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.foatt-hero-eyebrow {
  font-size: 11px;
  font-weight: 500;
  color: var(--foatt-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.foatt-hero-amount {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.8px;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.foatt-hero-amount-neg { color: var(--foatt-rose); }
.foatt-hero-amount-pos { color: var(--foatt-emerald); }

.foatt-hero-meta {
  font-size: 12px;
  color: var(--foatt-text-faint);
  margin-top: 2px;
  font-family: var(--foatt-mono);
}

.foatt-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}
.foatt-hero-pill-suggested { background: var(--foatt-amber-soft);   color: var(--foatt-amber); }
.foatt-hero-pill-matched   { background: var(--foatt-emerald-soft); color: var(--foatt-emerald); }
.foatt-hero-pill-unmatched { background: var(--foatt-bg-soft);      color: var(--foatt-text-subtle); }

.foatt-suggest-banner {
  background: var(--foatt-amber-soft);
  border: 1px solid var(--foatt-amber-edge);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.foatt-suggest-banner-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--foatt-surface);
  color: var(--foatt-amber);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--foatt-amber-edge);
}
.foatt-suggest-banner-text { flex: 1; min-width: 200px; }
.foatt-suggest-banner-title { font-size: 13px; font-weight: 600; color: var(--foatt-amber); }
.foatt-suggest-banner-sub   { font-size: 12px; color: var(--foatt-amber); margin-top: 2px; }

.foatt-detail-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  padding: 10px 0;
  border-bottom: 1px solid var(--foatt-border-soft);
  font-size: 13px;
  gap: 16px;
}
.foatt-detail-row:last-child { border-bottom: none; }
.foatt-detail-key { color: var(--foatt-text-subtle); }
.foatt-detail-val { color: var(--foatt-text); word-break: break-word; }
.foatt-detail-val.mono { font-family: var(--foatt-mono); }

.foatt-empty {
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--foatt-text-subtle);
}

.foatt-empty-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--foatt-bg-soft);
  color: var(--foatt-text-faint);
  display: flex;
  align-items: center;
  justify-content: center;
}

.foatt-empty-title { font-size: 13px; color: var(--foatt-text); font-weight: 500; }
.foatt-empty-sub   { font-size: 12px; color: var(--foatt-text-subtle); text-align: center; }

.foatt-side-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12px;
  gap: 8px;
}
.foatt-side-panel-row .foatt-spr-key { color: var(--foatt-text-subtle); }
.foatt-side-panel-row .foatt-spr-val {
  color: var(--foatt-text);
  font-weight: 500;
  text-align: right;
}
.foatt-side-panel-row .foatt-spr-val[data-tone="suggested"] {
  background: var(--foatt-accent-soft);
  color: var(--foatt-accent-text);
  padding: 2px 7px;
  border-radius: 5px;
}

.foatt-side-callout {
  padding: 12px;
  border-radius: 8px;
  background: var(--foatt-accent-soft);
  border: 1px solid var(--foatt-accent-edge);
  display: flex;
  align-items: center;
  gap: 10px;
}
.foatt-side-callout-title { font-weight: 600; color: var(--foatt-accent-text); font-size: 12px; }
.foatt-side-callout-body { color: var(--foatt-text); font-size: 12px; margin-top: 1px; }

.foatt-activity-mini {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
}
.foatt-activity-mini-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--foatt-text-faint);
  margin-top: 7px;
  flex-shrink: 0;
}
.foatt-activity-mini-text { color: var(--foatt-text); }
.foatt-activity-mini-time { color: var(--foatt-text-faint); font-size: 11px; }

/* ---------- Pagination ---------------------------------------------------- */
.foatt-pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.foatt-pagination .pagination,
.foatt-pagination .pagination * {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.foatt-pagination .pagination a,
.foatt-pagination .pagination span {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--foatt-surface);
  color: var(--foatt-text);
  border: 1px solid var(--foatt-border);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.foatt-pagination .pagination .current {
  background: var(--foatt-text);
  color: var(--foatt-surface);
  border-color: var(--foatt-text);
}

/* ---------- Forms (cross-app pattern) ------------------------------------ */
.foatt-form { display: flex; flex-direction: column; gap: 18px; }

.foatt-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 720px) {
  .foatt-form-grid { grid-template-columns: 1fr; }
}

.foatt-form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.foatt-form-field-wide { grid-column: 1 / -1; }

.foatt-form-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
}

.foatt-form-section + .foatt-form-section {
  border-top: 1px solid var(--foatt-border-soft);
}

.foatt-form-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--foatt-text);
  margin: 0 0 4px;
}
.foatt-form-section-sub {
  font-size: 12px;
  color: var(--foatt-text-subtle);
  margin: 0 0 10px;
}

.foatt-textarea {
  min-height: 88px;
  padding: 10px;
  border-radius: 6px;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  font-size: 13px;
  color: var(--foatt-text);
  outline: none;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  line-height: 1.5;
}
.foatt-textarea:focus,
.foatt-input:focus,
.foatt-select:focus {
  border-color: var(--foatt-accent);
  box-shadow: 0 0 0 3px var(--foatt-accent-soft);
}
.foatt-input::placeholder,
.foatt-textarea::placeholder {
  color: var(--foatt-text-faint);
}

.foatt-field-help {
  font-size: 11px;
  color: var(--foatt-text-subtle);
  line-height: 1.5;
}

.foatt-field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.foatt-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--foatt-text);
  cursor: pointer;
}
.foatt-checkbox-row input[type="checkbox"] {
  margin-top: 2px;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.foatt-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--foatt-border-soft);
  background: var(--foatt-surface-alt);
  flex-wrap: wrap;
}

.foatt-form-errors {
  padding: 14px 16px;
  margin: 0 0 14px;
  border-radius: 10px;
  background: var(--foatt-rose-soft);
  border: 1px solid #e8c4bb;
  color: var(--foatt-rose);
  font-size: 13px;
  line-height: 1.5;
}
.foatt-form-errors h2 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
}
.foatt-form-errors ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ---------- List table (simpler than the bank-feed grid) ----------------- */
.foatt-list { width: 100%; }

.foatt-list-head {
  display: grid;
  padding: 9px 18px;
  border-bottom: 1px solid var(--foatt-border);
  background: var(--foatt-surface-alt);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--foatt-text-subtle);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  align-items: center;
  gap: 12px;
}
.foatt-list-head .foatt-th-right { text-align: right; }

.foatt-list-row {
  display: grid;
  padding: 12px 18px;
  border-bottom: 1px solid var(--foatt-border-soft);
  align-items: center;
  font-size: 13px;
  color: var(--foatt-text);
  background: var(--foatt-surface);
  text-decoration: none;
  gap: 12px;
}
.foatt-list-row:last-child { border-bottom: none; }
.foatt-list-row:hover { background: var(--foatt-surface-alt); }

.foatt-list-primary {
  font-size: 13px;
  font-weight: 600;
  color: var(--foatt-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.foatt-list-primary-sub {
  font-size: 11px;
  color: var(--foatt-text-subtle);
  margin-top: 2px;
  font-weight: 400;
}

.foatt-list-meta {
  font-size: 12px;
  color: var(--foatt-text-subtle);
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foatt-list-amt {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--foatt-text);
  letter-spacing: -0.2px;
}
.foatt-list-amt[data-sign="neg"] { color: var(--foatt-rose); }
.foatt-list-amt[data-sign="pos"] { color: var(--foatt-emerald); }

/* ---------- Stats / KPI grid -------------------------------------------- */
.foatt-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.foatt-stat-card {
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.foatt-stat-card-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--foatt-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.foatt-stat-card-value {
  font-size: 26px;
  font-weight: 600;
  color: var(--foatt-text);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.foatt-stat-card-sub {
  font-size: 11px;
  color: var(--foatt-text-faint);
}
.foatt-stat-card-value[data-tone="amber"]   { color: var(--foatt-amber); }
.foatt-stat-card-value[data-tone="emerald"] { color: var(--foatt-emerald); }
.foatt-stat-card-value[data-tone="rose"]    { color: var(--foatt-rose); }

/* ---------- Horizontal bars (dashboard top-N) --------------------------- */
.foatt-hbar {
  display: grid;
  grid-template-columns: minmax(120px, 1.6fr) minmax(0, 3fr) minmax(60px, auto);
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 12px;
}
.foatt-hbar-label {
  color: var(--foatt-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.foatt-hbar-track {
  height: 8px;
  background: var(--foatt-bg-soft);
  border-radius: 4px;
  overflow: hidden;
}
.foatt-hbar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .3s ease;
}
.foatt-hbar-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--foatt-text);
}

/* ---------- Variance bars (centered zero-axis) -------------------------- */
.foatt-variance {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 4fr) minmax(80px, auto);
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 12px;
}
.foatt-variance-label {
  text-transform: capitalize;
  color: var(--foatt-text);
  font-weight: 500;
}
.foatt-variance-track {
  position: relative;
  height: 10px;
  background: var(--foatt-bg-soft);
  border-radius: 5px;
}
.foatt-variance-axis {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--foatt-border);
  left: 50%;
}
.foatt-variance-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 5px;
}
.foatt-variance-fill[data-tone="emerald"] { background: var(--foatt-emerald); }
.foatt-variance-fill[data-tone="rose"]    { background: var(--foatt-rose); }
.foatt-variance-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.foatt-variance-value[data-tone="emerald"] { color: var(--foatt-emerald); }
.foatt-variance-value[data-tone="rose"]    { color: var(--foatt-rose); }

/* ---------- KPI tile freshness stamp ----------------------------------- */
.foatt-kpi-fresh {
  font-size: 11px;
  color: var(--foatt-text-faint);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ---------- Pills + tags (general-purpose) ------------------------------ */
.foatt-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--foatt-bg-soft);
  color: var(--foatt-text-muted);
  letter-spacing: 0.2px;
}
.foatt-pill[data-tone="emerald"] { background: var(--foatt-emerald-soft); color: var(--foatt-emerald); }
.foatt-pill[data-tone="amber"]   { background: var(--foatt-amber-soft);   color: var(--foatt-amber); }
.foatt-pill[data-tone="rose"]    { background: var(--foatt-rose-soft);    color: var(--foatt-rose); }
.foatt-pill[data-tone="accent"]  { background: var(--foatt-accent-soft);  color: var(--foatt-accent-text); }

/* ---------- Cell comments (chat-bubble thread in the note drawer) ------ */
.cell-comment-mention {
  display: inline-block;
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(47, 93, 61, 0.12);
  color: var(--foatt-accent-text);
  font-weight: 500;
}
.cell-comment-row .cell-comment-actions {
  opacity: 0;
  transition: opacity 0.12s ease;
}
.cell-comment-row:hover .cell-comment-actions,
.cell-comment-row:focus-within .cell-comment-actions {
  opacity: 1;
}

/* iMessage-style compose textarea — auto-grows up to its max-height
   then scrolls internally. Scrollbar is suppressed so the box stays
   visually clean (no chrome appearing on a tall message). */
.cell-comment-compose-textarea {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/old Edge */
}
.cell-comment-compose-textarea::-webkit-scrollbar {
  display: none; /* Chrome/Safari/new Edge */
}

/* ---------- Definition list (key-value pair grid) ---------------------- */
.foatt-dl {
  display: grid;
  grid-template-columns: 200px 1fr;
  font-size: 13px;
}
.foatt-dl > dt {
  padding: 10px 0;
  color: var(--foatt-text-subtle);
  border-bottom: 1px solid var(--foatt-border-soft);
}
.foatt-dl > dd {
  padding: 10px 0;
  margin: 0;
  color: var(--foatt-text);
  border-bottom: 1px solid var(--foatt-border-soft);
  word-break: break-word;
}
.foatt-dl > dt:last-of-type,
.foatt-dl > dd:last-of-type { border-bottom: none; }
.foatt-dl-mono { font-family: var(--foatt-mono); }

/* ---------- Drop zone (file upload) ------------------------------------- */
.foatt-dropzone {
  border: 2px dashed var(--foatt-border);
  border-radius: 12px;
  background: var(--foatt-bg-soft);
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--foatt-text-subtle);
}
.foatt-dropzone-active {
  border-color: var(--foatt-accent);
  background: var(--foatt-accent-soft);
}
.foatt-dropzone strong {
  font-size: 13px;
  color: var(--foatt-text);
  font-weight: 500;
}

/* ---------- Toolbar (above tables for actions) -------------------------- */
.foatt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.foatt-toolbar-search {
  flex: 1;
  min-width: 240px;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 8px;
  transition: border-color .12s, box-shadow .12s;
}
.foatt-toolbar-search:focus-within {
  border-color: var(--foatt-accent);
  box-shadow: 0 0 0 3px var(--foatt-accent-soft);
}
.foatt-toolbar-search input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: var(--foatt-text);
  flex: 1;
  font-family: inherit;
  min-width: 0;
}

/* ---------- Tabs (segmented horizontal nav) ----------------------------- */
.foatt-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--foatt-border);
  margin-bottom: 0;
}
.foatt-tab {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--foatt-text-subtle);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  margin-bottom: -1px;
}
.foatt-tab:hover { color: var(--foatt-text); }
.foatt-tab[aria-current="page"] {
  color: var(--foatt-text);
  font-weight: 600;
  border-bottom-color: var(--foatt-accent);
}

/* ---------- Flash / toasts override anchor ------------------------------- */
.foatt-app body { background: var(--foatt-bg) !important; }

/* ---------- Chip popover (filter chip dropdown) ------------------------ */
/* Default to hidden — Tailwind's .hidden lives in @layer utilities, and */
/* unlayered rules (like .foatt-chip-popover) always beat layered ones in */
/* the cascade regardless of source order. So we invert: hide by default, */
/* show only when .hidden is absent. */
.foatt-chip-popover {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 4px;
  min-width: 260px;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px -8px rgba(15,23,42,.18);
  z-index: 30;
  padding: 12px;
  flex-direction: column;
  gap: 10px;
}
.foatt-chip-popover:not(.hidden) {
  display: flex;
}

/* Form controls inside the FOATT shell — keep checkboxes themed */
.foatt-app input[type="checkbox"],
.foatt-app input[type="radio"] { accent-color: var(--foatt-accent); }

/* Native date/file inputs match the input styling */
.foatt-app input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }

/* ==== Inline QBO sync drawer ============================================
   Fixed-position panel slid up from the bottom-right of the viewport.
   Wraps the wizard partial — broadcasts replace the inner card while
   the drawer wrapper stays put. Compact CSS overrides shrink the
   wizard's typical layout to fit ~380px wide.

   States:
     .foatt-sync-drawer            — initial render (off-screen)
     .foatt-sync-drawer.is-visible — translated into view
     .foatt-sync-drawer.is-leaving — sliding back out for dismiss
======================================================================= */
.foatt-sync-drawer {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  z-index: 90;
  border-radius: 12px;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  box-shadow: 0 24px 48px -16px rgba(15, 23, 42, 0.25),
              0 8px 16px -8px rgba(15, 23, 42, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(calc(100% + 24px));
  opacity: 0;
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1),
              opacity 180ms ease;
}

.foatt-sync-drawer.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.foatt-sync-drawer.is-leaving {
  transform: translateY(calc(100% + 24px));
  opacity: 0;
}

.foatt-sync-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--foatt-border-soft);
  background: var(--foatt-surface-alt);
}

.foatt-sync-drawer-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--foatt-text-faint);
}

.foatt-sync-drawer-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  color: var(--foatt-text-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.foatt-sync-drawer-close:hover {
  background: var(--foatt-border-soft);
  color: var(--foatt-text);
}

/* The wizard partial inside the drawer scrolls if it exceeds the panel
   height (e.g. awaiting_approval state with many summary tiles). */
.foatt-sync-drawer > #qbo_sync_run_card {
  flex: 1 1 auto;
  overflow-y: auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Tighten the wizard's internal padding for the smaller frame. */
.foatt-sync-drawer .foatt-card-header { padding: 12px 14px; }
.foatt-sync-drawer .foatt-card-body   { padding: 12px 14px; gap: 12px !important; }
.foatt-sync-drawer .foatt-card-title    { font-size: 14px; }
.foatt-sync-drawer .foatt-card-subtitle { font-size: 12px; }

/* Summary tiles and detail expanders are noisy in a 380px column —
   keep them compact and let the panel scroll. */
.foatt-sync-drawer .foatt-card-body > div[style*="grid-template-columns"] {
  grid-template-columns: 1fr 1fr !important;
}

/* The wizard's terminal states (completed/failed/cancelled) include
   "Back to settings" links that don't belong in drawer context — the
   drawer auto-dismisses or the user closes it manually, no settings
   detour needed. Hide settings-bound links specifically. "Try again"
   on the failed state stays visible. */
.foatt-sync-drawer a[href$="/settings"] {
  display: none;
}

/* ---------- Knowledge base / help center -------------------------------- */
.kb-page {
  max-width: 920px;
  margin: 0 auto;
}

.kb-hero {
  padding: 24px 0 8px;
  border-bottom: 1px solid var(--foatt-border);
  margin-bottom: 24px;
}

.kb-hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--foatt-text-faint);
}

.kb-hero-title {
  font-size: 24px;
  font-weight: 600;
  margin-top: 6px;
  color: var(--foatt-text);
}

.kb-hero-sub {
  margin-top: 8px;
  color: var(--foatt-text-subtle);
  font-size: 13px;
  max-width: 60ch;
}

.kb-search {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 10px;
  padding: 8px 12px;
  max-width: 480px;
}
.kb-search input {
  flex: 1;
  border: none;
  background: transparent;
  font: inherit;
  color: var(--foatt-text);
  outline: none;
}
.kb-search button {
  background: var(--foatt-accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font: inherit;
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
}

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

.kb-section { margin-top: 28px; }
.kb-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.kb-section-title { font-size: 15px; font-weight: 600; color: var(--foatt-text); }
.kb-section-desc  { font-size: 12px; color: var(--foatt-text-subtle); margin-top: 2px; max-width: 60ch; }

.kb-card {
  display: block;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 10px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--foatt-text);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.kb-card:hover {
  border-color: var(--foatt-accent-edge);
  box-shadow: 0 6px 18px -10px rgba(15,23,42,.16);
  transform: translateY(-1px);
}
.kb-card-title    { font-size: 14px; font-weight: 600; color: var(--foatt-text); }
.kb-card-summary  { font-size: 12.5px; color: var(--foatt-text-subtle); margin-top: 6px; line-height: 1.5; }
.kb-card-meta     { font-size: 11px; color: var(--foatt-text-faint); margin-top: 8px; }

.kb-empty {
  padding: 28px;
  border: 1px dashed var(--foatt-border);
  border-radius: 10px;
  text-align: center;
  color: var(--foatt-text-subtle);
  font-size: 13px;
}

/* Article page */
.kb-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 36px;
  align-items: start;
}
@media (max-width: 900px) {
  .kb-article-layout { grid-template-columns: 1fr; }
}

.kb-breadcrumbs {
  font-size: 12px;
  color: var(--foatt-text-faint);
  margin: 16px 0 8px;
}
.kb-breadcrumbs a { color: var(--foatt-accent-text); text-decoration: none; }
.kb-breadcrumbs a:hover { text-decoration: underline; }

.kb-article-title {
  font-size: 26px;
  font-weight: 600;
  color: var(--foatt-text);
  line-height: 1.25;
  margin-bottom: 6px;
}
.kb-article-meta {
  font-size: 12px;
  color: var(--foatt-text-faint);
  margin-bottom: 22px;
}
.kb-article-summary {
  font-size: 14px;
  color: var(--foatt-text-muted);
  margin-bottom: 22px;
  line-height: 1.55;
}

.kb-article-body { font-size: 14px; line-height: 1.7; color: var(--foatt-text-muted); }
.kb-article-body .kb-h1 { font-size: 22px; font-weight: 600; color: var(--foatt-text); margin: 28px 0 10px; }
.kb-article-body .kb-h2 { font-size: 17px; font-weight: 600; color: var(--foatt-text); margin: 22px 0 8px; }
.kb-article-body .kb-h3 { font-size: 14.5px; font-weight: 600; color: var(--foatt-text); margin: 18px 0 6px; }
.kb-article-body .kb-p  { margin: 10px 0; }
.kb-article-body .kb-list { margin: 8px 0 8px 22px; padding: 0; }
.kb-article-body .kb-list li { margin: 4px 0; }
.kb-article-body .kb-list--ordered { list-style: decimal; }
.kb-article-body .kb-list:not(.kb-list--ordered) { list-style: disc; }
.kb-article-body .kb-quote { border-left: 3px solid var(--foatt-accent-edge); padding: 4px 14px; color: var(--foatt-text-subtle); margin: 14px 0; background: var(--foatt-accent-soft); border-radius: 0 8px 8px 0; }
.kb-article-body .kb-pre  { background: var(--foatt-bg-soft); border: 1px solid var(--foatt-border); border-radius: 8px; padding: 10px 12px; overflow-x: auto; font-family: var(--foatt-mono); font-size: 12.5px; margin: 12px 0; }
.kb-article-body .kb-code { background: var(--foatt-bg-soft); border: 1px solid var(--foatt-border); border-radius: 4px; padding: 1px 6px; font-family: var(--foatt-mono); font-size: 12.5px; }
.kb-article-body .kb-link { color: var(--foatt-accent-text); text-decoration: underline; }

.kb-aside {
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 10px;
  padding: 14px;
  position: sticky;
  top: 24px;
}
.kb-aside-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--foatt-text-faint); margin-bottom: 10px; }
.kb-aside-list { display: flex; flex-direction: column; gap: 4px; }
.kb-aside-list a { font-size: 12.5px; color: var(--foatt-text); text-decoration: none; padding: 6px 8px; border-radius: 6px; }
.kb-aside-list a:hover { background: var(--foatt-bg-soft); }

/* Activity heatmap (GitHub-style contribution graph) */
.foatt-heatmap { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.foatt-heatmap-body { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.foatt-heatmap-stack { display: flex; flex-direction: column; gap: 4px; }
.foatt-heatmap-months {
  display: flex;
  gap: 3px;
  height: 12px;
  font-size: 10px;
  color: var(--foatt-text-faint);
  line-height: 12px;
}
.foatt-heatmap-month {
  width: 11px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: visible;
}
.foatt-heatmap-days {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 16px;     /* aligns rows with cells, accounting for month label row */
  font-size: 10px;
  color: var(--foatt-text-faint);
  flex-shrink: 0;
}
.foatt-heatmap-days span {
  height: 11px;
  line-height: 11px;
  min-width: 22px;
  text-align: right;
}
.foatt-heatmap-grid { display: flex; gap: 3px; }
.foatt-heatmap-week { display: flex; flex-direction: column; gap: 3px; }
.foatt-heatmap-cell {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--foatt-bg-soft);
  border: 1px solid var(--foatt-border-soft);
  display: inline-block;
  flex-shrink: 0;
}
.foatt-heatmap-cell[data-empty="true"] { visibility: hidden; }
.foatt-heatmap-cell[data-level="0"] { background: var(--foatt-bg-soft); }
.foatt-heatmap-cell[data-level="1"] { background: #cfe0d4; border-color: #b7d0bf; }
.foatt-heatmap-cell[data-level="2"] { background: #7fb38f; border-color: #6ea27e; }
.foatt-heatmap-cell[data-level="3"] { background: #4a8c61; border-color: #3f7d54; }
.foatt-heatmap-cell[data-level="4"] { background: var(--foatt-accent); border-color: var(--foatt-accent); }
.foatt-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--foatt-text-faint);
}
.foatt-heatmap-legend .foatt-heatmap-cell { width: 10px; height: 10px; }