/* ============================================================
   OLD BLINKR THEME - EXACT VISUAL MATCH
   Dark charcoal theme matching www.blinkrquotes.com
   ============================================================ */

:root[data-theme="old-blinkr"] {
    /* DARK CHARCOAL PALETTE (from live old BlinkR) */
    --bg-app: #1f2937;              /* Dark charcoal-gray */
    --bg-header: #1f2937;           /* Match app background */
    --bg-surface: #374151;          /* Medium gray for cards */
    --bg-surface-soft: #4b5563;     /* Lighter gray for hovers */
    --bg-darkest: #111827;          /* Near-black for deep backgrounds */

    /* TEXT COLORS - Light off-white/beige */
    --text-primary: #f5f5dc;        /* Beige (primary text) */
    --text-secondary: #e5e7eb;      /* Light gray */
    --text-muted: #b5bac6;          /* Muted gray */
    --text-tertiary: #9ca3af;       /* Lighter gray */

    /* BORDERS - Medium-dark */
    --border-subtle: #4b5563;       /* Medium-dark border */
    --border-standard: #374151;     /* Standard borders */
    --border-light: rgba(255, 255, 255, 0.2); /* Subtle white borders */

    /* ACCENT - Neon green */
    --accent-primary: #00ff41;      /* Neon green */
    --accent-soft: rgba(0, 255, 65, 0.2);

    /* BUTTON COLORS */
    --button-primary: #007bff;      /* Blue (primary actions) */
    --button-success: #28a745;      /* Green (complete/success) */
    --button-warning: #ffc107;      /* Amber (warning/processing) */
    --button-danger: #dc3545;       /* Red (errors/danger) */
    --button-teal: #20c997;         /* Teal (secondary success) */

    /* BUTTON TEXT */
    --button-text-on-primary: #ffffff;
    --button-text-on-accent: #000000;

    /* STATUS COLORS */
    --status-success: #28a745;
    --status-warning: #ffc107;
    --status-danger: #dc3545;
    --status-info: #007bff;
    --status-magenta: #ff0080;      /* Corrected status */
    --status-cyan: #00ffff;         /* Learned status */
    --status-orange: #ff6600;       /* Training indicator */
    --status-emerald: #10b981;      /* High confidence */
    --status-amber: #f59e0b;        /* Medium confidence */
    --status-red: #ef4444;          /* Low confidence */

    /* LOGO COLORS */
    --logo-accent-1: #00ff41;
    --logo-accent-2: #00a8e8;

    /* LINKS */
    --link-color: #00a8e8;
    --link-hover: #00d4ff;

    /* OVERLAYS */
    --overlay-modal: rgba(0, 0, 0, 0.7);
    --overlay-highlight: rgba(0, 168, 232, 0.1);
}

/* ============================================================
   GLOBAL BACKGROUNDS
   ============================================================ */

:root[data-theme="old-blinkr"] body,
:root[data-theme="old-blinkr"] .app-shell {
    background-color: var(--bg-app);
    color: var(--text-primary);
}

:root[data-theme="old-blinkr"] .app-header {
    background-color: var(--bg-header);
    border-bottom: 1px solid var(--border-subtle);
}

/* ============================================================
   SURFACES & CARDS
   ============================================================ */

:root[data-theme="old-blinkr"] .card,
:root[data-theme="old-blinkr"] .panel,
:root[data-theme="old-blinkr"] .module-card,
:root[data-theme="old-blinkr"] .surface {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
}

