/* ============================================================
   PR REPORT GENERATOR — CoverageTrack
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root, [data-theme="dark"] {
    --bg-0: #050505;
    --bg-1: #0a0a0a;
    --bg-2: #111111;
    --bg-3: #1a1a1a;
    --bg-4: #222222;
    --bg-5: #252525;
    --border-1: #1a1a1a;
    --border-2: #252525;
    --border-3: #333333;
    --text-primary: #f5f5f5;
    --text-secondary: #cccccc;
    --text-muted: #999999;
    --text-dim: #666666;
    --text-faint: #555555;
    --accent-blue: #3b82f6;
    --accent-blue-dark: #1e40af;
    --accent-blue-light: #60a5fa;
    --accent-green: #4ade80;
    --accent-green-dark: #166534;
    --accent-amber: #fbbf24;
    --accent-amber-dark: #854d0e;
    --accent-red: #f87171;
    --accent-red-dark: #991b1b;
    --accent-purple: #c084fc;
    --accent-cyan: #22d3ee;
    --pill-green-bg: #0d2818; --pill-green-text: #4ade80; --pill-green-border: #166534;
    --pill-amber-bg: #2d1f00; --pill-amber-text: #fbbf24; --pill-amber-border: #854d0e;
    --pill-red-bg: #2d0a0a; --pill-red-text: #f87171; --pill-red-border: #991b1b;
    --pill-blue-bg: #0a1628; --pill-blue-text: #60a5fa; --pill-blue-border: #1e40af;
    --pill-gray-bg: #1a1a1a; --pill-gray-text: #a3a3a3; --pill-gray-border: #333;
    --pill-purple-bg: #1a0a2d; --pill-purple-text: #c084fc; --pill-purple-border: #581c87;
    --pill-cyan-bg: #0a1f2d; --pill-cyan-text: #22d3ee; --pill-cyan-border: #155e75;
    --table-even: #0a0a0a;
    --table-hover: #111;
    --table-thead: #0d0d0d;
    --header-fill: #2B3A67;
    --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --transition: 0.15s ease;
}

[data-theme="light"] {
    --bg-0: #ffffff;
    --bg-1: #ffffff;
    --bg-2: #f9fafb;
    --bg-3: #f3f4f6;
    --bg-4: #e5e7eb;
    --bg-5: #d1d5db;
    --border-1: #e5e7eb;
    --border-2: #d1d5db;
    --border-3: #b0b4bc;
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #6b7280;
    --text-dim: #9ca3af;
    --text-faint: #b0b4bc;
    --accent-blue: #2563eb;
    --accent-blue-dark: #1d4ed8;
    --accent-blue-light: #3b82f6;
    --accent-green: #16a34a;
    --accent-green-dark: #15803d;
    --accent-amber: #d97706;
    --accent-amber-dark: #b45309;
    --accent-red: #dc2626;
    --accent-red-dark: #b91c1c;
    --accent-purple: #9333ea;
    --accent-cyan: #0891b2;
    --pill-green-bg: #dcfce7; --pill-green-text: #15803d; --pill-green-border: #86efac;
    --pill-amber-bg: #fef9c3; --pill-amber-text: #a16207; --pill-amber-border: #fde047;
    --pill-red-bg: #fee2e2; --pill-red-text: #b91c1c; --pill-red-border: #fca5a5;
    --pill-blue-bg: #dbeafe; --pill-blue-text: #1d4ed8; --pill-blue-border: #93c5fd;
    --pill-gray-bg: #f3f4f6; --pill-gray-text: #6b7280; --pill-gray-border: #d1d5db;
    --pill-purple-bg: #f3e8ff; --pill-purple-text: #7e22ce; --pill-purple-border: #c084fc;
    --pill-cyan-bg: #e0f7fa; --pill-cyan-text: #0e7490; --pill-cyan-border: #67e8f9;
    --table-even: #f9fafb;
    --table-hover: #f3f4f6;
    --table-thead: #f1f3f5;
    --header-fill: #2B3A67;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-sans);
    background: var(--bg-0);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
}

/* ---- LAYOUT ---- */

