/* ===================== DASHBOARD V6 CSS =====================
   Extracted from dashboard.php (was an inline <style> block).
   Linked from dashboard.php with filemtime cache-busting. */

/* Two-column layout: main + sidebar (stacks on ≤1100px).
   Sidebar width matches exactly one KPI tile so the sidebar's left/right
   edges line up with the 4th KPI. KPI row is 4 equal cols with 14px gap,
   so each KPI = (100% - 3*14px) / 4. Dash-grid uses the same 14px gap. */
.app .dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc((100% - 42px) / 4);
    gap: 14px; align-items: start;
}
@media (max-width: 1100px) {
    .app .dash-grid { grid-template-columns: 1fr; }
    .app .dash-aside { order: 2; }
    .app .dash-main  { order: 1; }
}
.app .dash-main > .card + .card { margin-top: 14px; }
.app .dash-aside > .card + .card { margin-top: 12px; }

/* KPI accent delta (first card) already handled by .kpi.accent .value. */

/* Active companies stmt-table: clickable rows */
.app .stmt-table tr.row.clickable { cursor: pointer; transition: background 0.12s ease; }
.app .stmt-table tr.row.clickable:hover { background: var(--panel-2); }
.app .stmt-table tr.row.closed td:first-child { opacity: 0.55; }
.app .stmt-table tr.row td.closed-tag {
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1px;
    text-transform: uppercase; color: var(--muted);
}

/* Sidebar widgets (compact cards) */
.app .widget .card-head { padding: 10px 14px; }
.app .widget .card-head h2 { font-size: 13px; }
.app .widget .card-body { padding: 10px 14px 12px; }

