/* The application is designed light. Said so, browsers draw their own parts -
   a select's drop-down list, date pickers, scrollbars - light as well: with a
   dark browser theme, Firefox drew a select's list in light text on the page's
   white background (the Add Request window's request types looked empty). */
:root {
    color-scheme: light;
}

:root {
    --font-primary: var(--primary-font, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
    --font-secondary: var(--secondary-font, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
    --font-arabic: var(--secondary-font, 'Tahoma', 'Arial Unicode MS', sans-serif);
    --font-size-base: var(--branding-font-size-base, 16px);
    --heading-font-size: var(--branding-heading-font-size, 2rem);
    --font-size-h1: var(--heading-font-size);
    --font-size-h2: calc(var(--heading-font-size) * 0.85);
    --font-size-h3: calc(var(--heading-font-size) * 0.72);
    --font-size-h4: calc(var(--heading-font-size) * 0.60);
    --font-size-h5: calc(var(--heading-font-size) * 0.52);
    --font-size-h6: calc(var(--heading-font-size) * 0.46);
    --line-height-base: var(--branding-line-height-base, 1.6);
    /* Channel triples, for the rgba() shadows and tints that cannot use a
       whole colour. Same indirection as the colours below, and for the same
       reason: this file is linked after the branding block. */
    --primary-rgb: var(--branding-primary-rgb, 47, 130, 106);
    --secondary-rgb: var(--branding-secondary-rgb, 32, 61, 96);
    --tertiary-rgb: var(--branding-tertiary-rgb, 79, 181, 160);
    --success-rgb: var(--branding-success-rgb, 40, 167, 69);
    --danger-rgb: var(--branding-danger-rgb, 220, 53, 69);
    --warning-rgb: var(--branding-warning-rgb, 255, 193, 7);
    --info-rgb: var(--branding-info-rgb, 13, 202, 240);
    --border-rgb: var(--branding-border-rgb, 229, 231, 235);
    --primary-color: var(--branding-primary-color, #2F826A);
    --primary-dark: var(--branding-primary-dark, #25685A);
    --primary-darker: var(--branding-primary-darker, #1A4D40);
    --primary-light: var(--branding-primary-light, #4FB5A0);
    --primary-lighter: var(--branding-primary-lighter, #7DCAB9);
    --primary-pale: var(--branding-primary-pale, #EDF7F4);
    --secondary-color: var(--branding-secondary-color, #203D60);
    --secondary-dark: var(--branding-secondary-dark, #1A3351);
    --tertiary-color: var(--branding-tertiary-color, #4FB5A0);
    --text-color: var(--branding-text-color, #111827);
    --text-secondary-color: var(--branding-text-secondary-color, #6B7280);
    --background-color: var(--branding-background-color, #F8FAFB);
    --card-bg-color: var(--branding-card-bg-color, #FFFFFF);
    --border-color: var(--branding-border-color, #E5E7EB);
    --success-color: var(--branding-success-color, #28A745);
    --danger-color: var(--branding-danger-color, #DC3545);
    --warning-color: var(--branding-warning-color, #FFC107);
    --info-color: var(--branding-info-color, #0DCAF0);
    /* Derived tint backgrounds for the 4 semantic colors, computed from the
       branding-linked base color so they move automatically when an admin
       changes a color in admin_settings_branding.php - mirrors how
       --primary-pale/--primary-light are already derived from --primary-color. */
    --success-bg: color-mix(in srgb, var(--success-color) 15%, white);
    --danger-bg: color-mix(in srgb, var(--danger-color) 15%, white);
    --warning-bg: color-mix(in srgb, var(--warning-color) 18%, white);
    --info-bg: color-mix(in srgb, var(--info-color) 15%, white);
    --white: #FFFFFF;
    --gray-50: #F9FAFB;
    --gray-100: #F1F5F9;
    --gray-200: var(--border-color, #E5E7EB);
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    --page-bg: var(--background-color);
    --section-bg: var(--gray-50);
    --card-bg: var(--card-bg-color);
    --card-border: var(--border-color);
    --card-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    --modal-header-bg: var(--primary-color);
    --modal-header-text: var(--white);
    --navbar-bg: var(--white);
    --navbar-text: var(--gray-700);
    --navbar-border: var(--gray-200);
    --sidebar-bg: var(--white);
    --sidebar-text: var(--gray-700);
    --sidebar-active-bg: var(--primary-color);
    --sidebar-active-text: var(--white);
    --footer-bg: var(--secondary-color);
    --footer-text: var(--white);
    /* Derived from the palette: this gradient is the banner across the top of
       every admin page, so a configured primary colour has to reach it. The
       stops are the light, base and darker shades the branding emitter already
       provides - the middle and end reproduce the previous values exactly. */
    --hero-bg: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 50%, var(--primary-darker) 100%);
    --hero-text: var(--white);
    --hero-overlay: rgba(255, 255, 255, 0.15);
    --hero-icon-bg: rgba(255, 255, 255, 0.2);
    --hero-icon-border: rgba(255, 255, 255, 0.3);
    --btn-primary-bg: var(--primary-color);
    --btn-primary-text: var(--white);
    --btn-primary-hover: var(--primary-dark);
    --btn-secondary-bg: var(--secondary-color);
    --btn-secondary-text: var(--white);
    --btn-secondary-hover: var(--secondary-dark);
    --btn-success-bg: var(--success-color);
    --btn-success-text: var(--white);
    --btn-danger-bg: var(--danger-color);
    --btn-danger-text: var(--white);
    --btn-warning-bg: var(--warning-color);
    --btn-warning-text: #664D03;
    --btn-info-bg: var(--info-color);
    --btn-info-text: #052C65;
    --action-view-bg: #E0E7FF;
    --action-view-border: #6366F1;
    --action-view-text: #3730A3;
    --action-view-hover-bg: #6366F1;
    --action-view-hover-border: #4F46E5;
    --action-edit-bg: #FEF3C7;
    --action-edit-border: #F59E0B;
    --action-edit-text: #92400E;
    --action-edit-hover-bg: #F59E0B;
    --action-edit-hover-border: #D97706;
    --action-reject-bg: #FEE2E2;
    --action-reject-border: #EF4444;
    --action-reject-text: #991B1B;
    --action-reject-hover-bg: #EF4444;
    --action-reject-hover-border: #DC2626;
    --action-approve-bg: #D1FAE5;
    --action-approve-border: #10B981;
    --action-approve-text: #065F46;
    --action-approve-hover-bg: #10B981;
    --action-approve-hover-border: #059669;
    --action-download-bg: #E0F2FE;
    --action-download-border: #0EA5E9;
    --action-download-text: #0C4A6E;
    --action-download-hover-bg: #0EA5E9;
    --action-download-hover-border: #0284C7;
    --action-history-bg: #CCFBF1;
    --action-history-border: #14B8A6;
    --action-history-text: #115E59;
    --action-history-hover-bg: #14B8A6;
    --action-history-hover-border: #0D9488;
    --action-print-bg: #F3F4F6;
    --action-print-border: #6B7280;
    --action-print-text: #374151;
    --action-print-hover-bg: #6B7280;
    --action-print-hover-border: #4B5563;
    --action-toggle-bg: #F3F4F6;
    --action-toggle-border: #9CA3AF;
    --action-toggle-text: #4B5563;
    --action-toggle-hover-bg: var(--border-color, #E5E7EB);
    --action-toggle-hover-border: #6B7280;
    --status-success-text: #155724;
    --status-success-bg: #C8E6C9;
    --status-expired-text: #212529;
    --status-expired-bg: #BFC0C0;
    --status-rejected-text: #842029;
    --status-rejected-bg: #F8D7DA;
    --status-pending-text: #084298;
    --status-pending-bg: #CFE2FF;
    --status-review-text: #055160;
    --status-review-bg: #CFF4FC;
    --status-locked-text: #664D03;
    --status-locked-bg: #FFF3CD;
    --text-primary: var(--text-color);
    --text-secondary: var(--gray-700);
    --text-muted: var(--text-secondary-color);
    --heading-color: var(--gray-900);
    --link-color: var(--primary-color);
    --link-hover: var(--primary-dark);
    --table-header-bg: var(--gray-100);
    --table-header-text: var(--gray-800);
    --table-border: var(--gray-200);
    --badge-bg: var(--primary-pale);
    --badge-text: var(--primary-darker);
    --alert-success-bg: #D1E7DD;
    --alert-success-text: #0A3622;
    --alert-danger-bg: #F8D7DA;
    --alert-danger-text: #58151C;
    --alert-warning-bg: #FFF3CD;
    --alert-warning-text: #664D03;
    --alert-info-bg: #CFF4FC;
    --alert-info-text: #055160;
    --input-bg: var(--white);
    --input-text: var(--gray-800);
    --input-border: var(--gray-300);
    --input-focus-border: var(--primary-light);
    --input-focus-shadow: rgba(var(--primary-rgb, 47, 130, 106), 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
    --e-global-color-primary: var(--primary-color);
    --e-global-color-secondary: var(--secondary-color);
    --e-global-color-text: #297059;
    --e-global-color-accent: #F0F9F7;
    --e-global-color-91b1d6a: var(--gray-50);
    --e-global-color-617de0a: var(--gray-100);
    --e-global-color-413d0ff: var(--white);
    --e-global-color-eca7023: var(--secondary-dark);
    --e-global-color-002e096: var(--primary-darker);
    --e-global-color-80964e9: var(--primary-dark);
    --e-global-color-c1fe970: var(--warning-color);
    --e-global-color-b97049e: var(--success-color);
    --e-global-color-f5605d3: var(--danger-color);
    --e-global-color-869b8d4: #2D3748;
    --e-global-color-747f9d1: #CFF4FC;
    --e-global-color-c554cd5: #9EEAF9;
    --e-global-color-82c62fc: #FFE69C;
    --e-global-color-02da22c: #DEE2E6;
}

.theme-text-primary { color: var(--text-primary); }
.theme-text-secondary { color: var(--text-secondary); }
.theme-bg-primary { background-color: var(--primary-color); }
.theme-bg-secondary { background-color: var(--secondary-color); }
.theme-border { border-color: var(--border-color); }

html {
    font-size: var(--font-size-base) !important;
}

body {
    font-family: var(--font-primary) !important;
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-base) !important;
}

[dir="rtl"] body {
    font-family: var(--font-secondary) !important;
}

h1 { font-size: var(--font-size-h1) !important; }
h2 { font-size: var(--font-size-h2) !important; }
h3 { font-size: var(--font-size-h3) !important; }
h4 { font-size: var(--font-size-h4) !important; }
h5 { font-size: var(--font-size-h5) !important; }
h6 { font-size: var(--font-size-h6) !important; }

body,
button,
input,
select,
textarea {
    font-family: var(--font-primary) !important;
}

[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
    font-family: var(--font-secondary) !important;
}

.btn-primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--btn-primary-hover);
    border-color: var(--btn-primary-hover);
    color: var(--btn-primary-text);
}

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--btn-secondary-hover);
    border-color: var(--btn-secondary-hover);
    color: var(--btn-secondary-text);
}

.btn-success { background-color: var(--btn-success-bg); border-color: var(--btn-success-bg); color: var(--btn-success-text); }
.btn-danger { background-color: var(--btn-danger-bg); border-color: var(--btn-danger-bg); color: var(--btn-danger-text); }
.btn-warning { background-color: var(--btn-warning-bg); border-color: var(--btn-warning-bg); color: var(--btn-warning-text); }
.btn-info { background-color: var(--btn-info-bg); border-color: var(--btn-info-bg); color: var(--btn-info-text); }

.hero-header {
    background: var(--hero-bg);
    color: var(--hero-text);
}

.hero-header::before {
    background: radial-gradient(circle, var(--hero-overlay) 0%, transparent 70%);
}

.hero-icon {
    background: var(--hero-icon-bg);
    border-color: var(--hero-icon-border);
}

.card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    box-shadow: var(--card-shadow);
}

.modal-header {
    background: var(--modal-header-bg);
    color: var(--modal-header-text);
}

.table thead th {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
}

.table,
.table td,
.table th {
    border-color: var(--table-border);
}

.form-control,
.form-select {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-border);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 0.25rem var(--input-focus-shadow);
}

html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}


.table-responsive,
.dataTables_wrapper,
.dataTables_scroll,
.dataTables_scrollBody,
.table-container,
.table-card-body {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table,
.table-custom,
.dashboard-table {
    width: 100%;
}

.btn,
button,
.btn-action,
.btn-sm,
.btn-lg,
.form-control,
.form-select {
    min-height: 44px;
}

.btn-group,
.btn-toolbar,
.action-buttons,
.action-buttons-wrapper,
.table-controls,
.table-controls-left,
.table-controls-right,
.hero-stats,
.filter-actions {
    flex-wrap: wrap;
}

.accordion,
.accordion-item,
.accordion-body,
.accordion-button {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.modal .modal-dialog {
    max-width: 800px;
    width: 100%;
    margin: 30px auto;
}

.modal .modal-content {
    max-height: calc(100vh - 60px);
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal .modal-header,
.modal .modal-footer {
    flex-shrink: 0;
}

.modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

@media (max-width: 1199px) {
    .modal .modal-dialog {
        max-width: 700px;
        margin: 20px auto;
    }
    .modal .modal-content {
        max-height: calc(100vh - 40px);
    }
}

@media (max-width: 991px) {
    .modal .modal-dialog {
        max-width: 90%;
        margin: 15px auto;
    }
    .modal .modal-content {
        max-height: calc(100vh - 30px);
    }
}

@media (max-width: 767px) {
    .modal .modal-dialog {
        max-width: 95%;
        width: 95%;
        margin: 10px auto;
    }
    .modal .modal-content {
        max-height: calc(100vh - 20px);
    }
}

@media (max-width: 480px) {
    .modal .modal-dialog {
        max-width: 100%;
        width: 100%;
        margin: 0;
        min-height: 100vh;
    }
    .modal .modal-content {
        border-radius: 0;
        min-height: 100vh;
        max-height: 100vh;
    }
}

.toast-container {
    z-index: 9999;
}

.sidebar-notifications,
.notification-sidebar,
.notification-panel {
    max-width: 100vw;
    max-height: 100dvh;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.sidebar-notifications.active,
.notification-sidebar.show,
.notification-panel.show,
.notification-panel.active,
.notification-panel.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.hero-title {
    font-size: clamp(1.25rem, 2.5vw, 2rem) !important;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: clamp(0.9rem, 1.8vw, 1.05rem) !important;
}

@media (max-width: 1279px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .charts-grid,
    .tables-grid {
        grid-template-columns: 1fr !important;
    }
}

.table-view,
.grid-view {
    display: none;
}

.table-view.active,
.grid-view.active {
    display: block;
}

.view-switcher {
    display: flex;
    background: var(--white);
    border-radius: 8px;
    padding: 0.25rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.table-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

.table-controls-left,
.table-controls-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.view-mode-btn {
    background: transparent;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-family: 'arbfonts-4_f5', sans-serif;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--gray-600);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.3s ease;
}

.view-mode-btn:hover {
    color: var(--primary-color);
    background: var(--primary-pale);
}

.view-mode-btn.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 47, 130, 106), 0.3);
}

.responsive-cards-view {
    display: none;
}

.grid-view.active .responsive-cards-view {
    display: grid;
}

.permits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1.25rem;
    padding: 1.5rem;
}

.permit-card {
    background: var(--white);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 2px solid var(--gray-200);
    margin-bottom: 1rem;
    position: relative;
}

.permit-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 0.125rem solid var(--gray-100);
}

.permit-card-type {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.permit-type-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--primary-color);
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.125rem;
}

.permit-type-text {
    font-family: 'arbfonts-4_f5', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.03125rem;
}

.permit-card-id {
    font-family: 'arbfonts-4_f5', sans-serif;
    font-size: 0.75rem;
    color: var(--gray-500);
    font-weight: 600;
}

.permit-card-body {
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
}

.permit-info-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.5rem 0;
    border-bottom: 0.0625rem solid var(--gray-100);
    min-width: 0;
}

.permit-info-row:last-child {
    border-bottom: none;
}

.permit-info-label {
    font-family: 'arbfonts-4_f5', sans-serif;
    font-size: 0.8125rem;
    color: var(--gray-600);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.permit-info-value {
    font-family: 'arbfonts-4_f4', sans-serif;
    font-size: 0.875rem;
    color: var(--gray-800);
    font-weight: 400;
    text-align: left;
    width: 100%;
    overflow-wrap: anywhere;
}

.permit-card-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.permit-card-statuses {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    flex-wrap: wrap;
    width: 100%;
}

.permit-card.status-approved {
    --card-accent: #10B981;
}

.permit-card.status-rejected {
    --card-accent: #EF4444;
}

.permit-card.status-pending {
    --card-accent: #F59E0B;
}

.permit-card.status-under-review,
.permit-card.status-under_review {
    --card-accent: #3B82F6;
}

.permit-card-footer {
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 0.125rem solid var(--gray-100);
    display: flex;
    flex-wrap: wrap;
}

.permit-card-footer:empty {
    display: none;
}

.permit-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem;
    border-top: 1px solid var(--gray-100);
}

.permit-card-actions .btn {
    flex: 1 1 auto;
    min-width: 60px;
    max-width: 120px;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

@media (max-width: 1023px) {
    .content,
    #content,
    .dashboard-container,
    .permits-dashboard {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .hero-header,
    .hero-content,
    .table-controls,
    .table-controls-left,
    .table-controls-right,
    .filter-header,
    .filter-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }
    .route-item {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
        align-items: start !important;
    }
    .route-item .route-actions,
    .route-item .route-input-wrapper,
    .route-item .preview-url {
        width: 100%;
    }
    .smart-filter-bar .filter-content,
    .data-table-section,
    .permission-matrix,
    .route-section {
        overflow-x: auto;
    }
    .card-grid,
    .filter-grid,
    .permission-grid {
        grid-template-columns: 1fr !important;
    }
    .modal-dialog {
        width: min(100%, calc(100vw - 1rem));
        margin: 0.5rem auto;
    }
    .sidebar-notifications,
    .notification-sidebar {
        width: min(100vw, 420px) !important;
    }
}

@media (max-width: 767px) {
    .view-switcher {
        display: none !important;
    }
    .use-permit-card-mobile .table-wrapper,
    .use-permit-card-mobile .modern-table-wrapper {
        display: none !important;
    }
    .use-permit-card-mobile .responsive-cards-view {
        display: grid !important;
    }
    .permits-grid {
        grid-template-columns: 1fr;
        padding: 0.625rem;
        gap: 0.75rem;
    }
    .permit-card {
        padding: 0.75rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        border: 1px solid var(--gray-200);
        border-radius: 8px;
    }
    .permit-card-header {
        margin-bottom: 0.625rem;
        padding-bottom: 0.625rem;
    }
    .permit-type-icon {
        width: 2rem;
        height: 2rem;
        font-size: 0.875rem;
    }
    .permit-type-text {
        font-size: 0.75rem;
    }
    .permit-card-id {
        font-size: 0.6875rem;
    }
    .permit-info-row {
        padding: 0.375rem 0;
    }
    .permit-info-label {
        font-size: 0.6875rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .permit-info-value {
        font-size: 0.8125rem;
        font-weight: 600;
        text-align: left;
        width: 100%;
    }
    .permit-card-footer {
        gap: 0.375rem;
        padding: 0.625rem 0;
        border-top: 1px solid var(--gray-200);
        border-bottom: 1px solid var(--gray-200);
    }
    .permit-card-footer .badge,
    .permit-card-footer > span {
        text-align: center;
        padding: 0.375rem 0.25rem;
        font-size: 0.625rem;
        border-radius: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .permit-card-actions {
        gap: 0.375rem;
        margin-top: 0.625rem;
        padding-top: 0;
    }
    .permit-card-actions .btn {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 0;
        height: 36px;
        font-size: 0.6875rem;
        padding: 0.5rem 0.375rem;
        border-radius: 6px;
        white-space: nowrap;
    }
    .row {
        --bs-gutter-x: 1rem;
    }
    .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    .stats-grid,
    .charts-grid,
    .tables-grid,
    .card-grid,
    .filter-grid,
    .permission-grid {
        grid-template-columns: 1fr !important;
    }
    .stat-card,
    .card,
    .chart-card,
    .table-card {
        border-radius: 12px;
    }
    .table-responsive .table,
    .data-table-section .table,
    .table-card .table {
        min-width: 640px;
    }
    .dashboard-table,
    .table-custom {
        min-width: 640px;
    }
    .table-custom thead th,
    .dashboard-table thead th,
    .table thead th {
        white-space: nowrap;
    }
    .btn,
    .btn-sm,
    .btn-lg {
        width: auto;
        max-width: 100%;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .action-buttons .btn,
    .action-buttons-wrapper .btn,
    .btn-group .btn {
        flex: 1 1 auto;
    }
    .form-row,
    .form-group-row,
    .input-group,
    .filter-grid,
    .filter-content .row {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    .form-row > *,
    .form-group-row > *,
    .input-group > *,
    .filter-grid > * {
        width: 100% !important;
        max-width: 100% !important;
    }
    input[style*="min-width"],
    select[style*="min-width"],
    textarea[style*="min-width"],
    button[style*="min-width"],
    .btn[style*="min-width"] {
        min-width: 0 !important;
        width: 100% !important;
    }
    .toast-container {
        left: 0.5rem !important;
        right: 0.5rem !important;
        top: 70px !important;
    }
    .custom-toast {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .sidebar-notifications,
    .notification-sidebar,
    .user-sidebar {
        width: min(100vw, 360px) !important;
    }
}

@media (max-width: 480px) {
    .permit-card-body {
        grid-template-columns: 1fr;
    }
    body {
        font-size: 0.95rem !important;
    }
    .content,
    #content,
    .dashboard-container,
    .permits-dashboard {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    .hero-header {
        padding: 0.875rem !important;
    }
    .hero-icon {
        width: 44px !important;
        height: 44px !important;
    }
    .modal-dialog {
        margin: 0.35rem auto;
        width: calc(100vw - 0.7rem);
    }
    .modal-content {
        border-radius: 10px;
    }
    .modal-body {
        padding: 0.875rem;
    }
    .sidebar-notifications,
    .notification-sidebar,
    .user-sidebar {
        width: 100vw !important;
        max-width: 100vw !important;
    }
    .notification-item,
    .account-menu-item,
    .lang-menu a {
        padding: 0.75rem !important;
    }
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
    .stat-card-value {
        font-size: 1.75rem !important;
    }
}

@media (max-width: 991px) {
    .navbar .container-fluid {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
        overflow: visible !important;
    }
    .navbar-logo {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: 45vw !important;
    }
    .navbar-logo img {
        height: 34px !important;
        max-height: 34px !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }
    .user-mobile-toggle,
    .sidebar-mobile-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
        padding: 0 !important;
    }
    #navbarNav.navbar-collapse {
        display: none !important;
    }
    .user-controls,
    .navbar-nav.ms-auto {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.35rem !important;
        margin-left: auto !important;
        position: static !important;
        flex-wrap: nowrap !important;
    }
    [dir="rtl"] .user-controls,
    [dir="rtl"] .navbar-nav.ms-auto {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    .user-controls .nav-item,
    .navbar-nav.ms-auto .nav-item {
        margin: 0 !important;
        flex: 0 0 auto !important;
    }
    .account-btn .account-info {
        display: none !important;
    }
    .account-avatar {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.875rem !important;
    }
    .notification-btn,
    .lang-btn,
    .account-btn {
        min-width: 40px !important;
        min-height: 40px !important;
    }
    .account-dropdown-wrapper {
        position: relative !important;
        overflow: visible !important;
    }
    .account-menu,
    .lang-menu {
        right: 0 !important;
        left: auto !important;
        min-width: 200px !important;
        max-width: calc(100vw - 1rem) !important;
        max-height: min(65vh, 420px) !important;
        overflow-y: auto !important;
        border: 1px solid var(--gray-200) !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;
        z-index: 1200 !important;
    }
    [dir="rtl"] .account-menu,
    [dir="rtl"] .lang-menu {
        right: auto !important;
        left: 0 !important;
    }
    .account-menu-item,
    .lang-menu a {
        padding: 0.8rem 0.95rem !important;
        font-size: 0.95rem !important;
    }
    .user-sidebar-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 64px !important;
    }
    .user-sidebar-header img {
        height: 36px !important;
        max-height: 36px !important;
        width: auto !important;
        max-width: 160px !important;
        object-fit: contain !important;
        display: block !important;
    }
    .filter-grid,
    .smart-filter-bar .filter-grid,
    .filter-section .filter-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }
    .notification-sidebar,
    .sidebar-notifications,
    .notification-panel {
        width: min(92vw, 420px) !important;
        max-width: 92vw !important;
    }
    .notification-body,
    .sidebar-notifications .sidebar-content {
        max-height: calc(100dvh - 170px) !important;
        overflow-y: auto !important;
    }
    .notification-item .message,
    .notification-item .notification-message {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
    .mark-read-btn,
    .notification-item .mark-read,
    .notification-item .btn {
        min-height: 40px !important;
    }
    .notification-count,
    #notificationCount {
        min-width: 18px !important;
        min-height: 18px !important;
        font-size: 0.65rem !important;
        line-height: 18px !important;
        padding: 0 4px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .filter-grid,
    .smart-filter-bar .filter-grid,
    .filter-section .filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .filter-grid,
    .smart-filter-bar .filter-grid,
    .filter-section .filter-grid,
    .filter-bar {
        grid-template-columns: 1fr !important;
        display: grid !important;
        gap: 0.75rem !important;
    }
    .filter-actions,
    .table-controls-right,
    .smart-filter-bar .filter-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
    }
    .filter-actions .btn,
    .table-controls-right .btn,
    .filter-actions button,
    .filter-actions a {
        width: 100% !important;
    }
    .manage-crew-registrations-page .table-responsive,
    .manage-crew-registrations-page .data-table-section,
    .manage-crew-registrations-page .table-custom,
    .manage-crew-registrations-page .table {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .manage-crew-registrations-page .action-buttons,
    .manage-crew-registrations-page .action-buttons-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }
    .manage-crew-registrations-page .action-buttons .btn,
    .manage-crew-registrations-page .action-buttons-wrapper .btn {
        min-width: 42px !important;
        min-height: 42px !important;
    }
    .manage-crew-registrations-page .status-badge,
    .status-badge {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
    .table-container .data-table {
        min-width: 640px !important;
    }
    #detailsModal .modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}

@media (max-width: 576px) {
    .modal-dialog,
    .modal.fade .modal-dialog,
    .modal.show .modal-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        min-height: 100dvh !important;
        height: 100dvh !important;
    }
    .modal-content {
        border-radius: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }
    .modal-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
    }
    .modal-footer {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    .modal-footer .btn {
        flex: 1 1 48% !important;
        min-width: 120px !important;
    }
    .modal-body {
        overflow-y: auto !important;
        max-height: calc(100dvh - 130px) !important;
    }
    .modal-body .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    .modal-body .app-info-label,
    .modal-body .crew-detail-label,
    .modal-body .detail-label,
    .modal-body [class*="detail-label"] {
        display: block !important;
        width: 100% !important;
        margin-bottom: 0.2rem !important;
    }
    .modal-body .app-info-value,
    .modal-body .crew-detail-value,
    .modal-body .detail-value,
    .modal-body [class*="detail-value"] {
        display: block !important;
        width: 100% !important;
    }
    .modal .accordion,
    .modal .accordion-item,
    .modal .accordion-body,
    .modal .accordion-button {
        max-width: 100% !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
    }
    .modal .accordion-body {
        overflow: auto !important;
    }
    #detailsModal {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }
    #detailsModal .modal-content {
        border-radius: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
    #detailsModal .modal-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
    }
    #detailsModal .modal-body {
        max-height: calc(100dvh - 74px) !important;
        overflow-y: auto !important;
    }
    .member-resubmit-btn,
    .member-resubmitted-tag {
        white-space: normal !important;
    }
    .notification-sidebar,
    .sidebar-notifications,
    .notification-panel {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
    }
}

[dir="rtl"],
[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .content,
[dir="rtl"] #content,
[dir="rtl"] .main-content,
[dir="rtl"] .card,
[dir="rtl"] .modal-content,
[dir="rtl"] .offcanvas,
[dir="rtl"] .dropdown-menu,
[dir="rtl"] .breadcrumb,
[dir="rtl"] .table,
[dir="rtl"] .form-control,
[dir="rtl"] .form-select,
[dir="rtl"] .form-label,
[dir="rtl"] .form-check-label,
[dir="rtl"] .alert,
[dir="rtl"] .toast-body,
[dir="rtl"] .pagination,
[dir="rtl"] .stat-card,
[dir="rtl"] .hero-header,
[dir="rtl"] .smart-filter-bar {
    text-align: right;
}

[dir="rtl"] .sidebar,
[dir="rtl"] .user-sidebar {
    left: auto !important;
    right: 0 !important;
}

[dir="rtl"] .navbar .container-fluid {
    display: flex;
    flex-direction: row;
    direction: rtl;
    align-items: center;
}

[dir="rtl"] .navbar-logo {
    order: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

[dir="rtl"] .navbar-nav-container,
[dir="rtl"] #navbarNav,
[dir="rtl"] .navbar-nav.ms-auto,
[dir="rtl"] .user-controls {
    order: 1;
    margin-right: auto;
    margin-left: 0;
}

[dir="rtl"] .user-controls,
[dir="rtl"] .btn-group,
[dir="rtl"] .action-buttons,
[dir="rtl"] .action-buttons-wrapper,
[dir="rtl"] .table-controls,
[dir="rtl"] .table-controls-left,
[dir="rtl"] .table-controls-right,
[dir="rtl"] .filter-actions,
[dir="rtl"] .input-group,
[dir="rtl"] .breadcrumb {
    flex-direction: row-reverse;
}

[dir="rtl"] #navbarNav .navbar-nav {
    flex-direction: row !important;
    direction: rtl;
}

[dir="rtl"] .permits-grid,
[dir="rtl"] .stats-grid,
[dir="rtl"] .card-grid,
[dir="rtl"] .filter-grid,
[dir="rtl"] .permission-grid {
    direction: rtl;
}

[dir="rtl"] .table,
[dir="rtl"] .table-custom,
[dir="rtl"] .dashboard-table {
    direction: rtl;
}

[dir="rtl"] .table th,
[dir="rtl"] .table td,
[dir="rtl"] .table-custom th,
[dir="rtl"] .table-custom td,
[dir="rtl"] .dashboard-table th,
[dir="rtl"] .dashboard-table td {
    text-align: right !important;
}

[dir="rtl"] .modal-header,
[dir="rtl"] .modal-body,
[dir="rtl"] .modal-footer {
    text-align: right;
}

[dir="rtl"] .modal-header .btn-close,
[dir="rtl"] .modal-header .close {
    margin-left: 0 !important;
    margin-right: auto !important;
}

[dir="rtl"] .dropdown-menu {
    right: 0;
    left: auto;
    text-align: right;
}

[dir="rtl"] .dropdown-menu-end {
    right: auto !important;
    left: 0 !important;
}

[dir="rtl"] .notification-sidebar,
[dir="rtl"] .sidebar-notifications,
[dir="rtl"] .notification-panel {
    right: auto !important;
    left: 0 !important;
}

[dir="rtl"] .breadcrumb .separator {
    transform: scaleX(-1);
}

[dir="rtl"] .breadcrumb-nav {
    direction: rtl;
    flex-direction: row-reverse;
}

[dir="rtl"] i.bi-chevron-left,
[dir="rtl"] i.bi-chevron-right,
[dir="rtl"] i.bi-arrow-left,
[dir="rtl"] i.bi-arrow-right,
[dir="rtl"] i.fa-chevron-left,
[dir="rtl"] i.fa-chevron-right,
[dir="rtl"] i.fa-angle-left,
[dir="rtl"] i.fa-angle-right,
[dir="rtl"] i.fa-arrow-left,
[dir="rtl"] i.fa-arrow-right {
    transform: scaleX(-1);
}

[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] input::placeholder,
[dir="rtl"] textarea::placeholder {
    text-align: right;
}

[dir="rtl"] .invalid-feedback,
[dir="rtl"] .form-text,
[dir="rtl"] .text-muted {
    text-align: right;
}

[dir="rtl"] .me-1,
[dir="rtl"] .me-2,
[dir="rtl"] .me-3 {
    margin-right: 0 !important;
}

[dir="rtl"] .ms-1,
[dir="rtl"] .ms-2,
[dir="rtl"] .ms-3 {
    margin-left: 0 !important;
}

@media (max-width: 991px) {
    [dir="rtl"] .sidebar-mobile-toggle,
    [dir="rtl"] .user-mobile-toggle {
        order: 1;
    }

    [dir="rtl"] .navbar-logo {
        order: 2;
        margin-right: 0 !important;
        margin-left: auto !important;
    }

    [dir="rtl"] .user-controls,
    [dir="rtl"] .navbar-nav-container,
    [dir="rtl"] .navbar-nav.ms-auto {
        order: 1;
    }
}

/* The configured Website Title, beside the logo. Dropped on narrow screens,
   where the logo alone identifies the site and the room is needed for the
   navigation itself. */
.navbar-logo a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

/* Separated from the logo by a hairline rule rather than sitting against it,
   and set in the same restrained treatment as the account block at the other
   end of the bar - so the two ends of the navbar read as one design. */
.navbar-site-name {
    padding-inline-start: 12px;
    border-inline-start: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--text-color);
    white-space: nowrap;
}

@media (max-width: 991px) {
    .navbar-site-name {
        display: none;
    }
}