/* ==========================================================================
   CFO Dashboard — Static CSS
   Ported from globals.css dashboard theme variables
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body { font-family: Arial, Helvetica, sans-serif; background: var(--cfo-bg); color: var(--cfo-tx); min-height: 100vh; }

/* ── Theme Variables ── */
:root {
  --cfo-bg: #f6f5f2;
  --cfo-surface: #ffffff;
  --cfo-surface-alt: #fafaf8;
  --cfo-tx: #1e1e1e;
  --cfo-tx-secondary: #5c5c5c;
  --cfo-tx-muted: #9a9a9a;
  --cfo-tx-light: #c0bdb8;
  --cfo-bd: #e6e3de;
  --cfo-bd-light: #f0ede8;
  --cfo-positive: #2a7d45;
  --cfo-negative: #c43328;
  --cfo-warning: #b8862a;
  --cfo-neutral: #8a8a8a;
  --cfo-range-poor: #d6d2cc;
  --cfo-range-sat: #e4e0da;
  --cfo-range-good: #eeeae4;
  --cfo-font: Arial, Helvetica, sans-serif;
  --cfo-sr: #f7f8fa;
  --cfo-accent: #16ACDC;
}

[data-theme="dark"] {
  --cfo-bg: #141820;
  --cfo-surface: #1a1f2a;
  --cfo-surface-alt: #1e2433;
  --cfo-tx: #e4e7ed;
  --cfo-tx-secondary: #8490a5;
  --cfo-tx-muted: #5a6478;
  --cfo-tx-light: #3d4759;
  --cfo-bd: #242a38;
  --cfo-bd-light: #1e2433;
  --cfo-positive: #22c55e;
  --cfo-negative: #ef4444;
  --cfo-warning: #f59e0b;
  --cfo-neutral: #5a6478;
  --cfo-range-poor: #242a38;
  --cfo-range-sat: #2a3144;
  --cfo-range-good: #313a50;
  --cfo-sr: #1a1f2a;
  --cfo-accent: #16ACDC;
}

[data-theme="meicho"] {
  --cfo-bg: #EEF2FF;
  --cfo-surface: #fff;
  --cfo-surface-alt: #f5f7ff;
  --cfo-tx: #0B1328;
  --cfo-tx-secondary: #374158;
  --cfo-tx-muted: #7a86a0;
  --cfo-tx-light: #a0aabf;
  --cfo-bd: #c7d2e8;
  --cfo-bd-light: #dfe7ff;
  --cfo-positive: #2d9a5c;
  --cfo-negative: #c42b2b;
  --cfo-warning: #c48a08;
  --cfo-neutral: #7a86a0;
  --cfo-range-poor: #c7d2e8;
  --cfo-range-sat: #dfe7ff;
  --cfo-range-good: #eef2ff;
  --cfo-sr: #EEF2FF;
  --cfo-accent: #16ACDC;
}

[data-theme="rendify"] {
  --cfo-bg: #fafafa;
  --cfo-surface: #ffffff;
  --cfo-surface-alt: #F2F2F2;
  --cfo-tx: #1a1a1a;
  --cfo-tx-secondary: #4a4a4a;
  --cfo-tx-muted: #8a8a8a;
  --cfo-tx-light: #b0b0b0;
  --cfo-bd: #e0e0e0;
  --cfo-bd-light: #f0f0f0;
  --cfo-positive: #1B4332;
  --cfo-negative: #c43328;
  --cfo-warning: #b8862a;
  --cfo-neutral: #8a8a8a;
  --cfo-range-poor: #e0e0e0;
  --cfo-range-sat: #ececec;
  --cfo-range-good: #f5f5f5;
  --cfo-sr: #F2F2F2;
  --cfo-accent: #1B4332;
}

/* ── Layout Utilities ── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 4px; }
.gap-1\.5 { gap: 6px; }
.gap-2 { gap: 8px; }
.gap-2\.5 { gap: 10px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.col-span-full { grid-column: 1 / -1; }
.shrink-0 { flex-shrink: 0; }
.min-w-0 { min-width: 0; }
.w-full { width: 100%; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-hidden { overflow: hidden; }
.relative { position: relative; }
.absolute { position: absolute; }
.hidden { display: none; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.uppercase { text-transform: uppercase; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.font-normal { font-weight: 400; }
.italic { font-style: italic; }
.rounded-xl { border-radius: 12px; }
.rounded-lg { border-radius: 8px; }
.rounded-md { border-radius: 6px; }
.rounded-sm { border-radius: 4px; }
.rounded-full { border-radius: 9999px; }
.border { border: 1px solid var(--cfo-bd); }
.border-b { border-bottom: 1px solid var(--cfo-bd); }
.border-t { border-top: 1px solid var(--cfo-bd); }
.border-transparent { border-color: transparent; }
.cursor-pointer { cursor: pointer; }
.transition-all { transition: all 150ms ease; }
.transition-colors { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
.transition-transform { transition: transform 150ms ease; }
.pointer-events-none { pointer-events: none; }
.list-disc { list-style-type: disc; }
.list-inside { list-style-position: inside; }

/* ── Spacing ── */
.p-1\.5 { padding: 6px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.px-1 { padding-left: 4px; padding-right: 4px; }
.px-1\.5 { padding-left: 6px; padding-right: 6px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-2\.5 { padding-left: 10px; padding-right: 10px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-0\.5 { padding-top: 2px; padding-bottom: 2px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-1\.5 { padding-top: 6px; padding-bottom: 6px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-2\.5 { padding-top: 10px; padding-bottom: 10px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.pt-2 { padding-top: 8px; }
.pt-2\.5 { padding-top: 10px; }
.pt-3 { padding-top: 12px; }
.pt-4 { padding-top: 16px; }
.pb-1 { padding-bottom: 4px; }
.pb-1\.5 { padding-bottom: 6px; }
.pb-2 { padding-bottom: 8px; }
.pb-3 { padding-bottom: 12px; }
.pb-4 { padding-bottom: 16px; }
.pl-4 { padding-left: 16px; }
.pl-8 { padding-left: 32px; }
.mt-0\.5 { margin-top: 2px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.ml-1 { margin-left: 4px; }
.ml-1\.5 { margin-left: 6px; }
.ml-2 { margin-left: 8px; }
.space-y-0\.5 > * + * { margin-top: 2px; }
.space-y-1 > * + * { margin-top: 4px; }
.space-y-2 > * + * { margin-top: 8px; }

/* ── Typography ── */
.text-2xl { font-size: 24px; line-height: 32px; }
.text-xl { font-size: 20px; line-height: 28px; }
.text-lg { font-size: 18px; line-height: 28px; }
.text-sm { font-size: 14px; line-height: 20px; }
.text-xs { font-size: 12px; line-height: 16px; }
.tracking-wide { letter-spacing: 0.05em; }

/* ── Scrollbar ── */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Dashboard-specific ── */
.dash-header { background: var(--cfo-surface); border-bottom: 1px solid var(--cfo-bd); font-family: var(--cfo-font); }
.dash-tab-active { font-weight: 600; color: var(--cfo-tx); border-bottom: 2px solid var(--cfo-tx); }
.dash-tab-inactive { font-weight: 400; color: var(--cfo-tx-secondary); border-bottom: 2px solid transparent; }
.dash-card { background: var(--cfo-surface); border: 1px solid var(--cfo-bd); border-radius: 12px; padding: 16px; }
.dash-card-selected { border-color: var(--cfo-accent); background: var(--cfo-surface-alt); }
.dash-section-bg { background: var(--cfo-sr); }
.dash-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.dash-table th { padding: 8px 12px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cfo-tx-muted); font-weight: 600; border-bottom: 2px solid var(--cfo-bd); background: var(--cfo-sr); }
.dash-table td { padding: 6px 12px; font-size: 12px; color: var(--cfo-tx); border-bottom: 1px solid var(--cfo-bd); }
.dash-table tr:hover td { background: var(--cfo-sr); }
.dash-table tfoot td { border-top: 2px solid var(--cfo-bd); font-weight: 700; }

/* Token status colors — used in JS inline styles */
.status-positive { color: var(--cfo-positive); }
.status-negative { color: var(--cfo-negative); }
.status-warning { color: var(--cfo-warning); }
.status-neutral { color: var(--cfo-neutral); }

/* ── Access Denied / Loading ── */
.access-denied {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  font-family: var(--cfo-font); color: var(--cfo-tx-muted); font-size: 14px;
}
.loading {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  font-family: var(--cfo-font); color: var(--cfo-tx-muted); font-size: 13px;
}

/* ── Progress Bar ── */
.progress-bar {
  height: 8px; background: var(--cfo-sr); border-radius: 9999px; overflow: hidden;
}
.progress-bar-fill {
  height: 100%; border-radius: 9999px; transition: width 500ms ease;
}

/* ── Expand Arrow ── */
.expand-arrow { transition: transform 150ms ease; display: inline-block; }
.expand-arrow.open { transform: rotate(90deg); }

/* ── Responsive ── */
@media (min-width: 768px) {
  .md-grid { display: grid; }
  .md-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md-gap-6 { gap: 24px; }
  .md-gap-8 { gap: 32px; }
  .md-block { display: block; }
  .md-inline-block { display: inline-block; }
}
@media (max-width: 767px) {
  .hide-mobile { display: none; }
  .grid-cols-3 { grid-template-columns: 1fr; }
}
@media (min-width: 640px) {
  .sm-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .sm-inline { display: inline; }
}