.app .w-list { display: flex; flex-direction: column; }
.app .w-list .w-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--rule); font-size: 12.5px; }
.app .w-list .w-item:last-child { border-bottom: none; }
.app .w-list .w-item-main { flex: 1; min-width: 0; }
.app .w-list .w-item-title { color: var(--text); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.app .w-list .w-item-sub   { color: var(--muted); font-size: 11px; margin-top: 2px; }
.app .w-list .w-item .w-item-main:has(.w-item-action) .w-item-sub {
    display: flex; align-items: center; gap: 8px;
}
.app .w-list .w-item .w-item-main:has(.w-item-action) .w-item-sub .w-item-action {
    margin-left: auto; margin-right: 0;
}
.app .w-list .w-item-meta  { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.5px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.app .w-list .w-item-arrow { font-family: var(--font-mono); font-size: 11px; width: 12px; text-align: center; color: var(--muted); }
.app .w-list .w-item-arrow.pos { color: var(--pos); }
.app .w-list .w-item-arrow.neg { color: var(--neg); }
.app .w-list.w-list-scroll { max-height: 320px; overflow-y: auto; scrollbar-width: thin; }

/* Collapsed-group count badge (notifications widget + history modal) */
.app .w-item-count,
dialog.dash-dialog .w-item-count {
  display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 4px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  line-height: 16px; text-align: center; vertical-align: middle;
  color: var(--bg); background: var(--muted); border-radius: 99px;
}
.app .w-item.unread .w-item-count,
dialog.dash-dialog .w-item.unread .w-item-count { background: var(--accent); }
/* Inline body detail after a notification title in the widget (count · total). */
.app .w-list .w-item-detail { color: var(--muted); }

/* History modal: expandable group head + members */
dialog.dash-dialog .w-grouphead { cursor: pointer; }
dialog.dash-dialog .w-grouphead .w-grouphead-chev {
  font-family: var(--font-mono); color: var(--muted); margin-left: 6px;
  transition: transform 0.15s ease;
}
dialog.dash-dialog .w-grouphead.open .w-grouphead-chev { transform: rotate(90deg); }
dialog.dash-dialog .w-item-members .w-member { padding-left: 22px; background: rgba(127,127,127,0.05); }

.app .w-empty { padding: 16px 14px; text-align: center; color: var(--muted); font-size: 12px; }

.app .w-desc     { font-size: 12.5px; color: var(--text-2); line-height: 1.4; margin-bottom: 10px; }
.app .w-meta     { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.5px; color: var(--muted); }
.app .w-progress { height: 4px; background: var(--panel-2); border-radius: 2px; overflow: hidden; margin-bottom: 6px; }
.app .w-progress-bar { height: 100%; background: var(--accent); transition: width 0.3s ease; }
.app .w-progress-bar.pos { background: var(--pos); }

.app .w-foot { padding: 8px 14px; border-top: 1px solid var(--rule); text-align: right; display: flex; gap: 12px; justify-content: flex-end; }
.app .btn-link { background: none; border: none; color: var(--muted); font-size: 11.5px; font-family: var(--font-sans); cursor: pointer; padding: 0; }
.app .btn-link:hover { color: var(--accent); }

/* Ensure [hidden] wins against .range { display:flex } */
.app .range[hidden] { display: none !important; }

/* Active companies total row: match data-row font (sans), not serif */
.app .card .stmt-table tfoot .total td {
    font-family: var(--font-sans);
}

/* Active companies table — mobile tuning.
   Desktop uses the default auto layout so numeric cells size to content.
   At mobile we switch to fixed layout so we can truncate the Company
   name with an ellipsis while keeping dollar values fully visible. */
.app .t-companies td:not(:first-child),
.app .t-companies th:not(:first-child) { white-space: nowrap; }

/* Share column: horizontal bar showing revenue share of total.
   Mirrors the .share-bar pattern used in warehouse-financials. */
.app .t-companies .col-share { width: 120px; text-align: right; }
.app .t-companies .share-bar {
    position: relative;
    height: 16px;
    min-width: 80px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--accent, #ffb000) 10%, var(--panel-2));
    overflow: hidden;
}
.app .t-companies .share-bar::before {
    content: '';
    position: absolute; inset: 0 auto 0 0;
    width: var(--share, 0%);
    background: color-mix(in srgb, var(--accent, #ffb000) 55%, transparent);
    transition: width 200ms ease;
}
.app .t-companies .share-bar .share-val {
    position: relative;
    display: block;
    text-align: right;
    padding: 0 6px;
    font-size: 11px;
    line-height: 16px;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

@media (max-width: 900px) {
    /* Override the global .stmt-table rule that hides col 3 (Profit).
       Profit is more useful than Inventory on the dashboard. */
    .app .t-companies th:nth-child(3),
    .app .t-companies td:nth-child(3) { display: table-cell; }
    /* Hide Inventory (col 4) — share bar below makes it redundant. */
    .app .t-companies th:nth-child(4),
    .app .t-companies td:nth-child(4) { display: none; }
}
@media (max-width: 540px) {
    /* Narrow phones: fixed layout so the first column can ellipsize. */
    .app .t-companies { table-layout: fixed; width: 100%; }
    .app .t-companies th:first-child,
    .app .t-companies td:first-child {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* Give Revenue just enough width for typical values like "$ 284,896,074". */
    .app .t-companies th:nth-child(2),
    .app .t-companies td:nth-child(2) { width: 118px; }
    /* Hide Profit here; keep Company + Revenue + Share. */
    .app .t-companies th:nth-child(3),
    .app .t-companies td:nth-child(3) { display: none; }
    .app .t-companies .col-share { width: 80px; }
    .app .t-companies .share-bar { min-width: 60px; }
    .app .t-companies th,
    .app .t-companies td { padding: 6px 10px; font-size: 12px; }
    .app .t-companies thead th { padding: 8px 10px 6px; }
    .app .t-companies .row td:first-child { padding-left: 14px; }
}

/* Notification action link (e.g., Reorder now) */
.app .w-list .w-item .w-item-action {
    font-size: 11px; color: var(--accent); text-decoration: none;
    margin-right: 6px; white-space: nowrap;
}
.app .w-list .w-item .w-item-action:hover { text-decoration: underline; }

/* Notification per-item dismiss */
.app .w-list .w-item .w-item-dismiss {
    background: none; border: none; color: var(--muted); cursor: pointer;
    font-size: 14px; line-height: 1; padding: 0 4px; margin-left: 4px;
    opacity: 0; transition: opacity 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}
.app .w-list .w-item:hover .w-item-dismiss { opacity: 1; }
.app .w-list .w-item .w-item-dismiss:hover { color: var(--neg); }

/* Notification item variants */
.app .w-list .w-item.unread { position: relative; }
.app .w-list .w-item.unread::before {
    content: ''; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.app .w-list .w-item.sev-error .w-item-arrow   { color: var(--neg); }
.app .w-list .w-item.sev-warning .w-item-arrow { color: var(--accent); }
.app .w-list .w-item.sev-success .w-item-arrow { color: var(--pos); }

/* Streak widget big number */
.app .streak-big { display: baseline; display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.app .streak-num { font-family: var(--font-serif); font-weight: 600; font-size: 28px; color: var(--accent); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.app .streak-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }

/* Range as link (finance pages use <a>) */
.app .range a.on { background: var(--panel-2); color: var(--text); }

/* Responsive KPI row: already handled by v5.css (2-col at ≤900px) */
@media (max-width: 900px) {
    .app .dash-grid { gap: 10px; }
    .app .widget .card-head { padding: 10px 12px; }
    .app .w-list .w-item { padding: 9px 12px; }
}

/* =============== Banners / checklist / WAWA =============== */
.app .dash-checklist,
.app .dash-banner,
.app .dash-wawa {
    display: flex; align-items: flex-start; gap: 12px;
    border: 1px solid var(--rule); border-radius: 6px;
    background: var(--panel); padding: 10px 12px; margin-bottom: 12px;
    font-size: 12.5px; color: var(--text-2);
}
.app .dash-banner { align-items: center; padding: 5px 10px 5px 12px; margin-bottom: 8px; }
.app .dash-banner.warn  { border-color: var(--accent);   background: var(--accent-bg); }
.app .dash-banner.pos   { border-color: var(--pos);      background: var(--pos-bg); }
.app .dash-wawa         { border-color: var(--pos);      background: var(--pos-bg); }
.app .dash-checklist    { border-left: 3px solid var(--accent); flex-direction: column; gap: 8px; }

.app .dash-banner-label {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.8px;
    text-transform: uppercase; color: var(--text); font-weight: 600; white-space: nowrap;
    padding-top: 0;
}
.app .dash-banner-pills { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.app .dash-banner .dash-close { margin-top: -2px; margin-bottom: -2px; }
.app .dash-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 99px; font-size: 11.5px;
    border: 1px solid var(--rule); background: var(--panel);
}
.app .dash-pill.warn { border-color: var(--accent); background: var(--accent-bg); }
.app .dash-pill.pos  { border-color: var(--pos);    background: var(--pos-bg); }
.app .dash-pill .pos { color: var(--pos); }
.app .dash-pill .neg { color: var(--neg); }
.app .dash-pill .muted { color: var(--muted); }

/* Mobile: keep banner on one line, truncate pill text rather than wrap */
@media (max-width: 900px) {
    .app .dash-banner { gap: 8px; padding: 5px 8px 5px 10px; }
    .app .dash-banner-label { font-size: 9.5px; letter-spacing: 0.6px; }
    .app .dash-banner-pills { flex-wrap: nowrap; overflow: hidden; }
    .app .dash-banner-pills .dash-pill {
        flex: 0 1 auto; min-width: 0;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        display: inline-block; line-height: 1.6;
    }
}

.app .dash-close {
    background: none; border: none; color: var(--muted); cursor: pointer;
    font-size: 18px; line-height: 1; padding: 2px 6px; margin-left: auto; flex-shrink: 0;
    border-radius: 4px;
}
.app .dash-close:hover { color: var(--text); background: var(--panel-2); }

/* Checklist */
.app .dash-checklist-head { display: flex; align-items: center; width: 100%; gap: 10px; }
.app .dash-checklist-title { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.app .dash-checklist-title .label {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.8px;
    text-transform: uppercase; color: var(--text); font-weight: 600;
}
.app .dash-checklist-bar { width: 80px; height: 4px; background: var(--panel-2); border-radius: 2px; overflow: hidden; }
.app .dash-checklist-bar-fill { height: 100%; background: var(--pos); transition: width 0.3s ease; }
.app .dash-checklist-count { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.app .dash-checklist-body { padding-left: 2px; }
.app .dash-checklist-goals { display: flex; flex-wrap: wrap; gap: 5px; padding-left: 2px; }
.app .dash-goal {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 99px; font-size: 11.5px;
    border: 1px solid var(--rule); background: var(--panel-2); color: var(--text-2);
    text-decoration: none;
}
.app .dash-goal.done   { border-color: var(--pos);    background: var(--pos-bg);    color: var(--pos); }
.app .dash-goal.next   { border-color: var(--accent); background: var(--accent-bg); color: var(--text); font-weight: 500; }
.app .dash-goal.next:hover { filter: brightness(1.08); }
.app .dash-goal.locked { opacity: 0.45; }
.app .dash-link { color: var(--accent); text-decoration: underline; }
.app .dash-checklist-hint {
    font-size: 12px; color: var(--text-2); line-height: 1.5;
    padding-left: 2px; padding-top: 2px;
}
.app .dash-checklist-links {
    display: flex; align-items: center; gap: 8px;
    padding-left: 2px; font-size: 11.5px;
}
.app .dash-checklist-links .dash-link { text-decoration: none; }
.app .dash-checklist-links .dash-link:hover { text-decoration: underline; }
.app .dash-checklist-sep { color: var(--muted); }

/* WAWA */
.app .dash-wawa { gap: 16px; }
.app .dash-wawa-inner { flex: 1; min-width: 0; }
.app .dash-wawa-label {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.8px;
    text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.app .dash-wawa-stats { display: flex; flex-wrap: wrap; gap: 22px; }
.app .dash-wawa-stats .k { font-size: 10.5px; color: var(--muted); }
.app .dash-wawa-stats .v { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--text); }

/* Headline net-cash line — matches the dashboard KPI value treatment
   (Inter, tabular figures) rather than the mono chip values, so it reads as a
   headline figure and not a code snippet. */
.app .dash-wawa-net {
    font-family: var(--font-sans); font-size: 22px; font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 10px;
    font-variant-numeric: tabular-nums; font-feature-settings: 'tnum', 'lnum';
}
.app .dash-wawa-net.pos { color: var(--pos); }
.app .dash-wawa-net.neg { color: var(--neg); }
.app .dash-wawa-net .dash-wawa-net-sub {
    font-size: 11px; font-weight: 500; letter-spacing: 0;
    color: var(--muted); margin-left: 8px;
}

/* "Needs your attention" strip — actionable warning/error digest.
   Reuses the established .dash-pill proportions so it sits natively. */
.app .dash-wawa-attn { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--rule); }
.app .dash-wawa-attn-label {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.8px;
    text-transform: uppercase; color: var(--accent); margin-bottom: 8px; font-weight: 600;
}
.app .dash-wawa-attn-items { display: flex; flex-wrap: wrap; gap: 6px; }
.app .dash-wawa-attn-item {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 600; text-decoration: none; line-height: 1.6;
    padding: 3px 10px; border-radius: 99px; border: 1px solid;
}
.app .dash-wawa-attn-item .n {
    display: inline-flex; min-width: 16px; height: 16px; padding: 0 4px;
    align-items: center; justify-content: center;
    border-radius: 99px; font-size: 10px; font-weight: 700; color: #fff;
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.app .dash-wawa-attn-item.sev-warning { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.app .dash-wawa-attn-item.sev-warning .n { background: var(--accent); }
.app .dash-wawa-attn-item.sev-error   { background: var(--neg-bg);    border-color: var(--neg);    color: var(--neg); }
.app .dash-wawa-attn-item.sev-error .n { background: var(--neg); }
.app .dash-wawa-attn-item:hover { filter: brightness(1.06); }

/* Streak widget is clickable */
.app .widget.clickable { cursor: pointer; }
.app .widget.clickable:hover { background: var(--panel-2); }

/* =============== Dialogs =============== */
.app dialog.dash-dialog,
dialog.dash-dialog {
    border: 1px solid var(--rule); border-radius: 8px; padding: 0;
    background: var(--panel); color: var(--text);
    max-width: 480px; width: calc(100% - 32px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
dialog.dash-dialog.dash-dialog-lg { max-width: 640px; }
dialog.dash-dialog .w-list .w-item.dismissed { opacity: 0.5; }
dialog.dash-dialog .w-list .w-item { padding: 10px 4px; }
dialog.dash-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
dialog.dash-dialog .dash-dialog-form { display: flex; flex-direction: column; max-height: 85vh; }
dialog.dash-dialog .dash-dialog-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px; border-bottom: 1px solid var(--rule);
}
dialog.dash-dialog .dash-dialog-head h2 {
    font-family: var(--font-serif); font-weight: 500; font-size: 18px; margin: 0; flex: 1;
    letter-spacing: -0.01em; color: var(--text);
}
dialog.dash-dialog .dash-dialog-body {
    padding: 16px 18px; overflow-y: auto; font-size: 13px;
}
dialog.dash-dialog .dash-dialog-foot {
    padding: 12px 18px; border-top: 1px solid var(--rule); text-align: right;
}
dialog.dash-dialog .dash-stat-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 6px 0; gap: 12px;
}
dialog.dash-dialog .dash-stat-row strong { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
dialog.dash-dialog .dash-stat-row strong.pos   { color: var(--pos); }
dialog.dash-dialog .dash-stat-row strong.muted { color: var(--muted); }
dialog.dash-dialog .dash-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
dialog.dash-dialog .dash-section-label {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.8px;
    text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
dialog.dash-dialog .dash-meta { margin-top: 8px; font-size: 11.5px; }
dialog.dash-dialog .dash-badge-wrap { display: flex; flex-wrap: wrap; gap: 5px; }
dialog.dash-dialog .dash-badge {
    display: inline-flex; padding: 3px 9px; border-radius: 99px; font-size: 11.5px;
    border: 1px solid var(--rule); background: var(--panel-2);
}
dialog.dash-dialog .dash-badge.earned { border-color: var(--accent); background: var(--accent-bg); color: var(--text); }
dialog.dash-dialog .dash-badge.locked { opacity: 0.45; }
dialog.dash-dialog .dash-reward-hero {
    text-align: center; padding: 8px 0 16px;
    border-bottom: 1px solid var(--rule); margin-bottom: 14px;
}
dialog.dash-dialog .dash-reward-streak {
    font-family: var(--font-serif); font-weight: 600; font-size: 28px;
    color: var(--accent); letter-spacing: -0.02em;
}
dialog.dash-dialog .dash-reward-grid { padding: 10px 12px; border-radius: 6px; background: var(--pos-bg); }
dialog.dash-dialog .dash-btn {
    font-family: var(--font-sans); font-size: 13px; padding: 7px 16px;
    border: 1px solid var(--rule); border-radius: 4px;
    background: var(--panel-2); color: var(--text); cursor: pointer;
}
dialog.dash-dialog .dash-btn:hover { border-color: var(--text-2); }
dialog.dash-dialog .dash-btn.accent {
    border-color: var(--accent); background: var(--accent); color: var(--bg);
}

/* =============== Hero greeting (replaces page-head on dashboard) ===============
   Matches the spacing + typography of .page-head in v5.css so the dashboard
   title sits at the same baseline as finance / other pages. */
.app .dash-hero {
    margin-bottom: 14px;
}
.app .dash-hero-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
}
.app .dash-hero-sub {
    font-size: 14px;
    color: var(--muted);
    margin-top: 4px;
    line-height: 1.5;
}
.app .dash-hero-sub .hero-num {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.app .dash-hero-sub .hero-up   { color: var(--pos); font-family: var(--font-mono); font-weight: 600; }
.app .dash-hero-sub .hero-down { color: var(--neg); font-family: var(--font-mono); font-weight: 600; }
@media (max-width: 900px) {
    .app .dash-hero-title { font-size: 22px; }
    .app .dash-hero-sub { font-size: 12px; }
}

/* ============================================================
   Dashboard-specific mobile tightening. Generic rules (page-head,
   kpi-row, card-head, card-body) live in v5.css so all pages
   benefit from the same density.
   ============================================================ */
@media (max-width: 900px) {
    /* Hero spacing */
    .app .dash-hero { margin-bottom: 10px; }

    /* Chart card feels less stretched with a shorter canvas and less
       outer padding — the bars/lines read more densely on mobile. */
    .app .dash-chart-box { height: 240px !important; }

    /* Company cards — remove the redundant "REVENUE" kicker label
       (the $ figure is obviously revenue, and the share row below
       already reads "% of revenue"). Reduce vertical padding. */
    .app .c-card { padding: 10px 12px; grid-row-gap: 2px; }
    .app .c-card-rev-lbl,
    .app .c-card-prof-lbl { display: none; }
    .app .c-card-share { margin-top: 4px; }

    /* Sidebar widgets — tighter inter-card gap so the lower half
       reads as one dashboard, not a stack of separate pages. */
    .app .dash-aside > .card + .card { margin-top: 8px; }
}

/* =============== Financial-overview chart empty state =============== */
/* Overlays the fixed-height chart box; hidden by dashboard.js whenever
   the charts endpoint returns any datapoints. */
.app .dash-chart-box .dash-chart-empty {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 24px;
}
.app .dash-chart-box .dash-chart-empty[hidden] { display: none; }
.app .dash-chart-box .dash-chart-empty .d { max-width: 340px; }

/* =============== Needs-your-attention empty state =============== */
.app #dashNotifList .w-empty.w-empty-ok {
    padding: 20px 14px; text-align: center;
}
.app #dashNotifList .w-empty-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: color-mix(in srgb, var(--pos) 18%, var(--panel-2));
    color: var(--pos); font-size: 14px; font-weight: 700;
    margin-bottom: 8px;
}
.app #dashNotifList .w-empty-title {
    font-family: var(--font-serif); font-weight: 500; font-size: 15px;
    color: var(--text); letter-spacing: -0.01em; margin-bottom: 4px;
}
.app #dashNotifList .w-empty-sub {
    font-size: 12px; color: var(--muted); line-height: 1.5;
}
.app #dashNotifList .w-empty-sub .dash-link { white-space: nowrap; }

/* =============== Companies card: view toggle (table ↔ cards) =============== */
.app .t-companies-wrap[data-view="cards"] .t-companies { display: none; }
.app .t-companies-wrap[data-view="table"] .c-cards     { display: none; }

/* Grouped container: dividers between rows, no extra outer border
   (the parent .card provides the outer frame already). */
.app .c-cards {
    display: flex; flex-direction: column;
}
.app .c-card {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto auto;
    grid-column-gap: 16px;
    grid-row-gap: 4px;
    align-items: baseline;
    padding: 14px 16px;
    border-top: 1px solid var(--rule);
    cursor: pointer;
    transition: background 0.12s ease;
}
.app .c-card:first-child { border-top: none; }
.app .c-card:hover {
    background: color-mix(in srgb, var(--accent) 7%, var(--panel-2));
}
.app .c-card.closed { opacity: 0.6; }

.app .c-card-head {
    grid-column: 1 / 2; grid-row: 1 / 2;
    display: flex; align-items: center; gap: 10px; min-width: 0;
}
.app .c-card-type {
    font-family: var(--font-mono);
    font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase;
    padding: 2px 6px; border-radius: 3px;
    background: var(--panel-2); color: var(--muted);
    border: 1px solid var(--rule);
    flex-shrink: 0;
}
.app .c-card-type.retail        { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--rule)); }
.app .c-card-type.manufacturing { color: var(--pos);    border-color: color-mix(in srgb, var(--pos) 40%, var(--rule)); }
.app .c-card-type.distribution  { color: var(--text-2); }
.app .c-card-name {
    font-weight: 500; color: var(--text); font-size: 14px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.app .c-card-tag {
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1px;
    text-transform: uppercase; color: var(--muted);
}

.app .c-card-metric {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 14px; color: var(--text); text-align: right;
}
.app .c-card-metric.pos { color: var(--pos); }
.app .c-card-metric.neg { color: var(--neg); }
.app .c-card-metric-lbl {
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1px;
    text-transform: uppercase; color: var(--muted);
    text-align: right;
}
.app .c-card > .c-card-rev        { grid-column: 2 / 3; grid-row: 1 / 2; }
.app .c-card > .c-card-prof       { grid-column: 3 / 4; grid-row: 1 / 2; }
.app .c-card > .c-card-rev-lbl    { grid-column: 2 / 3; grid-row: 2 / 3; }
.app .c-card > .c-card-prof-lbl   { grid-column: 3 / 4; grid-row: 2 / 3; }

.app .c-card-share {
    grid-column: 1 / -1; grid-row: 3 / 4;
    margin-top: 6px;
    display: flex; align-items: center; gap: 10px;
}
.app .c-card-share .share-bar {
    flex: 1;
    position: relative; height: 8px; border-radius: 2px; overflow: hidden;
    background: color-mix(in srgb, var(--accent, #ffb000) 10%, var(--panel-2));
}
.app .c-card-share .share-bar::before {
    content: ''; position: absolute; inset: 0 auto 0 0;
    width: var(--share, 0%);
    background: color-mix(in srgb, var(--accent, #ffb000) 55%, transparent);
    transition: width 200ms ease;
}
.app .c-card-share .share-val {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 11px; color: var(--text-2); white-space: nowrap;
}

/* View toggle buttons in Active companies card-head */
.app .card-head .range.view-toggle { margin-left: auto; }

@media (max-width: 540px) {
    .app .c-card { grid-column-gap: 10px; padding: 10px 12px; }
    .app .c-card-name { font-size: 13px; }
    .app .c-card-metric { font-size: 13px; }
    /* Hide Profit column on narrow phones — share bar remains full-width below */
    .app .c-card > .c-card-prof,
    .app .c-card > .c-card-prof-lbl { display: none; }
}

/* =============== Recent activity — ledger styling =============== */
.app #dashFeedWidget .w-item {
    display: flex; align-items: baseline; gap: 10px;
}
.app #dashFeedWidget .w-item .w-item-main { font-size: 12px; }
.app #dashFeedWidget .w-item .w-item-title { line-height: 1.4; color: var(--text-2); }
.app #dashFeedWidget .w-item .w-item-meta {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.6px; color: var(--muted);
    min-width: 46px; text-align: right;
}