/* CSS Variables for consistent theming */
:root {
    /* Primary color scale */
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;

    /* Legacy color mappings */
    --primary-color: #1e40af;
    --primary-dark: #1e3a8a;
    --primary-light: #3b82f6;
    --secondary-color: #0f172a;
    --accent-color: #06b6d4;
    --success-color: #10b981;
    --success-light: #d1fae5;
    --warning-color: #f59e0b;
    --warning-light: #fef3c7;
    --danger-color: #ef4444;
    --danger-light: #fee2e2;

    /* Gray scale */
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* Background colors */
    --background-color: #f1f5f9;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #e2e8f0;
    --card-background: #ffffff;

    /* Text colors */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-light: #94a3b8;
    --text-muted: #cbd5e1;

    /* Border */
    --border-color: #e2e8f0;
    --border-light: #f1f5f9;
    --border-dark: #cbd5e1;

    /* Shadows */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.03);
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Border radius */
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Modal sizes */
    --modal-sm: 400px;
    --modal-md: 560px;
    --modal-lg: 800px;
    --modal-xl: 1000px;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* Touch target minimum */
    --touch-target: 44px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.4);
    --focus-ring-offset: 0 0 0 2px var(--card-background), 0 0 0 4px var(--primary-500);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--background-color);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
}

/* ==================== GLOBAL FOCUS STYLES ==================== */
/* Remove default outline, add custom focus-visible styles */
:focus {
    outline: none;
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Focus styles for buttons */
button:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-offset);
}

/* Focus styles for form elements */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: var(--focus-ring);
}

/* Focus styles for links */
a:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-xs);
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: white;
    padding: 0.5rem 1rem;
    z-index: 10000;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
}

/* ==================== LOGIN PAGE STYLES ==================== */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

.login-card {
    background: var(--card-background);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 2rem;
    width: 100%;
    max-width: 400px;
}

.logo {
    text-align: center;
    margin-bottom: 2rem;
}

.logo-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.logo-icon svg {
    width: 36px;
    height: 36px;
    color: white;
}

.logo-image {
    width: 250px;
    height: auto;
    margin: 0 auto 1.5rem;
    display: block;
    border-radius: var(--radius-md);
}

.header-logo {
    width: 75px;
    height: 75px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.logo h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.tagline {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

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

.form-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-group input {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group input::placeholder {
    color: var(--text-light);
}

.error-message {
    color: var(--danger-color);
    font-size: 0.875rem;
    min-height: 1.25rem;
    text-align: center;
}

.btn-login {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    border: none;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-login:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-login:active {
    transform: translateY(0);
}

.demo-credentials {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--background-color);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.demo-credentials p {
    margin-bottom: 0.25rem;
}

.demo-credentials code {
    background: var(--card-background);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    color: var(--primary-color);
}

/* ==================== DASHBOARD STYLES ==================== */
.app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header */
.header {
    background: var(--card-background);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo-small {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-small svg {
    width: 20px;
    height: 20px;
    color: white;
}

.app-name {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--text-primary);
}

.header-right {
    display: flex;
    align-items: center;
}

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

.user-name {
    font-size: 0.875rem;
    color: var(--text-secondary);
    display: none;
}

.btn-logout {
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-logout:hover {
    background: var(--background-color);
    color: var(--text-primary);
}

/* ==================== TOP NAVIGATION BAR ==================== */
.top-nav {
    background: var(--card-background);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

.top-nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    max-width: 1400px;
    margin: 0 auto;
    height: 60px;
    min-width: 0; /* Allow flex items to shrink below content size */
    gap: 0.5rem;
}

.top-nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 1rem;
}

.top-nav-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.top-nav-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    white-space: nowrap;
}

.top-nav-menu {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
    overflow: visible;
}

.top-nav-menu .nav-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.6rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 500;
    transition: all var(--transition-base);
    min-height: 32px;
    white-space: nowrap;
}

.top-nav-menu .nav-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.top-nav-menu .nav-item:hover {
    background: var(--primary-50);
    color: var(--primary-700);
}

.top-nav-menu .nav-item:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.top-nav-menu .nav-item.active {
    background: var(--primary-100);
    color: var(--primary-color);
}

/* Dropdown Navigation */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.top-nav-menu .nav-item.nav-dropdown .nav-dropdown-trigger {
    font-weight: 600;
}

.nav-dropdown-trigger .dropdown-arrow {
    width: 10px;
    height: 10px;
    transition: transform 0.2s;
}

.nav-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 0.4rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-base);
    z-index: 1001;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(4px);
}

.nav-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    min-height: 32px;
}

/* Position Settings dropdown to the right to prevent overflow */
#settingsDropdown .nav-dropdown-menu {
    left: auto;
    right: 0;
}

.dropdown-item svg {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.dropdown-item:hover {
    background: var(--primary-50);
    color: var(--primary-700);
}

.dropdown-item:hover svg {
    color: var(--primary-600);
}

.dropdown-item:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.35rem 0;
}

/* Company Indicator */
.company-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--background-color);
    border-radius: var(--radius-md);
    margin-right: 1rem;
}

.company-indicator .company-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: none;
}

.company-selector {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
}

.company-selector .company-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-color);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.company-selector .dropdown-arrow {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.company-selector.active .dropdown-arrow {
    transform: rotate(180deg);
}

.company-selector:not(.has-dropdown) .dropdown-arrow {
    display: none;
}

.company-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s;
    z-index: 1000;
    margin-top: 0.5rem;
}

.company-selector.active .company-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.company-dropdown .company-option {
    display: block;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.company-dropdown .company-option:hover {
    background: var(--background-color);
}

.company-dropdown .company-option.active {
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary-color);
    font-weight: 500;
}

.company-dropdown .company-option:first-child {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.company-dropdown .company-option:last-child {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

@media (min-width: 768px) {
    .company-indicator .company-label {
        display: block;
    }

    .company-selector .company-name {
        max-width: 200px;
    }
}

@media (max-width: 767px) {
    .company-indicator {
        padding: 0.25rem 0.5rem;
        margin-right: 0.5rem;
    }

    .company-selector .company-name {
        max-width: 100px;
        font-size: 0.75rem;
    }
}

/* Top Nav User Section */
.top-nav-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.top-nav-user .user-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-nav-user .logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.top-nav-user .logout-btn svg {
    width: 18px;
    height: 18px;
}

.top-nav-user .logout-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
    border-color: var(--danger-color);
}

/* Legacy btn-logout support */
.top-nav-user .btn-logout {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.top-nav-user .btn-logout svg {
    width: 16px;
    height: 16px;
}

.top-nav-user .btn-logout:hover {
    background: var(--background-color);
    color: var(--danger-color);
    border-color: var(--danger-color);
}

/* User Profile Dropdown */
.user-profile-dropdown {
    position: relative;
}

.user-profile-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.user-profile-trigger:hover {
    background: var(--background-color);
    border-color: var(--border-color);
}

.user-profile-dropdown.open .user-profile-trigger {
    background: var(--background-color);
    border-color: var(--primary-color);
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.user-profile-trigger .user-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-profile-trigger .dropdown-arrow {
    width: 16px;
    height: 16px;
    color: var(--text-light);
    transition: transform 0.2s;
}

.user-profile-dropdown.open .user-profile-trigger .dropdown-arrow {
    transform: rotate(180deg);
}

.user-profile-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
    overflow: hidden;
}

.user-profile-dropdown.open .user-profile-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.profile-menu-section {
    padding: 0.75rem;
}

.profile-menu-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
    padding: 0 0.5rem;
    margin-bottom: 0.5rem;
}

.profile-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.15s;
}

.profile-menu-item:hover {
    background: var(--background-color);
}

.profile-menu-item.logout {
    color: var(--danger-color);
}

.profile-menu-item.logout:hover {
    background: rgba(239, 68, 68, 0.1);
}

.profile-menu-item svg {
    width: 18px;
    height: 18px;
}

/* Language Options in Profile Menu */
.language-options {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.language-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
    width: 100%;
    text-align: left;
}

.language-option:hover {
    background: var(--background-color);
}

.language-option.active {
    background: var(--primary-50);
}

.language-option .lang-flag {
    font-size: 1.25rem;
}

.language-option .lang-name {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.language-option .lang-check {
    color: var(--primary-color);
}

/* Language Selector Dropdown (Standalone in nav) */
.language-selector-dropdown {
    position: relative;
}

.language-selector-trigger {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.language-selector-trigger:hover {
    background: var(--background-color);
    border-color: var(--border-color);
}

.language-selector-dropdown.open .language-selector-trigger {
    background: var(--background-color);
    border-color: var(--primary-color);
}

.language-selector-trigger .current-lang-flag {
    font-size: 1.5rem;
    line-height: 1;
}

.language-selector-trigger .dropdown-arrow {
    width: 14px;
    height: 14px;
    color: var(--text-light);
    transition: transform 0.2s;
}

.language-selector-dropdown.open .language-selector-trigger .dropdown-arrow {
    transform: rotate(180deg);
}

.language-selector-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
    overflow: hidden;
    padding: 0.5rem;
}

.language-selector-dropdown.open .language-selector-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-menu-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}

.lang-menu-option:hover {
    background: var(--background-color);
}

.lang-menu-option.active {
    background: var(--primary-50);
}

.lang-menu-flag {
    font-size: 1.25rem;
    line-height: 1;
}

.lang-menu-name {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.lang-menu-check {
    color: var(--primary-color);
    flex-shrink: 0;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.mobile-menu-toggle svg {
    width: 24px;
    height: 24px;
}

.mobile-menu-toggle:hover {
    background: var(--background-color);
    color: var(--text-primary);
}

/* Mobile Responsive - Top Nav */
@media (min-width: 768px) {
    .mobile-menu-toggle {
        display: none;
    }

    .top-nav-user .user-name {
        display: block;
    }
}

@media (max-width: 767px) {
    .top-nav-menu {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--card-background);
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        gap: 0.5rem;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-100%);
        transition: all 0.3s;
        overflow-y: auto;
    }

    .top-nav-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    .top-nav-menu .nav-item {
        padding: 1rem;
        border-radius: var(--radius-md);
    }

    .nav-dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: var(--background-color);
        margin-top: 0.5rem;
        margin-left: 1rem;
    }

    .nav-dropdown:hover .dropdown-arrow {
        transform: none;
    }

    .top-nav-title {
        font-size: 1rem;
    }

    .top-nav-user .btn-logout span {
        display: none;
    }

    .top-nav-user .btn-logout {
        padding: 0.5rem;
    }
}

/* Main Content */
.main-content {
    flex: 1;
    padding: 1rem;
    width: 100%;
}

/* Welcome Section */
.welcome-section {
    margin-bottom: 1.25rem;
}

