/* ================================================================
   GMLM Core Platform — Global Stylesheet
   Tailwind base + design token layer + utility overrides
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── Design Tokens ─────────────────────────────────────────────
   Root CSS custom properties. The @brandColors Blade directive
   injects overrides at runtime based on AppearanceSettings.
   ─────────────────────────────────────────────────────────── */
:root {
    /* Brand color scale (default: Indigo) */
    --color-brand-50:  #eef2ff;
    --color-brand-100: #e0e7ff;
    --color-brand-200: #c7d2fe;
    --color-brand-300: #a5b4fc;
    --color-brand-400: #818cf8;
    --color-brand-500: #6366f1;
    --color-brand-600: #4f46e5;
    --color-brand-700: #4338ca;
    --color-brand-800: #3730a3;
    --color-brand-900: #312e81;
    --color-brand-950: #1e1b4b;

    /* Income type colors (never change with brand) */
    --color-income-direct:     #6366F1;
    --color-income-binary:     #8B5CF6;
    --color-income-level:      #3B82F6;
    --color-income-custom:     #06B6D4;
    --color-income-rank:       #F59E0B;
    --color-income-target:     #10B981;
    --color-income-repurchase: #EC4899;

    /* Semantic surface colors (light mode) */
    --surface-page:       #F8F9FC;
    --surface-card:       #FFFFFF;
    --surface-card-hover: #F3F4F6;
    --surface-border:     #E5E7EB;
    --surface-input:      #FFFFFF;

    /* Text scale */
    --text-primary:   #111827;
    --text-secondary: #6B7280;
    --text-tertiary:  #9CA3AF;
    --text-inverse:   #FFFFFF;

    /* Sidebar */
    --sidebar-bg:     #1E1B4B;
    --sidebar-text:   #A5B4FC;
    --sidebar-active: #4F46E5;

    /* Transitions */
    --transition-fast: 100ms ease;
    --transition-base: 150ms ease;
    --transition-slow: 300ms ease;
}

/* ── Dark Mode Token Overrides ───────────────────────────────── */
.dark {
    --surface-page:       #0F1117;
    --surface-card:       #1A1D27;
    --surface-card-hover: #222535;
    --surface-border:     #2D3148;
    --surface-input:      #1A1D27;

    --text-primary:   #F9FAFB;
    --text-secondary: #9CA3AF;
    --text-tertiary:  #6B7280;
    --text-inverse:   #111827;

    --sidebar-bg:     #12102E;
    --sidebar-text:   #818CF8;
    --sidebar-active: #4F46E5;
}

/* ── Base Styles ──────────────────────────────────────────────── */
@layer base {
    html {
        font-family: 'Inter', sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        scroll-behavior: smooth;
    }

    body {
        background-color: var(--surface-page);
        color: var(--text-primary);
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-weight: 600;
        color: var(--text-primary);
    }

    /* Financial amounts always use monospace */
    .financial, .amount, [data-amount] {
        font-family: 'JetBrains Mono', monospace;
        font-variant-numeric: tabular-nums;
    }

    /* Focus ring consistent with brand */
    *:focus-visible {
        outline: 2px solid var(--color-brand-500);
        outline-offset: 2px;
    }

    /* Scrollbar styling */
    ::-webkit-scrollbar       { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
        background: var(--surface-border);
        border-radius: 3px;
    }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
}

/* ── Component Layer ──────────────────────────────────────────── */
@layer components {
    /* ── Cards ──────────────────────────────────────────────── */
    .card {
        background: var(--surface-card);
        border: 1px solid var(--surface-border);
        border-radius: 0.75rem;
        padding: 1.5rem;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08);
        transition: box-shadow var(--transition-base);
    }
    .card:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
    .card-sm { padding: 1rem; border-radius: 0.5rem; }
    .card-lg { padding: 2rem; border-radius: 1rem; }

    /* ── Buttons ─────────────────────────────────────────────── */
    .btn {
        @apply inline-flex items-center justify-center gap-2 font-medium
               rounded-lg px-4 py-2 text-sm transition-all duration-150
               focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
    }
    .btn-primary {
        @apply btn bg-brand-600 text-white hover:bg-brand-700
               focus-visible:ring-brand-500;
    }
    .btn-secondary {
        @apply btn bg-transparent text-brand-600 border border-brand-200
               hover:bg-brand-50 focus-visible:ring-brand-400;
    }
    .btn-ghost {
        @apply btn bg-transparent text-gray-600 hover:bg-gray-100
               dark:text-gray-300 dark:hover:bg-gray-700;
    }
    .btn-danger {
        @apply btn bg-red-600 text-white hover:bg-red-700
               focus-visible:ring-red-500;
    }
    .btn-sm { @apply px-3 py-1.5 text-xs; }
    .btn-lg { @apply px-6 py-3 text-base; }
    .btn-icon { @apply p-2 rounded-lg; }

    /* ── Inputs ──────────────────────────────────────────────── */
    .form-input {
        @apply block w-full rounded-lg border border-gray-300 bg-white
               px-3.5 py-2.5 text-sm text-gray-900
               placeholder:text-gray-400
               focus:border-brand-500 focus:ring-1 focus:ring-brand-500
               disabled:cursor-not-allowed disabled:bg-gray-50
               dark:border-gray-600 dark:bg-gray-800 dark:text-white
               dark:placeholder:text-gray-500 dark:focus:border-brand-400;
    }
    .form-label {
        @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
    }
    .form-error {
        @apply text-xs text-red-600 dark:text-red-400 mt-1;
    }
    .form-help {
        @apply text-xs text-gray-500 dark:text-gray-400 mt-1;
    }

    /* ── Badges ──────────────────────────────────────────────── */
    .badge {
        @apply inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium;
    }
    .badge-green  { @apply badge bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400; }
    .badge-red    { @apply badge bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-400; }
    .badge-yellow { @apply badge bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400; }
    .badge-blue   { @apply badge bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400; }
    .badge-gray   { @apply badge bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400; }
    .badge-brand  { @apply badge bg-brand-50 text-brand-700 dark:bg-brand-900/30 dark:text-brand-300; }

    /* ── Sidebar ─────────────────────────────────────────────── */
    .sidebar-link {
        @apply flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm
               font-medium transition-all duration-150 cursor-pointer;
        color: var(--sidebar-text);
    }
    .sidebar-link:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
    }
    .sidebar-link.active {
        background: var(--color-brand-600);
        color: #ffffff;
    }

    /* ── Table ───────────────────────────────────────────────── */
    .table-auto {
        @apply w-full text-sm text-left;
    }
    .table-auto th {
        @apply px-4 py-3 font-semibold text-gray-600 dark:text-gray-400
               border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50;
    }
    .table-auto td {
        @apply px-4 py-3 border-b border-gray-100 dark:border-gray-800;
    }
    .table-auto tr:hover td {
        @apply bg-gray-50 dark:bg-gray-800/30;
    }

    /* ── Status colors for income types ─────────────────────── */
    .income-dot-direct     { @apply w-2 h-2 rounded-full bg-indigo-500; }
    .income-dot-binary     { @apply w-2 h-2 rounded-full bg-violet-500; }
    .income-dot-level      { @apply w-2 h-2 rounded-full bg-blue-500; }
    .income-dot-custom     { @apply w-2 h-2 rounded-full bg-cyan-500; }
    .income-dot-rank       { @apply w-2 h-2 rounded-full bg-amber-500; }
    .income-dot-target     { @apply w-2 h-2 rounded-full bg-emerald-500; }
    .income-dot-repurchase { @apply w-2 h-2 rounded-full bg-pink-500; }
}

/* ── Utility Layer ────────────────────────────────────────────── */
@layer utilities {
    /* Page layout */
    .page-container {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6;
    }
    .page-header {
        @apply mb-6 flex items-center justify-between;
    }
    .page-title {
        @apply text-2xl font-bold text-gray-900 dark:text-white;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    /* Financial amount formatting */
    .amount-positive { @apply text-emerald-600 dark:text-emerald-400; }
    .amount-negative { @apply text-red-600 dark:text-red-400; }
    .amount-neutral  { @apply text-gray-900 dark:text-gray-100; }

    /* Truncate with tooltip */
    .truncate-tip {
        @apply truncate cursor-default;
    }

    /* Sidebar fixed positioning */
    .sidebar-fixed {
        @apply fixed inset-y-0 left-0 z-50 flex flex-col;
        width: theme('spacing.sidebar');
        background: var(--sidebar-bg);
    }

    /* Content area offset */
    .content-with-sidebar {
        @apply transition-all duration-300;
        margin-left: theme('spacing.sidebar');
    }

    @media (max-width: 1024px) {
        .content-with-sidebar { margin-left: 0; }
    }
}