/* ════════════════════════════════════════════════════════════════════════════
   UNIVERSAL DASHBOARD CONSTRUCTOR v5 — dual-theme + per-row caps
   ────────────────────────────────────────────────────────────────────────────
   Themes:
     - LIGHT (default): markets-finance-style but light background
       bg #f5f7fb, panel #ffffff, border rgba(99,102,241,.12)
     - DARK: markets-finance dark mode
       bg #0a0e1a, panel rgba(15,23,42,.85), border rgba(99,102,241,.15)
   Theme is controlled by <html data-theme="light|dark"> — set by
   theme-toggle.js (loaded from the host page).

   Per-row cap rules (enforced in reclassifyLayout):
     - max 4 metrics per row (1 col each × 4 cols = full row)
     - max 2 graphs per row (2 col each × 2 cols = full row)
     - max 2 tables per row (rare, but supported)
     - chart-third pairs into chart-half when alone
   On mobile (1 col) caps don't apply — everything stacks.

   Visual classification (unchanged):
     metric, chart-third, chart-half, chart-wide, table-half, table-wide, ai-brief
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens: LIGHT theme (default) ──────────────────────────────────── */
:root {
    --ud-bg: #f5f7fb;
    --ud-bg2: #e8eaf2;
    --ud-panel: #ffffff;
    --ud-border: rgba(99, 102, 241, 0.12);
    --ud-border-strong: rgba(99, 102, 241, 0.20);
    --ud-text: #1e293b;
    --ud-text-soft: #475569;
    --ud-muted: #64748b;
    --ud-primary: #6366f1;
    --ud-accent: #06b6d4;
    --ud-green: #10b981;
    --ud-red: #ef4444;
    --ud-amber: #f59e0b;
    --ud-table-head-bg: #1e293b;
    --ud-table-head-text: #e2e8f0;
    --ud-table-row-alt: rgba(99, 102, 241, 0.025);
    --ud-table-row-hover: rgba(99, 102, 241, 0.06);
    --ud-chart-axis: #94a3b8;
    --ud-chart-split: rgba(99, 102, 241, 0.08);
    --ud-chart-tooltip: rgba(255, 255, 255, 0.96);
    --ud-chart-tooltip-text: #1e293b;
    --ud-chart-tooltip-border: rgba(99, 102, 241, 0.20);
    --fh: 'Space Grotesk', sans-serif;
    --fb: 'Inter', sans-serif;
    --exec-primary: #6366f1;
    --exec-secondary: #06b6d4;
    --exec-highlight: #10b981;
    --exec-accent: #f59e0b;
}

/* ── Design tokens: DARK theme (markets-finance style) ─────────────────────── */
[data-theme="dark"] {
    --ud-bg: #0a0e1a;
    --ud-bg2: #0f172a;
    --ud-panel: rgba(15, 23, 42, 0.85);
    --ud-border: rgba(99, 102, 241, 0.15);
    --ud-border-strong: rgba(99, 102, 241, 0.30);
    --ud-text: #e2e8f0;
    --ud-text-soft: #cbd5e1;
    --ud-muted: #64748b;
    --ud-primary: #6366f1;
    --ud-accent: #06b6d4;
    --ud-green: #10b981;
    --ud-red: #ef4444;
    --ud-amber: #f59e0b;
    --ud-table-head-bg: #0f172a;
    --ud-table-head-text: #64748b;
    --ud-table-row-alt: rgba(99, 102, 241, 0.025);
    --ud-table-row-hover: rgba(99, 102, 241, 0.06);
    --ud-chart-axis: #94a3b8;
    --ud-chart-split: rgba(99, 102, 241, 0.08);
    --ud-chart-tooltip: rgba(15, 23, 42, 0.95);
    --ud-chart-tooltip-text: #e2e8f0;
    --ud-chart-tooltip-border: rgba(99, 102, 241, 0.20);
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ── Page shell ────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

.universal-page {
    min-height: 100vh;
    background: var(--ud-bg);
    color: var(--ud-text);
    font-family: var(--fb);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: background-color 280ms ease, color 280ms ease;
}

.universal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ud-border);
    flex-wrap: wrap;
    min-height: 40px;
}