.app-layout {
    display: flex;
    height: 100vh;
}

/* ---- SIDEBAR ---- */

.sidebar {
    width: 240px;
    background: var(--bg-1);
    border-right: 1px solid var(--border-1);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width 0.25s ease;
}
.sidebar.collapsed { width: 56px; }

.sidebar-logo {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar.collapsed .sidebar-logo { padding: 12px 8px; }

.sidebar-logo-img {
    max-width: 100%;
    max-height: 50px;
    object-fit: contain;
    transition: max-height 0.25s ease;
}
.sidebar.collapsed .sidebar-logo-img { max-height: 28px; }

.sidebar-nav {
    padding: 12px 8px;
    flex: 1;
}

.sidebar-nav-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 10px 12px;
    background: transparent; border: 1px solid transparent;
    border-radius: var(--radius-md); margin-bottom: 2px;
    cursor: pointer; color: var(--text-dim);
    font-size: 13px; font-weight: 500;
    font-family: var(--font-sans);
    text-align: left; transition: all var(--transition);
}
.sidebar-nav-item:hover { color: var(--text-muted); background: var(--bg-3); }
.sidebar-nav-item.active {
    background: var(--bg-3); color: var(--text-primary);
    border-color: var(--border-2);
}
.sidebar-nav-item .icon { font-size: 16px; flex-shrink: 0; width: 20px; text-align: center; }
.sidebar.collapsed .sidebar-nav-item .label { display: none; }
.sidebar.collapsed .sidebar-nav-item { padding: 10px 14px; }

.sidebar-toggle {
    padding: 14px; border: none; background: transparent;
    color: var(--text-faint); cursor: pointer; font-size: 16px;
    border-top: 1px solid var(--border-1); font-family: var(--font-sans);
}
.sidebar-toggle:hover { color: var(--text-muted); }

/* ---- MAIN CONTENT ---- */

.main-content {
    flex: 1;
    overflow: auto;
    padding: 32px;
}

.page-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 24px;
}
.page-header h1 {
    font-size: 22px; font-weight: 800;
    letter-spacing: -0.03em;
}
.page-header p {
    font-size: 13px; color: var(--text-faint);
    margin-top: 4px;
}

/* ---- BUTTONS ---- */

