/* ============================================================================
 * extension-admin.css — Local-Claude-Extension parity theme for ADMIN pages
 *
 * SOURCE OF TRUTH: local-claude-extension/sidepanel.html  (:root + component
 * rules).  Every value below is copied value-for-value from that file — do NOT
 * "improve" sizes, fonts or colours here.  If the extension changes, re-derive
 * this file from sidepanel.html; never restyle from memory or a screenshot.
 * See .claude/skills/extension-parity.md (OFFICIAL SOP).
 *
 * SCOPE: admin-only dashboards (public/*-admin.html, public/admin-*.html,
 * public/payments/admin-dashboard.html).  Non-admin module pages keep the
 * Pillwright Studio look and MUST NOT link this file.
 *
 * CASCADE: linked LAST in <head>, after the page's own <style> and after
 * /css/snlab-core.css, so equal-specificity rules here win.  !important is
 * used ONLY where an inline style="" attribute or a higher-specificity page
 * rule would otherwise keep a non-extension colour, and only on paint
 * properties (colour/background/border/font) — never on layout.
 *
 * Author: iDevOpsLLC
 * Date: 2026-07-27
 * ========================================================================== */

/* ============================================================================
 * 1. TOKENS — sidepanel.html :root, verbatim
 *
 * Parity is theme-fixed dark: the extension has no light mode. The selector
 * list below therefore also claims the theme-attribute forms, because
 * master-mind-admin.html defines its palette under `:root[data-theme="dark"]`
 * and `:root:not([data-theme="light"])` — specificity (0,2,0), which a plain
 * `:root` (0,1,0) cannot outrank no matter how late it is linked. Matching the
 * specificity and arriving later makes the extension palette win in every
 * theme state, including the OS-preference branch.
 * ========================================================================== */
:root,
:root:not([data-theme="light"]),
:root[data-theme="light"],
:root[data-theme="dark"] {
    --bg-primary: #1E1E1E;
    --bg-secondary: #252526;
    --bg-tertiary: #2D2D2D;
    --bg-hover: #3C3C3C;
    --text-primary: #D4D4D4;
    --text-secondary: #808080;
    --text-muted: #6A6A6A;
    --text-on-accent: #fff;
    --error-bg: #3a2020;
    --error-text: #f0b3b3;
    --accent-blue: #569CD6;
    --accent-green: #4EC9B0;
    --accent-orange: #CE9178;
    --accent-purple: #C586C0;
    --accent-red: #F44747;
    --border-color: #404040;

    /* Not in the extension, but required by admin markup. #DCDCAA is the
       VS Code Dark+ yellow — same theme family as every token above. */
    --accent-yellow: #DCDCAA;

    /* Semantic aliases used across the admin pages. */
    --success: #4EC9B0;
    --warning: #CE9178;
    --error: #F44747;

    /* rgb triples so tints track the palette instead of being re-hardcoded. */
    --rgb-blue: 86, 156, 214;
    --rgb-green: 78, 201, 176;
    --rgb-orange: 206, 145, 120;
    --rgb-purple: 197, 134, 192;
    --rgb-red: 244, 71, 71;

    /* Studio names that snlab-core.css falls back through
       (--bg-primary: var(--bg, …) etc.). Pinned to extension values so the
       whole chain resolves here and admin pages never render Studio colours. */
    --bg: #1E1E1E;
    --surface: #252526;
    --surface-2: #2D2D2D;
    --ink: #D4D4D4;
    --ink-2: #808080;
    --ink-3: #6A6A6A;
    --accent: #569CD6;
    --accent-ink: #fff;
    --ok: #4EC9B0;
    --warn: #CE9178;
    --danger: #F44747;
    --line: #404040;
    --line-soft: #4A4A4A;
    --bg-sunk: #1E1E1E;

    /* Studio "wash" fills have no extension equivalent — the extension states
       colour with an outline and coloured text, never a tinted fill. Pinning
       them transparent converts every washed chip/alert to the outlined form. */
    --accent-wash: transparent;
    --ok-wash: transparent;
    --warn-wash: transparent;
    --danger-wash: transparent;

    /* sidepanel.html `.input-row:focus-within` */
    --focus: 0 0 0 1px #569CD6;

    /* The extension is monospace throughout — no Mona Sans on an admin page. */
    --font: "JetBrains Mono", Consolas, monospace;
    --mono: "JetBrains Mono", Consolas, monospace;

    /* Ink-on-fill. The extension only ever fills with accent-blue / accent-red
       (white ink) and accent-green (bg-primary ink). */
    --text-on-blue: #fff;
    --text-on-green: #1E1E1E;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.5);
    --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.5);
    --r-sm: 5px;
    --r-md: 6px;
    --r-lg: 10px;
    --r-full: 999px;
    --font-ui: "JetBrains Mono", Consolas, monospace;
    --font-mono: "JetBrains Mono", Consolas, monospace;
}

