/* ==========================================================================
   DENSITY LAYER — global "zoom-out" + responsive tuning + polish.
   Loaded LAST (after ui-audit-fixes.css); re-maps ocean-finance tokens by
   source order, no !important needed on token re-declarations.
   Primary responsive target: Pixel Fold 2 unfolded (~840x860 CSS px).
   ========================================================================== */

/* ── 1. Global density tokens ─────────────────────────────────────────── */
:root,
[data-theme="light"],
[data-theme="dark"],
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --font-size-base: 14px;   /* was 16 */
  --font-size-md:   14px;   /* was 16 */
  --font-size-lg:   15px;   /* was 17 */
  --font-size-xl:   18px;   /* was 21 */
  --font-size-2xl:  22px;   /* was 28 */
  --font-size-3xl:  26px;   /* was 34 */
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  --spacing-1: 6px;
  --spacing-2: 12px;
  --spacing-3: 18px;
  --spacing-4: 24px;
  --spacing-5: 32px;
  --spacing-6: 40px;
  --spacing-7: 48px;
  --spacing-8: 52px;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --control-radius: 7px;

  --tbl-body-font-size: 13px;   /* was 15 */
  --tbl-header-font-size: 11px; /* was 12 */
  --tbl-cell-pad-y: 8px;        /* was 14 */
  --tbl-cell-pad-x: 12px;       /* was 18 */
  --tbl-header-pad-y: 9px;      /* was 13 */
  --tbl-radius: 10px;

  --layout-page-padding: 1.25rem;  /* was 2rem */
  --layout-sidebar-width: 268px;   /* was 280; widened from 248 so the rail fills the left column */
  --layout-topbar-height: 48px;    /* was 56 */
  --ui-stack-gap: 12px;
}

/* rem-based sizes shrink with this too (overrides components.css html rule) */
html { font-size: 14px; }

/* Laptop/desktop renders at 80% scale — browser-zoom 80% is the new 100%.
   Scales content AND sidebar uniformly; phone/fold bands keep 1:1 so touch
   targets and the 840x860 fold tuning are unaffected. */
@media (min-width: 1025px) {
  body { zoom: 0.8; }
}

/* Fold 2 inner must stay 1:1 even if a future CSS width crosses 1025. */
html.ui-vp-fold2 body,
html.ui-vp-cover-land body {
  zoom: 1;
}

/* ── 2. Hard-coded px offenders (same selectors, ~80% scale) ──────────── */
.stat-card-value { font-size: 22px; }
.section-hero h1,
.page-title { font-size: 18px; }
.section-hero-title { font-size: 18px; }
.section-hero-icon { font-size: 18px; }
.module-card-icon { font-size: 18px; }
.home-stat-value { font-size: 17px; }
.home-stat-icon { font-size: 16px; }
.dash-tile-icon { font-size: 19px; }
#timeTriggerModal .modal-title { font-size: 15px; }
.summary-tile-value { font-size: 18px; }
.summary-card-content h3 { font-size: 24px; }
.summary-content h3 { font-size: 22px; }
.summary-card-icon { width: 44px; height: 44px; font-size: 19px; }
.summary-icon { width: 40px; height: 40px; font-size: 19px; }
.empty-state-text { font-size: 14px; }
.empty-state-title { font-size: 15px; }
.critical-header h2 { font-size: 15px; }
.report-card-icon { width: 44px; height: 44px; font-size: 22px; margin-bottom: 14px; }
.report-card-title { font-size: 15px; }
.report-card { padding: 20px; }
.config-panel-icon { font-size: 16px; }
.generation-card h3 { font-size: 14px; }
.bafin-upload-title { font-size: 14px; }
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .bafin-tr-main-title { font-size: 19px; }
.tr-gen-danger-title { font-size: 14px; }
.ao-group-hero-prefix { font-size: 15px; }
.ava-config-card-client { font-size: 14px; }
.cm-summary-num { font-size: 19px; }
.account-overview-roster .ao-card-broker { font-size: 16px; }
.login-info-wrap .li-card--broker .li-card-title-name { font-size: 18px; }
.sidebar-brand-main { font-size: 14px; }
.search-icon,
.website-link-icon { font-size: 14px; }
.back-button::before { font-size: 15px; }

