/* Pro Auto Repair — Customer Portal Styles */

:root {
    --color-primary: #2E7D32;
    --color-primary-dark: #1B5E20;
    --color-primary-light: #4CAF50;
    --color-charcoal: #333333;
    --color-charcoal-light: #555555;
    --color-bg: #FFFFFF;
    --color-surface: #F5F5F5;
    --color-surface-dark: #E0E0E0;
    --color-text: #333333;
    --color-text-inverse: #FFFFFF;
    --color-error: #D32F2F;
    --color-success: #2E7D32;
    --color-warning: #F57C00;
    --color-info: #1976D2;
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 48px;
}

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

body {
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--color-text);
    background: var(--color-surface);
    line-height: 1.5;
}

a { color: var(--color-primary); }

/* LOGIN / REGISTER PAGE */
.portal-login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 100%);
}

.login-container { width: 100%; max-width: 420px; padding: var(--space-md); }

.login-card {
    background: var(--color-bg);
    border-radius: 8px;
    padding: var(--space-xl) var(--space-lg);
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

.login-header { text-align: center; margin-bottom: var(--space-lg); }
.login-logo { font-size: 48px; display: block; margin-bottom: var(--space-sm); }
.login-header h1 { font-size: 24px; font-weight: 700; color: var(--color-primary); }
.login-header p { font-size: 14px; color: var(--color-charcoal-light); }

.login-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    font-size: 14px;
}

.login-links a { color: var(--color-primary); text-decoration: none; }
.login-links a:hover { text-decoration: underline; }

/* PORTAL LAYOUT */
.portal-layout { display: flex; min-height: 100vh; }

.portal-sidebar {
    width: 220px;
    background: var(--color-bg);
    border-right: 1px solid var(--color-surface-dark);
    flex-shrink: 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    z-index: 50;
}

.portal-sidebar__brand {
    padding: var(--space-md) var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-surface-dark);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.portal-sidebar__logo { font-size: 24px; }
.portal-sidebar__name { font-size: 14px; font-weight: 600; color: var(--color-charcoal); }

.portal-sidebar__nav { list-style: none; padding: var(--space-md) 0; flex: 1; }
.portal-sidebar__nav li { margin-bottom: 2px; }

.portal-sidebar__link {
    display: block;
    padding: var(--space-sm) var(--space-md);
    color: var(--color-charcoal-light);
    text-decoration: none;
    font-size: 14px;
    transition: background 150ms, color 150ms;
    border-left: 3px solid transparent;
}

.portal-sidebar__link:hover { background: var(--color-surface); color: var(--color-charcoal); }
.portal-sidebar__link--active {
    background: #E8F5E9;
    color: var(--color-primary-dark);
    font-weight: 500;
    border-left-color: var(--color-primary);
}

.portal-sidebar__footer {
    padding: var(--space-md);
    border-top: 1px solid var(--color-surface-dark);
}

.portal-sidebar__link--back { font-size: 13px; border-left: none; }

.portal-main { flex: 1; margin-left: 220px; }

.portal-topbar {
    background: var(--color-bg);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-surface-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}

.portal-topbar__toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-xs);
}

.portal-topbar__toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--color-charcoal);
    margin: 4px 0;
}

.portal-topbar__title { font-size: 20px; font-weight: 600; flex: 1; }

.portal-topbar__user { display: flex; align-items: center; gap: var(--space-sm); }
.portal-topbar__name { font-size: 14px; color: var(--color-charcoal-light); }

.portal-content { padding: var(--space-lg); max-width: 1000px; }

/* BUTTONS */
.btn {
    display: inline-block;
    padding: var(--space-sm) var(--space-md);
    border: none;
    border-radius: 4px;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 150ms;
    line-height: 1.4;
}