.universal-title {
    font-family: var(--fh);
    font-size: clamp(13px, 1.2vw, 16px);
    font-weight: 700;
    color: var(--ud-text);
    letter-spacing: -0.01em;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.universal-header-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.universal-asof {
    color: var(--ud-muted);
    font-size: clamp(8px, 0.7vw, 10px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.universal-btn {
    border: 1px solid var(--ud-border);
    background: var(--ud-panel);
    color: var(--ud-text);
    font-family: var(--fb);
    font-size: clamp(9px, 0.7vw, 10px);
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: border-color 200ms, background 200ms;
    white-space: nowrap;
}
.universal-btn:hover { border-color: var(--ud-accent); background: rgba(99, 102, 241, 0.08); }
.universal-btn.is-active {
    border-color: var(--ud-accent);
    background: rgba(6, 182, 212, 0.12);
    color: var(--ud-accent);
}
/* On narrow iframes (< 1100px), hide button TEXT and keep only icons
   so the header doesn't overflow horizontally. */
@media (max-width: 1100px) {
    .universal-btn .universal-btn-text,
    .universal-btn i + span,
    .universal-btn span:not(.universal-ai-badge-dot) {
        display: none;
    }
    .universal-btn {
        padding: 5px 7px;
    }
    .universal-asof { display: none; }
}

/* ══ CANVAS: tight grid ══════════════════════════════════════════════════════ */
.universal-canvas {
    container-type: inline-size;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(80px, auto);
    gap: 10px;
    background: var(--ud-bg);
    min-height: 400px;
}
@media (max-width: 1024px) {
    .universal-canvas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .universal-canvas { grid-template-columns: 1fr; }
}

/* ── Tile base ─────────────────────────────────────────────────────────────── */
.universal-tile {
    container-type: inline-size;
    position: relative;
    background: var(--ud-panel);
    border: 1px solid var(--ud-border);
    border-radius: 10px;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    transition: border-color 200ms, transform 200ms, box-shadow 200ms;
}
.universal-tile:hover {
    border-color: var(--ud-border-strong);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.10), 0 2px 4px rgba(15, 23, 42, 0.08);
}
/* In edit mode, disable hover lift (tiles need to stay put while dragging) */
.universal-canvas.is-editing .universal-tile:hover {
    transform: none;
    box-shadow: none;
}

/* ══ NATURAL GRID SPANS ═════════════════════════════════════════════════════ */
.universal-tile[data-natural-type="metric"] {
    grid-column: span 1;
    aspect-ratio: 5 / 2;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

.universal-tile[data-natural-type="chart-third"] {
    grid-column: span 1;
    aspect-ratio: 4 / 3;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}
@media (max-width: 1024px) {
    .universal-tile[data-natural-type="chart-third"] {
        grid-column: span 2;
        aspect-ratio: 16 / 9;
    }
}

.universal-tile[data-natural-type="chart-half"],
.universal-tile[data-natural-type="table-half"] {
    grid-column: span 2;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}
.universal-tile[data-natural-type="chart-half"] { aspect-ratio: 16 / 9; }
@media (max-width: 600px) {
    .universal-tile[data-natural-type="chart-half"],
    .universal-tile[data-natural-type="table-half"],
    .universal-tile[data-natural-type="chart-third"],
    .universal-tile[data-natural-type="metric"] {
        grid-column: 1 / -1;
    }
    .universal-tile[data-natural-type="chart-half"],
    .universal-tile[data-natural-type="chart-third"] { aspect-ratio: 4 / 3; }
    .universal-tile[data-natural-type="metric"] { aspect-ratio: 5 / 1; }
}

.universal-tile[data-natural-type="chart-wide"],
.universal-tile[data-natural-type="table-wide"],
.universal-tile[data-natural-type="ai-brief"] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}
.universal-tile[data-natural-type="chart-wide"] { aspect-ratio: 32 / 7; }

/* ══ PROMOTED SPANS ══════════════════════════════════════════════════════════ */
.universal-tile[data-type="chart-half"] {
    grid-column: span 2 !important;
    aspect-ratio: 16 / 9 !important;
}
.universal-tile[data-type="chart-wide"] {
    grid-column: 1 / -1 !important;
    aspect-ratio: 32 / 7 !important;
}
.universal-tile[data-type="table-wide"] {
    grid-column: 1 / -1 !important;
    min-height: 240px !important;
    aspect-ratio: auto !important;
}

/* ── Metric tile internals ─────────────────────────────────────────────────── */
.universal-tile[data-natural-type="metric"]:nth-child(6n+1) { border-top: 2px solid var(--ud-primary); }
.universal-tile[data-natural-type="metric"]:nth-child(6n+2) { border-top: 2px solid var(--ud-accent); }
.universal-tile[data-natural-type="metric"]:nth-child(6n+3) { border-top: 2px solid var(--ud-green); }
.universal-tile[data-natural-type="metric"]:nth-child(6n+4) { border-top: 2px solid var(--ud-amber); }
.universal-tile[data-natural-type="metric"]:nth-child(6n+5) { border-top: 2px solid #ec4899; }
.universal-tile[data-natural-type="metric"]:nth-child(6n+6) { border-top: 2px solid #14b8a6; }

.universal-metric-label {
    color: var(--ud-muted);
    font-size: clamp(8px, 0.85cqw, 10px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
}

.universal-metric-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
}

.universal-metric-value {
    font-family: var(--fh);
    color: var(--ud-text);
    font-size: clamp(13px, 2.0cqw, 20px);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.02em;
}

.universal-metric-period {
    color: var(--ud-muted);
    font-size: clamp(7px, 0.7cqw, 9px);
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.universal-deltas {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.universal-delta {
    font-family: var(--fh);
    font-size: clamp(8px, 0.78cqw, 10px);
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(100, 116, 139, 0.15);
    color: var(--ud-muted);
    line-height: 1.3;
}
.universal-delta[data-tone="good"] { background: rgba(16, 185, 129, 0.15); color: var(--ud-green); }
.universal-delta[data-tone="bad"]  { background: rgba(239, 68, 68, 0.15);  color: var(--ud-red); }

/* ── Chart / table tile internals ──────────────────────────────────────────── */
.universal-tile-title {
    font-family: var(--fh);
    padding: 10px 12px 6px;
    color: var(--ud-text);
    font-size: clamp(10px, 1.0cqw, 12px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    border-bottom: 1px solid var(--ud-border);
    display: flex;
    align-items: center;
    gap: 6px;
}
.universal-tile-title::before {
    content: '';
    width: 3px;
    height: 12px;
    background: var(--ud-accent);
    border-radius: 2px;
    flex-shrink: 0;
}

.universal-chart {
    width: 100%;
    height: 100%;
    min-height: 100px;
}

.universal-tile[data-type="table-half"],
.universal-tile[data-type="table-wide"] {
    min-height: 220px;
    aspect-ratio: auto;
}

.universal-table-wrap {
    min-height: 0;
    overflow: auto;
    background: var(--ud-bg2);
}

.universal-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--fb);
    font-size: clamp(9px, 0.85cqw, 11px);
    color: var(--ud-text);
}
.universal-table thead th {
    position: sticky;
    top: 0;
    background: var(--ud-table-head-bg);
    color: var(--ud-table-head-text);
    font-weight: 700;
    text-align: left;
    padding: 8px 10px;
    white-space: nowrap;
    font-size: clamp(8px, 0.78cqw, 10px);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--ud-border);
}
.universal-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--ud-border);
    white-space: nowrap;
    font-family: var(--fh);
    font-weight: 500;
}
.universal-table tbody tr:hover { background: var(--ud-table-row-hover); }
.universal-table tbody tr:nth-child(even) { background: var(--ud-table-row-alt); }

/* ── AI Brief ──────────────────────────────────────────────────────────────── */
.universal-tile[data-type="ai-brief"] {
    min-height: 220px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid var(--ud-border);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(6, 182, 212, 0.04));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 14px;
    aspect-ratio: auto;
}

.universal-ai-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.universal-ai-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--ud-primary), var(--ud-accent));
    color: #fff;
    font-size: 12px;
}
.universal-ai-title {
    font-family: var(--fh);
    font-size: 14px;
    font-weight: 700;
    color: var(--ud-text);
}
.universal-ai-sub {
    font-size: 10px;
    color: var(--ud-muted);
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.universal-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: var(--ud-green);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.universal-ai-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ud-green);
    animation: universalAiPulse 2s ease-in-out infinite;
}
@keyframes universalAiPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.universal-ai-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 600px) {
    .universal-ai-grid { grid-template-columns: 1fr; }
}

.universal-ai-cell {
    background: var(--ud-panel);
    border: 1px solid var(--ud-border);
    border-radius: 8px;
    padding: 12px;
    position: relative;
    overflow: hidden;
}
.universal-ai-cell::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
}
.universal-ai-cell[data-section="what"]::before { background: var(--ud-green); }
.universal-ai-cell[data-section="why"]::before  { background: var(--ud-amber); }
.universal-ai-cell[data-section="next"]::before { background: var(--ud-accent); }
.universal-ai-cell[data-section="do"]::before   { background: #ec4899; }

.universal-ai-cell-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.universal-ai-cell-icon {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.15);
    color: var(--ud-accent);
    font-size: 10px;
    font-weight: 700;
}
.universal-ai-cell-label {
    font-size: clamp(9px, 0.85cqw, 10px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ud-accent);
}
.universal-ai-cell-body {
    font-family: var(--fb);
    font-size: clamp(11px, 0.95cqw, 12px);
    line-height: 1.55;
    color: var(--ud-text);
}

/* ── Edit mode ───────────────────────────────────────────────────────────────
   When canvas has .is-editing, DISABLE ALL universal class layout rules:
     - Canvas switches from display:grid → display:block (no more grid flow)
     - ALL tiles become position:absolute (positioned via inline left/top/w/h)
     - aspect-ratio rules disabled (tile sizes set by inline width/height)
     - natural-type grid-column rules disabled
   This gives the user FREE drag/resize without any grid interference.
   On Edit click, JS captures each tile's current rendered position ONCE
   (in the next animation frame, after grid has rendered) and converts it
   to absolute coordinates. After that, the grid is irrelevant. */
.universal-canvas.is-editing,
.universal-canvas.has-manual-layout {
    display: block !important;
    grid-template-columns: none !important;
    position: relative;
    min-height: 1600px;
}

/* ALL tiles in edit mode → position:absolute (no more grid flow).
   Inline left/top/width/height set by JS captureTileToAbsolute(). */
.universal-canvas.is-editing .universal-tile,
.universal-canvas.has-manual-layout .universal-tile {
    position: absolute !important;
    /* Disable aspect-ratio (was constraining tile heights via CSS) */
    aspect-ratio: auto !important;
    /* Disable grid-column rules (was constraining tile widths) */
    grid-column: auto !important;
    grid-row: auto !important;
}

.universal-canvas.is-editing .universal-tile {
    outline: 1px dashed rgba(99, 102, 241, 0.35);
    outline-offset: -1px;
}

/* Move handle (⠿) — top-right of tile, drag to move freely */
.universal-move {
    touch-action: none;
    position: absolute;
    top: 3px;
    right: 24px;
    z-index: 30;
    width: 18px;
    height: 18px;
    border: 1px solid var(--ud-border-strong);
    border-radius: 5px;
    background: var(--ud-panel);
    color: var(--ud-muted);
    display: none;
    place-items: center;
    padding: 0;
    cursor: grab;
    font-size: 11px;
    opacity: 0.4;
    transition: opacity 200ms;
}
.universal-canvas.is-editing .universal-move {
    touch-action: none; display: grid; }
.universal-canvas.is-editing .universal-tile:hover .universal-move,
.universal-tile.universal-tile-active .universal-move {
    touch-action: none; opacity: 1; }

/* Resize handle (bottom-right corner) — single handle, drag to resize both
   width and height simultaneously (matches old dash-suite.js UX) */
.universal-resize {
    touch-action: none;
    position: absolute;
    right: 2px;
    bottom: 2px;
    z-index: 30;
    width: 17px;
    height: 17px;
    cursor: nwse-resize;
    display: none;
    opacity: 0.4;
    transition: opacity 200ms;
}
.universal-canvas.is-editing .universal-resize {
    touch-action: none; display: block; }
.universal-canvas.is-editing .universal-tile:hover .universal-resize,
.universal-tile.universal-tile-active .universal-resize {
    touch-action: none; opacity: 1; }
.universal-resize::after {
    content: '';
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--ud-accent);
    border-bottom: 2px solid var(--ud-accent);
}

/* Tile is being dragged/resized — active state */
.universal-tile.universal-tile-active {
    box-shadow: 0 12px 30px rgba(99, 102, 241, 0.25);
    outline: 1px solid rgba(99, 102, 241, 0.5) !important;
    z-index: 100 !important;
}

/* Frozen state (default) — hide all handles */
.universal-canvas.is-frozen .universal-move,
.universal-canvas.is-frozen .universal-resize {
    touch-action: none; display: none !important; }

/* Dragging state — tile floats above siblings during ⠿ drag */
.universal-tile.universal-tile-dragging {
    cursor: grabbing !important;
    opacity: 0.85;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30), 0 4px 16px rgba(99, 102, 241, 0.20) !important;
    z-index: 1000 !important;
    pointer-events: none;
}
.universal-tile-dragging * { pointer-events: none !important; }

/* ── Loading / error ──────────────────────────────────────────────────────── */
.universal-loading,
.universal-error {
    padding: 40px;
    text-align: center;
    color: var(--ud-muted);
    font-size: 13px;
    background: var(--ud-panel);
    border: 1px solid var(--ud-border);
    border-radius: 10px;
}
.universal-error { color: var(--ud-red); border-color: rgba(239, 68, 68, 0.3); }

/* ── Theme toggle button ──────────────────────────────────────────────────── */
.universal-theme-toggle {
    border: 1px solid var(--ud-border);
    background: var(--ud-panel);
    color: var(--ud-text);
    width: 30px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    padding: 0;
    transition: border-color 200ms, transform 200ms;
}
.universal-theme-toggle:hover {
    border-color: var(--ud-accent);
    transform: translateY(-1px);
}