/* ============================================================================
 * 2. BASE — sidepanel.html `body`
 * ========================================================================== */
body {
    margin: 0;
    font-family: "JetBrains Mono", Consolas, monospace;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.5;
}

a { color: var(--accent-blue); }

/* sidepanel.html `.msg.assistant code` / `pre` / `pre code` */
code {
    background: var(--bg-tertiary);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--accent-orange);
    font-family: inherit;
}

pre {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px;
    overflow-x: auto;
}

pre code {
    background: none;
    padding: 0;
    color: var(--text-primary);
}

/* ============================================================================
 * 3. HEADER — sidepanel.html `header`, `header h1`, `header .iconbtn`
 * ========================================================================== */
.header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.header h1 {
    font-size: 14px;
    margin: 0;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The extension's only header colour is the green status dot. */
.header h1 i,
.header h1 .fas,
.header h1 .far {
    color: var(--accent-green);
    font-size: 13px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Header controls are `.iconbtn`: transparent, hairline, never filled. */
.header .btn,
.header-actions .btn,
.header .btn-primary,
.header-actions .btn-primary,
.header .btn-secondary,
.header-actions .btn-secondary {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
}

.header .btn:hover,
.header-actions .btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ============================================================================
 * 4. BUTTONS — sidepanel.html `.btn-primary` / `.btn-secondary` (modal foot),
 *    `.wf-row .run` (green), `.approval-actions .deny:hover` (red)
 * ========================================================================== */
.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info {
    border-radius: 6px;
    padding: 7px 14px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    border: 1px solid var(--border-color);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-secondary:hover { background: var(--bg-hover); }

.btn-primary,
.btn-info {
    background: var(--accent-blue);
    color: var(--text-on-accent);
    border-color: var(--accent-blue);
}

.btn-primary:hover,
.btn-info:hover { filter: brightness(1.08); background: var(--accent-blue); }

.btn-success {
    background: var(--accent-green);
    color: var(--bg-primary);
    border-color: var(--accent-green);
    font-weight: 600;
}

.btn-success:hover { filter: brightness(1.08); background: var(--accent-green); }

.btn-warning {
    background: transparent;
    color: var(--accent-orange);
    border-color: var(--accent-orange);
}

.btn-warning:hover {
    background: var(--accent-orange);
    color: var(--bg-primary);
}

/* `.approval-actions .deny` — outlined, fills red only on hover. */
.btn-danger {
    background: transparent;
    color: var(--accent-red);
    border-color: var(--accent-red);
}

.btn-danger:hover {
    background: var(--accent-red);
    color: var(--text-on-accent);
}

.btn:disabled,
.btn.disabled,
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Square icon buttons — `button.teach` / `.action-buttons button`. */
.btn-icon,
.action-buttons button,
.file-actions button {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 6px;
}

.btn-icon:hover,
.action-buttons button:hover,
.file-actions button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* The extension has no gradients anywhere. */
.btn-stop-generation {
    background: var(--accent-red);
    color: var(--text-on-accent);
    border: 1px solid var(--accent-red);
    border-radius: 6px;
    font-size: 12px;
}

.btn-stop-generation:hover {
    background: var(--accent-red);
    filter: brightness(1.08);
    box-shadow: none;
    transform: none;
}

/* ============================================================================
 * 5. BADGES — sidepanel.html `header .provider-badge` / `.pb-model`
 *    "Clean-look badge (outlined pill, never a filled tint)"
 * ========================================================================== */
.admin-badge,
.status-badge,
.badge,
[class*="-badge"] {
    display: inline-block;
    background: transparent !important;
    background-image: none !important;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    white-space: nowrap;
    text-transform: none;
}

.admin-badge {
    color: var(--accent-red);
    border-color: var(--accent-red);
}

.status-badge.status-succeeded,
.status-badge.status-active,
.status-badge.status-completed,
.status-badge.status-refunded,
.status-completed,
.badge-success {
    color: var(--accent-green) !important;
    border-color: var(--accent-green);
}

.status-badge.status-pending,
.badge-primary,
.badge-info {
    color: var(--accent-blue) !important;
    border-color: var(--accent-blue);
}

.status-badge.status-partially_refunded,
.badge-warning {
    color: var(--accent-orange) !important;
    border-color: var(--accent-orange);
}

.status-badge.status-failed,
.badge-danger {
    color: var(--accent-red) !important;
    border-color: var(--accent-red);
}

.status-badge.status-canceled {
    color: var(--text-secondary) !important;
    border-color: var(--border-color);
}

/* ============================================================================
 * 6. TABS — `.admin-tab` takes the `.modebtn` pill; `.pb-chip.active` supplies
 *    the active state (border + text go accent-blue, never a fill).
 * ========================================================================== */
.admin-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.admin-tab {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 3px 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
}

.admin-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.admin-tab.active {
    background: transparent;
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

/* Underline tabs keep their shape, take extension colours. */
.tabs { border-bottom: 1px solid var(--border-color); }

.tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

.tab:hover { color: var(--text-primary); }

.tab.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

/* ============================================================================
 * 7. SURFACES — `.modal` / `.slash-menu` / `.attach-menu`: bg-secondary on a
 *    1px hairline. The extension never uses a drop shadow on a panel.
 * ========================================================================== */
.card,
.stat-card,
.sidebar-card,
.table-card,
.chart-card,
.file-list,
.killswitch-panel,
.kill-switch-panel,
.level-card,
.stat-item,
.job-item,
.upload-zone {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: none;
}

.stat-item,
.job-item,
.kill-switch-panel { background: var(--bg-tertiary); }

.card-header,
.table-header,
.file-list-header,
.killswitch-header {
    background: transparent;
    border-bottom: 1px solid var(--border-color);
}

/* Section headings — `.msg.assistant h1,h2,h3`: purple, bold, SAME size as
   body text. This is the single most recognisable extension signature. */
.card-header h2,
.card-header h3,
.sidebar-card h3,
.chart-card h3,
.table-header h2,
.table-header h3,
.file-list-header h2,
.killswitch-header h3,
.stat-card h3 {
    font-size: 13px;
    margin: 0;
    color: var(--accent-purple);
    font-weight: 700;
}

.stat-card h3 { color: var(--text-secondary); font-weight: 400; }

.stat-value { font-variant-numeric: tabular-nums; }

.level-card:hover { border-color: var(--accent-blue); }

.level-card.active {
    background: var(--bg-tertiary);
    border-color: var(--accent-blue);
}

/* `.msg.note` — the extension's muted/empty voice. */
.empty-state {
    color: var(--text-secondary);
    font-style: italic;
}

.empty-state i { opacity: 0.5; font-style: normal; }

/* ============================================================================
 * 8. TABLES — extension-parity SOP permitted superset (hairline grid,
 *    bg-tertiary header, bold header text).
 * ========================================================================== */
table { border-collapse: collapse; }

thead,
table thead { background: var(--bg-tertiary); }

th,
table th {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 700;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

td,
table td {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

tbody tr:hover,
table tr:hover { background: var(--bg-tertiary); }

/* ============================================================================
 * 9. FORMS — sidepanel.html `.modal-body input/textarea/select`
 * ========================================================================== */
input,
select,
textarea,
.form-group input,
.form-group select,
.form-group textarea,
.search-input,
.page-input,
.page-size-select {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--accent-blue);
    padding: 0;
    width: auto;
}

.form-group label,
label {
    color: var(--text-secondary);
    font-size: 12px;
}

/* ============================================================================
 * 10. MODALS — sidepanel.html `.modal-overlay` / `.modal` / `.modal-head`
 * ========================================================================== */
.modal-overlay { background: rgba(0, 0, 0, 0.55); }

.modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.modal-header { border-bottom: 1px solid var(--border-color); }

.modal-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 15px;
    padding: 2px 6px;
    border-radius: 6px;
}

.modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.modal-footer { border-top: 1px solid var(--border-color); }

/* ============================================================================
 * 11. TOASTS & ALERTS — `.msg` (3px left border) and `.tool.approval`
 *     (outlined, never a tinted fill).
 * ========================================================================== */
.toast {
    background: var(--bg-secondary);
    border: none;
    border-left: 3px solid var(--accent-blue);
    border-radius: 6px;
    color: var(--text-primary);
    box-shadow: var(--shadow-2);
}

.toast.success { border-left-color: var(--accent-green); }
.toast.error   { border-left-color: var(--accent-red); }
.toast.warning { border-left-color: var(--accent-orange); }

.alert {
    background: transparent;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.alert-info    { border-color: var(--accent-blue);   color: var(--accent-blue); }
.alert-success { border-color: var(--accent-green);  color: var(--accent-green); }
.alert-warning { border-color: var(--accent-orange); color: var(--accent-orange); }
.alert-danger  { border-color: var(--accent-red);    color: var(--accent-red); }

/* ============================================================================
 * 12. MISC CONTROLS
 * ========================================================================== */
.pagination-btn,
.format-btn,
.ae-btn,
.btn-usage {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
}

.pagination-btn:hover:not(:disabled),
.format-btn:hover,
.ae-btn:hover,
.btn-usage:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.format-btn.selected {
    background: transparent;
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.progress-bar { background: var(--bg-tertiary); }
.progress-bar-fill { background: var(--accent-blue); }
.spinner { border-color: var(--bg-tertiary); border-top-color: var(--accent-green); }

::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

/* ============================================================================
 * 13. INLINE-STYLE NEUTRALISERS
 *     An inline style="" attribute beats every rule above, so the handful of
 *     JS-generated Studio fills left in the admin markup are cancelled here by
 *     attribute-substring match. Paint properties only.
 * ========================================================================== */
[style*="linear-gradient"],
[style*="rgba(117, 219, 211"],
[style*="rgba(117,219,211"],
[style*="rgba(95, 214, 138"],
[style*="rgba(95,214,138"],
[style*="rgba(232, 179, 102"],
[style*="rgba(232,179,102"],
[style*="rgba(255, 138, 138"],
[style*="rgba(255,138,138"] {
    background-image: none !important;
}

/* master-mind-admin.html paints a decorative radial "light source" behind the
   header via body::before. The extension has no such ornament. */
body::before { background-image: none !important; }

/* Three decorative Studio gradients live in the SHARED public/styles.css, which
   other (non-admin) pages still depend on — so they are neutralised here rather
   than edited at source. Each becomes the flat extension equivalent: a surface,
   a hairline border, a hairline rule. */
.marketing-header {
    background: var(--bg-secondary);
    background-image: none;
}

.workflow-step {
    background: var(--bg-secondary);
    background-image: none;
    border: 1px solid var(--border-color);
}

.hero-separator {
    background: var(--border-color);
    background-image: none;
}

/* ============================================================================
 * 14. REDUCED MOTION — sidepanel.html @media (prefers-reduced-motion: reduce)
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}
