/* ---------------------------------------------------------------------------
   Shared layout styles.

   Extracted from an inline <style> block in fragments/layout.html. At ~23KB it
   was re-sent on every navigation - 47 templates include that head fragment -
   instead of being cached once. The block was pure static CSS; it contained no
   Thymeleaf expressions, so extraction is a straight move.

   LOAD ORDER MATTERS: this file must stay between critical.css and custom.css.
   custom.css is the shared visual system and deliberately loads last so it can
   normalise these older page styles.
   --------------------------------------------------------------------------- */

        /* Inline only the most critical styles for first paint */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f5f7fa;
            min-height: 100vh;
        }

        .header {
            background: #2c3e50;
            color: white;
            padding: 1rem 2rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1001;
            height: 70px;
            box-sizing: border-box;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 1.5rem;
            font-weight: bold;
        }

        .logo img {
            height: 50px;
            width: auto;
            border-radius: 4px;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .main-container {
            display: flex;
            margin-top: 70px;
            min-height: calc(100vh - 70px);
        }

        .sidebar {
            width: 280px;
            background: #34495e;
            color: white;
            padding: 0;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
            position: fixed;
            top: 70px;
            left: 0;
            height: calc(100vh - 70px);
            overflow-y: auto;
            z-index: 1000;
        }

        .sidebar-section {
            border-bottom: 1px solid #4a5f7a;
        }

        .sidebar-header {
            background: #2c3e50;
            padding: 1rem 1.5rem;
            font-weight: 600;
            font-size: 1.1rem;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background 0.3s;
        }

        .sidebar-header:hover {
            background: #1a252f;
            cursor: pointer;
        }

        .sidebar-header.active {
            background: #3498db;
        }

        .sidebar-items {
            max-height: 0;
            overflow: hidden;
            background: #34495e;
            transition: max-height 0.4s ease-in-out;
        }

        .sidebar-items.show {
            max-height: 500px;
        }

        .sidebar-item {
            padding: 0.75rem 2rem;
            cursor: pointer;
            transition: all 0.3s;
            border-bottom: 1px solid #4a5f7a;
            font-size: 0.95rem;
        }

        .sidebar-item:hover {
            background: #3498db;
            color: white;
        }

        .sidebar-item.active {
            background: #3498db;
            border-left: 4px solid #fff;
            color: white;
        }

        .sidebar-item:active {
            background: #2980b9;
        }

        /* Ensure anchor tags with sidebar-item class have proper styling */
        a.sidebar-item {
            color: inherit;
            text-decoration: none;
            display: block;
        }
        
        a.sidebar-item:hover {
            color: white;
            text-decoration: none;
        }
        
        a.sidebar-item:visited {
            color: inherit;
        }

        .sidebar-section-submenu {
            position: relative;
        }

        .sidebar-submenu-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .sidebar-submenu-items {
            max-height: 0;
            overflow: hidden;
            background: #2c3e50;
            transition: max-height 0.3s ease-in-out;
            z-index: 999;
        }

        .sidebar-submenu-items.show {
            max-height: 300px;
        }

        .sidebar-submenu-item {
            padding: 0.75rem 3rem !important;
            background: #2c3e50 !important;
            font-size: 0.9rem;
            border-left: 2px solid #3498db;
        }

        .sidebar-submenu-item:hover {
            background: #1a252f !important;
            color: white;
        }

        .content {
            margin-left: 280px;
            padding: 2rem;
            flex: 1;
            background: #f5f7fa;
            min-height: calc(100vh - 70px);
            box-sizing: border-box;
        }

        .breadcrumb {
            background: #fff;
            padding: 1rem 1.5rem;
            border-radius: 8px;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            font-size: 0.9rem;
            color: #666;
            position: relative;
            z-index: 2;
        }

        .breadcrumb span {
            color: #3498db;
            font-weight: 500;
        }

        .btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 500;
            transition: all 0.3s;
        }

        .btn-primary {
            background: #007bff;
            color: white;
        }

        .btn-primary:hover {
            background: #0056b3;
        }

        .btn-success {
            background: #28a745;
            color: white;
        }

        .btn-success:hover {
            background: #1e7e34;
        }

        .btn-warning {
            background: #ffc107;
            color: #212529;
            border: 1px solid #ffc107;
        }

        .btn-warning:hover {
            background: #e0a800;
            border-color: #d39e00;
            color: #212529;
        }

        .btn-danger {
            background: #dc3545;
            color: white;
        }

        .btn-danger:hover {
            background: #c82333;
        }

        .card {
            background: #fff;
            border-radius: 10px;
            padding: 1.5rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
        }

        .card-header {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #333;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-row {
            display: flex;
            gap: 1rem;
        }

        .form-col {
            flex: 1;
        }

        label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: #333;
        }

        input, select, textarea {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid #e9ecef;
            border-radius: 5px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }

        input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: #007bff;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }

        .table th, .table td {
            padding: 0.75rem;
            text-align: left;
            border-bottom: 1px solid #dee2e6;
        }

        .table th {
            background: #f8f9fa;
            font-weight: 600;
        }

        .table tbody tr:hover {
            background: #f8f9fa;
        }

        .btn-small {
            padding: 0.25rem 0.5rem;
            font-size: 0.8rem;
        }

        .search-bar {
            margin-bottom: 1rem;
        }

        .search-bar input {
            width: 100%;
            max-width: 400px;
            padding: 0.75rem;
            border: 2px solid #e9ecef;
            border-radius: 25px;
            font-size: 0.95rem;
        }

        .search-bar input:focus {
            border-color: #3498db;
        }

        /* Statistics Cards */
        .stats-container {
            display: flex; 
            gap: 1rem; 
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }

        .stats-card {
            flex: 1; 
            text-align: center; 
            padding: 1rem;
            min-width: 200px;
        }

        /* Modal Improvements */
        .modal-content {
            position: relative;
            z-index: 1002;
        }

        /* Ensure proper stacking */
        .sidebar-header {
            position: relative;
            z-index: 10;
        }

        .sidebar-items {
            position: relative;
            z-index: 9;
        }

        /* Mobile Menu Button */
        .mobile-menu-btn {
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 4px;
            transition: background 0.3s;
            display: none; /* Hidden by default on desktop; shown via media query */
        }

        .mobile-menu-btn:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        /* Device-specific classes */
        .mobile-device .desktop-only {
            display: none !important;
        }

        .desktop-device .mobile-only {
            display: none !important;
        }

        .tablet-device .mobile-only,
        .tablet-device .desktop-only {
            display: none !important;
        }

        /* Mobile-specific improvements */
        .mobile-device .btn {
            min-height: 48px;
            font-size: 1rem;
        }

        .mobile-device input,
        .mobile-device select,
        .mobile-device textarea {
            min-height: 48px;
            font-size: 16px; /* Prevents zoom on iOS */
        }

        /* Mobile-First Responsive Design */
        
        /* Touch and Mobile Optimizations */
        * {
            -webkit-tap-highlight-color: transparent;
        }
        
        /* Improve touch targets */
        .btn, .sidebar-item, .sidebar-header {
            min-height: 44px;
            display: flex;
            align-items: center;
        }

        /* Mobile Styles (Default - Mobile First) */
        @media (max-width: 768px) {
            /* Mobile Header */
            .header {
                padding: 0.75rem 1rem;
                height: 60px;
                position: relative;
            }
            
            .logo {
                font-size: 1.2rem;
            }

            .logo img {
                height: 40px;
            }
            
            .user-info {
                font-size: 0.9rem;
            }
            
            .user-info span {
                display: none; /* Hide "Welcome" text on mobile */
            }
            
            .mobile-menu-btn {
                display: block !important;
            }
            
            /* Mobile Sidebar - Collapsible */
            .sidebar {
                width: 100%;
                height: auto;
                position: relative;
                top: 0;
                left: 0;
                z-index: 999;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.3s ease-in-out;
                background: #34495e;
            }
            
            .sidebar.mobile-open {
                position: fixed;
                top: 60px; /* match mobile header height */
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                height: calc(100vh - 60px);
                max-height: none;
                overflow-y: auto;
                z-index: 1000;
                transform: translateX(0) !important; /* override critical.css */
            }

            /* When mobile menu is open, allow only toggled sections to expand */
            .sidebar.mobile-open .sidebar-items.show {
                max-height: 10000px; /* large to avoid clipping */
            }

            .sidebar.mobile-open .sidebar-submenu-items.show {
                max-height: 5000px; /* large to avoid clipping */
            }
            
            .main-container {
                flex-direction: column;
                margin-top: 60px;
            }
            
            .content {
                margin-left: 0;
                padding: 1rem;
                width: 100%;
            }
            
            /* Mobile Cards */
            .card {
                padding: 1rem;
                margin-bottom: 1rem;
                border-radius: 8px;
            }
            
            .card-header {
                font-size: 1.1rem;
                margin-bottom: 0.75rem;
            }
            
            /* Mobile Forms */
            .form-row {
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .form-col {
                margin-bottom: 1rem;
            }
            
            input, select, textarea {
                padding: 0.75rem;
                font-size: 16px; /* Prevents zoom on iOS */
            }
            
            /* Mobile Statistics */
            .stats-container {
                flex-direction: column;
                gap: 0.75rem;
            }

            .stats-card {
                min-width: auto;
                margin-bottom: 0;
                padding: 1rem;
            }
            
            /* Mobile Buttons */
            .btn {
                padding: 0.75rem 1rem;
                width: 100%;
                margin-bottom: 0.5rem;
                font-size: 0.95rem;
            }
            
            .btn-small {
                padding: 0.5rem 0.75rem;
                font-size: 0.85rem;
            }
            
            /* Mobile Tables - Responsive with Horizontal Scroll */
            .table-responsive {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                border: 1px solid #dee2e6;
                border-radius: 8px;
                margin-bottom: 1rem;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            
            .table-responsive .table {
                margin-bottom: 0;
                min-width: 700px; /* Minimum width to ensure proper table layout */
                font-size: 0.8rem;
            }
            
            .table-responsive .table th,
            .table-responsive .table td {
                padding: 0.75rem 0.5rem;
                white-space: nowrap;
                border-color: #dee2e6;
            }
            
            .table-responsive .table th {
                background: #f8f9fa;
                position: sticky;
                top: 0;
                z-index: 2;
                font-weight: 600;
                color: #495057;
            }
            
            /* Scroll indicator for mobile tables */
            .table-responsive::after {
                content: "← Swipe to view more →";
                display: block;
                text-align: center;
                padding: 0.5rem;
                background: #e9ecef;
                color: #6c757d;
                font-size: 0.75rem;
                border-top: 1px solid #dee2e6;
            }
            
            /* Hide scroll indicator when table is fully scrolled */
            .table-responsive.scrolled::after {
                display: none;
            }
            
            /* Mobile table buttons */
            .table .btn-small {
                padding: 0.25rem 0.5rem;
                font-size: 0.75rem;
                min-height: auto;
                white-space: nowrap;
            }
            
            /* Mobile Card-based table alternative */
            .mobile-card-view {
                display: none;
            }
            
            .mobile-card-view .dealer-card {
                margin-bottom: 1rem;
                padding: 1rem;
                border: 1px solid #dee2e6;
                border-radius: 8px;
                background: white;
            }
            
            .mobile-card-view .dealer-card h6 {
                color: #007bff;
                margin-bottom: 0.5rem;
                font-weight: 600;
            }
            
            .mobile-card-view .dealer-card p {
                margin-bottom: 0.25rem;
                font-size: 0.9rem;
            }
            
            .mobile-card-view .dealer-actions {
                margin-top: 1rem;
                display: flex;
                gap: 0.5rem;
                flex-wrap: wrap;
            }
            
            .mobile-card-view .dealer-actions .btn {
                flex: 1;
                min-width: 100px;
            }
            
            /* Mobile Breadcrumb */
            .breadcrumb {
                padding: 0.75rem 1rem;
                font-size: 0.85rem;
            }
            
            /* Mobile Sidebar Items */
            .sidebar-item {
                padding: 1rem 1.5rem;
                font-size: 0.95rem;
                border-bottom: 1px solid #4a5f7a;
            }
            
            .sidebar-submenu-item {
                padding: 0.75rem 2rem !important;
                font-size: 0.9rem;
            }
            
            /* Mobile Modal */
            .modal-content {
                width: 95%;
                margin: 5% auto;
                padding: 1rem;
                max-height: 90vh;
            }
            
            /* Mobile Location/GPS specific */
            .location-card {
                text-align: center;
                padding: 2rem 1rem;
            }
            
            .location-btn {
                font-size: 1.1rem;
                padding: 1rem 2rem;
                border-radius: 8px;
                width: 100%;
                max-width: 300px;
            }
            
            /* Mobile Image Upload */
            input[type="file"] {
                padding: 1rem;
                border: 2px dashed #007bff;
                border-radius: 8px;
                background: #f8f9fa;
                text-align: center;
            }
        }

        /* Small Mobile Styles */
        @media (max-width: 480px) {
            /* Adjust overlay top for smaller header */
            .sidebar.mobile-open {
                top: 55px;
                height: calc(100vh - 55px);
            }
            .header {
                padding: 0.5rem;
                height: 55px;
            }
            
            .logo {
                font-size: 1rem;
            }

            .logo img {
                height: 35px;
            }
            
            .main-container {
                margin-top: 55px;
            }
            
            .content {
                padding: 0.5rem;
            }
            
            .card {
                padding: 0.75rem;
                border-radius: 6px;
            }
            
            .card-header {
                font-size: 1rem;
            }
            
            input, select, textarea {
                padding: 0.6rem;
            }
            
            .btn {
                padding: 0.65rem 0.85rem;
                font-size: 0.9rem;
            }
            
            .stats-card {
                padding: 0.75rem;
            }
        }

        @media (min-width: 769px) and (max-width: 1024px) {
            .sidebar {
                width: 250px;
            }
            
            .content {
                margin-left: 250px;
                padding: 1.5rem;
            }
            
            .stats-container {
                gap: 1rem;
            }
            
            .form-row {
                gap: 1rem;
            }
        }

        /* Desktop Styles */
        @media (min-width: 1025px) {
            /* Desktop specific styles already defined above */
            .sidebar {
                width: 280px;
            }
            
            .content {
                margin-left: 280px;
                padding: 2rem;
            }
        }

        /* Improved Stats Container - Global Styles */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .stats-card {
            background: white;
            border: 1px solid #e9ecef;
            border-radius: 10px;
            padding: 1.25rem;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: transform 0.2s, box-shadow 0.2s;
            position: relative;
            overflow: hidden;
            min-height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .stats-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        .stats-number {
            font-size: 1.4rem;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 0.5rem;
            line-height: 1.2;
            word-break: break-all;
            overflow-wrap: break-word;
            hyphens: auto;
            max-width: 100%;
        }

        .stats-label {
            color: #666;
            font-size: 0.85rem;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }

        .stats-icon {
            position: absolute;
            top: 12px;
            right: 12px;
            font-size: 1.3rem;
            opacity: 0.3;
        }

        /* Mobile responsive for stats - Global */
        @media (max-width: 768px) {
            .stats-container {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 0.75rem;
            }
            
            .stats-card {
                min-height: 100px;
                padding: 1rem;
            }
            
            .stats-number {
                font-size: 1.2rem;
            }
            
            .stats-label {
                font-size: 0.8rem;
            }
        }
        
        /* Extra small mobile screens - Global */
        @media (max-width: 480px) {
            .stats-container {
                grid-template-columns: 1fr;
                gap: 0.5rem;
            }
            
            .stats-card {
                min-height: 90px;
                padding: 0.875rem;
            }
            
            .stats-number {
                font-size: 1.1rem;
                word-break: break-word;
            }
            
            .stats-label {
                font-size: 0.75rem;
            }
            
            .stats-icon {
                font-size: 1.1rem;
                top: 10px;
                right: 10px;
            }
        }

/* Partial navigation progress hint. <html> carries .partial-nav-loading while a
   page is in flight; without it a slow fetch looks like a dead click. */
html.partial-nav-loading { cursor: progress; }
html.partial-nav-loading::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 99999;
    background: linear-gradient(90deg, #c31350, #8f0733);
    transform-origin: left center;
    animation: partial-nav-bar 900ms ease-out infinite;
}
@keyframes partial-nav-bar {
    0%   { transform: scaleX(0);   opacity: 1; }
    80%  { transform: scaleX(0.9); opacity: 1; }
    100% { transform: scaleX(1);   opacity: 0.4; }
}

/* ---------------------------------------------------------------------------
   Dealer card: stack the action buttons under the details on phones.

   The card lays its details and its action buttons out as `1fr auto`, with the
   details column carrying a 200px floor from repeat(auto-fit, minmax(200px, 1fr)).
   At a 400px viewport that resolves to `200px 122px` plus a 16px gap - about
   338px of content in a card that only has ~269px - so the buttons pushed 45px
   past the card's right edge. The page does not scroll horizontally, so the
   overflow was clipped and the right side of those buttons was unreachable.

   Only the action row needs this. The footer row uses the same `1fr auto`
   pattern but its content is narrow enough to fit (measured 24px clear).

   !important is required: the widths are inline styles on markup built in a JS
   template literal, which a media query cannot otherwise reach.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .dealer-card-row {
        grid-template-columns: 1fr !important;
    }

    .dealer-card-actions {
        max-width: none !important;
    }
}