/* ═══════════════════════════════════════════════════
   Automotive Portal — Unified Stylesheet
   ═══════════════════════════════════════════════════ */

/* ── Design tokens ── */
:root {
    /* Kleuren */
    --color-primary: #1a1a2e;
    --color-primary-hover: #2a2a4e;
    --color-accent: #667eea;
    --color-accent-end: #764ba2;
    --color-success: #27ae60;
    --color-warning: #e67e22;
    --color-danger: #c62828;
    --color-danger-light: #ffebee;
    --color-danger-border: #e57373;
    --color-info: #00bcd4;

    /* Surfaces */
    --color-bg: #f0f2f5;
    --color-card: #ffffff;
    --color-card-hover: #fafafa;
    --color-border: #ddd;
    --color-border-light: #e9ecef;

    /* Text */
    --color-text: #333;
    --color-text-dark: #222;
    --color-text-muted: #888;
    --color-text-light: #999;
    --color-text-subtle: #666;
    --color-text-dim: #555;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-page: 28px;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 20px;

    /* Shadows */
    --shadow-sm: 0 1px 4px rgba(0,0,0,.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,.12);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.15);

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', Menlo, Monaco, monospace;
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 13px;
    --text-md: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;

    /* Transitions */
    --transition-fast: .15s ease;
    --transition-normal: .2s ease;
}

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

body {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
}

/* ── Header ── */
.main-header {
    background: var(--color-primary);
    color: white;
    padding: var(--space-md) var(--space-page);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-left h1 { font-size: var(--text-2xl); font-weight: 700; }
.header-left p { font-size: var(--text-sm); opacity: .7; margin-top: 2px; }
.header-right { display: flex; align-items: center; gap: var(--space-md); }
.back-link { color: rgba(255,255,255,.7); text-decoration: none; font-size: var(--text-base); display: block; margin-bottom: var(--space-xs); }
.back-link:hover { color: white; }
.badge { background: rgba(255,255,255,.15); padding: 5px 14px; border-radius: var(--radius-pill); font-size: var(--text-base); font-weight: 600; }
.bookmarklet-pill {
    background: rgba(255,255,255,.2);
    color: white;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-base);
    cursor: grab;
    white-space: nowrap;
    border: 2px dashed rgba(255,255,255,.4);
}
.bookmarklet-pill:hover { background: rgba(255,255,255,.3); }

/* ── Toolbar ── */
.toolbar {
    background: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    padding: 10px var(--space-page);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.toolbar-btn {
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid #ccc;
    background: var(--color-card);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    color: var(--color-text);
    transition: all var(--transition-fast);
}
.toolbar-btn:hover { background: #f5f5f5; border-color: var(--color-text-light); }
.toolbar-btn.primary { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.toolbar-btn.primary:hover { background: var(--color-primary-hover); }
.toolbar-btn.danger { color: var(--color-danger); border-color: var(--color-danger-border); }
.toolbar-btn.danger:hover { background: var(--color-danger-light); }
.toolbar-spacer { flex: 1; }

/* ── Dashboard ── */
.dashboard { padding: var(--space-lg) var(--space-page); max-width: 1200px; margin: 0 auto; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); }
.section-title h2 { font-size: var(--text-xl); color: var(--color-text-dark); }
.section-title p { font-size: var(--text-base); color: var(--color-text-muted); }

.scraper-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.scraper-card {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
}
.scraper-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.scraper-card.add-card { border: 2px dashed var(--color-border); opacity: .6; cursor: default; }
.scraper-card.add-card:hover { transform: none; box-shadow: var(--shadow-sm); }
.scraper-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-sm); }
.scraper-icon { font-size: 24px; }
.scraper-card h3 { font-size: var(--text-lg); }
.scraper-desc { font-size: var(--text-base); color: var(--color-text-subtle); flex: 1; margin-bottom: var(--space-md); }
.scraper-card-footer { display: flex; justify-content: space-between; align-items: center; }
.vehicle-count { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 600; }
.arrow { font-size: var(--text-xl); color: #ccc; }

/* ── Content ── */
.content { padding: var(--space-lg) var(--space-page); max-width: 1200px; margin: 0 auto; }

.bookmarklet-instructions {
    background: var(--color-card);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
    box-shadow: var(--shadow-sm);
}
.bookmarklet-instructions h3 { font-size: var(--text-md); margin-bottom: var(--space-sm); }
.bookmarklet-instructions ol { padding-left: var(--space-lg); font-size: var(--text-base); color: var(--color-text-dim); }
.bookmarklet-instructions li { margin-bottom: var(--space-xs); }

/* ── Vehicle list ── */
.vehicle-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.empty-state { text-align: center; padding: 60px var(--space-lg); color: var(--color-text-light); }
.empty-state p { font-size: var(--text-md); margin-bottom: var(--space-sm); }
.empty-state small { font-size: var(--text-sm); }

/* ── Vehicle cards (scraper page) ── */
.vehicle-card {
    background: var(--color-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.vehicle-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px var(--space-lg);
    cursor: pointer;
    user-select: none;
}
.vehicle-card-header:hover { background: var(--color-card-hover); }
.vc-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.vc-num {
    color: white;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-sm); font-weight: 700; flex-shrink: 0;
}
.vc-info { min-width: 0; }
.vc-title { font-weight: 600; font-size: var(--text-md); color: var(--color-text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-meta { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px; display: flex; gap: var(--space-md); flex-wrap: wrap; }
.vc-right { display: flex; align-items: center; gap: 6px; }
.expand-arrow { font-size: 10px; color: #ccc; margin-left: var(--space-sm); transition: transform var(--transition-normal); }
.vehicle-card.expanded .expand-arrow { transform: rotate(180deg); }
.vehicle-card-body { display: none; padding: 0 var(--space-lg) var(--space-lg); }
.vehicle-card.expanded .vehicle-card-body { display: block; }
.kavel-text {
    background: #f8f9fa;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 14px;
    font-size: var(--text-sm);
    line-height: 1.6;
    white-space: pre-wrap;
    font-family: var(--font-mono);
    max-height: 400px;
    overflow-y: auto;
}

/* ── Vehicle rows (dashboard) ── */
.vehicle-row {
    background: var(--color-card);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-sm);
}
.vr-num {
    background: var(--color-primary);
    color: white;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-sm); font-weight: 700; flex-shrink: 0;
}
.vr-info { flex: 1; min-width: 0; }
.vr-title { font-weight: 600; font-size: var(--text-md); }
.vr-meta { font-size: var(--text-sm); color: var(--color-text-muted); display: flex; gap: var(--space-md); margin-top: 2px; flex-wrap: wrap; }
.vr-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Status tags ── */
.nap-ok { color: var(--color-success); font-weight: 600; }
.nap-warn { color: var(--color-warning); font-weight: 600; }
.nap-fail { color: var(--color-danger); font-weight: 600; }
.finnik-tag { color: var(--color-info); font-weight: 600; }
.ai-tag { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-end)); color: white; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); letter-spacing: .5px; }
.source-tag {
    color: white;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
}