:root[data-theme="old-blinkr"] .card:hover,
:root[data-theme="old-blinkr"] .module-card:hover {
    background-color: var(--bg-surface-soft);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   BUTTONS
   ============================================================ */

:root[data-theme="old-blinkr"] .btn,
:root[data-theme="old-blinkr"] button {
    font-weight: 600;
    border-radius: 6px;
    padding: 10px 20px;
    transition: all 0.2s ease;
    border: none;
}

:root[data-theme="old-blinkr"] .btn-primary,
:root[data-theme="old-blinkr"] button.primary {
    background: linear-gradient(135deg, var(--button-primary), #0056b3);
    color: var(--button-text-on-primary);
}

:root[data-theme="old-blinkr"] .btn-primary:hover {
    background: linear-gradient(135deg, #0056b3, var(--button-primary));
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.4);
}

:root[data-theme="old-blinkr"] .btn-success,
:root[data-theme="old-blinkr"] button.success {
    background: linear-gradient(135deg, var(--button-success), var(--button-teal));
    color: var(--button-text-on-primary);
}

:root[data-theme="old-blinkr"] .btn-success:hover {
    background: linear-gradient(135deg, var(--button-teal), var(--button-success));
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.4);
}

:root[data-theme="old-blinkr"] .btn-warning,
:root[data-theme="old-blinkr"] button.warning {
    background: var(--button-warning);
    color: #000;
}

:root[data-theme="old-blinkr"] .btn-danger,
:root[data-theme="old-blinkr"] button.danger {
    background: var(--button-danger);
    color: var(--button-text-on-primary);
}

:root[data-theme="old-blinkr"] .btn-secondary,
:root[data-theme="old-blinkr"] button.secondary {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

:root[data-theme="old-blinkr"] .btn-secondary:hover {
    background: var(--bg-surface-soft);
    border-color: var(--accent-primary);
}

/* ============================================================
   TABLE LAYOUT - ZOOM FRIENDLY
   ============================================================ */

:root[data-theme="old-blinkr"] .data-table,
:root[data-theme="old-blinkr"] table,
:root[data-theme="old-blinkr"] #resultsTable,
:root[data-theme="old-blinkr"] .results-table {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    font-size: 14px !important;
}

:root[data-theme="old-blinkr"] .table-wrapper,
:root[data-theme="old-blinkr"] .parsed-table,
:root[data-theme="old-blinkr"] #resultsTableWrapper {
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
}

:root[data-theme="old-blinkr"] .data-table td,
:root[data-theme="old-blinkr"] table td {
    white-space: normal !important;
    word-wrap: break-word !important;
    padding: 12px 16px !important;
    vertical-align: top !important;
    color: var(--text-primary) !important;
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

:root[data-theme="old-blinkr"] .data-table th,
:root[data-theme="old-blinkr"] table th {
    padding: 12px 16px !important;
    font-weight: 700 !important;
    background: var(--bg-darkest) !important;
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--border-subtle) !important;
}

:root[data-theme="old-blinkr"] .data-table tr:hover td {
    background: var(--bg-surface-soft) !important;
}

/* ============================================================
   FORMS & INPUTS
   ============================================================ */

:root[data-theme="old-blinkr"] input,
:root[data-theme="old-blinkr"] textarea,
:root[data-theme="old-blinkr"] select {
    background-color: var(--bg-darkest);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    border-radius: 4px;
    padding: 8px 12px;
}

:root[data-theme="old-blinkr"] input:focus,
:root[data-theme="old-blinkr"] textarea:focus,
:root[data-theme="old-blinkr"] select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(0, 255, 65, 0.1);
}

/* ============================================================
   STATUS BADGES & PILLS
   ============================================================ */

:root[data-theme="old-blinkr"] .status-badge,
:root[data-theme="old-blinkr"] .badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

:root[data-theme="old-blinkr"] .status-success,
:root[data-theme="old-blinkr"] .badge-success {
    background: var(--status-success);
    color: #fff;
}

:root[data-theme="old-blinkr"] .status-warning,
:root[data-theme="old-blinkr"] .badge-warning {
    background: var(--status-warning);
    color: #000;
}

:root[data-theme="old-blinkr"] .status-danger,
:root[data-theme="old-blinkr"] .badge-danger {
    background: var(--status-danger);
    color: #fff;
}

:root[data-theme="old-blinkr"] .status-info,
:root[data-theme="old-blinkr"] .badge-info {
    background: var(--status-info);
    color: #fff;
}

/* ============================================================
   TABS & NAVIGATION
   ============================================================ */

:root[data-theme="old-blinkr"] .tab,
:root[data-theme="old-blinkr"] .nav-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

:root[data-theme="old-blinkr"] .tab:hover {
    color: var(--text-primary);
    border-bottom-color: var(--border-subtle);
}

:root[data-theme="old-blinkr"] .tab.active,
:root[data-theme="old-blinkr"] .nav-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
    font-weight: 600;
}

/* ============================================================
   MODALS & OVERLAYS
   ============================================================ */

:root[data-theme="old-blinkr"] .modal-overlay {
    background: var(--overlay-modal);
}

:root[data-theme="old-blinkr"] .modal,
:root[data-theme="old-blinkr"] .dialog {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   SCROLLBARS
   ============================================================ */

:root[data-theme="old-blinkr"] ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

:root[data-theme="old-blinkr"] ::-webkit-scrollbar-track {
    background: var(--bg-darkest);
}

:root[data-theme="old-blinkr"] ::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: 6px;
}

:root[data-theme="old-blinkr"] ::-webkit-scrollbar-thumb:hover {
    background: var(--bg-surface-soft);
}

/* ============================================================
   TEXT SELECTION
   ============================================================ */

:root[data-theme="old-blinkr"] ::selection {
    background: rgba(255, 255, 0, 0.2);
    color: var(--text-primary);
}

/* ============================================================
   ANIMATIONS (from old BlinkR)
   ============================================================ */

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

:root[data-theme="old-blinkr"] .pulse-animate {
    animation: pulse 2s ease-in-out infinite;
}

/* ============================================================
   CODE & MONOSPACE
   ============================================================ */

:root[data-theme="old-blinkr"] code,
:root[data-theme="old-blinkr"] pre {
    background: var(--bg-darkest);
    color: var(--accent-primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
}

/* ============================================================
   LINKS
   ============================================================ */

:root[data-theme="old-blinkr"] a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

:root[data-theme="old-blinkr"] a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* ============================================================
   HIGHLIGHTS & ACCENTS
   ============================================================ */

:root[data-theme="old-blinkr"] .highlight {
    background: var(--overlay-highlight);
    padding: 2px 4px;
    border-radius: 3px;
}

:root[data-theme="old-blinkr"] .accent-text {
    color: var(--accent-primary);
}