/* --- 1. CSS Variables & Global Reset --- */
:root {
    --primary-accent: #00c4b4; /* Eye-dropped from screenshot */
    --light-accent: #e6f9f7;
    --text-primary: #1a1a1a;
    --text-secondary: #555;
    --bg-main: #f8f9fa;      /* Main content background */
    --bg-sidebar: #ffffff;
    --border-color: #e9ecef;
    --sidebar-width: 250px;
    --header-height: 65px;
    --border-radius: 8px;
    --sidebar-width: 250px;
    --sidebar-width-collapsed: 70px; /* Width when only icons show */
    --header-height: 65px;
    --reg-plate-yellow: #ffe460;
    --reg-plate-blue: #036ebf;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
}

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

/* --- 2. Main Layout (Sidebar + Content) --- */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: var(--sidebar-width);
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: width 0.3s ease; /* Smooth width transition */
    overflow-x: hidden; /* Hide text when it slides out */
}

.main-container {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    transition: margin-left 0.3s ease, width 0.3s ease;
}

@media (min-width: 769px) {
    /* --- COLLAPSED STATE (Icon Only) --- */
    /* This class will be toggled by JS */
    .sidebar.collapsed {
        width: var(--sidebar-width-collapsed);
    }

    /* When sidebar is collapsed, adjust main container */
    .main-container.collapsed {
        margin-left: var(--sidebar-width-collapsed);
        width: calc(100% - var(--sidebar-width-collapsed));
    }

    /* Hide text labels when collapsed */
    .sidebar.collapsed .sidebar-logo span,
    .sidebar.collapsed .nav-link span {
        display: none;
    }

    /* Center the icons when collapsed */
    .sidebar.collapsed .sidebar-logo,
    .sidebar.collapsed .nav-link {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    .sidebar.collapsed .sidebar-logo i,
    .sidebar.collapsed .nav-link i {
        margin: 0;
        font-size: 20px; /* Slightly larger icons when collapsed */
    }
}

.top-header {
    height: var(--header-height);
    background-color: #ffffff;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky; /* Makes it stick to the top */
    top: 0;
    z-index: 1000;
}

.content-wrapper {
    padding: 24px; /* Global padding for all content pages */
}

/* --- 3. Sidebar Components --- */


.sidebar-nav {
    padding: 12px;
    flex-grow: 1; /* Pushes footer to bottom */
}
.nav-item {
    margin-bottom: 4px;
}
.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--border-radius);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: background-color 0.2s ease, color 0.2s ease;
    position: relative;
}
.nav-link i {
    width: 20px; /* Aligns text */
    text-align: center;
    font-size: 16px;
}
.nav-link:hover {
    background-color: var(--bg-main);
    color: var(--text-primary);
}
.nav-link.active { /* We'll use this later */
    background-color: var(--light-accent);
    color: var(--primary-accent);
    font-weight: 600;
}

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

/* --- 4. Top Header Components --- */
.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--text-secondary);
    margin-right: 20px; /* Spacing between button and tabs */
    cursor: pointer;
    border: none;
    background: none;
    transition: color 0.2s ease;
}

.nav-toggle-btn:hover {
    color: var(--primary-accent);
}

.user-menu-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--primary-accent);
    color: white;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Sidebar Toggle Button (New) --- */
.sidebar-toggle-btn {
    width: 100%;
    height: 65px; /* Match header height for alignment */
    display: flex;
    align-items: center;
    justify-content: center; /* Center the icon */
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    font-size: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.sidebar-toggle-btn:hover {
    color: var(--primary-accent);
    background-color: var(--bg-main);
}

/* --- Header Logo (New) --- */
.header-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700; /* Bold text */
    color: var(--text-primary);
    margin-right: 30px; /* Space between logo and tabs */
}

.header-logo i {
    color: var(--primary-accent);
    font-size: 22px;
}


/* --- MOBILE SPECIFIC STYLES (Bottom Nav) --- */
@media (max-width: 768px) {

    /* 1. Reset Main Container */
    .main-container {
        margin-left: 0;
        width: 100%;
        /* Add padding to bottom so content isn't hidden behind the nav */
        padding-bottom: 80px;
        transition: none;
    }

    /* 2. Hide Desktop Elements */
    .nav-toggle-btn {
        display: none; /* Hide the hamburger button */
    }

    .sidebar-overlay {
        display: none !important; /* Disable overlay logic */
    }

    /* 3. Transform Sidebar into Bottom Nav */
    .sidebar {
        position: fixed;
        top: auto; /* Unset top */
        bottom: 0; /* Stick to bottom */
        left: 0;
        width: 100%;
        height: 70px; /* Standard mobile nav height */
        background-color: #ffffff;
        border-right: none;
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05);

        /* Flex settings to align items horizontally */
        display: flex;
        flex-direction: row;
        justify-content: space-around; /* Evenly space all icons */
        align-items: center;
        padding: 0;
        z-index: 1000;

        /* Reset desktop styles */
        transform: none;
        overflow: visible;
    }

    /* 4. Merge Nav and Footer Lists
       Using 'display: contents' makes the UL containers disappear
       structurally, so the LI items become direct children of .sidebar
       and sit side-by-side.
    */
    .sidebar-nav,
    .sidebar-footer,
    .sidebar-footer .sidebar-nav {
        display: contents;
    }

    .sidebar-footer {
        border-top: none;
        padding: 0;
    }

    /* 5. Style the Navigation Items */
    .nav-item {
        flex: 1; /* Each item takes equal width */
        margin: 0;
        display: flex;
        justify-content: center;
    }

    .nav-link {
        flex-direction: column; /* Icon top, text bottom */
        justify-content: center;
        align-items: center;
        gap: 4px;
        padding: 8px 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        color: var(--text-secondary);
    }

    .nav-link i {
        font-size: 20px; /* Larger icons for touch */
        width: auto;
        margin: 0;
    }

    .nav-link span {
        display: block; /* Ensure text shows */
        font-size: 10px; /* Small text label */
        font-weight: 500;
    }

    /* Active State for Mobile */
    .nav-link.active {
        background-color: transparent;
        color: var(--primary-accent);
    }
    .nav-link.active i {
        transform: translateY(-2px); /* Subtle pop effect */
    }

    /* 6. Header Adjustments */
    .top-header {
        padding: 0 1px;
        /* Keep header sticky at top */
    }

    .header-left {
        /* Since we hid the hamburger, remove gap */
        gap: 0;
    }
    /* Hide the sidebar toggle on mobile (we use bottom nav) */
    .sidebar-toggle-btn {
        display: none;
    }

    /* Ensure the logo is visible in the header */
    .header-logo {
        display: flex; /* Make sure it shows */
        font-size: 18px; /* Slightly smaller for mobile */
    }

    .header-logo span {
        display: inline; /* Ensure text shows */
    }
}

/* --- 6. User Dropdown Menu --- */
.user-menu {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 12px); /* Position below button with 12px gap */
    right: 0;
    width: 240px;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 110;

    /* Hide/Show logic */
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.dropdown-menu.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dropdown-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}
.dropdown-header div {
    font-size: 13px;
    color: var(--text-secondary);
}
.dropdown-header strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.dropdown-links {
    padding: 8px;
}
.dropdown-links li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    font-size: 15px;
    color: var(--text-secondary);
    border-radius: 6px;
}
.dropdown-links li a:hover {
    background-color: var(--bg-main);
    color: var(--text-primary);
}
.dropdown-links li a i {
    width: 20px;
    text-align: center;
}

.dropdown-footer {
    padding: 8px;
    border-top: 1px solid var(--border-color);
}
.dropdown-footer a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    font-size: 15px;
    color: var(--text-secondary);
    border-radius: 6px;
}
.dropdown-footer a:hover {
    background-color: var(--bg-main);
    color: var(--text-primary);
}
.dropdown-footer a i {
    width: 20px;
    text-align: center;
}

/* --- 7. Page Tabs (in Header) --- */
.page-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    margin-left: 20px;
}

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


/* --- 8. Page Header (in Content) --- */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.page-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}
.page-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* --- 9. Button Styles --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: var(--border-radius);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-primary {
    background-color: var(--primary-accent);
    color: #ffffff;
}
.btn-primary:hover {
    background-color: #00a396; /* Darker accent */
}

/* --- 10. Garage Grid Layout --- */
.garage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.car-card {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.car-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.car-card-link {
    display: block;
    text-decoration: none;
}

.car-card-image {
    width: 100%;
    height: 200px;
    background-color: var(--bg-main);
    display: flex;
    align-items: center;
    justify-content: center;
}
.car-card-image img {
    width: 100%;
    object-fit: cover;
}
.image-placeholder {
    color: var(--border-color);
}
.image-placeholder i {
    font-size: 60px;
}

.car-card-content {
    padding: 16px;
}
.car-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.car-card-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* "Add New" Card Style */
.car-card.add-new {
    border: 2px dashed var(--border-color);
    background-color: var(--bg-main);
}
.car-card.add-new:hover {
    border-color: var(--primary-accent);
    background-color: var(--light-accent);
}
.add-new-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 284px; /* Matches car-card height */
    text-decoration: none;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}
.add-new-link:hover {
    color: var(--primary-accent);
}
.add-new-link i {
    font-size: 32px;
}
.add-new-link span {
    font-size: 15px;
    font-weight: 500;
    margin-top: 16px;
}

/* --- 11. Mobile Tweaks for Garage --- */
@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .page-title {
        font-size: 24px;
    }
    .page-actions {
        width: 100%;
    }
    /* Make "Add car" button full-width on mobile */
    .btn-primary {
        width: 70%;
    }
    .garage-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 16px;
    }

    .page-tabs {
        margin-left: 0;
    }
}

/* --- Vehicle Detail Page --- */

/* Used for two-column layouts like dashboard and detail page */
.content-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 2rem;
}

/* On larger screens, use two columns */
@media (min-width: 992px) {
    .content-grid {
        /* 2fr 1fr means the first column is twice as wide as the second */
        grid-template-columns: 2fr 1fr;
    }
}


/* List for displaying vehicle details */
.detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.detail-list li {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
}

.detail-list li:last-child {
    border-bottom: none;
}

.detail-list li strong {
    color: #333;
    margin-right: 1rem;
}

.detail-list li span {
    color: #555;
    font-weight: 500;
}


/* --- Form Styles --- */
/* (You may have some of this already) */

.form-standard {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="number"] {
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px hsla(var(--primary-hue), 80%, 50%, 0.2);
}

.form-help-text {
    font-size: 0.875rem;
    color: #666;
    margin-top: 0.25rem;
}

.form-error {
    font-size: 0.875rem;
    color: #d93025; /* Red for errors */
    margin-top: 0.25rem;
    font-weight: 500;
}


/* --- Alert / Message Styles --- */
.messages-container {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.alert {
    padding: 1rem;
    border-radius: 6px;
    font-weight: 500;
    border: 1px solid transparent;
}

.alert-success {
    background-color: #e6f7ec;
    border-color: #b7e4c7;
    color: #0f5132;
}

.alert-warning {
    background-color: #fff9e6;
    border-color: #ffeca7;
    color: #664d03;
}

.alert-error {
    background-color: #fdecea;
    border-color: #f5c6cb;
    color: #842029;
}

/* --- 12. Vehicle Detail Header --- */
.vehicle-header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
}
.vehicle-header-image .image-placeholder {
    width: 100%;
    height: 250px;
    border-radius: var(--border-radius);
    background-color: var(--bg-main);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border-color);
}
.vehicle-header-image .image-placeholder i {
    font-size: 80px;
}
.vehicle-title {
    font-size: 28px;
    font-weight: 700;
}
.vehicle-subtitle {
    font-size: 18px;
    color: var(--text-secondary);
    margin-top: 4px;
}
.vehicle-badges {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}
.badge-gray {
    background-color: var(--bg-main);
    color: var(--text-secondary);
}

/* Make header horizontal on larger screens */
@media (min-width: 768px) {
    .vehicle-header {
        flex-direction: row;
        align-items: center;
    }
    .vehicle-header-image .image-placeholder {
        width: 200px; /* Fixed width */
        height: 150px;
    }
    .vehicle-header-image .image-placeholder i {
        font-size: 60px;
    }
    .vehicle-title {
        font-size: 32px;
    }
}

/* 6. Nav Tabs Scrolling (Mobile) */
    .tabs-nav {
        display: flex;
        flex-wrap: nowrap !important; /* Prevent wrapping to next line */
        overflow-x: auto !important; /* Enable horizontal scrolling */
        -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling on iOS */
        gap: 24px; /* Space between tabs */

        /* Extend to screen edges to allow full swipe */
        margin-left: -5px;
        margin-right: -5px;
        padding: 0 16px; /* Inner padding for content start */
        width: calc(100% + 10px);

        /* Hide Scrollbars for cleaner look */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE 10+ */
        border-bottom: 1px solid var(--border-color);
    }

    /* Hide Scrollbar (Chrome/Safari) */
    .tabs-nav::-webkit-scrollbar {
        display: none;
    }



    .tab-link i {
        margin-right: 6px;
    }



/* --- 14. Tab Content --- */
.tab-content {
    display: none; /* Hidden by default */
    padding-top: 24px;
}
.tab-content.active {
    display: block; /* Shown by JS */
}

/* --- 15. Standard Card (for content) --- */
.card {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 24px;
}
.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-header h3 {
    font-size: 18px;
    font-weight: 600;
}
.card-body {
    padding: 15px;
}
.card-danger {
    border-color: #f5c6cb;
}
.card-danger .card-header {
    background-color: #fdecea;
    color: #842029;
}
.btn-danger {
    background-color: #dc3545;
    color: white;
}
.btn-danger:hover {
    background-color: #c82333;
}

/* --- Modal Styles --- */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* Centered with 10% margin from top */
    padding: 24px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px; /* Default max-width */
    border-radius: 8px;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}