/* ── Buttons ── */
.btn {
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid #ccc;
    background: var(--color-card);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    color: var(--color-text);
    transition: all var(--transition-fast);
}
.btn:hover { background: #f5f5f5; }
.btn.danger { color: var(--color-danger); border-color: var(--color-danger-border); }
.btn.danger:hover { background: var(--color-danger-light); }

.btn-sm {
    padding: var(--space-xs) 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-card);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    color: var(--color-text-dim);
    text-decoration: none;
    transition: all var(--transition-fast);
}
.btn-sm:hover { background: #f0f0f0; border-color: var(--color-text-light); }
.btn-sm.copied { background: var(--color-success) !important; color: white !important; border-color: var(--color-success) !important; }

/* ── Toast notificaties ── */
.toast-container {
    position: fixed;
    top: var(--space-md);
    right: var(--space-md);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    pointer-events: none;
}
.toast {
    background: var(--color-text-dark);
    color: white;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: toast-in .3s ease, toast-out .3s ease 2.7s;
    animation-fill-mode: forwards;
    max-width: 400px;
}
.toast.success { background: var(--color-success); }
.toast.error { background: var(--color-danger); }
.toast.warning { background: var(--color-warning); }
.toast.info { background: var(--color-info); }

@keyframes toast-in {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes toast-out {
    from { opacity: 1; }
    to { opacity: 0; transform: translateY(-10px); }
}

/* ── Search bar ── */
.search-bar {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}
.search-input {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-md);
    font-family: var(--font-sans);
    background: var(--color-card);
    transition: border-color var(--transition-fast);
}
.search-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, .15);
}
.search-input::placeholder { color: var(--color-text-light); }

/* ── Refresh button ── */
.refresh-btn {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-card);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    color: var(--color-text-dim);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}
.refresh-btn:hover { background: #f5f5f5; border-color: var(--color-text-light); }
.refresh-btn.spinning svg,
.refresh-btn.spinning::before {
    animation: spin .6s linear;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Modal / dialog ── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal-overlay.active {
    display: flex;
}
.modal-content {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    max-width: 500px;
    width: 90%;
    box-shadow: var(--shadow-lg);
}
.modal-content h3 { margin-bottom: var(--space-md); }
.modal-close {
    float: right;
    background: none;
    border: none;
    font-size: var(--text-xl);
    cursor: pointer;
    color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════
   Mobile Responsive
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    :root {
        --space-page: 16px;
    }

    .main-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
        padding: var(--space-md);
    }
    .header-right {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .toolbar {
        padding: var(--space-sm) var(--space-md);
        overflow-x: auto;
    }

    .scraper-grid {
        grid-template-columns: 1fr;
    }

    .vehicle-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
    .vr-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .vehicle-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
        padding: var(--space-md);
    }
    .vc-right {
        width: 100%;
        justify-content: flex-end;
    }

    .section-title {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }

    .search-bar {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .header-left h1 { font-size: var(--text-lg); }
    .scraper-card { padding: var(--space-md); }
    .bookmarklet-pill { font-size: var(--text-xs); padding: 6px 12px; }
    .toolbar-btn { font-size: var(--text-xs); padding: 6px 10px; }
    .vc-meta { gap: var(--space-sm); }
}