/* public/css/admin-dashboard.css */
/* Modern Admin Dashboard Styles */

/* Import modern fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* Color scheme (maintained from original) */
    --main-bg-color: #f8fafc; /* Slightly softer background */
    --sidebar-bg: #2a3f54; /* Dark blue from image */
    --sidebar-text: #ffffff;
    --card-bg: #ffffff;
    --card-border-color: #e1e5e9;
    --primary-text: #1a202c;
    --secondary-text: #64748b;
    --action-color: #004A99; /* Brand blue */
    --success-color: #11B58A; /* Brand green */
    --dark-button-bg: #343a40;
    
    /* Brand Colors */
    --brand-blue: #004A99;
    --brand-blue-hover: #003471;
    --brand-blue-light: #1e3a8a;
    --brand-green: #11B58A;
    --brand-green-hover: #0d9668;
    --brand-green-light: #10b981;
    --brand-white: #FBFFFF;
    
    /* Modern design tokens */
    --border-radius-sm: 6px;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Typography */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    
    /* Spacing */
    --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;
    --space-16: 4rem;
    --space-20: 5rem;
    
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base typography improvements */
* {
    box-sizing: border-box;
}

body, html {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--primary-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-base);
    font-weight: 600;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: var(--space-4);
    color: var(--primary-text);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5, h6 { font-size: var(--font-size-base); }

p {
    margin-top: 0;
    margin-bottom: var(--space-4);
    line-height: 1.7;
}

code, pre {
    font-family: var(--font-family-mono);
    font-size: 0.9em;
}

/* Modern layout override */
.sonata-bc .content-wrapper {
    background-color: var(--main-bg-color);
}

/* Desktop: ensure admin content uses the full available width with gentle side padding */
@media (min-width: 1101px) {
    .sonata-bc .content-wrapper .container,
    .sonata-bc .content-wrapper .container-fluid {
        max-width: none;
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }
    .sonata-ba-list .box,
    .sonata-ba-list .box-body,
    .sonata-ba-list .table-responsive {
        width: 100%;
    }
}

.dashboard-container {
    padding: var(--space-6);
    max-width: 100%;
}

/* Modern dashboard cards */
.dashboard-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    padding: var(--space-6);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.dashboard-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
}

.dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--action-color), var(--success-color));
    opacity: 0;
    transition: opacity var(--transition-base);
}

.dashboard-card:hover::before {
    opacity: 1;
}

.dashboard-card-header {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--primary-text);
    margin-bottom: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: var(--space-4);
}

.dashboard-card-header .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius);
    background: linear-gradient(135deg, var(--action-color), #6366f1);
    color: white;
    font-size: var(--font-size-lg);
    margin-right: var(--space-3);
}

/* Modern route list styles */
.route-list .route-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: var(--space-3);
    background-color: var(--card-bg);
    border-radius: var(--border-radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    border: 1px solid var(--card-border-color);
    /* side accent handled by ::before for richer effects */
    border-left: none;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    position: relative;
}

/* Keep the selection checkbox visible beside flexed columns */
.route-item > input[type="checkbox"] {
    grid-column: 1;
    grid-row: 1 / span 2;
    flex: 0 0 26px;
    margin-right: var(--space-3);
    align-self: flex-start;
}

.route-list .route-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(180deg, var(--brand-green, #11B58A) 0%, #0d9668 100%);
    border-top-left-radius: var(--border-radius-lg);
    border-bottom-left-radius: var(--border-radius-lg);
    box-shadow: inset -1px 0 0 rgba(0,0,0,0.06);
    transition: width 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.route-list .route-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.route-list .route-item:hover::before {
    width: 10px;
    background: linear-gradient(180deg, #12c099 0%, #0b7d58 100%);
    box-shadow: 2px 0 10px rgba(17,181,138,0.35);
}

.route-item .route-col {
    flex: 0 0 33%;
    padding-right: var(--space-4);
}

.route-item > .route-col:first-of-type {
    grid-column: 2;
    grid-row: 2;
}

.route-item > .route-col:nth-of-type(2) {
    grid-column: 3;
    grid-row: 2;
}

/* Prominent title/value layout */
.route-item .route-col .route-field {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: baseline;
    gap: 8px 12px;
    margin-bottom: 6px;
}

.route-item .route-col .route-label {
    color: var(--secondary-text);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.route-item .route-col .route-value {
    color: var(--primary-text);
    font-weight: 600;
}

.route-item .route-col p {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--primary-text);
    line-height: 1.6;
}

.route-item .route-col p strong {
    color: var(--brand-blue);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.route-item .route-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
    grid-column: 2 / span 2;
    grid-row: 1;
    flex: 0 0 33%;
}

.route-item .route-actions .jobs {
    font-weight: 700;
    color: var(--brand-blue);
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-base);
    border: 1px solid #bfdbfe;
}

.route-item .route-actions .job-select {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--card-border-color);
    background: white;
    font-size: var(--font-size-sm);
    transition: border-color var(--transition-fast);
}

.route-item .route-actions .job-select:focus {
    outline: none;
    border-color: var(--action-color);
    box-shadow: 0 0 0 3px rgba(78, 115, 223, 0.1);
}

/* Tablet layout: allow columns to wrap to avoid squashing the checkbox */
@media (max-width: 1100px) {
    .route-item {
        display: flex;
        flex-wrap: wrap;
    }

    .route-item .route-col,
    .route-item .route-actions {
        flex: 1 1 100%;
        padding-right: 0;
        margin-top: var(--space-3);
    }

    .route-item .route-actions {
        justify-content: flex-start;
    }
}

/* Mobile/tablet responsive route items */
@media (max-width: 1100px) {
    .route-item {
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-4);
        padding-right: calc(var(--space-4) + 36px); /* leave room for the checkbox */
        font-size: 1rem; /* improve readability */
        line-height: 1.55;
    }

    /* Place the checkbox neatly at the top-right on mobile */
    .route-item > input[type="checkbox"] {
        position: absolute;
        right: 12px;
        top: 12px;
        transform: scale(1.1);
    }

    .route-item .route-col,
    .route-item .route-actions {
        flex: 1 1 100%;
        padding-right: 0;
        margin-top: var(--space-3);
    }

    .route-item .route-col p {
        font-size: 1rem;
        line-height: 1.55;
        margin: 6px 0;
        color: var(--primary-text);
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* Make the first strong line act as the title */
    .route-item .route-col p strong {
        display: block;
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--brand-blue);
        letter-spacing: 0.01em;
        margin-bottom: 2px;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* Inputs should not overflow on narrow screens */
    .route-item input[type="date"],
    .route-item select,
    .route-item .job-select {
        width: 100%;
        max-width: 100%;
    }

    .route-item .route-actions {
        justify-content: flex-start;
        gap: var(--space-2);
        margin-top: var(--space-4);
    }

    /* Make primary buttons and map button stack full width for thumb reachability */
    .route-item .route-actions .btn,
    .route-item .route-actions .btn-custom,
    .route-item .route-actions .job-select {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }

    .route-item .route-actions .jobs {
        order: -1;
        margin-bottom: 6px;
    }
}

/* Desktop header: use default Admin layout (logo stays at left). No special overrides. */

/* Extra-small phones: tighten spacing slightly */
@media (max-width: 420px) {
    .route-item {
        padding: var(--space-3);
    }
    .route-item .route-actions .btn,
    .route-item .route-actions .btn-custom {
        padding: 0.55rem 0.9rem;
    }
}

/* Modern map container */
.map-container {
    height: 705px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-text);
    border: 1px solid var(--card-border-color);
    position: relative;
    overflow: hidden;
}

.map-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><g fill-opacity="0.03"><polygon points="30,0 36,24 60,30 36,36 30,60 24,36 0,30 24,24"/></g></svg>') repeat;
    opacity: 0.5;
}

.map-container .map-placeholder {
    text-align: center;
    z-index: 1;
    position: relative;
}

.map-container .map-placeholder i {
    font-size: 3rem;
    color: var(--secondary-text);
    margin-bottom: var(--space-2);
    opacity: 0.7;
}

/* Modern table styles */
.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    background: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.dashboard-table th, .dashboard-table td {
    text-align: left;
    padding: var(--space-4);
    border-bottom: 1px solid #f1f5f9;
    font-size: var(--font-size-sm);
    vertical-align: middle;
}

.dashboard-table th {
    font-weight: 600;
    color: var(--primary-text);
    background: #f8fafc;
    border-bottom: 2px solid var(--card-border-color);
    position: sticky;
    top: 0;
    z-index: 10;
}

.dashboard-table tbody tr {
    transition: background-color var(--transition-fast);
}

.dashboard-table tbody tr:hover {
    background-color: #f8fafc;
}

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

/* Table responsive wrapper */
.table-responsive {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Modern Brand-Aligned Button System */
.btn,
.btn-custom,
button,
input[type="submit"],
input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    text-transform: none;
    letter-spacing: 0.025em;
}

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

.btn:focus,
.btn-custom:focus,
button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 74, 153, 0.3);
}

.btn:active,
.btn-custom:active,
button:active {
    transform: translateY(0);
}

.btn:disabled,
.btn-custom:disabled,
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: var(--shadow-sm);
}

/* Ripple Effect */
.btn::before,
.btn-custom::before,
button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:active::before,
.btn-custom:active::before,
button:active::before {
    width: 300px;
    height: 300px;
}

/* Primary Button - Brand Blue */
.btn-primary,
.btn-custom.btn-primary {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-light) 100%);
    color: var(--brand-white);
    border-color: var(--brand-blue);
}

.btn-primary:hover,
.btn-custom.btn-primary:hover {
    background: linear-gradient(135deg, var(--brand-blue-hover) 0%, var(--brand-blue) 100%);
    border-color: var(--brand-blue-hover);
    color: var(--brand-white);
}

/* Success Button - Brand Green */
.btn-success,
.btn-custom.btn-success {
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-light) 100%);
    color: var(--brand-white);
    border-color: var(--brand-green);
}

.btn-success:hover,
.btn-custom.btn-success:hover {
    background: linear-gradient(135deg, var(--brand-green-hover) 0%, var(--brand-green) 100%);
    border-color: var(--brand-green-hover);
    color: var(--brand-white);
}

/* Dark Button - Enhanced with brand colors */
.btn-dark,
.btn-custom.btn-dark {
    background: linear-gradient(135deg, var(--brand-blue-hover) 0%, #1e293b 100%);
    color: var(--brand-white);
    border-color: var(--brand-blue-hover);
}

.btn-dark:hover,
.btn-custom.btn-dark:hover {
    background: linear-gradient(135deg, #1e293b 0%, var(--brand-blue) 100%);
    border-color: #1e293b;
    color: var(--brand-white);
}

/* Secondary Button */
.btn-secondary,
.btn-custom.btn-secondary {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: var(--brand-white);
    border-color: #6b7280;
}

.btn-secondary:hover,
.btn-custom.btn-secondary:hover {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
    border-color: #4b5563;
    color: var(--brand-white);
}

/* Danger Button */
.btn-danger,
.btn-custom.btn-danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: var(--brand-white);
    border-color: #dc2626;
}

.btn-danger:hover,
.btn-custom.btn-danger:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    border-color: #b91c1c;
    color: var(--brand-white);
}

/* Warning Button */
.btn-warning,
.btn-custom.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: var(--brand-white);
    border-color: #f59e0b;
}

.btn-warning:hover,
.btn-custom.btn-warning:hover {
    background: linear-gradient(135deg, #d97706 0%, #92400e 100%);
    border-color: #d97706;
    color: var(--brand-white);
}

/* Button Sizes */
.btn-sm,
.btn-custom.btn-sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    border-radius: var(--border-radius-sm);
}

.btn-lg,
.btn-custom.btn-lg {
    padding: var(--space-4) var(--space-6);
    font-size: var(--font-size-lg);
    border-radius: var(--border-radius-lg);
}

.btn-full-width {
    width: 100%;
    margin-top: var(--space-3);
}

/* Icon buttons */
.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon.btn-sm {
    width: 32px;
    height: 32px;
}

.btn-icon.btn-lg {
    width: 48px;
    height: 48px;
}

/* Route specific buttons */
.btn-route-bike,
.btn-route-car {
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-hover) 100%);
    color: var(--brand-white);
}

.btn-route-bike.active,
.btn-route-car.active {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-light) 100%);
    color: var(--brand-white);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-route-bike:hover,
.btn-route-car:hover {
    background: linear-gradient(135deg, var(--brand-green-hover) 0%, var(--brand-green) 100%);
}

/* Show route button */
.btn-show-route {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-hover) 100%);
    color: var(--brand-white);
}

/* ==============================================
   SONATA ADMIN BUTTON MODERNIZATION
   ============================================== */

/* Modern Sonata action buttons (edit, show, delete) */
.sonata-actions .btn,
.sonata-ba-list .btn,
.btn-group .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0.375rem 0.75rem;
    margin: 0 0.125rem;
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

/* Default Sonata button (btn-default) - Modern neutral style */
.sonata-actions .btn-default,
.sonata-ba-list .btn-default,
.btn-group .btn-default {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    border-color: #d1d5db;
    box-shadow: var(--shadow-sm);
}

.sonata-actions .btn-default:hover,
.sonata-ba-list .btn-default:hover,
.btn-group .btn-default:hover {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    color: #334155;
    border-color: #9ca3af;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Edit button - Brand blue for primary action */
.sonata-actions .btn-default[title*="Edit"],
.sonata-actions .btn-default[title*="edit"],
.sonata-ba-list .btn-default[title*="Edit"],
.sonata-ba-list .btn-default[title*="edit"],
.btn-group .btn-default[title*="Edit"],
.btn-group .btn-default[title*="edit"] {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-light) 100%);
    color: var(--brand-white);
    border-color: var(--brand-blue);
}

.sonata-actions .btn-default[title*="Edit"]:hover,
.sonata-actions .btn-default[title*="edit"]:hover,
.sonata-ba-list .btn-default[title*="Edit"]:hover,
.sonata-ba-list .btn-default[title*="edit"]:hover,
.btn-group .btn-default[title*="Edit"]:hover,
.btn-group .btn-default[title*="edit"]:hover {
    background: linear-gradient(135deg, var(--brand-blue-hover) 0%, var(--brand-blue) 100%);
    border-color: var(--brand-blue-hover);
    box-shadow: 0 4px 12px -2px rgba(0, 74, 153, 0.3);
}

/* Show/View button - Brand green for secondary action */
.sonata-actions .btn-default[title*="Show"],
.sonata-actions .btn-default[title*="View"],
.sonata-actions .btn-default[title*="show"],
.sonata-actions .btn-default[title*="view"],
.sonata-ba-list .btn-default[title*="Show"],
.sonata-ba-list .btn-default[title*="View"],
.sonata-ba-list .btn-default[title*="show"],
.sonata-ba-list .btn-default[title*="view"],
.btn-group .btn-default[title*="Show"],
.btn-group .btn-default[title*="View"],
.btn-group .btn-default[title*="show"],
.btn-group .btn-default[title*="view"] {
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-light) 100%);
    color: var(--brand-white);
    border-color: var(--brand-green);
}

.sonata-actions .btn-default[title*="Show"]:hover,
.sonata-actions .btn-default[title*="View"]:hover,
.sonata-actions .btn-default[title*="show"]:hover,
.sonata-actions .btn-default[title*="view"]:hover,
.sonata-ba-list .btn-default[title*="Show"]:hover,
.sonata-ba-list .btn-default[title*="View"]:hover,
.sonata-ba-list .btn-default[title*="show"]:hover,
.sonata-ba-list .btn-default[title*="view"]:hover,
.btn-group .btn-default[title*="Show"]:hover,
.btn-group .btn-default[title*="View"]:hover,
.btn-group .btn-default[title*="show"]:hover,
.btn-group .btn-default[title*="view"]:hover {
    background: linear-gradient(135deg, var(--brand-green-hover) 0%, var(--brand-green) 100%);
    border-color: var(--brand-green-hover);
    box-shadow: 0 4px 12px -2px rgba(17, 181, 138, 0.3);
}

/* Delete button - Danger red */
.sonata-actions .btn-default[title*="Delete"],
.sonata-actions .btn-default[title*="delete"],
.sonata-ba-list .btn-default[title*="Delete"],
.sonata-ba-list .btn-default[title*="delete"],
.btn-group .btn-default[title*="Delete"],
.btn-group .btn-default[title*="delete"] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: var(--brand-white);
    border-color: #dc2626;
}

.sonata-actions .btn-default[title*="Delete"]:hover,
.sonata-actions .btn-default[title*="delete"]:hover,
.sonata-ba-list .btn-default[title*="Delete"]:hover,
.sonata-ba-list .btn-default[title*="delete"]:hover,
.btn-group .btn-default[title*="Delete"]:hover,
.btn-group .btn-default[title*="delete"]:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    border-color: #b91c1c;
    box-shadow: 0 4px 12px -2px rgba(220, 38, 38, 0.3);
}

/* Info buttons (like Assign Rider) */
.sonata-actions .btn-info,
.sonata-ba-list .btn-info,
.btn-group .btn-info {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: var(--brand-white);
    border-color: #0ea5e9;
}

.sonata-actions .btn-info:hover,
.sonata-ba-list .btn-info:hover,
.btn-group .btn-info:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    border-color: #0284c7;
    box-shadow: 0 4px 12px -2px rgba(14, 165, 233, 0.3);
}

/* Icon styling in Sonata buttons */
.sonata-actions .btn i,
.sonata-ba-list .btn i,
.btn-group .btn i {
    font-size: 0.875rem;
    line-height: 1;
}

/* Ripple effect for Sonata buttons */
.sonata-actions .btn::before,
.sonata-ba-list .btn::before,
.btn-group .btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.sonata-actions .btn:active::before,
.sonata-ba-list .btn:active::before,
.btn-group .btn:active::before {
    width: 100px;
    height: 100px;
}

/* Focus states for accessibility */
.sonata-actions .btn:focus,
.sonata-ba-list .btn:focus,
.btn-group .btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 74, 153, 0.3);
}

/* Button group spacing */
.sonata-actions .btn-group .btn:not(:last-child) {
    margin-right: 0.125rem;
}

/* Disabled state */
.sonata-actions .btn:disabled,
.sonata-ba-list .btn:disabled,
.btn-group .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: var(--shadow-sm);
}

/* ==============================================
   MODERN UTILITY CLASSES & ENHANCEMENTS
   ============================================== */

/* Smooth scrolling for the entire page */
html {
    scroll-behavior: smooth;
}

/* Modern scrollbar styling */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
    transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

*::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Modern focus styles */
*:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

*:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==============================================
   HEADER POSITIONING & OVERLAP FIXES
   ============================================== */

/* Base header positioning fix */
.sonata-bc.fixed .main-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    width: 100%;
}

/* Content wrapper adjustments */
.sonata-bc.fixed .content-wrapper,
.sonata-bc.fixed .main-content {
    margin-top: 60px;
    padding-top: 20px;
}

/* Sidebar adjustments */
.sonata-bc.fixed .main-sidebar {
    position: fixed !important;
    height: calc(100vh - 70px);
    z-index: 1020;
}

/* Interactive elements positioning */
.dashboard-card {
    position: relative;
    z-index: 1;
}

/* Admin list fixes - Remove excessive z-index to prevent overlapping */
.sonata-ba-list .btn,
.sonata-ba-filter .btn,
.sonata-ba-list .form-control {
    position: relative;
    z-index: auto;
}

/* Modal and dropdown positioning */
.modal {
    z-index: 1050;
}

.dropdown-menu,
.sonata-ba-list .dropdown-menu,
.sonata-ba-filter .dropdown-menu {
    z-index: 2001;
}

/* Content header spacing so it never overlaps filters/tables */
.content-header {
    position: relative;
    z-index: 1;
    margin-top: 0;
    padding-top: 10px;
    background: transparent;
}

.content-header .breadcrumb {
    position: relative;
    z-index: 2;
}

/* Mobile/tablet responsive adjustments */
@media (max-width: 1100px) {
    .sonata-bc.fixed .content-wrapper,
    .sonata-bc.fixed .main-content {
        margin-top: 60px;
    }
    
    .sonata-bc.fixed .main-sidebar {
        height: calc(100vh - 60px);
    }
}