/* Headings driven by tokens already shrink; normalize page chrome */
.page-subtitle { font-size: var(--font-size-sm); }

/* ── 3. Responsive tuning ─────────────────────────────────────────────── */

/* Fold unfolded / tablet band, tuned at 840x860 (near-square) */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  :root,
  [data-theme="light"],
  [data-theme="dark"] {
    --layout-page-padding: 1rem;
  }

  .report-cards-grid,
  .reports-grid,
  .module-grid,
  .summary-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-chart-body,
  .chart-container,
  .chart-wrapper {
    max-height: 46vh;
  }
}

/* Phone: single-column stat/summary grids up to 600px */
@media screen and (max-width: 600px) {
  .summary-cards,
  .summary-grid,
  .reports-grid,
  .module-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 4. Polish pass ───────────────────────────────────────────────────── */

/* Card rhythm: no nested double chrome */
.section-card .section-card,
.info-card .info-card,
.page-card .page-card {
  border: none;
  box-shadow: none;
  background: transparent;
}

/* Tables: keep headers on one line; charts never overflow */
.standard-table th,
.data-table th { white-space: nowrap; }
canvas { max-width: 100%; }

/* Buttons: denser padding on fine pointers; 44px targets stay on touch */
@media (pointer: fine) {
  .btn { padding-block: 7px; font-size: var(--font-size-sm); }
  .form-input, .form-select { padding-block: 7px; }
}

/* Forms: uniform label rhythm */
label,
.form-label {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}
.form-group { margin-bottom: var(--spacing-2); }

/* Empty states: calmer, centered */
.empty-state { padding: var(--spacing-5) var(--spacing-3); }
.empty-state-icon { font-size: 36px; margin-bottom: 12px; }

/* ── 5. Persistent sidebar fills the left side ────────────────────────────
   The base rule vertically-centers the floating panel (top:50%/translateY,
   height/min-height/max-height all = --sidebar-panel-max-height = 88vh) so it
   reads as a small centered card. Make it span nearly the full viewport height
   while keeping the floating, rounded, inset glass look.

   Desktop (≥1025px) runs under `body{zoom:0.8}` (§ top of this file): the
   fixed sidebar renders in the zoomed coordinate space, so a `100vh`-derived
   height paints at ×0.8 and undershoots the real viewport. Compensate by
   dividing the fill height by the same 0.8 factor. Redefining the shared
   --sidebar-panel-max-height token updates every consumer (base .sidebar
   height/min-height/max-height at components.css:3645 & 18247) in one place.
   Scoped to ≥1025px ONLY — the ≤1024px drawer keeps its own sizing + the
   translateX hide/show transform, which we must not clobber. */
@media (min-width: 1025px) {
  :root,
  [data-theme="light"],
  [data-theme="dark"] {
    --sidebar-panel-max-height: calc(
      (100vh - 2 * var(--shell-float-inset)) / 0.8
    );
  }
  .sidebar {
    top: calc(var(--shell-float-inset) / 0.8);
    bottom: auto;
    transform: none;
  }
}

/* ── 6. Table column-width utilities ──────────────────────────────────────
   Pair with the default table-layout:auto. Add these classes to <th> AND the
   matching <td> so a column sizes to its content instead of grabbing equal
   share. Mirrors the existing .col-date pattern.
     .col-shrink → ID / status / badge / action columns collapse to content
     .col-num    → numeric/amount columns: tight, right-aligned, tabular figures
     .col-grow   → name / notes / description columns absorb the freed width
   Design: set NO explicit widths — table-layout:auto already sizes every
   column to its content, distributing slack toward the widest (name/notes)
   columns. Browsers ignore min-width on table cells and let a width:100%/1px
   column zero out its neighbours, so width tricks backfire here. Instead these
   classes only tune wrapping/alignment:
     .col-shrink → keep short values (ID/status/badge/action) on one line
     .col-num    → numeric: one line, right-aligned, tabular figures
     .col-grow   → show name/notes/description in full (no ellipsis truncation);
                   the column claims its content width and soaks up slack.
   Scoped to the table classes so they out-specify the base `.data-table td`. */
.table th.col-shrink,   .table td.col-shrink,
.data-table th.col-shrink, .data-table td.col-shrink,
.standard-data-table th.col-shrink, .standard-data-table td.col-shrink,
.brokers-table th.col-shrink, .brokers-table td.col-shrink,
.nlog-table th.col-shrink, .nlog-table td.col-shrink,
.ft-table th.col-shrink, .ft-table td.col-shrink {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.table th.col-num,   .table td.col-num,
.data-table th.col-num, .data-table td.col-num,
.standard-data-table th.col-num, .standard-data-table td.col-num,
.brokers-table th.col-num, .brokers-table td.col-num,
.ft-table th.col-num, .ft-table td.col-num {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.table th.col-num .th-cell,
.data-table th.col-num .th-cell,
.standard-data-table th.col-num .th-cell,
.brokers-table th.col-num .th-cell,
.ft-table th.col-num .th-cell { justify-content: flex-end; }

.table td.col-grow,
.data-table td.col-grow,
.standard-data-table td.col-grow,
.brokers-table td.col-grow,
.nlog-table td.col-grow,
.ft-table td.col-grow,
.table th.col-grow,
.data-table th.col-grow,
.standard-data-table th.col-grow,
.brokers-table th.col-grow,
.nlog-table th.col-grow,
.ft-table th.col-grow {
  /* No explicit width: auto-layout hands this column the slack (it has the
     widest content), so full values show wherever there's room. Ellipsis (not
     overflow) so if space is genuinely tight the value trims cleanly instead
     of overlapping the next column. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 7. Padding rhythm polish ─────────────────────────────────────────────
   Section cards: uniform interior padding; kill the gap when a card leads with
   a table (the table carries its own header strip). */
.section-card { padding: var(--spacing-4); }
.section-card > .dt-table-wrapper:first-child,
.section-card > .table-container:first-child { margin-top: calc(-1 * var(--spacing-1)); }

/* Page header: tighten the oversized bottom gap from --spacing-8 */
.page-header { margin-bottom: var(--spacing-5); padding-bottom: var(--spacing-4); }

/* ── 8. Broker evaluation status ──────────────────────────────────────────
   Inline per-row status picker on Broker Overview. Colours are theme-aware:
   the dashboard stamps data-theme on :root, and the light palette needs its
   own values because these tints are chosen against a dark surface. */
.broker-status-select {
  padding: 2px 6px;
  font-size: var(--font-size-sm, 12px);
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  max-width: 130px;
}
.broker-status-select.broker-status-approved  { color: #34d399; border-color: rgba(52, 211, 153, .45); }
.broker-status-select.broker-status-testing   { color: #fbbf24; border-color: rgba(251, 191, 36, .45); }
.broker-status-select.broker-status-evaluation{ color: #93c5fd; border-color: rgba(147, 197, 253, .45); }

:root[data-theme="light"] .broker-status-select.broker-status-approved  { color: #047857; border-color: rgba(4, 120, 87, .45); }
:root[data-theme="light"] .broker-status-select.broker-status-testing   { color: #b45309; border-color: rgba(180, 83, 9, .45); }
:root[data-theme="light"] .broker-status-select.broker-status-evaluation{ color: #1d4ed8; border-color: rgba(29, 78, 216, .45); }

/* ── 9. Margin tile → margin history chart ────────────────────────────────
   The Margin tile in Account Overview opens a 30-day chart. Only the affordance
   lives here; the tile's own layout is unchanged. */
.ao-group--clickable { cursor: pointer; position: relative; transition: border-color .15s ease, transform .15s ease; }
.ao-group--clickable:hover,
.ao-group--clickable:focus-visible { border-color: var(--accent, #3B82F6); }
.ao-group--clickable:focus-visible { outline: 2px solid var(--accent, #3B82F6); outline-offset: 2px; }
.ao-group-chart-hint {
  position: absolute;
  right: var(--spacing-3, 12px);
  bottom: var(--spacing-2, 8px);
  font-size: var(--font-size-xs, 11px);
  color: var(--text-secondary);
  opacity: 0;
  transition: opacity .15s ease;
}
.ao-group--clickable:hover .ao-group-chart-hint,
.ao-group--clickable:focus-visible .ao-group-chart-hint { opacity: 1; }

/* Wide variant of the shared modal panel, for the chart. */
.bm-modal-panel--wide { max-width: min(860px, 94vw); width: 100%; }