/* --- 17. History Box Card --- */
.history-card-box {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}
.history-card-box:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.card-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.card-header-top .summary {
    font-weight: 600;
    color: var(--text-primary);
    margin-right: 15px;
}
.card-header-top .date {
    font-size: 0.9em;
    color: var(--text-secondary);
    white-space: nowrap;
}
.card-business {
    font-size: 0.9em;
    color: var(--text-secondary);
    margin-top: 4px;
}
.card-footer-stats {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}
.stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9em;
    color: var(--text-primary);
}
.stat i {
    color: var(--text-secondary);
}
.stat[title] {
    cursor: help;
}

/* --- 18. History Compact Table --- */
.history-table {
    width: 100%;
}
.history-table tbody tr {
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.history-table tbody tr:hover {
    background-color: var(--bg-main);
}

/* --- 19. New Details Modal --- */
.details-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}
.details-modal-header h4 {
    margin: 0;
    font-size: 20px;
}
.details-modal-header p {
    margin: 4px 0 0;
    color: var(--text-secondary);
}
.details-modal-body {
    padding-top: 20px;
}
.details-modal-body h5 {
    font-size: 14px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.services-table-container {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}
#details-modal-services-table {
    margin-top: 0;
}

/* --- 16. History File Layout (Improved) --- */
.layout-toggle {
    display: flex;
    background-color: var(--bg-main);
    border-radius: var(--border-radius);
    padding: 4px;
}
.layout-toggle button {
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 16px;
    border: none;
    background: none;
    cursor: pointer;
}
.layout-toggle button.active {
    background-color: #ffffff;
    color: var(--primary-accent);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Layout containers */
.history-grid {
    display: none; /* Use flexbox for vertical alignment */
    flex-direction: column; /* Stack items vertically */
    position: relative; /* For the timeline line */
    padding: 0px 0;
}
.history-grid.active {
    display: flex;
}
.history-table-container { display: none; }
.history-table-container.active { display: block; }



/* Individual timeline item (wrapper for card and dot) */
.timeline-item {
    display: flex;
    position: relative;
    width: 100%;
    margin-bottom: 5px; /* Reduced bottom margin */
}



/* Positioning for left and right cards */
.timeline-item:nth-child(even) { /* Even items - align left */
    justify-content: flex-start;
}

.timeline-item:nth-child(odd) { /* Odd items - align right */
    justify-content: flex-end;
    /* Removed the negative margin-top for a cleaner flow */
}




/* --- Responsive (Mobile/Tablet) --- */
@media (max-width: 992px) {
    /* Hide the timeline line and dots */
    .history-grid::before,
    .timeline-item::before {
        display: none;
    }

    .timeline-item {
        justify-content: flex-start; /* All items left aligned */
        padding: 0;
        margin: 0;
        margin-bottom: 15px; /* Revert to simple stacking */
        width: 100%;
    }

    .timeline-item .history-card-box {
        width: 100%; /* Full width */
        margin: 0;
    }

    /* Make sure all items are full width */
    .timeline-item:nth-child(even) .history-card-box,
    .timeline-item:nth-child(odd) .history-card-box {
        width: 100%;
        margin: 0;
    }
}


/* --- 17. History Box Card (New Styling) --- */
.history-card-box {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}
.history-card-box:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.card-body-top {
    padding: 20px;
}
.card-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.card-header-top .date {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-primary);
}
.card-header-top .time-ago {
    font-size: 0.85em;
    color: var(--text-secondary);
    white-space: nowrap;
    margin-top: 4px;
}
.card-business {
    font-size: 0.9em;
    color: var(--text-secondary);
    margin-top: 12px;
}
.card-business strong {
    color: var(--text-primary);
}
.card-summary {
    font-size: 0.9em;
    color: var(--text-secondary);
    margin-top: 8px;
    /* Truncate long summaries */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 2 lines max */
    -webkit-box-orient: vertical;
}
.card-footer-stats {
    display: flex;
    gap: 20px;
    background-color: var(--bg-main);
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
}
.stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9em;
    color: var(--text-primary);
}
.stat i {
    color: var(--text-secondary);
}
.stat[title] {
    cursor: help;
}

/* --- 18. History Compact Table --- */
.history-table {
    width: 100%;
}
.history-table tbody tr {
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.history-table tbody tr:hover {
    background-color: #f9f9f9;
}

/* --- 19. New Details Modal --- */
.details-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}
.details-modal-body {
    padding-top: 20px;
}
.details-modal-body h5 {
    font-size: 14px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 8px;
    margin-top: 20px;
}
.details-modal-body h5:first-child {
    margin-top: 0;
}
.services-table-container {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}
#details-modal-services-table {
    margin-top: 0;
}
#details-modal-files a {
    text-decoration: none;
    padding: 5px 8px;
    background-color: var(--bg-main);
    border-radius: 4px;
}
#details-modal-files a:hover {
    background-color: var(--border-color);
}

/* --- 18. History Compact Table (Updated) --- */
.history-table {
    width: 100%;
    border-collapse: collapse; /* Use collapse for cleaner lines */
}
.history-table th,
.history-table td {
    padding: 16px 12px; /* More vertical padding */
    text-align: left; /* Force left-align */
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}
.history-table td {
    font-weight: 600; /* Makes the text semi-bold */
    color: var(--text-primary); /* Ensures it's dark and readable */
}
.history-table th {
    background-color: var(--bg-main);
    font-size: 0.85em; /* Smaller header text */
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
}
.history-table tbody tr {
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.history-table tbody tr:nth-child(even) {
    background-color: var(--bg-main); /* Zebra striping */
}
.history-table tbody tr:hover {
    background-color: #e6f9f7; /* Light accent color on hover */
}

/* --- 18. History Compact Table (Additions) --- */

.history-year-header td {
    font-weight: 700;
    font-size: 1.1em;
    padding-top: 20px; /* Add space above the year */
    padding-bottom: 8px;
    color: var(--text-primary);
    background-color: #ffffff !important; /* Override zebra striping */
    border-bottom: 2px solid var(--text-primary);
}

/* --- 16. Admin Tab Boxes --- */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.admin-box {
    display: block;
    width: 100%;
    padding: 24px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: #ffffff;
    cursor: pointer;
    text-align: left;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.admin-box:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: var(--primary-accent);
}

.admin-box i {
    font-size: 24px;
    color: var(--primary-accent);
}

.admin-box span {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 12px;
}

.admin-box p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Danger variant for the "Remove" box */
.admin-box.danger:hover {
    border-color: #dc3545; /* Red border on hover */
}
.admin-box.danger i,
.admin-box.danger span {
    color: #dc3545; /* Red icon and text */
}

/* --- Credits Page Styles --- */

.credit-balance-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
}

.balance-card {
    background: linear-gradient(135deg, var(--primary-accent), #00a396);
    color: white;
    padding: 30px;
    border-radius: var(--border-radius);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 196, 180, 0.3);
}

.balance-card h3 {
    margin: 0;
    font-size: 18px;
    opacity: 0.9;
}

.balance-amount {
    font-size: 48px;
    font-weight: 700;
    margin: 15px 0;
}

.top-up-card {
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 24px;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.price-box {
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    position: relative;
    transition: border-color 0.2s;
}

.price-box:hover {
    border-color: var(--primary-accent);
}

.price-box.popular {
    border-color: var(--primary-accent);
    background-color: var(--light-accent);
}

.price-box .tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-accent);
    color: white;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: 600;
}

.price-box .credit-amount {
    display: block;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 5px;
}

.price-box .price {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 15px;
}

.price-box button {
    width: 100%;
}

@media (max-width: 768px) {
    .credit-balance-container {
        grid-template-columns: 1fr;
    }
}

/* --- Header Credits Display --- */
.header-credits {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background-color: var(--light-accent); /* Light background */
    color: var(--primary-accent); /* Teal text */
    border-radius: 20px; /* Pill shape */
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.2s;
}

.header-credits:hover {
    background-color: #d0f4f0; /* Slightly darker on hover */
    transform: translateY(-1px); /* Subtle lift effect */
}

.header-credits i {
    font-size: 14px;
}

/* --- Responsive Tables & Tabs --- */

/* 1. Wrapper to make tables scrollable on mobile */
.table-responsive {
    width: 100%;
    overflow-x: auto; /* Allows horizontal scroll */
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

/* Remove the border from the table itself since the wrapper has it */
.table-responsive table {
    margin-top: 0;
    border: none;
}
.table-responsive th,
.table-responsive td {
    white-space: nowrap; /* Prevents text wrapping, keeping rows neat */
}

/* 2. Mobile Tabs Adjustment */
@media (max-width: 768px) {
    .tab-nav {
        display: flex;
        overflow-x: auto; /* Scrollable tabs if they don't fit */
        white-space: nowrap;
        border-bottom: 1px solid var(--border-color);
    }

    .tab-nav button {
        flex: 1; /* Distribute space evenly */
        padding: 12px 10px;
        font-size: 14px;
        text-align: center;
    }

    /* Ensure main container padding clears the bottom nav */
    .main-container {
        padding-bottom: 100px !important;
    }
}

/* --- Account Page Form Layouts --- */

/* 2-Column Grid (First Name / Last Name) */
.form-grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* 3-Column Grid (City / Region / Post Code) */
.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

/* Container for the Save/Change Password buttons */
.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px; /* Add space at bottom for mobile nav */
}

/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
    /* Force all grids to become a single column stack */
    .form-grid-row,
    .form-grid-3 {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* Stack the buttons at the bottom */
    .form-actions {
        flex-direction: column-reverse; /* Save button on top */
        gap: 15px;
        align-items: stretch; /* Full width buttons */
    }

    .form-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Ensure content isn't hidden behind the bottom nav */
    .main-container {
        padding-bottom: 100px;
    }
}
/* --- Dashboard Header Stats --- */
.stats-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 14px;
    margin-right: 12px; /* Space between badge and Add button */
}

.stats-badge i {
    color: var(--primary-accent);
}

/* --- Car Card Stats --- */
.car-card-stats {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    background-color: var(--bg-main);
    padding: 4px 8px;
    border-radius: 4px;
}

.stat-item i {
    color: var(--text-primary); /* Or use primary-accent */
    font-size: 12px;
}

/* --- Vehicle Status States --- */

/* 1. Paid (Greenish) */
.status-paid {
    background-color: var(--primary-accent);
    border-color: #b7e4c7;
}

/* 2. Trial (Yellowish) */
.status-trial {
    background-color: #fff9db; /* Very light yellow */
    border-color: #ffeeba;
}

/* 3. Expired (Reddish) */
.status-expired {
    background-color: #fff5f5; /* Very light red */
    border-color: #f5c6cb;
}

/* Admin Box Purchase Style */
.admin-box.purchase {
    border-color: #6f42c1;
}
.admin-box.purchase:hover {
    background-color: #f3f0ff;
}
.admin-box.purchase i,
.admin-box.purchase span {
    color: #6f42c1;
}

/* --- Detail Layout (Sidebar + Content) --- */
.detail-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
}

.detail-sidebar {
    position: sticky;
    top: 80px;
    height: fit-content;
}

.detail-sidebar ul {
    list-style: none;
    padding: 0;
    border-left: 2px solid var(--border-color);
}

.detail-sidebar li a {
    display: block;
    padding: 8px 16px;
    color: var(--text-secondary);
    font-size: 14px;
    text-decoration: none;
    border-left: 2px solid transparent;
    margin-left: -2px;
}

.detail-sidebar li a:hover,
.detail-sidebar li a.active {
    color: var(--primary-accent);
    border-left-color: var(--primary-accent);
    font-weight: 600;
}

.detail-section {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
    scroll-margin-top: 90px; /* For sticky header offset */
}

.detail-section h4 {
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    color: var(--primary-accent);
}