.welcome-section h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.welcome-section .date {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Quick Actions */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.action-btn:active {
    transform: translateY(0);
}

.action-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.action-btn span {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
}

.action-btn.check-in .action-icon {
    background: linear-gradient(135deg, var(--success-color), #34d399);
}

.action-btn.check-out .action-icon {
    background: linear-gradient(135deg, #f97316, #fb923c);
}

.action-btn.fuel .action-icon {
    background: linear-gradient(135deg, var(--warning-color), #fbbf24);
}

.action-btn.trip .action-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.action-btn.expense .action-icon {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}

.action-btn.report .action-icon {
    background: linear-gradient(135deg, var(--danger-color), #f87171);
}

/* Status Banner */
.status-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-light);
    flex-shrink: 0;
}

.status-banner.checked-in .status-indicator {
    background: var(--success-color);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.status-banner.checked-out .status-indicator {
    background: var(--text-light);
}

.status-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.status-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.status-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Drivers Status Section */
.drivers-status-section {
    margin-bottom: 1.5rem;
}

.drivers-status-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.drivers-status-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--card-background);
    border-radius: var(--radius-md);
    border-left: 4px solid;
}

.drivers-status-card.checked-in {
    border-left-color: var(--success-color);
}

.drivers-status-card.checked-out {
    border-left-color: var(--warning-color);
}

.drivers-status-card.not-checked {
    border-left-color: var(--danger-color);
}

.drivers-status-card.total {
    border-left-color: var(--primary-color);
}

.status-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
}

.drivers-status-card.checked-in .status-card-icon {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.drivers-status-card.checked-out .status-card-icon {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.drivers-status-card.not-checked .status-card-icon {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

.drivers-status-card.total .status-card-icon {
    background: rgba(30, 64, 175, 0.1);
    color: var(--primary-color);
}

.status-card-icon svg {
    width: 24px;
    height: 24px;
}

.status-card-info {
    display: flex;
    flex-direction: column;
}

.status-card-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.status-card-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Drivers by Project */
.drivers-by-project {
    background: var(--card-background);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.drivers-by-project h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.project-drivers-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.project-driver-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--background-color);
    border-radius: var(--radius-sm);
}

.project-driver-item .project-name {
    font-weight: 500;
    color: var(--text-primary);
}

.project-driver-item .driver-stats {
    display: flex;
    gap: 1rem;
}

.project-driver-item .stat {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.project-driver-item .stat.checked-in {
    color: var(--success-color);
}

.project-driver-item .stat.not-checked {
    color: var(--text-secondary);
}

.project-driver-item .stat svg {
    width: 16px;
    height: 16px;
}

/* Today's Summary */
.summary-section .section-header {
    margin-bottom: 0.75rem;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    background: var(--background-color);
    border-radius: var(--radius-md);
}

.summary-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.summary-icon svg {
    width: 20px;
    height: 20px;
    color: white;
}

.summary-icon.trips {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.summary-icon.miles {
    background: linear-gradient(135deg, var(--accent-color), #22d3ee);
}

.summary-icon.fuel {
    background: linear-gradient(135deg, var(--warning-color), #fbbf24);
}

.summary-icon.spending {
    background: linear-gradient(135deg, var(--success-color), #34d399);
}

.summary-data {
    display: flex;
    flex-direction: column;
}

.summary-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.summary-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Assigned Vehicle Section */
.vehicle-section .section-header {
    margin-bottom: 0.75rem;
}

.vehicle-count {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--background-color);
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
}

.assigned-vehicle {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.vehicle-card-large {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--background-color);
    border-radius: var(--radius-md);
}

.vehicle-card-large .vehicle-icon {
    width: 56px;
    height: 56px;
}

.vehicle-card-large .vehicle-icon svg {
    width: 32px;
    height: 32px;
}

.vehicle-card-large .vehicle-info {
    flex: 1;
}

.vehicle-card-large .vehicle-name {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.vehicle-card-large .vehicle-details {
    font-size: 0.8125rem;
}

.vehicle-meta {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.vehicle-meta-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.vehicle-meta-item svg {
    width: 14px;
    height: 14px;
}

/* Alerts Section */
.alerts-section .section-header {
    margin-bottom: 0.75rem;
}

.alert-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 0.375rem;
    background: var(--danger-color);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alert-badge.empty {
    background: var(--text-light);
}

.alerts-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.alert-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem;
    background: var(--background-color);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--border-color);
}

.alert-item.high {
    border-left-color: var(--danger-color);
    background: rgba(239, 68, 68, 0.05);
}

.alert-item.medium {
    border-left-color: var(--warning-color);
    background: rgba(245, 158, 11, 0.05);
}

.alert-item.low {
    border-left-color: var(--primary-light);
    background: rgba(59, 130, 246, 0.05);
}

.alert-item.info {
    border-left-color: var(--accent-color);
    background: rgba(6, 182, 212, 0.05);
}

.alert-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alert-icon svg {
    width: 18px;
    height: 18px;
}

.alert-item.high .alert-icon {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

.alert-item.medium .alert-icon {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.alert-item.low .alert-icon {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-light);
}

.alert-item.info .alert-icon {
    background: rgba(6, 182, 212, 0.1);
    color: var(--accent-color);
}

.alert-content {
    flex: 1;
    min-width: 0;
}

.alert-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.125rem;
}

.alert-description {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.empty-alerts {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--card-background);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.stat-icon.vehicles {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.stat-icon.fuel {
    background: linear-gradient(135deg, var(--warning-color), #fbbf24);
}

.stat-icon.expenses {
    background: linear-gradient(135deg, var(--success-color), #34d399);
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Sections */
.section {
    background: var(--card-background);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.section-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Vehicles Grid */
.vehicles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.vehicle-card {
    background: var(--background-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.vehicle-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.vehicle-icon {
    width: 48px;
    height: 48px;
    background: var(--primary-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vehicle-icon svg {
    width: 28px;
    height: 28px;
    color: white;
}

.vehicle-info {
    flex: 1;
    min-width: 0;
}

.vehicle-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.vehicle-details {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.vehicle-status {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.vehicle-status.active {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.vehicle-status.maintenance {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

/* Data Tables */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table th,
.data-table td {
    padding: 0.875rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.data-table th {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    background: var(--gray-50);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Sortable column headers */
.data-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast);
}

.data-table th.sortable:hover {
    background: var(--gray-100);
}

.data-table th .sort-indicator {
    display: inline-block;
    margin-left: 0.25rem;
    opacity: 0.4;
}

.data-table th.sorted .sort-indicator {
    opacity: 1;
    color: var(--primary-color);
}

.data-table td {
    color: var(--text-primary);
}

/* Row striping for better readability */
.data-table tbody tr:nth-child(even) {
    background: var(--gray-50);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* Enhanced hover states */
.data-table tbody tr {
    transition: background var(--transition-fast);
}

.data-table tbody tr:hover {
    background: var(--primary-50);
}

/* Row selection indicator */
.data-table tbody tr.selected {
    background: var(--primary-100);
    border-left: 3px solid var(--primary-color);
}

/* Focus state for keyboard navigation */
.data-table tbody tr:focus-within {
    box-shadow: inset 0 0 0 2px var(--primary-300);
}

/* Report table row styles */
.driver-summary-row td {
    padding: 0.75rem 1rem;
}

.driver-summary-row:hover {
    background: #EFF6FF !important;
    cursor: pointer;
}

.driver-summary-row:hover td:first-child strong {
    color: #2563EB;
}

.totals-row {
    background: var(--bg-tertiary) !important;
    border-top: 2px solid var(--border-color);
}

.totals-row td {
    padding: 1rem;
    font-weight: 600;
}

.totals-row:hover {
    background: var(--bg-tertiary) !important;
}

.category-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.category-badge.fuel {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.category-badge.maintenance {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-light);
}

.category-badge.tolls {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.category-badge.parking {
    background: rgba(6, 182, 212, 0.1);
    color: var(--accent-color);
}

.category-badge.other {
    background: rgba(100, 116, 139, 0.1);
    color: var(--text-secondary);
}

/* ==================== SYSTEM SETTINGS PAGE ==================== */

/* Settings Page Header */
.settings-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.settings-header-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.settings-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.settings-icon svg {
    width: 28px;
    height: 28px;
}

.settings-title-group h1 {
    margin: 0 0 0.25rem 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.settings-title-group .page-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Settings Tabs Navigation */
.settings-tabs-container {
    margin-bottom: 1.5rem;
}

.settings-tabs-nav {
    display: flex;
    gap: 0.5rem;
    background: var(--bg-secondary);
    padding: 0.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.settings-tab-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.settings-tab-btn:hover {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
}

.settings-tab-btn.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}

.settings-tab-btn.active svg {
    color: white;
}

.settings-tab-btn svg {
    flex-shrink: 0;
    color: var(--text-secondary);
}

.settings-tab-btn.active .tab-badge-lock {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Lock Badge on Tab */
.tab-badge-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(245, 158, 11, 0.15);
    border-radius: 50%;
    margin-left: 0.25rem;
    color: var(--warning-color);
}

/* Tab Content */
.settings-tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

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

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

/* Responsive Settings Tabs */
@media (max-width: 600px) {
    .settings-tabs-nav {
        flex-direction: column;
    }

    .settings-tab-btn {
        justify-content: flex-start;
    }

    .settings-page-header {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ==================== ID CONFIGURATION PAGE ==================== */

/* Page Header */
.id-config-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.id-config-header-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.id-config-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.id-config-icon svg {
    width: 28px;
    height: 28px;
}

.id-config-title-group h1 {
    margin: 0 0 0.25rem 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.id-config-title-group .page-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.id-config-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-full);
    color: var(--danger-color);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Security Warning Banner */
.security-warning-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.1) 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}

.security-warning-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(245, 158, 11, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--warning-color);
    flex-shrink: 0;
}

.security-warning-icon svg {
    width: 22px;
    height: 22px;
}

.security-warning-content strong {
    display: block;
    color: var(--warning-color);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.security-warning-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Company Selector Card */
.id-config-company-selector {
    margin-bottom: 1.5rem;
}

.company-select-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.company-select-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--primary-50);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    flex-shrink: 0;
}

.company-select-icon svg {
    width: 24px;
    height: 24px;
}

.company-select-content {
    flex: 1;
}

.company-select-content label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.company-select-content select {
    max-width: 350px;
    width: 100%;
}

.company-select-content .field-hint {
    margin-top: 0.5rem;
}

/* Configuration Grid */
.id-config-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1024px) {
    .id-config-grid {
        grid-template-columns: 1fr;
    }
}

/* Configuration Cards */
.id-config-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.id-config-card.sequences-card {
    grid-column: 1 / -1;
}

.id-config-card-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.card-header-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-header-icon svg {
    width: 22px;
    height: 22px;
}

.card-header-icon.primary {
    background: var(--primary-50);
    color: var(--primary-color);
}

.card-header-icon.secondary {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

.card-header-icon.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.card-header-text h2 {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.card-header-text p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.id-config-card-body {
    padding: 1.25rem;
}

/* ID Settings Form */
.id-settings-form .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
    .id-settings-form .form-grid {
        grid-template-columns: 1fr;
    }
}

/* ID Format Info */
.id-format-info {
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.id-format-info p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ID Preview Section */
.id-preview-section {
    margin-bottom: 1.5rem;
}

.id-preview-section > label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.id-preview-display {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.id-preview-box {
    flex: 1;
    min-width: 140px;
    padding: 1rem;
    background: linear-gradient(135deg, var(--primary-50) 0%, rgba(59, 130, 246, 0.1) 100%);
    border: 1px solid var(--primary-200);
    border-radius: var(--radius-md);
    text-align: center;
}

.id-preview-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.id-preview-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    color: var(--primary-color);
}

/* ID Tables */
.id-prefixes-table,
.id-sequences-table {
    width: 100%;
    border-collapse: collapse;
}

.id-prefixes-table th,
.id-prefixes-table td,
.id-sequences-table th,
.id-sequences-table td {
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.id-prefixes-table th,
.id-sequences-table th {
    background: var(--bg-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.id-prefixes-table input,
.id-sequences-table input {
    width: 80px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'SF Mono', Monaco, monospace;
}

/* Reset Modal Warning */
.reset-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.reset-warning svg {
    color: var(--warning-color);
    flex-shrink: 0;
}

.reset-warning p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .id-config-header {
        flex-direction: column;
        gap: 1rem;
    }

    .id-config-badge {
        align-self: flex-start;
    }

    .company-select-card {
        flex-direction: column;
    }

    .id-preview-display {
        flex-direction: column;
    }

    .id-preview-box {
        min-width: auto;
    }
}

/* ==================== FUEL ENTRY MODAL ==================== */

.fuel-entry-modal {
    max-width: 720px !important;
    width: 95% !important;
    max-height: 90vh !important;
}

.fuel-entry-modal .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, var(--primary-50) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-bottom: 1px solid var(--border-color);
}

.fuel-entry-modal .modal-header-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.fuel-entry-modal .modal-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.fuel-entry-modal .modal-header h3 {
    margin: 0 0 0.125rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.fuel-entry-modal .modal-subtitle {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.fuel-entry-modal .modal-close {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.fuel-entry-modal .modal-close:hover {
    background: var(--background-color);
    color: var(--danger-color);
}

.fuel-entry-modal .modal-body {
    padding: 1.5rem;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: visible;
}

.fuel-entry-modal .form-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.fuel-entry-modal .form-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.fuel-entry-modal .form-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.fuel-entry-modal .form-section-title svg {
    color: var(--primary-color);
}

.fuel-entry-modal .form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.fuel-entry-modal .form-grid-2:last-child {
    margin-bottom: 0;
}

@media (max-width: 540px) {
    .fuel-entry-modal .form-grid-2 {
        grid-template-columns: 1fr;
    }
}

.fuel-entry-modal .form-group {
    margin-bottom: 0;
}

.fuel-entry-modal .form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
}

.fuel-entry-modal .form-group .required {
    color: var(--danger-color);
}

.fuel-entry-modal .form-input,
.fuel-entry-modal .form-select {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: white;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.fuel-entry-modal .form-input:focus,
.fuel-entry-modal .form-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.fuel-entry-modal .form-input:disabled,
.fuel-entry-modal .form-select:disabled {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: not-allowed;
}

.fuel-entry-modal .form-input[readonly] {
    background: var(--bg-secondary);
}

.fuel-entry-modal .field-hint {
    font-size: 0.7rem;
    color: var(--text-light);
    margin-top: 0.25rem;
    margin-bottom: 0;
}

/* Input with icon */
.input-with-icon {
    position: relative;
}

.input-with-icon .form-input {
    padding-right: 2.5rem;
}

.input-icon-right {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
}

/* Total cost display */
.total-cost-display {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);
    border-radius: var(--radius-md);
    color: white;
}

.total-cost-display .currency {
    font-size: 0.9rem;
    opacity: 0.8;
}

.total-cost-display .amount {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'SF Mono', Monaco, monospace;
}

.fuel-entry-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.fuel-entry-modal .modal-footer .btn-primary,
.fuel-entry-modal .modal-footer .btn-secondary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
}

.fuel-entry-modal .modal-footer .btn-primary {
    background: var(--primary-color);
    color: white;
    border: none;
}

.fuel-entry-modal .modal-footer .btn-primary:hover {
    background: var(--primary-dark);
}

.fuel-entry-modal .modal-footer .btn-secondary {
    background: white;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.fuel-entry-modal .modal-footer .btn-secondary:hover {
    background: var(--background-color);
    color: var(--text-primary);
}

/* Searchable Driver Dropdown */
.searchable-select-container {
    position: relative !important;
    width: 100%;
    display: block;
}

.searchable-select-container .searchable-input {
    width: 100%;
    cursor: text;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B7280'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

.searchable-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 4px;
    background: white;
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 999999 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    display: none; /* Hidden by default - shown via JS on focus/input */
}

.searchable-dropdown.show {
    display: block !important;
}

.searchable-dropdown .dropdown-item {
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--gray-100);
}

.searchable-dropdown .dropdown-item:last-child {
    border-bottom: none;
}

.searchable-dropdown .dropdown-item:hover {
    background: var(--primary-50);
}

.searchable-dropdown .dropdown-item.selected {
    background: var(--primary-100);
}

.searchable-dropdown .driver-name {
    font-weight: 500;
    color: var(--text-primary);
}

.searchable-dropdown .driver-id {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--gray-100);
    padding: 2px 6px;
    border-radius: 4px;
}

.searchable-dropdown .no-results {
    padding: 15px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

/* Fuel Tank Slider */
.fuel-tank-slider-container {
    background: var(--gray-50);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
}

.fuel-tank-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 13px;
}

.tank-capacity-label {
    color: var(--text-secondary);
}

.tank-available-label {
    color: var(--success-color);
}

.tank-capacity-label strong,
.tank-available-label strong {
    color: var(--text-primary);
}

.fuel-slider-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 8px;
}

.fuel-level-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 12px;
    background: linear-gradient(to right, #ef4444 0%, #f59e0b 25%, #10b981 75%, #10b981 100%);
    border-radius: 6px;
    outline: none;
    cursor: pointer;
}

.fuel-level-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: white;
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.fuel-level-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: white;
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.fuel-level-display {
    min-width: 50px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
}

.fuel-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-secondary);
    padding: 0 2px;
}

/* Validation Warning */
.validation-warning {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--warning-light);
    border: 1px solid var(--warning-color);
    border-radius: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: #92400e;
}

.validation-warning svg {
    color: var(--warning-color);
    flex-shrink: 0;
}

/* Footer */
.footer {
    background: var(--card-background);
    border-top: 1px solid var(--border-color);
    padding: 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* ==================== BUTTONS ==================== */
.btn-add {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.btn-add:hover {
    background: var(--primary-dark);
}

.btn-add:active {
    transform: scale(0.98);
}

.btn-add svg {
    width: 18px;
    height: 18px;
}

/* Export Button */
.btn-export {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.btn-export:hover {
    background: linear-gradient(135deg, #059669, #047857);
}

.btn-export:active {
    transform: scale(0.98);
}

.btn-export svg {
    width: 16px;
    height: 16px;
}

/* Action Bar Primary Button (Add Vehicle, etc.) */
.action-bar-right .btn-primary,
.vehicles-action-bar .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    flex: none;
}

.action-bar-right .btn-primary:hover,
.vehicles-action-bar .btn-primary:hover {
    background: var(--primary-dark);
}

.action-bar-right .btn-primary:active,
.vehicles-action-bar .btn-primary:active {
    transform: scale(0.98);
}

.action-bar-right .btn-primary svg,
.vehicles-action-bar .btn-primary svg {
    width: 16px;
    height: 16px;
}

/* ==================== Column Filters (Inside Header Cells) ==================== */
.th-filterable {
    vertical-align: top;
}

.th-filterable .th-content {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.th-filterable .th-label {
    font-weight: 600;
}

.col-filter {
    width: 100%;
    padding: 0.25rem 0.375rem;
    font-size: 0.7rem;
    font-weight: normal;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 3px;
    background: white;
    color: var(--text-primary, #1e293b);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.col-filter:focus {
    outline: none;
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.col-filter::placeholder {
    color: #94a3b8;
    font-size: 0.65rem;
}

/* Select dropdown styling */
select.col-filter {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.125rem center;
    background-size: 14px;
    padding-right: 1.25rem;
}

select.col-filter:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b82f6'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

/* Date input styling */
input[type="date"].col-filter {
    cursor: pointer;
    font-size: 0.65rem;
}

/* Filter wrapper with toggle button */
.filter-wrapper {
    display: flex;
    align-items: center;
    gap: 2px;
    position: relative;
}

.filter-wrapper .col-filter {
    flex: 1;
    min-width: 0;
}

.filter-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 3px;
    background: white;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s;
    flex-shrink: 0;
}

.filter-toggle-btn:hover {
    background: #f1f5f9;
    border-color: var(--primary-color, #3b82f6);
    color: var(--primary-color, #3b82f6);
}

.filter-toggle-btn.active {
    background: var(--primary-color, #3b82f6);
    border-color: var(--primary-color, #3b82f6);
    color: white;
}

.filter-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 150px;
    max-height: 200px;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    margin-top: 2px;
}

.filter-dropdown.active {
    display: block;
}

.filter-dropdown-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
}

.filter-dropdown-item:hover {
    background: #f1f5f9;
}

.filter-dropdown-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
}

.filter-dropdown-item label {
    flex: 1;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-dropdown-actions {
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    background: #f8fafc;
    position: sticky;
    bottom: 0;
}

.filter-dropdown-actions button {
    flex: 1;
    padding: 4px 8px;
    font-size: 0.7rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
}

.filter-dropdown-actions .btn-apply {
    background: var(--primary-color, #3b82f6);
    border-color: var(--primary-color, #3b82f6);
    color: white;
}

.filter-dropdown-actions .btn-apply:hover {
    background: #2563eb;
}

.filter-dropdown-actions .btn-clear {
    background: white;
    color: #64748b;
}

.filter-dropdown-actions .btn-clear:hover {
    background: #f1f5f9;
}

/* Hide column filters on mobile */
@media (max-width: 768px) {
    .col-filter,
    .filter-toggle-btn {
        display: none;
    }
}

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s;
    background: transparent;
}

.btn-icon svg {
    width: 18px;
    height: 18px;
}

.btn-edit {
    color: var(--primary-color);
}

.btn-edit:hover {
    background: rgba(30, 64, 175, 0.1);
}

.btn-delete {
    color: var(--danger-color);
}

.btn-delete:hover {
    background: rgba(239, 68, 68, 0.1);
}

.btn-warning {
    color: #F59E0B;
}

.btn-warning:hover {
    background: rgba(245, 158, 11, 0.1);
}

.actions-cell {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
}

.empty-message {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem !important;
}

/* ==================== MODAL ==================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: var(--card-background);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.95);
    transition: transform 0.2s;
}

.modal-overlay.active .modal {
    transform: scale(1);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.modal-close:hover {
    background: var(--background-color);
    color: var(--text-primary);
}

.modal-close svg {
    width: 20px;
    height: 20px;
}

.modal-form {
    padding: 1.5rem;
}

.modal-form .form-group {
    margin-bottom: 1rem;
}

.modal-form .form-group:last-of-type {
    margin-bottom: 0;
}

.modal-form select {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 1rem;
    width: 100%;
    background: var(--card-background);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.modal-form select:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.modal-form textarea {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 1rem;
    width: 100%;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.modal-form textarea:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.modal-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.btn-primary,
.btn-secondary {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    border: none;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--background-color);
    color: var(--text-primary);
}

.hidden {
    display: none !important;
}

/* ==================== RESPONSIVE STYLES ==================== */

/* Tablet and up */
@media (min-width: 640px) {
    .quick-actions {
        grid-template-columns: repeat(6, 1fr);
    }

    .summary-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .vehicles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .user-name {
        display: block;
    }

    .main-content {
        padding: 1.5rem;
    }

    .welcome-section h1 {
        font-size: 1.75rem;
    }

    .action-btn {
        padding: 1.25rem 0.75rem;
    }

    .action-btn span {
        font-size: 0.8125rem;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .header-content {
        padding: 1rem 2rem;
    }

    .main-content {
        padding: 2rem;
    }

    .section {
        padding: 1.5rem;
    }

    .data-table th,
    .data-table td {
        padding: 1rem;
    }
}

/* Mobile-specific optimizations */
@media (max-width: 639px) {
    .data-table {
        font-size: 0.8125rem;
    }

    .data-table th,
    .data-table td {
        padding: 0.75rem 0.5rem;
    }

    /* Improved mobile table - card-like rows */
    .data-table.mobile-cards tbody tr {
        display: block;
        background: var(--card-background);
        border-radius: var(--radius-md);
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border-color);
    }

    .data-table.mobile-cards tbody td {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--border-light);
    }

    .data-table.mobile-cards tbody td:last-child {
        border-bottom: none;
    }

    .data-table.mobile-cards tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 0.75rem;
        text-transform: uppercase;
    }

    .vehicle-card {
        padding: 1rem;
    }

    .stat-card {
        padding: 1rem;
    }

    .stat-value {
        font-size: 1.25rem;
    }

    /* Better mobile form inputs */
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 0.875rem 1rem;
        font-size: 1rem;
        min-height: var(--touch-target);
    }

    /* Ensure buttons are touch-friendly */
    .btn,
    .btn-primary,
    .btn-secondary,
    button {
        min-height: var(--touch-target);
        padding: 0.75rem 1rem;
    }

    /* Modal improvements on mobile */
    .modal {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
        border-radius: var(--radius-lg);
    }

    .modal-form .form-row {
        flex-direction: column;
        gap: 1rem;
    }
}

/* Touch-friendly improvements */
@media (hover: none) {
    .btn-login:hover,
    .btn-logout:hover,
    .vehicle-card:hover {
        transform: none;
        box-shadow: var(--shadow-sm);
    }
}

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
    .header-content {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .main-content {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .footer {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* ==================== ATTENDANCE PAGE STYLES ==================== */

/* Back Button & Page Title */
.back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
    transition: background 0.2s;
}

.back-btn:hover {
    background: var(--background-color);
}

.back-btn svg {
    width: 24px;
    height: 24px;
}

.page-title {
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--text-primary);
    margin-left: 0.5rem;
}

/* Tab Navigation */
.tab-nav {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    background: var(--card-background);
    padding: 0.375rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.tab-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn.active {
    background: var(--primary-color);
    color: white;
}

.tab-btn:not(.active):hover {
    background: var(--background-color);
    color: var(--text-primary);
}

/* Tab Content */
.tab-content {
    display: none;
}

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

/* Attendance Card */
.attendance-card {
    background: var(--card-background);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    border: 1px solid var(--border-color);
}

/* Current Time Display */
.current-time-display {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
    color: white;
}

.time-label {
    display: block;
    font-size: 0.75rem;
    opacity: 0.9;
    margin-bottom: 0.25rem;
}

.time-value {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.date-value {
    display: block;
    font-size: 0.875rem;
    opacity: 0.9;
    margin-top: 0.25rem;
}

/* Driver Info Card */
.driver-info-card {
    background: var(--background-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.info-row:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}

.info-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.info-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Attendance Status */
.attendance-status {
    margin-bottom: 1.5rem;
}

.status-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 500;
}

.status-badge svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.status-badge.ready {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-color);
}

.status-badge.clocked-in {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.status-badge.completed {
    background: rgba(100, 116, 139, 0.1);
    color: var(--text-secondary);
}

.status-hint {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    text-align: center;
}

/* Attendance Form */
.attendance-form .form-group {
    margin-bottom: 1rem;
}

.attendance-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.attendance-form select,
.attendance-form textarea,
.attendance-form input[type="text"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-family: inherit;
    background: var(--card-background);
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.attendance-form select:focus,
.attendance-form textarea:focus,
.attendance-form input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.attendance-form textarea {
    resize: vertical;
    min-height: 80px;
}

/* Clock In/Out Buttons */
.btn-clock-in,
.btn-clock-out {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 1rem;
}

.btn-clock-in {
    background: linear-gradient(135deg, var(--success-color), #34d399);
    color: white;
}

.btn-clock-in:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.btn-clock-out {
    background: linear-gradient(135deg, #f97316, #fb923c);
    color: white;
}

.btn-clock-out:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
}

.btn-clock-in:disabled,
.btn-clock-out:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-clock-in svg,
.btn-clock-out svg {
    width: 24px;
    height: 24px;
}

/* Shift Summary */
.no-shift-message,
.shift-complete-message {
    text-align: center;
    padding: 2rem 1rem;
}

.no-shift-message svg,
.shift-complete-message svg {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
}

.no-shift-message svg {
    color: var(--text-light);
}

.shift-complete-message svg {
    color: var(--success-color);
}

.no-shift-message p,
.shift-complete-message p {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.no-shift-message .hint {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.completed-summary {
    background: var(--background-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-top: 1rem;
    text-align: left;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.875rem;
}

.summary-row.total {
    border-top: 1px solid var(--border-color);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    font-weight: 600;
}

/* Active Shift */
.active-shift {
    background: var(--background-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.shift-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0;
}

.shift-row:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}

.shift-row.overdue-warning {
    background: #fef2f2;
    margin: -0.625rem -1rem 0.625rem -1rem;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-bottom: 1px solid #fecaca;
}

.shift-row.overdue-warning .shift-label,
.shift-row.overdue-warning .shift-value {
    color: #dc2626;
    font-weight: 600;
}

.status-badge.clocked-in.overdue {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* Fuel Gauge Slider */
.fuel-slider-container input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 24px;
    background: linear-gradient(to right, #EF4444 0%, #EF4444 20%, #F59E0B 20%, #F59E0B 40%, #10B981 40%, #10B981 100%);
    border-radius: 12px;
    outline: none;
    cursor: pointer;
}

.fuel-slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    background: #ffffff;
    border: 3px solid #1E40AF;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.fuel-slider-container input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
    background: #ffffff;
    border: 3px solid #1E40AF;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.shift-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.shift-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.shift-value.hours {
    font-size: 1rem;
    font-weight: 600;
}

.shift-value.overtime {
    color: var(--warning-color);
}

.shift-value.overtime-value {
    color: var(--danger-color);
    font-weight: 600;
}

/* Overtime Section */
.overtime-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.overtime-alert {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(245, 158, 11, 0.1);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}

.overtime-alert svg {
    width: 32px;
    height: 32px;
    color: var(--warning-color);
    flex-shrink: 0;
}

.overtime-info {
    display: flex;
    flex-direction: column;
}

.overtime-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.overtime-hours {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.required {
    color: var(--danger-color);
}

/* Signature Canvas */
.signature-container {
    position: relative;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: white;
    overflow: hidden;
}

.signature-container canvas {
    display: block;
    width: 100%;
    height: 150px;
    touch-action: none;
}

.btn-clear-signature {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-clear-signature:hover {
    background: var(--danger-color);
    color: white;
    border-color: var(--danger-color);
}

.signature-hint {
    font-size: 0.75rem;
    color: var(--text-light);
    text-align: center;
    margin-top: 0.5rem;
}

/* History Tab */
.history-filters {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.filter-group {
    flex: 1;
    min-width: 120px;
}

.filter-group label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.filter-group input[type="date"] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    background: var(--card-background);
    color: var(--text-primary);
}

.btn-filter {
    align-self: flex-end;
    padding: 0.5rem 1rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-filter:hover {
    background: var(--primary-dark);
}

/* History Summary */
.history-summary {
    margin-bottom: 1rem;
}

.summary-stats {
    display: flex;
    gap: 0.5rem;
}

.summary-stats .stat {
    flex: 1;
    text-align: center;
    padding: 0.875rem;
    background: var(--card-background);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.summary-stats .stat-number {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.summary-stats .stat-label {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* History List */
.history-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.history-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--card-background);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.history-card.has-overtime {
    border-left: 3px solid var(--warning-color);
}

.history-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
}

.history-date .day {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.history-date .month {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.history-details {
    flex: 1;
    min-width: 0;
}

.history-times {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
}

.time-in,
.time-out {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.time-in svg {
    color: var(--success-color);
}

.time-out svg {
    color: #f97316;
}

.time-separator {
    color: var(--text-light);
    font-size: 0.75rem;
}

.history-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;
}

.vehicle-name {
    color: var(--text-secondary);
}

.hours-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    background: var(--background-color);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-primary);
}

.overtime-badge {
    color: var(--warning-color);
    font-weight: 500;
}

.status-badge.active {
    padding: 0.125rem 0.5rem;
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.btn-view-signature {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-view-signature:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.btn-view-signature svg {
    width: 18px;
    height: 18px;
}

.empty-history {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

/* Signature Modal */
.signature-modal {
    max-width: 360px;
}

.signature-modal .modal-body {
    padding: 1.5rem;
}

.signature-approver {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.signature-approver span {
    font-weight: 600;
    color: var(--text-primary);
}

.signature-image {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

/* Attendance Navigation Link */
.nav-attendance {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s;
}

.nav-attendance:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.nav-attendance svg {
    width: 20px;
    height: 20px;
    color: var(--primary-color);
}

.nav-attendance span {
    flex: 1;
    font-weight: 500;
}

.nav-attendance .nav-arrow {
    color: var(--text-light);
}

/* Responsive adjustments for attendance */
@media (min-width: 640px) {
    .attendance-card {
        max-width: 480px;
        margin: 0 auto;
    }

    .history-filters {
        flex-wrap: nowrap;
    }

    .filter-group {
        min-width: 0;
    }
}

/* =====================
   INSPECTION PAGE STYLES
   ===================== */

.inspection-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.inspection-header {
    margin-bottom: 1.5rem;
}

.inspection-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.inspection-meta {
    display: flex;
    gap: 1rem;
    color: var(--text-light);
    font-size: 0.875rem;
}

.inspection-completed-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.inspection-completed-banner svg {
    width: 24px;
    height: 24px;
    color: var(--success-color);
}

.inspection-completed-banner span {
    color: #166534;
    font-weight: 500;
}

.inspection-warning {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.inspection-warning svg {
    width: 24px;
    height: 24px;
    color: #d97706;
}

.inspection-warning span {
    color: #92400e;
    font-weight: 500;
}

.inspection-form h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 1.5rem 0 0.5rem;
}

.section-hint {
    font-size: 0.8125rem;
    color: var(--text-light);
    margin-bottom: 1rem;
}

/* Photo Section */
.photo-section {
    margin: 1.5rem 0;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.photo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.photo-preview {
    width: 100%;
    aspect-ratio: 1;
    background: var(--bg-secondary);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.photo-preview svg {
    width: 32px;
    height: 32px;
    color: var(--text-light);
}

.photo-preview.has-photo {
    border-style: solid;
    border-color: var(--success-color);
}

.photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-label {
    font-size: 0.75rem;
    color: var(--text-light);
    text-align: center;
    margin-bottom: 0.25rem;
}

.photo-input {
    display: none;
}

.btn-capture {
    width: 100%;
    padding: 0.5rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.btn-capture svg {
    width: 18px;
    height: 18px;
}

.btn-capture:hover {
    background: var(--primary-dark);
}

/* Checklist Section */
.checklist-section {
    margin: 1.5rem 0;
}

.checklist-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checklist-item {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 1rem;
    transition: all 0.2s;
}

.checklist-item.condition-worsened {
    background: #fef2f2;
    border: 1px solid #fca5a5;
}

.checklist-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.checklist-label {
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    min-width: 100%;
}

.start-condition {
    font-size: 0.75rem;
    color: var(--text-light);
    background: white;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.condition-buttons {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.condition-btn {
    flex: 1;
    padding: 0.5rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: white;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s;
}

.condition-btn.good {
    color: var(--success-color);
}

.condition-btn.good.selected,
.condition-btn.good:hover {
    background: #dcfce7;
    border-color: var(--success-color);
}

.condition-btn.fair {
    color: #d97706;
}

.condition-btn.fair.selected,
.condition-btn.fair:hover {
    background: #fef3c7;
    border-color: #d97706;
}

.condition-btn.poor {
    color: var(--danger-color);
}

.condition-btn.poor.selected,
.condition-btn.poor:hover {
    background: #fee2e2;
    border-color: var(--danger-color);
}

.checklist-notes {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
}

/* Damage Diagram */
.diagram-section {
    margin: 1.5rem 0;
}

.diagram-container {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.vehicle-diagram {
    position: relative;
    max-width: 250px;
    margin: 0 auto;
    cursor: crosshair;
}

.vehicle-svg {
    width: 100%;
    height: auto;
}

.damage-markers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.damage-marker {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    cursor: pointer;
    pointer-events: auto;
    font-size: 0.7rem;
    font-weight: bold;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.damage-marker.existing {
    background: #eab308;
}

.damage-marker.new {
    background: var(--danger-color);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

.diagram-legend {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-dot.existing {
    background: #eab308;
}

.legend-dot.new {
    background: var(--danger-color);
}

.diagram-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.btn-clear-markers {
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.btn-clear-markers:hover {
    background: #e5e7eb;
}

.marker-count {
    font-size: 0.8125rem;
    color: var(--text-light);
}

/* New Damage Section */
.new-damage-section {
    margin: 1.5rem 0;
    padding: 1rem;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: var(--radius-md);
}

.new-damage-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #fee2e2;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

.new-damage-alert svg {
    width: 24px;
    height: 24px;
    color: var(--danger-color);
}

.new-damage-alert span {
    color: #991b1b;
    font-weight: 600;
}

.new-damage-photos label {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.damage-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.damage-photo-preview {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid var(--danger-color);
}

.damage-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.damage-photo-preview .remove-photo {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.damage-photo-preview .remove-photo svg {
    width: 16px;
    height: 16px;
    color: white;
}

.add-damage-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.btn-add-damage-photo {
    width: 100%;
    aspect-ratio: 1;
    border: 2px dashed #fca5a5;
    border-radius: var(--radius-md);
    background: white;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--danger-color);
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-add-damage-photo svg {
    width: 24px;
    height: 24px;
}

.btn-add-damage-photo:hover {
    background: #fee2e2;
}

/* Submit Inspection Button */
.btn-submit-inspection {
    width: 100%;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    transition: all 0.2s;
}

.btn-submit-inspection svg {
    width: 20px;
    height: 20px;
}

.btn-submit-inspection:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-submit-inspection.end {
    background: linear-gradient(135deg, #dc2626, #991b1b);
}

/* Start Inspection Summary */
.start-inspection-summary {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}

.start-inspection-summary h3 {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
}

.checklist-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: white;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
}

.summary-item .area {
    color: var(--text-secondary);
}

.summary-item .condition {
    font-weight: 600;
    text-transform: capitalize;
}

.summary-item .condition.good {
    color: var(--success-color);
}

.summary-item .condition.fair {
    color: #d97706;
}

.summary-item .condition.poor {
    color: var(--danger-color);
}

.damage-summary {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Vehicle Info Card */
.vehicle-info-card {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}

.vehicle-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.vehicle-detail:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.vehicle-detail .label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8125rem;
}

.vehicle-detail .value {
    color: white;
    font-weight: 600;
}

/* Inspection History */
.inspection-filters {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1rem;
    margin-bottom: 1rem;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.inspection-filters .filter-group {
    flex: 1;
    min-width: 100px;
}

.inspection-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.summary-stat {
    background: white;
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.stat-label {
    font-size: 0.8125rem;
    color: var(--text-light);
}

.inspection-history-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.history-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.history-card.has-damage {
    border-left: 4px solid var(--danger-color);
}

.history-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.history-date {
    font-weight: 600;
    color: var(--text-primary);
}

.history-vehicle {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.damage-badge {
    margin-left: auto;
    padding: 0.25rem 0.5rem;
    background: var(--danger-color);
    color: white;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
}

.history-card-body {
    padding: 1rem;
}

.inspection-times {
    display: flex;
    gap: 1rem;
}

.time-block {
    flex: 1;
    text-align: center;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.time-block .time-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}

.time-block .time-value {
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.time-block .odometer {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.damage-info {
    margin-top: 1rem;
    padding: 0.75rem;
    background: #fee2e2;
    border-radius: var(--radius-sm);
}

.damage-explanation {
    margin: 0;
    font-size: 0.875rem;
    color: #991b1b;
}

.history-card-actions {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    border-top: 1px solid var(--border-color);
}

.btn-view-photos,
.btn-compare {
    flex: 1;
    padding: 0.625rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.btn-view-photos svg,
.btn-compare svg {
    width: 16px;
    height: 16px;
}

.btn-view-photos:hover,
.btn-compare:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Photo Gallery Modal */
.photo-gallery-modal {
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
}

.gallery-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gallery-tab {
    flex: 1;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.gallery-tab.active {
    background: var(--primary-color);
    color: white;
}

.gallery-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    max-height: 400px;
    overflow-y: auto;
}

.gallery-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
}

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

.gallery-item .photo-position {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: white;
    font-size: 0.75rem;
    text-align: center;
}

.gallery-item.damage {
    border: 2px solid var(--danger-color);
}

/* Gallery enhancements for check-in/out photos */
.gallery-image-wrapper {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.gallery-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.gallery-image-wrapper img:hover {
    transform: scale(1.05);
}

.gallery-type-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.gallery-type-badge.badge-success {
    background: var(--success-color);
    color: white;
}

.gallery-type-badge.badge-warning {
    background: var(--warning-color);
    color: #1a1a1a;
}

.gallery-type-badge.badge-info {
    background: var(--primary-color);
    color: white;
}

.gallery-type-badge.badge-secondary {
    background: var(--text-tertiary);
    color: white;
}

.photo-caption {
    margin: 0.5rem 0 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
}

.photo-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.photo-date {
    font-size: 0.7rem;
    color: var(--text-tertiary);
}

.photo-driver {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Gallery grouped by date and driver */
.gallery-date-group {
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    overflow: hidden;
}

.gallery-date-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.gallery-date-header svg {
    color: var(--primary-color);
}

.gallery-driver-group {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.gallery-driver-group:last-child {
    border-bottom: none;
}

.gallery-driver-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.gallery-driver-header svg {
    color: var(--text-tertiary);
}

.gallery-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.gallery-time-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.7);
    color: white;
}

#galleryContent.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.new-damage-photos-section {
    grid-column: 1 / -1;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.new-damage-photos-section h4 {
    margin: 0 0 0.75rem;
    color: var(--danger-color);
}

.damage-photos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.no-photos {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-light);
    padding: 2rem;
}

/* Comparison Modal */
.comparison-modal {
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
}

.comparison-content {
    max-height: 400px;
    overflow-y: auto;
}

.comparison-section {
    margin-bottom: 1.5rem;
}

.comparison-section h4 {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.odometer-comparison {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.odometer-item {
    text-align: center;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.odometer-item .label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}

.odometer-item .value {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
}

.odometer-item.total {
    background: var(--primary-color);
}

.odometer-item.total .label,
.odometer-item.total .value {
    color: white;
}

.comparison-table {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.comparison-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.comparison-row.worsened {
    background: #fee2e2;
}

.comparison-row .area-name {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.comparison-row .condition {
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.comparison-row .condition.good {
    background: #dcfce7;
    color: var(--success-color);
}

.comparison-row .condition.fair {
    background: #fef3c7;
    color: #d97706;
}

.comparison-row .condition.poor {
    background: #fee2e2;
    color: var(--danger-color);
}

.comparison-row .arrow {
    color: var(--text-light);
}

.change-indicator {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--danger-color);
    background: white;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
}

.damage-comparison {
    display: flex;
    gap: 1rem;
}

.damage-count {
    flex: 1;
    text-align: center;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.damage-count.new {
    background: #fee2e2;
}

.damage-count .label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}

.damage-count .value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
}

.damage-count.new .value {
    color: var(--danger-color);
}

.damage-alert {
    background: #fee2e2;
    padding: 1rem;
    border-radius: var(--radius-md);
}

.damage-alert h4 {
    color: var(--danger-color);
}

.damage-alert p {
    margin: 0;
    color: #991b1b;
}

.no-data {
    text-align: center;
    color: var(--text-light);
    padding: 2rem;
    background: white;
    border-radius: var(--radius-lg);
}

/* Responsive for Inspection */
@media (min-width: 640px) {
    .inspection-card {
        max-width: 600px;
        margin: 0 auto;
    }

    .photo-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .checklist-label {
        min-width: auto;
        flex: none;
    }

    .condition-buttons {
        width: auto;
    }

    .checklist-summary {
        grid-template-columns: repeat(3, 1fr);
    }

    .gallery-content {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =====================
   FUEL PHOTO CAPTURE STYLES
   ===================== */

.required-photos-section {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}

.required-photos-section h4 {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
    color: #92400e;
}

.required-photos-section .field-hint {
    font-size: 0.75rem;
    color: #b45309;
    margin-bottom: 0.75rem;
}

.photo-capture-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.photo-capture-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.photo-capture-item label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #78350f;
    margin-bottom: 0.5rem;
}

.photo-preview-small {
    width: 100%;
    aspect-ratio: 4/3;
    background: white;
    border: 2px dashed #d1d5db;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.photo-preview-small svg {
    width: 28px;
    height: 28px;
    color: #9ca3af;
}

.photo-preview-small span {
    font-size: 0.6875rem;
    color: #9ca3af;
}

.photo-preview-small.has-photo {
    border-style: solid;
    border-color: var(--success-color);
    background: var(--success-color);
}

.photo-preview-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-input-hidden {
    display: none;
}

.btn-take-photo {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    transition: background 0.2s;
}

.btn-take-photo svg {
    width: 16px;
    height: 16px;
}

.btn-take-photo:hover {
    background: var(--primary-dark);
}

.field-hint {
    font-size: 0.75rem;
    color: var(--text-light);
    margin: 0.25rem 0 0.5rem;
}

.photo-required-hint {
    color: var(--primary-color);
    background: var(--primary-light);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.required {
    color: var(--danger-color);
}

/* Receipt Photo Section */
.receipt-photo-section {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}

.receipt-photo-section.required-receipt {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: var(--radius-md);
    padding: 0.75rem;
}

.receipt-photo-section .photo-preview-small {
    width: 100px;
    flex-shrink: 0;
}

.receipt-photo-section .btn-take-photo {
    flex: 1;
}

.btn-receipt {
    background: #059669;
}

.btn-receipt:hover {
    background: #047857;
}

/* =====================
   MAINTENANCE REQUEST STYLES
   ===================== */

.maintenance-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.card-header {
    margin-bottom: 1.5rem;
}

.card-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.card-subtitle {
    font-size: 0.875rem;
    color: var(--text-light);
}

.maintenance-form .form-group {
    margin-bottom: 1.25rem;
}

/* Priority Buttons */
.priority-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.priority-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0.5rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

.priority-btn .priority-icon {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.priority-btn .priority-icon svg {
    width: 20px;
    height: 20px;
}

.priority-btn .priority-label {
    font-size: 0.75rem;
    font-weight: 600;
}

.priority-btn .priority-desc {
    font-size: 0.625rem;
    color: var(--text-light);
}

.priority-btn.low {
    color: #059669;
}

.priority-btn.low.selected,
.priority-btn.low:hover {
    border-color: #059669;
    background: #ecfdf5;
}

.priority-btn.medium {
    color: #d97706;
}

.priority-btn.medium.selected,
.priority-btn.medium:hover {
    border-color: #d97706;
    background: #fffbeb;
}

.priority-btn.high {
    color: #dc2626;
}

.priority-btn.high.selected,
.priority-btn.high:hover {
    border-color: #dc2626;
    background: #fef2f2;
}

.priority-btn.urgent {
    color: #7c2d12;
}

.priority-btn.urgent.selected,
.priority-btn.urgent:hover {
    border-color: #7c2d12;
    background: #fef2f2;
    animation: urgentPulse 2s infinite;
}

@keyframes urgentPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124, 45, 18, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(124, 45, 18, 0.1); }
}

/* Issue Photos Grid */
.issue-photos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.issue-photo-preview {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid var(--primary-color);
}

.issue-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.issue-photo-preview .remove-photo {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    background: rgba(220, 38, 38, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.issue-photo-preview .remove-photo svg {
    width: 14px;
    height: 14px;
    color: white;
}

.add-issue-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.btn-add-issue-photo {
    width: 100%;
    aspect-ratio: 1;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-add-issue-photo svg {
    width: 24px;
    height: 24px;
}

.btn-add-issue-photo:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: #eff6ff;
}

/* Submit Button */
.btn-submit-maintenance {
    width: 100%;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #059669, #047857);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    transition: all 0.2s;
}

.btn-submit-maintenance svg {
    width: 20px;
    height: 20px;
}

.btn-submit-maintenance:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Requests Filters */
.requests-filters {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1rem;
    margin-bottom: 1rem;
}

.requests-filters .filter-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.requests-filters .filter-group {
    min-width: 0;
}

.requests-filters .filter-group label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}

.requests-filters .filter-group select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
}

/* Requests Summary */
.requests-summary {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.requests-summary .summary-stat {
    flex: 1;
    min-width: 70px;
    background: white;
    border-radius: var(--radius-md);
    padding: 0.75rem 0.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.requests-summary .stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.requests-summary .stat-label {
    font-size: 0.625rem;
    color: var(--text-light);
    text-transform: uppercase;
}

.requests-summary .summary-stat.pending .stat-value {
    color: #d97706;
}

.requests-summary .summary-stat.in-progress .stat-value {
    color: var(--primary-color);
}

.requests-summary .summary-stat.completed .stat-value {
    color: #059669;
}

.requests-summary .summary-stat.urgent {
    background: #fef2f2;
}

.requests-summary .summary-stat.urgent .stat-value {
    color: #dc2626;
}

/* Request Cards */
#requests-tab {
    max-width: 100%;
}

.requests-filters {
    max-width: 100%;
}

.requests-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.request-row {
    width: 100%;
}

.request-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    border-left: 4px solid var(--border-color);
}

.request-card.low {
    border-left-color: #059669;
}

.request-card.medium {
    border-left-color: #d97706;
}

.request-card.high {
    border-left-color: #dc2626;
}

.request-card.urgent {
    border-left-color: #7c2d12;
    background: linear-gradient(to right, #fef2f2, white);
}

.request-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    gap: 0.5rem;
}

.request-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.request-category {
    font-weight: 600;
    color: var(--text-primary);
}

.request-vehicle {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.request-badges {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-end;
}

.priority-badge,
.status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
}

.priority-badge.low {
    background: #ecfdf5;
    color: #059669;
}

.priority-badge.medium {
    background: #fffbeb;
    color: #d97706;
}

.priority-badge.high {
    background: #fef2f2;
    color: #dc2626;
}

.priority-badge.urgent {
    background: #7c2d12;
    color: white;
}

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

.status-badge.approved {
    background: #dbeafe;
    color: #1e40af;
}

.status-badge.in_progress {
    background: #e0e7ff;
    color: #3730a3;
}

.status-badge.completed {
    background: #dcfce7;
    color: #166534;
}

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

.status-badge.large,
.priority-badge.large {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

.request-card-body {
    padding: 1rem;
}

.request-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.request-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-light);
}

.request-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.request-meta svg {
    width: 14px;
    height: 14px;
}

.request-card-footer {
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.btn-view-details {
    width: 100%;
    padding: 0.625rem 1rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-view-details:hover {
    background: var(--primary-dark);
}

/* Compact Request Rows */
.request-row {
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--border-color);
    margin-bottom: 0.5rem;
    transition: box-shadow 0.2s;
}

.request-row:hover {
    box-shadow: var(--shadow-md);
}

.request-row.low { border-left-color: #059669; }
.request-row.medium { border-left-color: #d97706; }
.request-row.high { border-left-color: #dc2626; }
.request-row.urgent { border-left-color: #7c2d12; background: #fffbeb; }
.request-row.completed { opacity: 0.7; }

.request-row-main {
    display: grid;
    grid-template-columns: auto 1fr 2fr auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
}

.request-row-left {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 80px;
}

.request-row-info {
    min-width: 150px;
}

.request-row-vehicle {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.request-row-category {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.request-row-desc {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.request-row-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
    min-width: 100px;
}

.request-row-meta .meta-driver {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
}

.request-row-meta .meta-date {
    font-size: 0.6875rem;
    color: var(--text-light);
}

.request-row-action {
    min-width: 100px;
    text-align: right;
}

.btn-complete-row {
    padding: 0.5rem 0.875rem;
    background: #059669;
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: background 0.2s;
}

.btn-complete-row:hover {
    background: #047857;
}

.btn-complete-row svg {
    width: 14px;
    height: 14px;
}

.completed-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #059669;
}

.completed-label svg {
    width: 14px;
    height: 14px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .request-row-main {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .request-row-left {
        flex-direction: row;
        gap: 0.5rem;
    }

    .request-row-meta {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .request-row-action {
        text-align: left;
    }

    .btn-complete-row {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== NEW REQUEST CARDS ==================== */
.request-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border-left: 5px solid var(--border-color);
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
    cursor: pointer;
    overflow: hidden;
}

.request-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.request-card.low { border-left-color: #10b981; }
.request-card.medium { border-left-color: #f59e0b; }
.request-card.high { border-left-color: #ef4444; }
.request-card.urgent { border-left-color: #991b1b; }

.request-card.urgent-highlight {
    background: linear-gradient(135deg, #fef2f2 0%, #fff 100%);
    animation: urgent-pulse 2s ease-in-out infinite;
}

@keyframes urgent-pulse {
    0%, 100% { box-shadow: var(--shadow-sm); }
    50% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2), var(--shadow-md); }
}

.request-card.completed {
    opacity: 0.65;
    border-left-color: #9ca3af;
}

.request-card.completed:hover {
    opacity: 0.85;
}

/* Card Header */
.request-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem 0.5rem;
    gap: 1rem;
}

.request-card-category {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.category-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
}

.category-icon svg {
    width: 18px;
    height: 18px;
}

.category-label {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.request-card-badges {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Card Body */
.request-card-body {
    padding: 0 1rem 0.75rem;
}

.request-card-vehicle {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--primary-color);
    margin-bottom: 0.375rem;
}

.request-card-vehicle svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.request-card-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card Footer */
.request-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 1rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    gap: 1rem;
}

.request-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-light);
}

.meta-item svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.meta-item.meta-photos {
    color: var(--primary-color);
    font-weight: 500;
}

.meta-item.meta-time {
    cursor: help;
}

.request-card-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-action {
    padding: 0.5rem 0.875rem;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.2s;
}

.btn-action svg {
    width: 14px;
    height: 14px;
}

.btn-action.btn-complete {
    background: #059669;
    color: white;
}

.btn-action.btn-complete:hover {
    background: #047857;
}

.btn-action.btn-logout-inline {
    background: #f97316;
    color: white;
    text-decoration: none;
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.btn-action.btn-logout-inline:hover {
    background: #ea580c;
}

.btn-action.btn-logout-inline svg {
    width: 14px;
    height: 14px;
}

.status-completed-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #059669;
    padding: 0.375rem 0.75rem;
    background: #d1fae5;
    border-radius: var(--radius-sm);
}

.status-completed-label svg {
    width: 14px;
    height: 14px;
}

/* Empty State */
.empty-state-card {
    text-align: center;
    padding: 3rem 2rem;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.empty-state-card .empty-icon {
    width: 64px;
    height: 64px;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.empty-state-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.empty-state-card p {
    font-size: 0.875rem;
    color: var(--text-light);
    margin: 0;
}

/* Responsive for Request Cards */
@media (max-width: 640px) {
    .request-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .request-card-badges {
        width: 100%;
    }

    .request-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .request-card-actions {
        width: 100%;
    }

    .btn-action {
        flex: 1;
        justify-content: center;
    }
}

/* Request Details Modal */
.request-details-modal {
    max-width: 500px;
    width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.request-details-modal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.detail-section {
    margin-bottom: 1.25rem;
}

.detail-section h4 {
    font-size: 0.75rem;
    color: var(--text-light);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.detail-section p {
    color: var(--text-primary);
    font-size: 0.9375rem;
}

.detail-header {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.description-text {
    background: var(--bg-secondary);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    line-height: 1.5;
}

.detail-photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.detail-photo {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
}

.detail-photo:hover {
    transform: scale(1.05);
}

.detail-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Timeline */
.timeline {
    position: relative;
    padding-left: 1.5rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--border-color);
}

.timeline-item {
    position: relative;
    padding-bottom: 1rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: -1.25rem;
    top: 0.25rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-color);
    border: 2px solid white;
}

.timeline-item.status_change .timeline-dot {
    background: var(--primary-color);
}

.timeline-item.driver_note .timeline-dot {
    background: #059669;
}

.timeline-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.timeline-title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
}

.timeline-date {
    font-size: 0.75rem;
    color: var(--text-light);
}

.timeline-note {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 0.5rem;
    border-radius: var(--radius-sm);
}

/* Follow-up Form */
.request-details-modal .modal-footer {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.followup-form h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.followup-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    resize: none;
    margin-bottom: 0.75rem;
}

.btn-add-followup {
    width: 100%;
    padding: 0.625rem 1rem;
    background: #059669;
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.2s;
}

.btn-add-followup svg {
    width: 16px;
    height: 16px;
}

.btn-add-followup:hover {
    background: #047857;
}

/* Admin Actions */
.admin-actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.btn-complete-request {
    width: 100%;
    padding: 0.75rem 1rem;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.2s;
}

.btn-complete-request svg {
    width: 18px;
    height: 18px;
}

.btn-complete-request:hover {
    background: #1d4ed8;
}

/* Complete Request Modal */
.complete-request-modal {
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

.complete-request-modal .modal-body {
    padding: 1rem 1.5rem;
}

.complete-request-modal .modal-info {
    color: #6b7280;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #f0f9ff;
    border-radius: var(--radius-sm);
    border-left: 3px solid #2563eb;
}

.readonly-input {
    background: #f3f4f6 !important;
    color: #374151;
    cursor: not-allowed;
}

.complete-request-modal .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 480px) {
    .complete-request-modal .form-row {
        grid-template-columns: 1fr;
    }
}

/* Photo Viewer Modal */
.photo-viewer-modal {
    max-width: 90vw;
    max-height: 90vh;
    background: transparent;
    box-shadow: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-viewer-modal img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-md);
}

.photo-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    width: 40px;
    height: 40px;
}

.photo-close:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* Responsive for Maintenance */
@media (max-width: 480px) {
    .priority-buttons {
        grid-template-columns: repeat(2, 1fr);
    }

    .requests-filters .filter-row {
        grid-template-columns: 1fr;
    }

    .issue-photos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 640px) {
    /* New Request form can be narrower for focused input */
    #new-tab .maintenance-card {
        max-width: 700px;
        margin: 0 auto;
    }

    /* Log Maintenance form and history use full width */
    #log-tab .maintenance-card {
        max-width: 100%;
    }

    /* Log Maintenance form grid layout */
    #log-tab .maintenance-form {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem 1.5rem;
    }

    #log-tab .maintenance-form .form-group:first-child {
        grid-column: 1 / -1; /* Vehicle selector spans full width */
    }

    #log-tab .maintenance-form .form-row {
        display: contents; /* Let children participate in parent grid */
    }

    #log-tab .maintenance-form .form-group:has(textarea) {
        grid-column: 1 / -1; /* Description spans full width */
    }

    #log-tab .maintenance-form .btn-submit-maintenance {
        grid-column: 1 / -1; /* Button spans full width */
        max-width: 300px;
    }

    /* Log tab layout */
    #log-tab {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Requests list uses full width */
    .requests-filters {
        max-width: 100%;
    }

    .requests-list {
        max-width: 100%;
    }
}

/* Large screens - Log Maintenance side by side layout */
@media (min-width: 1200px) {
    #log-tab {
        display: grid;
        grid-template-columns: minmax(400px, 500px) 1fr;
        gap: 2rem;
        align-items: start;
    }

    #log-tab .maintenance-card.form-card {
        position: sticky;
        top: 1rem;
    }

    #log-tab .maintenance-form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    #log-tab .maintenance-form .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}

/* Log Maintenance Card Enhancements */
#log-tab .maintenance-card {
    border: 1px solid var(--border-color);
}

#log-tab .maintenance-card .card-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

#log-tab .maintenance-card .card-header h2 {
    display: flex;
    align-items: center;
    font-size: 1.125rem;
    margin: 0 0 0.25rem 0;
}

#log-tab .maintenance-card .card-header h2 svg {
    flex-shrink: 0;
}

#log-tab .maintenance-card.history-card {
    overflow: hidden;
}

#log-tab .maintenance-card.history-card .card-header {
    margin-bottom: 0;
}

#log-tab .maintenance-card.history-card .vehicles-table-container {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ==================== VEHICLES PAGE ==================== */
.vehicles-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.summary-card {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--shadow-sm);
}

.summary-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.summary-icon svg {
    width: 22px;
    height: 22px;
}

.summary-icon.total {
    background: #EEF2FF;
    color: #4F46E5;
}

.summary-icon.active {
    background: #DCFCE7;
    color: #16A34A;
}

.summary-icon.maintenance {
    background: #FEF3C7;
    color: #D97706;
}

.summary-icon.warning {
    background: #FEE2E2;
    color: #DC2626;
}

.summary-icon.ai-status {
    background: #F3E8FF;
    color: #7C3AED;
}

.summary-icon.scans {
    background: #DBEAFE;
    color: #2563EB;
}

/* Info banner icon styling */
.info-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.info-icon svg {
    width: 24px;
    height: 24px;
}

.summary-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.summary-label {
    font-size: 0.75rem;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Vehicles Table */
.vehicles-table-container {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.table-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.table-header h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.table-responsive {
    overflow-x: auto;
}

.vehicles-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.vehicles-table th,
.vehicles-table td {
    padding: 0.875rem 1rem;
    text-align: left;
    font-size: 0.875rem;
}

.vehicles-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.vehicles-table td {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.vehicles-table tbody tr:last-child td {
    border-bottom: none;
}

.vehicles-table tbody tr:hover {
    background: var(--bg-secondary);
}

/* Vehicle Cell */
.vehicle-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.vehicle-cell-icon {
    width: 40px;
    height: 40px;
    background: #EEF2FF;
    color: #4F46E5;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vehicle-cell-icon svg {
    width: 20px;
    height: 20px;
}

.vehicle-cell-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vehicle-cell-name {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

.vehicle-cell-driver {
    font-size: 0.75rem;
    color: var(--text-light);
}

/* Plate Badge */
.plate-badge {
    display: inline-block;
    background: #F1F5F9;
    color: #475569;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: monospace;
    letter-spacing: 0.5px;
    border: 1px solid #E2E8F0;
}

/* Color Indicator */
.color-indicator {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.1);
    vertical-align: middle;
    margin-right: 0.375rem;
}

/* Status Badge */
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
}

.status-badge.active {
    background: #DCFCE7;
    color: #16A34A;
}

.status-badge.maintenance {
    background: #FEF3C7;
    color: #D97706;
}

/* View Details Button */
.btn-view-details {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: #EEF2FF;
    color: #4F46E5;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-view-details svg {
    width: 16px;
    height: 16px;
}

.btn-view-details:hover {
    background: #4F46E5;
    color: white;
}

/* Vehicle Details Modal */
.vehicle-details-modal {
    max-width: 600px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
}

.vehicle-details-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.details-section {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.details-section.full-width {
    background: transparent;
    padding: 0;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.section-title svg {
    width: 18px;
    height: 18px;
    color: #4F46E5;
}

.details-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.detail-label {
    font-size: 0.8125rem;
    color: var(--text-light);
}

.detail-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Fuel Indicator */
.fuel-indicator {
    width: 60px;
    height: 8px;
    background: #E5E7EB;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 0.5rem;
}

.fuel-bar {
    height: 100%;
    background: linear-gradient(90deg, #F59E0B, #10B981);
    border-radius: 4px;
    transition: width 0.3s;
}

/* Dates Grid */
.dates-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.date-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 1rem;
    border: 1px solid var(--border-color);
}

.date-card.ok {
    border-color: #86EFAC;
    background: #F0FDF4;
}

.date-card.warning {
    border-color: #FCD34D;
    background: #FFFBEB;
}

.date-card.urgent {
    border-color: #FCA5A5;
    background: #FEF2F2;
}

.date-card.overdue {
    border-color: #EF4444;
    background: #FEF2F2;
}

.date-icon {
    width: 40px;
    height: 40px;
    background: #EEF2FF;
    color: #4F46E5;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.date-card.ok .date-icon {
    background: #DCFCE7;
    color: #16A34A;
}

.date-card.warning .date-icon {
    background: #FEF3C7;
    color: #D97706;
}

.date-card.urgent .date-icon,
.date-card.overdue .date-icon {
    background: #FEE2E2;
    color: #DC2626;
}

.date-icon svg {
    width: 20px;
    height: 20px;
}

.date-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.date-label {
    font-size: 0.75rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.date-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.date-countdown {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.date-card.ok .date-countdown {
    color: #16A34A;
}

.date-card.warning .date-countdown {
    color: #D97706;
}

.date-card.urgent .date-countdown,
.date-card.overdue .date-countdown {
    color: #DC2626;
    font-weight: 500;
}

/* Responsive for Vehicles */
@media (max-width: 480px) {
    .vehicles-summary {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .summary-card {
        padding: 0.75rem;
    }

    .summary-icon {
        width: 36px;
        height: 36px;
    }

    .summary-icon svg {
        width: 18px;
        height: 18px;
    }

    .summary-value {
        font-size: 1.25rem;
    }

    .vehicles-table th,
    .vehicles-table td {
        padding: 0.75rem 0.5rem;
    }
}

@media (min-width: 640px) {
    .vehicles-summary {
        grid-template-columns: repeat(4, 1fr);
    }

    .dates-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .vehicle-details-modal {
        max-width: 700px;
    }
}

/* ==================== CHECK-IN/CHECK-OUT PROCESS ==================== */
.process-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
    gap: 0.5rem;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #E5E7EB;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.3s;
}

.progress-step.active .step-number {
    background: var(--primary-color);
    color: white;
}

.progress-step.completed .step-number {
    background: #10B981;
    color: white;
}

.progress-step.completed .step-number::after {
    content: '✓';
}

.step-label {
    font-size: 0.75rem;
    color: var(--text-light);
    font-weight: 500;
}

.progress-step.active .step-label {
    color: var(--primary-color);
}

.progress-step.completed .step-label {
    color: #10B981;
}

.progress-line {
    width: 60px;
    height: 2px;
    background: #E5E7EB;
    margin-bottom: 1rem;
}

/* Process Steps */
.process-step {
    display: none;
}

.process-step.active {
    display: block;
}

.process-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}

.process-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.process-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.process-icon svg {
    width: 28px;
    height: 28px;
}

.process-icon.checkin {
    background: #DCFCE7;
    color: #16A34A;
}

.process-icon.checkout {
    background: #FEE2E2;
    color: #DC2626;
}

.process-icon.inspection {
    background: #DBEAFE;
    color: #2563EB;
}

.process-card-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.process-subtitle {
    font-size: 0.875rem;
    color: var(--text-light);
    margin: 0.25rem 0 0;
}

/* Time Display */
.checkin-time-display {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #DCFCE7 0%, #D1FAE5 100%);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}

.time-label {
    display: block;
    font-size: 0.75rem;
    color: #059669;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}

.time-value {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: #047857;
    line-height: 1;
}

.date-value {
    display: block;
    font-size: 0.875rem;
    color: #059669;
    margin-top: 0.5rem;
}

/* Vehicle Preview */
.vehicle-preview {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin: 1rem 0;
}

.vehicle-preview h4 {
    font-size: 0.75rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 0.75rem;
}

.preview-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.preview-row:last-child {
    border-bottom: none;
}

.preview-label {
    font-size: 0.8125rem;
    color: var(--text-light);
}

.preview-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Process Form */
.process-form .form-group {
    margin-bottom: 1.25rem;
}

/* Process Buttons */
.btn-process-next {
    width: 100%;
    padding: 1rem 1.5rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-process-next svg {
    width: 20px;
    height: 20px;
}

.btn-process-next:hover {
    background: #1D4ED8;
}

.process-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.btn-process-back {
    flex: 1;
    padding: 0.875rem 1rem;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    transition: all 0.2s;
}

.btn-process-back svg {
    width: 18px;
    height: 18px;
}

.btn-process-back:hover {
    background: #E5E7EB;
}

.btn-process-complete {
    flex: 2;
    padding: 0.875rem 1rem;
    background: #16A34A;
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-process-complete svg {
    width: 20px;
    height: 20px;
}

.btn-process-complete:hover {
    background: #15803D;
}

.btn-process-complete.checkout {
    background: #DC2626;
}

.btn-process-complete.checkout:hover {
    background: #B91C1C;
}

/* Inspection Section */
.inspection-section {
    margin: 1.5rem 0;
}

.inspection-section h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.section-hint {
    font-size: 0.8125rem;
    color: var(--text-light);
    margin: 0 0 1rem;
}

/* Checklist Grid */
.checklist-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.checklist-item:hover {
    background: #E5E7EB;
}

.checklist-item input[type="checkbox"] {
    display: none;
}

.checklist-item .checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #D1D5DB;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.checklist-item input:checked + .checkmark {
    background: #16A34A;
    border-color: #16A34A;
}

.checklist-item input:checked + .checkmark::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.check-label {
    font-size: 0.8125rem;
    color: var(--text-primary);
}

/* Damage Diagram */
.damage-diagram-container {
    margin: 1rem 0;
}

.damage-diagram {
    position: relative;
    background: #F9FAFB;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    cursor: crosshair;
}

.vehicle-svg {
    width: 100%;
    height: auto;
}

.damage-markers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.damage-marker {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    cursor: pointer;
    pointer-events: auto;
    font-size: 0.6875rem;
    font-weight: 600;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.damage-marker.existing {
    background: #F59E0B;
}

.damage-marker.new {
    background: #DC2626;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

.marker-number {
    font-size: 0.6875rem;
}

/* Damage Legend */
.damage-legend {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-light);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-item.existing .legend-dot {
    background: #F59E0B;
}

.legend-item.new .legend-dot {
    background: #DC2626;
}

/* Damage List */
.damage-list {
    margin-top: 1rem;
}

.no-damage {
    text-align: center;
    color: var(--text-light);
    font-size: 0.875rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.new-damage-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #DC2626;
    margin: 0 0 0.75rem;
}

.damage-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
}

.damage-item.new {
    background: #FEF2F2;
    border: 1px solid #FECACA;
}

.damage-number {
    width: 24px;
    height: 24px;
    background: #F59E0B;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.damage-item.new .damage-number {
    background: #DC2626;
}

.damage-info {
    flex: 1;
    min-width: 0;
}

.damage-type {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.damage-desc {
    display: block;
    font-size: 0.75rem;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-remove-damage {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.btn-remove-damage svg {
    width: 16px;
    height: 16px;
}

.btn-remove-damage:hover {
    background: #FEE2E2;
    color: #DC2626;
}

/* Photo Grid */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.add-photo-btn {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    background: var(--bg-secondary);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.add-photo-btn svg {
    width: 24px;
    height: 24px;
    color: var(--text-light);
}

.add-photo-btn span {
    font-size: 0.6875rem;
    color: var(--text-light);
}

.add-photo-btn:hover {
    border-color: var(--primary-color);
    background: #EEF2FF;
}

.photo-thumbnail {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.photo-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.remove-photo {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-photo svg {
    width: 14px;
    height: 14px;
}

/* Checkout specific styles */
.checkout-vehicle-info {
    margin-bottom: 1.5rem;
}

.vehicle-info-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #EEF2FF;
    border-radius: var(--radius-md);
}

.vehicle-info-icon {
    width: 48px;
    height: 48px;
    background: white;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4F46E5;
}

.vehicle-info-icon svg {
    width: 24px;
    height: 24px;
}

.vehicle-info-details {
    flex: 1;
}

.vehicle-info-name {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.vehicle-info-plate {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-family: monospace;
}

/* Time Summary */
.checkout-time-summary {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.time-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border-color);
}

.time-summary-row:last-child {
    border-bottom: none;
}

.time-summary-row.total {
    padding-top: 0.875rem;
    margin-top: 0.25rem;
    border-top: 2px solid var(--border-color);
}

.time-summary-row .time-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.time-summary-row .time-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.time-summary-row.total .time-value {
    font-size: 1.125rem;
    color: #16A34A;
}

/* Overtime Warning */
.overtime-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: #FEF3C7;
    border: 1px solid #FCD34D;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}

.warning-icon {
    width: 40px;
    height: 40px;
    background: #F59E0B;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.warning-icon svg {
    width: 24px;
    height: 24px;
}

.warning-content h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #92400E;
    margin: 0 0 0.25rem;
}

.warning-content p {
    font-size: 0.8125rem;
    color: #B45309;
    margin: 0;
}

/* Overtime Approval */
.overtime-approval {
    padding: 1rem;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}

/* Signature */
.signature-container {
    position: relative;
}

.signature-container canvas {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    touch-action: none;
}

.btn-clear-signature {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 0.375rem 0.75rem;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    cursor: pointer;
}

/* Trip Summary */
.trip-summary {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.trip-summary h4 {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trip-summary .summary-row {
    display: flex;
    justify-content: space-between;
}

.trip-summary .summary-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.trip-summary .summary-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Success Card */
.success-card {
    text-align: center;
    padding: 2rem 1.5rem;
}

.success-icon {
    width: 80px;
    height: 80px;
    background: #DCFCE7;
    color: #16A34A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.success-icon svg {
    width: 40px;
    height: 40px;
}

.success-icon.checkout {
    background: #FEE2E2;
    color: #DC2626;
}

.success-card h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.success-message {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0 0 1.5rem;
}

.success-summary {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.success-summary .summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.success-summary .summary-row:last-child {
    border-bottom: none;
}

.success-summary .summary-label {
    font-size: 0.8125rem;
    color: var(--text-light);
}

.success-summary .summary-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.btn-back-dashboard {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 2rem;
    background: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 600;
    transition: background 0.2s;
}

.btn-back-dashboard:hover {
    background: #1D4ED8;
}

/* Damage Modal */
.damage-modal {
    max-width: 320px;
}

.damage-modal .modal-footer {
    display: flex;
    gap: 0.75rem;
}

.damage-modal .modal-footer button {
    flex: 1;
}

/* Responsive for Process Pages */
@media (max-width: 480px) {
    .checklist-grid {
        grid-template-columns: 1fr;
    }

    .photo-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .time-value {
        font-size: 2rem;
    }
}

@media (min-width: 640px) {
    .process-card {
        max-width: 600px;
        margin: 0 auto 1rem;
    }
}

/* ==================== PAGE TABS ==================== */
.page-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0;
}

.page-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.page-tab svg {
    width: 20px;
    height: 20px;
}

.page-tab:hover {
    color: var(--primary-color);
    background: rgba(30, 64, 175, 0.05);
}

.page-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.tab-content {
    display: none;
}

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

/* ==================== PROJECTS TABLE ==================== */
.project-name-cell {
    display: flex;
    flex-direction: column;
}

.project-name-cell .project-name {
    font-weight: 600;
    color: var(--text-primary);
}

.project-name-cell .project-id {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.project-description {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.driver-count {
    font-weight: 500;
    color: var(--primary-color);
}

.status-badge.pending {
    background: #fef3c7;
    color: #d97706;
}

/* ==================== USERS PAGE ==================== */
.users-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.summary-icon.drivers {
    background: #DBEAFE;
    color: #2563EB;
}

.summary-icon.controllers {
    background: #D1FAE5;
    color: #047857;
}

.summary-icon.supervisors {
    background: #E9D5FF;
    color: #7C3AED;
}

.summary-icon.admins {
    background: #FEE2E2;
    color: #DC2626;
}

.summary-icon.superusers {
    background: #FEF3C7;
    color: #D97706;
}

.summary-icon.active-status {
    background: #D1FAE5;
    color: #059669;
}

.summary-icon.inactive-status {
    background: #FEE2E2;
    color: #DC2626;
}

/* Action Bar */
.users-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    align-items: center;
}

.search-box {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.625rem 0.875rem;
}

.search-box svg {
    width: 18px;
    height: 18px;
    color: var(--text-light);
    flex-shrink: 0;
}

.search-box input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.875rem;
    background: transparent;
}

.users-action-bar .filter-group select {
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    background: var(--white);
    min-width: 120px;
}

.btn-add-user {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-add-user svg {
    width: 18px;
    height: 18px;
}

.btn-add-user:hover {
    background: #1D4ED8;
}

/* Users Table */
.users-table-container {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.users-table th,
.users-table td {
    padding: 0.875rem 1rem;
    text-align: left;
    font-size: 0.875rem;
}

.users-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.users-table td {
    border-bottom: 1px solid var(--border-color);
}

.users-table tbody tr:last-child td {
    border-bottom: none;
}

.users-table tbody tr:hover {
    background: var(--bg-secondary);
}

/* User Cell */
.user-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    color: white;
    flex-shrink: 0;
    overflow: hidden;
}

.user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.user-avatar.has-photo {
    background: none;
    padding: 0;
}

.user-avatar-large {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
}

.user-avatar.driver {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
}

.user-avatar.controller {
    background: linear-gradient(135deg, #10B981, #047857);
}

.user-avatar.supervisor {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
}

.user-avatar.admin {
    background: linear-gradient(135deg, #EF4444, #DC2626);
}

.user-avatar.superuser {
    background: linear-gradient(135deg, #F59E0B, #D97706);
}

.user-avatar.company {
    background: linear-gradient(135deg, #6366F1, #4F46E5);
}

.user-avatar.currency {
    background: linear-gradient(135deg, #F59E0B, #D97706);
}

.user-avatar.large {
    width: 80px;
    height: 80px;
    font-size: 2rem;
}

.user-cell-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-cell-name {
    font-weight: 500;
    color: var(--text-primary);
}

.user-cell-id {
    font-size: 0.75rem;
    color: var(--text-light);
    font-family: monospace;
}

/* Card Number Cell (Fuel Cards) */
.card-number-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-number-cell .card-icon {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* Card Icon Large (Details Modal) */
.card-icon-large {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #6366F1, #4F46E5);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-icon-large svg {
    width: 32px;
    height: 32px;
    color: white;
}

/* Role Badge */
.role-badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
}

.role-badge.driver {
    background: #DBEAFE;
    color: #1D4ED8;
}

.role-badge.controller {
    background: #D1FAE5;
    color: #047857;
}

.role-badge.supervisor {
    background: #E9D5FF;
    color: #6D28D9;
}

.role-badge.admin {
    background: #FEE2E2;
    color: #B91C1C;
}

.role-badge.superuser {
    background: #FEF3C7;
    color: #D97706;
}

/* Currency and Company Badges */
.currency-badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    background: #FEF3C7;
    color: #B45309;
}

/* Count Badges for Companies Table */
.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.count-badge.users {
    background: #DBEAFE;
    color: #1D4ED8;
}

.count-badge.vehicles {
    background: #E0E7FF;
    color: #4338CA;
}

.currency-code {
    font-weight: 600;
    color: var(--text-primary);
}

.currency-symbol {
    font-size: 1.1rem;
    font-weight: 600;
}

.default-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 500;
    background: #D1FAE5;
    color: #047857;
    margin-left: 0.5rem;
}

/* Country Badge */
.country-badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    background: #E0E7FF;
    color: #3730A3;
}

/* Body Type Badge */
.body-type-badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    background: #F3F4F6;
    color: #374151;
}

.body-type-badge.pickup {
    background: #FEF3C7;
    color: #B45309;
}

.body-type-badge.van {
    background: #DBEAFE;
    color: #1D4ED8;
}

.body-type-badge.suv {
    background: #D1FAE5;
    color: #047857;
}

.body-type-badge.truck {
    background: #F3E8FF;
    color: #7C3AED;
}

.body-type-badge.sedan {
    background: #E0E7FF;
    color: #4338CA;
}

/* Fuel Type Badges */
.fuel-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 500;
    margin-right: 0.25rem;
}

.fuel-badge.petrol {
    background: #FEE2E2;
    color: #B91C1C;
}

.fuel-badge.diesel {
    background: #FEF3C7;
    color: #92400E;
}

.fuel-badge.electric {
    background: #D1FAE5;
    color: #047857;
}

/* Brand/Model Avatar */
.user-avatar.brand,
.user-avatar.model {
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: white;
}

/* Checkbox Group */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.5rem 0;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.checkbox-label input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

/* Filter Group */
.filter-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-group select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    background: white;
    cursor: pointer;
}

/* Contact Info */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.contact-email {
    font-size: 0.8125rem;
    color: var(--text-primary);
}

.contact-phone {
    font-size: 0.75rem;
    color: var(--text-light);
}

/* Action Buttons */
.btn-icon.btn-view {
    color: #3B82F6;
}

.btn-icon.btn-view:hover {
    background: #DBEAFE;
}

/* User Modal */
.user-modal {
    max-width: 550px;
    width: 95%;
}

.user-modal .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Vehicle Checkboxes */
.vehicle-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 150px;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.vehicle-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--white);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8125rem;
}

.vehicle-checkbox input {
    display: none;
}

.vehicle-checkbox .checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #D1D5DB;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.vehicle-checkbox input:checked + .checkmark {
    background: #16A34A;
    border-color: #16A34A;
}

.vehicle-checkbox input:checked + .checkmark::after {
    content: '✓';
    color: white;
    font-size: 11px;
    font-weight: bold;
}

/* Company Access Checkboxes */
.company-access-options {
    margin-bottom: 0.5rem;
}

.all-companies-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #FEF3C7;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #D97706;
}

.all-companies-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.company-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 150px;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.company-checkboxes.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.company-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--white);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8125rem;
}

.company-checkbox input {
    display: none;
}

.company-checkbox .checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #D1D5DB;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.company-checkbox input:checked + .checkmark {
    background: #3B82F6;
    border-color: #3B82F6;
}

.company-checkbox input:checked + .checkmark::after {
    content: '✓';
    color: white;
    font-size: 11px;
    font-weight: bold;
}

/* User Details Modal */
.user-details-modal {
    max-width: 500px;
    width: 95%;
}

.user-details-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.user-details-name {
    text-align: center;
}

.user-details-name h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.user-details-name .role-badge,
.user-details-name .status-badge {
    margin: 0 0.25rem;
}

.user-details-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.detail-section {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.detail-section h4 {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 0.75rem;
}

.detail-section .detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.detail-section .detail-row:last-child {
    border-bottom: none;
}

/* Delete Modal */
.delete-modal {
    max-width: 360px;
    text-align: center;
    padding: 2rem;
}

.delete-icon {
    width: 64px;
    height: 64px;
    background: #FEE2E2;
    color: #DC2626;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.delete-icon svg {
    width: 32px;
    height: 32px;
}

.delete-modal h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.delete-modal p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 1.5rem;
}

.btn-danger {
    background: #DC2626;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

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

/* Responsive for Users */
@media (max-width: 480px) {
    .users-action-bar {
        flex-direction: column;
    }

    .search-box {
        width: 100%;
    }

    .users-action-bar .filter-group,
    .btn-add-user {
        width: 100%;
    }

    .users-action-bar .filter-group select {
        width: 100%;
    }

    .user-modal .form-row {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 640px) {
    .users-summary {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==================== VEHICLE MANAGEMENT STYLES ==================== */

/* Vehicle Modal - Large */
.vehicle-modal-large {
    max-width: 700px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
}

/* Vehicle Form Modal - Expanded */
.vehicle-form-modal {
    max-width: 900px !important;
    width: 95% !important;
    max-height: 95vh !important;
}

.vehicle-form-modal .modal-body {
    max-height: calc(95vh - 70px);
    overflow-y: auto;
    padding: 1.5rem;
}

.vehicle-form-modal .form-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.vehicle-form-modal .form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.vehicle-form-modal .form-section h4 {
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
}

.vehicle-form-modal .form-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.vehicle-form-modal .form-row.two-cols {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
    .vehicle-form-modal {
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
    }

    .vehicle-form-modal .form-row {
        grid-template-columns: 1fr;
    }

    .vehicle-form-modal .form-row.two-cols {
        grid-template-columns: 1fr;
    }
}

/* Form Sections */
.form-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #E5E7EB;
}

.form-section:last-of-type {
    margin-bottom: 1rem;
    padding-bottom: 0;
    border-bottom: none;
}

.form-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-section-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: -0.75rem;
    margin-bottom: 1rem;
}

/* Work Days Checkboxes */
.work-days-checkboxes {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.work-days-checkboxes .day-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #D1D5DB;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
}

.work-days-checkboxes .day-checkbox:hover {
    border-color: var(--primary-color);
    background: #F0F7FF;
}

.work-days-checkboxes .day-checkbox input {
    display: none;
}

.work-days-checkboxes .day-checkbox:has(input:checked) {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.work-days-checkboxes .day-checkbox:has(input:checked) span {
    color: #fff;
}

.auto-fill-hint {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Vehicle Avatar */
.user-avatar.vehicle {
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
}

.user-avatar.vehicle svg {
    width: 20px;
    height: 20px;
    fill: white;
}

/* Engine Info Display */
.engine-info {
    font-weight: 500;
    color: var(--text-primary);
    margin-right: 0.5rem;
}

/* Form Row Full Width */
.form-row.full-width {
    grid-template-columns: 1fr;
}

.form-row.full-width .form-group {
    width: 100%;
}

/* Textarea Styling */
textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #D1D5DB;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.875rem;
    resize: vertical;
    min-height: 80px;
}

textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Read-only Input Styling */
input[readonly] {
    background-color: #F3F4F6;
    color: #6B7280;
    cursor: not-allowed;
}

/* Notes Text in Details Modal */
.notes-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-wrap;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

/* Plate Badge Enhancement */
.plate-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    border-radius: var(--radius-sm);
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}

/* Summary Icon - Inactive State */
.summary-icon.inactive {
    background: linear-gradient(135deg, #F87171, #DC2626);
}

/* Nav Link - Vehicle Management */
.nav-vehicle-mgmt svg {
    fill: #3B82F6;
}

/* Vehicle Details Modal Enhancements */
.vehicle-details-modal {
    max-width: 700px;
}

/* Responsive Adjustments for Vehicle Modal */
@media (max-width: 640px) {
    .vehicle-modal-large {
        max-width: 100%;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .vehicle-modal-large .form-row {
        grid-template-columns: 1fr;
    }

    .form-section {
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }

    .form-section-title {
        font-size: 0.8125rem;
    }
}

/* ==================== TABS STYLES ==================== */

.tabs-container {
    margin-bottom: 1.5rem;
}

.tabs-nav {
    display: flex;
    gap: 0.5rem;
    background: var(--white);
    padding: 0.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
    justify-content: center;
}

.tab-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

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

.tab-btn.active {
    background: var(--primary);
    color: white;
}

.tab-btn.active svg {
    fill: white;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

/* Responsive Tabs */
@media (max-width: 640px) {
    .tabs-nav {
        flex-direction: column;
        gap: 0.25rem;
    }

    .tab-btn {
        justify-content: flex-start;
        padding: 0.75rem 1rem;
    }
}

/* ==================== DRIVER FORM ENHANCEMENTS ==================== */

/* Photo Upload */
.photo-upload-group {
    margin-bottom: 1.5rem;
}

.photo-upload-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.photo-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--background-color);
    border: 2px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.photo-preview svg {
    width: 50px;
    height: 50px;
    color: var(--text-light);
}

.photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-upload-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

/* Rating Input */
.rating-input {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rating-input input[type="range"] {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-color);
    border-radius: 3px;
    outline: none;
}

.rating-input input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
}

.rating-input input[type="range"]::-webkit-slider-thumb:hover {
    background: var(--primary-dark);
}

.rating-input input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.rating-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-color);
    min-width: 30px;
    text-align: center;
}

/* Form Sections */
.form-section {
    background: var(--background-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin: 1rem 0;
}

.form-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Rating Badge in Table */
.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.rating-badge.high {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.rating-badge.medium {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.rating-badge.low {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

.rating-badge svg {
    width: 12px;
    height: 12px;
}

/* Termination Badge */
.termination-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.termination-badge.terminated {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

.termination-badge.resigned {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.termination-badge.promoted {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

/* Project Checkboxes */
.project-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
    max-height: 150px;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--background-color);
    border-radius: var(--radius-md);
}

.project-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: white;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s;
}

.project-checkbox:hover {
    background: var(--border-color);
}

.project-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
}

/* License Expiry Alert Styles */
.license-warning {
    color: var(--warning-color);
}

.license-danger {
    color: var(--danger-color);
}

.license-ok {
    color: var(--success-color);
}

/* Dashboard Checked-in Drivers */
.checked-in-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: var(--radius-md);
    color: var(--success-color);
    font-weight: 600;
}

.checked-in-badge svg {
    width: 20px;
    height: 20px;
}

/* Project Filter Tabs */
.project-filter-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.project-filter-tab {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: white;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.project-filter-tab:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.project-filter-tab.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Empty Project Message */
.no-projects-message {
    padding: 1rem;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}

/* ==================== SELFIE CAPTURE STYLES ==================== */
.selfie-capture-section {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--background-color);
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-color);
}

.selfie-capture-section h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.selfie-container {
    position: relative;
}

.selfie-camera {
    display: none;
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #000;
}

.selfie-camera.active {
    display: block;
}

.selfie-camera video {
    width: 100%;
    height: auto;
    min-height: 300px;
    object-fit: cover;
    transform: scaleX(-1);
}

.camera-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.camera-guide {
    width: 70%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.guide-frame {
    width: 100%;
    height: 100%;
    border: 2px dashed rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg);
}

.guide-text {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    white-space: nowrap;
}

.btn-capture-selfie {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: white;
    border: 4px solid var(--primary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-capture-selfie:hover {
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-capture-selfie:active {
    transform: translateX(-50%) scale(0.95);
}

.btn-capture-selfie svg {
    width: 40px;
    height: 40px;
    color: var(--primary-color);
}

.btn-start-camera {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem;
    background: var(--card-background);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1rem;
}

.btn-start-camera:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(30, 64, 175, 0.05);
}

.btn-start-camera svg {
    width: 24px;
    height: 24px;
}

.selfie-preview {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.selfie-preview img {
    width: 100%;
    height: auto;
    min-height: 200px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 2px solid var(--success-color);
}

.btn-retake-selfie {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.2s;
}

.btn-retake-selfie:hover {
    background: rgba(0, 0, 0, 0.85);
}

.btn-retake-selfie svg {
    width: 16px;
    height: 16px;
}

/* Selfie validation states */
.selfie-capture-section.required {
    border-color: var(--danger-color);
}

.selfie-capture-section.required h4::after {
    content: ' *';
    color: var(--danger-color);
}

.selfie-capture-section.captured {
    border-color: var(--success-color);
    border-style: solid;
    background: rgba(16, 185, 129, 0.05);
}

.selfie-capture-section.captured h4 {
    color: var(--success-color);
}

.selfie-capture-section.captured h4::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: var(--success-color);
    border-radius: 50%;
    margin-right: 0.5rem;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-size: 10px 10px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Mobile adjustments for selfie camera */
@media (max-width: 480px) {
    .selfie-camera video {
        min-height: 250px;
    }

    .guide-text {
        font-size: 0.7rem;
        padding: 0.375rem 0.75rem;
        bottom: 65px;
    }

    .btn-capture-selfie {
        width: 50px;
        height: 50px;
    }

    .btn-capture-selfie svg {
        width: 32px;
        height: 32px;
    }
}

/* ==================== SECTION HEADER STYLES ==================== */
.section-header {
    margin-bottom: 1rem;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.section-title svg {
    width: 20px;
    height: 20px;
    color: var(--primary-color);
}

/* ==================== ATTENDANCE TAB STYLES ==================== */
.attendance-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.attendance-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    padding: 1rem;
    background: var(--card-background);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.attendance-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.attendance-filters .filter-group label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.attendance-filters .filter-group select,
.attendance-filters .filter-group input {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    min-width: 140px;
}

.attendance-table .type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.attendance-table .type-badge.checkin {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.attendance-table .type-badge.checkout {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.attendance-table .type-badge svg {
    width: 14px;
    height: 14px;
}

.attendance-table .overtime-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
    margin-left: 0.5rem;
}

.attendance-table .selfie-thumbnail {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 2px solid var(--border-color);
}

.attendance-table .selfie-thumbnail:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.attendance-table .no-selfie {
    color: var(--text-light);
    font-size: 0.75rem;
    font-style: italic;
}

/* Selfie View Modal */
.selfie-view-modal {
    max-width: 500px;
}

.selfie-modal-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.selfie-image-container {
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #000;
}

.selfie-image-container img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
}

.selfie-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--background-color);
    border-radius: var(--radius-md);
}

.selfie-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.selfie-detail-row .detail-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.selfie-detail-row .detail-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Mobile adjustments for attendance */
@media (max-width: 768px) {
    .attendance-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .attendance-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .attendance-filters .filter-group {
        width: 100%;
    }

    .attendance-filters .filter-group select,
    .attendance-filters .filter-group input {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .attendance-summary {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==================== REPORTS PAGE - EXPANDABLE LIST ==================== */
.reports-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.report-item {
    background: var(--card-background);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.report-item:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

.report-item.expanded {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.report-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.report-item-header:hover {
    background: var(--background-color);
}

.report-item.expanded .report-item-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
}

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

.report-item-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.report-item.expanded .report-item-icon {
    background: rgba(255, 255, 255, 0.2);
}

.report-item-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.report-item-text h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.report-item.expanded .report-item-text h3 {
    color: white;
}

.report-item-text p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

.report-item.expanded .report-item-text p {
    color: rgba(255, 255, 255, 0.8);
}

.report-item-arrow {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.report-item-arrow svg {
    width: 24px;
    height: 24px;
    color: var(--text-secondary);
}

.report-item.expanded .report-item-arrow {
    transform: rotate(180deg);
}

.report-item.expanded .report-item-arrow svg {
    color: white;
}

.report-item-content {
    display: none;
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--background-color);
}

.report-item.expanded .report-item-content {
    display: block;
}

/* Report Filters */
.report-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--card-background);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.report-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 150px;
}

.report-filters .filter-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.report-filters .filter-group select,
.report-filters .filter-group input {
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    background: white;
    color: var(--text-primary);
    min-width: 160px;
}

.report-filters .filter-group select:focus,
.report-filters .filter-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

/* Report filter buttons - smaller size */
.report-filters .btn-primary,
.report-filters .btn-secondary {
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    flex: none;
    min-height: auto;
    height: 36px;
}

.report-filters .btn-primary svg,
.report-filters .btn-secondary svg {
    width: 16px;
    height: 16px;
    margin-right: 6px;
}

/* Report Summary Cards */
.report-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.report-summary .summary-card {
    background: var(--card-background);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    border: 1px solid var(--border-color);
}

.report-summary .summary-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.report-summary .summary-icon.total {
    background: rgba(30, 64, 175, 0.1);
    color: var(--primary-color);
}

.report-summary .summary-icon.active-status {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.report-summary .summary-icon.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.report-summary .summary-icon.info {
    background: rgba(6, 182, 212, 0.1);
    color: var(--accent-color);
}

.report-summary .summary-icon svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px;
    max-height: 18px;
}

.report-summary .summary-info {
    display: flex;
    flex-direction: column;
}

.report-summary .summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.report-summary .summary-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Report Table Styles */
.report-table {
    width: 100%;
}

.report-table th {
    background: var(--background-color);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.report-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
}

.report-table tbody tr:hover {
    background: var(--background-color);
}

.report-table .overtime-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.vehicle-cell {
    display: flex;
    flex-direction: column;
}

.vehicle-cell .vehicle-name {
    font-weight: 500;
    color: var(--text-primary);
}

.vehicle-cell .vehicle-plate {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Mobile adjustments for reports */
@media (max-width: 768px) {
    .report-item-header {
        padding: 1rem;
    }

    .report-item-icon {
        width: 40px;
        height: 40px;
    }

    .report-item-icon svg {
        width: 20px;
        height: 20px;
    }

    .report-item-text h3 {
        font-size: 1rem;
    }

    .report-item-text p {
        font-size: 0.8rem;
    }

    .report-item-content {
        padding: 1rem;
    }

    .report-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .report-filters .filter-group {
        width: 100%;
    }

    .report-filters .filter-group select,
    .report-filters .filter-group input {
        width: 100%;
    }

    .report-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .table-container {
        overflow-x: auto;
    }

    .report-table {
        min-width: 700px;
    }
}

@media (max-width: 480px) {
    .report-item-info {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .report-summary {
        grid-template-columns: 1fr 1fr;
    }

    .report-summary .summary-value {
        font-size: 1.25rem;
    }
}

/* ==================== PRINT STYLES ==================== */
@media print {
    /* Hide navigation and UI elements */
    .top-nav,
    .footer,
    .modal-actions,
    .users-sidebar,
    .users-summary,
    .table-header,
    .table-filters,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .modal-close,
    .company-indicator,
    #createInvoiceHeader,
    #createInvoiceContent,
    .report-item {
        display: none !important;
    }

    /* Reset body and container styles */
    body {
        background: white !important;
        margin: 0;
        padding: 0;
    }

    .app-container {
        display: block;
        min-height: auto;
    }

    .main-content {
        padding: 0;
        margin: 0;
    }

    /* Modal print styles */
    .modal-overlay {
        position: static !important;
        background: none !important;
        display: block !important;
    }

    .modal-overlay.active {
        display: block !important;
    }

    .modal {
        position: static !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        transform: none !important;
    }

    .modal-header {
        display: none !important;
    }

    .invoice-document {
        width: 100% !important;
        padding: 20px !important;
    }

    /* Table styles for print */
    table {
        width: 100% !important;
        border-collapse: collapse !important;
    }

    th, td {
        padding: 8px !important;
        border: 1px solid #ddd !important;
    }

    /* Page breaks */
    .page-break {
        page-break-after: always;
    }

    /* Ensure colors print */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* =====================
   DRIVER BALANCE STYLES
   ===================== */

/* Balance Card on Dashboard */
.balance-card {
    background: linear-gradient(135deg, #4CAF50, #45a049);
}

.balance-card.negative {
    background: linear-gradient(135deg, #f44336, #d32f2f);
}

.balance-card.warning {
    background: linear-gradient(135deg, #ff9800, #f57c00);
}

.summary-icon.balance {
    background: rgba(255, 255, 255, 0.2);
}

.balance-details {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.balance-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    opacity: 0.9;
    margin-bottom: 0.25rem;
}

.balance-row:last-child {
    margin-bottom: 0;
}

/* Balance status classes */
.balance-positive {
    color: #16A34A;
    font-weight: 600;
}

.balance-warning {
    color: #D97706;
    font-weight: 600;
}

.balance-negative {
    color: #DC2626;
    font-weight: 600;
}

/* =====================
   RECEIPT VIEWER MODAL
   ===================== */

.receipt-viewer-modal {
    max-width: 600px;
}

.receipt-viewer-content {
    max-height: 70vh;
    overflow: auto;
    text-align: center;
    background: #333;
    border-radius: var(--radius-md);
    padding: 1rem;
}

.receipt-viewer-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

/* =====================
   PHOTO CAPTURE STYLES
   ===================== */

.photo-capture-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.photo-preview {
    width: 60px;
    height: 60px;
    border: 2px dashed #ddd;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
}

.photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-preview.has-image {
    border-style: solid;
    border-color: #10B981;
}

/* =====================
   MISSING RECEIPT WARNING
   ===================== */

.text-warning {
    color: #ff9800;
    font-size: 0.85rem;
    font-weight: 500;
}

/* =====================
   ADVANCES PAGE STYLES
   ===================== */

.advances-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.summary-card .summary-icon.negative {
    background: linear-gradient(135deg, #f44336, #d32f2f);
}

.summary-card .summary-icon.warning {
    background: linear-gradient(135deg, #ff9800, #f57c00);
}

.summary-card .summary-icon.positive {
    background: linear-gradient(135deg, #4CAF50, #45a049);
}

/* Method Badge Styles */
.method-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.method-badge.bank_transfer {
    background: #DBEAFE;
    color: #1D4ED8;
}

.method-badge.cash {
    background: #DCFCE7;
    color: #16A34A;
}

.method-badge.check {
    background: #FEF3C7;
    color: #D97706;
}

/* Category Badge Styles */
.category-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.category-badge.tolls {
    background: #E0E7FF;
    color: #4338CA;
}

.category-badge.parking {
    background: #FCE7F3;
    color: #BE185D;
}

.category-badge.maintenance {
    background: #FEF3C7;
    color: #D97706;
}

.category-badge.other {
    background: #F3F4F6;
    color: #6B7280;
}

/* Driver Info in Table */
.driver-info {
    display: flex;
    flex-direction: column;
}

.driver-name {
    font-weight: 600;
    color: var(--text-primary);
}

.driver-id {
    font-size: 0.75rem;
    color: var(--text-light);
}

/* Custom Category Input */
#customCategoryGroup {
    margin-top: 0.5rem;
}

#customCategoryGroup.hidden {
    display: none;
}

/* =====================
   ISSUES WARNING BANNER
   ===================== */
.issues-warning-banner {
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    border: 1px solid #F59E0B;
    border-radius: var(--radius-lg);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.issues-warning-banner.hidden {
    display: none;
}

.issues-warning-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.issues-warning-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: #F59E0B;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.issues-warning-icon svg {
    width: 24px;
    height: 24px;
    fill: white;
}

.issues-warning-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.issues-warning-title {
    font-weight: 700;
    font-size: 1rem;
    color: #92400E;
}

.issues-warning-count {
    font-size: 0.875rem;
    color: #B45309;
}

.issues-warning-action {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    background: #F59E0B;
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.issues-warning-action:hover {
    background: #D97706;
}

/* Critical issues (high priority) */
.issues-warning-banner.critical {
    background: linear-gradient(135deg, #FEE2E2, #FECACA);
    border-color: #EF4444;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.issues-warning-banner.critical .issues-warning-icon {
    background: #EF4444;
}

.issues-warning-banner.critical .issues-warning-title {
    color: #991B1B;
}

.issues-warning-banner.critical .issues-warning-count {
    color: #B91C1C;
}

.issues-warning-banner.critical .issues-warning-action {
    background: #EF4444;
}

.issues-warning-banner.critical .issues-warning-action:hover {
    background: #DC2626;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .issues-warning-content {
        flex-wrap: wrap;
    }

    .issues-warning-icon {
        width: 40px;
        height: 40px;
    }

    .issues-warning-icon svg {
        width: 20px;
        height: 20px;
    }

    .issues-warning-text {
        flex: 1 1 calc(100% - 56px);
    }

    .issues-warning-action {
        width: 100%;
        margin-top: 0.5rem;
        text-align: center;
    }
}

/* =====================
   REPORTED ISSUES TAB STYLES
   ===================== */

/* Tab Badge */
.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    background: #EF4444;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 10px;
}

.tab-badge.hidden {
    display: none;
}

/* Issues Summary Cards */
.issues-summary-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.issues-summary-cards .summary-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.issues-summary-cards .summary-icon.warning {
    background: linear-gradient(135deg, #F59E0B, #D97706);
}

.issues-summary-cards .summary-icon.info {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
}

.issues-summary-cards .summary-icon.positive {
    background: linear-gradient(135deg, #10B981, #059669);
}

/* Issues Filters */
.issues-filters {
    background: white;
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.issues-filters .filter-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.issues-filters .filter-group {
    flex: 1;
    min-width: 150px;
}

.issues-filters .filter-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}

.issues-filters .filter-group select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

/* Issues List */
.issues-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Issue Card */
.issue-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid #F59E0B;
    overflow: hidden;
}

.issue-card.open {
    border-left-color: #F59E0B;
}

.issue-card.in-progress {
    border-left-color: #3B82F6;
}

.issue-card.resolved {
    border-left-color: #10B981;
}

.issue-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: #F9FAFB;
}

.issue-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.issue-type {
    font-weight: 600;
    color: var(--text-primary);
}

.issue-vehicle {
    font-size: 0.875rem;
    color: var(--text-light);
}

.issue-badges {
    display: flex;
    gap: 0.5rem;
}

/* Status Badge */
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status-badge.open {
    background: #FEF3C7;
    color: #92400E;
}

.status-badge.in-progress {
    background: #DBEAFE;
    color: #1E40AF;
}

.status-badge.resolved {
    background: #D1FAE5;
    color: #065F46;
}

/* Priority Badge */
.priority-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.priority-badge.low {
    background: #E0E7FF;
    color: #3730A3;
}

.priority-badge.medium {
    background: #FEF3C7;
    color: #92400E;
}

.priority-badge.high {
    background: #FEE2E2;
    color: #991B1B;
}

.issue-card-body {
    padding: 1rem 1.25rem;
}

.issue-description {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.issue-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background: #F9FAFB;
    border-top: 1px solid var(--border-color);
}

.issue-meta {
    display: flex;
    gap: 1.5rem;
}

.issue-driver,
.issue-date {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-light);
}

.issue-driver svg,
.issue-date svg {
    opacity: 0.6;
}

.btn-view-issue {
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-view-issue:hover {
    background: var(--primary-dark);
}

/* Issue Details Modal */
.issue-details-modal {
    max-width: 600px;
}

.issue-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.detail-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
}

.detail-value {
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.issue-description-section {
    padding: 1rem;
    background: #F9FAFB;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.issue-description-section h4 {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: var(--text-light);
}

.issue-description-section p {
    margin: 0;
    color: var(--text-primary);
    line-height: 1.5;
}

.resolution-info {
    padding: 1rem;
    background: #D1FAE5;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.resolution-info h4 {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: #065F46;
}

.resolution-info p {
    margin: 0 0 0.5rem;
    color: #065F46;
    font-size: 0.875rem;
}

.resolution-info p:last-child {
    margin-bottom: 0;
}

/* Issue Status Actions */
.issue-actions {
    flex-direction: column;
    gap: 1rem;
}

.issue-status-actions {
    width: 100%;
}

.issue-status-actions > label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.status-buttons {
    display: flex;
    gap: 0.5rem;
}

.btn-status {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem;
    background: #F3F4F6;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.75rem;
    font-weight: 600;
}

.btn-status svg {
    width: 20px;
    height: 20px;
}

.btn-status.btn-open {
    color: #92400E;
}

.btn-status.btn-open:hover,
.btn-status.btn-open.selected {
    background: #FEF3C7;
    border-color: #F59E0B;
}

.btn-status.btn-in-progress {
    color: #1E40AF;
}

.btn-status.btn-in-progress:hover,
.btn-status.btn-in-progress.selected {
    background: #DBEAFE;
    border-color: #3B82F6;
}

.btn-status.btn-resolved {
    color: #065F46;
}

.btn-status.btn-resolved:hover,
.btn-status.btn-resolved.selected {
    background: #D1FAE5;
    border-color: #10B981;
}

.resolution-notes {
    width: 100%;
}

.resolution-notes label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.resolution-notes textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    resize: vertical;
}

.resolution-notes.hidden {
    display: none;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.empty-state svg {
    color: var(--text-light);
    opacity: 0.5;
    margin-bottom: 1rem;
}

.empty-state h3 {
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}

.empty-state p {
    margin: 0;
    color: var(--text-light);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .issues-summary-cards {
        grid-template-columns: 1fr;
    }

    .issue-details-grid {
        grid-template-columns: 1fr;
    }

    .status-buttons {
        flex-direction: column;
    }

    .issue-card-header {
        flex-direction: column;
        gap: 0.75rem;
    }

    .issue-badges {
        align-self: flex-start;
    }

    .issue-card-footer {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .btn-view-issue {
        width: 100%;
        text-align: center;
    }

    .issue-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ==================== AI DAMAGE SCANNER STYLES ==================== */

/* AI Section Header */
.ai-damage-section {
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.05) 0%, rgba(147, 51, 234, 0.05) 100%);
}

.ai-damage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.ai-damage-header h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--primary-color);
}

.ai-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--primary-color);
    color: white;
}

.ai-badge.disabled {
    background: var(--text-light);
}

.ai-badge.success {
    background: var(--success-color);
}

.ai-badge.warning {
    background: var(--warning-color);
    color: #1F2937;
}

/* Scan Progress Grid */
.ai-scan-progress {
    margin: 1rem 0;
}

.scan-angle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.scan-angle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-light);
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    position: relative;
}

.scan-angle-item.current {
    border-color: var(--primary-color);
    background: rgba(79, 70, 229, 0.1);
}

.scan-angle-item.completed {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--success-color);
}

.angle-icon {
    width: 32px;
    height: 32px;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}

.angle-icon svg {
    width: 100%;
    height: 100%;
}

.angle-icon.rotated svg {
    transform: rotate(180deg);
}

.angle-icon.side-left svg {
    transform: rotate(-90deg);
}

.angle-icon.side-right svg {
    transform: rotate(90deg);
}

.angle-icon.corner-fl svg {
    transform: rotate(-45deg);
}

.angle-icon.corner-fr svg {
    transform: rotate(45deg);
}

.scan-angle-item.current .angle-icon,
.scan-angle-item.completed .angle-icon {
    color: var(--primary-color);
}

.angle-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
}

.angle-status {
    margin-top: 0.25rem;
}

.status-icon {
    font-size: 1rem;
}

.status-icon.pending {
    color: var(--text-light);
}

.status-icon.success {
    color: var(--success-color);
}

.status-icon.warning {
    color: var(--warning-color);
}

/* Scan Completion Bar */
.scan-completion-bar {
    height: 6px;
    background: var(--bg-light);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.completion-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #9333ea);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.scan-completion-text {
    font-size: 0.8rem;
    color: var(--text-light);
    text-align: center;
    display: block;
}

/* AI Capture Area */
.ai-capture-area {
    background: var(--bg-light);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.capture-instruction {
    padding: 2rem 1rem;
}

.instruction-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    color: var(--primary-color);
}

.instruction-icon svg {
    width: 100%;
    height: 100%;
}

.capture-instruction h4 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.capture-instruction p {
    margin: 0;
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Capture Preview */
.capture-preview {
    position: relative;
    max-width: 400px;
    margin: 0 auto 1rem;
    border-radius: 8px;
    overflow: hidden;
}

.capture-preview img {
    width: 100%;
    height: auto;
    display: block;
}

.capture-preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
}

.capture-preview-overlay.active {
    display: flex;
}

.analyzing-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

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

/* Capture Action Buttons */
.capture-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1rem;
}

.btn-ai-scan {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--primary-color), #9333ea);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-ai-scan:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
}

.btn-ai-scan svg {
    width: 20px;
    height: 20px;
}

.btn-take-photo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-take-photo:hover {
    background: var(--primary-hover);
}

.btn-take-photo svg {
    width: 20px;
    height: 20px;
}

.btn-retake {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-light);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-retake:hover {
    background: var(--border-color);
}

.btn-retake svg {
    width: 18px;
    height: 18px;
}

.btn-skip-ai {
    padding: 0.75rem 1rem;
    background: transparent;
    color: var(--text-light);
    border: none;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: underline;
}

.btn-skip-ai:hover {
    color: var(--text-secondary);
}

/* AI Results Section */
.ai-results-section {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--bg-light);
    border-radius: 8px;
}

.ai-results-section h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    color: var(--text-primary);
}

.ai-damages-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ai-damage-item {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid var(--border-color);
}

.ai-damage-item.minor {
    border-left-color: var(--info-color);
}

.ai-damage-item.moderate {
    border-left-color: var(--warning-color);
}

.ai-damage-item.severe {
    border-left-color: var(--danger-color);
}

.ai-damage-item .damage-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.ai-damage-item .damage-number {
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.ai-damage-item .damage-type {
    font-weight: 600;
    color: var(--text-primary);
}

.ai-damage-item .damage-severity {
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.damage-severity.minor {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info-color);
}

.damage-severity.moderate {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.damage-severity.severe {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

.ai-damage-item .damage-details p {
    margin: 0.25rem 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.ai-damage-item .damage-details strong {
    color: var(--text-primary);
}

/* Overall Condition */
.ai-overall-condition {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.condition-label {
    font-weight: 600;
    color: var(--text-secondary);
}

.condition-value {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.condition-value.good {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.condition-value.fair {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.condition-value.poor {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

/* AI-detected damage markers */
.damage-marker.ai-detected {
    background: linear-gradient(135deg, var(--primary-color), #9333ea);
}

.damage-item.ai-detected {
    border-left: 3px solid var(--primary-color);
    background: rgba(79, 70, 229, 0.05);
}

.damage-number.ai {
    background: linear-gradient(135deg, var(--primary-color), #9333ea);
    font-size: 0.65rem;
}

/* Mobile Responsive for AI Scanner */
@media (max-width: 480px) {
    .scan-angle-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ai-damage-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .capture-actions {
        flex-direction: column;
    }

    .btn-ai-scan,
    .btn-take-photo {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== AI COMPARISON STYLES ==================== */

/* Check-in Scan Status */
.checkin-scan-status {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-light);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.checkin-scan-status.available {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--success-color);
}

.checkin-scan-status.unavailable {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--warning-color);
}

.scan-status-icon {
    width: 40px;
    height: 40px;
    color: var(--success-color);
}

.checkin-scan-status.unavailable .scan-status-icon {
    color: var(--warning-color);
}

.scan-status-icon svg {
    width: 100%;
    height: 100%;
}

.scan-status-text {
    display: flex;
    flex-direction: column;
}

.status-title {
    font-weight: 600;
    color: var(--text-primary);
}

.status-subtitle {
    font-size: 0.85rem;
    color: var(--text-light);
}

/* Comparison Photos Side by Side */
.comparison-photos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.comparison-photo {
    flex: 1;
    max-width: 180px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--border-color);
}

.comparison-photo.checkin {
    border-color: var(--info-color);
}

.comparison-photo.checkout {
    border-color: var(--primary-color);
}

.comparison-photo img {
    width: 100%;
    height: auto;
    display: block;
}

.photo-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    text-align: center;
}

.comparison-photo.checkin .photo-label {
    background: var(--info-color);
}

.comparison-photo.checkout .photo-label {
    background: var(--primary-color);
}

.comparison-arrow {
    width: 32px;
    height: 32px;
    color: var(--text-light);
    flex-shrink: 0;
}

.comparison-arrow svg {
    width: 100%;
    height: 100%;
}

/* No checkin photo indicator */
.scan-angle-item.no-checkin {
    opacity: 0.6;
}

.scan-angle-item.no-checkin::after {
    content: '!';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    background: var(--warning-color);
    color: white;
    border-radius: 50%;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Damage item with NEW indicator */
.ai-damage-item.new {
    border-left-color: var(--danger-color);
    background: rgba(239, 68, 68, 0.05);
}

.damage-confidence {
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-light);
}

/* Mobile Responsive for Comparison */
@media (max-width: 480px) {
    .comparison-photos {
        flex-direction: column;
        gap: 0.5rem;
    }

    .comparison-photo {
        max-width: 100%;
    }

    .comparison-arrow {
        transform: rotate(90deg);
    }

    .checkin-scan-status {
        flex-direction: column;
        text-align: center;
    }
}

/* ===========================================
   COMPACT ADMIN DASHBOARD STYLES
   Designed to fit on 1366x768 laptop screens
   =========================================== */

/* Compact Dashboard Container */
.dashboard-compact {
    padding: 0.5rem 1rem;
}

/* Compact Header Row */
.dashboard-header-compact {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem 0;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.welcome-compact {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    justify-content: flex-start;
}

.welcome-compact h1 {
    font-size: 1.1rem;
    margin: 0;
    color: var(--text-primary);
    font-weight: 600;
}

.date-compact {
    font-size: 0.8rem;
    color: var(--text-light);
}

/* Compact Quick Actions - Icon only buttons */
.quick-actions-compact {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.action-btn-mini {
    width: 44px;
    height: 44px;
    padding: 0.5rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn-mini svg {
    width: 22px;
    height: 22px;
}

.action-btn-mini.check-in {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.action-btn-mini.check-out {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
}

.action-btn-mini.fuel {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.action-btn-mini.trip {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.action-btn-mini.expense {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
}

.action-btn-mini.report {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.action-btn-mini.trip-end {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.action-btn-mini.trip-log {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
}

.action-btn-mini:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Compact Status */
.status-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    background: var(--bg-secondary);
}

.status-compact .status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-compact .status-indicator.checked-in {
    background: var(--success-color);
    box-shadow: 0 0 6px var(--success-color);
}

.status-compact .status-indicator.checked-out {
    background: var(--text-light);
}

.status-compact .status-label {
    font-weight: 500;
    color: var(--text-primary);
}

.status-compact .status-time {
    color: var(--text-light);
    font-size: 0.75rem;
}

/* Combined Stats Row */
.dashboard-stats-row {
    display: flex;
    gap: 1rem;
    margin: 0.5rem 0;
}

.drivers-status-compact,
.summary-compact {
    flex: 1;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 0.75rem;
    box-shadow: var(--shadow-sm);
}

.drivers-status-compact h3,
.summary-compact h3 {
    font-size: 0.8rem;
    margin: 0 0 0.5rem 0;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Status Cards Row - Horizontal layout */
.status-cards-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.status-card-mini {
    padding: 0.5rem;
    border-radius: var(--radius-md);
    text-align: center;
    background: var(--bg-secondary);
}

.status-card-mini .value {
    font-size: 1.25rem;
    font-weight: 600;
    display: block;
}

.status-card-mini .label {
    font-size: 0.65rem;
    color: var(--text-light);
    text-transform: uppercase;
}

.status-card-mini.checked-in {
    background: rgba(16, 185, 129, 0.1);
}

.status-card-mini.checked-in .value {
    color: #059669;
}

.status-card-mini.checked-out {
    background: rgba(99, 102, 241, 0.1);
}

.status-card-mini.checked-out .value {
    color: #4f46e5;
}

.status-card-mini.not-checked {
    background: rgba(239, 68, 68, 0.1);
}

.status-card-mini.not-checked .value {
    color: #dc2626;
}

.status-card-mini.total {
    background: rgba(107, 114, 128, 0.1);
}

.status-card-mini.total .value {
    color: var(--text-primary);
}

/* Drivers by Project Compact (collapsible) */
.drivers-by-project-compact {
    margin-top: 0.5rem;
    font-size: 0.75rem;
}

.drivers-by-project-compact summary {
    cursor: pointer;
    color: var(--primary-color);
    font-weight: 500;
}

.drivers-by-project-compact .project-drivers-list {
    max-height: 80px;
    overflow-y: auto;
    margin-top: 0.5rem;
}

/* Summary Cards Row */
.summary-cards-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

.summary-card-mini {
    padding: 0.5rem;
    border-radius: var(--radius-md);
    text-align: center;
    background: var(--bg-secondary);
}

.summary-card-mini .value {
    font-size: 1.1rem;
    font-weight: 600;
    display: block;
    color: var(--text-primary);
}

.summary-card-mini .label {
    font-size: 0.65rem;
    color: var(--text-light);
    text-transform: uppercase;
}

.summary-card-mini.trips {
    background: rgba(59, 130, 246, 0.1);
}

.summary-card-mini.trips .value {
    color: #2563eb;
}

.summary-card-mini.kilometers {
    background: rgba(16, 185, 129, 0.1);
}

.summary-card-mini.kilometers .value {
    color: #059669;
}

.summary-card-mini.fuel {
    background: rgba(245, 158, 11, 0.1);
}

.summary-card-mini.fuel .value {
    color: #d97706;
}

.summary-card-mini.spending {
    background: rgba(239, 68, 68, 0.1);
}

.summary-card-mini.spending .value {
    color: #dc2626;
}

.summary-card-mini.balance {
    background: rgba(139, 92, 246, 0.1);
}

.summary-card-mini.balance .value {
    color: #7c3aed;
}

/* Side-by-side Info Row */
.dashboard-info-row {
    display: flex;
    gap: 1rem;
    margin: 0.5rem 0;
}

.vehicle-compact,
.alerts-compact {
    flex: 1;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 0.75rem;
    box-shadow: var(--shadow-sm);
    max-height: 110px;
    overflow-y: auto;
}

.compact-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.compact-section-header h3 {
    font-size: 0.8rem;
    margin: 0;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vehicle-count-badge {
    background: var(--primary-color);
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 500;
}

.vehicle-compact .assigned-vehicle {
    font-size: 0.85rem;
}

.alerts-compact .alerts-list {
    font-size: 0.8rem;
}

.alerts-compact .alert-badge {
    background: var(--danger-color);
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 500;
}

/* Logged In Vehicles Section */
.logged-in-vehicles-section {
    flex: 1;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 0.75rem;
    box-shadow: var(--shadow-sm);
    max-height: 150px;
    overflow-y: auto;
}

.logged-in-vehicles-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.logged-in-vehicle-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
}

.logged-in-vehicle-item .vehicle-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.logged-in-vehicle-item .vehicle-name {
    font-weight: 500;
    color: var(--text-primary);
}

.logged-in-vehicle-item .vehicle-plate {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.logged-in-vehicle-item .driver-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logged-in-vehicle-item .driver-name {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.logged-in-vehicle-item .shift-duration {
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

.logged-in-vehicle-item .shift-duration.normal {
    color: var(--success-color);
}

.logged-in-vehicle-item .shift-duration.warning {
    color: #eab308;
}

.logged-in-vehicle-item .shift-duration.high {
    color: #f97316;
}

.logged-in-vehicle-item .shift-duration.critical {
    color: var(--danger-color);
    font-weight: 700;
}

.logged-in-vehicles-list .view-all-link {
    display: block;
    text-align: center;
    color: var(--primary-color);
    font-size: 0.75rem;
    text-decoration: none;
    padding: 0.25rem;
    margin-top: 0.25rem;
}

.logged-in-vehicles-list .view-all-link:hover {
    text-decoration: underline;
}

.logged-in-vehicles-list .empty-message {
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-align: center;
    padding: 0.5rem;
}

/* Tabbed Tables Section */
.dashboard-tables-section {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 0.75rem;
    margin: 0.5rem 0;
    box-shadow: var(--shadow-sm);
}

.dashboard-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    align-items: center;
}

.dashboard-tabs .tab-btn {
    padding: 0.4rem 0.75rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.8rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.dashboard-tabs .tab-btn svg {
    width: 14px;
    height: 14px;
}

.dashboard-tabs .tab-btn:hover {
    background: var(--bg-secondary);
}

.dashboard-tabs .tab-btn.active {
    background: var(--primary-color);
    color: white;
}

.tab-actions {
    margin-left: auto;
    display: flex;
    gap: 0.25rem;
}

.btn-add-mini {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: var(--primary-color);
    color: white;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-add-mini svg {
    width: 16px;
    height: 16px;
}

.btn-add-mini:hover {
    background: #2563eb;
    transform: scale(1.05);
}

/* Tab Content */
.tab-content {
    display: none;
}

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

/* Compact Table Styles */
.compact-table {
    max-height: 180px;
    overflow-y: auto;
}

.data-table.compact th,
.data-table.compact td {
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
}

.data-table.compact th {
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    z-index: 1;
}

/* View All Link */
.view-all-link {
    display: block;
    text-align: right;
    padding-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--primary-color);
    text-decoration: none;
}

.view-all-link:hover {
    text-decoration: underline;
}

/* Compact Dashboard - Reduced section spacing */
.dashboard-compact .section {
    margin: 0.5rem 0;
    padding: 0.75rem;
}

/* Responsive adjustments for compact dashboard */
@media (max-width: 1024px) {
    .dashboard-stats-row {
        flex-direction: column;
    }

    .summary-cards-row {
        grid-template-columns: repeat(5, 1fr);
    }

    .dashboard-info-row {
        flex-direction: column;
    }

    .vehicle-compact,
    .alerts-compact {
        max-height: none;
    }
}

@media (max-width: 768px) {
    .dashboard-header-compact {
        align-items: center;
    }

    .quick-actions-compact {
        flex-wrap: wrap;
        justify-content: center;
    }

    .status-cards-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .summary-cards-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==================== IMPORT DATA STYLES ==================== */

/* Import Type Tabs */
.import-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.import-tab {
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: white;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.import-tab:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.import-tab.active {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: white;
}

/* Import Steps Indicator */
.import-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    position: relative;
}

.import-steps::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 40px;
    right: 40px;
    height: 2px;
    background: var(--border-color);
    z-index: 0;
}

.import-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 1;
}

.step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--text-light);
    transition: all 0.3s;
}

.step-label {
    font-size: 0.8125rem;
    color: var(--text-light);
    font-weight: 500;
}

.import-step.active .step-number {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.import-step.active .step-label {
    color: var(--primary-color);
}

.import-step.completed .step-number {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

/* File Upload Dropzone */
.import-dropzone {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: var(--bg-secondary);
}

.import-dropzone:hover,
.import-dropzone.dragover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.dropzone-icon {
    width: 64px;
    height: 64px;
    color: var(--text-light);
}

.dropzone-text {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

.dropzone-subtext {
    font-size: 0.875rem;
    color: var(--text-light);
}

.file-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    padding: 1rem;
    background: white;
    border-radius: var(--radius-md);
}

.file-icon {
    width: 40px;
    height: 40px;
    color: var(--success-color);
}

.file-details {
    text-align: left;
}

.file-name {
    font-weight: 600;
    color: var(--text-primary);
}

.file-row-count {
    font-size: 0.8125rem;
    color: var(--text-light);
}

/* Mapping Section */
.mapping-section {
    margin-top: 2rem;
}

.mapping-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.template-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.template-select {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    min-width: 200px;
}

.mapping-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.mapping-table th,
.mapping-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.mapping-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-light);
    text-transform: uppercase;
}

.mapping-select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.mapping-arrow {
    color: var(--text-light);
    font-size: 1.25rem;
}

.required-indicator {
    color: var(--danger-color);
    font-weight: bold;
}

/* Preview Section */
.preview-section {
    margin-top: 2rem;
}

.preview-table-container {
    max-height: 300px;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.preview-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    font-size: 0.875rem;
}

.preview-table th,
.preview-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.preview-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}

.preview-table tr.preview-valid {
    background: #f0fdf4;
}

.preview-table tr.preview-duplicate {
    background: #fef3c7;
}

.preview-table tr.preview-error {
    background: #fef2f2;
}

/* Validation Summary */
.validation-summary {
    display: flex;
    gap: 2rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}

.validation-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.validation-icon {
    width: 20px;
    height: 20px;
}

.validation-icon.valid {
    color: var(--success-color);
}

.validation-icon.duplicate {
    color: #d97706;
}

.validation-icon.error {
    color: var(--danger-color);
}

.validation-count {
    font-weight: 600;
    font-size: 1.125rem;
}

.validation-label {
    font-size: 0.875rem;
    color: var(--text-light);
}

/* Import Actions */
.import-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

/* Import Progress */
.import-progress {
    margin-top: 1rem;
}

.progress-bar-container {
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-bar-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 4px;
    transition: width 0.3s;
}

.progress-text {
    font-size: 0.875rem;
    color: var(--text-light);
    text-align: center;
}

/* Import Results Modal */
.import-results {
    text-align: center;
    padding: 1rem;
}

.results-icon {
    width: 64px;
    height: 64px;
    color: var(--success-color);
    margin-bottom: 1rem;
}

.results-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 1.5rem 0;
}

.result-stat {
    text-align: center;
}

.result-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.result-stat-label {
    font-size: 0.875rem;
    color: var(--text-light);
}

.result-stat.imported .result-stat-value {
    color: var(--success-color);
}

.result-stat.skipped .result-stat-value {
    color: #d97706;
}

.result-stat.errors .result-stat-value {
    color: var(--danger-color);
}

/* Import responsive */
@media (max-width: 768px) {
    .import-steps::before {
        display: none;
    }

    .import-steps {
        flex-direction: column;
        gap: 1rem;
    }

    .import-step {
        flex-direction: row;
    }

    .mapping-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .validation-summary {
        flex-direction: column;
        gap: 1rem;
    }

    .import-actions {
        flex-direction: column;
        gap: 1rem;
    }
}

/* Template Download Cards */
.template-download-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.template-download-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: all 0.2s;
}

.template-download-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.template-download-card .template-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.template-download-card .template-icon svg {
    width: 24px;
    height: 24px;
}

.template-download-card .template-info {
    flex: 1;
}

.template-download-card .template-info h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.template-download-card .template-info p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-light);
}

.template-download-card .btn-primary {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
}

.template-download-card .btn-primary svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 480px) {
    .template-download-card {
        flex-direction: column;
        text-align: center;
    }

    .template-download-card .btn-primary {
        width: 100%;
        justify-content: center;
    }
}

/* Notification Styles */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    background: white;
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    display: none;
    animation: slideIn 0.3s ease;
    max-width: 400px;
    font-weight: 500;
}

.notification.success {
    background: #ECFDF5;
    color: #065F46;
    border-left: 4px solid #10B981;
}

.notification.error {
    background: #FEF2F2;
    color: #991B1B;
    border-left: 4px solid #EF4444;
}

.notification.info {
    background: #EFF6FF;
    color: #1E40AF;
    border-left: 4px solid #3B82F6;
}

.notification.warning {
    background: #FFFBEB;
    color: #92400E;
    border-left: 4px solid #F59E0B;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ==================== DEVICE MANAGEMENT STYLES ==================== */
.devices-section {
    margin-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
}

.devices-section h4 {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.devices-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.loading-devices,
.no-devices,
.error-devices {
    color: var(--text-secondary);
    font-style: italic;
    padding: 1rem;
    text-align: center;
}

.error-devices {
    color: var(--danger-color);
}

.device-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    background: var(--background-color);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--text-secondary);
    gap: 1rem;
}

.device-item.approved {
    border-left-color: var(--success-color);
    background: #f0fdf4;
}

.device-item.pending {
    border-left-color: var(--warning-color);
    background: #fffbeb;
}

.device-item.revoked {
    border-left-color: var(--danger-color);
    background: #fef2f2;
}

.device-item.blocked {
    border-left-color: #1f2937;
    background: #f3f4f6;
}

.blocked-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    padding: 0.25rem 0.5rem;
    background: #e5e7eb;
    border-radius: var(--radius-sm);
}

.status-indicator.blocked {
    color: #1f2937;
}

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

.device-icon {
    font-size: 1.5rem;
}

.device-details {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.device-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.device-id {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.device-date {
    font-size: 0.75rem;
    color: var(--text-light);
}

.device-status {
    flex-shrink: 0;
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-indicator.approved {
    background: var(--success-color);
    color: white;
}

.status-indicator.pending {
    background: var(--warning-color);
    color: white;
}

.status-indicator.revoked {
    background: var(--danger-color);
    color: white;
}

.device-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-device-approve,
.btn-device-revoke,
.btn-device-delete {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-device-approve {
    background: var(--success-color);
    color: white;
}

.btn-device-approve:hover {
    background: #059669;
}

.btn-device-revoke {
    background: var(--warning-color);
    color: white;
}

.btn-device-revoke:hover {
    background: #d97706;
}

.btn-device-delete {
    background: var(--danger-color);
    color: white;
}

.btn-device-delete:hover {
    background: #dc2626;
}

@media (max-width: 600px) {
    .device-item {
        flex-wrap: wrap;
    }

    .device-info {
        width: 100%;
    }

    .device-status,
    .device-actions {
        margin-top: 0.5rem;
    }
}

/* ==================== DRIVER GALLERY ==================== */
.driver-gallery-section {
    margin-top: 1rem;
}

.driver-gallery-container {
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.loading-gallery,
.no-gallery-photos {
    color: var(--text-secondary);
    font-style: italic;
    padding: 2rem 1rem;
    text-align: center;
}

.driver-gallery-date-group {
    margin-bottom: 1rem;
}

.driver-gallery-date-group:last-child {
    margin-bottom: 0;
}

.driver-gallery-date-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.75rem;
}

.driver-gallery-date-header svg {
    fill: var(--primary-color);
}

.driver-gallery-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
}

.driver-gallery-photo {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
}

.driver-gallery-photo:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.driver-gallery-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.driver-gallery-photo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.driver-gallery-photo-overlay .photo-type {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    width: fit-content;
}

.driver-gallery-photo-overlay .photo-type.checkin {
    background: var(--success-color);
    color: white;
}

.driver-gallery-photo-overlay .photo-type.checkout {
    background: var(--info-color);
    color: white;
}

.driver-gallery-photo-overlay .photo-time {
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 600px) {
    .driver-gallery-photos {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==================== PENDING DEVICES BANNER ==================== */
.pending-devices-banner {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pending-devices-banner.has-pending {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.pending-devices-banner.hidden {
    display: none !important;
}

.pending-devices-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pending-devices-icon svg {
    width: 24px;
    height: 24px;
    fill: white;
}

.pending-devices-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.pending-devices-title {
    font-weight: 600;
    color: white;
    font-size: 0.9375rem;
}

.pending-devices-count {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
}

.pending-devices-action {
    background: white;
    color: #475569;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.pending-devices-banner.has-pending .pending-devices-action {
    color: #d97706;
}

.pending-devices-action:hover {
    background: #f8fafc;
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .pending-devices-banner {
        flex-wrap: wrap;
    }

    .pending-devices-action {
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* Pending Device Badge in Drivers Table */
.pending-device-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    margin-left: 0.5rem;
    vertical-align: middle;
    animation: pulse-badge 2s infinite;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.pending-device-badge:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.4);
    animation: none;
}

.pending-device-badge:active {
    transform: scale(0.98);
}

.pending-device-badge svg {
    flex-shrink: 0;
}

@keyframes pulse-badge {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
    }
    50% {
        opacity: 0.85;
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5);
    }
}

/* ==================== UNIFORM ALERTS BANNER ==================== */
.uniform-alerts-banner {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.uniform-alerts-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.uniform-alerts-icon svg {
    width: 24px;
    height: 24px;
    fill: white;
}

.uniform-alerts-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.uniform-alerts-title {
    font-weight: 600;
    color: white;
    font-size: 0.9375rem;
}

.uniform-alerts-count {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
}

.uniform-alerts-action {
    background: white;
    color: #d97706;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.uniform-alerts-action:hover {
    background: #f8fafc;
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .uniform-alerts-banner {
        flex-wrap: wrap;
    }

    .uniform-alerts-action {
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* ==================== UNIFORM ALERTS MODAL ==================== */
.uniform-alerts-modal {
    max-width: 700px;
    width: 95%;
}

.uniform-alerts-content {
    max-height: 60vh;
    overflow-y: auto;
    padding: 1rem;
}

.uniform-alert-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
    background: var(--bg-primary);
    transition: all 0.2s ease;
}

.uniform-alert-item:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.uniform-alert-item.reviewed {
    opacity: 0.7;
    background: var(--bg-secondary);
}

.uniform-alert-item .alert-photo {
    width: 80px;
    height: 100px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-secondary);
}

.uniform-alert-item .alert-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.uniform-alert-item .no-photo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.uniform-alert-item .alert-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.uniform-alert-item .alert-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.uniform-alert-item .driver-name {
    font-weight: 600;
    color: var(--text-primary);
}

.uniform-alert-item .alert-type {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
}

.uniform-alert-item .alert-type.checkin {
    background: var(--success-light);
    color: var(--success-color);
}

.uniform-alert-item .alert-type.checkout {
    background: var(--info-light);
    color: var(--info-color);
}

.uniform-alert-item .alert-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.uniform-alert-item .alert-issues {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.uniform-alert-item .issue-tag {
    background: var(--warning-light);
    color: var(--warning-color);
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
}

.uniform-alert-item .alert-recommendation {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-style: italic;
    margin: 0;
}

.uniform-alert-item .alert-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
}

.btn-small {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-small.btn-review {
    background: var(--success-color);
    color: white;
}

.btn-small.btn-review:hover {
    background: var(--success-dark);
}

.btn-small.btn-dismiss {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.btn-small.btn-dismiss:hover {
    background: var(--danger-light);
    color: var(--danger-color);
}

.reviewed-badge {
    font-size: 0.75rem;
    color: var(--success-color);
    font-weight: 500;
}

.no-alerts {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
}

@media (max-width: 600px) {
    .uniform-alert-item {
        flex-direction: column;
    }

    .uniform-alert-item .alert-photo {
        width: 100%;
        height: 150px;
    }

    .uniform-alert-item .alert-actions {
        flex-direction: row;
        width: 100%;
        justify-content: flex-end;
    }
}

/* ==================== IDENTITY ALERTS BANNER ==================== */
.identity-alerts-banner {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.identity-alerts-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.identity-alerts-icon svg {
    width: 24px;
    height: 24px;
    fill: white;
}

.identity-alerts-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.identity-alerts-title {
    font-weight: 600;
    color: white;
    font-size: 0.9375rem;
}

.identity-alerts-count {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
}

.identity-alerts-action {
    background: white;
    color: #b91c1c;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.identity-alerts-action:hover {
    background: #f8fafc;
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .identity-alerts-banner {
        flex-wrap: wrap;
    }

    .identity-alerts-action {
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* ==================== IDENTITY ALERTS MODAL ==================== */
.identity-alerts-modal {
    max-width: 800px;
    width: 95%;
}

.identity-alerts-content {
    max-height: 60vh;
    overflow-y: auto;
    padding: 1rem;
}

.identity-alert-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
    background: var(--bg-primary);
    transition: all 0.2s ease;
}

.identity-alert-item:hover {
    border-color: var(--danger-color);
    box-shadow: var(--shadow-sm);
}

.identity-alert-item.reviewed {
    opacity: 0.7;
    background: var(--bg-secondary);
}

.identity-alert-item .alert-photos {
    flex-shrink: 0;
}

.identity-alert-item .photo-comparison {
    display: flex;
    gap: 0.5rem;
}

.identity-alert-item .photo-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.identity-alert-item .photo-label {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 500;
}

.identity-alert-item .photo-column img {
    width: 70px;
    height: 90px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.identity-alert-item .photo-column .no-photo {
    width: 70px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.identity-alert-item .alert-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.identity-alert-item .alert-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.identity-alert-item .driver-name {
    font-weight: 600;
    color: var(--text-primary);
}

.identity-alert-item .alert-type.identity-mismatch {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    background: #fee2e2;
    color: #dc2626;
}

.identity-alert-item .alert-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.identity-alert-item .alert-action-type {
    font-weight: 500;
    color: var(--danger-color);
}

.identity-alert-item .match-score {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.identity-alert-item .score-label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.identity-alert-item .score-value {
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
}

.identity-alert-item .score-value.low {
    background: #fee2e2;
    color: #dc2626;
}

.identity-alert-item .score-value.medium {
    background: #fef3c7;
    color: #d97706;
}

.identity-alert-item .alert-notes {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-style: italic;
    margin: 0;
}

.identity-alert-item .alert-discrepancies {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.identity-alert-item .discrepancy-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.identity-alert-item .discrepancy-tag {
    background: #fee2e2;
    color: #dc2626;
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
}

.identity-alert-item .alert-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
}

@media (max-width: 600px) {
    .identity-alert-item {
        flex-direction: column;
    }

    .identity-alert-item .photo-comparison {
        justify-content: center;
    }

    .identity-alert-item .alert-actions {
        flex-direction: row;
        width: 100%;
        justify-content: flex-end;
    }
}

/* ==================== PENDING DEVICE APPROVALS SECTION ==================== */
.pending-approvals-section {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.pending-approvals-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.pending-approvals-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pending-approvals-title svg {
    color: #d97706;
}

.pending-approvals-title h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #92400e;
}

.pending-approvals-title p {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: #b45309;
}

.btn-approve-all {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.btn-approve-all:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4);
}

.btn-approve-all:active {
    transform: translateY(0);
}

.btn-approve-all:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.pending-approvals-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pending-approval-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding: 1rem;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.pending-approval-card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

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

.pending-approval-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1rem;
}

.pending-approval-details h4 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.pending-approval-details p {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.pending-approval-device {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.375rem;
    padding: 0.25rem 0.5rem;
    background: #fef3c7;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: #92400e;
}

.pending-approval-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-quick-approve,
.btn-quick-reject,
.btn-quick-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-quick-approve {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.btn-quick-approve:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-1px);
}

.btn-quick-reject {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.btn-quick-reject:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-1px);
}

.btn-quick-block {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
    box-shadow: 0 2px 4px rgba(107, 114, 128, 0.3);
}

.btn-quick-block:hover {
    background: linear-gradient(135deg, #4b5563, #374151);
    transform: translateY(-1px);
}

.btn-quick-approve:disabled,
.btn-quick-reject:disabled,
.btn-quick-block:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Loading spinner for buttons */
.btn-loading {
    position: relative;
    color: transparent !important;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

@media (max-width: 768px) {
    .pending-approvals-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .btn-approve-all {
        width: 100%;
        justify-content: center;
    }

    .pending-approval-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .pending-approval-actions {
        width: 100%;
    }

    .btn-quick-approve,
    .btn-quick-reject,
    .btn-quick-block {
        flex: 1;
        justify-content: center;
    }
}

/* Maintenance Schedule Styles */
.maintenance-schedule-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.maintenance-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid #10B981;
}

.maintenance-card.overdue {
    border-left-color: #EF4444;
    background: #FEF2F2;
}

.maintenance-card.urgent {
    border-left-color: #EF4444;
    background: #FEF2F2;
}

.maintenance-card.warning {
    border-left-color: #F59E0B;
    background: #FFFBEB;
}

.maintenance-card.interval {
    border-left-color: #6366F1;
}

.maintenance-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #10B981;
    border-radius: 50%;
    flex-shrink: 0;
}

.maintenance-icon svg {
    width: 20px;
    height: 20px;
    fill: white;
}

.maintenance-icon.last {
    background: #10B981;
}

.maintenance-icon.next {
    background: #3B82F6;
}

.maintenance-card.overdue .maintenance-icon.next,
.maintenance-card.urgent .maintenance-icon.next {
    background: #EF4444;
}

.maintenance-card.warning .maintenance-icon.next {
    background: #F59E0B;
}

.maintenance-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.maintenance-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.maintenance-value {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.maintenance-km {
    font-size: 0.875rem;
    color: #64748b;
}

.maintenance-status {
    font-size: 0.875rem;
    font-weight: 500;
    color: #10B981;
}

.maintenance-status.overdue,
.maintenance-status.urgent {
    color: #EF4444;
}

.maintenance-status.warning {
    color: #F59E0B;
}

.btn-edit-interval {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    background: #E0E7FF;
    color: #4F46E5;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 0.25rem;
}

.btn-edit-interval:hover {
    background: #C7D2FE;
}

/* Maintenance History Styles */
.maintenance-history-list {
    margin-top: 0.5rem;
}

.history-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    gap: 1rem;
}

.history-date {
    display: flex;
    flex-direction: column;
    min-width: 120px;
}

.history-date .date {
    font-weight: 500;
    color: #1e293b;
}

.history-date .km {
    font-size: 0.75rem;
    color: #64748b;
}

.history-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.history-details .type {
    font-weight: 500;
    color: #3B82F6;
}

.history-details .description {
    font-size: 0.875rem;
    color: #64748b;
}

.history-cost {
    font-weight: 600;
    color: #1e293b;
}

.no-history {
    text-align: center;
    padding: 2rem;
    color: #64748b;
}

.btn-log-maintenance {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
}

.section-link {
    margin-left: auto;
    font-size: 0.875rem;
    color: #3B82F6;
    text-decoration: none;
}

.section-link:hover {
    text-decoration: underline;
}

/* Maintenance Due Banner */
.maintenance-due-banner {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.maintenance-due-banner.has-due {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
}

.maintenance-due-banner.hidden {
    display: none !important;
}

.maintenance-due-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.maintenance-due-icon svg {
    width: 24px;
    height: 24px;
    fill: white;
}

.maintenance-due-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.maintenance-due-title {
    font-size: 1rem;
    font-weight: 600;
    color: white;
}

.maintenance-due-count {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
}

.maintenance-due-action {
    padding: 0.5rem 1.25rem;
    background: white;
    color: #64748b;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.maintenance-due-banner.has-due .maintenance-due-action {
    color: #DC2626;
}

.maintenance-due-action:hover {
    background: #f8fafc;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .maintenance-schedule-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .maintenance-due-banner {
        flex-wrap: wrap;
    }

    .maintenance-due-action {
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* Fuel Consumption Alerts Banner */
.consumption-alerts-banner {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.consumption-alerts-banner.has-alerts {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
}

.consumption-alerts-banner.hidden {
    display: none !important;
}

.consumption-alerts-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.consumption-alerts-icon svg {
    width: 24px;
    height: 24px;
    fill: white;
}

.consumption-alerts-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.consumption-alerts-title {
    font-size: 1rem;
    font-weight: 600;
    color: white;
}

.consumption-alerts-count {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
}

.consumption-alerts-action {
    padding: 0.5rem 1.25rem;
    background: white;
    color: #64748b;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.consumption-alerts-banner.has-alerts .consumption-alerts-action {
    color: #DC2626;
}

.consumption-alerts-action:hover {
    background: #f8fafc;
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .consumption-alerts-banner {
        flex-wrap: wrap;
    }

    .consumption-alerts-action {
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* Vehicle Details Modal - Extended */
.vehicle-details-modal {
    max-width: 800px !important;
    max-height: 95vh !important;
}

.vehicle-details-modal .modal-body {
    max-height: calc(95vh - 60px);
    overflow-y: auto;
    padding: 1.5rem;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.section-title svg {
    width: 20px;
    height: 20px;
    fill: #64748b;
}

.details-section.full-width {
    grid-column: 1 / -1;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

/* Vehicle Modal Tabs */
.vehicle-modal-tabs {
    display: flex;
    gap: 0.5rem;
    padding: 0 0 1rem 0;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 1.5rem;
}

.vehicle-tab-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: none;
    background: #f1f5f9;
    border-radius: 8px 8px 0 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.vehicle-tab-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.vehicle-tab-btn:hover {
    background: #e2e8f0;
    color: #475569;
}

.vehicle-tab-btn.active {
    background: #4F46E5;
    color: white;
}

.vehicle-tab-btn.active svg {
    fill: white;
}

/* Tab Badge for warnings */
.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 50%;
    margin-left: 0.25rem;
}

.tab-badge.urgent {
    background: #EF4444;
    color: white;
}

.tab-badge.warning {
    background: #F59E0B;
    color: white;
}

.vehicle-tab-btn.active .tab-badge {
    background: white;
}

.vehicle-tab-btn.active .tab-badge.urgent {
    color: #EF4444;
}

.vehicle-tab-btn.active .tab-badge.warning {
    color: #F59E0B;
}

/* Tab Content */
.vehicle-tab-content {
    min-height: 300px;
}

.vehicle-tab-pane {
    display: none;
}

.vehicle-tab-pane.active {
    display: block;
    animation: fadeIn 0.2s ease;
}

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

/* Tab Sections */
.tab-section {
    margin-bottom: 1.5rem;
}

.tab-section:last-child {
    margin-bottom: 0;
}

.maintenance-tab-content,
.insurance-tab-content {
    padding: 0;
}

/* Responsive tabs */
@media (max-width: 600px) {
    .vehicle-modal-tabs {
        flex-wrap: wrap;
    }

    .vehicle-tab-btn {
        flex: 1;
        min-width: 100px;
        justify-content: center;
        font-size: 0.75rem;
        padding: 0.625rem 0.5rem;
    }

    .vehicle-tab-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* Log Maintenance & Update Insurance Forms */
.log-maintenance-form,
.update-insurance-form {
    background: #f8fafc;
    border-radius: 8px;
    padding: 1rem;
}

.log-maintenance-form .form-row,
.update-insurance-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.log-maintenance-form .form-group,
.update-insurance-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.log-maintenance-form .form-group.full-width,
.update-insurance-form .form-group.full-width {
    grid-column: 1 / -1;
    margin-bottom: 1rem;
}

.log-maintenance-form label,
.update-insurance-form label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.log-maintenance-form input,
.log-maintenance-form select,
.log-maintenance-form textarea,
.update-insurance-form input,
.update-insurance-form select,
.update-insurance-form textarea {
    padding: 0.625rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #1e293b;
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.log-maintenance-form input:focus,
.log-maintenance-form select:focus,
.log-maintenance-form textarea:focus,
.update-insurance-form input:focus,
.update-insurance-form select:focus,
.update-insurance-form textarea:focus {
    outline: none;
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.log-maintenance-form textarea,
.update-insurance-form textarea {
    resize: vertical;
    min-height: 60px;
}

.log-maintenance-form .btn-primary,
.update-insurance-form .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #4F46E5, #4338CA);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.log-maintenance-form .btn-primary:hover,
.update-insurance-form .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.log-maintenance-form .btn-primary svg,
.update-insurance-form .btn-primary svg {
    width: 18px;
    height: 18px;
    fill: white;
}

@media (max-width: 600px) {
    .log-maintenance-form .form-row,
    .update-insurance-form .form-row {
        grid-template-columns: 1fr;
    }
}

/* Damages Tab Styles */
.damages-tab-content {
    padding: 0;
}

.damages-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.damage-report-item {
    background: #f8fafc;
    border-radius: 8px;
    padding: 1rem;
    border-left: 3px solid #64748b;
}

.damage-report-item.new-damage {
    border-left-color: #EF4444;
    background: #FEF2F2;
}

.damage-report-item.severe {
    border-left-color: #DC2626;
}

.damage-report-item.moderate {
    border-left-color: #F59E0B;
}

.damage-report-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.damage-date {
    font-weight: 500;
    color: #1e293b;
}

.damage-source {
    font-size: 0.75rem;
    color: #64748b;
    background: #e2e8f0;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
}

.ai-badge {
    font-size: 0.7rem;
    font-weight: 600;
    color: #7C3AED;
    background: #EDE9FE;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
}

.new-badge {
    font-size: 0.7rem;
    font-weight: 600;
    color: #EF4444;
    background: #FEE2E2;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
}

.damage-report-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.damage-type-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    color: #1e293b;
    background: #e2e8f0;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    text-transform: capitalize;
    width: fit-content;
}

.damage-type-badge.severe {
    background: #FEE2E2;
    color: #DC2626;
}

.damage-type-badge.moderate {
    background: #FEF3C7;
    color: #B45309;
}

.damage-description {
    font-size: 0.875rem;
    color: #475569;
    margin: 0.25rem 0;
}

.damage-driver, .damage-photos {
    font-size: 0.75rem;
    color: #94a3b8;
}

.no-damages {
    text-align: center;
    padding: 2rem;
    color: #64748b;
}

/* Gallery Tab Styles */
.gallery-tab-content {
    padding: 0;
}

.gallery-filter-info {
    font-size: 0.75rem;
    font-weight: 400;
    color: #94a3b8;
    margin-left: auto;
}

.vehicle-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}

.gallery-photo-item {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
}

.gallery-photo-item:hover {
    transform: scale(1.02);
}

.gallery-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-photo-item .photo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.photo-position {
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    text-transform: capitalize;
}

.photo-date, .photo-type {
    font-size: 0.625rem;
    color: rgba(255,255,255,0.7);
}

.gallery-photo-item .photo-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
}

.photo-badge.damage {
    background: #EF4444;
    color: white;
}

.photo-badge.ai {
    background: #7C3AED;
    color: white;
}

.gallery-photo-item.damage {
    border: 2px solid #EF4444;
}

.gallery-photo-item.ai-scan {
    border: 2px solid #7C3AED;
}

.no-photos {
    text-align: center;
    padding: 2rem;
    color: #64748b;
    grid-column: 1 / -1;
}

/* Tab badge info style */
.tab-badge.info {
    background: #3B82F6;
    color: white;
}

@media (max-width: 600px) {
    .vehicle-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Searchable Select for Vehicle Selection */
.searchable-select-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vehicle-search-input {
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.vehicle-search-input:focus {
    outline: none;
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.vehicle-search-input::placeholder {
    color: #94a3b8;
}

.searchable-select-wrapper select {
    width: 100%;
}

/* ==================== PHOTO VIEWER FULLSCREEN ==================== */
.photo-viewer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.photo-viewer-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-viewer-content img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.photo-viewer-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

.photo-viewer-close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: rotate(90deg);
}

.photo-viewer-close svg {
    width: 24px;
    height: 24px;
}

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

/* ==================== DAMAGE PHOTOS GRID ==================== */
.damage-photo-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.damage-photo-item:hover {
    transform: scale(1.05);
}

.damage-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==================== DETAIL SECTIONS ==================== */
.damage-details {
    padding: 1rem;
}

.detail-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

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

.detail-section h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1rem;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-value {
    font-size: 0.9375rem;
    color: #1e293b;
    font-weight: 500;
}

/* ==================== NOTIFICATION ANIMATIONS ==================== */
@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

/* ==================== VEHICLE INFO IN TABLE ==================== */
.vehicle-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.vehicle-name {
    font-weight: 600;
    color: #1e293b;
}

.vehicle-plate {
    font-size: 0.8125rem;
    color: #64748b;
}

/* ==================== RESPONSIVE DAMAGE PHOTOS ==================== */
@media (max-width: 768px) {
    .damage-photos-grid {
        grid-template-columns: 1fr;
    }
    
    .photo-viewer-close {
        top: 10px;
        right: 10px;
    }

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

/* ==================== FLEET VEHICLES DASHBOARD ==================== */
.fleet-dashboard {
    margin-bottom: 1.5rem;
}

.stats-row {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

.primary-stats {
    grid-template-columns: repeat(4, 1fr);
}

.alert-stats {
    grid-template-columns: repeat(4, 1fr);
}

/* Stat Cards */
.stat-card {
    background: var(--card-background);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.stat-total::before { background: var(--primary-color); }
.stat-active::before { background: var(--success-color); }
.stat-maintenance::before { background: var(--warning-color); }
.stat-inactive::before { background: var(--danger-color); }

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-total .stat-icon { background: rgba(30, 64, 175, 0.1); color: var(--primary-color); }
.stat-active .stat-icon { background: rgba(16, 185, 129, 0.1); color: var(--success-color); }
.stat-maintenance .stat-icon { background: rgba(245, 158, 11, 0.1); color: var(--warning-color); }
.stat-inactive .stat-icon { background: rgba(239, 68, 68, 0.1); color: var(--danger-color); }

.stat-icon svg {
    width: 24px;
    height: 24px;
}

.stat-content {
    flex: 1;
}

.stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-trend {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.stat-trend.positive {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

/* Alert Cards */
.alert-card {
    background: var(--card-background);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
}

.alert-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.alert-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alert-icon svg {
    width: 18px;
    height: 18px;
}

.alert-warning .alert-icon { background: rgba(245, 158, 11, 0.15); color: var(--warning-color); }
.alert-danger .alert-icon { background: rgba(239, 68, 68, 0.15); color: var(--danger-color); }
.alert-info .alert-icon { background: rgba(6, 182, 212, 0.15); color: var(--accent-color); }

.alert-content {
    flex: 1;
}

.alert-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.alert-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Vehicles Action Bar */
.vehicles-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.action-bar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.action-bar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* View Toggle */
.view-toggle {
    display: flex;
    background: var(--card-background);
    border-radius: var(--radius-md);
    padding: 0.25rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.view-btn {
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-btn svg {
    width: 18px;
    height: 18px;
}

.view-btn:hover {
    color: var(--text-primary);
}

.view-btn.active {
    background: var(--primary-color);
    color: white;
}

/* Vehicles Table */
.vehicles-table-container {
    background: var(--card-background);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.vehicles-table {
    width: 100%;
    border-collapse: collapse;
}

.vehicles-table th {
    background: #f8fafc;
    padding: 0.875rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}

.vehicles-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.vehicles-table tbody tr:hover {
    background: #f8fafc;
}

.vehicles-table tbody tr:last-child td {
    border-bottom: none;
}

/* Vehicle Cell */
.vehicle-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.vehicle-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.vehicle-avatar.pickup { background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%); color: white; }
.vehicle-avatar.suv { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; }
.vehicle-avatar.van { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; }
.vehicle-avatar.sedan { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); color: white; }
.vehicle-avatar.truck { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; }
.vehicle-avatar.default { background: linear-gradient(135deg, #64748b 0%, #475569 100%); color: white; }

.vehicle-avatar svg {
    width: 24px;
    height: 24px;
}

.vehicle-details {
    flex: 1;
    min-width: 0;
}

.vehicle-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.125rem;
}

.vehicle-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Plate Cell */
.plate-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.vehicle-id-badge {
    font-weight: 500;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.8rem;
    color: #6366f1;
    background: #eef2ff;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    display: inline-block;
}

.plate-number {
    font-weight: 600;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.9rem;
    color: var(--text-primary);
    background: #f1f5f9;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    display: inline-block;
}

.vin-number {
    font-size: 0.7rem;
    color: var(--text-light);
    font-family: monospace;
}

/* Driver Cell */
.driver-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.driver-avatar-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-light);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
}

.driver-name {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.no-driver {
    color: var(--text-light);
    font-style: italic;
    font-size: 0.85rem;
}

/* Type Badge */
.type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
}

.type-badge svg {
    width: 14px;
    height: 14px;
}

.type-badge.pickup { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.type-badge.suv { background: rgba(16, 185, 129, 0.1); color: #059669; }
.type-badge.van { background: rgba(245, 158, 11, 0.1); color: #d97706; }
.type-badge.sedan { background: rgba(139, 92, 246, 0.1); color: #6d28d9; }
.type-badge.truck { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
.type-badge.checkin { background: rgba(16, 185, 129, 0.1); color: #059669; }
.type-badge.checkout { background: rgba(245, 158, 11, 0.1); color: #d97706; }

/* Attendance Log Styles */
.selfie-thumbnail {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.selfie-thumbnail:hover {
    transform: scale(1.1);
}

.no-photo {
    color: var(--text-secondary);
}

.overtime-badge {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border-radius: var(--radius-xs);
    font-size: 0.625rem;
    font-weight: 600;
    margin-left: 0.25rem;
}

.remote-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(139, 92, 246, 0.1);
    color: #6d28d9;
    border-radius: 50%;
    font-size: 0.625rem;
    font-weight: 600;
    margin-left: 0.375rem;
}

.date-time-cell {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.date-time-cell .date {
    font-weight: 500;
    color: var(--text-primary);
}

.date-time-cell .time {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.log-number {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--primary);
    background: var(--primary-light);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
    display: inline-block;
    min-width: 140px;
    text-align: center;
}

.driver-cell {
    display: flex;
    align-items: center;
}

.notes-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Searchable Dropdown */
.searchable-dropdown {
    position: relative;
    min-width: 160px;
}

.searchable-dropdown .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    min-width: 140px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.searchable-dropdown .dropdown-toggle:hover {
    border-color: #cbd5e1;
}

.searchable-dropdown .dropdown-toggle:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.searchable-dropdown .dropdown-toggle svg {
    flex-shrink: 0;
    transition: transform 0.2s;
}

.searchable-dropdown.open .dropdown-toggle svg {
    transform: rotate(180deg);
}

.searchable-dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
    min-width: 200px;
}

.searchable-dropdown.open .dropdown-menu {
    display: block;
}

.searchable-dropdown .dropdown-search {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.875rem;
    outline: none;
}

.searchable-dropdown .dropdown-search:focus {
    background: #f8fafc;
}

.searchable-dropdown .dropdown-options {
    max-height: 240px;
    overflow-y: auto;
}

.searchable-dropdown .dropdown-option {
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s;
}

.searchable-dropdown .dropdown-option:hover {
    background: #f1f5f9;
}

.searchable-dropdown .dropdown-option.selected {
    background: rgba(79, 70, 229, 0.1);
    color: var(--primary-color);
    font-weight: 500;
}

/* Date Range Group */
.date-range-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-range-group .form-input {
    width: 140px;
    padding: 0.5rem 0.625rem;
    font-size: 0.875rem;
}

.date-separator {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

/* Records Info */
.records-info {
    padding: 0.75rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.records-info span {
    font-weight: 600;
    color: var(--text-primary);
}

/* Pagination Container */
.pagination-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-top: 1px solid #e2e8f0;
    margin-top: 1rem;
}

.pagination-info {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.pagination-info span {
    font-weight: 500;
    color: var(--text-primary);
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    background: white;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.pagination-btn:hover:not(:disabled) {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: var(--text-primary);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-numbers {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0 0.5rem;
}

.page-num {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    background: white;
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.page-num:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.page-num.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    font-weight: 500;
}

.page-ellipsis {
    padding: 0 0.25rem;
    color: var(--text-secondary);
}

.page-size-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.page-size-selector select {
    padding: 0.375rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    cursor: pointer;
}

/* Sortable Table Headers */
.sortable {
    cursor: pointer;
    user-select: none;
}

.sortable:hover {
    background: #f1f5f9;
}

.sortable svg {
    opacity: 0.4;
    transition: opacity 0.2s, transform 0.2s;
    vertical-align: middle;
    margin-left: 0.25rem;
}

.sortable:hover svg {
    opacity: 0.7;
}

.sortable.sort-asc svg,
.sortable.sort-desc svg {
    opacity: 1;
    color: var(--primary-color);
}

.sortable.sort-asc svg {
    transform: rotate(180deg);
}

/* Empty State Enhanced */
.empty-state-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.empty-state-content svg {
    opacity: 0.3;
    margin-bottom: 1rem;
}

.empty-state-content p {
    margin: 0.25rem 0;
}

.empty-state-content .hint {
    font-size: 0.875rem;
    opacity: 0.7;
}

/* Odometer Cell */
.odometer-cell {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.odometer-range {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.8125rem;
}

.odometer-diff {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Photo Modal Enhanced */
.photo-modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.photo-details {
    text-align: center;
}

.photo-driver-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.photo-type-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.photo-type-badge.checkin {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.photo-type-badge.checkout {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.photo-datetime {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0.5rem 0 0 0;
}

.photo-modal-image {
    max-width: 100%;
    max-height: 400px;
    border-radius: var(--radius-md);
    object-fit: contain;
}

/* Attendance Log Table Specific */
.attendance-log-table th {
    white-space: nowrap;
}

.attendance-log-table td {
    vertical-align: middle;
}

.driver-name {
    font-weight: 500;
}

.vehicle-name {
    font-size: 0.875rem;
}

/* Button Small Variant */
.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

/* Date Input in Filter Group */
.date-input {
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    background: white;
    color: var(--text-primary);
    cursor: pointer;
}

.date-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Table Pagination */
.table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: white;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    border-top: 1px solid #e2e8f0;
    margin-top: -1px;
}

.table-pagination .pagination-info {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.table-pagination .pagination-info span {
    font-weight: 600;
    color: var(--text-primary);
}

.table-pagination .pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.table-pagination .pagination-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    background: white;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.table-pagination .pagination-btn:hover:not(:disabled) {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: var(--text-primary);
}

.table-pagination .pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.table-pagination .pagination-btn svg {
    width: 16px;
    height: 16px;
}

.table-pagination .page-numbers {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.table-pagination .page-num {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    background: white;
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.table-pagination .page-num:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.table-pagination .page-num.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    font-weight: 500;
}

.table-pagination .page-ellipsis {
    padding: 0 0.25rem;
    color: var(--text-secondary);
}

.table-pagination .page-size-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.table-pagination .page-size-selector select {
    padding: 0.375rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    cursor: pointer;
}

/* Distance Badge */
.distance-badge {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border-radius: var(--radius-xs);
    font-size: 0.6875rem;
    font-weight: 500;
    margin-left: 0.375rem;
}

/* Attendance Log Responsive */
@media (max-width: 1024px) {
    .vehicles-action-bar .action-bar-left {
        flex-wrap: wrap;
    }

    .vehicles-action-bar .filter-group {
        flex-wrap: wrap;
    }

    .date-range-group {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .vehicles-action-bar {
        flex-direction: column;
        gap: 1rem;
    }

    .vehicles-action-bar .action-bar-left,
    .vehicles-action-bar .action-bar-right {
        width: 100%;
    }

    .vehicles-action-bar .search-box {
        width: 100%;
    }

    .vehicles-action-bar .filter-group {
        width: 100%;
        gap: 0.5rem;
    }

    .searchable-dropdown {
        flex: 1;
        min-width: 120px;
    }

    .date-range-group {
        width: 100%;
    }

    .date-range-group .form-input {
        flex: 1;
        width: auto;
    }

    .pagination-container {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .pagination-info,
    .page-size-selector {
        width: 100%;
        justify-content: center;
    }

    .attendance-log-table {
        font-size: 0.8125rem;
    }

    .attendance-log-table th,
    .attendance-log-table td {
        padding: 0.5rem;
    }

    .selfie-thumbnail {
        width: 32px;
        height: 32px;
    }
}

/* Fuel Icon */
.fuel-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

.fuel-icon svg {
    width: 12px;
    height: 12px;
}

/* Status Badge Enhanced */
.status-badge-lg {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge-lg.active {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.status-badge-lg.maintenance {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.status-badge-lg.inactive {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.status-badge-lg.active .status-dot { background: var(--success-color); }
.status-badge-lg.maintenance .status-dot { background: var(--warning-color); }
.status-badge-lg.inactive .status-dot { background: var(--danger-color); }
.status-badge-lg.sold .status-dot { background: #6b7280; }
.status-badge-lg.subreturned .status-dot { background: #8b5cf6; }

.status-badge-lg.sold {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.status-badge-lg.subreturned {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

/* Status Options in Modal */
.status-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.status-option {
    display: block;
    cursor: pointer;
}

.status-option input[type="radio"] {
    display: none;
}

.status-option-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.status-option-label .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.status-option-label.active .status-dot { background: var(--success-color); }
.status-option-label.inactive .status-dot { background: var(--danger-color); }
.status-option-label.maintenance .status-dot { background: var(--warning-color); }
.status-option-label.sold .status-dot { background: #6b7280; }
.status-option-label.subreturned .status-dot { background: #8b5cf6; }

.status-option input[type="radio"]:checked + .status-option-label {
    border-color: var(--primary-color);
    background: rgba(79, 70, 229, 0.05);
}

.status-option input[type="radio"]:checked + .status-option-label.active {
    border-color: var(--success-color);
    background: rgba(16, 185, 129, 0.05);
}

.status-option input[type="radio"]:checked + .status-option-label.inactive {
    border-color: var(--danger-color);
    background: rgba(239, 68, 68, 0.05);
}

.status-option input[type="radio"]:checked + .status-option-label.maintenance {
    border-color: var(--warning-color);
    background: rgba(245, 158, 11, 0.05);
}

.status-option input[type="radio"]:checked + .status-option-label.sold {
    border-color: #6b7280;
    background: rgba(107, 114, 128, 0.05);
}

.status-option input[type="radio"]:checked + .status-option-label.subreturned {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.05);
}

.status-option-label:hover {
    background: var(--background-color);
}

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

/* Mileage Cell */
.mileage-cell {
    font-weight: 600;
    color: var(--text-primary);
}

.mileage-value {
    font-family: 'Monaco', 'Menlo', monospace;
}

/* Alerts Cell */
.alerts-cell {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.alert-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.7rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.alert-badge:hover {
    transform: scale(1.1);
}

.alert-badge.service { background: rgba(245, 158, 11, 0.15); color: var(--warning-color); }
.alert-badge.insurance { background: rgba(239, 68, 68, 0.15); color: var(--danger-color); }
.alert-badge.license { background: rgba(239, 68, 68, 0.15); color: var(--danger-color); }

.alert-badge svg {
    width: 12px;
    height: 12px;
}

/* Actions Cell */
.actions-cell-new {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;
}

.actions-cell-new .action-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.75rem;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
}

.actions-cell-new .action-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.actions-cell-new .action-btn span {
    display: inline;
}

/* View Button - Teal */
.actions-cell-new .action-btn.view {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: white;
    box-shadow: 0 2px 4px rgba(6, 182, 212, 0.3);
}
.actions-cell-new .action-btn.view:hover {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(6, 182, 212, 0.4);
}

/* Quick Actions Button - Purple */
.actions-cell-new .action-btn.quick {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
}
.actions-cell-new .action-btn.quick:hover {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(139, 92, 246, 0.4);
}

/* Edit Button - Blue */
.actions-cell-new .action-btn.edit {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}
.actions-cell-new .action-btn.edit:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
}

/* Status Button - Orange */
.actions-cell-new .action-btn.status {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}
.actions-cell-new .action-btn.status:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.4);
}

/* Delete Button - Red */
.actions-cell-new .action-btn.delete {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}
.actions-cell-new .action-btn.delete:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4);
}

/* Tooltip for action buttons */
.actions-cell-new .action-btn::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.375rem 0.625rem;
    background: var(--bg-dark);
    color: white;
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    margin-bottom: 6px;
    z-index: 10;
}

.actions-cell-new .action-btn::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--bg-dark);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    margin-bottom: -4px;
    z-index: 10;
}

.actions-cell-new .action-btn:hover::after,
.actions-cell-new .action-btn:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Action button active state */
.actions-cell-new .action-btn:active {
    transform: translateY(0);
}

/* Responsive - hide text on smaller screens */
@media (max-width: 1200px) {
    .actions-cell-new .action-btn {
        padding: 0.5rem;
    }
    .actions-cell-new .action-btn span {
        display: none;
    }
    .actions-cell-new .action-btn svg {
        width: 18px;
        height: 18px;
    }
}

/* ==================== VEHICLE CARD VIEW ==================== */
.vehicles-card-container {
    padding: 0;
}

.vehicles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.vehicle-card {
    background: var(--card-background);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.2s ease;
}

.vehicle-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.vehicle-card-header {
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--border-color);
    background: #f8fafc;
}

.vehicle-card-avatar {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.vehicle-card-avatar.pickup { background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%); color: white; }
.vehicle-card-avatar.suv { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; }
.vehicle-card-avatar.van { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; }
.vehicle-card-avatar.sedan { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); color: white; }
.vehicle-card-avatar.truck { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; }
.vehicle-card-avatar.default { background: linear-gradient(135deg, #64748b 0%, #475569 100%); color: white; }

.vehicle-card-avatar svg {
    width: 28px;
    height: 28px;
}

.vehicle-card-title {
    flex: 1;
}

.vehicle-card-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.vehicle-card-identifiers {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.vehicle-card-plate {
    font-family: monospace;
    font-size: 0.85rem;
    background: white;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.vehicle-card-identifiers .vehicle-id-badge {
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
}

.vehicle-card-status {
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
}

.vehicle-card-status.active { background: rgba(16, 185, 129, 0.1); color: var(--success-color); }
.vehicle-card-status.maintenance { background: rgba(245, 158, 11, 0.1); color: var(--warning-color); }
.vehicle-card-status.inactive { background: rgba(239, 68, 68, 0.1); color: var(--danger-color); }

.vehicle-card-body {
    padding: 1rem;
}

.vehicle-card-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.vehicle-card-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vehicle-card-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.vehicle-card-stat-icon svg {
    width: 16px;
    height: 16px;
}

.vehicle-card-stat-info {
    flex: 1;
}

.vehicle-card-stat-value {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.vehicle-card-stat-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.vehicle-card-driver {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.vehicle-card-driver-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-light);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.vehicle-card-driver-info {
    flex: 1;
}

.vehicle-card-driver-name {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.vehicle-card-driver-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.vehicle-card-alerts {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.vehicle-card-alert {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 500;
}

.vehicle-card-alert.warning { background: rgba(245, 158, 11, 0.1); color: var(--warning-color); }
.vehicle-card-alert.danger { background: rgba(239, 68, 68, 0.1); color: var(--danger-color); }

.vehicle-card-alert svg {
    width: 12px;
    height: 12px;
}

.vehicle-card-footer {
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.vehicle-card-btn {
    flex: 1;
    padding: 0.625rem 0.75rem;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.vehicle-card-btn svg {
    width: 16px;
    height: 16px;
}

/* Primary Button - Purple gradient */
.vehicle-card-btn.primary {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);
}
.vehicle-card-btn.primary:hover {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.4);
}

/* Secondary Button - Teal gradient */
.vehicle-card-btn.secondary {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: white;
    box-shadow: 0 2px 6px rgba(6, 182, 212, 0.3);
}
.vehicle-card-btn.secondary:hover {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(6, 182, 212, 0.4);
}

.vehicle-card-btn:active {
    transform: translateY(0);
}

/* ==================== QUICK ACTIONS MODAL ==================== */
.quick-actions-vehicle-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-action-btn:hover {
    border-color: var(--primary-light);
    background: rgba(59, 130, 246, 0.05);
}

.quick-action-btn svg {
    width: 24px;
    height: 24px;
    color: var(--primary-color);
}

.quick-action-btn span {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
}

.quick-action-form {
    padding: 1rem;
    background: #f8fafc;
    border-radius: var(--radius-md);
    margin-top: 1rem;
}

.quick-action-form h4 {
    margin-bottom: 1rem;
    font-size: 1rem;
    color: var(--text-primary);
}

/* ==================== RESPONSIVE STYLES ==================== */
@media (max-width: 1200px) {
    .primary-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .alert-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .primary-stats,
    .alert-stats {
        grid-template-columns: 1fr;
    }

    .vehicles-action-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .action-bar-left,
    .action-bar-right {
        width: 100%;
        justify-content: space-between;
    }

    .filter-group {
        flex-wrap: wrap;
    }

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

    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vehicles-table th,
    .vehicles-table td {
        padding: 0.75rem 0.5rem;
    }

    .th-driver,
    .th-type,
    .th-alerts {
        display: none;
    }

    .vehicles-table td:nth-child(3),
    .vehicles-table td:nth-child(4),
    .vehicles-table td:nth-child(7) {
        display: none;
    }
}

/* ==================== MILEAGE GAPS PAGE ==================== */
.gap-details {
    background: var(--background-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

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

.detail-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.detail-value {
    font-weight: 500;
    color: var(--text-primary);
}

/* Status badge colors for mileage gaps */
.status-badge.status-warning {
    background: #FEF3C7;
    color: #D97706;
}

.status-badge.status-info {
    background: #DBEAFE;
    color: #2563EB;
}

.status-badge.status-success {
    background: #D1FAE5;
    color: #059669;
}

/* ==================== DAMAGES LOG STYLES ==================== */
.date-time-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.date-time-cell .date {
    font-weight: 500;
    color: var(--text-primary);
}

.date-time-cell .time {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.detected-at-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.detected-at-badge.detected-login {
    background: #DBEAFE;
    color: #1D4ED8;
}

.detected-at-badge.detected-logout {
    background: #FEF3C7;
    color: #B45309;
}

.ai-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    background: linear-gradient(135deg, #8B5CF6, #EC4899);
    color: white;
    margin-left: 6px;
    text-transform: uppercase;
}

.location-type {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.location-type .damage-type {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: capitalize;
}

/* ==================== TRIP REQUESTS BANNER ==================== */
.trip-requests-banner {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    color: white;
    box-shadow: var(--shadow-md);
}

.trip-requests-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}

.trip-requests-icon svg {
    width: 24px;
    height: 24px;
    fill: white;
}

.trip-requests-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.trip-requests-title {
    font-weight: 600;
    font-size: 1rem;
}

.trip-requests-count {
    font-size: 0.875rem;
    opacity: 0.9;
}

.trip-requests-action {
    background: white;
    color: #1d4ed8;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.trip-requests-action:hover {
    background: #f0f9ff;
    transform: translateY(-1px);
}

/* ==================== MONEY REQUESTS BANNER ==================== */
.money-requests-banner {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    color: white;
    box-shadow: var(--shadow-md);
}

.money-requests-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}

.money-requests-icon svg {
    width: 24px;
    height: 24px;
    fill: white;
}

.money-requests-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.money-requests-title {
    font-weight: 600;
    font-size: 1rem;
}

.money-requests-count {
    font-size: 0.875rem;
    opacity: 0.9;
}

.money-requests-action {
    background: white;
    color: #059669;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.money-requests-action:hover {
    background: #ecfdf5;
    transform: translateY(-1px);
}

/* ==================== TRIP REQUESTS MODAL ==================== */
.trip-requests-modal {
    max-width: 700px;
    max-height: 85vh;
}

.trip-requests-content {
    max-height: 60vh;
    overflow-y: auto;
    padding: 1rem;
}

.trip-request-item {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.trip-request-item:last-child {
    margin-bottom: 0;
}

.trip-request-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.trip-driver-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.trip-driver-info .request-number {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary-color, #2563eb);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    background: #eff6ff;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 0.25rem;
}

.trip-driver-info .driver-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.trip-destination {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.trip-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.trip-status-badge.requested {
    background: #fef3c7;
    color: #b45309;
}

.trip-status-badge.approved {
    background: #d1fae5;
    color: #059669;
}

.trip-status-badge.rejected {
    background: #fee2e2;
    color: #dc2626;
}

.trip-status-badge.started,
.trip-status-badge.in_progress {
    background: #dbeafe;
    color: #1d4ed8;
}

.trip-status-badge.completed {
    background: #e0e7ff;
    color: #4338ca;
}

.trip-request-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.trip-request-details .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.trip-request-details .detail-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.trip-request-details .detail-value {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
}

.trip-request-details .budget-amount {
    color: #059669;
    font-weight: 600;
}

.trip-request-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.btn-small {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-approve {
    background: #10b981;
    color: white;
}

.btn-approve:hover {
    background: #059669;
}

.btn-reject {
    background: #ef4444;
    color: white;
}

.btn-reject:hover {
    background: #dc2626;
}

/* ==================== MONEY REQUESTS MODAL ==================== */
.money-requests-modal {
    max-width: 600px;
    max-height: 85vh;
}

.money-requests-content {
    max-height: 60vh;
    overflow-y: auto;
    padding: 1rem;
}

.money-request-item {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.money-request-item:last-child {
    margin-bottom: 0;
}

.money-request-item.replenishment {
    border-left: 4px solid #10b981;
}

.money-request-item.trip_request {
    border-left: 4px solid #3b82f6;
}

.money-request-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.request-driver-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.request-driver-info .driver-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.request-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.request-type-badge.trip_request {
    background: #dbeafe;
    color: #1d4ed8;
}

.request-type-badge.replenishment {
    background: #d1fae5;
    color: #059669;
}

.request-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #059669;
}

.money-request-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.money-request-details .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.money-request-details .detail-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.money-request-details .detail-value {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
}

.money-request-details .balance-amount {
    font-weight: 600;
}

.money-request-details .balance-amount.low {
    color: #dc2626;
}

.money-request-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* ==================== TRIPS PAGE STYLES ==================== */
.trips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1rem;
    padding: 1rem 0;
}

.trip-request-card {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}

.trip-request-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.trip-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid var(--border-color);
}

.trip-card-body {
    padding: 1rem;
}

.trip-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--border-color);
}

.trip-detail-row:last-child {
    border-bottom: none;
}

.trip-detail-row .label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.trip-detail-row .value {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
}

.trip-detail-row .value.budget {
    color: #059669;
    font-weight: 600;
}

.trip-card-actions {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--background-color);
    border-top: 1px solid var(--border-color);
}

.trip-card-actions button {
    flex: 1;
    padding: 0.5rem;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.trip-card-actions .btn-approve {
    background: #10b981;
    color: white;
}

.trip-card-actions .btn-approve:hover {
    background: #059669;
}

.trip-card-actions .btn-reject {
    background: #ef4444;
    color: white;
}

.trip-card-actions .btn-reject:hover {
    background: #dc2626;
}

.trip-card-actions .btn-details {
    background: #3b82f6;
    color: white;
}

.trip-card-actions .btn-details:hover {
    background: #1d4ed8;
}

/* Trip table styles */
.budget-cell {
    color: #059669;
    font-weight: 500;
}

.spent-cell {
    color: #dc2626;
    font-weight: 500;
}

.btn-icon {
    padding: 0.375rem;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--background-color);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon svg {
    width: 18px;
    height: 18px;
    fill: var(--text-secondary);
}

.btn-icon:hover {
    background: var(--border-color);
}

.btn-icon.approve svg {
    fill: #10b981;
}

.btn-icon.approve:hover {
    background: #d1fae5;
}

.btn-icon.reject svg {
    fill: #ef4444;
}

.btn-icon.reject:hover {
    background: #fee2e2;
}

.btn-icon.cancel svg {
    fill: #f59e0b;
}

.btn-icon.cancel:hover {
    background: #fef3c7;
}

.btn-icon.complete svg {
    fill: #10b981;
}

.btn-icon.complete:hover {
    background: #d1fae5;
}

.action-buttons {
    display: flex;
    gap: 0.25rem;
}

/* Trip details modal */
.trip-details-modal {
    max-width: 800px;
    max-height: 90vh;
}

.trip-details-content {
    max-height: 70vh;
    overflow-y: auto;
    padding: 1rem;
}

.trip-details-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.trip-info-section {
    background: var(--background-color);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.trip-info-section h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--text-primary);
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-color);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-item .label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.info-item .value {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}

.info-item .value.budget {
    color: #059669;
    font-weight: 600;
}

.info-item .value.spent {
    color: #dc2626;
    font-weight: 600;
}

.info-item .value.negative {
    color: #dc2626;
}

/* Passengers list */
.passengers-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.passenger-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Vehicle segments */
.vehicle-segments-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.vehicle-segment {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.75rem;
}

.segment-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.segment-number {
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.vehicle-name {
    font-weight: 600;
    color: var(--text-primary);
}

.vehicle-plate {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.segment-details {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.change-reason {
    font-size: 0.8rem;
    color: #f59e0b;
    font-style: italic;
    margin-top: 0.5rem;
}

.total-km {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 2px solid var(--primary-color);
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 600;
}

/* Expenses mini table */
.expenses-table-container {
    overflow-x: auto;
}

.mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.mini-table th,
.mini-table td {
    padding: 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.mini-table th {
    background: #f8fafc;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Timeline */
.trip-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.timeline-item {
    display: flex;
    gap: 1rem;
    padding: 0.5rem;
    border-left: 3px solid var(--border-color);
    padding-left: 1rem;
}

.timeline-item .time {
    font-size: 0.8rem;
    color: var(--text-secondary);
    min-width: 140px;
}

.timeline-item .event {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.timeline-item.approved {
    border-left-color: #10b981;
}

.timeline-item.rejected {
    border-left-color: #ef4444;
}

.timeline-item.started {
    border-left-color: #3b82f6;
}

.timeline-item.completed {
    border-left-color: #8b5cf6;
}

.timeline-item.cancelled {
    border-left-color: #f59e0b;
}

/* Money requests list in details */
.money-requests-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.money-request-item.pending {
    background: #fef3c7;
}

.money-request-item.approved {
    background: #d1fae5;
}

.money-request-item.rejected {
    background: #fee2e2;
}

/* Summary card icon colors */
.summary-icon.pending {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.summary-icon.active {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.summary-icon.completed {
    background: linear-gradient(135deg, #10b981, #059669);
}

/* Modal action buttons */
.modal-actions .btn-cancel {
    background: #f59e0b;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
}

.modal-actions .btn-cancel:hover {
    background: #d97706;
}

/* ==================== ADVANCES PAGE - MONEY REQUESTS ==================== */
.money-requests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    padding: 1rem 0;
}

.money-request-card {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.money-request-card:hover {
    box-shadow: var(--shadow-md);
}

.money-request-card.replenishment {
    border-left: 4px solid #10b981;
}

.money-request-card.trip_request {
    border-left: 4px solid #3b82f6;
}

.request-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid var(--border-color);
}

.request-card-body {
    padding: 1rem;
}

.request-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
}

.request-detail-row .label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.request-detail-row .value {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
}

.request-detail-row .value.balance.low {
    color: #dc2626;
    font-weight: 600;
}

.request-card-actions {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--background-color);
    border-top: 1px solid var(--border-color);
}

.request-card-actions button {
    flex: 1;
    padding: 0.5rem;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.section-header .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 0.5rem;
    background: #ef4444;
    color: white;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

/* Bank info styles in driver balances table */
.bank-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.bank-info .bank-name {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
}

.bank-info .account-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.no-bank-details {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Cash register styles */
.amount-in {
    color: #10b981;
    font-weight: 600;
}

.amount-out {
    color: #dc2626;
    font-weight: 600;
}

/* ==================== LOADING STATES ==================== */
/* Spinner */
.spinner {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner-sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

.spinner-lg {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 3px;
}

.spinner-light {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: white;
}

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

/* Loading overlay */
.loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: inherit;
}

.loading-overlay.dark {
    background: rgba(0, 0, 0, 0.5);
}

/* Skeleton loading */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--gray-200) 0%,
        var(--gray-100) 50%,
        var(--gray-200) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-text.medium {
    width: 80%;
}

.skeleton-title {
    height: 1.5rem;
    width: 40%;
    margin-bottom: 1rem;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-button {
    height: 40px;
    width: 100px;
    border-radius: var(--radius-md);
}

.skeleton-card {
    height: 120px;
    border-radius: var(--radius-lg);
}

.skeleton-table-row {
    height: 48px;
    margin-bottom: 0.25rem;
}

@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Empty state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.empty-state-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.empty-state-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    max-width: 300px;
    margin-bottom: 1.5rem;
}

/* ==================== STANDARDIZED FORM INPUTS ==================== */
/* Unified input styling */
.form-input,
.form-select,
.form-textarea,
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-family: inherit;
    color: var(--text-primary);
    background-color: var(--card-background);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover,
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: var(--gray-400);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: var(--focus-ring);
}

.form-input::placeholder,
.form-textarea::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-light);
}

/* Select styling */
.form-select,
.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
}

/* Textarea */
.form-textarea,
.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

/* Form validation states */
.form-input.is-valid,
.form-group.is-valid input,
.form-group.is-valid select {
    border-color: var(--success-color);
}

.form-input.is-invalid,
.form-group.is-invalid input,
.form-group.is-invalid select {
    border-color: var(--danger-color);
}

.form-error {
    font-size: 0.75rem;
    color: var(--danger-color);
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.form-error svg {
    width: 14px;
    height: 14px;
}

.form-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Form sections */
.form-section {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.form-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

/* Input groups */
.input-group {
    display: flex;
    align-items: stretch;
}

.input-group-prepend,
.input-group-append {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    background: var(--gray-100);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.input-group-prepend {
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-group-append {
    border-left: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.input-group .form-input,
.input-group input {
    border-radius: 0;
}

.input-group .form-input:first-child,
.input-group input:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-group .form-input:last-child,
.input-group input:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ==================== DARK MODE ==================== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Dark mode color overrides */
        --background-color: #0f172a;
        --bg-secondary: #1e293b;
        --bg-tertiary: #334155;
        --card-background: #1e293b;

        --text-primary: #f1f5f9;
        --text-secondary: #94a3b8;
        --text-light: #64748b;
        --text-muted: #475569;

        --border-color: #334155;
        --border-light: #1e293b;
        --border-dark: #475569;

        /* Adjusted shadows for dark mode */
        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);

        /* Gray scale for dark mode */
        --gray-50: #1e293b;
        --gray-100: #334155;
        --gray-200: #475569;
        --gray-300: #64748b;
        --gray-400: #94a3b8;
        --gray-500: #cbd5e1;
        --gray-600: #e2e8f0;
        --gray-700: #f1f5f9;
        --gray-800: #f8fafc;
        --gray-900: #ffffff;

        /* Primary colors slightly adjusted for dark backgrounds */
        --primary-50: rgba(59, 130, 246, 0.1);
        --primary-100: rgba(59, 130, 246, 0.2);

        /* Focus ring for dark mode */
        --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.5);
        --focus-ring-offset: 0 0 0 2px var(--card-background), 0 0 0 4px var(--primary-400);
    }

    /* Specific dark mode overrides */
    body {
        color-scheme: dark;
    }

    /* Login page gradient */
    .login-container {
        background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
    }

    /* Form inputs */
    .form-group input,
    .form-group select,
    .form-group textarea,
    .form-input,
    .form-select,
    .form-textarea {
        background-color: var(--bg-tertiary);
        border-color: var(--border-color);
        color: var(--text-primary);
    }

    .form-group input::placeholder,
    .form-textarea::placeholder {
        color: var(--text-light);
    }

    /* Table adjustments */
    .data-table th {
        background: var(--bg-tertiary);
    }

    .data-table tbody tr:nth-child(even) {
        background: rgba(255, 255, 255, 0.02);
    }

    .data-table tbody tr:hover {
        background: rgba(59, 130, 246, 0.1);
    }

    /* Modal backdrop */
    .modal-overlay {
        background: rgba(0, 0, 0, 0.7);
    }

    /* Skeleton loading */
    .skeleton {
        background: linear-gradient(
            90deg,
            var(--gray-100) 0%,
            var(--gray-200) 50%,
            var(--gray-100) 100%
        );
    }

    /* Loading overlay */
    .loading-overlay {
        background: rgba(15, 23, 42, 0.8);
    }

    /* Status badges - ensure contrast */
    .status-badge.active {
        background: rgba(16, 185, 129, 0.2);
        color: #34d399;
    }

    .status-badge.inactive {
        background: rgba(239, 68, 68, 0.2);
        color: #f87171;
    }

    /* Buttons - ensure visibility */
    .btn-secondary {
        background: var(--bg-tertiary);
        border-color: var(--border-color);
        color: var(--text-primary);
    }

    .btn-secondary:hover {
        background: var(--gray-200);
    }

    /* Summary cards */
    .summary-card,
    .stat-card,
    .vehicle-card {
        background: var(--card-background);
        border-color: var(--border-color);
    }

    /* Alerts and banners */
    .pending-devices-banner,
    .maintenance-due-banner {
        border-color: transparent;
    }

    /* Dropdown menus */
    .nav-dropdown-menu {
        background: var(--card-background);
        border-color: var(--border-color);
    }

    /* Scrollbars for dark mode */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: var(--bg-secondary);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--gray-200);
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--gray-300);
    }
}

/* Manual dark mode toggle class */
.dark-mode {
    --background-color: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --card-background: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-light: #64748b;
    --border-color: #334155;
    --border-light: #1e293b;
    --border-dark: #475569;
}

/* ==================== UTILITY CLASSES ==================== */
/* Text utilities */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-light); }
.text-success { color: var(--success-color); }
.text-warning { color: var(--warning-color); }
.text-danger { color: var(--danger-color); }

/* Background utilities */
.bg-primary { background-color: var(--primary-color); }
.bg-success { background-color: var(--success-light); }
.bg-warning { background-color: var(--warning-light); }
.bg-danger { background-color: var(--danger-light); }

/* Spacing utilities */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }

/* Display utilities */
.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* Border utilities */
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadow utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Transition utilities */
.transition { transition: all var(--transition-base); }
.transition-fast { transition: all var(--transition-fast); }

/* Truncate text */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==================== DOCUMENT UPLOAD STYLES ==================== */
.document-upload-group {
    margin-bottom: 1rem;
}

.document-upload-group > .document-label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.document-upload-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.document-upload-item {
    flex: 1;
    min-width: 120px;
    max-width: 160px;
    text-align: center;
}

.document-upload-item > label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.document-preview {
    width: 100%;
    height: 100px;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    margin-bottom: 0.5rem;
    overflow: hidden;
    position: relative;
}

.document-preview svg {
    width: 40px;
    height: 40px;
    color: var(--text-light);
}

.document-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.document-preview.has-image {
    border-style: solid;
    border-color: var(--primary-color);
}

.document-preview .remove-doc {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(239, 68, 68, 0.9);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}

.document-preview.has-image:hover .remove-doc {
    display: flex;
}

.document-ocr-actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.document-ocr-actions button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ocr-hint {
    font-size: 0.75rem;
    color: var(--text-light);
}

.ocr-results {
    margin-top: 1rem;
    padding: 1rem;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: var(--radius-md);
}

.ocr-results h5 {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    color: #166534;
}

.ocr-result-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.ocr-label {
    color: var(--text-secondary);
    min-width: 100px;
}

.ocr-value {
    color: var(--text-primary);
    font-weight: 500;
}

.ocr-results .btn-primary {
    margin-top: 0.75rem;
}

/* Loading state for OCR */
.ocr-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    padding: 1rem;
}

.ocr-loading::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ==================== ACTIVE SHIFTS SECTION ==================== */
.active-shifts-section {
    background: var(--card-background);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.active-shifts-section .section-header {
    margin-bottom: 1rem;
}

.active-shifts-section .section-header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.active-shifts-section .section-header h2 svg {
    color: var(--primary-color);
}

.active-shifts-section .active-count {
    background: var(--primary-color);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

.active-shifts-section .section-description {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0.5rem 0 0 0;
}

.active-shifts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.active-shift-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 1rem;
    position: relative;
    transition: all 0.2s ease;
}

.active-shift-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Severity colors */
.active-shift-card.severity-normal {
    border-left: 4px solid var(--success-color);
}

.active-shift-card.severity-warning {
    border-left: 4px solid #eab308;
    background: #fef9c3;
}

.active-shift-card.severity-high {
    border-left: 4px solid #f97316;
    background: #fff7ed;
}

.active-shift-card.severity-critical {
    border-left: 4px solid var(--danger-color);
    background: #fef2f2;
    animation: pulse-critical 2s infinite;
}

@keyframes pulse-critical {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

.active-shift-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.active-shift-driver {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.active-shift-vehicle {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.active-shift-timer {
    text-align: right;
}

.shift-duration {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Roboto Mono', monospace;
}

.shift-duration.severity-normal { color: var(--success-color); }
.shift-duration.severity-warning { color: #eab308; }
.shift-duration.severity-high { color: #f97316; }
.shift-duration.severity-critical { color: var(--danger-color); }

.shift-started {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.active-shift-details {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.active-shift-details span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.active-shift-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-200);
}

.btn-force-checkout {
    background: var(--danger-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    transition: background 0.2s;
}

.btn-force-checkout:hover {
    background: #dc2626;
}

.btn-force-checkout svg {
    width: 16px;
    height: 16px;
}

/* Empty state */
.empty-state-inline {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    grid-column: 1 / -1;
}

/* Force checkout modal */
.modal-sm {
    max-width: 400px;
}

.force-checkout-info {
    background: var(--gray-50);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.force-checkout-info p {
    margin: 0.25rem 0;
    font-size: 0.875rem;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.btn-secondary {
    background: var(--gray-100);
    color: var(--text-primary);
    border: 1px solid var(--gray-300);
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.btn-secondary:hover {
    background: var(--gray-200);
}

.btn-danger {
    background: var(--danger-color);
    color: white;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

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

/* Checkout link button in active shifts */
.btn-checkout-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--primary-color);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-checkout-link:hover {
    background: var(--primary-dark);
    color: white;
}

.btn-checkout-link svg {
    width: 16px;
    height: 16px;
}

/* ==================== DASHBOARD ACTIVE SHIFTS ==================== */
.active-shifts-compact {
    background: var(--card-background);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.active-shifts-compact h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.active-shifts-compact h3 svg {
    color: var(--primary-color);
}

.active-shifts-badge {
    background: var(--danger-color);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.active-shifts-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
}

.active-shift-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--gray-50);
    border-radius: 8px;
    border-left: 3px solid var(--success-color);
}

.active-shift-item.severity-warning {
    border-left-color: #eab308;
    background: #fef9c3;
}

.active-shift-item.severity-high {
    border-left-color: #f97316;
    background: #fff7ed;
}

.active-shift-item.severity-critical {
    border-left-color: var(--danger-color);
    background: #fef2f2;
}

.active-shift-item .driver-info {
    display: flex;
    flex-direction: column;
}

.active-shift-item .driver-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.active-shift-item .vehicle-info {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.active-shift-item .shift-timer {
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 0.875rem;
}

.active-shift-item .shift-timer.severity-normal { color: var(--success-color); }
.active-shift-item .shift-timer.severity-warning { color: #eab308; }
.active-shift-item .shift-timer.severity-high { color: #f97316; }
.active-shift-item .shift-timer.severity-critical { color: var(--danger-color); }

.active-shifts-empty {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.75rem;
    padding: 0.5rem;
}

.view-all-shifts-link {
    display: block;
    text-align: center;
    margin-top: 0.75rem;
    color: var(--primary-color);
    font-size: 0.75rem;
    text-decoration: none;
}

.view-all-shifts-link:hover {
    text-decoration: underline;
}

/* ==================== IMPORT DATA PAGE ==================== */

/* Import Type Tabs - Better styled toggle buttons */
.import-type-tabs {
    display: flex;
    gap: 12px;
    margin: 20px 0;
    padding: 8px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.import-type-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: var(--card-background);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.import-type-tab:hover {
    border-color: var(--primary-300);
    color: var(--primary-600);
    background: var(--primary-50);
}

.import-type-tab.active {
    border-color: var(--primary-500);
    background: var(--primary-500);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.import-type-tab svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.import-type-tab.active svg {
    color: white;
}

/* ==================== AI SETTINGS PAGE ==================== */

/* Fix large icons in AI settings */
.ai-info-banner .info-icon svg {
    width: 24px;
    height: 24px;
}

.feature-card .feature-icon svg {
    width: 28px;
    height: 28px;
}

.feature-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.feature-icon.checkin {
    background: #d1fae5;
    color: #059669;
}

.feature-icon.checkout {
    background: #dbeafe;
    color: #2563eb;
}

.feature-icon.report {
    background: #fef3c7;
    color: #d97706;
}

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

.feature-card {
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.feature-card h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.feature-card p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}