/* ============================================
   PORTFOLIOSHIELD DESIGN SYSTEM
   1-FOUNDATION.CSS

   Design Tokens | Reset | Typography | Utilities
   ============================================ */

/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
    /* --- Backgrounds --- */
    --bg-primary: #0a0a12;
    --bg-secondary: #12121c;
    --bg-card: #1a1a28;
    --bg-hover: #222233;

    /* --- Borders --- */
    --border-color: #2a2a3c;
    --border-hover: rgba(255, 255, 255, 0.12);
    --border-active: rgba(255, 255, 255, 0.15);

    /* --- Text --- */
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    /* --- Accent Colors --- */
    --accent-blue: #4a6cf7;
    --accent-cyan: #06b6d4;
    --accent-green: #10b981;
    --accent-yellow: #f59e0b;
    --accent-orange: #f97316;
    --accent-red: #ef4444;
    --accent-purple: #7c3aed;

    /* --- Capital Category Colors (5-category system) ---
     * Income     → --accent-blue    (#4a6cf7)  Standalone theta strategies
     * Campaigns  → --accent-cyan    (#06b6d4)  CC/PMCC/Wheel economic units
     * Growth     → --accent-green   (#10b981)  Standalone equity / LEAPs
     * Protection → --accent-purple  (#7c3aed)  Hedge / protective structures
     * Reserves   → --text-muted     (#64748b)  Cash equivalents
     * -------------------------------------------------- */

    /* --- SGE Priority Colors --- */
    --sge-critical: #ef4444;   /* Red */
    --sge-action: #f97316;     /* Orange */
    --sge-monitor: #fbbf24;    /* Yellow */
    --sge-info: #4ade80;       /* Green */

    /* --- Extended Palette (semantic shades used across feature CSS) --- */
    --accent-red-light: #f87171;      /* Red 400 — lighter warning states */
    --accent-red-pale: #fca5a5;       /* Red 300 — very light alerts */
    --accent-orange-light: #fb923c;   /* Orange 400 — lighter orange accent */
    --accent-orange-pale: #fdba74;    /* Orange 300 — very light orange */
    --accent-green-bright: #22c55e;   /* Green 500 — brighter success */
    --accent-green-pale: #86efac;     /* Green 300 — very light green */
    --accent-blue-dark: #2563eb;      /* Blue 600 — darker interactive blue */
    --accent-blue-medium: #3a5ce7;    /* Blue — medium interactive blue */
    --accent-blue-light: #60a5fa;     /* Blue 400 — lighter blue */
    --accent-indigo: #6366f1;         /* Indigo 500 — indigo accent */
    --accent-indigo-light: #818cf8;   /* Indigo 400 — lighter indigo */
    --text-tertiary: #6b7280;         /* Gray 500 — tertiary text / muted labels */
    --text-placeholder: #9ca3af;      /* Gray 400 — placeholder text */
    --text-light: #d1d5db;            /* Gray 300 — very light text on dark bg */
    --bg-overlay: #1e293b;            /* Slate 800 — overlay/backdrop bg */
    --bg-section: #1f2937;            /* Gray 800 — section background */
    --bg-subtle: #f9fafb;             /* Gray 50 — near-white subtle bg */
    --border-light: #e2e8f0;          /* Slate 200 — light border on white bg */
    --color-white: #ffffff;           /* Pure white */
    --text-muted-dark: #475569;       /* Slate 600 — darker muted */
    --text-dark: #374151;             /* Gray 700 — dark readable text */
    --accent-amber-dark: #92400e;     /* Amber 800 — dark amber / warning text */

    /* --- Full Tailwind-compatible extended palette (used in feature CSS) --- */
    --accent-cyan-light: #22d3ee;     /* Cyan 400 */
    --accent-yellow-bright: #facc15;  /* Yellow 400 */
    --accent-yellow-medium: #fcd34d;  /* Yellow 300 */
    --accent-yellow-dark: #eab308;    /* Yellow 500 */
    --accent-pink: #f472b6;           /* Pink 400 */
    --accent-pink-dark: #ec4899;      /* Pink 500 */
    --accent-pink-darker: #db2777;    /* Pink 600 */
    --accent-purple-light: #a855f7;   /* Purple 500 */
    --accent-purple-dark: #6d28d9;    /* Violet 700 */
    --accent-indigo-dark: #4338ca;    /* Indigo 700 */
    --accent-indigo-darker: #1e40af;  /* Blue 800 (indigo) */
    --accent-indigo-medium: #3b5de7;  /* Blue medium */
    --accent-blue-dark2: #1d4ed8;     /* Blue 700 */
    --accent-blue-pale: #93c5fd;      /* Blue 300 */
    --accent-indigo-pale: #a5b4fc;    /* Indigo 300 */
    --accent-indigo-light2: #818cf8;  /* Indigo 400 */
    --accent-green-medium2: #6ee7b7;  /* Green 300 (teal) */
    --accent-teal-dark: #0d9668;      /* Teal 600 */
    --accent-green-pale2: #bbf7d0;    /* Green 200 */
    --accent-red-dark2: #991b1b;      /* Red 800 */
    --border-lighter: #e5e7eb;        /* Gray 200 */
    --border-medium: #d1d5db;         /* Gray 300 (alias) */
    --text-gray-medium: #4b5563;      /* Gray 600 */
    --bg-slate-dark: #334155;         /* Slate 700 */
    --bg-navy: #1e1e30;               /* Very dark navy */
    --bg-navy-deep: #1a2f6b;          /* Deep navy (gradient base) */
    --bg-darkest2: #1a1a2e;           /* Near-black bg */
    --bg-gray-dark: #2a2a40;          /* Dark gray panel */
    --bg-card-alt: #3a3a4c;           /* Card alt bg */
    --bg-card-hover: #4a4a5c;         /* Card hover bg */
    --bg-near-white2: #f3f4f6;        /* Gray 100 */
    --color-black: #000000;           /* Pure black */
    --accent-violet: #8b5cf6;         /* Violet 500 */
    --text-gray-light: #9b9b9b;       /* Light gray text */
    --text-dark2: #333333;            /* Near-black text */
    --accent-orange-pale2: #fed7aa;   /* Orange 200 */
    --accent-yellow-pale: #fef08a;    /* Yellow 200 */
    --bg-blue-dark: #1a2f6b;          /* Dark blue bg (alias) */

    /* --- Typography --- */
    --font-family: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --font-size-2xs: 0.65rem;   /* 10.4px — micro labels, table headers */
    --font-size-xs: 0.7rem;     /* 11.2px — badges */
    --font-size-sm: 0.78rem;    /* 12.5px — table cells, secondary text */
    --font-size-base: 0.85rem;  /* 13.6px — body, buttons, inputs */
    --font-size-md: 0.95rem;    /* 15.2px — card titles */
    --font-size-lg: 1.1rem;     /* 17.6px — section headers */
    --font-size-xl: 1.3rem;     /* 20.8px — page title */
    --font-size-2xl: 1.5rem;    /* 24px — metric values */
    --font-size-3xl: 2rem;      /* 32px — hero numbers */

    /* --- Spacing --- */
    --space-2xs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 32px;
    --space-4xl: 48px;

    /* --- Border Radius --- */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 50%;
    --radius-pill: 100px;

    /* --- Sidebar --- */
    --sidebar-collapsed: 60px;
    --sidebar-expanded: 250px;
    --sidebar-transition: 0.2s ease;
    --sidebar-hover-delay: 300ms;

    /* --- Header --- */
    --header-row-height: 44px;
    --tabs-height: 42px;
    --logo-height: 88px;

    /* --- Panels --- */
    --panel-width: 360px;
    --panel-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Z-Index --- */
    --z-sidebar: 100;
    --z-header: 1000;
    --z-panel-overlay: 200;
    --z-panel: 210;
    --z-dropdown: 500;
    --z-modal: 1000;
    --z-toast: 1100;
    --z-tooltip: 10000;

    /* --- Transitions --- */
    --transition-fast: 0.1s ease;
    --transition-base: 0.15s ease;
    --transition-slow: 0.3s ease;
}

/* ============================================
   RESET
   ============================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
}

img {
    max-width: 100%;
    display: block;
}

input, select, textarea {
    font-family: inherit;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

/* Font sizes */
.text-2xs { font-size: var(--font-size-2xs); }
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

/* Font weights */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Text colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-green { color: var(--accent-green); }
.text-red { color: var(--accent-red); }
.text-yellow { color: var(--accent-yellow); }
.text-orange { color: var(--accent-orange); }
.text-blue { color: var(--accent-blue); }
.text-purple { color: var(--accent-purple); }
.text-cyan { color: var(--accent-cyan); }
.text-tertiary { color: var(--text-tertiary); }

/* Numeric values — ALWAYS use these for financial data */
.num { font-family: var(--font-mono); }
.num-positive { font-family: var(--font-mono); color: var(--accent-green); }
.num-negative { font-family: var(--font-mono); color: var(--accent-red); }
.num-warning { font-family: var(--font-mono); color: var(--accent-yellow); }
.num-neutral { font-family: var(--font-mono); color: var(--text-primary); }

/* Layout helpers */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }

/* Gap utilities */
.gap-2xs { gap: var(--space-2xs); }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-10 { gap: 10px; }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }

/* Margin utilities */
.mt-xs { margin-top: var(--space-xs); }
.mt-6  { margin-top: 6px; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

.mb-xs { margin-bottom: var(--space-xs); }
.mb-6  { margin-bottom: 6px; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

.ml-xs { margin-left: var(--space-xs); }
.ml-sm { margin-left: var(--space-sm); }
.ml-md { margin-left: var(--space-md); }
.ml-auto { margin-left: auto; }

.mr-xs { margin-right: var(--space-xs); }
.mr-sm { margin-right: var(--space-sm); }
.mr-md { margin-right: var(--space-md); }
.mr-auto { margin-right: auto; }

/* Padding utilities */
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Text transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

/* Truncate text */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Visibility */
.hidden { display: none; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Opacity */
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-100 { opacity: 1; }

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* Width */
.w-full { width: 100%; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* Border radius */
.rounded-xs { border-radius: var(--radius-xs); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }
.rounded-pill { border-radius: var(--radius-pill); }

/* ============================================
   ICON SIZE UTILITIES
   Used on inline SVG elements for consistent sizing
   ============================================ */
.icon-6  { width:  6px; height:  6px; fill: currentColor; }
.icon-8  { width:  8px; height:  8px; }
.icon-10 { width: 10px; height: 10px; }
.icon-12 { width: 12px; height: 12px; }
.icon-14 { width: 14px; height: 14px; }
.icon-16 { width: 16px; height: 16px; }
.icon-18 { width: 18px; height: 18px; }
.icon-20 { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; }

/* Inline icon modifier: use with .icon-14/.icon-16 inside text elements */
.icon-inline    { display: inline; vertical-align: -2px; }
.icon-inline-lg { display: inline; vertical-align: -3px; }

/* Loading spinner ring (used in grid loading overlays) */
.spinner-ring {
    width: 32px; height: 32px;
    border: 3px solid var(--border-color, #e2e8f0);
    border-top-color: var(--accent-blue, #3b82f6);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ============================================
   COMMON LAYOUT PATTERNS
   ============================================ */

/* Row header: flex row with space-between and minimal vertical padding */
.row-header {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
}

/* Divider — faint horizontal rule used in lists and panels */
.divider-faint {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 6px 0;
}

/* ============================================
   EMPTY STATE UTILITIES
   ============================================ */
.empty-state { text-align: center; color: var(--text-muted); }
.empty-state-sm  { text-align: center; color: var(--text-muted); padding: var(--space-md); }
.empty-state-md  { text-align: center; color: var(--text-muted); padding: var(--space-lg); }
.empty-state-lg  { text-align: center; color: var(--text-muted); padding: var(--space-xl); }
.empty-state-xl  { text-align: center; color: var(--text-muted); padding: var(--space-2xl); }

/* ============================================
   LABEL UTILITIES (section headers, meta info)
   ============================================ */
/* Muted label for small secondary text below a value */
.label-muted {
    color: var(--text-secondary);
    font-size: 13px;
    display: block;
    margin-bottom: 6px;
}

/* Section label — uppercase micro-text headings */
.section-label {
    font-weight: 700;
    font-size: 0.7rem;
    margin-bottom: 6px;
}

/* Font weight helpers */
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* Padding shortcuts */
.p-12 { padding: 12px; }
.p-16 { padding: 16px; }
.p-20 { padding: 20px; }
.p-24 { padding: 24px; }
.pl-24 { padding-left: 24px; }
.mt-8  { margin-top:  8px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }

/* Font size shortcuts (pixel-based, for cases where rem isn't ideal) */
.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }

/* Height shortcuts */
.h-260 { height: 260px; }

/* Cursor */
.pointer { cursor: pointer; }

/* Font style */
.italic { font-style: italic; }

/* ============================================
   COMMON INLINE PATTERN CLASSES
   Extracted from recurring inline style patterns
   ============================================ */

/* Meta label — small secondary info below a value */
.meta-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

/* Field label — xs label above form inputs or data fields */
.field-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

/* Field label — 2px bottom margin variant */
.field-label-2 {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 2px;
}

/* Flex row with centered alignment and standard gap */
.flex-row-16 {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Detail layout: fixed label column, flexible value */
.detail-label { flex: 0 0 200px; font-weight: 500; }

/* Hero value display — large bold metric */
.hero-value      { font-size: 1.2rem; font-weight: 700; }
.hero-value-only { font-size: 1.2rem; }

/* Highlighted badge — subtle blue background */
.badge-blue-subtle {
    text-align: center;
    padding: 8px;
    background: rgba(59, 130, 246, 0.08);
    border-radius: 6px;
}

/* Muted badge — gray-500 / secondary text combo */
.badge-muted {
    background: rgba(107, 114, 128, 0.15);
    color: var(--text-secondary);
}

/* Margin bottom utilities (additional sizes) */
.mb-2xl { margin-bottom: var(--space-2xl); }

/* Accent blue bold — interactive value in primary blue with emphasis */
.accent-blue-bold {
    color: var(--accent-blue);
    font-weight: 700;
}

/* Small indicator dot — 6px colored dot */
.dot-green { width: 6px; height: 6px; background: var(--accent-green); border-radius: 50%; }
.dot-red   { width: 6px; height: 6px; background: var(--accent-red);   border-radius: 50%; }
.dot-yellow{ width: 6px; height: 6px; background: var(--accent-yellow); border-radius: 50%; }

/* ============================================
   GLOBAL SCROLLBAR — thin 4px semi-transparent
   Spec §9 — applies to all scrollable areas
   ============================================ */
::-webkit-scrollbar              { width: 4px; height: 4px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: rgba(255,255,255,0.12); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(255,255,255,0.20); }
*                                { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }