/* components.css - Standardized UI Components for Premium LimoHawk */

/* Cards */
.premium-card {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 32px !important;
    box-shadow: var(--card-shadow);
    margin-bottom: 2rem;
    overflow: hidden;
    /* Ensure content doesn't bleed */
}

.premium-card.filter-card {
    padding: 24px 32px !important;
    margin-bottom: 24px;
}

.premium-card.table-card {
    padding: 0 !important;
}

.premium-card.table-card .premium-table-container {
    border: none;
    border-radius: 0;
}

@media (max-width: 768px) {
    .premium-card {
        padding: 20px !important;
        margin-bottom: 1.5rem;
    }

    .premium-card.filter-card {
        padding: 20px !important;
    }
}

/* Data Tables / Grids */
.data-grid-container {
    background: var(--secondary-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.premium-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    /* Ensure table doesn't squash too much */
}

.premium-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Responsive Table-to-Card View */
@media (max-width: 1150px) {
    .premium-table.responsive-card-view {
        display: block;
        min-width: 0;
        border: none;
    }

    .premium-table.responsive-card-view thead {
        display: none;
        /* Hide headers */
    }

    .premium-table.responsive-card-view tbody {
        display: block;
    }

    .premium-table.responsive-card-view tr {
        display: block;
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: 16px;
        margin-bottom: 24px;
        padding: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    .premium-table.responsive-card-view td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0 !important;
        border-bottom: 1px solid var(--glass-border) !important;
        text-align: right;
        font-size: 0.95rem;
    }

    .premium-table.responsive-card-view td:last-child {
        border-bottom: none !important;
        padding-top: 16px !important;
        justify-content: center;
    }

    .premium-table.responsive-card-view td::before {
        content: attr(data-label);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.75rem;
        color: var(--text-secondary);
        text-align: left;
        flex: 1;
    }

    /* Column specific adjustments in card view */
    .premium-table.responsive-card-view .cell-primary,
    .premium-table.responsive-card-view .cell-main {
        font-weight: 600;
    }

    .premium-table.responsive-card-view .action-buttons {
        width: 100%;
        justify-content: space-around;
        gap: 12px;
    }
}

.premium-table th {
    background: var(--glass-bg);
    padding: 16px 24px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--glass-border);
}

body.light-theme .premium-table th {
    background: #f1f5f9;
}

.premium-table td {
    padding: 12px 24px;
    border-bottom: 1px solid var(--glass-border);
    font-size: 0.9rem;
    color: var(--text-main);
    vertical-align: middle;
}

.premium-table tr:hover {
    background: rgba(194, 162, 98, 0.03);
}

body.light-theme .premium-table tr:hover {
    background: rgba(0, 0, 0, 0.01);
}

/* Badges & Minimalist Indicators */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-main);
}

.status-indicator::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-indicator.success::before {
    background-color: var(--status-success);
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.4);
}

.status-indicator.warning::before {
    background-color: var(--status-warning);
    box-shadow: 0 0 8px rgba(241, 196, 15, 0.4);
}

.status-indicator.danger::before {
    background-color: var(--status-danger);
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.4);
}

.status-indicator.info::before {
    background-color: var(--status-info);
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.4);
}

.status-indicator.secondary::before {
    background-color: var(--status-secondary);
    opacity: 0.5;
}

.premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent !important;
    border: none !important;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.premium-badge i {
    font-size: 0.9rem;
    opacity: 0.8;
}

.premium-badge.success {
    color: var(--status-success);
}

.premium-badge.warning {
    color: var(--status-warning);
}

.premium-badge.danger {
    color: var(--status-danger);
}

.premium-badge.info {
    color: var(--status-info);
}

.premium-badge.gold {
    color: var(--status-gold);
}

/* Notices & Alerts */
.premium-notice {
    background: rgba(194, 162, 98, 0.08) !important;
    border: 1px solid rgba(194, 162, 98, 0.3) !important;
    padding: 12px 20px !important;
    margin: 15px 0 25px 0 !important;
    border-radius: 12px !important;
    color: var(--accent-gold) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
}

.premium-notice i {
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
}

.premium-notice strong {
    color: var(--accent-gold) !important;
    font-weight: 700 !important;
}

/* Buttons */
.btn-premium {
    background: var(--accent-gold);
    color: var(--primary-bg);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-premium:hover {
    background: var(--accent-gold-hover);
    transform: translateY(-1px);
}

.btn-premium.danger {
    background: var(--error);
    color: white;
}

.btn-premium.danger:hover {
    background: #c0392b;
}

/* File Upload */
.premium-file-upload {
    width: 100%;
    margin-top: 8px;
}

.upload-trigger {
    border: 2px dashed var(--glass-border);
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(194, 162, 98, 0.02);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.upload-trigger:hover {
    border-color: var(--accent-gold);
    background: rgba(194, 162, 98, 0.05);
}

.upload-trigger i {
    font-size: 2rem;
    color: var(--accent-gold);
    opacity: 0.6;
}

.upload-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.upload-text strong {
    color: var(--accent-gold);
    font-size: 0.95rem;
}

.upload-text span {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* File Upload — Preview & Remove (FileUploadManager) */
.premium-file-upload .file-preview,
.premium-file-upload .existing-preview,
.file-upload-area .file-preview,
.file-upload-area .existing-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    border: 2px solid var(--glass-border);
    border-radius: 12px;
    background: rgba(194, 162, 98, 0.03);
    text-align: center;
}

.premium-file-upload .file-preview img,
.premium-file-upload .existing-preview img,
.file-upload-area .file-preview img,
.file-upload-area .existing-preview img {
    max-width: 200px;
    max-height: 150px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--glass-border);
}

.premium-file-upload .btn-remove,
.file-upload-area .btn-remove,
.premium-file-upload .remove-file-btn,
.file-upload-area .remove-file-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(220, 53, 69, 0.3);
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 5;
    padding: 0;
}

.premium-file-upload .btn-remove:hover,
.file-upload-area .btn-remove:hover,
.premium-file-upload .remove-file-btn:hover,
.file-upload-area .remove-file-btn:hover {
    background: rgba(220, 53, 69, 0.2);
    border-color: #dc3545;
    transform: scale(1.1);
}

.premium-file-upload .filename,
.file-upload-area .filename {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    word-break: break-all;
}

/* Drag-over state */
.premium-file-upload.drag-over .upload-trigger,
.file-upload-area.drag-over {
    border-color: var(--accent-gold);
    background: rgba(194, 162, 98, 0.08);
}

/* Forms */
/* Form grid layout - 2 columns on desktop, 1 on mobile */
.premium-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
}

.premium-form-grid .full-width {
    grid-column: 1 / -1;
}

@media screen and (max-width: 768px) {
    .premium-form-grid {
        grid-template-columns: 1fr;
    }
}

.premium-form-group {
    margin-bottom: 20px;
}

.field-row {
    display: flex;
    gap: 24px;
    width: 100%;
}

.field-row .premium-form-group {
    flex: 1;
}

@media (max-width: 768px) {
    .field-row {
        flex-direction: column;
        gap: 0;
    }
}

.premium-form-group label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.label-heading {
    /* #281: these are now <label> elements (a11y — bound to inputs via for=).
       <label> defaults to inline; force block so the original div layout
       (full-width caption + margin-bottom) is preserved. */
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    opacity: 0.8;
}

.premium-input {
    width: 100%;
    background-color: var(--input-tint-bg) !important;
    border: 1px solid rgba(194, 162, 98, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--text-main) !important;
    font-family: inherit;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

select.premium-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23c2a262' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 16px) center !important;
    padding-right: 40px;
}

/* Fix: Override .premium-form .premium-input background shorthand which resets background-image */
.premium-form select.premium-input {
    appearance: none;
    -webkit-appearance: none;
    background: var(--input-tint-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23c2a262' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") no-repeat calc(100% - 16px) center !important;
    padding-right: 40px;
}

select.premium-input::-ms-expand {
    display: none;
}

.premium-input::placeholder {
    color: var(--input-placeholder) !important;
    opacity: 1;
}

.premium-input:focus {
    outline: none;
    border-color: var(--accent-gold);
    background: rgba(194, 162, 98, 0.18) !important;
}

/* #351: required-field error highlight (Step 3 "Proceed to Payment"). Applied
   to the missing/invalid field(s) so the user sees exactly what to fix; cleared
   on the next edit of that field. */
.premium-input.field-error,
.intl-phone-wrapper.field-error .intl-phone-number,
.intl-phone-wrapper.field-error .intl-phone-trigger {
    border-color: #d64545 !important;
    box-shadow: 0 0 0 2px rgba(214, 69, 69, 0.18);
}
.premium-checkbox.field-error {
    outline: 2px solid #d64545;
    outline-offset: 2px;
}

/* Pagination */
.pagination-container {
    background: var(--secondary-bg) !important;
    border-top: 1px solid var(--glass-border) !important;
    padding: 24px 32px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 0 var(--radius) var(--radius);
}

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

.pagination-controls {
    display: flex;
    gap: 8px;
}

.pagination-controls .btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.pagination-controls .btn:hover:not(:disabled) {
    background: var(--accent-gold);
    color: var(--primary-bg);
    border-color: var(--accent-gold);
}

.pagination-controls .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    /* 3 flexible inputs + auto action column */
    gap: 24px;
    align-items: flex-end;
    max-width: 1200px;
}

@media (max-width: 1150px) {
    .filter-grid {
        /* Floor each column at 200px and wrap, instead of bare `1fr 1fr`.
           Native date/select inputs have a hard intrinsic min-width on iOS
           Safari and refuse to shrink below it; with min-0 `fr` tracks the
           track can compute narrower than the input, so the input overflows
           into the next column and visually overlaps its neighbour — e.g. the
           From Date / To Date fields colliding on iPad (notification-logs and
           every other .filter-grid page). auto-fit + a 200px floor guarantees
           each field gets enough room or wraps onto its own row. Guarded by
           tools/check-filter-grid-date-floor.mjs. */
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
        gap: 16px;
    }
}

@media (max-width: 640px) {
    .filter-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .filter-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

.filter-actions {
    display: flex;
    gap: 12px;
    padding-bottom: 0;
    margin-bottom: 20px;
    white-space: nowrap;
    /* Prevent wrapping */
    flex-shrink: 0;
}

/* Sidebar Refinement */
.sidebar {
    width: 280px;
    height: 100dvh;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    z-index: 200;
}

/* The placeholder div wraps sidebar content injected by JS - 
   must pass through flex layout to children */
#sidebar-placeholder {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.sidebar-header {
    padding: 2.5rem 2rem;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sidebar-footer {
    flex-shrink: 0;
}

.logo-box {
    background: transparent;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: none;
}

.sidebar-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo-text {
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 1px;
    color: var(--text-main);
}

/* User Profile Interactive Styles */
.user-profile {
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 4px 12px;
    border-radius: 12px;
    border: 1px solid transparent;
}

.user-profile:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--glass-border);
    transform: translateY(-1px);
}

.user-profile:active {
    transform: translateY(0);
}

/* Modals */
/* ─── Rich Text Editor ─────────────────────────────────────────────── */

.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 8px 12px;
    background: var(--glass-bg, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    flex-wrap: wrap;
}

.toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted, #999);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s ease;
}

.toolbar-btn:hover {
    background: rgba(194, 162, 98, 0.15);
    color: var(--accent-gold, #c2a262);
}

.toolbar-btn.active {
    background: rgba(194, 162, 98, 0.25);
    color: var(--accent-gold, #c2a262);
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border-color, rgba(255, 255, 255, 0.1));
    margin: 0 6px;
}

.rich-editor-content {
    min-height: 250px;
    max-height: 400px;
    overflow-y: auto;
    padding: 16px 20px;
    background: var(--input-bg, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 0 0 8px 8px;
    color: var(--text-main, #e0e0e0);
    font-size: 14px;
    line-height: 1.6;
    outline: none;
}

.rich-editor-content:focus {
    border-color: var(--accent-gold, #c2a262);
    box-shadow: 0 0 0 2px rgba(194, 162, 98, 0.15);
}

.rich-editor-content p {
    margin: 0 0 8px 0;
}

.rich-editor-content a {
    color: var(--accent-gold, #c2a262);
    text-decoration: underline;
}

.rich-editor-content ul,
.rich-editor-content ol {
    margin: 8px 0;
    padding-left: 24px;
}

.rich-editor-source {
    border-radius: 0 0 8px 8px;
    border-top: 1px dashed var(--border-color, rgba(255, 255, 255, 0.1));
}

/* ─── Modals ───────────────────────────────────────────────────────── */

.premium-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.premium-modal .modal-content {
    background-color: var(--secondary-bg);
    margin: 20px auto;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    width: 95%;
    max-width: 700px;
    max-height: calc(100vh - 40px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    animation: modalSlideUp 0.3s ease-out;
    padding: 0 !important;
}

/* Ensure form doesn't break flex chain for scrolling */
.premium-modal .modal-content>form {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

@keyframes modalSlideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.premium-modal .modal-content.sm {
    max-width: 440px;
}

.premium-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-bottom: 1px solid var(--glass-border);
    background: transparent;
}

.premium-modal .modal-header h2,
.premium-modal .modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.01em;
}

.premium-modal .modal-body {
    padding: 24px 32px;
    color: var(--text-main);
    overflow-y: auto;
    flex: 1;
}

.modal-section {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--glass-border);
}

.modal-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.modal-section h3,
.modal-section h4,
.modal-section h5,
.section-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--accent-gold) !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.modal-section.prominent {
    background: rgba(194, 162, 98, 0.05);
    margin: -24px -32px 24px -32px;
    padding: 24px 32px;
    border-bottom: 1px solid var(--glass-border);
}

.pricing-fields {
    background: rgba(194, 162, 98, 0.05);
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    margin-bottom: 24px;
}

body.dark-theme .pricing-fields {
    background: rgba(255, 255, 255, 0.03);
}

.pricing-fields h4,
.pricing-fields h5 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--accent-gold) !important;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 12px;
}

.mileage-tiers-section h5 {
    margin: 20px 0 16px 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

/* Vehicle Photo Previews */
.existing-photo-preview {
    position: relative;
}

.existing-photo-preview .remove-file-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(220, 53, 69, 0.3);
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    padding: 0;
    transition: all 0.2s;
}

.existing-photo-preview .remove-file-btn:hover {
    background: rgba(220, 53, 69, 0.3);
    border-color: #dc3545;
    transform: scale(1.1);
}

/* Existing file preview actions row */
.existing-file-preview .existing-file-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.existing-file-preview .existing-file-actions .remove-file-btn {
    position: static;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(220, 53, 69, 0.3);
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s;
}

.existing-file-preview .existing-file-actions .remove-file-btn:hover {
    background: rgba(220, 53, 69, 0.2);
    border-color: #dc3545;
    transform: scale(1.1);
}

.photo-preview img,
.existing-photo-preview img {
    max-width: 100% !important;
    height: 120px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    margin: 10px 0 !important;
    border: 1px solid var(--glass-border) !important;
}

/* Existing file/photo preview — outside premium-file-upload (e.g. drivers documents) */
.existing-file-preview {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin-top: 8px;
    border: 1px solid rgba(40, 167, 69, 0.3);
    border-radius: 8px;
    background: rgba(40, 167, 69, 0.05);
}

.existing-photo-preview {
    position: relative;
    display: inline-block;
    margin-top: 8px;
}

.existing-file-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.existing-file-preview .remove-file-btn,
.existing-photo-preview .remove-file-btn {
    position: relative;
    top: auto;
    right: auto;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    border: 1px solid rgba(220, 53, 69, 0.3);
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 5;
    padding: 0;
}

.existing-photo-preview .remove-file-btn {
    position: absolute;
    top: 4px;
    right: 4px;
}

.existing-file-preview .remove-file-btn:hover,
.existing-photo-preview .remove-file-btn:hover {
    background: rgba(220, 53, 69, 0.2);
    border-color: #dc3545;
    transform: scale(1.1);
}

.premium-thumbnail {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    margin: 8px 0;
}

.current-asset-preview {
    background: rgba(194, 162, 98, 0.05);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.current-asset-preview .preview-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.current-asset-preview img {
    max-width: 100%;
    max-height: 280px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--primary-bg);
}

.premium-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 24px 32px;
    background: var(--glass-bg);
    border-top: 1px solid var(--glass-border);
}

.premium-modal .close-button {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.premium-modal .close-button:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-main);
}

body.dark-theme .premium-modal .close-button:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Delete Confirmation Modal Icon & Text */
.alert-icon-container,
.delete-confirmation-icon {
    text-align: center;
    margin-bottom: 16px;
}

.alert-icon-container i,
.delete-confirmation-icon i {
    font-size: 2.5rem;
    color: var(--status-warning);
}

.premium-modal .modal-body p {
    color: var(--text-main);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Secondary Button within modal footer */
.btn-premium.secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--glass-border);
}

.btn-premium.secondary:hover {
    background: var(--glass-bg);
    color: var(--text-main);
    transform: none;
}

/* Helper Classes */
.action-icon {
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.1rem;
    transition: color 0.2s;
}

.action-icon:hover {
    color: var(--accent-gold);
}

/* Action Buttons in Tables */
.action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.btn-action {
    background: transparent;
    border: none;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    width: 38px;
    height: 38px;
}

.btn-action.edit-btn:hover {
    color: var(--accent-gold);
    background: rgba(194, 162, 98, 0.1);
}

.btn-action.delete-btn:hover {
    color: var(--error);
    background: rgba(231, 76, 60, 0.1);
}

.btn-action.download-btn:hover {
    color: #2e86de;
    background: rgba(46, 134, 222, 0.1);
}

.btn-action.comment-btn:hover {
    color: #0fbcf9;
    background: rgba(15, 188, 249, 0.1);
}

/* Layout Utilities */
.form-row {
    display: flex !important;
    gap: 20px !important;
    margin-bottom: 0 !important;
    flex-wrap: wrap !important;
}

.form-row .premium-form-group {
    flex: 1 !important;
    min-width: 200px !important;
}

@media (max-width: 600px) {
    .form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
}

/* Responsive Utilities */
.flex-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

@media (max-width: 768px) {
    .flex-responsive {
        flex-direction: column;
    }
}

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

@media (max-width: 768px) {
    .grid-responsive-2 {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.grid-responsive-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}

@media (max-width: 1150px) {
    .grid-responsive-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .grid-responsive-3 {
        grid-template-columns: 1fr;
    }
}

body.light-theme .btn-action.edit-btn:hover {
    background: rgba(178, 142, 70, 0.1);
}

/* Premium Checkboxes & Switches */
.premium-checkbox-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 10px !important;
}

.premium-checkbox-card {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: var(--input-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 10px !important;
    padding: 12px 20px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none !important;
    flex: 1 !important;
    min-width: 180px !important;
    margin-bottom: 0 !important;
}

.premium-checkbox-card:hover {
    background: rgba(194, 162, 98, 0.05) !important;
    border-color: rgba(194, 162, 98, 0.3) !important;
}

.premium-checkbox-card input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    cursor: pointer !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

.premium-checkbox-card .checkbox-indicator {
    width: 20px !important;
    height: 20px !important;
    background: var(--primary-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    flex-shrink: 0 !important;
}

.premium-checkbox-card input:checked~.checkbox-indicator {
    background: var(--accent-gold) !important;
    border-color: var(--accent-gold) !important;
}

.premium-checkbox-card .checkbox-indicator::after {
    content: "\f00c" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 10px !important;
    color: var(--primary-bg) !important;
    display: none !important;
}

.premium-checkbox-card input:checked~.checkbox-indicator::after {
    display: block !important;
}

.premium-checkbox-card .checkbox-content {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--text-main) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}

.premium-checkbox-card .checkbox-content i {
    width: 18px !important;
    color: var(--accent-gold) !important;
    text-align: center !important;
}

/* Premium Switch Toggle */
.premium-switch {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    user-select: none !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    font-weight: 500 !important;
}

.premium-switch input {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.switch-slider {
    position: relative !important;
    width: 44px !important;
    height: 22px !important;
    background-color: var(--input-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 100px !important;
    transition: all 0.3s !important;
    flex-shrink: 0 !important;
}

.switch-slider::before {
    content: "" !important;
    position: absolute !important;
    height: 14px !important;
    width: 14px !important;
    left: 4px !important;
    bottom: 3px !important;
    background-color: var(--text-secondary) !important;
    border-radius: 50% !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.premium-switch input:checked+.switch-slider {
    background-color: rgba(194, 162, 98, 0.2) !important;
    border-color: var(--accent-gold) !important;
}

.premium-switch input:checked+.switch-slider::before {
    transform: translateX(22px) !important;
    background-color: var(--accent-gold) !important;
}

.switch-label {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: var(--text-main) !important;
    display: inline-block !important;
}

/* Sidebar Split Control Navigation */
.menu-parent-wrapper {
    display: flex;
    align-items: center;
    margin: 2px 8px;
    border-radius: 12px;
    transition: all 0.2s ease;
    gap: 2px;
}

.menu-parent-wrapper .nav-link {
    flex: 1;
    margin: 0 !important;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.accordion-toggle {
    width: 40px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    transition: all 0.2s ease;
    border-left: 1px solid transparent;
}

.accordion-toggle:hover {
    background: var(--glass-bg);
    color: var(--text-main);
}

.menu-parent-wrapper:has(.nav-link.active) {
    background: var(--accent-gold);
}

.menu-parent-wrapper:has(.nav-link.active) .nav-link {
    background: transparent !important;
    box-shadow: none !important;
}

.menu-parent-wrapper:has(.nav-link.active) .accordion-toggle {
    color: white;
    border-left-color: rgba(255, 255, 255, 0.2);
}

.accordion-toggle .accordion-arrow {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.8rem;
}

.accordion-toggle:not(.collapsed) .accordion-arrow {
    transform: rotate(90deg);
}

.sidebar.collapsed .accordion-toggle {
    display: none;
}

.menu-children {
    display: block !important;
    transition: all 0.3s ease;
    overflow: hidden;
}

.menu-children.collapsed {
    display: none !important;
}

/* Operator Details Specifics & Responsive Fixes */
.header-summary-card {
    margin-bottom: 32px !important;
}

.operator-header-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.operator-identity-details {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.operator-identity-details .nowrap {
    white-space: nowrap !important;
    display: inline-flex;
    align-items: center;
}

.operator-stats-section {
    display: flex;
    align-items: center;
    gap: 40px;
}

.stats-group {
    display: flex;
    gap: 32px;
    border-right: 1px solid var(--glass-border);
    padding-right: 40px;
}

.status-group {
    text-align: center;
    min-width: 140px;
}

.status-group .status-indicator {
    margin-bottom: 8px;
    display: block;
}

.compliance-mini {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.premium-tabs-container {
    margin-top: 32px;
}

.tab-buttons {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 12px;
    margin-bottom: 24px;
}

@media (max-width: 1150px) {
    .operator-header-layout {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .operator-stats-section {
        width: 100%;
        justify-content: space-between;
        gap: 20px;
    }

    .tab-buttons {
        flex-wrap: wrap;
        gap: 12px;
    }

    .tab-button {
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .operator-stats-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        text-align: left;
    }

    .stats-group {
        border-right: none;
        padding-right: 0;
        width: 100%;
        justify-content: flex-start;
        gap: 40px;
    }

    .status-group {
        width: 100%;
        text-align: left;
    }

    .status-group .status-indicator {
        display: inline-flex;
    }
}

/* Toast Notification System (Premium Glassmorphic) */
.toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    /* Above everything */
    max-width: 400px;
    width: calc(100% - 48px);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toast {
    position: relative;
    pointer-events: auto;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--card-shadow);
    color: var(--text-main);
    overflow: hidden;
    transform-origin: right center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast.toast-success {
    border-left: 4px solid var(--status-success);
}

.toast.toast-error {
    border-left: 4px solid var(--status-danger);
}

.toast.toast-warning {
    border-left: 4px solid var(--status-warning);
}

.toast.toast-info {
    border-left: 4px solid var(--status-info);
}

.toast i:not(.fa-times) {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.toast-success i:not(.fa-times) {
    color: var(--status-success);
}

.toast-error i:not(.fa-times) {
    color: var(--status-danger);
}

.toast-warning i:not(.fa-times) {
    color: var(--status-warning);
}

.toast-info i:not(.fa-times) {
    color: var(--status-info);
}

.toast-message {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    opacity: 0.6;
}

.toast-close:hover {
    opacity: 1;
    color: var(--text-main);
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--accent-gold);
    opacity: 0.4;
    width: 100%;
}

.toast-success .toast-progress {
    background: var(--status-success);
}

.toast-error .toast-progress {
    background: var(--status-danger);
}

.toast-removing {
    opacity: 0;
    transform: translateX(30px) scale(0.95);
}

@media (max-width: 768px) {
    .toast-container {
        top: auto;
        bottom: 24px;
        right: 50%;
        transform: translateX(50%);
        width: calc(100% - 32px);
    }

.toast {
        transform-origin: bottom center;
    }
}

/* =====================================================
   Quote Card - Compact Horizontal Layout
   ===================================================== */

/* Quotes grid container */
.quotes-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Horizontal card layout */
.operator-card.quote-card-horizontal {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: default;
}

.operator-card.quote-card-horizontal:hover {
    border-color: var(--accent-gold, #c2a262);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Vehicle image - compact thumbnail */
.quote-card-horizontal .vehicle-image-container {
    flex: 0 0 180px;
    width: 180px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.15);
}

.quote-card-horizontal .vehicle-image-container img.vehicle-category-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quote-card-horizontal .vehicle-image-container .vehicle-image-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 40px;
    opacity: 0.4;
}

/* Card body - right side content */
.quote-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 14px 18px;
    min-width: 0;
}

/* Top row: title + service badge + capacity */
.quote-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.quote-card-top h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quote-card-top .service-level-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(194, 162, 98, 0.2);
    color: var(--accent-gold, #c2a262);
    font-weight: 600;
    white-space: nowrap;
}

.quote-card-top .vehicle-capacity {
    display: flex;
    gap: 12px;
    font-size: 14px;
    opacity: 0.85;
    margin-left: auto;
}

.quote-card-top .vehicle-capacity span {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.quote-card-top .vehicle-capacity i {
    font-size: 14px;
}

/* Accordion toggle for amenities */
.amenities-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--accent-gold, #c2a262);
    cursor: pointer;
    padding: 4px 0;
    border: none;
    background: none;
    opacity: 0.8;
    transition: opacity 0.15s ease;
    font-family: inherit;
}

.amenities-toggle:hover {
    opacity: 1;
}

.amenities-toggle .toggle-icon {
    transition: transform 0.2s ease;
    font-size: 10px;
}

.amenities-toggle.open .toggle-icon {
    transform: rotate(90deg);
}

/* Amenities list - hidden by default */
.amenities-collapsible {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.amenities-collapsible.open {
    max-height: 200px;
}

/* #350: amenities are now ALWAYS visible (toggle removed). */
.amenities-included {
    padding: 4px 0 2px 0;
}

.amenities-included .amenities-included-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--accent-gold, #c2a262);
    opacity: 0.9;
    margin-bottom: 4px;
}

.amenities-collapsible .amenities-list,
.amenities-included .amenities-list {
    padding: 6px 0 4px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
}

.amenities-collapsible .amenity-item,
.amenities-included .amenity-item {
    font-size: 12px;
    opacity: 0.7;
    display: flex;
    align-items: center;
    gap: 4px;
}

.amenities-collapsible .amenity-item i,
.amenities-included .amenity-item i {
    font-size: 10px;
    color: var(--accent-gold, #c2a262);
}

/* Bottom row: price + book button */
.quote-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 8px;
}

.quote-card-bottom .pricing-summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.quote-card-bottom .price {
    font-size: 22px;
    font-weight: 700;
    color: var(--accent-gold, #c2a262);
}

.quote-card-bottom .price .price-vat-suffix {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.7;
}

.quote-card-bottom .price-label {
    font-size: 11px;
    opacity: 0.5;
}

.quote-card-bottom .select-quote-btn {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    background: var(--accent-gold, #c2a262);
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.quote-card-bottom .select-quote-btn:hover {
    background: var(--accent-gold-hover, #d4b67a);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.quote-card-bottom .select-quote-btn i {
    font-size: 12px;
}

/* Mobile responsive - stack vertically on small screens */
@media (max-width: 600px) {
    .operator-card.quote-card-horizontal {
        flex-direction: column;
    }
    
    .quote-card-horizontal .vehicle-image-container {
        flex: 0 0 120px;
        width: 100%;
        min-height: 120px;
    }
    
    .quote-card-top .vehicle-capacity {
        margin-left: 0;
    }
}

/* ============================================
   Service Type Button Group (Company Booking)
   ============================================ */

/* Button group container - full width flex */
.premium-btn-group {
    display: flex;
    gap: 12px;
    width: 100%;
}

/* Individual service buttons - large, equal width */
.premium-btn-group .service-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 16px;
    font-size: 1rem;
    font-weight: 500;
    border: 2px solid rgba(184, 164, 126, 0.3);
    background: transparent;
    color: var(--text-secondary, #a0a0a0);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    min-height: 90px;
}

.premium-btn-group .service-btn i {
    font-size: 1.5rem;
}

.premium-btn-group .service-btn span {
    font-size: 0.95rem;
    letter-spacing: 0.3px;
}

/* Inactive button hover */
.premium-btn-group .service-btn:not(.active):hover {
    border-color: var(--accent-gold, #b8a47e);
    background: rgba(184, 164, 126, 0.08);
    color: var(--text-primary, #e0e0e0);
}

/* Active button - gold background, dark text */
.premium-btn-group .service-btn.active {
    background: var(--accent-gold, #b8a47e);
    color: #1a1a2e;
    border-color: var(--accent-gold, #b8a47e);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(184, 164, 126, 0.35);
}

.premium-btn-group .service-btn.active i {
    color: #1a1a2e;
}

.premium-btn-group .service-btn.active:hover {
    background: var(--accent-gold-hover, #a89368);
    border-color: var(--accent-gold-hover, #a89368);
}

/* Full-width button modifier */
.btn-premium.full-width {
    width: 100%;
    justify-content: center;
    font-size: 1.1rem;
    padding: 16px 24px;
}

/* Mobile responsive - stack service buttons on very small screens */
@media (max-width: 480px) {
    .premium-btn-group {
        flex-direction: column;
    }

    .premium-btn-group .service-btn {
        flex-direction: row;
        min-height: auto;
        padding: 14px 16px;
    }
}

/* ============================================================
   Filter Pill Rows (company-bookings, booking-bin)
   ============================================================ */

.filter-pill-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.filter-pill-label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #a0a0a0);
    min-width: 110px;
}

.btn-group.filter-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.btn-group.filter-pills .btn-premium {
    padding: 8px 14px;
    font-size: 0.875rem;
    border-radius: 999px;
    min-width: auto;
}

@media (max-width: 640px) {
    .filter-pill-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .filter-pill-label {
        min-width: 0;
    }
}

/* ============================================================
   Photo Gallery Modal Styles
   ============================================================ */

/* Large modal variant for gallery */
.modal-content.modal-large {
    max-width: 900px;
    width: 95%;
}

/* Gallery body */
.gallery-body {
    padding: 0;
}

/* Gallery main container */
.gallery-main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Gallery viewport - contains main image and nav buttons */
.gallery-viewport {
    position: relative;
    width: 100%;
    max-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary, #1a1a2e);
    border-radius: 8px;
    overflow: hidden;
}

/* Main gallery image */
#gallery-main-img {
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
    display: block;
}

/* Gallery navigation buttons */
.gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.2s;
    z-index: 2;
}

.gallery-nav-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.gallery-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.gallery-nav-btn.prev {
    left: 10px;
}

.gallery-nav-btn.next {
    right: 10px;
}

/* Gallery meta bar (photo title + download) */
.gallery-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 4px;
    gap: 12px;
}

.gallery-meta .photo-name {
    font-size: 0.95rem;
    color: var(--text-primary, #e0e0e0);
    font-weight: 500;
}

/* Gallery action button (download) */
.gallery-action-btn {
    background: transparent;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    color: var(--text-secondary, #a0a0a0);
    width: 36px;
    height: 36px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.gallery-action-btn:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.05));
    color: var(--text-primary, #e0e0e0);
}

/* Gallery thumbnails row */
.gallery-thumbnails {
    display: flex;
    gap: 8px;
    padding: 8px 0 4px;
    overflow-x: auto;
    width: 100%;
}

/* Simple thumbnail */
.simple-thumbnail {
    flex-shrink: 0;
    width: 80px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    transition: border-color 0.2s;
}

.simple-thumbnail.active {
    border-color: var(--accent-primary, #007bff);
}

.simple-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gallery empty state */
.gallery-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary, #a0a0a0);
}

.gallery-empty i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.gallery-empty p {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.gallery-empty small {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Responsive gallery */
@media (max-width: 768px) {
    .modal-content.modal-large {
        max-width: 100%;
        width: 100%;
        margin: 10px;
    }

    .gallery-viewport {
        max-height: 350px;
    }

    #gallery-main-img {
        max-height: 350px;
    }

    .simple-thumbnail {
        width: 60px;
        height: 45px;
    }
}

/* ─── Document Type Cards ─────────────────────────────────────────────── */
/* Card grid: 3-col desktop, 2-col tablet, 1-col mobile */
.doc-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 8px;
    max-width: 1080px;
}

@media (max-width: 1100px) {
    .doc-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 680px) {
    .doc-cards-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Individual document card — follows premium-card styling */
.doc-type-card {
    background: var(--secondary-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color 0.2s;
}

.doc-type-card:hover {
    border-color: rgba(194, 162, 98, 0.35);
}

/* Card header — icon+title left, status badge right */
.doc-type-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    gap: 12px;
    border-bottom: 1px solid var(--glass-border);
}

.doc-type-card-header .doc-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.doc-type-card-header .doc-card-title i {
    color: var(--accent-gold);
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

/* Card body — padding container for form fields */
.doc-type-card-body {
    padding: 24px 24px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Form groups inside cards — tighter label spacing */
.doc-type-card-body .premium-form-group {
    margin-bottom: 0;
}

.doc-type-card-body .premium-form-group label {
    margin-bottom: 6px;
}

/* Compact file upload inside cards */
.doc-type-card .upload-trigger {
    padding: 28px 16px;
}

.doc-type-card .upload-trigger i {
    font-size: 1.5rem;
}

/* Metadata grid: submitted / verified */
.doc-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 14px 16px;
    background: rgba(194, 162, 98, 0.03);
    border-radius: 8px;
    border: 1px solid var(--glass-border);
}

.doc-meta-item {
    text-align: center;
}

.doc-meta-item .doc-meta-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.doc-meta-item .doc-meta-value {
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* Action buttons row */
.doc-card-actions {
    display: flex;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--glass-border);
}

.doc-card-actions .btn-premium {
    flex: 1;
    font-size: 0.85rem;
    padding: 10px 14px;
    justify-content: center;
}

/* Admin verification section inside card */
.doc-admin-section {
    padding-top: 16px;
    margin-top: 4px;
    border-top: 1px solid var(--glass-border);
}

.doc-admin-section .label-heading {
    font-size: 0.7rem;
    margin-bottom: 12px;
}

.doc-admin-section .premium-form-group {
    margin-bottom: 12px;
}

.doc-admin-section .premium-form-group:last-child {
    margin-bottom: 0;
}

/* Operator selector card (admin view) */
.doc-operator-selector {
    max-width: 480px;
}

.doc-operator-selector .premium-form-group {
    margin-bottom: 0;
}

/* Softer delete button inside document cards */
.doc-card-actions .btn-premium.danger {
    background: transparent;
    color: rgba(220, 53, 69, 0.6);
    border: 1px solid rgba(220, 53, 69, 0.25);
}

.doc-card-actions .btn-premium.danger:hover {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border-color: rgba(220, 53, 69, 0.4);
}

/* Save button states: Saved (green) / Saving (muted) */
.doc-card-actions .doc-btn-saved {
    background: rgba(46, 204, 113, 0.1) !important;
    border-color: rgba(46, 204, 113, 0.3) !important;
    color: #2ecc71 !important;
    cursor: default;
}

.doc-card-actions .doc-btn-saving {
    opacity: 0.6;
    cursor: wait;
}

/* Expiry date attention highlight — shown when expiry is empty after upload */
.doc-expiry-attention {
    border: 1.5px solid #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.12);
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* ─── Document Cards — Mobile Responsive ──────────────────────────────── */
@media (max-width: 680px) {
    .doc-type-card-header {
        padding: 16px 18px;
        flex-wrap: wrap;
    }

    .doc-type-card-header .doc-card-title {
        font-size: 0.9rem;
    }

    .doc-type-card-body {
        padding: 18px;
        gap: 16px;
    }

    .doc-type-card .upload-trigger {
        padding: 20px 12px;
    }

    .doc-type-card .upload-trigger i {
        font-size: 1.3rem;
    }

    .doc-type-card .upload-text strong {
        font-size: 0.85rem;
    }

    .doc-type-card .upload-text span {
        font-size: 0.75rem;
    }

    .doc-meta-grid {
        gap: 10px;
        padding: 12px;
    }

    .doc-meta-item .doc-meta-label {
        font-size: 0.6rem;
    }

    .doc-meta-item .doc-meta-value {
        font-size: 0.75rem;
    }

    .doc-card-actions {
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 14px;
    }

    .doc-card-actions .btn-premium {
        padding: 10px 12px;
        font-size: 0.8rem;
        min-width: 0;
    }

    /* Primary action takes full width on mobile */
    .doc-card-actions .btn-premium.primary {
        flex: 1 1 100%;
    }

    /* Secondary buttons share a row */
    .doc-card-actions .btn-premium.secondary,
    .doc-card-actions .btn-premium.danger {
        flex: 1 1 calc(50% - 4px);
    }

    .doc-admin-section {
        padding-top: 14px;
    }
}

/* ============================================================
   LIVE OPERATIONS & BOOKINGS — Premium Styles
   Urgency rows, time badges, action button colors, view toggle
   ============================================================ */

/* --- View Toggle Button Group --- */
.btn-group {
    display: inline-flex;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
}

.btn-group .btn-premium {
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--glass-border);
    margin: 0;
    padding: 10px 24px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.btn-group .btn-premium:last-child {
    border-right: none;
}

.btn-group .btn-premium.active {
    background: var(--accent-gold) !important;
    color: #1a1a2e !important;
    font-weight: 600;
}

.btn-group .btn-premium.secondary {
    background: transparent;
    color: var(--text-secondary);
}

.btn-group .btn-premium.secondary:hover {
    background: rgba(194, 162, 98, 0.1);
    color: var(--accent-gold);
}

/* --- View Badge Counters --- */
.view-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    min-width: 20px;
}

.view-badge.loading {
    opacity: 0.5;
}

.view-badge.urgent {
    background: rgba(231, 76, 60, 0.15);
    color: var(--status-danger);
    animation: urgentPulse 2s ease-in-out infinite;
}

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

/* Active button badge should be dark */
.btn-group .btn-premium.active .view-badge {
    background: rgba(0, 0, 0, 0.2);
    color: #1a1a2e;
}

/* --- Urgency Row Styling (Live Operations) --- */
/* Subtle left-border accent only — preserves dark theme row backgrounds */
.booking-row-overdue {
    border-left: 4px solid var(--status-danger) !important;
}

.booking-row-urgent {
    border-left: 4px solid var(--accent-gold) !important;
}

.booking-row-high {
    border-left: 4px solid var(--status-info) !important;
}

.booking-row-medium {
    border-left: 3px solid var(--status-secondary) !important;
}

.booking-row-normal {
    /* No special styling — clean default row */
}

/* --- Time-Until-Pickup Badges (Premium style) --- */
/* Replace Bootstrap badge classes with premium glass badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    margin-top: 4px;
}

.badge-danger {
    color: var(--status-danger);
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.2);
}

.badge-warning {
    color: var(--status-warning);
    background: rgba(241, 196, 15, 0.1);
    border: 1px solid rgba(241, 196, 15, 0.2);
}

.badge-info {
    color: var(--status-info);
    background: rgba(52, 152, 219, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.2);
}

.badge-secondary {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
}

.badge-success {
    color: var(--status-success);
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.2);
}

.badge-primary {
    color: var(--accent-gold);
    background: rgba(194, 162, 98, 0.1);
    border: 1px solid rgba(194, 162, 98, 0.2);
}

/* Light theme badge overrides */
body.light-theme .badge-danger {
    background: rgba(231, 76, 60, 0.08);
}

body.light-theme .badge-warning {
    background: rgba(241, 196, 15, 0.08);
}

body.light-theme .badge-info {
    background: rgba(52, 152, 219, 0.08);
}

body.light-theme .badge-secondary {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

/* --- Action Button Color Variants --- */
/* Subtle colored icons on transparent background */
.btn-action.success {
    color: var(--status-success);
}

.btn-action.success:hover {
    color: var(--status-success);
    background: rgba(46, 204, 113, 0.1);
}

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

.btn-action.danger:hover {
    color: var(--status-danger);
    background: rgba(231, 76, 60, 0.1);
}

.btn-action.warning {
    color: var(--accent-gold);
}

.btn-action.warning:hover {
    color: var(--accent-gold-hover);
    background: rgba(194, 162, 98, 0.1);
}

.btn-action.info {
    color: var(--status-info);
}

.btn-action.info:hover {
    color: var(--status-info);
    background: rgba(52, 152, 219, 0.1);
}

.btn-action.primary {
    color: var(--accent-gold);
}

.btn-action.primary:hover {
    color: var(--accent-gold-hover);
    background: rgba(194, 162, 98, 0.1);
}

/* --- Premium Badge secondary variant --- */
.premium-badge.secondary {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
}

.premium-badge.primary {
    color: var(--accent-gold);
    background: rgba(194, 162, 98, 0.08);
}

/* --- Pagination Premium Styling --- */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid var(--glass-border);
}

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

.pagination-actions {
    display: flex;
    gap: 8px;
}

/* --- Warning Message (Assignment Modal) --- */
.warning-message {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--status-warning);
    background: rgba(241, 196, 15, 0.08);
    border: 1px solid rgba(241, 196, 15, 0.15);
}

.warning-message i {
    color: var(--status-warning);
}

/* ============================================
   EMPHASIS BUTTON — Prominent CTA variant
   ============================================ */
.btn-premium-emphasis {
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(194, 162, 98, 0.3);
    transition: all 0.3s ease;
}

.btn-premium-emphasis:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(194, 162, 98, 0.4);
}

@keyframes pulse-gold {
    0%, 100% { box-shadow: 0 4px 15px rgba(194, 162, 98, 0.3); }
    50% { box-shadow: 0 4px 25px rgba(194, 162, 98, 0.6); }
}

.btn-premium-pulse {
    animation: pulse-gold 2s ease-in-out infinite;
}

/* ============================================
   PRICING TABLE — Column min-widths
   ============================================ */
.premium-table th:nth-child(6),
.premium-table td:nth-child(6) {
    /* Effective Period column — prevent overlap */
}

.pricing-table-effective-period {
    min-width: 180px;
}

.pricing-table-status {
    min-width: 100px;
}

/* ============================================
   LOCATION PICKER — Scrollable with checkmarks
   ============================================ */
.location-picker-scroll {
    max-height: 300px;
    overflow-y: auto;
    padding: 12px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: var(--glass-bg);
}

.location-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px 12px;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--text-main);
    background: var(--input-bg);
    transition: background 0.2s, border-color 0.2s;
    margin-bottom: 6px;
}

.location-picker-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.location-picker-item.selected {
    background: rgba(194, 162, 98, 0.15);
    border-color: var(--accent-gold);
}

.location-picker-item .checkmark {
    color: var(--accent-gold);
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.location-picker-item.selected .checkmark {
    opacity: 1;
}

/* ============================================
   AVAILABILITY CALENDAR — FullCalendar theme
   ============================================ */
.fc-availability {
    --fc-border-color: var(--glass-border);
    --fc-button-bg-color: var(--accent-gold);
    --fc-button-border-color: var(--accent-gold);
    --fc-button-hover-bg-color: var(--accent-gold-hover);
    --fc-button-hover-border-color: var(--accent-gold-hover);
    --fc-button-active-bg-color: var(--accent-gold-hover);
    --fc-button-active-border-color: var(--accent-gold-hover);
    --fc-today-bg-color: rgba(194, 162, 98, 0.08);
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: var(--glass-bg);
    --fc-event-bg-color: var(--accent-gold);
    --fc-event-border-color: var(--accent-gold);
    background: var(--secondary-bg);
    border-radius: var(--radius);
    padding: 24px;
    border: 1px solid var(--glass-border);
}

.fc-availability .fc-toolbar-title {
    color: var(--text-main) !important;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
}

.fc-availability .fc-col-header-cell-cushion,
.fc-availability .fc-daygrid-day-number {
    color: var(--text-main);
    text-decoration: none;
}

.fc-availability .fc-day {
    cursor: pointer;
    transition: background 0.15s;
}

.fc-availability .fc-day:hover {
    background: rgba(194, 162, 98, 0.05) !important;
}

.fc-availability .fc-day.day-unavailable {
    background: rgba(231, 76, 60, 0.15) !important;
}

.fc-availability .fc-day.day-unavailable .fc-daygrid-day-number {
    color: var(--error);
    font-weight: 700;
}

.fc-availability .fc-day.day-available {
    background: rgba(46, 204, 113, 0.08) !important;
}

.fc-availability .fc-button {
    border-radius: 6px !important;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 6px 14px;
}

.fc-availability .fc-button-primary:not(:disabled).fc-button-active,
.fc-availability .fc-button-primary:not(:disabled):active {
    background: var(--accent-gold-hover);
    border-color: var(--accent-gold-hover);
}

.availability-legend {
    display: flex;
    gap: 24px;
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--glass-bg);
    border-radius: 8px;
    border: 1px solid var(--glass-border);
}

.availability-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.availability-legend-swatch {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

.availability-legend-swatch.available {
    background: rgba(46, 204, 113, 0.3);
    border: 1px solid var(--success);
}

.availability-legend-swatch.unavailable {
    background: rgba(231, 76, 60, 0.3);
    border: 1px solid var(--error);
}

/* ============================================================
   MacBook viewports (1280×832 / 1440×900 / 1512×982)

   The existing breakpoint ladder jumps from 1150px (small laptop)
   to 1400px (laptop) and then desktop. 1440 and 1512 fall above
   the 1400 cutoff, so 13"/15" Macs at default scaling get the
   "wide-desktop" treatment — sometimes squeezing filter cards
   into too-tight rows or letting horizontal table padding eat
   the visible area.

   Adjustments below are defensive (small reductions in horizontal
   padding + safer flex-grid wrapping). They do NOT change colours,
   typography, or component structure. UAT verification on a real
   MacBook is part of the PR test plan.
   ============================================================ */
@media (min-width: 1281px) and (max-width: 1520px) {
    /* Cap content-scroll horizontal padding so filter rows + tables
       have predictable inner widths without the 30px/40px assumption. */
    .content-scroll {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Filter card grid: ensure 5+ filters wrap cleanly instead of
       overflowing the row when columns plus gaps exceed available width. */
    .filter-grid {
        --min-width: 180px;
        gap: 14px;
    }

    /* Premium-modal: keep its margin off the viewport edge so users on
       1280-wide screens never see the modal flush against the side. */
    .premium-modal .modal-content {
        margin: 16px auto;
    }

    /* Premium tables: tighten cell padding slightly so 7-column tables
       (Booking Bin, Bookings, etc.) don't overflow horizontally. */
    .premium-table th,
    .premium-table td {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ───────────────────────────────────────────────────────────
   Login role boxes (Client / Business / Operator) — #228
   3 selectable boxes mapping to 2 panels (magic-link / password).
   Placed here (not root style.css) because the staging deploy
   bundle ships css/** but not root-level style.css.
   ─────────────────────────────────────────────────────────── */
.login-tabs.login-tabs--3 {
  display: flex;
  gap: 10px;
  margin: 0 0 24px;
}
.login-tabs--3 .login-tab {
  flex: 1 1 0;
  min-width: 0;
}
.login-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 10px;
  background: var(--glass-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius, 12px);
  color: var(--text-secondary, #c0d0c8);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.login-tab i {
  font-size: 1.25rem;
  color: var(--text-secondary, #c0d0c8);
  transition: color 0.18s ease;
}
.login-tab:hover {
  border-color: var(--accent-gold, #c2a262);
  color: var(--text-main, #fff);
  transform: translateY(-1px);
}
.login-tab:hover i {
  color: var(--accent-gold, #c2a262);
}
.login-tab.is-active {
  border-color: var(--accent-gold, #c2a262);
  background: var(--input-tint-bg, rgba(194, 162, 98, 0.12));
  color: var(--text-main, #fff);
}
.login-tab.is-active i {
  color: var(--accent-gold, #c2a262);
}
.login-tab:focus-visible {
  outline: 2px solid var(--accent-gold, #c2a262);
  outline-offset: 2px;
}
@media (max-width: 560px) {
  .login-tabs.login-tabs--3 {
    flex-direction: column;
    gap: 8px;
  }
  .login-tabs--3 .login-tab {
    flex: 1 1 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 16px;
  }
}

/* ── Login screen: full-bleed hero image + floating login card (no scroll) — #244 ──
   Replaces the old 2-column split (image | dark form panel), which left a big
   empty dark panel beside the form. Now the hero image covers the whole viewport
   and the login floats as a frosted dark card on the RIGHT, over the image; a
   right-weighted scrim keeps the form readable. No page scroll — fixed 100dvh +
   overflow hidden (it's just a login page). components.css loads after style.css,
   so these win the cascade. */
.login-split-container {
  display: block;          /* drop the 2-col grid */
  position: relative;
  height: 100vh;           /* fallback for browsers without dvh */
  height: 100dvh;          /* dynamic viewport — accounts for mobile browser chrome */
  min-height: 0;
  overflow: hidden;        /* no scroll */
}
/* ROOT CAUSE FIX (#244): the login renders inside the shell's
   <main class="content-scroll"> — a PADDED (60px 40px) + SCROLLING dashboard
   content area. That padding was the "padding around the image", and its
   overflow-y:auto was the page scroll. Neutralise both, but ONLY while the
   login is on screen (so the dashboard content area is unaffected). */
body:has(.login-split-container) .content-scroll {
  padding: 0;
  overflow: hidden;
}
/* Centre the LimoHawk logo + wordmark inside the login card. */
.login-branding {
  justify-content: center;
}
/* Hero image spans the whole screen (was the left grid column) */
.login-hero-section {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* .hero-bg-image is already position:absolute + object-fit:cover → now full-bleed.
   Scrim: darker toward the right so the floating card stays legible over the photo. */
.hero-overlay {
  background: linear-gradient(to right, rgba(14, 36, 27, 0.10) 0%, rgba(14, 36, 27, 0.32) 55%, rgba(14, 36, 27, 0.72) 100%);
}
/* #244: subtle vignette — darken the corners so the full-bleed photo reads as
   intentional/cinematic rather than a raw edge-to-edge crop. Kept gentle on
   purpose (transparent through the centre, ~40% black only at the far corners). */
.login-hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.40) 100%);
}
/* Form layer: float the card on the right, over the image */
.login-form-section {
  position: absolute;
  inset: 0;
  background: none;        /* remove the old dark panel — image shows through */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 24px clamp(20px, 6vw, 96px);
  overflow: hidden;        /* no scroll */
  z-index: 3;
}
/* The floating login card — frosted dark so the form reads over the photo */
.login-container {
  width: 100%;
  max-width: 400px;
  padding: 32px;
  background: rgba(14, 36, 27, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(199, 160, 90, 0.28);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
/* Mobile: center the card */
@media (max-width: 640px) {
  .login-form-section {
    justify-content: center;
    padding: 16px;
  }
  .login-container {
    max-width: 440px;
  }
}

/* --- Login-page scroll fix (iPad / short viewports) ---------------------
   The #244 redesign makes the login a full-viewport overlay:
   .login-split-container is 100dvh + overflow:hidden, and .login-form-section
   is position:absolute inset:0 with align-items:center + overflow:hidden. When
   the stacked magic-link + OTP card is taller than the viewport (iPad —
   especially landscape or with the on-screen keyboard up; also short laptops)
   its top is centred above the screen edge and clipped, with no way to scroll
   to it. Because the form section is pinned to the viewport, page scroll can't
   help — the section itself must scroll. Fix: let it scroll, and use
   `safe center` so the card centres when it fits but falls back to top-aligned
   (and therefore reachable) when it's taller than the viewport. components.css
   loads last so this wins the cascade; style.css is not in the deploy bundle. */
.login-form-section {
  overflow-y: auto;
  align-items: safe center;
}

/* #348 — Login card is ALWAYS a dark frosted panel (.login-container,
   rgba(14,36,27,0.82)), but `.premium-input` text is `var(--text-main)`,
   which a saved LIGHT theme resolves to near-black (#0a1a14) → the email /
   password text renders black-on-dark and is illegible (Faiz 2026-06-16,
   "business form email text renders black"). Force the login inputs to a
   theme-independent light treatment so they read on the dark card in either
   theme. */
.login-container .premium-input {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(199, 160, 90, 0.35);
}
.login-container .premium-input::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}
.login-container .premium-input:focus {
  border-color: var(--accent-gold);
  background-color: rgba(255, 255, 255, 0.12) !important;
}