.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 20px; border-radius: var(--radius-md);
    font-size: 13px; font-weight: 600; cursor: pointer;
    font-family: var(--font-sans); transition: all var(--transition);
    border: none;
}
.btn-primary { background: var(--accent-blue-dark); color: #fff; }
.btn-primary:hover { background: var(--accent-blue); }
.btn-secondary { background: var(--bg-3); color: var(--text-secondary); border: 1px solid var(--border-2); }
.btn-secondary:hover { background: var(--bg-4); }
.btn-danger { background: #7f1d1d; color: #fca5a5; border: 1px solid var(--accent-red-dark); }
.btn-danger:hover { background: var(--accent-red-dark); }
.btn-sm { padding: 6px 14px; font-size: 12px; }
.btn-xs { padding: 4px 10px; font-size: 11px; border-radius: var(--radius-sm); }

/* ---- CLIENT PILLS ---- */

.client-pills {
    display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px;
}
.client-pill {
    padding: 6px 14px; border-radius: 6px;
    font-size: 12px; font-weight: 600; cursor: pointer;
    background: var(--bg-2); color: var(--text-faint);
    border: 1px solid var(--bg-4); position: relative;
    font-family: var(--font-sans); transition: all var(--transition);
}
.client-pill:hover { color: var(--text-secondary); }
.client-pill.active {
    background: var(--accent-blue-dark); color: #fff;
    border-color: var(--accent-blue);
}
.client-pill.has-data { color: var(--text-secondary); }
.client-pill .badge {
    position: absolute; top: -4px; right: -4px;
    width: 16px; height: 16px; border-radius: 99px;
    background: var(--border-3); color: #aaa;
    font-size: 9px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.client-pill.active .badge { background: var(--accent-blue-light); color: #000; }

/* ---- STAT CARDS ---- */

.stats-row {
    display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap;
}
.stat-card {
    background: var(--bg-2); border: 1px solid var(--bg-4);
    border-radius: 10px; padding: 18px 20px; flex: 1; min-width: 140;
    position: relative; overflow: hidden;
}
.stat-card .accent-bar {
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
}
.stat-card .label {
    font-size: 11px; color: #777; letter-spacing: 0.08em;
    text-transform: uppercase; font-weight: 600; margin-bottom: 6px;
}
.stat-card .value {
    font-size: 28px; font-weight: 700; color: var(--text-primary);
    font-family: var(--font-mono); letter-spacing: -0.02em;
}
.stat-card .sub { font-size: 11px; color: var(--text-dim); margin-top: 4px; }

/* ---- PILLS / BADGES ---- */

.pill {
    display: inline-block; padding: 2px 10px;
    border-radius: 999px; font-size: 11px; font-weight: 600;
    letter-spacing: 0.03em;
}
.pill-green { background: var(--pill-green-bg); color: var(--pill-green-text); border: 1px solid var(--pill-green-border); }
.pill-amber { background: var(--pill-amber-bg); color: var(--pill-amber-text); border: 1px solid var(--pill-amber-border); }
.pill-red { background: var(--pill-red-bg); color: var(--pill-red-text); border: 1px solid var(--pill-red-border); }
.pill-active { outline: 2px solid currentColor; outline-offset: 1px; font-weight: 700; }
.pill-blue { background: var(--pill-blue-bg); color: var(--pill-blue-text); border: 1px solid var(--pill-blue-border); }
.pill-gray { background: var(--pill-gray-bg); color: var(--pill-gray-text); border: 1px solid var(--pill-gray-border); }
.pill-purple { background: var(--pill-purple-bg); color: var(--pill-purple-text); border: 1px solid var(--pill-purple-border); }
.pill-cyan { background: var(--pill-cyan-bg); color: var(--pill-cyan-text); border: 1px solid var(--pill-cyan-border); }

/* ---- FILTERS BAR ---- */

.filters-bar {
    display: flex; gap: 8px; margin-bottom: 16px; align-items: center;
}
.filters-bar .label {
    font-size: 12px; color: var(--text-faint); font-weight: 600;
    margin-right: 4px;
}
.filter-btn {
    padding: 5px 12px; border-radius: 6px;
    font-size: 11px; font-weight: 600;
    background: transparent; color: var(--text-faint);
    border: 1px solid var(--bg-4); cursor: pointer;
    font-family: var(--font-sans); transition: all var(--transition);
}
.filter-btn:hover { color: var(--text-secondary); }
.filter-btn.active { background: var(--bg-3); color: var(--text-primary); }

.search-box {
    position: relative; margin-left: auto;
}
.search-box input {
    padding: 8px 12px 8px 32px; background: var(--bg-2);
    border: 1px solid var(--bg-4); border-radius: var(--radius-md);
    font-size: 12px; color: var(--text-secondary); width: 260px;
    font-family: var(--font-sans);
    transition: border-color var(--transition);
}
.search-box input:focus { outline: none; border-color: var(--accent-blue); }
.search-box input::placeholder { color: var(--text-dim); }
.search-box .icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--text-faint); font-size: 13px;
}

/* ---- DATA TABLE ---- */

.data-table-wrap {
    overflow-x: auto; border-radius: var(--radius-lg);
    border: 1px solid var(--border-1);
}
.data-table {
    width: 100%; border-collapse: collapse; font-size: 12px;
}
.data-table thead tr { background: #0d0d0d; }
.data-table th {
    padding: 10px; text-align: left; color: var(--text-dim);
    font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    font-size: 10px; border-bottom: 1px solid var(--border-1);
    white-space: nowrap; position: sticky; top: 0; z-index: 1;
    background: #0d0d0d;
}
.data-table td {
    padding: 10px; border-bottom: 1px solid #141414;
    vertical-align: top;
}
.data-table tbody tr { transition: background var(--transition); }
.data-table tbody tr:nth-child(even) { background: var(--bg-1); }
.data-table tbody tr:hover { background: var(--bg-2) !important; }

.data-table .cell-link {
    color: var(--accent-blue-light); text-decoration: underline;
    text-decoration-color: var(--accent-blue-dark); cursor: pointer;
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: block;
}
.data-table .cell-muted { color: var(--text-muted); }
.data-table .cell-mono {
    font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
}
.data-table .cell-pub { color: var(--text-primary); font-weight: 600; white-space: nowrap; }
.data-table .cell-ellipsis {
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.data-table .cell-stars { font-weight: 700; color: var(--accent-amber); }

/* Editable cell */
.cell-editable {
    cursor: pointer; border-bottom: 1px dashed var(--border-3);
    color: var(--text-secondary);
}
.cell-missing {
    color: var(--accent-red); cursor: pointer;
}
.cell-edit-input {
    background: var(--bg-3); border: 1px solid var(--accent-blue);
    border-radius: var(--radius-sm); padding: 4px 8px;
    color: var(--text-primary); font-size: 12px;
    font-family: var(--font-sans); width: 100%; min-width: 100px;
}
.cell-edit-input:focus { outline: none; }

/* ---- TABLE LEGEND ---- */
.table-legend {
    display: flex; gap: 16px; margin-top: 12px;
    font-size: 11px; color: var(--text-faint);
}

/* ---- UPLOAD ZONE ---- */

.upload-zone {
    border: 2px dashed var(--border-2); border-radius: var(--radius-lg);
    padding: 40px; text-align: center; margin-bottom: 24px;
    background: var(--bg-1); transition: all var(--transition);
    cursor: pointer;
}
.upload-zone:hover, .upload-zone.dragover {
    border-color: var(--accent-blue); background: #0a0f1a;
}
.upload-zone .icon { font-size: 32px; margin-bottom: 12px; }
.upload-zone .title { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.upload-zone .subtitle { font-size: 12px; color: var(--text-faint); margin-bottom: 16px; }

/* ---- PIPELINE STEPS ---- */

.pipeline { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 24px; }
.pipeline-title { font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.pipeline-step {
    display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px;
}
.pipeline-step.pending { opacity: 0.4; }
.pipeline-step-icon {
    width: 32px; height: 32px; border-radius: var(--radius-md); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.pipeline-step-icon.done { background: #052e16; border: 1px solid #166534; color: #4ade80; }
.pipeline-step-icon.running { background: #172554; border: 1px solid #1e40af; color: #60a5fa; }
.pipeline-step-icon.pending { background: var(--bg-3); border: 1px solid var(--border-3); color: var(--text-faint); }
.pipeline-step-label { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.pipeline-step-desc { font-size: 11px; color: var(--text-dim); }

.progress-bar {
    margin-top: 8px; width: 260px; height: 4px;
    background: var(--bg-3); border-radius: 99px; overflow: hidden;
}
.progress-bar-fill {
    height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    transition: width 0.3s ease;
}

/* ---- SCRAPE RESULTS TABLE ---- */

.scrape-results { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 24px; }
.scrape-results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.scrape-results-title { font-size: 14px; font-weight: 700; }

/* ---- MODAL ---- */

.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 999; opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
}
.modal-overlay.visible { opacity: 1; pointer-events: all; }

.modal {
    background: var(--bg-2); border: 1px solid var(--border-2);
    border-radius: var(--radius-xl); padding: 32px;
    width: 440px; max-width: 90%;
    transform: translateY(10px); transition: transform 0.2s ease;
}
.modal-overlay.visible .modal { transform: translateY(0); }
.modal h2 { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.modal .subtitle { font-size: 13px; color: var(--text-dim); margin-bottom: 24px; }

.modal-section-label {
    font-size: 11px; color: var(--text-faint); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px;
}
.modal-radio {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; cursor: pointer;
}
.modal-radio-dot {
    width: 16px; height: 16px; border-radius: 99px;
    border: 2px solid var(--border-3);
}
.modal-radio-dot.selected { border-color: var(--accent-blue); background: var(--accent-blue); }
.modal-radio span { font-size: 13px; color: var(--text-muted); }
.modal-radio .selected + span { color: var(--text-primary); }

.modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 24px; }

/* ---- EMPTY STATE ---- */

.empty-state {
    background: var(--bg-2); border: 1px solid var(--border-1);
    border-radius: var(--radius-lg); padding: 48px; text-align: center;
}
.empty-state .icon { font-size: 40px; margin-bottom: 16px; }
.empty-state .title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.empty-state .desc { font-size: 13px; color: var(--text-dim); margin-bottom: 20px; }

/* ---- TOAST NOTIFICATIONS ---- */

.toast-container {
    position: fixed; top: 20px; right: 20px; z-index: 9999;
    display: flex; flex-direction: column; gap: 8px;
}
.toast {
    padding: 12px 20px; border-radius: var(--radius-md);
    font-size: 13px; font-weight: 500; font-family: var(--font-sans);
    animation: toast-in 0.3s ease;
    max-width: 360px;
}
.toast-success { background: #052e16; color: #4ade80; border: 1px solid #166534; }
.toast-error { background: #2d0a0a; color: #f87171; border: 1px solid #991b1b; }
.toast-info { background: #172554; color: #60a5fa; border: 1px solid #1e40af; }

@keyframes toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ---- LOADING SPINNER ---- */

.spinner {
    display: inline-block; width: 16px; height: 16px;
    border: 2px solid var(--border-3); border-top-color: var(--accent-blue);
    border-radius: 50%; animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- THEME TOGGLE ---- */

.theme-toggle {
    display: flex; align-items: center; gap: 8px;
    padding: 6px; background: var(--bg-3);
    border: 1px solid var(--border-2);
    border-radius: 999px; cursor: pointer;
}
.theme-toggle-track {
    width: 36px; height: 20px; border-radius: 999px;
    background: var(--bg-4); position: relative; transition: background 0.2s;
}
.theme-toggle-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--accent-blue); position: absolute;
    top: 2px; left: 2px; transition: transform 0.2s;
}
[data-theme="light"] .theme-toggle-thumb { transform: translateX(16px); }
.theme-toggle-label {
    font-size: 11px; font-weight: 600; color: var(--text-dim);
    letter-spacing: 0.03em; user-select: none;
}

/* ---- SCRAPER TABS ---- */

.scraper-tabs {
    display: flex; gap: 0; margin-bottom: 20px;
    border-bottom: 1px solid var(--border-1);
}
.scraper-tab {
    padding: 12px 20px; font-size: 13px; font-weight: 600;
    color: var(--text-dim); cursor: pointer;
    border: none; background: transparent;
    font-family: var(--font-sans);
    border-bottom: 2px solid transparent;
    transition: all var(--transition);
    display: flex; align-items: center; gap: 8px;
}
.scraper-tab:hover { color: var(--text-secondary); }
.scraper-tab.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}
.scraper-tab .tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; border-radius: 99px;
    background: var(--bg-3); color: var(--text-muted);
    font-size: 10px; font-weight: 700; padding: 0 6px;
}
.scraper-tab.active .tab-count {
    background: var(--pill-blue-bg); color: var(--pill-blue-text);
}

/* ---- EDITABLE TABLE (add-row) ---- */

.add-row-form {
    display: flex; gap: 1px; background: var(--border-1);
    border: 2px dashed var(--accent-blue);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-top: none; overflow: hidden;
}
.add-row-form input, .add-row-form select {
    flex: 1; min-width: 0; padding: 10px 8px;
    background: var(--bg-1); border: none;
    color: var(--text-primary); font-size: 12px;
    font-family: var(--font-sans);
}
.add-row-form input::placeholder { color: var(--text-faint); font-style: italic; }
.add-row-form input:focus, .add-row-form select:focus {
    outline: none; background: var(--bg-2);
}
.add-row-btn {
    padding: 10px 16px; background: var(--accent-blue-dark);
    color: #fff; border: none; font-size: 12px; font-weight: 700;
    cursor: pointer; font-family: var(--font-sans);
    white-space: nowrap; transition: background var(--transition);
}
.add-row-btn:hover { background: var(--accent-blue); }

.table-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px;
}
.table-toolbar-actions { display: flex; gap: 8px; align-items: center; }

/* Table row delete */
.row-delete-btn {
    opacity: 0; padding: 2px 6px; background: transparent;
    border: 1px solid transparent; border-radius: 4px;
    color: var(--accent-red); cursor: pointer; font-size: 14px;
    transition: all var(--transition);
}
.data-table tbody tr:hover .row-delete-btn {
    opacity: 1;
}
.row-delete-btn:hover { background: var(--pill-red-bg); border-color: var(--pill-red-border); }

/* Updated table colors for theme */
.data-table thead tr { background: var(--table-thead); }
.data-table th { background: var(--table-thead); }
.data-table tbody tr:nth-child(even) { background: var(--table-even); }
.data-table tbody tr:hover { background: var(--table-hover) !important; }

/* ---- MAGAZINE CARDS ---- */

.mag-card {
    background: var(--bg-2); border: 1px solid var(--border-1);
    border-radius: var(--radius-lg); margin-bottom: 12px;
    overflow: hidden; transition: border-color var(--transition);
}
.mag-card:hover { border-color: var(--border-2); }

.mag-card-header {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px;
}
.mag-card-icon {
    width: 44px; height: 56px;
    background: var(--bg-3); border-radius: 4px;
    border: 1px solid var(--border-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.mag-card-info { flex: 1; min-width: 0; }
.mag-card-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.mag-card-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.mag-card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.mag-card-findings {
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border-1);
    background: var(--bg-1);
}

.mag-finding-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border-1);
    font-size: 12px;
}
.mag-finding-row:last-child { border-bottom: none; }
.mag-finding-page {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--text-dim); font-weight: 600;
    min-width: 32px; text-align: center;
}
.mag-finding-headline {
    flex: 1; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mag-finding-confidence {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}

/* Confidence bar */
.confidence-bar {
    width: 48px; height: 4px; background: var(--bg-4);
    border-radius: 99px; overflow: hidden;
}
.confidence-fill {
    height: 100%; border-radius: 99px;
    transition: width 0.3s ease;
}

/* ---- REVIEW CARDS ---- */

.review-card {
    display: flex; gap: 16px;
    background: var(--bg-2); border: 1px solid var(--border-1);
    border-radius: var(--radius-lg); padding: 16px;
    margin-bottom: 10px; transition: all var(--transition);
}
.review-card:hover { border-color: var(--border-2); }
.review-card-reviewed { opacity: 0.6; }
.review-card-reviewed:hover { opacity: 0.8; }

.review-card-left { flex-shrink: 0; }

.review-card-body { flex: 1; min-width: 0; }
.review-card-top {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px; flex-wrap: wrap;
}
.review-card-headline {
    font-size: 14px; font-weight: 600; color: var(--text-primary);
    margin-bottom: 6px; line-height: 1.4;
}
.review-card-details {
    display: flex; gap: 16px; font-size: 12px; color: var(--text-dim);
    margin-bottom: 10px; flex-wrap: wrap;
}
.review-card-details strong { color: var(--text-secondary); font-weight: 600; }

.review-card-edit-row {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding: 10px 12px; background: var(--bg-1);
    border: 1px solid var(--border-1); border-radius: var(--radius-md);
}
.review-edit-field { flex: 1; min-width: 140px; }
.review-edit-field label {
    display: block; font-size: 10px; font-weight: 600;
    color: var(--text-faint); text-transform: uppercase;
    letter-spacing: 0.05em; margin-bottom: 4px;
}
.review-edit-field input, .review-edit-field select {
    width: 100%; padding: 6px 8px; font-size: 12px;
}

.review-card-actions {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    flex-shrink: 0; min-width: 160px;
}

/* ---- SETTINGS CARDS ---- */

.settings-card {
    background: var(--bg-2); border: 1px solid var(--border-1);
    border-radius: 10px; padding: 20px; position: relative;
    overflow: hidden; transition: border-color var(--transition);
}
.settings-card:hover { border-color: var(--accent-blue); }

/* ---- CLIENT MULTI-SELECT ---- */

.client-multiselect {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 8px; background: var(--bg-1);
    border: 1px solid var(--border-2); border-radius: var(--radius-md);
    max-height: 100px; overflow-y: auto;
}
.client-multiselect-item {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 6px;
    font-size: 12px; font-weight: 500; color: var(--text-muted);
    cursor: pointer; transition: all var(--transition);
    background: var(--bg-3); border: 1px solid transparent;
    user-select: none;
}
.client-multiselect-item:hover {
    color: var(--text-secondary); border-color: var(--border-3);
}
.client-multiselect-item input[type="checkbox"] { display: none; }
.client-multiselect-check {
    width: 14px; height: 14px; border-radius: 3px;
    border: 1.5px solid var(--border-3); display: inline-block;
    position: relative; flex-shrink: 0; transition: all var(--transition);
}
.client-multiselect-item input:checked ~ .client-multiselect-check {
    background: var(--accent-blue); border-color: var(--accent-blue);
}
.client-multiselect-item input:checked ~ .client-multiselect-check::after {
    content: '✓'; position: absolute; top: -1px; left: 2px;
    font-size: 10px; color: #fff; font-weight: 800;
}
.client-multiselect-item input:checked ~ span:last-child {
    color: var(--text-primary); font-weight: 600;
}

/* ---- PAGE IMAGE LIGHTBOX ---- */

.page-thumb-clickable {
    cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
}
.page-thumb-clickable:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.lightbox-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85); z-index: 10000;
    display: none; align-items: center; justify-content: center;
}
.lightbox-overlay.visible { display: flex; }

.lightbox-container {
    background: var(--bg-1); border-radius: 12px;
    max-width: 90vw; max-height: 95vh;
    overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-header {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--border-1);
    flex-shrink: 0;
}
.lightbox-title {
    font-size: 14px; font-weight: 700; color: var(--text-primary);
}
.lightbox-nav {
    display: flex; gap: 4px; margin-left: auto;
}
.lightbox-nav-btn {
    background: var(--bg-3); border: 1px solid var(--border-2); border-radius: 6px;
    padding: 4px 12px; font-size: 12px; font-weight: 600;
    color: var(--text-secondary); cursor: pointer; transition: all var(--transition);
}
.lightbox-nav-btn:hover { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); }
.lightbox-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.lightbox-close {
    background: none; border: none; font-size: 20px;
    color: var(--text-muted); cursor: pointer; padding: 0 4px;
    margin-left: 8px;
}
.lightbox-close:hover { color: var(--accent-red); }

.lightbox-body {
    padding: 16px; overflow: auto; display: flex;
    align-items: center; justify-content: center;
    max-height: calc(95vh - 60px); background: #000;
}

.review-card-page-preview {
    width: 80px; height: 110px; overflow: hidden;
    border-radius: 6px; border: 1px solid var(--border-2);
    background: var(--bg-3); flex-shrink: 0;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
    .sidebar { width: 56px; }
    .sidebar .sidebar-logo-text, .sidebar .label { display: none; }
    .main-content { padding: 16px; }
    .stats-row { flex-direction: column; }
    .stat-card { min-width: unset; }
    .search-box input { width: 160px; }
}