@media (min-width: 1101px) {
    .sonata-bc.fixed .content-wrapper,
    .sonata-bc.fixed .main-content {
        margin-left: 250px;
    }
}

/* ==============================================
   MODERN TABLE STYLING
   ============================================== */

/* Modern table styling for admin lists */
.sonata-ba-list .table,
.table-modern {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
    margin: 0 0 1.5rem 0; /* remove side margins so table can stretch */
    font-size: 0.875rem;
}

/* Ensure header and body compute widths identically */
.sonata-ba-list .table {
    table-layout: fixed;
    width: 100%;
}

.sonata-ba-list .table thead th,
.sonata-ba-list .table tbody td {
    box-sizing: border-box;
}

/* Modern table header */
.sonata-ba-list .table thead th,
.table-modern thead th {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    color: #374151;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #e5e7eb;
    position: relative;
    z-index: 1;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    vertical-align: middle;
    white-space: nowrap;
}

/* Modern table cells */ 
.sonata-ba-list .table tbody td,
.table-modern tbody td {
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modern table rows */
.sonata-ba-list .table tbody tr:hover,
.table-modern tbody tr:hover {
    background-color: #f8fafc;
}

/* Alternating row colors */
.sonata-ba-list .table tbody tr:nth-child(odd),
.table-modern tbody tr:nth-child(odd) {
    background-color: #fafbfc;
}

/* "Add new" button styling */
.sonata-ba-list .btn-success,
.add-new-btn {
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-light) 100%);
    color: var(--brand-white);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.sonata-ba-list .btn-success:hover,
.add-new-btn:hover {
    background: linear-gradient(135deg, var(--brand-green-hover) 0%, var(--brand-green) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 15px -3px rgba(17, 181, 138, 0.3), 0 4px 6px -2px rgba(17, 181, 138, 0.1);
}

/* ==============================================
   ADMIN LIST LAYOUT FIXES - PREVENT OVERLAPPING
   ============================================== */

/* Filter section spacing */
.sonata-ba-filter,
.sonata-filter-form {
    background: white;
    padding: 1.5rem;
    margin: 1rem 0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    position: relative;
    z-index: 0; /* lower than dropdowns */
    clear: both;
    overflow: visible;
}

/* Action buttons area */
.sonata-ba-list-field-batch-actions,
.sonata-ba-list .box-header,
.list-actions {
    background: white;
    padding: 1rem 1.5rem;
    margin: 0 0 1rem 0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    position: relative;
    z-index: 1;
    clear: both;
}

/* Keep batch action controls neatly inside the footer */
.sonata-ba-list-field-batch-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
}
.sonata-ba-list-field-batch-actions input[type="checkbox"] {
    margin: 0 8px 0 0;
    position: relative;
    left: 0;
}
.sonata-ba-list-field-batch-actions label { margin: 0; }
.sonata-ba-list-field-batch-actions .form-inline,
.sonata-ba-list-field-batch-actions .form-group { margin: 0; }

/* Table container proper spacing */
.sonata-ba-list .table-responsive,
.table-container {
    margin-top: 1rem;
    position: relative;
    z-index: 1;
    clear: both;
    width: 100%;
}

/* Ensure filters don't overlap table */
.sonata-ba-list .box,
.sonata-ba-list .box-body {
    overflow: visible;
    position: relative;
    clear: both;
}

/* Pagination area */
.sonata-ba-list .pagination,
.sonata-ba-list .dataTables_paginate {
    margin-top: 1.5rem;
    padding: 1rem 0;
    background: white;
    border-top: 1px solid #e5e7eb;
    position: relative;
    z-index: 1;
    clear: both;
}

/* Form elements spacing within filters */
.sonata-ba-filter .form-group {
    margin-bottom: 1rem;
}

.sonata-ba-filter .form-group:last-child {
    margin-bottom: 0;
}

/* Button groups spacing */
.sonata-ba-filter .btn-group,
.sonata-ba-list .btn-group {
    margin: 0.25rem 0.5rem 0.25rem 0;
}

/* Ensure proper flow layout */
.sonata-ba-list {
    width: 100%;
}

.sonata-ba-list > * {
    width: 100%;
    margin-bottom: 0.5rem;
}

/* Ensure the header/action bar area stays above route/map rows but below modals */
.main-header {
    position: relative;
    z-index: 1030;
}

/* Position the right-side profile/settings/dark-mode cluster on the same row as the + icon */
.navbar-custom-menu {
    position: absolute;
    right: 14px;
    top: 8px;
    display: flex;
    align-items: center;
}

.navbar-custom-menu .nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.navbar-custom-menu .nav > li > a {
    padding: 6px 8px;
}

/* Table header actions */
.sonata-ba-list thead .btn,
.table-modern thead .btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    margin: 0.125rem;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
    .sonata-ba-filter,
    .sonata-ba-list-field-batch-actions,
    .sonata-ba-list .box-header {
        padding: 1rem;
        margin: 0.75rem 0 1rem 0; /* add a bit more bottom space on mobile */
    }
    
    .sonata-ba-filter .form-group {
        margin-bottom: 0.75rem;
    }

    /* Extra spacing for batch action row (All elements / Delete / OK) */
    .sonata-ba-list .sonata-ba-list-field-batch-actions { margin-left: 8px; margin-right: 8px; }
    .sonata-ba-list .sonata-ba-list-field-batch-actions .btn { margin-top: 8px; }
}

/* Compact, mobile-friendly table header/toolbar above Sonata lists */
@media (max-width: 1100px) {
    .sonata-ba-list .box-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 0.5rem 0.75rem;
        position: sticky;
        top: 0; /* sticks under the fixed admin header */
        background: #fff;
        z-index: 2;
        border-bottom: 1px solid #e5e7eb;
    }
    .sonata-ba-list .box-header .box-title { margin: 0; font-size: 0.95rem; }
    .sonata-ba-list .box-header .btn,
    .sonata-ba-list .box-header .dropdown-menu,
    .sonata-ba-list .box-header .dropdown,
    .sonata-ba-list .box-header .pull-right { flex: 0 0 auto; }
}

/* Modern utility classes */
.dashboard-table.full-width {
    flex: 0 0 100%;
}

/* Ensure logo is fully visible when sidebar is collapsed */
@media (min-width: 1101px) {
  .sidebar-mini.sidebar-collapse .main-header .logo {
      width: 50px; /* AdminLTE collapsed width */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px 0;
      overflow: hidden;
  }
  .sidebar-mini.sidebar-collapse .main-header .logo span { display: none !important; }
  .sidebar-mini.sidebar-collapse .main-header .logo img {
      max-height: 34px;
      width: auto;
      height: auto;
      object-fit: contain;
      display: block;
      margin: 0 auto;
  }
}

/* Collapsed sidebar icon alignment and spacing */
@media (min-width: 1101px) {
  .sidebar-mini.sidebar-collapse .main-sidebar { width: 50px !important; }
  .sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li > a {
      padding: 12px 0 !important;
      text-align: center;
      width: 50px;
  }
  .sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li > a > i {
      margin: 0 !important;
      font-size: 18px;
      width: 100%;
  }
  .sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li > a > span,
  .sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li > .pull-right-container { display: none !important; }
  .sidebar-mini.sidebar-collapse .main-sidebar .sidebar-form { display: none !important; }
}

/* Prevent collapsed width on tablet/mobile */
@media (max-width: 1100px) {
  .sidebar-mini.sidebar-collapse .main-sidebar {
      width: var(--sidebar-expanded, 230px) !important;
      transform: translateX(0);
  }
  .sidebar-mini.sidebar-collapse .main-header .logo {
      width: auto !important;
      padding: 0 !important;
      overflow: visible !important;
  }
}

/* Mobile header layout: logo visually between hamburger (left) and + cluster (right) */
@media (max-width: 1100px) {
    .main-header { min-height: 58px; }
    .main-header .navbar { position: relative; min-height: 70px; }
    .main-header .logo {
        position: absolute !important;
        left: 50%;
        top: 10px;
        transform: translateX(-50%);
        float: none !important;
        width: auto;
        height: auto;
        background: transparent !important;
        padding: 0 !important;
        max-width: calc(100% - 160px);
        z-index: 1031;
        text-align: center;
    }
    .main-header .logo img { max-height: 34px; width: auto; margin-top: 5px; margin-right: 130px; }
    .main-header .logo span { display: none; }
    .main-header .sidebar-toggle { position: absolute; left: 12px; top: 12px; z-index: 1032; }
    .navbar-custom-menu { right: 10px; top: 18px; }
}

/* ==============================================
   DASHBOARD BUTTONS – brand-aligned, modern
   Applies to buttons inside dashboard cards, route actions, and dashboard tables
   ============================================== */
.dashboard-container .btn,
.dashboard-card .btn,
.dashboard-card .btn-custom,
.route-actions .btn,
.route-actions .btn-custom,
.dashboard-table .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.6rem 1rem;
    border-radius: 9999px; /* pill */
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    transition: transform 120ms ease, box-shadow 160ms ease, filter 160ms ease, background 160ms ease, border-color 160ms ease;
}

.dashboard-container .btn i,
.dashboard-card .btn i,
.route-actions .btn i,
.dashboard-table .btn i { font-size: 0.95rem; opacity: 0.95; }

.dashboard-container .btn:hover,
.dashboard-card .btn:hover,
.route-actions .btn:hover,
.dashboard-table .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 18px rgba(0,0,0,0.10); }
.dashboard-container .btn:active,
.dashboard-card .btn:active,
.route-actions .btn:active,
.dashboard-table .btn:active { transform: translateY(0); box-shadow: 0 6px 14px rgba(0,0,0,0.08); }

/* Variants mapped to brand colors */
.dashboard-container .btn-primary,
.dashboard-card .btn-primary,
.route-actions .btn-primary,
.dashboard-table .btn-primary {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-light) 100%);
    color: var(--brand-white);
    border-color: var(--brand-blue);
}
.dashboard-container .btn-primary:hover,
.dashboard-card .btn-primary:hover,
.route-actions .btn-primary:hover,
.dashboard-table .btn-primary:hover { filter: brightness(1.04) saturate(1.05); border-color: var(--brand-blue-hover); }

.dashboard-container .btn-success,
.dashboard-card .btn-success,
.route-actions .btn-success,
.dashboard-table .btn-success {
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-hover) 100%);
    color: var(--brand-white);
    border-color: var(--brand-green);
}
.dashboard-container .btn-success:hover,
.dashboard-card .btn-success:hover,
.route-actions .btn-success:hover,
.dashboard-table .btn-success:hover { filter: brightness(1.04) saturate(1.05); }

.dashboard-container .btn-warning,
.dashboard-card .btn-warning,
.route-actions .btn-warning,
.dashboard-table .btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border-color: #f59e0b;
}
.dashboard-container .btn-danger,
.dashboard-card .btn-danger,
.route-actions .btn-danger,
.dashboard-table .btn-danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    border-color: #dc2626;
}

/* Icon-only circle buttons for compact actions */
.dashboard-container .btn-icon,
.dashboard-card .btn-icon,
.route-actions .btn-icon,
.dashboard-table .btn-icon {
    width: 42px; height: 42px; padding: 0; border-radius: 50%; justify-content: center;
}

/* Large CTA version used by prominent actions */
.dashboard-container .btn-lg,
.dashboard-card .btn-lg { padding: 0.75rem 1.25rem; font-size: 1rem; }

/* Outline style for secondary actions that should match brand */
.dashboard-container .btn-outline,
.dashboard-card .btn-outline,
.route-actions .btn-outline,
.dashboard-table .btn-outline {
    background: transparent;
    color: var(--brand-blue);
    border-color: var(--brand-blue);
}
.dashboard-container .btn-outline:hover,
.dashboard-card .btn-outline:hover,
.route-actions .btn-outline:hover,
.dashboard-table .btn-outline:hover { background: rgba(0,74,153,0.08); }

/* Focus ring for accessibility */
.dashboard-container .btn:focus,
.dashboard-card .btn:focus,
.route-actions .btn:focus,
.dashboard-table .btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(0,74,153,0.25), 0 6px 14px rgba(0,0,0,0.08); }

/* ==============================================
   SONATA LIST TABLE – COLUMN LAYOUT & SIZING
   ============================================== */

/* General cell alignment */
.sonata-ba-list .table th,
.sonata-ba-list .table td {
    vertical-align: middle;
}

/* Make actions column stable and keep buttons in one line where possible */
.sonata-ba-list .table th.sonata-ba-list-field-actions,
.sonata-ba-list .table td.sonata-ba-list-field-actions {
    width: 380px;
    white-space: nowrap;
}

/* Fallback if Sonata does not output the actions class */
@media (min-width: 1200px) {
    .sonata-ba-list .table thead th:last-child,
    .sonata-ba-list .table tbody td:last-child {
        width: 380px;
        white-space: nowrap;
        text-align: right;
    }
}

/* Compact the first few columns (checkbox/ID/short fields) */
@media (min-width: 1200px) {
    .sonata-ba-list .table thead th:nth-child(1),
    .sonata-ba-list .table tbody td:nth-child(1) { width: 48px; }
    .sonata-ba-list .table thead th:nth-child(2),
    .sonata-ba-list .table tbody td:nth-child(2) { width: 90px; white-space: nowrap; }
    .sonata-ba-list .table thead th:nth-child(3),
    .sonata-ba-list .table tbody td:nth-child(3) { width: 160px; }
    .sonata-ba-list .table thead th:nth-child(4),
    .sonata-ba-list .table tbody td:nth-child(4) { width: 170px; }
}

/* Header sort/link alignment */
.sonata-ba-list .table thead th a,
.sonata-ba-list .table thead th > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
}

.sonata-ba-list .table thead th i,
.sonata-ba-list .table thead th svg {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Identifier and status cells */
.sonata-ba-list .table td.sonata-ba-list-field-identifier,
.sonata-ba-list .table th.sonata-ba-list-field-identifier {
    white-space: nowrap;
}

.sonata-ba-list .table td.sonata-ba-list-field-boolean,
.sonata-ba-list .table td.sonata-ba-list-field-integer,
.sonata-ba-list .table td.sonata-ba-list-field-smallint {
    text-align: center;
}

.sonata-ba-list .table td .label,
.sonata-ba-list .table td .badge {
    display: inline-block;
    min-width: 84px;
    text-align: center;
}

/* Customer/email column: prevent layout jump with long emails */
.sonata-ba-list .table td.sonata-ba-list-field-email,
.sonata-ba-list .table td.sonata-ba-list-field-text {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Actions cell button layout */
.sonata-ba-list .table td.sonata-ba-list-field-actions .btn,
.sonata-ba-list .table tbody td:last-child .btn {
    margin: 3px 4px;
}

.sonata-ba-list .table td.sonata-ba-list-field-actions .btn-group,
.sonata-ba-list .table tbody td:last-child .btn-group {
    flex-wrap: wrap;
}

/* Responsive: allow wrapping actions and relaxing fixed widths */
@media (max-width: 1199px) {
    .sonata-ba-list .table th.sonata-ba-list-field-actions,
    .sonata-ba-list .table td.sonata-ba-list-field-actions,
    .sonata-ba-list .table thead th:last-child,
    .sonata-ba-list .table tbody td:last-child {
        width: auto;
        white-space: normal;
    }
    .sonata-ba-list .table td.sonata-ba-list-field-email,
    .sonata-ba-list .table td.sonata-ba-list-field-text {
        max-width: 220px;
    }
}

/* ==============================================
   SONATA LIST CONTEXT – COMPACT BUTTONS
   Avoid oversized buttons breaking column layout
   ============================================== */
.sonata-ba-list .btn {
    padding: 0.35rem 0.6rem;
    font-size: 0.8125rem; /* ~13px */
    line-height: 1.2;
    box-shadow: var(--shadow-sm);
    transform: none; /* prevent row height shift */
}

.sonata-ba-list .btn:hover,
.sonata-ba-list .btn:active {
    transform: none; /* keep table stable */
}

/* Remove ripple inside tight table cells */
.sonata-ba-list .btn::before { display: none; }

/* Normalize large buttons used by custom templates */
.sonata-ba-list .btn-lg {
    padding: 0.45rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.2;
}

.sonata-ba-list .btn-sm {
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
}

.sonata-ba-list .btn i { margin-right: 0.25rem; }

.sonata-ba-list .btn-group .btn { margin: 2px 3px; }

.dashboard-card-footer {
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid #f1f5f9;
    margin-top: 10px;
}

/* Modern scrollable containers */
.scroll-container {
    overflow-y: auto;
    max-height: 630px;
    overflow-x: hidden;
    border-radius: var(--border-radius);
    border: 1px solid var(--card-border-color);
}

.scroll-container::-webkit-scrollbar {
    width: 8px;
}

.scroll-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.scroll-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
    transition: background var(--transition-fast);
}

.scroll-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.table-scroll {
    /* Default: no horizontal scrolling needed on wide screens */
    overflow-y: auto;
    overflow-x: visible;
    max-height: 400px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-radius: var(--border-radius);
    border: 1px solid var(--card-border-color);
}

/* Tables take full width by default */
.table-scroll > table { width: 100%; min-width: 0; }

/* When the viewport narrows and columns risk clustering, enable horizontal scroll
   by giving the table a minimum width larger than the viewport. */
@media (max-width: 1200px) {
    .table-scroll { overflow-x: auto; }
    .table-scroll > table { width: max-content; min-width: 1000px; }
}
@media (max-width: 1100px) {
    .table-scroll > table { min-width: 720px; }
}

/* Keep Sonata result-list overflow local to the table at every viewport width.
   The available content width can be narrower than the viewport when the admin
   sidebar is expanded, including iPadOS Safari in desktop-class mode. */
.sonata-bc .box-body.table-responsive {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

/* Ensure Sonata Admin list tables retain useful column widths on small screens */
@media (max-width: 1200px) {
    .sonata-ba-list .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .sonata-ba-list .table { width: max-content; min-width: 1000px; }
}
@media (max-width: 1100px) {
    .sonata-ba-list .table { min-width: 720px; }
}

/* Robust mobile scrolling: target Sonata list content even when .table-responsive wrapper isn't present */
@media (max-width: 1200px) {
    .sonata-ba-list .box-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .sonata-ba-list .box-body > .table,
    .sonata-ba-list .box-body .table { width: max-content; min-width: 1000px; display: table; }
}
@media (max-width: 1100px) {
    .sonata-ba-list .box-body > .table,
    .sonata-ba-list .box-body .table { min-width: 720px; }
}

/* Force horizontal scroll for legacy AdminLTE .box tables on mobile/tablet,
   overriding app.css with higher specificity and !important where needed. */
@media (max-width: 1200px) {
    .sonata-bc .content-wrapper .content .box .box-body,
    .content .box .box-body,
    .box .box-body { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

    .sonata-bc .content-wrapper .content .box .box-body > .table,
    .sonata-bc .content-wrapper .content .box .box-body .table,
    .sonata-bc .content-wrapper .content .box .box-body .table-responsive > table,
    .content .box .box-body > .table,
    .content .box .box-body .table,
    .content .box .box-body .table-responsive > table,
    .box .box-body > .table,
    .box .box-body .table,
    .box .box-body .table-responsive > table { width: max-content; min-width: 1000px; }
}
@media (max-width: 1100px) {
    .sonata-bc .content-wrapper .content .box .box-body > .table,
    .sonata-bc .content-wrapper .content .box .box-body .table,
    .sonata-bc .content-wrapper .content .box .box-body .table-responsive > table,
    .content .box .box-body > .table,
    .content .box .box-body .table,
    .content .box .box-body .table-responsive > table,
    .box .box-body > .table,
    .box .box-body .table,
    .box .box-body .table-responsive > table { min-width: 720px; }
}

.table-scroll::-webkit-scrollbar {
    width: 6px;
}

.table-scroll::-webkit-scrollbar-track {
    background: #f8fafc;
}

.table-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

/* Specific sizing for the orders table on the dashboard */
.dashboard-orders-table th:nth-child(1),
.dashboard-orders-table td:nth-child(1) {
    width: 5%;
}
.dashboard-orders-table th:nth-child(2),
.dashboard-orders-table td:nth-child(2) {
    width: 15%;
}
.dashboard-orders-table th:nth-child(3),
.dashboard-orders-table td:nth-child(3) {
    width: 20%;
}
.dashboard-orders-table th:nth-child(4),
.dashboard-orders-table td:nth-child(4) {
    width: 15%;
}
.dashboard-orders-table th:nth-child(5),
.dashboard-orders-table td:nth-child(5) {
    width: 30%;
}
.dashboard-orders-table th:nth-child(6),
.dashboard-orders-table td:nth-child(6) {
    width: 15%;
}

/* Modern responsive grid system */
.dashboard-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

@media (min-width: 1101px) {
    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    }
}

@media (min-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Loading states */
.loading {
    position: relative;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border: 2px solid #f3f3f3;
    border-radius: 50%;
    border-top: 2px solid var(--action-color);
    animation: spin 1s linear infinite;
}

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

/* Modern status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.status-badge.pending {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.completed {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.cancelled {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.in-progress {
    background: #dbeafe;
    color: #1e40af;
}

/* Multiple Collection Addresses Styling */
.address-list {
    max-width: 100%;
}

.address-list .address-item {
    margin-bottom: 0.25rem;
}





.address-list .address-details {
    color: var(--primary-text);
    font-size: 0.9rem;
    line-height: 1.4;
    margin-top: 0.125rem;
}

.address-list .address-details strong {
    color: var(--primary-text);
    font-weight: 600;
    font-size: 0.95rem;
}

.address-list .parcel-count {
    display: inline-block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: var(--muted-text);
    background: rgba(0, 0, 0, 0.05);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

.more-addresses-wrapper {
    margin-top: 0.5rem;
}

.show-more-addresses {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--action-color);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: all var(--transition-fast);
    background: rgba(0, 74, 153, 0.05);
}

.show-more-addresses:hover {
    background: rgba(0, 74, 153, 0.1);
    color: var(--action-color-hover);
    text-decoration: none;
}

.show-more-addresses i {
    font-size: 0.7rem;
    transition: transform var(--transition-fast);
}

.show-more-addresses[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.address-list .collapse {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 0.5rem;
    margin-top: 0.5rem;
}

/* Responsive adjustments for table cells */
.dashboard-table td {
    vertical-align: top;
    padding: 0.75rem var(--space-4);
}

/* Ensure address columns have enough space */
.dashboard-table th:nth-child(6),
.dashboard-table td:nth-child(6),
.dashboard-table th:nth-child(7),
.dashboard-table td:nth-child(7) {
    min-width: 200px;
    max-width: 300px;
}

/* Collection address column */
.dashboard-table th:nth-child(6),
.dashboard-table td:nth-child(6) {
    min-width: 180px;
    max-width: 250px;
}


body.dark-mode .address-list .address-details {
    color: var(--dark-primary-text);
}

body.dark-mode .address-list .address-details strong {
    color: var(--dark-primary-text);
}

body.dark-mode .address-list .parcel-count {
    background: rgba(255, 255, 255, 0.1);
    color: var(--dark-muted-text);
}

body.dark-mode .show-more-addresses {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .show-more-addresses:hover {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .address-list .collapse {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Delivery addresses specific styling */
.delivery-addresses {
    max-width: 100%;
    font-size: 0.875rem;
    line-height: 1.4;
}

.delivery-addresses .address-item {
    margin-bottom: 0.25rem;
    padding: 0.25rem 0;
}

.delivery-addresses .address-item:last-child {
    margin-bottom: 0;
}

.delivery-addresses .parcel-count {
    display: inline-block;
    margin-left: 0.375rem;
    font-size: 0.75rem;
    color: var(--secondary-text);
    background: rgba(0, 0, 0, 0.05);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

.delivery-addresses .more-addresses {
    margin-top: 0.25rem;
}

.delivery-addresses .show-more-addresses {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--action-color);
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    transition: all var(--transition-fast);
    background: rgba(0, 74, 153, 0.05);
    border: 1px solid rgba(0, 74, 153, 0.1);
}

.delivery-addresses .show-more-addresses:hover {
    background: rgba(0, 74, 153, 0.1);
    color: var(--action-color);
    text-decoration: none;
    border-color: rgba(0, 74, 153, 0.2);
}

/* Dark mode for delivery addresses */
body.dark-mode .delivery-addresses .parcel-count {
    background: rgba(255, 255, 255, 0.1);
    color: var(--dark-secondary-text);
}

body.dark-mode .delivery-addresses .show-more-addresses {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--dark-action-color);
}

body.dark-mode .delivery-addresses .show-more-addresses:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Admin list delivery addresses styling */
.delivery-address-single {
    font-size: 0.875rem;
    line-height: 1.4;
}

.delivery-addresses-multiple .address-item {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.3;
}

.delivery-addresses-multiple .address-item:last-child {
    margin-bottom: 0;
}

.delivery-addresses-multiple .parcel-count {
    font-size: 0.7rem;
    margin-left: 0.25rem;
}

.delivery-addresses-many .address-item {
    font-size: 0.875rem;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.delivery-addresses-many .more-addresses {
    margin-top: 0.25rem;
}

.delivery-addresses-many .show-more-addresses {
    color: var(--action-color);
    text-decoration: none;
    font-size: 0.75rem;
}

.delivery-addresses-many .show-more-addresses:hover {
    text-decoration: underline;
}

/* Ensure proper spacing in Sonata admin tables */
.sonata-ba-list .delivery-addresses-multiple,
.sonata-ba-list .delivery-addresses-many {
    max-width: 250px;
}

.sonata-ba-list .address-item {
    word-wrap: break-word;
}


/* Override admin dashboard layout for paid on account report page with higher specificity */
body.paid-on-account-report-page .sonata-bc.fixed .content-wrapper,
body.paid-on-account-report-page .sonata-bc.fixed .main-content,
.paid-on-account-report-page .sonata-bc.fixed .content-wrapper,
.paid-on-account-report-page .sonata-bc.fixed .main-content,
.paid-on-account-report-page .content-wrapper,
.paid-on-account-report-page .main-content {
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Additional overrides for different screen sizes */
@media (min-width: 1025px) {
    body.paid-on-account-report-page .sonata-bc.fixed .content-wrapper,
    body.paid-on-account-report-page .sonata-bc.fixed .main-content,
    .paid-on-account-report-page .sonata-bc.fixed .content-wrapper,
    .paid-on-account-report-page .sonata-bc.fixed .main-content,
    .paid-on-account-report-page .content-wrapper,
    .paid-on-account-report-page .main-content {
        margin-left: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}


.paid-on-account-report-page {
    background: #f8fafc;
    min-height: 100vh;
    padding: 20px;
}

.paid-on-account-report-page .content-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;
}

/* Force override any existing admin styles */
.paid-on-account-report-page .sonata-bc .content-wrapper,
.paid-on-account-report-page .sonata-bc .main-content {
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Override any Bootstrap or AdminLTE styles */
.paid-on-account-report-page .content-wrapper,
.paid-on-account-report-page .main-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

/* Ultimate override for all possible admin layout scenarios */
body.paid-on-account-report-page .content-wrapper,
body.paid-on-account-report-page .main-content,
body.paid-on-account-report-page .sonata-bc .content-wrapper,
body.paid-on-account-report-page .sonata-bc .main-content,
body.paid-on-account-report-page .sonata-bc.fixed .content-wrapper,
body.paid-on-account-report-page .sonata-bc.fixed .main-content {
    margin: 0 !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    position: relative !important;
}


.paid-on-account-report-page .report-layout {
    display: flex;
    gap: 20px;
    height: calc(100vh - 40px);
    max-width: 100%;
    overflow: visible;
}

.paid-on-account-report-page .main-content {
    flex: 1;
    background: white;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.paid-on-account-report-page .content-title {
    font-size: 28px;
    font-weight: bold;
    margin: 15px 15px 15px 15px;
    color: #333;
    flex-shrink: 0;
}

.paid-on-account-report-page .content-description {
    color: #6c757d;
    margin-bottom: 30px;
    font-size: 14px;
    flex-shrink: 0;
}

.paid-on-account-report-page .no-data-box {
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    margin-top: 20px;
}

.paid-on-account-report-page .no-data-title {
    font-size: 20px;
    font-weight: bold;
    color: #1976d2;
    margin-bottom: 10px;
}

.paid-on-account-report-page .no-data-text {
    color: #1976d2;
    font-size: 16px;
}

.paid-on-account-report-page .right-sidebar {
    width: 350px;
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.paid-on-account-report-page .sidebar-section {
    margin-bottom: 30px;
}

.paid-on-account-report-page .section-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 10px;
}

.paid-on-account-report-page .form-group {
    margin-bottom: 20px;
    position: relative;
}

.paid-on-account-report-page .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #333;
}

.paid-on-account-report-page .form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
}

.paid-on-account-report-page .form-control:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

.paid-on-account-report-page .btn-success {
    background: #28a745;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    color: white;
    font-weight: 500;
    width: 100%;
}

.paid-on-account-report-page .btn-primary {
    background: #007bff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    color: white;
    font-weight: 500;
}

.paid-on-account-report-page .btn-secondary {
    background: #6c757d;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    color: white;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    margin-right: 10px;
}

.paid-on-account-report-page .required::after {
    content: "*";
    color: #dc3545;
    margin-left: 4px;
}

.paid-on-account-report-page .table-container {
    margin-top: 20px;
    flex: 1;
    overflow: auto;
}

.paid-on-account-report-page .table {
    width: 100%;
    border-collapse: collapse;
}

.paid-on-account-report-page .table th {
    background: #f8f9fa;
    padding: 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 10;
}

.paid-on-account-report-page .table td {
    padding: 12px;
    border-bottom: 1px solid #dee2e6;
}

.paid-on-account-report-page .table tbody tr:hover {
    background: #f8f9fa;
}

.paid-on-account-report-page .suggestions-dropdown {
    position: absolute;
    background: #ffffff;
    border: 1px solid #ced4da;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    width: 100%;
    top: 100%;
    left: 0;
    margin-top: -1px;
}

.paid-on-account-report-page .suggestion-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f8f9fa;
    transition: background-color 0.15s ease-in-out;
    font-size: 14px;
    line-height: 1.4;
    color: #495057;
}

.paid-on-account-report-page .suggestion-item:last-child {
    border-bottom: none;
}

.paid-on-account-report-page .suggestion-item:hover {
    background: #f8f9fa;
    color: #212529;
}

.paid-on-account-report-page .suggestion-item.selected {
    background: #007bff;
    color: white;
}

.paid-on-account-report-page .suggestion-item.selected:hover {
    background: #0056b3;
    color: white;
}

.paid-on-account-report-page .suggestions-dropdown::-webkit-scrollbar {
    width: 6px;
}

.paid-on-account-report-page .suggestions-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.paid-on-account-report-page .suggestions-dropdown::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.paid-on-account-report-page .suggestions-dropdown::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.paid-on-account-report-page .filter-section {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 4px;
}

.paid-on-account-report-page .filter-section h6 {
    margin-bottom: 15px;
    color: #333;
    font-weight: 600;
}

.paid-on-account-report-page .filter-inputs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.paid-on-account-report-page .filter-inputs input,
.paid-on-account-report-page .filter-inputs select {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
}

.paid-on-account-report-page .filter-buttons {
    display: flex;
    gap: 10px;
}

.paid-on-account-report-page .btn-filter {
    background: #007bff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    color: white;
    font-weight: 500;
    font-size: 14px;
}

.paid-on-account-report-page .btn-reset {
    background: #6c757d;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    color: white;
    font-weight: 500;
    font-size: 14px;
}

.paid-on-account-report-page .combobox-container {
    position: relative;
}

.paid-on-account-report-page .combobox-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-left: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

.paid-on-account-report-page .combobox-toggle i {
    color: #495057;
}

/* Hide payment save button */
.paid-on-account-report-page #payment_save {
    display: none;
}

/* Responsive Design for Paid on Account Report */
@media (max-width: 1024px) {
    .paid-on-account-report-page .report-layout {
        flex-direction: column;
        height: auto;
        gap: 15px;
    }
    
    .paid-on-account-report-page .right-sidebar {
        width: 100%;
        order: -1;
    }
    
    .paid-on-account-report-page .main-content {
        padding: 20px;
    }
    
    .paid-on-account-report-page .content-title {
        font-size: 24px;
    }
}

@media (max-width: 1100px) {
    .paid-on-account-report-page {
        padding: 10px;
    }
    
    .paid-on-account-report-page .main-content {
        padding: 15px;
    }
    
    .paid-on-account-report-page .right-sidebar {
        padding: 15px;
    }
    
    .paid-on-account-report-page .content-title {
        font-size: 20px;
    }
    
    .paid-on-account-report-page .table th,
    .paid-on-account-report-page .table td {
        padding: 8px;
        font-size: 12px;
    }
    
    .paid-on-account-report-page .filter-inputs {
        flex-direction: column;
    }
    
    .paid-on-account-report-page .btn-secondary {
        margin-bottom: 10px;
        margin-right: 0;
    }
}

/* Print styles for PDF export */
@media print {
    .paid-on-account-report-page {
        background: white;
        padding: 0;
    }
    
    .paid-on-account-report-page .right-sidebar {
        display: none;
    }
    
    .paid-on-account-report-page .main-content {
        box-shadow: none;
        padding: 0;
    }
    
    .paid-on-account-report-page .table th {
        background: #f8f9fa !important;
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
}

/* css used for showing grid layout of proof of delivery PHOTOS */
 .pod-photo-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
     gap: 15px;
 }

.pod-photo-item {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pod-photo-item:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.pod-photo-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}