/* stitch-theme.css - FinTrack Unified Design System (Google Stitch / MD3) */

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Design Tokens ────────────────────────────────────────────────────────── */
:root {
    /* Brand Colors */
    --md-primary:           #1D4ED8;
    --md-primary-container: #DBEAFE;
    --md-primary-dark:      #1a44c2;
    --md-secondary:         #7C3AED;
    --md-success:           #059669;
    --md-success-bg:        #d1fae5;
    --md-warning:           #D97706;
    --md-warning-bg:        #ffedd5;
    --md-error:             #DC2626;
    --md-error-bg:          #fee2e2;
    --md-info:              #0284C7;
    --md-info-bg:           #e0f2fe;

    /* Neutral Palette */
    --md-surface:           #FFFFFF;
    --md-background:        #F8FAFC;
    --md-surface-2:         #F1F5F9;
    --md-text-primary:      #1E293B;
    --md-text-secondary:    #64748B;
    --md-text-muted:        #94A3B8;
    --md-border:            #E2E8F0;
    --md-divider:           #F1F5F9;

    /* Spacing (8px grid) */
    --sp-xs:  4px;
    --sp-sm:  8px;
    --sp-md:  16px;
    --sp-lg:  24px;
    --sp-xl:  32px;
    --sp-2xl: 48px;

    /* Border Radius */
    --r-sm:  4px;
    --r-md:  8px;
    --r-lg:  12px;
    --r-xl:  16px;
    --r-2xl: 24px;

    /* Elevation */
    --shadow-0: none;
    --shadow-1: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
    --shadow-2: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.05);
    --shadow-3: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);

    /* Typography */
    --font-main: 'Inter', 'Segoe UI', sans-serif;
    --font-mono: 'Roboto Mono', 'Consolas', monospace;

    /* Legacy compat mappings (old dark vars → light equivalents) */
    --accent:  var(--md-primary);
    --bg:      var(--md-background);
    --card:    var(--md-surface);
    --border:  var(--md-border);
    --success: var(--md-success);
    --danger:  var(--md-error);
    --delay:   var(--md-warning);

    /* Additional legacy mappings — used across neo/*.php and view files */
    --primary:        var(--md-primary);
    --primary-dark:   var(--md-primary-dark);
    --secondary:      var(--md-secondary);
    --secondary-dark: #6D28D9;
    --warning:        var(--md-warning);
    --info:           var(--md-info);
    --info-bg:        var(--md-info-bg);
    --warning-bg:     var(--md-warning-bg);
    --success-bg:     var(--md-success-bg);
    --danger-bg:      var(--md-error-bg);
    --success-dark:   #047857;
    --warning-text:   #92400E;
}

/* ── Base Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    background-color: var(--md-background);
    color: var(--md-text-primary);
    font-family: var(--font-main);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--md-text-primary);
    margin: 0 0 var(--sp-sm) 0;
    line-height: 1.3;
}

h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

p { color: var(--md-text-secondary); margin: 0 0 var(--sp-sm) 0; }
a { color: var(--md-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
small { color: var(--md-text-muted); font-size: 12px; }
strong { color: var(--md-text-primary); font-weight: 600; }

/* ── Surface Card (primary container) ───────────────────────────────────── */
.surface-card {
    background: var(--md-surface);
    border: 1px solid var(--md-border);
    border-radius: var(--r-lg);
    padding: var(--sp-lg);
    box-shadow: var(--shadow-1);
    transition: box-shadow 0.2s ease;
}
.surface-card:hover { box-shadow: var(--shadow-2); }

/* ── Legacy .card alias ───────────────────────────────────────────────────── */
.card {
    background: var(--md-surface);
    border: 1px solid var(--md-border);
    border-radius: var(--r-lg);
    padding: var(--sp-lg);
    box-shadow: var(--shadow-1);
    margin-bottom: var(--sp-lg);
    transition: box-shadow 0.2s ease;
}
.card:hover { box-shadow: var(--shadow-2); }

/* ── Containers ───────────────────────────────────────────────────────────── */
.container { max-width: 1280px; margin: 0 auto; padding: var(--sp-lg); }

/* ── Utility ──────────────────────────────────────────────────────────────── */
.text-primary   { color: var(--md-primary) !important; }
.text-success   { color: var(--md-success) !important; }
.text-warning   { color: var(--md-warning) !important; }
.text-error     { color: var(--md-error) !important; }
.text-muted     { color: var(--md-text-muted) !important; }
.text-secondary { color: var(--md-text-secondary) !important; }
.text-sm        { font-size: 12px; }
.text-xs        { font-size: 11px; }
.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }

.d-flex        { display: flex; }
.d-inline-flex { display: inline-flex; }
.flex-wrap     { flex-wrap: wrap; }
.align-center  { align-items: center; }
.align-items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-content-between { justify-content: space-between; }
.gap-1         { gap: 4px; }
.gap-2         { gap: 8px; }
.gap-3         { gap: 12px; }
.gap-5         { gap: 20px; }
.gap-sm        { gap: var(--sp-sm); }
.gap-md        { gap: var(--sp-md); }

/* Margin utilities */
.mb-0  { margin-bottom: 0 !important; }
.mb-5  { margin-bottom: 5px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-15 { margin-bottom: 15px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-25 { margin-bottom: 25px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-15 { margin-top: 15px !important; }
.mt-20 { margin-top: 20px !important; }
.pl-4  { padding-left: 16px; }

/* Typography utilities */
.fs-85  { font-size: 0.85rem; }
.fs-90  { font-size: 0.90rem; }
.list-unstyled { list-style: none; padding-left: 0; margin: 0; }
.border-bottom { border-bottom: 2px solid var(--md-border); padding-bottom: 4px; }

/* ── Msg Box / Alerts ─────────────────────────────────────────────────────── */
.msg-box {
    background: var(--md-success-bg);
    border: 1px solid var(--md-success);
    color: var(--md-success);
    padding: var(--sp-md);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-md);
    font-size: 14px;
    font-weight: 500;
}
.msg-box.error {
    background: var(--md-error-bg);
    border-color: var(--md-error);
    color: var(--md-error);
}
.msg-box.warning {
    background: var(--md-warning-bg);
    border-color: var(--md-warning);
    color: var(--md-warning);
}
.msg-box.danger {
    background: var(--md-error-bg);
    border-color: var(--md-error);
    color: var(--md-error);
}
.msg-box.success {
    background: var(--md-success-bg);
    border-color: var(--md-success);
    color: var(--md-success);
}

/* ── File Link ────────────────────────────────────────────────────────────── */
.file-link {
    color: var(--md-primary);
    font-weight: 500;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.file-link:hover { text-decoration: underline; }

/* ── Override all residual dark theme inline styles ──────────────────────── */
/* These catch any hardcoded dark colors in existing PHP view files */
[style*="color: #333"],
[style*="color:#333"] { color: var(--md-text-primary) !important; }

[style*="color: #555"],
[style*="color:#555"],
[style*="color: #666"],
[style*="color:#666"] { color: var(--md-text-secondary) !important; }

[style*="background: #1a1a1a"],
[style*="background:#1a1a1a"],
[style*="background-color: #1a1a1a"] { background: var(--md-surface) !important; }


/* Dark card/section overrides */
.soft-card,
.soft-modal-overlay .soft-modal-container {
    background: var(--md-surface) !important;
    border: 1px solid var(--md-border) !important;
    color: var(--md-text-primary) !important;
}
.soft-card-header {
    background: var(--md-surface-2) !important;
    border-bottom: 1px solid var(--md-border) !important;
    color: var(--md-text-primary) !important;
}
.soft-card-title { color: var(--md-text-primary) !important; }
.soft-form-label { color: var(--md-text-primary) !important; }
.soft-form-hint  { color: var(--md-text-secondary) !important; }

/* Ticket cards (operations) */
.ticket-card {
    background: var(--md-surface) !important;
    border-radius: var(--r-lg) !important;
    border: 1px solid var(--md-border);
    overflow: hidden;
}
.ticket-header {
    background: var(--md-surface-2) !important;
    color: var(--md-text-primary) !important;
}
.ticket-header:hover { background: #e8edf3 !important; }
.ticket-details { background: var(--md-surface) !important; }
.ticket-details h4 { color: var(--md-text-primary) !important; }
.ticket-details strong { color: var(--md-text-primary) !important; }

/* Status badge legacy */
.status-badge {
    background: var(--md-surface-2);
    color: var(--md-text-secondary);
    border: 1px solid var(--md-border);
    padding: 3px 10px;
    border-radius: var(--r-sm);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}

/* Tab navigation */
.tab-link {
    padding: 12px 18px;
    color: var(--md-text-secondary);
    cursor: pointer;
    display: inline-block;
    font-weight: 500;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
}
.tab-link:hover {
    color: var(--md-primary);
    background: var(--md-primary-container);
}
.tab-link.active {
    color: var(--md-primary);
    border-bottom: 2px solid var(--md-primary);
    font-weight: 600;
}
.tab-content { display: none; animation: fadeIn 0.25s ease; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* User info area */
.user-info { display: flex; align-items: center; gap: 12px; }
.user-info .user-label { font-size: 13px; color: var(--md-text-secondary); }
.user-info .user-label strong { color: var(--md-text-primary); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   NUCLEAR LIGHT THEME OVERRIDE
   Forces light theme on everything regardless of inline styles
   or <style> block rules from old dark-theme PHP files.
   ═══════════════════════════════════════════════════════════════ */

/* Body & page base */
body {
    background-color: #F8FAFC !important;
    color: #1E293B !important;
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Header navigation bar */
.header-nav {
    background: #FFFFFF !important;
    color: #1E293B !important;
    border-bottom: 1px solid #E2E8F0 !important;
}
.header-nav * { color: #1E293B !important; }
.header-nav a.logo-link { color: #1D4ED8 !important; }
.header-nav a.btn-logout { color: #DC2626 !important; }

/* Main tab bar — always white */
.main-tab-group {
    background: #FFFFFF !important;
    border-bottom: 2px solid #E2E8F0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
.main-tab {
    color: #64748B !important;
    background: transparent !important;
}
.main-tab:hover {
    color: #1D4ED8 !important;
    background: #EFF6FF !important;
}
.main-tab.active {
    color: #1D4ED8 !important;
    background: #EFF6FF !important;
    border-bottom-color: #1D4ED8 !important;
}

/* Subtab container — always light */
.subtab-container {
    background: #F8FAFC !important;
    border-bottom: 1px solid #E2E8F0 !important;
}
.subtab {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    color: #64748B !important;
}
.subtab:hover {
    background: #EFF6FF !important;
    border-color: #93C5FD !important;
    color: #1D4ED8 !important;
}
.subtab.active {
    background: #1D4ED8 !important;
    border-color: #1D4ED8 !important;
    color: #FFFFFF !important;
}

/* All cards always white */
.card, .surface-card, .soft-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    color: #1E293B !important;
}
.soft-card-header {
    background: #F8FAFC !important;
    border-bottom: 1px solid #E2E8F0 !important;
    color: #1E293B !important;
}
.soft-card-title, .soft-card-header h3, .soft-card-header h4 {
    color: #1E293B !important;
}

/* Tables always light */
th {
    background: #FFFFFF !important;
    color: #64748B !important;
    border-bottom: 1px solid #E2E8F0 !important;
}
td {
    color: #1E293B !important;
    border-bottom: 1px solid #F1F5F9 !important;
}
tr:hover td { background: #F5F8FF !important; }

/* All form inputs always light */
input, select, textarea {
    background: #FFFFFF !important;
    color: #1E293B !important;
    border: 1px solid #E2E8F0 !important;
}
input::placeholder, textarea::placeholder {
    color: #94A3B8 !important;
}
input:focus, select:focus, textarea:focus {
    border-color: #1D4ED8 !important;
    box-shadow: 0 0 0 3px rgba(29,78,216,0.1) !important;
    outline: none !important;
}
label, .form-label, .soft-form-label {
    color: #1E293B !important;
}

/* Ticket cards (operations) */
.ticket-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
}
.ticket-header {
    background: #F8FAFC !important;
    color: #1E293B !important;
}
.ticket-header h3, .ticket-header span:not([style]) {
    color: #1E293B !important;
}
.ticket-header:hover { background: #EFF6FF !important; }
.ticket-details {
    background: #FFFFFF !important;
    color: #1E293B !important;
}
.ticket-details h4, .ticket-details strong {
    color: #1E293B !important;
}

/* Status badges */
.status-badge {
    background: #F1F5F9 !important;
    color: #64748B !important;
    border: 1px solid #E2E8F0 !important;
}

/* Sync indicator */
.sync-indicator {
    background: #F1F5F9 !important;
    color: #64748B !important;
    border: 1px solid #E2E8F0 !important;
}

/* Container */
.container {
    background: transparent !important;
    color: #1E293B !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: #1E293B !important;
}
p { color: #64748B !important; }
small { color: #94A3B8 !important; }

/* ── Fix: restore inherited text color inside CSS-class-based colored backgrounds.
   The global h/p/small !important rules above break white text in colored containers
   (gradient headers, summary boxes, modals, badges, table headers, buttons).          */
.ca-section-head h4, .ca-section-head small, .ca-section-head p,
.ca-modal-head h3,
.mc-summary h4, .mc-summary small, .mc-summary p,
.mc-count-badge,
.mc-table thead th,
.ms-modal-head h3,
.procurement-header h1, .procurement-header p,
.lh-lead-header h4, .lh-lead-header small, .lh-lead-header p,
.ap-lead-head h4, .ap-lead-head small, .ap-lead-head p,
.te-stat-card h4, .te-stat-card small, .te-stat-card p,
.sq-urgency, .sq-btn-respond,
.soft-modal-header h3, .soft-modal-header h4 { color: inherit !important; }

/* Operations queue detail sections */
.ticket-details [style*="background: rgba(0,123,255"],
.ticket-details [style*="background:#e7f3ff"] {
    background: #EFF6FF !important;
    color: #1D4ED8 !important;
}

/* ── Fix: white text on colored/gradient backgrounds ─────────────────────
   In the old dark theme, color:var(--md-text-primary) was used as white
   text on colored elements. Now that --md-text-primary is #1E293B (dark),
   we must force white text wherever a colored background is present.     */
[style*="linear-gradient"] { color: #FFFFFF !important; }
[style*="linear-gradient"] h2,
[style*="linear-gradient"] h3,
[style*="linear-gradient"] h4,
[style*="linear-gradient"] p,
[style*="linear-gradient"] span,
[style*="linear-gradient"] button { color: #FFFFFF !important; }

/* Colored action buttons need white text */
button[style*="background: #28a745"],
button[style*="background:#28a745"],
button[style*="background: #667eea"],
button[style*="background:#667eea"],
button[style*="background: #6c757d"],
button[style*="background:#6c757d"],
button[style*="background: #ff9800"],
button[style*="background:#ff9800"],
button[style*="background: #764ba2"],
button[style*="background:#764ba2"],
button[style*="background: #fd7e14"],
button[style*="background: #e55300"],
button[style*="background: #dc3545"],
button[style*="background:#dc3545"],
button[style*="background: #17a2b8"],
button[style*="background: #007bff"],
button[style*="background:#007bff"] { color: #FFFFFF !important; }

/* Badge/span on orange idle warning */
span[style*="background: #ff9800"],
span[style*="background:#ff9800"] { color: #FFFFFF !important; }

/* .btn class with inline colored bg */
.btn[style*="background: #28a745"],
.btn[style*="background: #dc3545"],
.btn[style*="background: #007bff"],
.btn[style*="background: #667eea"],
.btn[style*="background: #6c757d"] { color: #FFFFFF !important; }