/* FleetFlow 360 — native Nzura module styling.
   Composes with shared app.css tokens/components (kpi-card, panel, page-header,
   btn, form-control, data-table, modal, drawer). Mobile-first, card-based.
   Reference language: Accounting forms + Farming drawer + Ads Manager KPIs. */

.ff-shell,
.ff-shell * {
  box-sizing: border-box;
  font-family: var(--font-sans, "Open Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif);
}

.ff-shell {
  --ff-accent: var(--brand-primary, #22b378);
  --ff-accent-rgb: var(--brand-primary-rgb, 34, 179, 120);
  --ff-blue: #408dfb;
  --ff-amber: var(--amber, #dc9d28);
  --ff-red: var(--red, #f7525a);
  display: grid;
  gap: 0.9rem;
  color: var(--text-primary);
}

.ff-loading,
.ff-empty {
  border: 1px dashed var(--panel-border);
  border-radius: var(--r-md, 12px);
  padding: 1.4rem;
  color: var(--text-muted);
  background: var(--panel-bg);
  text-align: center;
  font-size: 0.84rem;
}

/* ---- header / actions ---------------------------------------------------- */

.ff-shell > .page-header { margin-bottom: 0; }

.ff-icon-btn {
  width: 38px;
  height: 38px;
  justify-content: center;
  padding: 0;
}

.ff-icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.ff-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ---- mode switcher: segmented pill control (native app feel) -------------- */

.ff-mode-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: var(--surface-soft, rgba(27, 46, 90, 0.06));
  border: 1px solid var(--panel-border);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ff-mode-tabs::-webkit-scrollbar { display: none; }

.ff-mode-tab {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  min-height: 34px;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.ff-mode-tab:hover { color: var(--text-primary); }

.ff-mode-tab.active {
  background: var(--ff-accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(var(--ff-accent-rgb), 0.28);
}

.ff-location-switch {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 0.5rem;
}

.ff-location-switch label {
  display: grid;
  gap: 0.22rem;
  min-width: min(360px, 100%);
}

.ff-location-switch span {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ff-location-switch select {
  min-height: 38px;
  border: 1px solid var(--panel-border);
  border-radius: var(--r-sm, 8px);
  background: var(--panel-bg);
  color: var(--text-primary);
  padding: 0.45rem 0.65rem;
  font: inherit;
  font-size: 0.82rem;
}

/* ---- toolbar / search ---------------------------------------------------- */

.ff-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  border: 1px solid var(--panel-border);
  border-radius: var(--r-md, 12px);
  background: var(--panel-bg);
  padding: 0.6rem;
  box-shadow: var(--panel-shadow);
}

.ff-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  border: 1px solid var(--panel-border);
  border-radius: var(--r-sm, 8px);
  background: var(--surface-soft, var(--panel-bg));
  padding: 0 0.7rem;
  color: var(--text-muted);
}

.ff-search input {
  width: 100%;
  min-height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.84rem;
}

.ff-scope-pills {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ff-scope-pills span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 0.34rem 0.6rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.ff-scope-pills strong { color: var(--text-primary); }

.ff-search-results {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.ff-search-hit {
  border: 1px solid var(--panel-border);
  border-radius: var(--r-sm, 8px);
  background: var(--panel-bg);
  color: var(--text-primary);
  text-align: left;
  padding: 0.7rem;
  cursor: pointer;
  min-width: 0;
  box-shadow: var(--panel-shadow);
  transition: border-color 0.15s, transform 0.12s;
}

.ff-search-hit:hover { border-color: var(--ff-accent); transform: translateY(-1px); }

.ff-search-hit span,
.ff-search-hit em {
  display: block;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-style: normal;
}

.ff-search-hit strong {
  display: block;
  margin: 0.16rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
}

/* ---- fleet report controls ---------------------------------------------- */

.ff-report-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.65rem;
  align-items: end;
  border: 1px solid var(--panel-border);
  border-radius: var(--r-md, 12px);
  background: var(--panel-bg);
  padding: 0.75rem;
  box-shadow: var(--panel-shadow);
}

.ff-report-control {
  display: grid;
  gap: 0.24rem;
  min-width: 0;
}

.ff-report-control span {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ff-report-control input,
.ff-report-control select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--panel-border);
  border-radius: var(--r-sm, 8px);
  background: var(--surface-soft, var(--panel-bg));
  color: var(--text-primary);
  padding: 0.45rem 0.62rem;
  font: inherit;
  font-size: 0.8rem;
}

.ff-report-control input:disabled {
  color: var(--text-muted);
  opacity: 0.7;
}

.ff-report-export {
  display: grid;
  gap: 0.25rem;
  justify-items: end;
  min-width: 190px;
}

.ff-report-export .btn {
  min-height: 38px;
  justify-content: center;
  width: 100%;
}

.ff-report-export em {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-style: normal;
  text-align: right;
  max-width: 260px;
}

/* ---- KPI strip (Ads Manager style) --------------------------------------- */

.ff-kpis { margin-bottom: 0; }

.ff-kpi { padding: 0.7rem 0.8rem; }

.ff-kpi .kpi-sub {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.66rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ff-kpi .kpi-value { font-size: clamp(1rem, 0.8rem + 0.9vw, 1.35rem); letter-spacing: -0.01em; }

/* ---- layout -------------------------------------------------------------- */

.ff-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 0.85rem;
  align-items: start;
}

.ff-span-2 { grid-column: span 1; }

.ff-dashboard { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr); }
.ff-dashboard .ff-span-2 { grid-column: 1 / -1; }

/* Main column wrapper: stacks the primary panels in column 1 so the
   .ff-side-stack stays a clean, top-aligned right rail (column 2) instead of
   auto-flowing into the wrong grid cell. Collapses to a single column on
   narrow viewports via the responsive rules below. */
.ff-main-col { display: grid; gap: 0.85rem; align-content: start; min-width: 0; }

/* Masonry for report/analytics panel grids: CSS columns so short and tall
   panels flow without the row-alignment dead space a CSS grid leaves. */
.ff-masonry { columns: 2 320px; column-gap: 0.85rem; }
.ff-masonry > .ff-panel {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin: 0 0 0.85rem;
  vertical-align: top;
}
@media (max-width: 760px) { .ff-masonry { columns: 1; } }
.ff-scroll-260 { max-height: 260px; overflow: auto; }

.ff-side-stack { display: grid; gap: 0.85rem; align-content: start; min-width: 0; }

/* ---- panels (compose with shared .panel) --------------------------------- */

.ff-panel {
  border-radius: var(--r-md, 12px);
  padding: 0;
  overflow: hidden;
}

.ff-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.85rem 0.95rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.ff-panel-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-primary);
}

.ff-panel > .ff-board-grid,
.ff-panel > .ff-availability,
.ff-panel > .ff-calendar,
.ff-panel > .ff-pipeline,
.ff-panel > .ff-mini-grid,
.ff-panel > .ff-chart-list,
.ff-panel > .ff-record-list,
.ff-panel > .ff-cards,
.ff-panel > .ff-subsection,
.ff-panel > .ff-action-list,
.ff-panel > .ff-empty,
.ff-panel > .table-wrap { margin: 0.85rem 0.95rem; }

.ff-panel > .table-wrap { margin: 0; }
.ff-panel > .table-wrap .ff-table { border-radius: 0; }

/* ---- record cards (mobile-first, replaces bare tables for primary lists) -- */

.ff-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.6rem;
}

.ff-card {
  border: 1px solid var(--panel-border);
  border-radius: var(--r-sm, 8px);
  background: var(--surface-soft, var(--panel-bg));
  padding: 0.75rem 0.8rem;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  display: grid;
  gap: 0.4rem;
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}

.ff-card:hover {
  border-color: var(--ff-accent);
  transform: translateY(-1px);
  box-shadow: var(--panel-shadow);
}

.ff-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ff-card-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ff-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.ff-card-meta b { color: var(--text-secondary); font-weight: 700; }

.ff-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-primary);
}