.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); }
.btn--danger { background: var(--color-error); color: #fff; }
.btn--danger:hover { background: #b71c1c; }
.btn--ghost { background: transparent; color: var(--color-charcoal-light); border: 1px solid var(--color-surface-dark); }
.btn--ghost:hover { background: var(--color-surface); }
.btn--small { padding: 4px 10px; font-size: 13px; }
.btn--full { width: 100%; text-align: center; }
.btn:disabled { background: var(--color-surface-dark); color: var(--color-charcoal-light); cursor: not-allowed; }

/* FORMS */
.form-group { margin-bottom: var(--space-md); }
.form-label { display: block; font-size: 14px; font-weight: 500; margin-bottom: var(--space-xs); }
.required { color: var(--color-error); }
.form-hint { font-size: 13px; color: var(--color-charcoal-light); margin-top: var(--space-xs); }

.form-input {
    width: 100%;
    padding: var(--space-sm) 12px;
    border: 1px solid var(--color-surface-dark);
    border-radius: 4px;
    font-family: var(--font-family);
    font-size: 14px;
    transition: border-color 150ms;
}

.form-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(46,125,50,0.2); }
.form-input--error { border-color: var(--color-error); }
.field-error { color: var(--color-error); font-size: 13px; margin-top: var(--space-xs); display: none; }

/* DATA TABLE */
.data-table { width: 100%; border-collapse: collapse; background: var(--color-bg); border-radius: 4px; overflow: hidden; }
.data-table th, .data-table td { padding: var(--space-sm) 12px; text-align: left; border-bottom: 1px solid var(--color-surface); }
.data-table th { background: var(--color-surface); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-charcoal-light); }
.data-table tr:hover { background: rgba(46,125,50,0.03); }
.data-table a { text-decoration: none; }
.data-table a:hover { text-decoration: underline; }

/* FLASH MESSAGES */
.flash {
    padding: var(--space-sm) var(--space-md);
    border-radius: 4px;
    margin-bottom: var(--space-md);
    font-size: 14px;
}

.flash--success { background: #E8F5E9; color: var(--color-primary-dark); border: 1px solid var(--color-primary-light); }
.flash--error { background: #FFEBEE; color: var(--color-error); border: 1px solid #EF9A9A; }
.flash--warning { background: #FFF3E0; color: #E65100; border: 1px solid #FFB74D; }
.flash--info { background: #E3F2FD; color: var(--color-info); border: 1px solid #90CAF9; }

/* STATUS BADGES */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge--pending { background: var(--color-surface); color: var(--color-charcoal-light); }
.badge--confirmed { background: #E3F2FD; color: var(--color-info); }
.badge--in_progress { background: #FFF3E0; color: var(--color-warning); }
.badge--completed { background: #E8F5E9; color: var(--color-primary); }
.badge--draft { background: var(--color-surface); color: var(--color-charcoal-light); }
.badge--sent { background: #E3F2FD; color: var(--color-info); }
.badge--paid { background: #E8F5E9; color: var(--color-primary); }

/* DASHBOARD CARDS */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); }

.stat-card {
    background: var(--color-bg);
    border-radius: 8px;
    padding: var(--space-lg);
    text-decoration: none;
    color: var(--color-text);
    border: 1px solid var(--color-surface-dark);
    transition: box-shadow 150ms, border-color 150ms;
    display: block;
}

.stat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: var(--color-primary); }
.stat-card__number { font-size: 36px; font-weight: 700; color: var(--color-primary); }
.stat-card__label { font-size: 14px; color: var(--color-charcoal-light); margin-top: var(--space-xs); }

/* SECTION HEADINGS */
.section-heading {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-surface-dark);
}

/* REMINDER CARDS */
.reminder-list { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-lg); }

.reminder-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    background: var(--color-bg);
    border-radius: 4px;
    border-left: 4px solid var(--color-primary);
}

.reminder-card--overdue { border-left-color: var(--color-error); }
.reminder-card--due_soon { border-left-color: var(--color-warning); }
.reminder-card--upcoming { border-left-color: var(--color-primary); }

.reminder-card__info { flex: 1; }
.reminder-card__service { font-weight: 600; font-size: 14px; }
.reminder-card__dates { font-size: 13px; color: var(--color-charcoal-light); margin-top: 2px; }

.reminder-card__urgency {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 12px;
    margin-right: var(--space-md);
}

.reminder-card__urgency--overdue { background: #FFEBEE; color: var(--color-error); }
.reminder-card__urgency--due_soon { background: #FFF3E0; color: var(--color-warning); }
.reminder-card__urgency--upcoming { background: #E8F5E9; color: var(--color-primary); }

/* EMPTY STATE */
.empty-state {
    padding: var(--space-xl);
    text-align: center;
    color: var(--color-charcoal-light);
    background: var(--color-bg);
    border-radius: 4px;
    border: 1px dashed var(--color-surface-dark);
    margin-bottom: var(--space-lg);
}

/* PAGINATION */
.pagination { display: flex; align-items: center; gap: var(--space-md); justify-content: center; margin-top: var(--space-lg); }
.pagination__info { font-size: 14px; color: var(--color-charcoal-light); }

/* PORTAL-SPECIFIC */
.portal-section { margin-bottom: var(--space-xl); }

.booking-banner {
    padding: var(--space-sm) var(--space-md);
    background: #E8F5E9;
    border: 1px solid var(--color-primary-light);
    border-radius: 4px;
    margin-bottom: var(--space-md);
    font-size: 14px;
    color: var(--color-primary-dark);
}

/* INVOICE DISPLAY */
.invoice-box {
    background: var(--color-bg);
    padding: var(--space-lg);
    border-radius: 8px;
    border: 1px solid var(--color-surface-dark);
}

.invoice-header { display: flex; justify-content: space-between; margin-bottom: var(--space-lg); }
.invoice-header__company h2 { font-size: 20px; color: var(--color-primary); }
.invoice-header__company p { font-size: 13px; color: var(--color-charcoal-light); }
.invoice-header__meta { text-align: right; }
.invoice-header__meta h3 { font-size: 24px; color: var(--color-charcoal); }
.invoice-header__meta p { font-size: 13px; color: var(--color-charcoal-light); }

.invoice-parties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.invoice-party label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-charcoal-light); display: block; margin-bottom: var(--space-xs); }
.invoice-party p { font-size: 14px; }

.invoice-totals { text-align: right; margin-top: var(--space-md); }
.invoice-totals table { margin-left: auto; }
.invoice-totals td { padding: var(--space-xs) var(--space-sm); font-size: 14px; }
.invoice-totals .total-row td { font-weight: 700; font-size: 16px; border-top: 2px solid var(--color-charcoal); }

.invoice-actions { display: flex; gap: var(--space-sm); margin-bottom: var(--space-lg); }

/* RESPONSIVE */
@media (max-width: 768px) {
    .portal-sidebar {
        position: fixed;
        transform: translateX(-100%);
        transition: transform 250ms ease;
        box-shadow: none;
    }

    .portal-sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 16px rgba(0,0,0,0.15);
    }

    .portal-topbar__toggle { display: block; }

    .portal-main { margin-left: 0; }
    .portal-content { padding: var(--space-md); }

    .portal-topbar__name { display: none; }

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

    .reminder-card { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
    .reminder-card__urgency { margin-right: 0; }

    .invoice-header { flex-direction: column; gap: var(--space-md); }
    .invoice-header__meta { text-align: left; }
    .invoice-parties { grid-template-columns: 1fr; }

    .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table { font-size: 13px; min-width: 500px; }
    .data-table th, .data-table td { padding: var(--space-xs) var(--space-sm); }
}

/* PRINT */
@media print {
    .portal-sidebar,
    .portal-topbar,
    .invoice-actions,
    .btn { display: none !important; }

    .portal-main { margin-left: 0 !important; }
    .portal-content { padding: 0 !important; }

    .invoice-box { border: none; padding: 0; }
}

/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }