/* ==========================================================================
   Shared components
   ========================================================================== */

/* --- Card ----------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  min-width: 0;
}
.card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4) 0;
}
.card-head-main { flex: 1 1 auto; min-width: 0; }
.card-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.card-meta {
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.card-meta .sep { color: var(--border-strong); }
.card-body { padding: var(--s-4); }
.card-body-flush { padding: 0; }
.card-foot {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: var(--fs-xs);
  color: var(--text-2);
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.btn:hover { background: var(--bg-sunken); border-color: var(--navy-200); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: #fff;
}
.btn-primary:hover { background: var(--navy-600); border-color: var(--navy-600); }

.btn-accent {
  background: var(--coral-600);
  border-color: var(--coral-600);
  color: #fff;
}
.btn-accent:hover { background: var(--coral-700); border-color: var(--coral-700); }

.btn-ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--bg-sunken); color: var(--text); }

.btn-sm { min-height: 30px; font-size: var(--fs-xs); padding: 0 var(--s-2); }
.btn-block { width: 100%; }

.btn-group {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface);
}
.btn-group > button {
  padding: 0 var(--s-3);
  min-height: 32px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  border-inline-end: 1px solid var(--border);
  white-space: nowrap;
}
.btn-group > button:last-child { border-inline-end: none; }
.btn-group > button:hover { background: var(--bg-sunken); }
.btn-group > button.is-active { background: var(--navy-700); color: #fff; }

/* --- Badges & chips ------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xxs);
  font-weight: var(--fw-semibold);
  line-height: 1.6;
  white-space: nowrap;
}
.badge-pos { background: var(--pos-050); color: var(--pos-700); }
.badge-neg { background: var(--neg-050); color: var(--neg-700); }
.badge-warn { background: var(--warn-050); color: var(--warn-700); }
.badge-info { background: var(--info-050); color: var(--info-600); }
.badge-neutral { background: var(--bg-sunken); color: var(--text-2); }
.badge-demo {
  background: var(--gold-050);
  color: var(--gold-700);
  border: 1px solid var(--gold-200);
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.trend { display: inline-flex; align-items: center; gap: 3px; font-weight: var(--fw-semibold); }
.trend-pos { color: var(--pos-600); }
.trend-neg { color: var(--neg-600); }
.trend-flat { color: var(--text-3); }
.trend-na { color: var(--text-3); font-weight: var(--fw-medium); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 10px;
  border-radius: var(--r-pill);
  background: var(--navy-050);
  border: 1px solid var(--navy-200);
  font-size: var(--fs-xs);
  color: var(--navy-700);
  max-width: 260px;
}
html[dir="rtl"] .chip { padding: 3px 10px 3px 6px; }
.chip-key { color: var(--text-3); font-weight: var(--fw-medium); }
.chip-val { font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-x {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--navy-400);
  font-size: 13px;
  line-height: 1;
  flex: 0 0 18px;
}
.chip-x:hover { background: var(--navy-200); color: var(--navy-800); }

/* --- Filter bar ----------------------------------------------------------- */

.filterbar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
  box-shadow: var(--shadow-xs);
}
.filterbar-main {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3);
  flex-wrap: wrap;
}
.filterbar-actions { display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; }
.filterbar-adv {
  border-top: 1px solid var(--border);
  padding: var(--s-3);
  display: none;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.filterbar-adv.is-open { display: grid; }
.filterbar-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 var(--s-3) var(--s-3);
  align-items: center;
}
.filterbar-chips:empty { display: none; }

/* Mobile: the filter bar collapses behind a single control so it does not
   consume the first screen. Active chips stay visible while collapsed. */
.filterbar-mobile { display: none; }

@media (max-width: 768px) {
  .filterbar-mobile {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    width: 100%;
    padding: var(--s-3);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text);
    min-height: 46px;
    text-align: start;
  }
  .filterbar-mobile .spacer { flex: 1 1 auto; }
  .filterbar-mobile .ms-count { background: var(--brand-500); }
  .filterbar-mobile svg:last-child { transition: transform var(--t-fast) var(--ease); }
  .filterbar:not(.is-collapsed) .filterbar-mobile svg:last-child { transform: rotate(180deg); }

  .filterbar.is-collapsed .filterbar-main,
  .filterbar.is-collapsed .filterbar-adv { display: none; }

  .filterbar-main { border-top: 1px solid var(--border); }
  .filterbar-main .field,
  .filterbar-main .ms { flex: 1 1 100% !important; }
  .filterbar-actions { width: 100%; }
  .filterbar-actions .btn { flex: 1 1 auto; min-height: 42px; }
  .filterbar-adv { grid-template-columns: 1fr; }
  .input, .select, .ms-toggle { min-height: 42px; font-size: var(--fs-body); }
}

.field { min-width: 0; }
.field-label {
  display: block;
  font-size: var(--fs-xxs);
  font-weight: var(--fw-semibold);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-bottom: 4px;
}
.input,
.select {
  width: 100%;
  min-height: 36px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--fs-sm);
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input:focus,
.select:focus { outline: none; border-color: var(--coral-600); box-shadow: var(--ring); }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2374818f' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  padding-inline-end: 28px;
}
html[dir="rtl"] .select { background-position: left 10px center; }

/* Multi-select dropdown */
.ms { position: relative; min-width: 0; }
.ms-toggle {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--fs-sm);
  text-align: start;
}
.ms-toggle:hover { border-color: var(--navy-200); }
.ms-toggle.has-value { border-color: var(--navy-400); background: var(--navy-050); }
.ms-toggle-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-count {
  flex: 0 0 auto;
  background: var(--navy-700);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: var(--fs-xxs);
  font-weight: var(--fw-bold);
  padding: 1px 6px;
}
.ms-panel {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-start: 0;
  min-width: 100%;
  width: max-content;
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-popover);
  display: none;
  flex-direction: column;
  max-height: 320px;
}
.ms-panel.is-open { display: flex; }
.ms-search { padding: var(--s-2); border-bottom: 1px solid var(--border); }
.ms-list { overflow-y: auto; padding: var(--s-1); flex: 1 1 auto; }
.ms-opt {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
  min-height: 34px;
}
.ms-opt:hover { background: var(--bg-sunken); }
.ms-opt input { accent-color: var(--coral-600); width: 15px; height: 15px; flex: 0 0 15px; }
.ms-opt-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-foot {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-2);
  border-top: 1px solid var(--border);
}
.ms-empty { padding: var(--s-4); text-align: center; color: var(--text-3); font-size: var(--fs-xs); }

/* --- KPI card ------------------------------------------------------------- */

.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
  position: relative;
  text-align: start;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.kpi.is-clickable { cursor: pointer; }
.kpi.is-clickable:hover { border-color: var(--navy-200); box-shadow: var(--shadow-sm); }
.kpi.is-primary { border-inline-start: 3px solid var(--coral-600); }

.kpi-head { display: flex; align-items: flex-start; gap: 6px; }
.kpi-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  flex: 1 1 auto;
  min-width: 0;
}
.kpi-value {
  font-size: var(--fs-kpi);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
}
.kpi-unit { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-3); letter-spacing: 0; }
.kpi-value.is-na { color: var(--text-3); font-size: var(--fs-h1); }
.kpi-compare {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--text-3);
  flex-wrap: wrap;
}
.kpi-spark { height: 30px; margin-top: auto; }
.kpi-note { font-size: var(--fs-xxs); color: var(--text-3); }

.info-i {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--text-3);
  font-size: 9px;
  font-weight: var(--fw-bold);
  display: grid;
  place-items: center;
  cursor: help;
}
.info-i:hover { border-color: var(--coral-600); color: var(--coral-600); }

/* Tooltip (KPI definitions) */
.tip {
  position: fixed;
  z-index: var(--z-popover);
  max-width: 300px;
  background: var(--navy-800);
  color: #fff;
  padding: var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  line-height: 1.45;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}