/* ---- status boards / pipeline / calendars -------------------------------- */

.ff-board-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.ff-status-board {
  border: 1px solid var(--panel-border);
  border-radius: var(--r-sm, 8px);
  padding: 0.75rem;
  background: var(--surface-soft, var(--panel-bg));
  min-width: 0;
}

.ff-status-board h3,
.ff-pipe-col h3,
.ff-subsection h3 {
  margin: 0 0 0.55rem;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 800;
}

.ff-status-board div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  font-size: 0.76rem;
}

.ff-status-board em,
.ff-pipe-col em {
  display: block;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-style: normal;
}

.ff-availability,
.ff-calendar,
.ff-pipeline,
.ff-mini-grid { display: grid; gap: 0.55rem; }

.ff-availability { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.ff-calendar { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.ff-pipeline {
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.2rem;
}

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

.ff-vehicle-card,
.ff-calendar button,
.ff-pipe-col button,
.ff-cost-card {
  border: 1px solid var(--panel-border);
  border-radius: var(--r-sm, 8px);
  background: var(--surface-soft, var(--panel-bg));
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  padding: 0.65rem;
  min-width: 0;
  transition: border-color 0.15s, transform 0.12s;
}

.ff-vehicle-card:hover,
.ff-calendar button:hover,
.ff-pipe-col button:hover,
.ff-cost-card:hover { border-color: var(--ff-accent); transform: translateY(-1px); }

.ff-vehicle-card strong,
.ff-calendar strong,
.ff-cost-card strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 800;
}

.ff-vehicle-card span,
.ff-calendar span,
.ff-vehicle-card em,
.ff-calendar em,
.ff-cost-card span,
.ff-cost-card em {
  display: block;
  margin-top: 0.25rem;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ff-pipe-col {
  border: 1px solid var(--panel-border);
  border-radius: var(--r-sm, 8px);
  background: var(--surface-soft, var(--panel-bg));
  padding: 0.62rem;
  min-height: 152px;
}

.ff-pipe-col button,
.ff-record-list button {
  width: 100%;
  margin-top: 0.4rem;
  color: var(--text-secondary);
  font-size: 0.74rem;
}

.ff-mini-card {
  border: 1px solid var(--panel-border);
  border-radius: var(--r-sm, 8px);
  padding: 0.7rem;
  background: var(--surface-soft, var(--panel-bg));
  min-width: 0;
}

.ff-mini-card span,
.ff-mini-card em {
  display: block;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-style: normal;
}

.ff-mini-card strong {
  display: block;
  margin: 0.2rem 0;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.ff-subsection { margin-top: 0.9rem; }

.ff-record-list { display: grid; gap: 0.42rem; }

.ff-record-list button {
  border: 1px solid var(--panel-border);
  border-radius: var(--r-sm, 8px);
  background: var(--surface-soft, var(--panel-bg));
  padding: 0.6rem 0.65rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s;
}

.ff-record-list button:hover { border-color: var(--ff-accent); }

.ff-link-row { cursor: pointer; }
.ff-link-row:hover td { background: var(--surface-soft, rgba(27, 46, 90, 0.04)); }

/* ---- badges -------------------------------------------------------------- */

.ff-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
  background: rgba(var(--ff-accent-rgb), 0.12);
  color: var(--ff-accent);
}

.ff-badge.amber { background: rgba(220, 157, 40, 0.16); color: var(--ff-amber); }
.ff-badge.red { background: rgba(247, 82, 90, 0.14); color: var(--ff-red); }
.ff-badge.blue { background: rgba(64, 141, 251, 0.14); color: var(--ff-blue); }
.ff-badge.grey { background: rgba(120, 120, 130, 0.14); color: var(--text-secondary); }

/* ---- mini bar charts ----------------------------------------------------- */

.ff-chart-list { display: grid; gap: 0.6rem; }

.ff-bar-row {
  display: grid;
  grid-template-columns: 112px 1fr 64px;
  gap: 0.55rem;
  align-items: center;
  color: var(--text-secondary);
  font-size: 0.78rem;
}

.ff-bar-row strong { text-align: right; color: var(--text-primary); font-weight: 800; }

.ff-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(var(--ff-accent-rgb), 0.14);
  overflow: hidden;
}

.ff-bar span {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: var(--ff-accent);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.ff-bar.risk span { background: #e0a82e; }
.ff-bar.over span { background: #e0524d; }

/* ---- EAC CET tariff calculator ------------------------------------------- */
.ff-tariff { display: grid; gap: 0.85rem; padding: 0.95rem; }
.ff-tariff-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.ff-tariff-out { display: grid; gap: 0.7rem; }
.ff-tariff-class { display: flex; flex-direction: column; gap: 0.1rem; }
.ff-tariff-class strong { font-size: 0.95rem; color: var(--text-primary); }
.ff-tariff-class span { font-size: 0.72rem; color: var(--text-muted); }
.ff-tariff-warn { font-size: 0.72rem; color: #e0a82e; }
.ff-tariff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.ff-tariff-landed { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0.85rem; border-radius: var(--r-sm, 8px); background: rgba(var(--ff-accent-rgb), 0.1); }
.ff-tariff-landed span { font-size: 0.78rem; color: var(--text-secondary); }
.ff-tariff-landed strong { font-size: 1.05rem; font-weight: 800; color: var(--ff-accent); }
.ff-tariff-actions { display: flex; justify-content: flex-end; }

/* ---- demurrage console --------------------------------------------------- */
.ff-demurrage-note { font-size: 0.74rem; color: var(--text-muted); padding: 0.6rem 0.85rem; }
.ff-dem-badge { display: inline-block; font-size: 0.7rem; font-weight: 800; padding: 0.15rem 0.5rem; border-radius: 999px; }
.ff-dem-badge.ok { background: rgba(var(--ff-accent-rgb), 0.14); color: var(--ff-accent); }
.ff-dem-badge.risk { background: rgba(224, 168, 46, 0.16); color: #c98a14; }
.ff-dem-badge.over { background: rgba(224, 82, 77, 0.16); color: #d23b35; }

/* ---- rental CDW / protection products ------------------------------------ */
.ff-cdw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.7rem; padding: 0.85rem 0.95rem; }
.ff-cdw-card { border: 1px solid var(--panel-border); border-radius: var(--r-sm, 8px); background: var(--surface-soft, var(--panel-bg)); padding: 0.85rem; display: grid; gap: 0.45rem; align-content: start; }
.ff-cdw-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.ff-cdw-top strong { font-size: 0.92rem; color: var(--text-primary); }
.ff-cdw-top span { font-size: 0.82rem; font-weight: 800; color: var(--ff-accent); }
.ff-cdw-excess { font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); }
.ff-cdw-card p { margin: 0; font-size: 0.76rem; color: var(--text-muted); line-height: 1.4; }
.ff-cdw-card .btn { margin-top: 0.2rem; justify-content: center; }

@media (max-width: 720px) {
  .ff-tariff-inputs, .ff-tariff-grid, .ff-cdw-grid { grid-template-columns: 1fr; }
}

/* ---- e-signature capture ------------------------------------------------- */
.ff-sig-tabs { display: inline-flex; gap: 0.3rem; margin-bottom: 0.5rem; }
.ff-sig-tab { border: 1px solid var(--panel-border); background: var(--panel-bg); color: var(--text-secondary); border-radius: 999px; padding: 0.25rem 0.8rem; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.ff-sig-tab.active { background: var(--ff-accent); color: #fff; border-color: var(--ff-accent); }
.ff-sig-canvas { width: 100%; height: 170px; border: 1px dashed var(--panel-border); border-radius: var(--r-sm, 8px); background: #fff; touch-action: none; cursor: crosshair; }
.ff-sig-typed { width: 100%; font-family: "Segoe Script", "Brush Script MT", cursive; font-size: 1.4rem; }
.ff-sig-actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; }
.ff-sig-hint { font-size: 0.72rem; color: var(--text-muted); }
.ff-sig-proof { border: 1px solid var(--panel-border); border-radius: var(--r-sm, 8px); padding: 0.6rem; background: var(--surface-soft, var(--panel-bg)); }
.ff-sig-proof img { max-width: 100%; height: auto; background: #fff; border-radius: 4px; display: block; }
.ff-sig-proof-meta { font-size: 0.74rem; color: var(--text-muted); margin-top: 0.4rem; }

/* ---- audit-export pack --------------------------------------------------- */
.ff-audit-pack { padding: 0.85rem 0.95rem; }
.ff-audit-actions { display: flex; justify-content: flex-end; margin-bottom: 0.6rem; }
.ff-audit-sec { margin-bottom: 0.9rem; }
.ff-audit-sec h4 { margin: 0 0 0.4rem; font-size: 0.84rem; color: var(--text-primary); }
.ff-audit-sec .ap-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.ff-audit-sec .ap-table th { text-align: left; background: var(--surface-soft, rgba(27,46,90,0.06)); padding: 0.4rem 0.5rem; border: 1px solid var(--panel-border); color: var(--text-secondary); }
.ff-audit-sec .ap-table td { padding: 0.4rem 0.5rem; border: 1px solid var(--panel-border); color: var(--text-primary); }
.ff-audit-sec .ap-empty { font-size: 0.76rem; color: var(--text-muted); margin: 0.2rem 0 0.6rem; }

/* ---- live tracking map --------------------------------------------------- */
.ff-map { height: 420px; width: 100%; border-radius: var(--r-sm, 8px); overflow: hidden; background: var(--surface-soft, #e8eef5); margin: 0.85rem 0.95rem; z-index: 0; }
.ff-map .leaflet-container { font: inherit; }
@media (max-width: 720px) { .ff-map { height: 300px; } }

/* ---- multimodal legs ----------------------------------------------------- */
.ff-leg-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; border: 1px solid var(--panel-border); border-radius: var(--r-sm, 8px); padding: 0.5rem 0.7rem; background: var(--surface-soft, var(--panel-bg)); margin-bottom: 0.35rem; }
.ff-leg-row strong { font-size: 0.78rem; text-transform: capitalize; min-width: 60px; }
.ff-leg-row span { font-size: 0.82rem; color: var(--text-secondary); flex: 1; min-width: 0; }
.ff-leg-row em { font-size: 0.72rem; color: var(--text-muted); font-style: normal; }

/* ---- quick actions ------------------------------------------------------- */

.ff-action-list { display: grid; gap: 0.5rem; }

.ff-action-card {
  border: 1px solid var(--panel-border);
  border-radius: var(--r-sm, 8px);
  padding: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  background: var(--surface-soft, var(--panel-bg));
}

.ff-action-card strong {
  display: block;
  flex: 1 1 auto;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--text-primary);
}

.ff-action-card span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ---- tables (compose with shared .data-table) ---------------------------- */

.ff-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ff-table { width: 100%; }

/* ---- drawer (Farming activity drawer) ------------------------------------ */

.ff-drawer-backdrop,
.ff-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(9, 18, 36, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.ff-drawer-backdrop.open,
.ff-sheet-backdrop.open { opacity: 1; pointer-events: auto; }

/* Spanning drawer: 72px icon rail + main pane that expands into a wide
   secondary pane on desktop (Farming fmd-* model). */
.ff-drawer {
  position: fixed;
  z-index: 9610;
  top: 14px;
  right: 14px;
  bottom: 14px;
  width: min(460px, calc(100vw - 28px));
  background: transparent;
  display: flex;
  transform: translateX(118%);
  transition: transform 0.32s cubic-bezier(0.34, 0, 0.2, 1), width 0.32s cubic-bezier(0.34, 0, 0.2, 1);
}

.ff-drawer.open { transform: translateX(0); }
.ff-drawer.with-secondary { width: min(1320px, calc(100vw - 28px)); }

.ff-rail {
  width: 72px;
  flex-shrink: 0;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-right: none;
  border-radius: 20px 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 0.4rem;
}

.ff-drawer.with-secondary .ff-rail { border-radius: 0; }

.ff-rail-btn {
  min-height: 54px;
  border: none;
  border-radius: 13px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  padding: 0.4rem 0.25rem;
  transition: all 0.15s;
}

.ff-rail-btn svg { width: 20px; height: 20px; }
.ff-rail-lbl { font-size: 0.58rem; font-weight: 600; line-height: 1.05; text-align: center; max-width: 64px; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ff-rail-btn:hover { background: rgba(var(--ff-accent-rgb), 0.1); color: var(--ff-accent); }
.ff-rail-btn.active { background: var(--ff-accent); color: #fff; box-shadow: 0 6px 16px rgba(var(--ff-accent-rgb), 0.4); }

.ff-main {
  flex: 1;
  min-width: 0;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 0 20px 20px 0;
  box-shadow: -14px 0 44px rgba(9, 18, 36, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ff-secondary {
  flex: 1 1 0;
  min-width: 0;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-right: none;
  border-radius: 20px 0 0 20px;
  box-shadow: -14px 0 44px rgba(9, 18, 36, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ffSlideIn 0.28s cubic-bezier(0.34, 0, 0.2, 1);
}

.ff-drawer.with-secondary .ff-main { border-radius: 0 20px 20px 0; }

@media (min-width: 900px) {
  .ff-drawer.with-secondary .ff-secondary { flex: 1 1 auto; }
  .ff-drawer.with-secondary .ff-main { flex: 0 0 min(430px, 32vw); }
}

@keyframes ffSlideIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
/* Body content reveal on open / tab switch (Farming fmdReveal). */
@keyframes ffReveal { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

.ff-sec-head,
.ff-main-top {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.05rem 0.8rem;
  border-bottom: 1px solid var(--panel-border);
  background: var(--panel-bg);
  z-index: 1;
}

.ff-sec-title { font-size: 1rem; font-weight: 800; color: var(--text-primary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-sec-body { flex: 1; overflow-y: auto; padding: 1rem 1.05rem 1.5rem; display: grid; gap: 0.85rem; animation: ffReveal 0.26s ease; }
.ff-main-titlewrap { min-width: 0; }
.ff-eyebrow { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.ff-main-title { font-size: 0.98rem; font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-main-sub { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.1rem; }
.ff-sp { flex: 1; }

.ff-iconbtn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: var(--surface-soft, rgba(27, 46, 90, 0.06));
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ff-iconbtn .ff-icon { width: 17px; height: 17px; }

.ff-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border);
}

.ff-sheet-title { margin: 0; color: var(--text-primary); font-size: 1.02rem; font-weight: 800; }
.ff-sheet-sub { margin-top: 0.2rem; color: var(--text-muted); font-size: 0.74rem; }

.ff-drawer-body {
  flex: 1;
  overflow: auto;
  padding: 1rem 1.05rem 1.5rem;
  display: grid;
  gap: 0.85rem;
  animation: ffReveal 0.26s ease;
}

.ff-drawer-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.8rem 1.1rem;
  border-top: 1px solid var(--border);
  overflow: visible;
}

.ff-drawer-foot .btn {
  flex: 1 1 108px;
  min-width: 0;
  justify-content: center;
}

.ff-drawer-section {
  border: 1px solid var(--panel-border);
  border-radius: var(--r-sm, 8px);
  padding: 0.85rem;
  background: var(--surface-soft, var(--panel-bg));
}

.ff-drawer-section h4 {
  margin: 0 0 0.55rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.ff-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.ff-meta { min-width: 0; }

.ff-meta span {
  display: block;
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-bottom: 0.1rem;
}

.ff-meta strong {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.ff-timeline { display: grid; gap: 0.65rem; }

.ff-timeline-item {
  position: relative;
  border-left: 2px solid rgba(var(--ff-accent-rgb), 0.4);
  padding: 0 0 0 0.85rem;
}

.ff-timeline-item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ff-accent);
}

.ff-timeline-item strong {
  display: block;
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 700;
}

.ff-timeline-item span {
  color: var(--text-muted);
  font-size: 0.72rem;
}

/* ---- sheet / focused popup form (Accounting modal) ----------------------- */

.ff-sheet {
  position: fixed;
  z-index: 9620;
  left: 50%;
  top: 50%;
  width: min(720px, calc(100vw - 28px));
  max-height: min(780px, calc(100vh - 28px));
  transform: translate(-50%, -46%) scale(0.98);
  opacity: 0;
  pointer-events: none;
  border: 1px solid var(--panel-border);
  border-radius: var(--r-lg, 16px);
  background: var(--panel-bg);
  box-shadow: 0 24px 70px rgba(9, 18, 36, 0.35);
  overflow: hidden;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.ff-sheet.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.ff-form {
  padding: 1rem 1.1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  overflow: auto;
  max-height: calc(min(780px, calc(100vh - 28px)) - 132px);
}

.ff-field { display: grid; gap: 0.28rem; }
.ff-field.full { grid-column: 1 / -1; }

.ff-field span {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.ff-field input,
.ff-field select,
.ff-field textarea {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--panel-bg);
  color: var(--text-primary);
  border-radius: var(--r-sm, 8px);
  padding: 0.55rem 0.65rem;
  font: inherit;
  font-size: 0.84rem;
  min-height: 40px;
}

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

.ff-field textarea { min-height: 84px; resize: vertical; }

.ff-sheet-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--border);
}

/* ---- toast --------------------------------------------------------------- */

.ff-toast {
  position: fixed;
  z-index: 9700;
  right: 18px;
  bottom: 18px;
  max-width: 360px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  box-shadow: 0 12px 32px rgba(9, 18, 36, 0.24);
  border-radius: var(--r-sm, 8px);
  padding: 0.8rem 0.9rem;
  color: var(--text-primary);
  font-size: 0.84rem;
  display: none;
}

.ff-toast.open { display: block; }

/* ---- responsive ---------------------------------------------------------- */

html[data-sidebar-v2] .ff-shell { padding-bottom: 4.5rem; }

@media (max-width: 980px) {
  .ff-toolbar,
  .ff-layout,
  .ff-dashboard { grid-template-columns: 1fr; }
  .ff-search-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ff-board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ff-kpis {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
  }
  .ff-kpis::-webkit-scrollbar { display: none; }
  .ff-kpi { min-width: 160px; flex: 0 0 auto; }
}

@media (max-width: 720px) {
  .ff-shell { padding-bottom: 5.25rem; }
  .ff-location-switch { justify-content: stretch; }
  .ff-location-switch label { flex: 1; }
  .ff-actions { width: 100%; }
  .ff-actions .btn.btn-solid { flex: 1; justify-content: center; }
  .ff-scope-pills { justify-content: flex-start; }
  .ff-search-results,
  .ff-board-grid,
  .ff-availability,
  .ff-calendar,
  .ff-mini-grid,
  .ff-cards { grid-template-columns: 1fr; }
  .ff-form { grid-template-columns: 1fr; }
  .ff-drawer,
  .ff-drawer.with-secondary { inset: 0; width: 100vw; }
  .ff-rail, .ff-main, .ff-secondary { border-radius: 0; }
  .ff-secondary { display: none; }
  /* Full-screen sheet on mobile: body clears the sticky action bar + notch. */
  .ff-drawer-body, .ff-sec-body { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
  .ff-drawer-foot {
    position: sticky;
    bottom: 0;
    background: var(--panel-bg);
    padding: 0.8rem 1.1rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--panel-border);
    z-index: 2;
  }
  .ff-meta-grid { grid-template-columns: 1fr; }
  /* sticky primary action on mobile */
  .ff-shell > .page-header .page-actions {
    position: sticky;
    bottom: 0.75rem;
    z-index: 20;
  }
}

/* ---- smart pickers ------------------------------------------------------- */

.ff-picker { position: relative; }

.ff-picker-search {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--panel-bg);
  color: var(--text-primary);
  border-radius: var(--r-sm, 8px);
  padding: 0.55rem 0.65rem;
  font: inherit;
  font-size: 0.84rem;
  min-height: 40px;
}

.ff-picker-search:focus { outline: none; border-color: var(--ff-accent); }

.ff-picker-results {
  display: none;
  margin-top: 0.3rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--r-sm, 8px);
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
  max-height: 220px;
  overflow: auto;
}

.ff-picker-results.open { display: block; }

.ff-picker-hit,
.ff-picker-create {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  padding: 0.55rem 0.65rem;
  font: inherit;
}

.ff-picker-hit:hover,
.ff-picker-create:hover { background: var(--surface-soft, rgba(27, 46, 90, 0.05)); }

.ff-picker-hit strong { font-size: 0.84rem; font-weight: 700; }
.ff-picker-hit span { margin-left: auto; color: var(--text-muted); font-size: 0.74rem; }

.ff-picker-create {
  color: var(--ff-accent);
  font-weight: 800;
  font-size: 0.8rem;
  border-bottom: 0;
}

.ff-picker-empty {
  padding: 0.6rem 0.65rem;
  color: var(--text-muted);
  font-size: 0.78rem;
}

/* second-level focused popup (create customer without leaving the form) */
.ff-mini-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9650;
  background: rgba(15, 23, 42, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.ff-mini-modal-backdrop.open { display: flex; }

.ff-mini-modal {
  width: min(440px, 100%);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-lg, 16px);
  background: var(--panel-bg);
  box-shadow: 0 24px 70px rgba(9, 18, 36, 0.4);
  overflow: hidden;
}

.ff-mini-modal .ff-form { grid-template-columns: 1fr; }

/* focused per-mode header: compact KPI strip + slim search (no global dump) */
.ff-kpis-slim { margin-bottom: 0; }
.ff-toolbar-slim { grid-template-columns: 1fr; }

/* ---- polished drawer content (Farming fmd-* aesthetic) ------------------- */
.ff-main .fmd-hero, .ff-secondary .fmd-hero {
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--surface-soft, var(--panel-bg)); border: 1px solid var(--panel-border);
  border-radius: 16px; padding: 0.85rem 0.9rem; margin-bottom: 0.9rem;
}
.fmd-avatar {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; font-size: 1.02rem;
  background: var(--ff-accent);
}
.fmd-avatar svg { width: 22px; height: 22px; }
.fmd-hero-name { font-size: 1.05rem; font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fmd-hero-sub { font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fmd-status-pill { margin-left: auto; flex-shrink: 0; font-size: 0.66rem; font-weight: 800; padding: 0.28rem 0.6rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; background: rgba(var(--ff-accent-rgb), 0.14); color: var(--ff-accent); }
.fmd-status-pill.done { background: rgba(34, 179, 120, 0.14); color: var(--green, #22b378); }
.fmd-status-pill.active { background: rgba(59, 130, 246, 0.14); color: #3B82F6; }
.fmd-status-pill.plan, .fmd-status-pill.warn { background: rgba(220, 157, 40, 0.16); color: var(--amber, #dc9d28); }
.fmd-status-pill.danger { background: rgba(247, 82, 90, 0.12); color: var(--red, #f7525a); }
.fmd-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; padding: 0.2rem 0 0.9rem; border-bottom: 1px solid var(--panel-border); margin-bottom: 0.9rem; }
.fmd-meta .mi .k { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.fmd-meta .mi .v { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); margin-top: 0.18rem; word-break: break-word; }
.fmd-ledger { display: flex; align-items: center; gap: 0.9rem; background: var(--surface-soft, var(--panel-bg)); border: 1px solid var(--panel-border); border-radius: 14px; padding: 0.7rem 0.85rem; margin-bottom: 1rem; flex-wrap: wrap; }
.fmd-ledger .li .k { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.fmd-ledger .li .v { font-size: 0.9rem; font-weight: 800; color: var(--text-primary); margin-top: 0.1rem; }
.fmd-ledger-action { margin-left: auto; }
.fmd-cta { border: none; border-radius: 999px; background: var(--ff-accent); color: #fff; font-weight: 800; font-size: 0.78rem; padding: 0.5rem 0.9rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.fmd-cta.ghost { background: var(--surface-soft, rgba(27, 46, 90, 0.06)); color: var(--text-secondary); }
.fmd-section-title { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 1rem 0 0.55rem; }
.fmd-info { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1rem; }
.fmd-info .ii .k { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.fmd-info .ii .v { font-size: 0.84rem; font-weight: 700; color: var(--text-primary); margin-top: 0.15rem; word-break: break-word; }
.fmd-quick { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.4rem 0 0.2rem; }
.fmd-tl { position: relative; display: grid; gap: 0.85rem; }
.fmd-tl-item { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 0.55rem; }
.fmd-tl-dot::before { content: ""; position: absolute; left: 11px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--ff-accent); box-shadow: 0 0 0 4px var(--panel-bg); }
.fmd-tl-item:not(:last-child) .fmd-tl-dot::after { content: ""; position: absolute; left: 16px; top: 19px; bottom: -0.85rem; width: 2px; background: var(--panel-border); }
.fmd-tl-card { border: 1px solid var(--panel-border); border-radius: 14px; padding: 0.7rem 0.8rem; background: var(--panel-bg); }
.fmd-tl-card .nm { font-size: 0.84rem; font-weight: 700; color: var(--text-primary); }
.fmd-tl-card .mt { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.12rem; }
.fmd-empty { text-align: center; padding: 2rem 1rem; color: var(--text-muted); font-size: 0.84rem; }

/* ---- mode switch (Farming-style top toggle) ------------------------------ */
.ff-mode-switch {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}
.ff-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  min-height: 40px;
  padding: 0 1rem;
  border-radius: 999px;
  transition: all 0.15s;
}
.ff-mode-btn .ff-icon { width: 17px; height: 17px; }
.ff-mode-btn:hover { border-color: var(--border-strong); color: var(--text-primary); }
.ff-mode-btn.active {
  background: var(--ff-accent);
  border-color: var(--ff-accent);
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--ff-accent-rgb), 0.32);
}

.ff-page-head { align-items: center; }

/* ---- "+ New" primary dropdown (Accounting-style) ------------------------- */
/* Single "+ New <tab>" button with an inline caret that opens a 2-column
   grouped menu (Accounting +New design). Label follows the current tab. */
.ff-new-dd { position: relative; display: inline-flex; }
.ff-new-btn { font-weight: 800; display: inline-flex; align-items: center; gap: 0.35rem; }
.ff-caret {
  width: 0.5rem; height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 0.15rem;
  margin-top: -3px;
  opacity: 0.95;
  transition: transform 0.15s;
}
.ff-new-dd.open .ff-new-btn .ff-caret { transform: rotate(-135deg); margin-top: 1px; }
.ff-new-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: min(460px, calc(100vw - 2rem));
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-md, 12px);
  box-shadow: 0 16px 44px rgba(9, 18, 36, 0.22);
  padding: 0.6rem;
  z-index: 60;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 0 0.9rem;
}
.ff-new-dd.open .ff-new-menu { display: grid; }
.ff-new-col { min-width: 0; }
.ff-new-col-head {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.35rem 0.5rem 0.4rem;
}
.ff-new-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.46rem 0.55rem;
  border-radius: var(--r-sm, 8px);
}
.ff-new-item .ff-icon { width: 16px; height: 16px; color: var(--ff-accent); flex: none; }
.ff-new-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-new-item:hover { background: var(--surface-soft, rgba(27, 46, 90, 0.06)); }
.ff-new-item.current { background: rgba(var(--ff-accent-rgb), 0.12); color: var(--ff-accent); }
@media (max-width: 640px) {
  .ff-new-menu { grid-template-columns: 1fr; min-width: min(300px, calc(100vw - 2rem)); }
}

@media (max-width: 720px) {
  .ff-mode-switch { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .ff-mode-switch::-webkit-scrollbar { display: none; }
  .ff-mode-btn { flex: 0 0 auto; }
  .ff-report-controls { grid-template-columns: 1fr 1fr; }
  .ff-report-export { grid-column: 1 / -1; justify-items: stretch; }
  .ff-report-export em { max-width: none; text-align: left; }
}

@media (max-width: 480px) {
  .ff-report-controls { grid-template-columns: 1fr; }
}

/* ---- editable per-mode settings form ------------------------------------- */
.ff-settings-form { display: block; }
.ff-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.7rem 1rem;
  margin: 0.5rem 0 0.2rem;
}
.ff-setting { display: grid; gap: 0.3rem; min-width: 0; }
.ff-setting > span { font-size: 0.74rem; font-weight: 700; color: var(--text-secondary); }
.ff-setting input[type="number"],
.ff-setting input[type="text"],
.ff-setting select {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--panel-bg);
  color: var(--text-primary);
  border-radius: var(--r-sm, 8px);
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-size: 0.84rem;
  min-height: 38px;
}
.ff-setting input:focus, .ff-setting select:focus { outline: none; border-color: var(--ff-accent); }
.ff-switch { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; min-height: 38px; }
.ff-switch input { width: 18px; height: 18px; accent-color: var(--ff-accent); }
.ff-switch span { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); }
.ff-settings-foot { margin-top: 1rem; display: flex; justify-content: flex-end; }

/* ---- drawer status control + row actions + reminders --------------------- */
.ff-status-set { display: inline-flex; align-items: center; gap: 0.4rem; margin-right: auto; }
.ff-status-set > span { font-size: 0.72rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; }
.ff-status-set select {
  min-height: 36px; border: 1px solid var(--panel-border); border-radius: var(--r-sm, 8px);
  background: var(--panel-bg); color: var(--text-primary); padding: 0.3rem 0.5rem; font: inherit; font-size: 0.82rem;
}
.ff-row-actions { white-space: nowrap; text-align: right; }
.btn-xs { min-height: 28px; padding: 0.2rem 0.55rem; font-size: 0.74rem; }
.btn-ghost { background: transparent; border: 1px solid var(--panel-border); color: var(--text-secondary); border-radius: var(--r-sm, 8px); cursor: pointer; }
.btn-ghost:hover { border-color: var(--ff-accent); color: var(--text-primary); }
.ff-notif-list { list-style: none; margin: 0.6rem 0.2rem; padding: 0; display: grid; gap: 0.5rem; }
.ff-notif { border: 1px solid var(--panel-border); border-left: 3px solid var(--ff-accent); border-radius: var(--r-sm, 8px); padding: 0.55rem 0.7rem; background: var(--surface-soft, var(--panel-bg)); }
.ff-notif.danger { border-left-color: var(--ff-red); }
.ff-notif-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ff-notif-row strong { font-size: 0.82rem; color: var(--text-primary); }
.ff-notif-chan { font-size: 0.64rem; font-weight: 800; text-transform: uppercase; color: var(--text-muted); }
.ff-notif-body { margin-top: 0.2rem; font-size: 0.76rem; color: var(--text-secondary); }

/* ---- settings page: lead with full-width per-mode operational config ------ */
.ff-settings-page { display: grid; gap: 0.85rem; }
.ff-settings-config { width: 100%; }
.ff-settings-config .ff-subsection { margin-bottom: 0.4rem; }
.ff-settings-config .ff-subsection h3 {
  font-size: 0.78rem; font-weight: 800; color: var(--ff-accent);
  text-transform: uppercase; letter-spacing: 0.04em; margin: 0.6rem 0 0.3rem;
}