/* ============================================
   AUTOPASSPORT - SHARED APPLICATION STYLES
   Used by every authenticated page (admin/workshop/owner) and the public
   auth pages. Loaded via <link rel="stylesheet">, not duplicated inline.
   Design tokens (color/type) are defined via Tailwind's config in
   assets/js/tailwind-config.js — this file covers everything Tailwind's
   utility classes don't: custom components, animations, and print rules.

   NOT used by: index.php (separate landing-page design), or the HTML
   email templates in includes/functions.php / api/send_alerts.php
   (email clients require inline <style>, an external stylesheet will
   not be applied by most mail clients).
   ============================================ */

:root {
    --ink: #0A0E17;
    --paper: #F5F4EF;
    --brass: #1769E0;
    --brass-dark: #0E4696;
    --steel: #3B6E8F;
    --hairline: #E4E1D6;
}

* { font-family: 'Inter', sans-serif; }

body { background: #F5F4EF; color: #0A0E17; }

.container { background: white; border-radius: 24px; padding: 50px 40px; max-width: 500px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: slideUp 0.5s ease; }

@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.icon-circle { width: 80px; height: 80px; border-radius: 50%; background: #fef3c7; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 36px; color: #f59e0b; }

.btn-primary { background: #1769E0; color: white; transition: all 0.2s; }

.btn-primary:hover { background: #0E4696; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(193, 121, 31,0.3); }

.btn-secondary { background: #e2e8f0; color: #475569; transition: all 0.2s; }

.btn-secondary:hover { background: #cbd5e0; }

.glass-card {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(20px);
        }

.form-input-focus:focus {
            border-color: #1769E0;
            box-shadow: 0 0 0 3px rgba(193, 121, 31, 0.1);
        }

.plan-option.selected {
            border-color: #1769E0;
            background-color: #EAF2FD;
        }

.password-badge.valid {
            color: #10b981;
            font-weight: 600;
        }

.password-badge.invalid {
            color: #94a3b8;
        }

.document-container {
    max-width: 900px; width: 100%;
    background-color: #fcf9f2;
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22%23C1791F%22%20stroke-width%3D%220.5%22%20opacity%3D%220.5%22%3E%0A%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2230%22/%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2242%22/%3E%0A%3Ccircle%20cx%3D%22120%22%20cy%3D%220%22%20r%3D%2230%22/%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%220%22%20r%3D%2242%22/%3E%0A%3Ccircle%20cx%3D%220%22%20cy%3D%22120%22%20r%3D%2230%22/%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22120%22%20r%3D%2242%22/%3E%0A%3Ccircle%20cx%3D%22120%22%20cy%3D%22120%22%20r%3D%2230%22/%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%22120%22%20r%3D%2242%22/%3E%0A%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%2218%22/%3E%0A%3C/g%3E%0A%3C/svg%3E');
    background-size: 120px 120px;
    background-repeat: repeat;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 8px 30px rgba(0,0,0,0.12);
    padding: 32px;
    position: relative;
    border: 1px solid #1769E0;
    outline: 1px solid #1769E0;
    outline-offset: -8px;
}
.document-container::before {
    /* Thin ornamental rule just inside the outline, like an official
       certificate's engraved border. */
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(193,121,31,0.35);
    pointer-events: none;
}
.doc-corner {
    position: absolute;
    width: 40px; height: 40px;
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%0A%3Cpath%20d%3D%22M4%2024%20L4%208%20Q4%204%208%204%20L24%204%22%20fill%3D%22none%22%20stroke%3D%22%23C1791F%22%20stroke-width%3D%221.6%22/%3E%0A%3Cpath%20d%3D%22M4%2034%20L4%2044%22%20fill%3D%22none%22%20stroke%3D%22%23C1791F%22%20stroke-width%3D%221.2%22%20opacity%3D%220.55%22/%3E%0A%3Cpath%20d%3D%22M34%204%20L44%204%22%20fill%3D%22none%22%20stroke%3D%22%23C1791F%22%20stroke-width%3D%221.2%22%20opacity%3D%220.55%22/%3E%0A%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%222.2%22%20fill%3D%22%23C1791F%22/%3E%0A%3Cpath%20d%3D%22M12%2024%20Q22%2022%2024%2012%22%20fill%3D%22none%22%20stroke%3D%22%23C1791F%22%20stroke-width%3D%221%22%20opacity%3D%220.6%22/%3E%0A%3Cpath%20d%3D%22M8%2030%20Q26%2026%2030%208%22%20fill%3D%22none%22%20stroke%3D%22%23C1791F%22%20stroke-width%3D%220.75%22%20opacity%3D%220.35%22/%3E%0A%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}
.doc-corner.tl { top: 6px; left: 6px; }
.doc-corner.tr { top: 6px; right: 6px; transform: rotate(90deg); }
.doc-corner.br { bottom: 6px; right: 6px; transform: rotate(180deg); }
.doc-corner.bl { bottom: 6px; left: 6px; transform: rotate(270deg); }

.document-header { text-align: center; border-bottom: 2px solid #d4cdc0; padding-bottom: 16px; margin-bottom: 18px; position: relative; }

.document-header h1 { font-size: 26px; font-weight: 700; color: #2d2a24; letter-spacing: 3px; text-transform: uppercase; }

.document-header h1 span { color: #1769E0; }

.serial-badge { display: inline-block; margin-top: 8px; font-size: 11px; color: #8a7e6a; font-family: monospace; background: #f5f0e8; padding: 3px 10px; border-radius: 4px; }

.vehicle-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 20px; background: #f5f0e8; border-radius: 8px; padding: 14px 18px; margin: 12px 0 10px 0; border: 1px solid #e8e0d4; }

.vehicle-info-grid .item .label { font-size: 9px; text-transform: uppercase; color: #8a7e6a; font-weight: 600; }

.vehicle-info-grid .item .value { font-size: 14px; font-weight: 600; color: #2d2a24; word-break: break-word; }

.score-section { background: #f5f0e8; border-radius: 8px; padding: 18px 22px; margin: 12px 0 14px 0; border: 1px solid #e8e0d4; }

.score-circle { width: 90px; height: 90px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; border: 4px solid; flex-shrink: 0; }

.score-circle.excellent { border-color: #10b981; color: #10b981; background: #ecfdf5; }

.score-circle.good { border-color: #3b82f6; color: #3b82f6; background: #eff6ff; }

.score-circle.medium { border-color: #f59e0b; color: #f59e0b; background: #fffbeb; }

.score-circle.critical { border-color: #ef4444; color: #ef4444; background: #fef2f2; }

.maintenance-item {
            transition: all 0.2s ease-in-out;
            border-left: 4px solid #1769E0;
        }

/* ============================================
   PUBLIC VEHICLE PASSPORT (view.php) — RESPONSIVE
   This is the one page in the whole app almost always opened on a
   phone (scanned from a QR code sticker), and it previously had zero
   breakpoint handling — a fixed 3-column grid and desktop-sized
   padding on every screen. This is the fix.
   ============================================ */
@media (min-width: 640px) {
    .serial-badge { position: absolute; right: 0; top: 2px; margin-top: 0; }
}
@media (max-width: 640px) {
    .document-container { padding: 22px 16px; border-radius: 12px; }
    .document-header h1 { font-size: 20px; letter-spacing: 1.5px; }
    .vehicle-info-grid { grid-template-columns: repeat(2, 1fr); padding: 12px 14px; gap: 10px 14px; }
    .score-section { padding: 14px 16px; }
    .score-section .flex { flex-wrap: wrap; }
    .score-circle { width: 70px; height: 70px; font-size: 24px; }
}
@media (max-width: 400px) {
    .vehicle-info-grid { grid-template-columns: 1fr; }
}

@media print { .no-print { display: none !important; } body { background: white !important; } .document-container { box-shadow: none !important; border: 1px solid #ccc !important; } }

.brand-seal {
    width: 40px; height: 40px; border-radius: 9999px;
    border: 1.5px solid #1769E0;
    display: flex; align-items: center; justify-content: center;
    position: relative; flex-shrink: 0;
}

.brand-seal::after {
    content: ''; position: absolute; inset: -4px; border-radius: 9999px;
    border: 1px dashed #1769E0; opacity: 0.5;
}

.topbar-blur { background: rgba(245, 244, 239, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

.admin-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; background: linear-gradient(135deg, #1769E0, #0E4696); color: white; }

.btn-danger { background: #dc2626; color: white; transition: all 0.2s; }

.btn-danger:hover { background: #b91c1c; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(220,38,38,0.3); }

.btn-success { background: #10b981; color: white; transition: all 0.2s; }

.btn-success:hover { background: #059669; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(16,185,129,0.3); }

.warning-box { background: #fef2f2; border: 2px solid #fca5a5; border-radius: 16px; padding: 24px; }

.info-box { background: #f0fdf4; border: 1px solid #86efac; border-radius: 12px; padding: 16px; }

.backup-item { background: #f8fafc; border-radius: 12px; padding: 16px; border: 1px solid #e2e8f0; transition: all 0.2s; }

.backup-item:hover { border-color: #1769E0; }

.badge-status { padding: 2px 12px; border-radius: 9999px; font-weight: 600; font-size: 11px; }

.badge-active { background: #d1fae5; color: #065f46; }

.badge-inactive { background: #fee2e2; color: #991b1b; }

.redirect-notice {
            animation: pulse 2s ease-in-out infinite;
        }

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

.card-hover {
            transition: all 0.2s ease-in-out;
        }

.card-hover:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(0,0,0,0.08); }

.vehicle-card {
            border: 1px solid rgba(0,0,0,0.04);
        }

.maintenance-item:hover {
            background: #f8fafc;
            border-left-color: #0E4696;
        }

.health-score-circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            font-weight: 700;
            flex-shrink: 0;
            border: 4px solid;
        }

.health-excellent { border-color: #10b981; color: #10b981; background: #ecfdf5; }

.health-good { border-color: #3b82f6; color: #3b82f6; background: #eff6ff; }

.health-attention { border-color: #f59e0b; color: #f59e0b; background: #fffbeb; }

.health-critical { border-color: #ef4444; color: #ef4444; background: #fef2f2; }

.badge-score {
            padding: 4px 16px;
            border-radius: 9999px;
            font-weight: 600;
            font-size: 13px;
        }

.badge-score.gold { background: #fef3c7; color: #92400e; }

.badge-score.silver { background: #f1f5f9; color: #475569; }

.badge-score.bronze { background: #fbd38d; color: #7b341e; }

.badge-score.gray { background: #f1f5f9; color: #94a3b8; }

.stat-box {
            background: #f8fafc;
            border-radius: 12px;
            padding: 16px 20px;
            text-align: center;
        }

.stat-box .value {
            font-size: 24px;
            font-weight: 700;
            color: #1a202c;
        }

.stat-box .label {
            font-size: 12px;
            color: #94a3b8;
            font-weight: 500;
            margin-top: 2px;
        }

.qr-code-container {
            background: white;
            border-radius: 16px;
            border: 2px solid #e2e8f0;
            padding: 20px;
            display: inline-block;
            transition: all 0.3s;
        }

.qr-code-container:hover { border-color: #1769E0; box-shadow: 0 8px 30px rgba(193, 121, 31,0.15); }

.qr-code-container img {
            max-width: 180px;
            height: auto;
        }

.color-dot {
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 1px solid #e2e8f0;
            vertical-align: middle;
        }

.btn-sm {
            padding: 4px 12px;
            font-size: 12px;
            border-radius: 8px;
            font-weight: 500;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

.btn-primary-sm {
            background: #1769E0;
            color: white;
        }

.btn-primary-sm:hover {
            background: #0E4696;
            transform: translateY(-1px);
        }

.btn-outline-sm {
            background: transparent;
            color: #1769E0;
            border: 1px solid #1769E0;
        }

.btn-outline-sm:hover {
            background: #1769E0;
            color: white;
        }

.section-divider { display: flex; align-items: center; gap: 16px; margin: 24px 0 20px; }

.section-divider::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }

.section-divider .badge { background: #EAF2FD; color: #1769E0; padding: 4px 16px; border-radius: 9999px; font-size: 12px; font-weight: 600; white-space: nowrap; }

/* ============================================
           DESIGN TOKENS
           AutoPassport reads as fleet paperwork crossed with an
           instrument cluster: warm paper background (the "document"),
           graphite ink for structure, and a single brass accent — the
           color of a speedometer needle / a stamped seal — used only
           where the eye should land first. Data always wins over
           decoration: status colors (red/amber/green) stay the
           conventional traffic-light meanings operators already know.
           ============================================ */
        :root {
            --ink: #0A0E17;
            --paper: #F5F4EF;
            --brass: #1769E0;
            --brass-dark: #0E4696;
            --steel: #3B6E8F;
            --hairline: #E4E1D6;
        }

.font-display { font-family: 'Space Grotesk', sans-serif; }

/* Odometer-style tabular figures: every number on this page —
           KPIs, mileage, currency, table cells — lines up on a fixed
           digit width instead of jittering as digits change. */
        .kpi-card p, .font-display, table, .rank-number {
            font-variant-numeric: tabular-nums;
        }

/* Brand mark: a stamped-seal ring around the logo icon, evoking
           a passport / inspection stamp rather than a generic logo tile. */
        .brand-seal {
            width: 40px; height: 40px;
            border-radius: 9999px;
            border: 1.5px solid var(--brass);
            display: flex; align-items: center; justify-content: center;
            position: relative;
            flex-shrink: 0;
        }

.kpi-card {
            transition: all 0.2s ease;
            border: 1px solid var(--hairline);
        }

.kpi-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 40px -8px rgba(22, 33, 62, 0.12);
        }

.section-card {
            background: #ffffff;
            border-radius: 20px;
            border: 1px solid rgba(226, 232, 240, 0.8);
            box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.02);
            transition: all 0.2s;
        }

.section-card:hover {
            box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.05);
        }

.health-badge {
            padding: 2px 12px;
            border-radius: 9999px;
            font-weight: 600;
            font-size: 11px;
            font-variant-numeric: tabular-nums;
        }

.health-very-critical { background: #fecaca; color: #7f1d1d; }

.alert-critical {
            border-left: 4px solid #ef4444;
            background: #fef2f2;
        }

.alert-warning {
            border-left: 4px solid #f59e0b;
            background: #fffbeb;
        }

.alert-success {
            border-left: 4px solid #10b981;
            background: #f0fdf4;
        }

.action-btn {
            padding: 4px 12px;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 500;
            transition: all 0.2s;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

.action-btn-primary { background: var(--steel); background: rgba(59, 110, 143, 0.1); color: var(--steel); }

.action-btn-primary:hover { background: rgba(59, 110, 143, 0.18); }

.action-btn-success { background: #d1fae5; color: #065f46; }

.action-btn-success:hover { background: #a7f3d0; }

.action-btn-warning { background: #fef3c7; color: #92400e; }

.action-btn-warning:hover { background: #fde68a; }

.action-btn-danger { background: #fee2e2; color: #991b1b; }

.action-btn-danger:hover { background: #fecaca; }

.rank-number {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 12px;
            flex-shrink: 0;
        }

.rank-1 { background: var(--brass); color: #fff; }

.rank-2 { background: #e2e8f0; color: #475569; }

.rank-3 { background: #C7DFF9; color: var(--brass-dark); }

.rank-other { background: #f1f5f9; color: #94a3b8; }

.chart-container {
            position: relative;
            height: 180px;
            width: 100%;
        }

.filter-bar {
            background: #FAF9F5;
            padding: 12px 16px;
            border-radius: 12px;
            border: 1px solid var(--hairline);
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: center;
        }

.filter-bar select, .filter-bar input {
            border-radius: 8px;
            border: 1px solid var(--hairline);
            padding: 6px 12px;
            font-size: 13px;
            background: white;
        }

.filter-bar select:focus, .filter-bar input:focus {
            outline: 2px solid var(--brass);
            outline-offset: 1px;
            border-color: var(--brass);
        }

/* Visible keyboard focus everywhere — buttons, links, form fields —
           not just the filter bar. Easy to lose when every interactive
           element is a custom class instead of a native control. */
        a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
            outline: 2px solid var(--brass);
            outline-offset: 2px;
        }

@media (prefers-reduced-motion: reduce) {
            .kpi-card, .section-card, .kpi-card:hover, .section-card:hover {
                transition: none;
                transform: none;
            }
        }

:root { --ink: #0A0E17; --paper: #F5F4EF; --brass: #1769E0; --hairline: #E4E1D6; }

.field-card { border: 1px solid var(--hairline); border-radius: 12px; background: white; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.form-input { transition: all 0.2s; }

.form-input:focus { border-color: #1769E0; box-shadow: 0 0 0 3px rgba(193, 121, 31,0.1); }

.form-select { transition: all 0.2s; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.75rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem; }

.form-select:focus { border-color: #1769E0; box-shadow: 0 0 0 3px rgba(193, 121, 31,0.1); }

a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.enterprise-card {
            background: #ffffff;
            border: 1px solid rgba(226, 232, 240, 0.8);
            border-radius: 20px;
            box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.02);
        }

a:focus-visible, button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.stat-card { transition: all 0.2s ease-in-out; border: 1px solid rgba(0,0,0,0.04); }

.stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px -8px rgba(0,0,0,0.08); }

.vehicle-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.06); border-color: #1769E0; }

.badge-gold { background: #fef3c7; color: #92400e; }

.badge-silver { background: #f1f5f9; color: #475569; }

.badge-bronze { background: #fbd38d; color: #7b341e; }

.badge-gray { background: #f1f5f9; color: #94a3b8; }

.table-row-hover { transition: background 0.15s ease; }

.table-row-hover:hover { background: #f8fafc; }

.workshop-avatar {
            width: 36px; height: 36px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 14px; flex-shrink: 0;
            background: linear-gradient(135deg, #1769E0, #0E4696);
            color: white; overflow: hidden;
            box-shadow: 0 2px 8px rgba(193, 121, 31, 0.2);
        }

.workshop-avatar img { width: 100%; height: 100%; object-fit: contain; background: #fff; }

.qr-thumb { width: 36px; height: 36px; border-radius: 6px; border: 1px solid #e2e8f0; padding: 2px; background: white; object-fit: contain; }

.btn-details { background: #EAF2FD; color: #1769E0; }

.btn-details:hover { background: #C7DFF9; }

.btn-edit { background: #dbeafe; color: #1e40af; }

.btn-edit:hover { background: #bfdbfe; }

.btn-delete { background: #fee2e2; color: #991b1b; }

.btn-delete:hover { background: #fecaca; }

.btn-primary-header { background: #1769E0; color: white; transition: all 0.2s; }

.btn-primary-header:hover { background: #0E4696; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(193, 121, 31,0.3); }

/* Password strength indicator */
        .password-strength { height: 4px; border-radius: 4px; transition: all 0.3s; margin-top: 6px; }

.password-weak { background: #ef4444; width: 25%; }

.password-medium { background: #f59e0b; width: 50%; }

.password-strong { background: #10b981; width: 75%; }

.password-very-strong { background: #059669; width: 100%; }

.health-score-circle.excellent { border-color: #10b981; color: #10b981; background: #ecfdf5; }

.health-score-circle.good { border-color: #3b82f6; color: #3b82f6; background: #eff6ff; }

.health-score-circle.attention { border-color: #f59e0b; color: #f59e0b; background: #fffbeb; }

.health-score-circle.critical { border-color: #ef4444; color: #ef4444; background: #fef2f2; }

.maintenance-row { transition: all 0.15s; }

.maintenance-row:hover { background: #f8fafc; }

/* ============================================
           DESIGN TOKENS (IDZUMA IDENTITY)
           ============================================ */
        :root {
            --ink: #0A0E17;
            --paper: #F5F4EF;
            --brass: #1769E0;
            --brass-dark: #0E4696;
            --steel: #3B6E8F;
            --hairline: #E4E1D6;
        }

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

/* Brand seal (same as dashboard) */
        .brand-seal {
            width: 36px; height: 36px;
            border-radius: 9999px;
            border: 1.5px solid var(--brass);
            display: flex; align-items: center; justify-content: center;
            position: relative;
            flex-shrink: 0;
        }

.enterprise-card:hover { box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.05); }

/* Visible keyboard focus */
        a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
            outline: 2px solid var(--brass);
            outline-offset: 2px;
        }

.stat-card-enterprise {
            background: #ffffff;
            border: 1px solid rgba(226, 232, 240, 0.8);
            border-radius: 20px;
            box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.02);
            transition: all 0.2s ease-in-out;
        }

.stat-card-enterprise:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 25px -6px rgba(193, 121, 31, 0.08);
            border-color: rgba(193, 121, 31, 0.3);
        }

.quick-action-card {
            background: #ffffff;
            border: 1px solid rgba(226, 232, 240, 0.8);
            border-radius: 16px;
            transition: all 0.2s ease-in-out;
        }

.quick-action-card:hover {
            transform: translateY(-2px);
            border-color: #1769E0;
            box-shadow: 0 8px 25px -6px rgba(193, 121, 31, 0.12);
        }

.chart-bar-fill { transition: height 1s cubic-bezier(0.4, 0, 0.2, 1); }

.qr-thumb:hover { transform: scale(1.15); }

.qr-code-img { transition: all 0.3s ease-in-out; }

.qr-code-img:hover {
            transform: scale(1.02);
            box-shadow: 0 8px 30px rgba(193, 121, 31, 0.15);
        }

/* ============================================
           ESTILOS GERAIS
           ============================================ */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

.no-print {
            display: block;
        }

/* ============================================
           CONTAINER PRINCIPAL
           ============================================ */
        .print-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 2px 20px rgba(0,0,0,0.1);
        }

.print-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid #f0f0f0;
            padding-bottom: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }

.print-header h1 {
            font-size: 20px;
            color: #2d3748;
        }

.print-header .btn-back {
            background: #e2e8f0;
            border: none;
            padding: 8px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            text-decoration: none;
            color: #333;
            transition: all 0.3s;
        }

.print-header .btn-back:hover {
            background: #cbd5e0;
        }

.print-header .btn-print {
            background: #125BC4;
            border: none;
            padding: 8px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            color: white;
            transition: all 0.3s;
        }

.print-header .btn-print:hover {
            background: #5a3d8a;
        }

/* ============================================
           SELECIONAR VEÍCULO
           ============================================ */
        .select-vehicle {
            margin-bottom: 20px;
        }

.select-vehicle select {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 14px;
            background: white;
            cursor: pointer;
        }

.select-vehicle select:focus {
            border-color: #125BC4;
            outline: none;
        }

.size-selector {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin: 10px 0;
        }

.size-selector .size-btn {
            padding: 6px 16px;
            border: 2px solid #e2e8f0;
            border-radius: 6px;
            background: white;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.3s;
            text-decoration: none;
            color: #333;
        }

.size-selector .size-btn:hover {
            border-color: #125BC4;
            background: #f0f4ff;
        }

.size-selector .size-btn.active {
            border-color: #125BC4;
            background: #125BC4;
            color: white;
        }

/* ============================================
           ADESIVO QR CODE
           ============================================ */
        .sticker-container {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }

.sticker {
            page-break-inside: avoid;
        }

/* ============================================
           BOTÕES
           ============================================ */
        .action-buttons {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 20px;
        }

.action-buttons .btn {
            padding: 12px 30px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-block;
        }

.btn-print-main {
            background: #125BC4;
            color: white;
        }

.btn-print-main:hover {
            background: #5a3d8a;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(118, 75, 162, 0.3);
        }

/* ============================================
           DICAS
           ============================================ */
        .tips {
            margin-top: 20px;
            padding: 15px 20px;
            background: #f7fafc;
            border-radius: 8px;
            border-left: 4px solid #125BC4;
            font-size: 13px;
            color: #718096;
        }

.tips strong {
            color: #2d3748;
        }

.tips ul {
            margin: 8px 0 0 20px;
            line-height: 1.8;
        }

/* ============================================
           IMPRESSÃO
           ============================================ */
        @media print {
            body {
                background: white !important;
                padding: 0 !important;
                margin: 0 !important;
            }
            .print-container {
                box-shadow: none !important;
                padding: 0 !important;
                max-width: 100% !important;
                border-radius: 0 !important;
                background: transparent !important;
            }
            .no-print {
                display: none !important;
            }
            .sticker {
                box-shadow: none !important;
                page-break-inside: avoid;
                margin: 0 auto;
                background: #1c2333 !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
                color-adjust: exact !important;
            }
            .sticker .sticker-header {
                background: #0b0b0d !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
                color-adjust: exact !important;
            }
            .sticker * {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
                color-adjust: exact !important;
            }
        }

.modal-backdrop { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

.view-tab.active { background: #1769E0; color: white; border-color: #1769E0; }

.logo-preview-box {
            width: 100px; height: 100px; border-radius: 20px;
            background: linear-gradient(135deg, #1769E0, #0E4696);
            display: flex; align-items: center; justify-content: center;
            font-size: 36px; color: white;
            box-shadow: 0 4px 16px rgba(193, 121, 31, 0.25);
            overflow: hidden; border: 3px solid #e2e8f0;
            flex-shrink: 0;
        }

.logo-preview-box img { width: 100%; height: 100%; object-fit: contain; background: #fff; }

.health-medium { border-color: #3b82f6; color: #3b82f6; background: #eff6ff; }

.owner-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; background: #1769E0; color: white; }

.premium-card {
            background: #ffffff;
            border: 1px solid rgba(226, 232, 240, 0.8);
            border-radius: 20px;
            box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.03);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

.premium-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 16px 32px -8px rgba(193, 121, 31, 0.08);
            border-color: rgba(193, 121, 31, 0.3);
        }

.stat-icon {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
        }

.btn-view { background: #1769E0; color: white; box-shadow: 0 4px 12px rgba(193, 121, 31,0.2); }

.btn-view:hover { background: #0E4696; transform: translateY(-1px); }

.btn-score { background: #EAF2FD; color: #1769E0; border: 1px solid #C7DFF9; }

.btn-score:hover { background: #EAF2FD; }

.btn-transfer { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }

.btn-transfer:hover { background: #fef3c7; }

.btn-public { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }

.btn-public:hover { background: #f1f5f9; color: #0f172a; }

.section-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 36px 0 20px;
        }

.section-header::after {
            content: '';
            flex: 1;
            height: 1px;
            background: #e2e8f0;
        }

.section-badge {
            background: #EAF2FD;
            color: #1769E0;
            padding: 6px 16px;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.025em;
            text-transform: uppercase;
        }

.card { background: #ffffff; border-radius: 20px; border: 1px solid rgba(226, 232, 240, 0.8); box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.02); }
.card:hover { box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.05); }

.invite-item { background: #f8fafc; border-radius: 8px; padding: 12px 16px; border: 1px solid #e2e8f0; margin-bottom: 8px; }

.vehicle-info { background: #f5f0e8; border-radius: 8px; padding: 12px 16px; border: 1px solid #e8e0d4; }

.score-excellent { border-color: #10b981; color: #10b981; background: #ecfdf5; }

.score-good { border-color: #06b6d4; color: #06b6d4; background: #ecfeff; }

.score-medium { border-color: #3b82f6; color: #3b82f6; background: #eff6ff; }

.score-attention { border-color: #f59e0b; color: #f59e0b; background: #fffbeb; }

.score-critical { border-color: #ef4444; color: #ef4444; background: #fef2f2; }

.history-item { border-left: 3px solid #1769E0; padding: 10px 14px; background: #f8fafc; border-radius: 6px; margin-bottom: 6px; }

.history-item.transfer { border-left-color: #f59e0b; }

.history-item.workshop { border-left-color: #3b82f6; }

.tab-btn { padding: 8px 20px; border-radius: 8px; font-weight: 500; transition: all 0.2s; cursor: pointer; border: 2px solid transparent; }

.tab-btn.active { background: #EAF2FD; color: #1769E0; border-color: #1769E0; }

.tab-btn:not(.active):hover { background: #f1f5f9; }

.tab-content { display: none; }

.tab-content.active { display: block; }


/* ============================================
   US INPUT MASKS — error state for assets/js/us-input-masks.js
   ============================================ */
.field-invalid {
    border-color: #EF4444 !important;
    background-color: #FEF2F2;
}
.field-invalid:focus {
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}
.field-error-msg {
    color: #DC2626;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* ============================================
   VIN AUTO-DECODE — status line under the VIN field
   ============================================ */
.vin-decode-status {
    font-size: 0.75rem;
    margin-top: 0.35rem;
    display: block;
}
.vin-decode-loading { color: #6B7280; }
.vin-decode-success { color: #059669; }
.vin-decode-warn { color: #B45309; }

/* ============================================
   OWNER VEHICLE REPORT — "important document" treatment
   Reused wherever a page should read like an official record rather
   than a plain dashboard panel: centered, paper-textured, framed.
   ============================================ */
.paper-texture {
    position: relative;
}
.paper-texture::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: repeating-linear-gradient(115deg, rgba(193,121,31,0.035) 0px, rgba(193,121,31,0.035) 1px, transparent 1px, transparent 11px);
    pointer-events: none;
    z-index: 0;
}

.document-frame {
    max-width: 960px;
    margin: 0 auto;
    background: #fffdf8;
    border-radius: 16px;
    border: 1px solid #e8e0d4;
    box-shadow: 0 4px 6px rgba(0,0,0,0.03), 0 20px 45px -12px rgba(22,33,62,0.12);
    position: relative;
    z-index: 1;
}
.document-frame::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px dashed #ddd4c4;
    border-radius: 11px;
    pointer-events: none;
}

.qr-stamp-frame {
    display: inline-block;
    padding: 14px;
    border-radius: 9999px;
    border: 1.5px solid #1769E0;
    position: relative;
    background: #fff;
}
.qr-stamp-frame::after {
    content: '';
    position: absolute;
    inset: -7px;
    border: 1px dashed rgba(193,121,31,0.5);
    border-radius: 9999px;
}
/* The QR image itself is never rounded — cropping its corners would
   remove the finder squares a scanner needs, breaking the code. Only
   the frame around it is circular. */
.qr-stamp-frame img { border-radius: 4px; display: block; }

.doc-label-plain {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #125BC4;
}

/* ============================================
   PAGE HERO — shared header card, used at the top
   of every Workshop page. Extracted from the original
   Analytics page design so every screen gets the exact
   same look from one place, instead of duplicating this
   CSS block into every partial.
   ============================================ */
.page-hero {
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,249,251,.96));
    border: 1px solid #e8eaee;
    border-radius: 24px;
    padding: 26px 28px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.page-hero::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: -100px;
    top: -110px;
    border-radius: 50%;
    background: rgba(193,121,31,.07);
    pointer-events: none;
}
.page-hero-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #b47725;
    margin-bottom: 5px;
    position: relative;
    z-index: 1;
}
.page-hero-title {
    font-family: inherit;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.025em;
    color: #20242a;
    position: relative;
    z-index: 1;
}
.page-hero-subtitle {
    color: #7b818b;
    font-size: 13px;
    margin-top: 4px;
    position: relative;
    z-index: 1;
}
.page-hero-link {
    color: #b47725;
    font-weight: 700;
}
.page-hero-link:hover {
    color: #8f5c17;
}
.page-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #E5E7EB;
    color: #6B7280;
    font-size: 12px;
}
.page-hero-actions {
    position: relative;
    z-index: 1;
}
@media (max-width: 768px) {
    .page-hero { padding: 20px; }
    .page-hero-title { font-size: 22px; }
}