.tip-title { font-weight: var(--fw-bold); margin-bottom: 4px; }
.tip-row { color: var(--navy-200); margin-top: 5px; }
.tip-row b { color: #fff; font-weight: var(--fw-semibold); }

/* --- Progress / meter ---------------------------------------------------- */

.meter { height: 6px; border-radius: var(--r-pill); background: var(--bg-sunken); overflow: hidden; }
.meter-fill { height: 100%; border-radius: var(--r-pill); background: var(--navy-600); transition: width var(--t-base) var(--ease); }
.meter-fill.is-pos { background: var(--pos-600); }
.meter-fill.is-warn { background: var(--warn-600); }
.meter-fill.is-neg { background: var(--neg-600); }

/* --- Data table ----------------------------------------------------------- */

.table-wrap { width: 100%; overflow-x: auto; }
.dt { width: 100%; font-size: var(--fs-sm); }
.dt thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-inset);
  text-align: start;
  font-size: var(--fs-xxs);
  font-weight: var(--fw-bold);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  padding: var(--s-3);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.dt thead th.is-sortable { cursor: pointer; user-select: none; }
.dt thead th.is-sortable:hover { color: var(--text); background: var(--bg-sunken); }
.dt thead th .sort-ind { color: var(--coral-600); font-size: 9px; margin-inline-start: 3px; }
.dt tbody td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.dt tbody tr:hover td { background: var(--surface-inset); }
.dt tbody tr.is-clickable { cursor: pointer; }
.dt .num { text-align: end; font-variant-numeric: tabular-nums; }
.dt th.num { text-align: end; }
.dt tfoot td {
  padding: var(--s-3);
  font-weight: var(--fw-bold);
  background: var(--surface-inset);
  border-top: 2px solid var(--border-strong);
}
.dt-rank { color: var(--text-3); font-variant-numeric: tabular-nums; width: 34px; }
.dt-name { font-weight: var(--fw-medium); }
.dt-sub { font-size: var(--fs-xxs); color: var(--text-3); }
.dt-group-row td { background: var(--navy-050); font-weight: var(--fw-semibold); }
.dt-expand {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  color: var(--text-3);
  font-size: 10px;
  margin-inline-end: 6px;
}

.table-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.table-foot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-2);
  flex-wrap: wrap;
}
.pager { display: flex; align-items: center; gap: var(--s-1); margin-inline-start: auto; }
.pager button {
  min-width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--fs-xs);
  color: var(--text-2);
  padding: 0 6px;
}
.pager button:hover:not(:disabled) { background: var(--bg-sunken); }
.pager button.is-active { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.pager button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Mobile card rendering of a table */
.mobile-cards { display: none; }
.mc {
  border-bottom: 1px solid var(--border);
  padding: var(--s-3);
}
.mc-head { display: flex; align-items: baseline; gap: var(--s-2); }
.mc-title { font-weight: var(--fw-semibold); flex: 1 1 auto; min-width: 0; }
.mc-value { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px var(--s-3); margin-top: var(--s-2); }
.mc-row { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-xs); }
.mc-k { color: var(--text-3); }
.mc-v { font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }

@media (max-width: 768px) {
  .dt-responsive .table-wrap { display: none; }
  .dt-responsive .mobile-cards { display: block; }
}

/* --- States --------------------------------------------------------------- */

.state {
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s-10) var(--s-4);
  gap: var(--s-2);
}
.state-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-sunken);
  color: var(--text-3);
  margin-bottom: var(--s-1);
}
.state-icon.is-warn { background: var(--warn-050); color: var(--warn-600); }
.state-icon.is-neg { background: var(--neg-050); color: var(--neg-600); }
.state-icon.is-lock { background: var(--navy-050); color: var(--navy-600); }
.state-title { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
.state-text { font-size: var(--fs-sm); color: var(--text-2); max-width: 420px; }
.state-actions { margin-top: var(--s-2); display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: center; }

.skel { background: linear-gradient(90deg, var(--bg-sunken) 25%, #f2f5f9 37%, var(--bg-sunken) 63%);
  background-size: 400% 100%;
  animation: skel 1.3s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skel-text { height: 11px; margin-bottom: 7px; }
.skel-kpi { height: 108px; }
.skel-chart { height: 280px; }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* --- Banners -------------------------------------------------------------- */

.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid;
  font-size: var(--fs-sm);
  margin-bottom: var(--s-4);
}
.banner-main { flex: 1 1 auto; min-width: 0; }
.banner-title { font-weight: var(--fw-semibold); }
.banner-text { color: inherit; opacity: 0.88; margin-top: 2px; font-size: var(--fs-xs); }
.banner-demo { background: var(--gold-050); border-color: var(--gold-200); color: var(--gold-700); }
.banner-warn { background: var(--warn-050); border-color: #f2dcb4; color: var(--warn-700); }
.banner-neg { background: var(--neg-050); border-color: #f3cdc9; color: var(--neg-700); }
.banner-info { background: var(--navy-050); border-color: var(--navy-200); color: var(--navy-700); }

/* --- Insight card --------------------------------------------------------- */

.insight {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  border-inline-start: 3px solid var(--border-strong);
}
.insight.sev-high { border-inline-start-color: var(--neg-600); }
.insight.sev-med { border-inline-start-color: var(--warn-600); }
.insight.sev-low { border-inline-start-color: var(--info-600); }
.insight-main { flex: 1 1 auto; min-width: 0; }
.insight-title { font-weight: var(--fw-semibold); font-size: var(--fs-body); }
.insight-what { font-size: var(--fs-sm); color: var(--text-2); margin-top: 3px; }
.insight-meta {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-3);
  font-size: var(--fs-xxs);
  color: var(--text-3);
}
.insight-ev {
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--surface-inset);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.insight-ev dl { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s-3); margin: 0; }
.insight-ev dt { color: var(--text-3); }
.insight-ev dd { margin: 0; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.insight-actions { display: flex; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; }

/* --- Definition list / meta grid ----------------------------------------- */

.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-3) var(--s-4); }
.meta-item { min-width: 0; }
.meta-k {
  font-size: var(--fs-xxs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: var(--fw-semibold);
}
.meta-v { font-size: var(--fs-sm); font-weight: var(--fw-medium); margin-top: 2px; }

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

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 26, 43, 0.5);
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
}
.modal-overlay.active { display: flex; }
.modal {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-lg { max-width: 920px; }
.modal-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.modal-title { font-size: var(--fs-h2); font-weight: var(--fw-semibold); flex: 1 1 auto; min-width: 0; }
.modal-body { padding: var(--s-4); overflow-y: auto; flex: 1 1 auto; }
.modal-foot {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--s-2);
  justify-content: flex-end;
  flex: 0 0 auto;
  background: var(--surface-2);
}

@media (max-width: 768px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .modal-foot { flex-direction: column-reverse; }
  .modal-foot .btn { width: 100%; min-height: 44px; }
}

/* --- Toast ---------------------------------------------------------------- */

.toast-host {
  position: fixed;
  inset-inline-end: var(--s-4);
  bottom: var(--s-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  pointer-events: none;
}
.toast {
  background: var(--navy-800);
  color: #fff;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-lg);
  max-width: 340px;
  animation: toast-in var(--t-base) var(--ease);
}
.toast-pos { background: var(--pos-700); }
.toast-neg { background: var(--neg-700); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 768px) {
  .toast-host { inset-inline: var(--s-3); bottom: calc(var(--bottomnav-h) + 16px + env(safe-area-inset-bottom, 0px)); }
  .toast { max-width: none; }
}

/* --- Menu (export, profile, column visibility) --------------------------- */

.menu-wrap { position: relative; }
.menu {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-end: 0;
  min-width: 206px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-popover);
  padding: var(--s-1);
  display: none;
  max-height: 340px;
  overflow-y: auto;
}
.menu.is-open { display: block; }
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: 8px var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text);
  text-align: start;
  min-height: 36px;
}
.menu-item:hover { background: var(--bg-sunken); }
.menu-item.is-active { color: var(--coral-600); font-weight: var(--fw-semibold); }
.menu-sep { height: 1px; background: var(--border); margin: var(--s-1) 0; }
.menu-head {
  padding: 6px var(--s-2);
  font-size: var(--fs-xxs);
  font-weight: var(--fw-bold);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

/* --- Tabs ----------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  margin-bottom: var(--s-4);
}
.tab {
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  min-height: 42px;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--navy-700); border-bottom-color: var(--coral-600); font-weight: var(--fw-semibold); }

/* --- Misc ----------------------------------------------------------------- */

.muted { color: var(--text-3); }
.small { font-size: var(--fs-xs); }
.xsmall { font-size: var(--fs-xxs); }
.strong { font-weight: var(--fw-semibold); }
.nowrap { white-space: nowrap; }
.na { color: var(--text-3); font-weight: var(--fw-medium); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--s-4); }
.mb-0 { margin-bottom: 0; }
.hidden { display: none !important; }