.data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.data-item label {
    display: block;
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
}
.data-item span {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

@media (max-width: 768px) {
    .detail-layout {
        grid-template-columns: 1fr;
    }
    .detail-sidebar {
        display: none; /* Hide jump links on mobile */
    }
}
/* --- Vehicle Header Logo & Title --- */
.vehicle-title-row {
    display: flex;
    align-items: center;
    gap: 12px; /* Space between logo and text */
    margin-bottom: 4px; /* Keep tight with subtitle */
}

.vehicle-make-logo {
    height: 32px; /* Matches the visual weight of the H1 text */
    width: auto;  /* Maintain aspect ratio */
    object-fit: contain;
    /* Optional: Add a subtle drop shadow for better contrast on white */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* Ensure the title doesn't have extra margins pushing it out of alignment */
.vehicle-title {
    margin: 0;
    line-height: 1.2;
}

/* Responsive adjustment for mobile */
@media (max-width: 768px) {
    .vehicle-make-logo {
        height: 24px; /* Slightly smaller on mobile */
    }
    .vehicle-title-row {
        gap: 8px;
    }

    /* 1. Header Touch Area */
    .filter-dropdown-menu h4 {
        /* Ensure the header captures touch events nicely */
        touch-action: none; /* Prevents browser scrolling when dragging header */
        cursor: grab;
    }

    /* 2. Close 'X' Button Styling */
    .dropdown-close-icon {
        position: absolute;
        top: 12px;  /* Align with the header text */
        right: 15px;
        width: 32px;
        height: 32px;
        background-color: #f0f0f0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #555;
        font-size: 16px;
        cursor: pointer;
        z-index: 10; /* Ensure it sits on top of the header bar */
        transition: background-color 0.2s;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .dropdown-close-icon:active {
        background-color: #e0e0e0;
        transform: scale(0.95);
    }
}

@media (min-width: 769px) {
    .dropdown-close-icon {
        display: none !important;
    }
}


/* --- Text Colors --- */
.text-success { color: #28a745 !important; } /* Green */
.text-danger { color: #dc3545 !important; }  /* Red */
.text-warning { color: #fd7e14 !important; } /* Orange */
.text-muted { color: #6c757d !important; }   /* Gray */



/* --- Header Brand (Logo + Text) --- */
.header-brand-link {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between logo and text */
    text-decoration: none;
    margin-right: 30px;
}

/* --- Logo Image Fixes --- */
/* --- Logo Image Fixes --- */
.app-logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
    display: block;

    /* FIX:
       1. brightness(1.2) pushes the light grey background up to pure white (255,255,255).
       2. contrast(1.1) restores the darkness of the logo text/icon so it doesn't look washed out.
       3. mix-blend-mode: multiply makes the new white background transparent.
    */
    filter: brightness(1.2) contrast(1.1);
    mix-blend-mode: multiply;
}

/* --- Brand Text --- */
.brand-text {
    font-size: 20px;
    font-weight: 700; /* Bold */
    color: var(--text-primary);
    white-space: nowrap; /* Prevent wrapping */
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .app-logo-img {
        height: 32px;
    }
    .brand-text {
        font-size: 18px;
    }
}

/* --- Stripe Modal Specific Overrides --- */
#stripe-modal .modal-content {
    padding: 0;               /* Remove the white gap */
    background-color: transparent; /* Remove white background */
    border: none;             /* Remove the grey border */
    box-shadow: none;         /* Optional: Remove shadow if Stripe has its own */
    overflow: hidden;         /* Ensure Stripe's rounded corners clip correctly */
}

/* Reposition the Close Button for this specific modal */
#stripe-modal .close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 100; /* Ensure it sits on top of the Stripe form */
    color: #555;  /* Make sure it's visible */
    background: rgba(255, 255, 255, 0.8); /* Optional: small background for readability */
    padding: 0 8px;
    border-radius: 4px;
}
/* --- New Pricing Styles --- */

/* Base Price Box Update */
.price-box {
    position: relative;
    padding-top: 35px; /* Make room for top tags */
    border: 2px solid var(--border-color);
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Lift effect on hover */
.price-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    border-color: var(--primary-accent);
}

/* Tags (Most Popular / Best Value) */
.price-box .tag {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.popular-tag {
    background-color: var(--primary-accent);
    color: white;
}

.value-tag {
    background-color: #6f42c1; /* Purple for Elite */
    color: white;
}

/* Theme Colors for Boxes */
.price-box.popular {
    border-color: var(--primary-accent);
    background-color: #f0fffd; /* Very light teal tint */
}

.price-box.best-value {
    border-color: #6f42c1;
    background-color: #f8f4ff; /* Very light purple tint */
}

/* "Save X%" Pill */
.save-pill {
    display: inline-block;
    background-color: #28a745; /* Green */
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}

/* Bonus Text */
.bonus-text {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: -4px;
    margin-bottom: 12px;
}

.highlight-bonus {
    color: #dc3545; /* Red */
    font-weight: 700;
}

/* --- NEW: Custom Vehicle Details Layout --- */

/* 1. The Data Grid (3 cols Desktop, 2 cols Mobile) */
.details-data-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.detail-box {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.detail-box label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-box span {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
}

/* 2. Checks Section (Green/Red Status) */
.check-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background: white;
    border-bottom: 1px solid var(--border-color);
    cursor: default;
}
.check-item:last-child {
    border-bottom: none;
}
.check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--text-primary);
}
.check-label i {
    color: var(--text-secondary);
    width: 20px;
    text-align: center;
}
.check-status {
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 13px;
}
.check-status.clean {
    background-color: #e6f7ec;
    color: #28a745;
}
.check-status.alert {
    background-color: #fdecea;
    color: #dc3545;
    cursor: pointer; /* Clickable to see details */
    text-decoration: underline;
}
.check-detail-popup {
    display: none;
    margin-top: 5px;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 5px 0 0 30px;
}

/* 3. CO2 Band Visual */
.co2-band-container {
    display: flex;
    align-items: center;
    gap: 15px;
}
.co2-arrow {
    position: relative;
    background: #ddd;
    color: white;
    padding: 5px 15px 5px 10px;
    font-weight: bold;
    font-size: 14px;
    clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
    width: 60px;
}
/* CO2 Band Colors */
.band-a { background-color: #00cc66; }
.band-b { background-color: #33cc33; }
.band-c { background-color: #66cc00; }
.band-d { background-color: #99cc00; }
.band-e { background-color: #cccc00; }
.band-f { background-color: #ffcc00; }
.band-g { background-color: #ff9900; }
.band-h { background-color: #ff6600; }
.band-i { background-color: #ff3300; }
.band-j { background-color: #cc0000; }
.band-k { background-color: #990000; }
.band-l { background-color: #660000; }
.band-m { background-color: #000000; }

/* 4. Custom Tables (Keepers/Plates) */
.custom-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.custom-table th {
    text-align: left;
    padding: 10px;
    background: #f8f9fa;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}
.custom-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    color: var(--text-primary);
}

/* --- Responsive (Mobile) --- */
@media (max-width: 768px) {
    .details-data-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
        gap: 10px;
    }

    .detail-section {
        padding: 15px; /* Slightly less padding on mobile */
    }

    /* Keep header icon/text aligned */
    .detail-section h4 i {
        margin-right: 8px;
    }
}
/* --- Technical Info Styling --- */

/* NCAP Stars */
.ncap-rating {
    display: flex;
    align-items: center;
    gap: 5px;
}
.ncap-rating i {
    color: #e0e0e0; /* Grey for empty stars */
    font-size: 18px;
}
.ncap-rating i.gold {
    color: #ffc107; /* Gold for active stars */
}
.ncap-text {
    margin-left: 10px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 16px;
}

/* Fuel Economy Table */
.fuel-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.fuel-table th {
    background-color: var(--bg-main);
    text-align: left;
    padding: 12px;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}
.fuel-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-weight: 600;
}

/* --- Nested Section Styling --- */
.subsection-header {
    width: 100%;
    font-size: 18px; /* Larger text */
    font-weight: 700;
    color: var(--text-primary); /* Darker text */
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: none; /* Remove uppercase forcing */
}

.subsection-header i {
    color: var(--primary-accent); /* Brand color for icon */
    font-size: 18px;
}

/* Ensure nested grids behave */
.nested-grid-container {
    margin-bottom: 20px;
}

/* --- MOT History Updates --- */

/* 1. View Toggling (Desktop vs Mobile) */
.mot-mobile-view { display: none; }
.mot-desktop-view { display: block; }

@media (max-width: 768px) {
    .mot-mobile-view { display: block; }
    .mot-desktop-view { display: none; }
}

/* 2. Desktop Expandable Table */
.mot-row {
    cursor: pointer;
}
.mot-row:hover {
    background-color: #f8f9fa;
}
.mot-details-row {
    background-color: #fafafa;
    display: none; /* Hidden by default */
}
.mot-details-row.active {
    display: table-row;
}
.mot-details-content {
    padding: 20px !important;
    border-bottom: 2px solid var(--border-color);
}

/* Count Badges */
.count-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-right: 5px;
}
.count-badge.fail { background: #fdecea; color: #dc3545; border: 1px solid #f5c6cb; }
.count-badge.adv { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.count-badge.pass { background: #e6f7ec; color: #0f5132; border: 1px solid #b7e4c7; }

/* 3. Mobile Timeline */
.mot-timeline {
    position: relative;
    padding-left: 30px; /* Space for the line */
}
/* The vertical line */
.mot-timeline::before {
    content: '';
    position: absolute;
    left: 14px; /* Center of the icon width */
    top: 10px;
    bottom: 0;
    width: 2px;
    background: #e9ecef;
}

.timeline-entry {
    position: relative;
    margin-bottom: 30px;
}

/* The Icon (Tick/Cross) */
.timeline-icon {
    position: absolute;
    left: -30px; /* Pull back into the padding area */
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    z-index: 2;
    border: 3px solid white; /* Whitespace around the dot */
}
.timeline-icon.pass { background-color: #28a745; }
.timeline-icon.fail { background-color: #dc3545; }

/* The Card Content */
.timeline-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}
.timeline-date { font-weight: 700; font-size: 16px; }
.timeline-mileage { color: var(--text-secondary); font-size: 14px; }

.timeline-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.timeline-body li {
    font-size: 13px;
    margin-bottom: 6px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.timeline-body li i { margin-top: 3px; }
.timeline-body .text-danger { color: #dc3545; }
.timeline-body .text-warning { color: #fd7e14; }

/* --- Empty State Styling --- */
.empty-garage-state {
    grid-column: 1 / -1; /* Force it to span all grid columns */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 20px;
    background-color: #ffffff;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    text-align: center;
    min-height: 400px;
}

.empty-content {
    max-width: 450px;
}

.empty-icon {
    width: 100px;
    height: 100px;
    background-color: var(--light-accent); /* Uses your teal tint */
    color: var(--primary-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 40px;
    transition: transform 0.3s ease;
}

.empty-garage-state:hover .empty-icon {
    transform: scale(1.1); /* Subtle pop effect on hover */
}

.empty-garage-state h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.empty-garage-state p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 30px;
}

.empty-garage-state .btn {
    padding: 12px 30px; /* Larger button */
    font-size: 16px;
}
/* --- Mobile Overflow Fixes --- */

/* 1. Prevent the whole page from scrolling horizontally */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* 2. Ensure the main container doesn't burst the width */
.main-container {
    max-width: 100vw;
    overflow-x: hidden;
}

/* 3. Fix the Garage Grid on Mobile */
@media (max-width: 768px) {
    .garage-grid {
        /* Force single column and constrain width */
        grid-template-columns: 1fr !important;
        gap: 16px;
        width: 100%;
        box-sizing: border-box;
    }

    /* 4. Fix the Vehicle Card Buttons */
    /* The 2-column button grid might be too wide for small phones.
       Let's stack them if needed or ensure they fit. */
    .car-card-actions div[style*="grid-template-columns"] {
        /* Optional: Force single column for buttons on very small screens */
        /* grid-template-columns: 1fr !important; */
    }

    .vehicle-card {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    /* Ensure buttons don't force width */
    .btn {
        white-space: normal; /* Allow text to wrap if needed */
        word-wrap: break-word;
    }
}
/* --- Card Layout Fixes --- */

/* 1. Ensure the card stretches to fill the grid row */
.car-card {
    display: flex;
    flex-direction: column;
    height: 100%; /* Stretch to fill grid cell */
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden; /* Keeps image corners rounded */
    padding: 0; /* REMOVE PADDING from container so image touches edges */
}

/* 2. Ensure the 'Add New' card matches the height */
.car-card.add-new {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100%; /* Match siblings */
    border: 2px dashed var(--border-color);
    background-color: #f8f9fa;
}

/* 3. Fix the Image Container */
.car-card-image {
    width: 100%;
    height: 200px; /* Fixed height for consistency */
    flex-shrink: 0; /* Prevent image from shrinking */
    background-color: #eee;
}

.car-card-image img {
    width: 100%;
    object-fit: cover; /* Ensures image fills the box without distortion */
}

/* 4. Content Spacing */
.car-card-content {
    padding: 16px;
    flex-grow: 1; /* Pushes footer to bottom if needed */
}

.car-card-actions {
    padding: 0 16px 16px 16px;
    margin-top: auto; /* Forces this section to the bottom of the card */
}

/* 1. Tabs (REG / VIN) */
.modal-tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}
.modal-tab-btn {
    flex: 1;
    padding: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}
.modal-tab-btn.active {
    color: var(--primary-accent);
    border-bottom-color: var(--primary-accent);
    background: #f8f9fa;
}

/* 2. Reg/VIN Input Group */
.reg-input-container {
    display: flex;
    height: 50px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.reg-flag-box {
    width: 40px;
    /* Ensure flag box doesn't shrink */
    flex-shrink: 0;
    background-color: var(--reg-plate-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.reg-flag-box img {
    width: 20px;
    height: auto;
    display: block;
}

.reg-input-field {
    flex: 1;
    border: none;
    /* IMPORTANT: Remove default iOS styling */
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0; /* Fixes iOS rounded corners */

    /* Centering Logic */
    text-align: center;
    padding: 0; /* Remove padding to rely on flex centering */
    margin: 0;

    font-size: 24px; /* Adjust size for mobile if needed */
    font-weight: 700;
    text-transform: uppercase;
    font-family: "Charles Wright", "Arial", sans-serif;
    outline: none;

    /* Vertical centering trick for inputs */
    line-height: 50px; /* Match container height */
    height: 100%;
}

/* Mobile Specific Tweak */
@media (max-width: 480px) {
    .reg-input-field {
        font-size: 20px; /* Slightly smaller font to prevent overflow */
    }
}
/* Yellow background for REG */
.reg-input-field.reg-mode {
    background-color: var(--reg-plate-yellow);
    color: black;
}
/* Grey background for VIN */
.reg-input-field.vin-mode {
    background-color: #f0f0f0;
    color: #333;
}

/* 3. Animated Close Button */
.close-btn-animated {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.2s;
    font-size: 18px;
    font-weight: bold;
    z-index: 10;
}
.close-btn-animated:hover {
    transform: rotate(90deg);
    background-color: #c82333;
}

/* 4. Search Button */
.search-btn-round {
    display: block;
    width: 100%;
    max-width: 200px;
    margin: 25px auto 0;
    padding: 12px;
    border-radius: 30px; /* Round pill shape */
    background-color: var(--primary-accent);
    color: white;
    font-weight: 700;
    font-size: 16px;
    border: none;
    box-shadow: 0 4px 10px rgba(0, 196, 180, 0.3);
    transition: transform 0.2s;
}
.search-btn-round:hover {
    transform: translateY(-2px);
}

/* 5. Result View Styling */
.result-vehicle-display {
    text-align: center;
}
.result-image-container {
    width: 100%;
    /* height: 180px; */
    background: #eee;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
}
.result-image-container img {
    width: 100%;
    /* height: 100%; */
    object-fit: cover;
}
.result-plate-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
}
.result-plate-box {
    padding: 0; /* We handle padding inside the span now */
    background-color: var(--reg-plate-yellow);
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 15px;
    font-weight: 700;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.result-details p {
    margin: 5px 0;
    color: var(--text-secondary);
}
.result-message-box {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
    border-left: 4px solid var(--primary-accent);
    text-align: left;
}

/* --- UK Number Plate Styling (Display Only) --- */
.uk-plate-display {
    display: inline-flex;
    align-items: center;
    background-color: #ffe460; /* Standard Rear Plate Yellow */
    border-radius: 4px;
    overflow: hidden;
    height: 36px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.uk-plate-flag {
    width: 30px;
    height: 100%;
    background-color: #036ebf; /* Euro/GB Blue */
    display: flex;
    align-items: center;
    justify-content: center;
}

.uk-plate-flag img {
    width: 14px;
    height: auto;
    display: block;
}

.uk-plate-text {
    padding: 0 12px;
    font-family: "Charles Wright", "Arial", sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #000;
    text-transform: uppercase;
    line-height: 36px; /* Vertical center */
}

/* --- Dashboard Compact Stats --- */
.dashboard-compact-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee;
    font-size: 13px;
    color: var(--text-primary);
}

.dashboard-stat-box {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* --- Car Card Status Banner --- */
.status-banner {
    width: 100%;
    padding: 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    letter-spacing: 0.5px;
}

.status-banner.trial, .car-card.status-trial {
    background-color: #fff3cd; /* Yellow */
    color: #856404;
}

.status-banner.expired, .car-card.status-expired {
    background-color: #f8d7da; /* Red */
    color: #721c24;
}

/* Ensure the card handles the new header correctly */
.car-card {
    display: flex;
    flex-direction: column;
    /* Ensure border radius clips the banner corners */
    overflow: hidden;
}

/* --- Global Confirmation Modal --- */
#confirm-modal .modal-content {
    padding: 30px 20px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    animation: slideIn 0.2s ease-out;
}

@keyframes slideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Button Variants for Modal */
.btn-secondary {
    background-color: #e9ecef;
    color: var(--primary-accent);
    border: 1px solid #ced4da;
}
.btn-secondary:hover {
    background-color: #dde2e6;
}

/* Type: Danger (Red) */
.confirm-type-danger #confirm-icon { color: #dc3545 !important; }
.confirm-type-danger #confirm-ok-btn { background-color: #dc3545 !important; color: white; }

/* Type: Warning (Orange) */
.confirm-type-warning #confirm-icon { color: #ffc107 !important; }
.confirm-type-warning #confirm-ok-btn { background-color: #ffc107 !important; color: black; }

/* Type: Success (Green) */
.confirm-type-success #confirm-icon { color: #28a745 !important; }
.confirm-type-success #confirm-ok-btn { background-color: #28a745 !important; color: white; }

/* --- Mobile UI Improvements (Vehicle Detail) --- */
@media (max-width: 768px) {

    /* 1. Reduce Content Padding */
    .content-wrapper {
        padding: 5px !important;
    }

    /* 2. Reduce Image Height */
    .vehicle-header-image .image-placeholder,
    .vehicle-header-image img {
        height: 150px !important; /* Reduced from 250px */
    }

    /* 3. Logo (20%) and Reg (80%) Split */
    .vehicle-identity-row {
        justify-content: space-between;
        gap: 10px !important;
        width: 100%;
    }
    .vehicle-make-logo {
        width: 15% !important; /* Approx 20% space */
        height: auto !important;
        max-height: 40px;
    }
    .vehicle-header {
        gap: 0px;
        padding: 5px;
    }
    .uk-plate-display {
        flex: 1; /* Takes remaining space (approx 80%) */
        width: auto;
        display: flex;
    }
    .uk-plate-text {
        width: 100%;
        text-align: center;
        font-size: 16px; /* Ensure it fits */
    }

    /* 4. Date & Update Button on One Line */
    .vehicle-update-row {
        flex-wrap: nowrap !important;
        justify-content: space-between;
        gap: 10px !important;
        width: 100%;
    }
    .data-valid-text {
        font-size: 11px !important; /* Smaller text to fit */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #update-vehicle-data-btn {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }

    /* 5. Cleaner Badges (No Grey Background) */
    .vehicle-badges {
        display: flex;
        gap: 8px;
        margin-top: 15px;
    }
    .vehicle-badges .badge-gray {
        background-color: transparent !important;
        border: 1px solid #ddd;
        color: var(--text-primary);
        padding: 6px 10px;
        border-radius: 6px; /* Less rounded, more tag-like */
        font-size: 12px;
        flex: 1 1 auto; /* Distribute space */
        text-align: center;
    }

    /* 6. Nav Tabs Scrolling (Mobile) */
    .tabs-nav {
        display: flex;
        flex-wrap: nowrap !important; /* Prevent wrapping to next line */
        overflow-x: auto !important; /* Enable horizontal scrolling */
        -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling on iOS */
        gap: 24px; /* Space between tabs */

        /* Extend to screen edges to allow full swipe */
        margin-left: -5px;
        margin-right: -5px;
        padding: 0 16px; /* Inner padding for content start */
        width: calc(100% + 10px);

        /* Hide Scrollbars for cleaner look */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE 10+ */
        border-bottom: 1px solid var(--border-color);
    }

    /* Hide Scrollbar (Chrome/Safari) */
    .tabs-nav::-webkit-scrollbar {
        display: none;
    }


    .tab-link i {
        margin-right: 6px;
    }


}
/* --- Promo Banner --- */
.promo-banner {
    background-color: var(--primary-accent); /* Teal */
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
    position: sticky;
    top: 0;
    z-index: 200; /* Above sidebar overlay/header */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* --- Pricing Updates --- */
.price-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
}

.price-original {
    text-decoration: line-through;
    color: #999;
    font-size: 16px;
    font-weight: 600;
}

.price-discounted {
    color: #dc3545; /* Red to highlight deal */
    font-size: 24px;
    font-weight: 800;
}

/* --- NEW: Add Service Modal Styles --- */

/* Modal Tabs */
.modal-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.modal-tab-btn {
    flex: 1;
    padding: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 15px;
}

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

.modal-tab-btn.active {
    color: var(--primary-accent);
    border-bottom-color: var(--primary-accent);
    background: #f8f9fa;
}

/* Info Text */
.info-text-container {
    background-color: var(--bg-main);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid var(--primary-accent);
}

.info-text-container p {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.info-text-container strong {
    color: var(--text-primary);
}

/* Modern File Upload Area */
.file-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    position: relative;
    background-color: #ffffff;
}

.file-upload-area:hover {
    border-color: var(--primary-accent);
    background-color: var(--light-accent);
}

.file-upload-area i {
    font-size: 40px;
    color: var(--primary-accent);
    margin-bottom: 10px;
}

.file-upload-area h4 {
    margin: 0 0 5px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.file-upload-area p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.file-input-hidden {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* File Preview List */
.file-preview-list {
    margin-top: 15px;
    max-height: 250px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.file-preview-item {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: 6px;
    gap: 12px;
}

.file-preview-thumb {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #888;
}

.file-preview-info {
    flex: 1;
    overflow: hidden;
}

.file-preview-name {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

.file-preview-size {
    font-size: 11px;
    color: var(--text-secondary);
}

.file-remove-btn {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    padding: 4px;
    font-size: 16px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.file-remove-btn:hover {
    opacity: 1;
}

/* Batch Styles for "Upload by Service" */
.service-batch-container {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #fcfcfc;
    position: relative;
}

.service-batch-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.service-batch-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.service-batch-title i {
    color: var(--primary-accent);
}

.batch-remove-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #fee2e2;
    color: #dc3545;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.2s;
}

.batch-remove-btn:hover {
    background-color: #fecaca;
}

.add-batch-btn {
    width: 100%;
    padding: 12px;
    border: 2px dashed var(--border-color);
    background-color: transparent;
    color: var(--text-secondary);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    margin-top: 10px;
}

.add-batch-btn:hover {
    border-color: var(--primary-accent);
    color: var(--primary-accent);
    background-color: var(--light-accent);
}

.center-btn-container {
    display: flex;
    justify-content: center;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.upload-btn-lg {
    padding: 12px 40px;
    font-size: 16px;
    border-radius: 30px; /* Pill shape */
}

/* --- HISTORY TAB EMPTY STATES --- */

/* 1. Get Started Placeholder */
.history-empty-state {
    text-align: center;
    padding: 60px 20px;
    background-color: #ffffff;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
}

.history-empty-icon {
    font-size: 60px;
    color: var(--primary-accent); /* Teal */
    margin-bottom: 20px;
    background-color: var(--light-accent);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.history-empty-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.history-empty-text {
    font-size: 16px;
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto 30px;
}

.history-step-list {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.history-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 150px;
}

.history-step-icon {
    font-size: 24px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    background: #f8f9fa;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-step strong {
    display: block;
    margin-bottom: 5px;
    color: var(--text-primary);
}

.history-step p {
    font-size: 13px;
    margin: 0;
}

/* 2. Processing State Animation */
.processing-state {
    text-align: center;
    padding: 50px;
    background-color: #f0fdfa; /* Very light teal */
    border: 1px solid #ccfbf1;
    border-radius: 8px;
    animation: pulse-bg 2s infinite;
}

@keyframes pulse-bg {
    0% { background-color: #f0fdfa; }
    50% { background-color: #e0f2f1; }
    100% { background-color: #f0fdfa; }
}

.processing-icon {
    font-size: 50px;
    color: var(--primary-accent);
    margin-bottom: 20px;
    animation: spin 3s linear infinite;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

/* 3. Mixed State (List + Processing Banner) */
.processing-banner {
    background: linear-gradient(90deg, var(--light-accent), #ffffff);
    border: 1px solid var(--primary-accent);
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    animation: slide-in 0.5s ease-out;
}

@keyframes slide-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.processing-banner-icon {
    font-size: 20px;
    color: var(--primary-accent);
}

.processing-banner-text strong {
    display: block;
    color: var(--primary-accent);
    font-size: 15px;
}

.processing-banner-text p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}
/* --- HISTORY TAB EMPTY STATES --- */

/* 1. Get Started Placeholder */
.history-empty-state {
    text-align: center;
    padding: 60px 20px;
    background-color: #ffffff;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
}

.history-empty-icon {
    font-size: 60px;
    color: var(--primary-accent); /* Teal */
    margin-bottom: 20px;
    background-color: var(--light-accent);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.history-empty-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.history-empty-text {
    font-size: 16px;
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto 30px;
}

.history-step-list {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.history-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 150px;
}

.history-step-icon {
    font-size: 24px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    background: #f8f9fa;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-step strong {
    display: block;
    margin-bottom: 5px;
    color: var(--text-primary);
}

.history-step p {
    font-size: 13px;
    margin: 0;
}

/* 2. Processing State Animation */
.processing-state {
    text-align: center;
    padding: 50px;
    background-color: #f0fdfa; /* Very light teal */
    border: 1px solid #ccfbf1;
    border-radius: 8px;
    animation: pulse-bg 2s infinite;
}

@keyframes pulse-bg {
    0% { background-color: #f0fdfa; }
    50% { background-color: #e0f2f1; }
    100% { background-color: #f0fdfa; }
}

.processing-icon {
    font-size: 50px;
    color: var(--primary-accent);
    margin-bottom: 20px;
    animation: spin 3s linear infinite;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

/* 3. Mixed State (List + Processing Banner) */
.processing-banner {
    background: linear-gradient(90deg, var(--light-accent), #ffffff);
    border: 1px solid var(--primary-accent);
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    animation: slide-in 0.5s ease-out;
}

@keyframes slide-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.processing-banner-icon {
    font-size: 20px;
    color: var(--primary-accent);
}

.processing-banner-text strong {
    display: block;
    color: var(--primary-accent);
    font-size: 15px;
}

.processing-banner-text p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

/* --- HISTORY SEPARATOR FIX --- */

/* 1. Target the line on the container itself (if that's where it is) */
#history-list-container:has(.history-empty-state)::before,
#history-list-container:has(.processing-state)::before,
#history-list-container:has(.processing-banner)::before {
    display: none !important;
    border: none !important;
    width: 0 !important;
}

/* 2. Target the line on the grid view (common pattern) */
.history-grid-view:has(.history-empty-state)::before,
.history-grid-view:has(.processing-state)::before {
    display: none !important;
}

/* 3. Target the line on individual timeline items (if mixed state) */
.history-grid-view:has(.history-empty-state) .timeline-item::before,
.history-grid-view:has(.processing-state) .timeline-item::before {
    display: none !important;
}

/* Fallback for browsers that don't support :has() - applied via JS class if needed */
.hide-separator::before,
.hide-separator .timeline-item::before {
    display: none !important;
}

/* --- HISTORY SEPARATOR VISIBILITY FIX --- */

/* Logic:
   The JS adds 'hide-separator' to #history-list-container.
   The line is located on the child .history-grid::before.
   We must hide the CHILD's pseudo-element when the PARENT has the class.
*/

/* --- NEW STAGGERED TIMELINE LAYOUT --- */
/* --- NEW STAGGERED TIMELINE LAYOUT --- */



.history-grid {
    display: none; /* HIDDEN BY DEFAULT (Fixes toggle bug) */
    flex-direction: column;
    position: relative;
    padding: 0px 0;
    width: 100%;
}

/* SHOW ONLY WHEN ACTIVE */
.history-grid.active {
    display: flex;
}

/* The Central Timeline Line */
.history-grid::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    background-color: #e0e0e0;
    top: 0;
    bottom: 0;
    z-index: 0;
}

/* Individual Items */
.timeline-item {
    width: 50%;
    position: relative;
    padding-bottom: 5px;
    z-index: 1;
    box-sizing: border-box;
}

/* --- THE STAGGER LOGIC (Desktop) --- */
@media (min-width: 992px) {
    .timeline-item:not(:first-child) {
        margin-top: -90px;
    }

    /* ODD ITEMS (Left) */
    .timeline-item:nth-child(odd) {
        align-self: flex-start;
        text-align: left;
        padding-right: 20px;
    }

    /* EVEN ITEMS (Right) */
    .timeline-item:nth-child(even) {
        align-self: flex-end;
        text-align: left;
        padding-left: 20px;
    }

    /* Dots on Timeline */
    .timeline-item::after {
        content: '';
        position: absolute;
        top: 110px;
        width: 16px;
        height: 16px;
        background-color: #00c4b4;
        border: 3px solid #fff;
        border-radius: 50%;
        z-index: 2;
        box-shadow: 0 0 0 1px #e0e0e0;
    }

    .timeline-item:nth-child(odd)::after {
        right: -10px;
    }

    .timeline-item:nth-child(even)::after {
        left: -10px;
    }
}

/* --- MOBILE RESPONSIVENESS (< 992px) --- */
@media (max-width: 992px) {
    .history-grid::before {
        left: 20px;
    }

    .timeline-item {
        width: 100%;
        margin-top: 0 !important;
        padding-left: 0px;
        padding-right: 0;
        padding-bottom: 30px;
    }

    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        align-self: auto;
    }


}

/* --- CARD VISUALS --- */

.history-card-box {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.history-card-box::after,
.history-card-box::before {
    content: none !important;
    display: none !important;
}

.history-card-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.uploader-tag {
    position: absolute;
    top: -12px;
    left: 20px;
    background-color: #00c4b4;
    color: white;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 5;
}

.card-content-inner {
    padding: 30px 25px 20px 25px;
}

.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.category-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 18px;
    color: #333;
}
.category-badge i {
    color: #00c4b4;
    font-size: 20px;
}

.date-row i, .business-row i, .summary-block i, .revamp-box-header i {
    color: #00c4b4;

}

.odometer-badge {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    background: #f8f9fa;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #eee;
    white-space: nowrap;
}

.labels-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.label-pill {
    background-color: #e3f2fd;
    color: #0d47a1;
    font-size: 7px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 4px;
    text-transform: uppercase;
}

.date-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 15px;
    color: #555;
}
.date-val {
    font-weight: 700;
    color: #333;
    font-size: 10px;
}

/* Business Row (Updated for Address) */
.business-row {
    display: flex;
    align-items: flex-start; /* Align icon to top of text block */
    gap: 10px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee;
    margin-bottom: 15px;
}
.business-row i {
    margin-top: 4px; /* Slight offset for icon alignment */
}
.business-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.business-name {
    font-weight: 700;
    color: #333;
    font-size: 15px;
}
.business-address {
    font-size: 13px;
    line-height: 1.4;
}

.summary-block {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
}
.summary-block i {
    margin-top: 4px;
}
.summary-text {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

.card-stats-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 25px;
    background-color: #ffffff;
    border-top: 1px solid #f0f0f0;
    border-radius: 0 0 12px 12px;
}

.stat-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.stat-pill.tasks { background-color: #f3e5f5; color: #7b1fa2; }
.stat-pill.files { background-color: #e0f2f1; color: #00695c; }
.stat-pill.cost { background-color: #fff3e0; color: #e65100; font-size: 14px; font-weight: 700; }

/* --- REVAMPED DETAILS MODAL --- */

/* Modal Container Override */
#details-modal .modal-content {
    padding: 0; /* Let internal containers handle padding */
    border: none;
    border-radius: 16px;
    overflow: hidden; /* Clip header/footer */
    max-width: 550px;
    background-color: #f8f9fa; /* Light grey background for the modal body */
}

/* Header Section */
.revamp-header {
    background-color: #fff;
    padding: 20px 25px;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
}

.revamp-title {
    color: #00695c; /* Darker Brand Teal */
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 5px 0;
}

.revamp-date {
    color: #666;
    font-size: 14px;
    font-weight: 500;
}

/* Delete Icon Button (Top Right) */
.revamp-delete-btn {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #dc3545;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.revamp-delete-btn:hover {
    background-color: #dc3545;
    color: white;
}

/* Scrollable Body */
.revamp-body {
    padding: 20px 25px;
    overflow-y: auto;
    max-height: 65vh;
}

/* Information Boxes */
.revamp-box {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.revamp-box-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.revamp-box-header i {
    font-size: 14px;
}

.revamp-text {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

/* Service List Styles */
.service-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    color: #333;
}

.service-row.total {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
    font-weight: 700;
    font-size: 16px;
}

/* File List (Outside Box) */
.revamp-files-header {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 10px;
    padding-left: 5px;
}

.file-row-item {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.file-info {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
}

.file-icon {
    font-size: 18px;
    color: #555;
}

.file-name {
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.view-btn {
    padding: 6px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}

.view-btn:hover {
    background-color: #f0f0f0;
}

/* Footer Close Button */
.revamp-footer {
    padding: 20px 25px;
    background-color: #fff;
    border-top: 1px solid #e0e0e0;
}

.close-btn-full {
    width: 100%;
    background-color: #0d6efd; /* Specific blue from screenshot */
    color: white;
    font-weight: 600;
    padding: 12px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
}

.close-btn-full:hover {
    background-color: #0b5ed7;
}

/* --- COMPACT LAYOUT RE-DESIGN --- */

/* 1. Year Header: Clean, Left Aligned, No Background */
.history-year-header td {
    background-color: transparent !important;
    border: none !important;
    padding: 20px 0 5px 0 !important; /* Spacing above */
    font-size: 1.4em !important;
    font-weight: 800 !important;
    color: var(--primary-accent);
    text-align: left;
}

/* 2. Reset Table Cell Defaults */
.history-table td {
    padding: 12px 8px;
    border-bottom: 1px solid #f0f0f0;
}

/* 3. Icons in Cells */
.cell-icon {
    color: #999;
    margin-right: 6px;
    width: 16px; /* Fixed width for alignment */
    text-align: center;
}

/* 4. Column Styles */

/* Date */
.col-date {
    font-size: 0.9em;
    color: var(--text-secondary);
    white-space: nowrap;
}
.col-date i {
color: #00c4b4;
}
.col-business i {
color: #00c4b4;
}

/* Business: Smaller font as requested */
.col-business {
    font-size: 0.95em; /* Reduced from previous */
    font-weight: 700;
    color: var(--text-primary);
}

/* Summary: Full text, smaller font */
.col-summary {
    font-size: 0.85em; /* Smaller */
    color: #666;
    line-height: 1.4;
    min-width: 250px;
    white-space: normal !important; /* Allow wrapping */
}

/* Mileage: Grey Background Box */
.col-mileage .stat-badge {
    background-color: #f5f5f5;
    color: #666;
    border: 1px solid #eee;
}

/* Stats Badges (Tasks, Files, Total) */
.stat-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 500;
    white-space: nowrap;
}

/* Specific Colors per User Request */
.stat-badge.tasks {
    background-color: #f3e5f5;
    color: #7b1fa2;
}

.stat-badge.files {
    background-color: #e0f2f1;
    color: #00695c;
}

.stat-badge.total {
    background-color: #fff3e0;
    color: #e65100;
    font-family: monospace; /* Monospace for numbers */
    font-weight: 700;
}

/* Labels Pill styling */
.label-pill-small {
    display: inline-block;
    background-color: #e3f2fd;
    color: #0d47a1;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-right: 4px;
    margin-bottom: 4px; /* Space if they wrap */
    text-transform: uppercase;
    white-space: nowrap;
}
/* --- MOBILE COMPACT TABLE TWEAKS --- */

/* 1. Enable Horizontal Scroll on the Container */
.history-table-container {
    width: 100%;
    overflow-x: auto; /* Allows table to scroll horizontally if it's too wide */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: white;
}

/* 2. Mobile Specific Table Scaling */
@media (max-width: 768px) {

    /* Shrink Year Header */
    .history-year-header td {
        font-size: 1.1em !important;
        padding: 10px 8px 4px 8px !important;
    }

    /* Tighter Cells */
    .history-table td {
        padding: 8px 4px !important; /* Reduced padding */
    }

    /* Shrink Icons */
    .cell-icon {
        margin-right: 3px;
        font-size: 10px;
        width: 12px;
    }

    /* --- Text Sizing --- */

    /* Date */
    .col-date {
        font-size: 10px; /* Small text */
    }

    /* Business Name */
    .col-business {
        font-size: 11px;
        white-space: normal; /* Allow wrapping on very narrow screens */
        min-width: 80px;     /* Minimum width to prevent squashing */
    }

    /* Summary - Truncate heavily to save space */
    .col-summary {
        font-size: 10px;
        min-width: 120px; /* Force some width so it doesn't vanish */
        max-width: 150px;
        line-height: 1.2;
    }

    /* Mileage */
    .col-mileage .stat-badge {
        font-size: 9px;
        padding: 2px 4px;
    }
    .col-mileage i {
        font-size: 9px;
    }

    /* Labels */
    .label-pill-small {
        font-size: 8px;
        padding: 1px 4px;
        margin-right: 2px;
    }

    /* Stats (Tasks/Files) */
    .stat-badge {
        font-size: 9px;
        padding: 2px 5px;
    }
    /* Hide the icon in stats on mobile to save space if needed,
       but you requested to keep the look, so we'll just shrink them. */
    .stat-badge i {
        display: none; /* Actually, hiding icons inside badges helps readability on tiny screens */
    }

    /* Total Cost */
    .col-cost .stat-badge.total {
        font-size: 10px;
        padding: 2px 6px;
    }
}

/* --- DYNAMIC HEADER & MOBILE FABs --- */

/* 1. Default: Hide Header in History Tab */


/* 2. Mobile Floating Action Buttons (FABs) */
.mobile-fab {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 90px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    color: white;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.mobile-fab:active {
    transform: scale(0.95);
}

.fab-right {
    right: 20px;
    background-color: var(--primary-accent);
}

.fab-left {
    left: 20px;
    background-color: #6c757d; /* Grey for logs */
}

/* Badge for Log FAB */
.fab-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background-color: #dc3545;
    border-radius: 50%;
    border: 2px solid white;
}

/* --- STATE LOGIC (Desktop vs Mobile) --- */

/* STATE: EMPTY (No class needed, default is hidden) */

/* STATE: PROCESSING */
@media (min-width: 769px) {
    /* Desktop: Show Header */
    #tab-history.state-processing .card-header { display: flex; }
}
@media (max-width: 768px) {
    /* Mobile: Hide Header, Show Add & Log FABs */
    #tab-history.state-processing .card-header .page-actions  { display: none; }
    #tab-history.state-processing #mobile-fab-add { display: flex; }
    #tab-history.state-processing #mobile-fab-log { display: flex; }
}

/* STATE: DATA (Timeline Items Shown) */
@media (min-width: 769px) {
    /* Desktop: Show Header */
    #tab-history.state-data .card-header { display: flex; }
}
@media (max-width: 768px) {
    /* Mobile: Hide Header, Show ONLY Add FAB */
    #tab-history.state-data .card-header .page-actions { display: none; }
    #tab-history.state-data #mobile-fab-add { display: flex; }
}
@media (max-width: 768px) {
    /* Mobile: Hide Header, Show ONLY Add FAB */
    #tab-history.state-empty .card-header .page-actions { display: none; }
    #tab-history.state-empty #mobile-fab-add { display: flex; }
}


/* --- SHARING TAB STYLES --- */

/* 1. Hero Text */
.sharing-intro-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 25px;
    max-width: 800px;
}

/* 2. Benefits Grid */
.sharing-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background-color: #f8f9fa; /* Light grey bg */
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.benefit-icon {
    width: 40px;
    height: 40px;
    background-color: #e6f9f7; /* Light Teal */
    color: var(--primary-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.benefit-content strong {
    display: block;
    color: var(--text-primary);
    font-size: 15px;
    margin-bottom: 4px;
}

.benefit-content p {
    margin: 0;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

.sharing-divider {
    margin: 30px 0;
    border: 0;
    border-top: 1px solid #eee;
}

/* 3. Locked / Action Box */
.locked-feature-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    flex-wrap: wrap; /* Allow wrapping on mobile */
    gap: 20px;
}

.locked-feature-box.warning {
    border-left: 4px solid #ffc107;
    background-color: #fffdf5;
}

.locked-icon-circle {
    width: 50px;
    height: 50px;
    background-color: #f0f0f0;
    color: #666;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.locked-text {
    flex: 1;
    min-width: 200px; /* Ensure text doesn't squish too much */
}

.locked-text h4 {
    margin: 0 0 5px 0;
    font-size: 18px;
    color: var(--text-primary);
}

.locked-text p {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

/* 4. Mobile Responsiveness for Sharing */
@media (max-width: 768px) {
    .sharing-benefits-grid {
        grid-template-columns: 1fr; /* Stack vertically on mobile */
        gap: 12px;
    }

    .locked-feature-box {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .locked-text {
        width: 100%;
        margin-bottom: 15px;
    }

    .locked-feature-box button,
    .locked-feature-box a {
        width: 100%;
    }
}

/* --- NEW: In-Tab Update Banner --- */
.tab-update-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 15px 20px;
    margin-bottom: 24px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.update-info-text {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 14px;
}

.update-info-text i {
    color: var(--primary-accent);
    font-size: 16px;
}

.update-info-text strong {
    color: var(--text-primary);
}

/* Specific styling for the outline button in the banner */
.btn-outline-primary {
    background-color: transparent;
    border: 1px solid var(--primary-accent);
    color: var(--primary-accent);
    padding: 6px 16px;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-outline-primary:hover {
    background-color: var(--primary-accent);
    color: white;
}

/* Mobile Responsiveness for Banner */
@media (max-width: 768px) {
    .tab-update-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 15px;
    }

    .tab-update-banner button {
        width: 100%; /* Full width button on mobile */
    }
}


#history-list-container.hide-separator .history-grid::before {
    display: none !important;
    content: none !important; /* Extra safety to ensure it disappears */
    width: 0 !important;
}

/* Also hide the dots if they somehow appear in empty states */
#history-list-container.hide-separator .timeline-item::before {
    display: none !important;
}

/* ... (Keep your existing CSS above this line) ... */

/* --- NEW VEHICLE HEADER STYLES --- */

/* 1. Container Styling based on Status */
.vehicle-header.card {
    padding: 0; /* Remove default padding, inner containers handle it */
    overflow: hidden;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.vehicle-header.card.status-paid {
    background-color: #ffffff;
    border-color: #e0e0e0;
}

.vehicle-header.card.status-trial {
    background-color: #fff9db; /* Light Yellow */
    border-color: #ffeeba;
}

.vehicle-header.card.status-expired {
    background-color: #fff5f5;
    border-color: #f5c6cb;
}

/* 2. Layout Grid (Desktop) */
.vehicle-header-content {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

/* 3. Image Section */
.vh-image-container {
    position: relative;
    width: 320px; /* Increased width for Desktop */
    flex-shrink: 0;
    background-color: #eee;
    min-height: 220px;
}

.vh-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    bottom: 0px;
}

.vh-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    color: #ccc;
    background-color: #f8f9fa;
}

/* Registration Overlay (Yellow Tag) */
.vh-reg-overlay {
    position: absolute;
    top: 15px;
    right: 5px; /* Flush right */
    background-color: #ffe460; /* UK Plate Yellow */
    color: #000;
    font-family: "Charles Wright", "Arial", sans-serif;
    font-weight: 700;
    font-size: 18px;
    padding: 4px 12px;
    border-radius: 4px 0 0 4px; /* Round left corners only */
    box-shadow: -2px 2px 5px rgba(0,0,0,0.2);
    text-transform: uppercase;
    z-index: 2;
    letter-spacing: 0.12em;
}

/* --- NEW: Logo Overlay (Top Left) --- */
.vh-logo-overlay {
    position: absolute;
    top: 15px;
    left: 15px;
    height: 50px; /* Fixed height for consistency */
    width: auto;
    object-fit: contain;
    padding: 4px 8px;
    z-index: 2;
}

/* 4. Info Section */
.vh-info-container {
    padding: 20px 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Header Text Rows */
.vh-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 5px;
}

.vh-logo {
    height: 36px;
    width: auto;
    object-fit: contain;
}

.vh-make-year {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.vh-model {
    font-size: 18px;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 12px;
}

/* Trial / Purchase Pill */
.vh-trial-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #6f42c1; /* Purple */
    color: white;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    align-self: flex-start; /* Don't stretch */
    margin-bottom: 15px;
    border: none;
    box-shadow: 0 2px 5px rgba(111, 66, 193, 0.3);
}

.vh-trial-pill:hover {
    background-color: #5a32a3;
    transform: translateY(-1px);
}

/* Divider */
.vh-divider {
    height: 1px;
    background-color: #e0e0e0;
    width: 100%;
    margin: 5px 0 15px 0;
}

/* Stats Row (Pills) */
.vh-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Base Pill Style */
.vh-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 13px;
    line-height: 1.3;
}

.vh-pill-icon {
    font-size: 18px;
}

.vh-pill-text {
    display: flex;
    flex-direction: column;
}

.vh-pill-label {
    font-weight: 700;
}

.vh-pill-meta {
    font-size: 11px;
    opacity: 0.85;
    font-weight: 500;
}

/* Specific Pill Colors */
/* History: Blue */
.vh-pill.history {
    background-color: #e3f2fd;
    border-color: #bbdefb;
    color: #0d47a1;
}

/* Status: Green (Success) */
.vh-pill.success {
    background-color: #d1e7dd;
    border-color: #badbcc;
    color: #0f5132;
}

/* Status: Red (Danger) */
.vh-pill.danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #842029;
}

/* Status: Neutral/Loading */
.vh-pill.neutral {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #6c757d;
}


/* --- MOBILE RESPONSIVENESS (< 768px) --- */
@media (max-width: 500px) {
    .vehicle-header-content {
        flex-direction: column; /* Stack vertically */
    }

    /* Shrink Image */
    .vh-image-container {
        width: 100%;
        min-height: auto;
        height: 100px; /* Reduced height */
    }

    .vh-image{

        height: 100%;
    }

    .vh-reg-overlay {
        top: 10px;
        font-size: 16px;
        padding: 2px 10px;
    }
    /* NEW: Adjust logo overlay for mobile */
    .vh-logo-overlay {
        top: 10px;
        left: 10px;
        height: 50px;
    }

    /* Compact Info Section */
    .vh-info-container {
        padding: 8px;
        align-items: flex-start;
    }

    /* Text Adjustments */
    .vh-title-row {
        gap: 8px;
        margin-bottom: 2px;
    }

    .vh-logo {
        height: 28px;
    }

    .vh-make-year {
        font-size: 20px;
    }

    .vh-model {
        font-size: 14px;
        margin-bottom: 10px;
        color: #666;
    }
    .vh-divider {
        display: none;
        margin-bottom: 0px;
    }

    .vh-trial-pill {
        width: 100%; /* Full width button on mobile */
        justify-content: center;
        margin-bottom: 0px;
        padding: 3px;
    }

    /* Mobile Stats Grid */
    .vh-stats-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; /* 2 Columns */
        width: 100%;
        gap: 10px;
    }

    .card{
        margin-bottom: 2px;
    }

    .tab-content {
        padding-top: 5px;
    }


    .vh-pill {
        padding: 8px 10px;
        justify-content: flex-start;
    }

    .vh-pill-icon {
        font-size: 16px;
    }

    .vh-pill-label {
        font-size: 10px;
    }

    /* Hide dates on mobile until needed (optional per prompt "maybe hidden?")
       Currently implementing smaller text as requested in prompt "date needs to be smaller" */
    .vh-pill-meta {
        font-size: 10px;
    }
    .top-header {
        height: 50px;
    }
    .header-brand-link {
        gap: 0px;
    }
}


/* ... (Keep existing CSS) ... */

/* --- 6. Nav Tabs (Modern Pill Style) --- */
.tabs-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0 20px 0; /* Padding for scroll space */

    border-bottom: none; /* Removed old line */
    overflow-x: auto; /* Enable Horizontal Scroll */
    scrollbar-width: none; /* Firefox: Hide scrollbar */
    -ms-overflow-style: none; /* IE: Hide scrollbar */
    white-space: nowrap;

    /* Optional: Add padding to sides so first/last items aren't flush with edge on mobile */
    padding-left: 5px;
    padding-right: 5px;
}

/* Hide Scrollbar (Chrome/Safari) */
.tabs-nav::-webkit-scrollbar {
    display: none;
}

.tab-link {
    /* Reset Button Styles */
    appearance: none;
    background: none;
    border: none;

    /* Pill Base Styles */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 50px; /* Full rounded pill */
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: #ffffff; /* Default White */
    transition: all 0.2s ease;
    cursor: pointer;
    flex-shrink: 0; /* Prevent squishing */
    box-shadow: 0 2px 4px rgba(0,0,0,0.02); /* Very subtle shadow */
}

.tab-link i {
    margin-right: 8px;
    font-size: 15px;
}

/* --- STATES --- */

/* 1. Active State */
.tab-link.active {
    background-color: var(--light-accent); /* Lighter Primary Color */
    color: var(--primary-accent);
    box-shadow: 0 2px 8px rgba(0, 196, 180, 0.15); /* Subtle glow */
}

/* 2. Adjacent State (Neighbors) */
.tab-link.adjacent {
    background-color: #f1f3f5; /* Light Grey */
    color: #666;
}

/* 3. Hover State (for non-active) */
.tab-link:not(.active):hover {
    background-color: #f8f9fa;
    transform: translateY(-1px);
}

/* --- MOBILE SPECIFIC --- */
@media (max-width: 768px) {
    .tabs-nav {
        gap: 15px;
        padding: 15px; /* Larger touch area padding */

        /* Ensure the scroll container spans full width */
        width: 100vw;
        margin-left: -24px; /* Counteract container padding */
        padding-left: 24px; /* Restore visual padding */
        padding-right: 24px;
        margin-bottom: 0px;
    }

    .tab-link {
        padding: 10px 20px;
        font-size: 14px;

    }
}

/* ... (Keep existing CSS) ... */

/* --- HISTORY FILTERS --- */



.filter-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Clear All Button */
.filter-clear-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #dc3545;
    color: white;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s;
}
.filter-clear-btn:hover {
    background-color: #bb2d3b;
}

/* Active Pills List */
.active-pills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-grow: 1; /* Pushes icons to the right */
}

.filter-pill {
    background-color: #e3f2fd; /* Light Blue */
    color: #0d47a1;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s;
}

.filter-pill:hover {
    background-color: #bbdefb;
}

.filter-pill i {
    font-size: 10px;
    opacity: 0.6;
}

.filter-pill:hover i {
    opacity: 1;
}

/* Filter Actions (Right Side) */


.filter-icon-btn {
    color: #6c757d; /* Grey */
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}

.filter-icon-btn:hover, .filter-icon-btn.active {
    color: var(--text-primary);
    background-color: var(--bg-main);
}

.filter-icon-btn i {
    font-size: 16px;
}

/* Dropdown Menus */
.filter-dropdown-wrapper {
    position: relative;
}

.filter-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    z-index: 100;
    width: 250px;
    padding: 15px;
    margin-top: 10px;
}

.filter-dropdown-menu.wide {
    width: 320px;
    max-height: 400px;
    overflow-y: auto;
}

.filter-dropdown-menu h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: var(--text-primary);
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

/* Checkbox Rows */
.filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
}

.filter-option:hover {
    color: var(--primary-accent);
}

.filter-option input[type="checkbox"] {
    accent-color: var(--primary-accent);
    cursor: pointer;
}

/* Label Groups */
.label-group {
    margin-bottom: 15px;
}

.label-group h5 {
    font-size: 12px;
    text-transform: uppercase;
    color: black;
    margin: 0 0 5px 0;
    font-weight: 700;
}

/* Mobile Tweak */
@media (max-width: 768px) {
    .filter-controls {
        flex-wrap: wrap;
    }



    .filter-dropdown-menu.wide {
        width: 300px; /* Fit mobile screen better */
        right: -50px; /* Offset if needed */
    }
}

/* ... (Keep existing CSS) ... */

/* --- HISTORY FILTERS (Existing Desktop Styles) --- */



.filter-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Clear All Button */
.filter-clear-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #dc3545;
    color: white;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s;
}
.filter-clear-btn:hover {
    background-color: #bb2d3b;
}

/* Active Pills List */
.active-pills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-grow: 1;
}

.filter-pill {
    background-color: #e3f2fd;
    color: #0d47a1;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s;
}

.filter-pill:hover {
    background-color: #bbdefb;
}

.filter-pill i {
    font-size: 10px;
    opacity: 0.6;
}

.filter-pill:hover i {
    opacity: 1;
}

/* Filter Actions */
.filter-actions {
    display: flex;
    gap: 15px;
    margin-left: auto;
    position: relative;
}

.filter-icon-btn {
    color: #6c757d;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}

.filter-icon-btn:hover, .filter-icon-btn.active {
    color: var(--text-primary);
    background-color: var(--bg-main);
}

/* Dropdown Menus (Desktop Defaults) */
.filter-dropdown-wrapper {
    position: relative;
}

.filter-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    z-index: 100;
    width: 250px;
    padding: 15px;
    margin-top: 10px;
    max-height: 400px; /* Desktop Max Height */
    overflow-y: auto;
}

.filter-dropdown-menu.wide {
    width: 320px;
}

.filter-dropdown-menu h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: var(--text-primary);
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
}

.filter-option:hover {
    color: var(--primary-accent);
}

.filter-option input[type="checkbox"] {
    accent-color: var(--primary-accent);
    cursor: pointer;
}

.label-group {
    margin-bottom: 15px;
}

.label-group h5 {
    font-size: 12px;
    text-transform: uppercase;
    color: black;
    margin: 0 0 5px 0;
    font-weight: 700;
}

/* --- MOBILE BOTTOM SHEET STYLES (< 768px) --- */
@media (max-width: 768px) {
    /* 1. Backdrop Overlay (Controlled by body class) */
    body.filter-open::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5); /* Dimmed background */
        z-index: 1900;
        animation: fadeIn 0.2s ease-out;
    }

    body.filter-open {
        overflow: hidden; /* Prevent body scroll when modal is open */
    }

    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

    /* 2. Transform Dropdown to Bottom Sheet */
    .filter-dropdown-menu,
    .filter-dropdown-menu.wide {
        /* Override Desktop Positioning */
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin-top: 0 !important;

        /* Sheet Dimensions */
        width: 100% !important;
        height: 35vh !important; /* 70% of screen height */
        max-height: 70vh !important;

        /* Visuals */
        border-radius: 20px 20px 0 0 !important;
        border: none !important;
        box-shadow: 0 -5px 25px rgba(0,0,0,0.2) !important;
        z-index: 2000 !important; /* Above backdrop */
        background-color: #fff;

        /* Layout */
        display: none; /* JS toggles this */
        flex-direction: column;
        animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); /* Smooth slide up */
        padding: 0 !important; /* Remove default padding to handle scrolling better */
    }

    /* Ensure flex is applied when JS sets display:block */
    .filter-dropdown-menu[style*="display: block"] {
        display: flex !important;
    }

    @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    /* 3. Header Handle Bar & Title */
    .filter-dropdown-menu h4 {
        flex-shrink: 0; /* Don't shrink header */
        text-align: center;
        padding: 20px 15px 15px 15px;
        font-size: 16px;
        font-weight: 700;
        margin: 0;
        position: relative;
        background: #fff;
        border-radius: 20px 20px 0 0;
        z-index: 2;
    }

    /* Grey Handle Bar */
    .filter-dropdown-menu h4::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background-color: #e0e0e0;
        border-radius: 2px;
    }

    /* 4. Scrollable Content Area */
    #category-options-list,
    .label-groups-container {
        flex-grow: 1;
        overflow-y: auto;
        padding: 10px 20px 40px 20px; /* Bottom padding for safe area */
        -webkit-overflow-scrolling: touch;
    }

    /* 5. Mobile Filter Bar Layout Tweaks */
    .filter-controls {
        flex-wrap: wrap; /* Allow wrapping */
    }



    .filter-icon-btn {
        flex: 1;
        justify-content: center;
        background-color: #f8f9fa;
        padding: 10px;
    }
}

/* [In static/css/style.css] */

/* --- NEW HISTORY CARD LAYOUT --- */

/* Reset base card styles for the new layout */
.history-card-box.new-layout {
    padding: 0; /* Remove padding, inner containers handle it */
    overflow: hidden; /* Ensure header bg stays within rounded corners */
    display: flex;
    flex-direction: column;
}

/* 1. Header Styles */
.new-card-header {
    background-color: #f8f9fa; /* Light Grey */
    border-bottom: 1px solid #e9ecef;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.category-group {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--text-primary);
    font-size: 15px;
}
.category-group i {
    color: var(--primary-accent);
    font-size: 16px;
}

.header-mid-group {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 10px;
    flex-grow: 1; /* Pushes cost to the end */
}

.header-mid-group .date-val {
    font-weight: 600;
    color: #666;
}

.header-right-group .cost-val {
    font-size: 16px;
    font-weight: 800; /* Bold Black */
    color: #000;
}

/* 2. Body Styles */
.new-card-body {
    padding: 20px;
}

.biz-odo-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.business-group {
    flex: 1;
    margin-right: 15px;
}

.biz-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--text-primary);
    font-size: 15px;
    margin-bottom: 4px;
}
.biz-title i {
    color: var(--primary-accent);
}

.new-business-addr {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    padding-left: 24px; /* Align with text above (skipping icon width) */
}

/* Odometer (uses existing .odometer-badge style, just positioning here) */
.odo-group {
    flex-shrink: 0;
}

.new-summary-row {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}
.new-summary-row i {
    color: var(--primary-accent);
    margin-top: 4px;
}
.new-summary-row p {
    margin: 0;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

.new-labels-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* 3. Footer Styles */
.new-card-footer {
    border-top: 1px solid #e9ecef;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
}

.footer-left {
    font-size: 8px;
    color: #888;
    /*display: flex;*/
    gap: 4px;
    background-color: #00c4b4;
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    gap: 6px;
    align-items: center;
}
.added-label {
    font-weight: 400;
}
.added-value {
    font-weight: 700;
    color: black;
    text-transform: uppercase;
}

.footer-right {
    display: flex;
    gap: 10px;
}

/* --- MOBILE LAYOUT ADJUSTMENTS --- */
@media (max-width: 768px) {
    .new-card-header {
        flex-wrap: wrap; /* Allow items to break to new line */
        padding: 15px;
    }

    /* 1. Category (Left Top) */
    .header-left-group {
        order: 1;
        flex: 1; /* Take up available space */
    }

    /* 2. Cost (Right Top) */
    .header-right-group {
        order: 2;
    }

    /* 3. Date (New Line Bottom) */
    .header-mid-group {
        order: 3;
        width: 100%; /* Force new line */
        margin-left: 0; /* Remove desktop indent */
    }

    /* Body Tweaks */
    .new-card-body {
        padding: 15px;
    }

    .biz-odo-row {
        /* flex-direction: column; */ /* Stack business and odo */
        gap: 12px;
    }

    .odo-group {
        align-self: flex-start; /* Align left */
        margin-left: 24px; /* Align with business text */
    }

    /* Footer Tweaks */
    .new-card-footer {
        padding: 10px 15px;
    }
    .footer-left {
        flex-direction: column; /* Stack "Added By" label and value if space is tight */
        gap: 0;
    }
}

.switch { position: relative; display: inline-block; width: 50px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }
input:checked + .slider { background-color: var(--primary-accent); }
input:focus + .slider { box-shadow: 0 0 1px var(--primary-accent); }
input:checked + .slider:before { -webkit-transform: translateX(24px); -ms-transform: translateX(24px); transform: translateX(24px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }


/* --- MISC TAB STYLES --- */

/* Grid Container */
.misc-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    padding-bottom: 20px;
}

/* Grid Item (Photo) */
.misc-grid-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background-color: #eee;
    cursor: pointer;
    border: 1px solid var(--border-color);
    transition: transform 0.2s;
}

.misc-grid-item:hover {
    transform: scale(1.02);
}

.misc-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Add Button Box */
.misc-add-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
    aspect-ratio: 1 / 1;
}

.misc-add-item:hover {
    border-color: var(--primary-accent);
    color: var(--primary-accent);
    background-color: var(--light-accent);
}

.misc-add-item i {
    font-size: 32px;
    margin-bottom: 8px;
}

/* Delete Button */
.misc-delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 28px;
    height: 28px;
    background-color: rgba(255,255,255,0.9);
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    color: #dc3545;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
}

.misc-delete-btn:hover {
    background-color: #dc3545;
    color: white;
}

/* Paperwork Item Specifics */
.paperwork-item {
    background-color: #fff;
}
.paperwork-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: var(--text-primary);
    padding: 10px;
}
.paperwork-icon {
    font-size: 40px;
    margin-bottom: 10px;
    color: #666;
}
.paperwork-icon.pdf {
    color: #dc3545;
}
.paperwork-name {
    font-size: 12px;
    text-align: center;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- MOBILE SPECIFIC: Horizontal Scroll --- */
@media (max-width: 768px) {
    /* Turn Grid into Horizontal Scroll Strip */
    .misc-grid-container {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        gap: 15px;
        scroll-snap-type: x mandatory;
        padding-bottom: 15px; /* Scrollbar space */
        -webkit-overflow-scrolling: touch;
        margin-right: -20px; /* Offset parent padding */
        padding-right: 20px;
    }

    .misc-grid-item, .misc-add-item {
        flex: 0 0 140px; /* Fixed width items */
        scroll-snap-align: start;
        aspect-ratio: 1 / 1;
    }
}

/* --- LIGHTBOX STYLES --- */
.lightbox-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.lightbox-content {
    width: 100%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 2001;
}

.lightbox-controls {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 20px;
    color: white;
}

.lightbox-prev, .lightbox-next {
    background: none;
    border: 2px solid rgba(255,255,255,0.3);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.lightbox-prev:hover, .lightbox-next:hover {
    background: rgba(255,255,255,0.2);
    border-color: white;
}

.lightbox-counter {
    font-size: 16px;
    font-weight: 500;
}

/* Toggle Views */
.sharing-desktop-view { display: block; }
.sharing-mobile-view { display: none; }

/* Mobile Styles */
@media (max-width: 768px) {
    .sharing-desktop-view { display: none; }
    .sharing-mobile-view { display: flex; flex-direction: column; gap: 15px; }

    .sharing-card {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    }

    /* Top Row: Date & Expiry */
    .sc-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        font-size: 14px;
    }
    .sc-date {
        color: #555;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* Middle Row: Views & Config */
    .sc-stats-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f8f9fa;
        padding: 10px 12px;
        border-radius: 6px;
        margin-bottom: 15px;
    }
    .sc-views {
        color: #666;
        font-size: 14px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .sc-config {
        display: flex;
        gap: 12px;
        font-size: 16px;
    }

    /* Bottom Row: Actions */
    .sc-actions {
        display: flex;
        justify-content: space-between; /* Spreads icons evenly */
        gap: 8px;
        border-top: 1px solid #eee;
        padding-top: 12px;
    }
    .sc-actions .btn {
        flex: 1; /* Makes buttons touch-friendly */
        padding: 8px 0;
    }
}

/* static/css/style.css */

/* =========================================
   PRINT STYLES
   ========================================= */
@media print {
    /* 1. HIDE GLOBAL UI ELEMENTS */
    .sidebar,
    .sidebar-toggle-btn,
    .user-menu,
    .header-credits,
    .header-right,
    .mobile-bottom-nav,
    .mobile-header,
    .tabs-nav,
    .tab-update-banner,
    .page-actions, /* Hides Grid/Compact toggles & Add Service button */
    .layout-toggle,
    .history-filter-container,
    .admin-grid,
    .purchase-vehicle-btn,
    .update-vehicle-data-btn,
    .btn, /* Hides all standard buttons */
    .misc-add-item,
    .misc-delete-btn,
    #mobile-fab-add,
    #mobile-fab-log,
    #cookie-consent-banner {
        display: none !important;
    }

    /* 2. RESET LAYOUT FOR A4 PAGE */
    body {
        background: white;
        font-size: 12px;
        color: black;
    }

    .main-container {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .page-header {
        padding: 0;
        margin: 0 0 20px 0;
    }

    /* 3. SHOW ALL TABS VERTICALLY */
    .tab-content {
        display: block !important; /* Force all tabs to show */
        opacity: 1 !important;
        visibility: visible !important;
        margin-bottom: 30px;
        /* FIX: Allow the content container to split across pages */
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    /* Hide the actual Admin Tab content container entirely */
    #tab-admin, #tab-sharing, #tab-misc {
        display: none !important;
    }

    /* 4. ADD SECTION HEADINGS (Fake Headers) */
    /* We use :before to create headers since we removed the tabs */
    #tab-history:before { content: "Service History"; display: block; font-size: 18px; font-weight: bold; border-bottom: 2px solid #ddd; margin-bottom: 15px; color: #333; }
    #tab-details:before { content: "Vehicle Details"; display: block; font-size: 18px; font-weight: bold; border-bottom: 2px solid #ddd; margin-bottom: 15px; margin-top: 30px; color: #333; }
    #tab-technical:before { content: "Technical Specifications"; display: block; font-size: 18px; font-weight: bold; border-bottom: 2px solid #ddd; margin-bottom: 15px; margin-top: 30px; color: #333; }
    #tab-mot:before { content: "MOT History"; display: block; font-size: 18px; font-weight: bold; border-bottom: 2px solid #ddd; margin-bottom: 15px; margin-top: 30px; color: #333; }

/* 5. HISTORY VIEW: SWAP GRID TO COMPACT TABLE */
    /* Force Grid Hidden */
    #history-layout-grid, .history-grid { display: none !important; }

    /* Force Compact Table Visible */
    #history-layout-compact, .history-table-container {
        display: block !important;
        opacity: 1 !important;
        height: auto !important;
    }

.history-table { width: 100%; border-collapse: collapse; }
    .history-table th { background-color: #f4f4f4; color: #000; font-weight: bold; border: 1px solid #ddd; padding: 6px; }
    .history-table td { border: 1px solid #ddd; padding: 6px; text-align: left; font-size: 10px; }
    .history-table .file-col { display: none; }

    /* FIX: Prevent individual rows from splitting in half, but allow the table to break between rows */
    .history-table tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }


    /* 6. MOT SPECIFICS - EXPAND ALL ROWS */
.mot-desktop-view { display: block !important; }
    .mot-mobile-view { display: none !important; }
    .mot-details-row { display: table-row !important; }
    .mot-details-content { display: block !important; padding: 5px 10px; background: none; }
    .mot-toggle-icon, .fa-chevron-down { display: none !important; }

    .status-pass { color: black !important; font-weight: bold; }
    .status-fail { color: black !important; font-weight: bold; text-decoration: underline; }


    /* Hide the chevron icon since it's not clickable on paper */
    .fa-chevron-down { display: none !important; }


}

/* --- REQUESTS PAGE STYLES --- */

/* Modern Table Styling */
.modern-table th {
    background-color: #f8f9fa;
    color: #666;
    font-weight: 600;
    padding: 12px 15px;
    border-bottom: 2px solid #eee;
}
.modern-table td {
    padding: 12px 15px;
    vertical-align: middle;
}

/* Status Pills */
.status-pill {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
}
.status-pill.pending { background: #fff3cd; color: #856404; }
.status-pill.accepted { background: #d4edda; color: #155724; }
.status-pill.declined { background: #f8d7da; color: #721c24; }
.status-pill.escalated { background: #e2e3e5; color: #383d41; }
.status-pill.owner_changed { background: #f8d7da; color: #721c24; }

/* Vehicle Badge in Table */
.vehicle-badge  {
    background-color: #ffe460;
    color: var(--primary-dark);
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-block;
    font-family: "Charles Wright", "Arial", sans-serif;
    letter-spacing: 0.12em;
        box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
}

/* Pagination Footer */
.pagination-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-top: 1px solid #eee;
    background: #fafafa;
}
.page-count { font-size: 0.9em; color: #777; }
.page-controls .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #555;
    text-decoration: none;
    margin-left: 5px;
}
.page-controls .page-link:hover { background: #eee; }

/* Icon Buttons */
.btn-icon {
    width: 32px; height: 32px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center; justify-content: center;
    transition: 0.2s;
    margin-left: 5px;
}
.btn-icon.success { background: #e6f9ed; color: #28a745; }
.btn-icon.success:hover { background: #28a745; color: white; }
.btn-icon.danger { background: #ffeef0; color: #dc3545; }
.btn-icon.danger:hover { background: #dc3545; color: white; }


/* --- MOBILE CARD VIEW (RESPONSIVE) --- */
.mobile-card-list { display: none; } /* Hidden by default on Desktop */

@media (max-width: 768px) {
    .desktop-only-table { display: none !important; } /* Hide Table */
    .mobile-card-list { display: block !important; padding: 10px; } /* Show Cards */

    .mobile-req-card {
        background: white;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    }
    .mrc-header {
        display: flex; justify-content: space-between; align-items: center;
        margin-bottom: 10px; border-bottom: 1px solid #f0f0f0; padding-bottom: 10px;
    }

    .mrc-body p { margin: 5px 0; font-size: 0.95em; color: #555; }


    /* Vehicle Badge in Table */
.mrc-reg  {
    background-color: #ffe460;
    color: var(--primary-dark);
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-block;
    font-family: "Charles Wright", "Arial", sans-serif;
    letter-spacing: 0.12em;
        box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
}

    .mrc-actions {
        margin-top: 15px;
        display: flex; gap: 10px;
        justify-content: space-around;
    }

    .vh-image-container.dashboard-variant {
    width: 100% !important; /* Override fixed width from vehicle_detail */
    height: 120px;
    border-radius: 0; /* Flush with card edges */
    background-color: #f0f0f0;
}
}

/* Sidebar Notification Badge */
.nav-notification-badge {
    background-color: #dc3545; /* Bootstrap Danger Red */
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px; /* Pill shape */
    margin-left: auto; /* Pushes badge to the far right of the flex container */
    min-width: 20px;
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

/* Optional: Adjust for collapsed sidebar if needed */
.sidebar.collapsed .nav-link .nav-notification-badge {
    display: flex !important; /* Force it to show (overrides span hidden rule) */
    position: absolute;
    top: 2px;
    right: 2px;
    margin: 0;
    padding: 0;
    width: 18px;
    height: 18px;
    font-size: 10px;
    justify-content: center;
    align-items: center;
    border: 2px solid #ffffff; /* White border creates a "cutout" look against the icon */
    border-radius: 50%;
}

/* --- DASHBOARD CARD OVERRIDES --- */

.vh-image-container.dashboard-variant {
    width: 100% !important; /* Override fixed width from vehicle_detail */
    height: 200px;
    border-radius: 0; /* Flush with card edges */
    background-color: #f0f0f0;
}

/* 2. Adjust Logo Overlay Position for Dashboard */
/* We push it down slightly so it doesn't clash with the delete button if needed,
   or keep standard if delete button is styled to float above. */
.dashboard-variant .vh-logo-overlay {
    top: 10px;
    left: 10px;
    height: 40px; /* Slightly smaller for dashboard cards */
}

/* 3. Adjust Reg Overlay for Dashboard */
.dashboard-variant .vh-reg-overlay {
    top: 10px;
    right: 10px; /* Flush right */
    font-size: 14px;
    padding: 3px 8px;
}

/* 4. Trash / Delete Button */


.card-delete-btn:hover {
    background-color: #dc3545;
    color: white;
    transform: scale(1.1);
}



/* 5. Stats Row Adjustments for Cards */
.car-card .vh-stats-row {
    margin-top: auto; /* Push to bottom */
}

/* Hide extra meta info on dashboard pills to save space if needed */
.car-card .vh-pill-meta {
    display: none;
}
.car-card .vh-pill:hover .vh-pill-meta {
    display: block; /* Show on hover */
    position: absolute;
    background: white;
    padding: 2px 5px;
    border: 1px solid #ccc;
    top: 100%;
    z-index: 10;
}

/* --- DASHBOARD CARD OVERRIDES --- */

/* 1. Ensure the card acts as a positioning container */
.car-card {
    position: relative; /* Critical for absolute positioning of the delete button */
    /* Keep existing styles (display, flex-direction, etc.) */
}

/* 2. Move Delete Button to Bottom Right */
.card-delete-btn {
    position: absolute;
    bottom: auto; /* Distance from bottom */
    left: 0px;  /* Distance from right */
    top: 0px;    /* Reset top */
    right: auto;   /* Reset left */

    width: 32px;
    height: 32px;
    color: #dc3545;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20; /* Ensure it stays on top of content */
    transition: all 0.2s ease;
}

.card-delete-btn:hover {
    background-color: #dc3545;
    color: white;
    transform: scale(1.1);
}

/* 3. Image Container & Overlays (Keep these consistent) */
.vh-image-container.dashboard-variant {
    width: 100% !important;
    height: 200px;
    border-radius: 0;
    background-color: #f0f0f0;
}

.dashboard-variant .vh-logo-overlay {
    top: 20px;
    left: 10px;
    height: 40px;
}

.dashboard-variant .vh-reg-overlay {
    top: 10px;
    right: 0;
    font-size: 14px;
    padding: 3px 8px;
}

/* 4. Adjust Content Spacing */
/* Add extra padding to the bottom of the content so the button doesn't cover text */
.car-card-content {
    padding-bottom: 20px;
}

@media (max-width: 768px) {


    .vh-image-container.dashboard-variant {
    width: 100% !important; /* Override fixed width from vehicle_detail */
    height: 150px;
    border-radius: 0; /* Flush with card edges */
    background-color: #f0f0f0;
}
}

/* --- NOTIFICATIONS PAGE --- */

.notification-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notif-card {
    display: flex;
    align-items: flex-start;
    background: white;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* Unread State: Blue Border + Slight Background */
.notif-card.unread {
    background-color: #fcfdff;
    border-left: 4px solid var(--primary-color); /* Blue accent */
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

/* 1. Icon Column */
.notif-icon-col {
    flex: 0 0 40px;
    margin-right: 15px;
}
.notif-icon-circle {
    width: 40px;
    height: 40px;
    background-color: #f0f2f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-dark);
    font-size: 18px;
}
.notif-card.unread .notif-icon-circle {
    background-color: #e6f0ff; /* Light blue for unread */
    color: var(--primary-color);
}

/* 2. Content Column */
.notif-content-col {
    flex: 1;
    cursor: pointer; /* Indicates you can click to read */
}
.notif-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}
.notif-subject {
    font-weight: 600;
    font-size: 16px;
    color: #333;
}
.notif-card.unread .notif-subject {
    color: var(--primary-color); /* Highlight subject if unread */
}
.notif-date {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    margin-left: 10px;
}
.notif-body {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

/* 3. Action Column */
.notif-action-col {
    flex: 0 0 30px;
    margin-left: 10px;
    display: flex;
    justify-content: center;
}
.notif-delete-btn {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
    transition: color 0.2s;
}
.notif-delete-btn:hover {
    color: #dc3545; /* Red on hover */
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
    background: #fafafa;
    border-radius: 12px;
    border: 2px dashed #eee;
}
.empty-state i {
    font-size: 40px;
    margin-bottom: 15px;
    opacity: 0.5;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 576px) {
    .notif-card {
        padding: 12px;
    }

    .notif-icon-col {
        flex: 0 0 32px;
        margin-right: 10px;
    }
    .notif-icon-circle {
        width: 32px; height: 32px; font-size: 14px;
    }

    .notif-subject { font-size: 14px; }
    .notif-body { font-size: 13px; }

    .notif-date {
        font-size: 11px;
        position: absolute;
        bottom: 12px;
        right: 12px;
    }
    .notif-content-col {
        padding-bottom: 15px; /* Make room for date at bottom */
    }
}



/* --- SIGNUP PAGE LAYOUT (Refined) --- */

/* 1. Wrapper: Uses Flexbox, but allows scrolling on mobile */
.signup-page-wrapper {
    display: flex;
    flex-direction: row;
    min-height: 100vh; /* Allow it to grow if content is tall */
    width: 100%;
    background: white;

    /* On desktop, we lock it to look like a dashboard */
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 9999;
}

/* 2. Left Column (Image) */
.signup-image-col {
    flex: 0 0 65%; /* Slightly smaller than 70% to give form more room */
    position: relative; /* Needed for text overlay */
    background-image: url('https://cshpublic.s3.eu-west-2.amazonaws.com/home/view_02.png');
    background-size: cover;
    background-position: center;
}

/* New Text Overlay on Image */
.image-overlay-text {
    position: absolute;
    bottom: 40px;
    left: 40px;
    color: white;
    z-index: 2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

.image-overlay-text h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}

.image-overlay-text p {
    font-size: 18px;
    font-weight: 400;
    opacity: 0.9;
    margin: 0;
}

/* Gradient overlay to make text readable */
.signup-image-col::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    z-index: 1;
}

/* 3. Right Column (Form) */
.signup-form-col {
    flex: 1;
    padding: 40px;
    overflow-y: auto; /* Scroll ONLY the form side on desktop */
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: white;
}

/* Branding */
.signup-header {
    margin-bottom: 20px;
}
.brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 20px;
    color: var(--primary-color, #333);
}

/* Intro Text */
.signup-intro h1 {
    font-size: 24px;
}
.signup-intro p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 25px;
}
.learn-more-link {
    color: var(--primary-accent, #007bff);
    text-decoration: underline;
}

/* Form Styling */
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 5px;
}
.signup-form input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

/* First/Last Name Row */
.form-row {
    display: flex;
    gap: 10px;
}
.form-group.half {
    flex: 1;
}

/* Legal Text */
.legal-text {
    font-size: 12px;
    color: #888;
    margin-bottom: 20px;
    line-height: 1.4;
}

/* Buttons */
.btn-block {
    width: 100%;
    display: block;
}
.btn-lg {
    padding: 12px;
    font-size: 16px;
}
.google-btn {
    border: 1px solid #ddd;
    background: white;
    color: #333;
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* Divider */
.divider {
    text-align: center;
    margin: 20px 0;
    position: relative;
}
.divider span {
    background: white;
    padding: 0 10px;
    color: #999;
    font-size: 12px;
    position: relative;
    z-index: 1;
}
.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid #eee;
    z-index: 0;
}

/* Footer */
.signup-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
}

/* --- MOBILE RESPONSIVENESS (Max Width 992px) --- */
@media (max-width: 992px) {

    /* Unlock the page so it scrolls naturally */
    .signup-page-wrapper {
        position: relative; /* Not fixed anymore */
        flex-direction: column;
        height: auto;
        overflow: visible; /* Allow body scroll */
    }

    /* Image Section */
    .signup-image-col {
        flex: none;
        height: 35vh; /* Takes up top 35% of screen */
        width: 100%;
    }

    /* Adjust Overlay Text for Mobile */
    .image-overlay-text {
        bottom: 40px;
        left: 20px;
    }
    .image-overlay-text h2 { font-size: 24px; }
    .image-overlay-text p { font-size: 15px; }

    /* Form Section */
    .signup-form-col {
        flex: none; /* Do not flex, just take up space */
        width: 100%;
        height: auto; /* Grow as big as needed */
        padding: 30px 20px 50px 20px; /* Extra bottom padding for scrolling */

        /* Modern styling: Pull it up slightly over the image */
        border-radius: 25px 25px 0 0;
        margin-top: -25px;
        z-index: 10;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    }

    /* Ensure inputs are easy to tap */
    .signup-form input {
        font-size: 16px; /* Prevents iOS zoom on focus */
        padding: 12px;
    }


}

/* --- OFFICIAL GOOGLE SIGN IN BUTTON --- */

.google-btn-official {
    display: flex;
    align-items: center;
    justify-content: center; /* Center content */
    background-color: #ffffff;
    border: 1px solid #dadce0;
    border-radius: 40px; /* Pill shape (use 4px for rectangle) */
    padding: 3px; /* Thin padding to create the wrapper effect */
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
    width: 100%; /* Full width */
    max-width: 400px; /* Optional cap if you want */
    margin: 0 auto;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.google-btn-official:hover {
    background-color: #f7f8f8; /* Light gray on hover */
    border-color: #d2e3fc;
    box-shadow: 0 1px 3px rgba(66, 133, 244, 0.1);
    text-decoration: none;
}

.google-btn-official:active {
    background-color: #eeeeee;
}

/* The Icon Wrapper (White circle/box on left) */
.google-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Circle */
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

/* The SVG Icon itself */
.google-icon {
    width: 20px;
    height: 20px;
    display: block;
}

/* The Text */
.google-btn-text {
    color: #3c4043;
    font-size: 14px;
    font-family: 'Roboto', arial, sans-serif;
    font-weight: 500;
    letter-spacing: 0.2px;
    flex-grow: 1; /* Helps centering if needed */
    text-align: center;
    padding-right: 40px; /* Balance the icon width so text is truly centered */
}

/* Mobile Tweak: Ensure it fits comfortably */
@media (max-width: 576px) {
    .google-btn-official {
        width: 100%;
    }
}

/* --- LOGIN PAGE SPECIFIC --- */

/* Override the background image specifically for the Login Variant */
.signup-image-col.login-variant {
    background-image: url('https://cshpublic.s3.eu-west-2.amazonaws.com/home/view_in_01.png');
}

/* Ensure form inputs on login look standard */
.login input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 5px; /* Slight spacing if help text exists */
}

/* --- PASSWORD RESET SPECIFIC --- */

/* Override background image for Reset Password page */
.signup-image-col.reset-variant {
    background-image: url('https://cshpublic.s3.eu-west-2.amazonaws.com/home/view_lost_01.png');
}

/* Ensure the email input styling matches the other forms */
.reset-password input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 5px;
}

/* --- SOCIAL BUTTONS (Facebook & Apple) --- */

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    border-radius: 40px; /* Pill shape matches Google */
    padding: 10px; /* Tweak to match height of Google btn */
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: opacity 0.2s;
    text-decoration: none;
    position: relative;
    height: 48px; /* Force consistent height */
}

/* Facebook Blue */
.facebook-btn {
    background-color: #1877F2;
    color: white;
}
.facebook-btn:hover {
    background-color: #166fe5;
}

/* Apple Black */
.apple-btn {
    background-color: #000000;
    color: white;
}
.apple-btn:hover {
    background-color: #222222;
}

/* Ensure icons are aligned perfectly */
.social-btn i {
    position: absolute;
    left: 18px; /* Approx where the Google G sits */
}