:root {
    --billing-bg: #f7fafc;
    --billing-surface: #ffffff;
    --billing-surface-soft: #f2f7ff;
    --billing-border: #dbe7f5;
    --billing-text: #172033;
    --billing-muted: #667085;
    --billing-blue: #2563eb;
    --billing-blue-soft: #eaf2ff;
    --billing-green: #0f766e;
    --billing-green-soft: #e6f7f1;
    --billing-amber: #b7791f;
    --billing-amber-soft: #fff6df;
    --billing-red: #c2413d;
    --billing-red-soft: #fff0ef;
    --billing-violet: #7c3aed;
    --billing-violet-soft: #f2edff;
    --billing-cyan: #087ea4;
    --billing-cyan-soft: #e6f7fb;
    --billing-indigo: #3656d4;
    --billing-indigo-soft: #eef2ff;
}

html {
    background: var(--billing-bg);
}

body {
    background:
        linear-gradient(180deg, rgba(234, 242, 255, 0.68) 0, rgba(247, 250, 252, 0) 320px),
        var(--billing-bg) !important;
    color: var(--billing-text) !important;
}

.tenant-sidebar,
.superadmin-sidebar,
.auth-panel {
    background: linear-gradient(180deg, #f5f9ff 0%, #f8fbf7 54%, #fff9ef 100%) !important;
    border-color: var(--billing-border) !important;
}

.tenant-sidebar-logo,
.tenant-avatar,
.superadmin-logo,
.superadmin-avatar,
.auth-dot {
    background: linear-gradient(135deg, var(--billing-blue), var(--billing-green)) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

.tenant-sidebar-title,
.superadmin-brand span,
.auth-panel h1 {
    color: var(--billing-indigo) !important;
}

.tenant-nav-label,
.superadmin-nav-label {
    color: #7b8496 !important;
}

.tenant-nav-link,
.superadmin-nav-link,
.tenant-shortcut,
.tenant-mobile-pill,
.superadmin-mobile-pill {
    color: #475467 !important;
}

.tenant-nav-link:hover,
.superadmin-nav-link:hover,
.tenant-shortcut:hover,
.tenant-mobile-pill:hover,
.superadmin-mobile-pill:hover {
    background: rgba(37, 99, 235, 0.08) !important;
    color: var(--billing-blue) !important;
}

.tenant-nav-link.is-active,
.superadmin-nav-link.is-active,
.tenant-mobile-pill.is-active,
.superadmin-mobile-pill.is-active {
    background: linear-gradient(90deg, var(--billing-blue-soft), rgba(230, 247, 241, 0.86)) !important;
    color: var(--billing-blue) !important;
    box-shadow: inset 3px 0 0 var(--billing-blue) !important;
}

.tenant-nav-link.is-active .material-symbols-outlined,
.superadmin-nav-link.is-active .material-symbols-outlined {
    color: var(--billing-blue) !important;
}

.tenant-mobile-header,
.superadmin-mobile-header {
    background: rgba(247, 250, 252, 0.94) !important;
    border-color: var(--billing-border) !important;
}

.tenant-content header h1,
.tenant-content header h2,
.tenant-content > section > h1,
.tenant-content > main > h1,
.tenant-content > section > div:first-child h1,
.tenant-content > main > div:first-child h1,
.superadmin-content header h1,
.superadmin-content header h2,
.superadmin-content > main > h1,
.superadmin-content > section > h1,
.auth-content h1,
.auth-content h2 {
    color: var(--billing-indigo) !important;
}

.tenant-content header p,
.tenant-content > section > p,
.tenant-content > main > p,
.superadmin-content header p,
.superadmin-content > main > p,
.auth-content p {
    color: var(--billing-muted) !important;
}

.tenant-content .text-primary,
.superadmin-content .text-primary,
.auth-content .text-primary {
    color: var(--billing-blue) !important;
}

.tenant-content .text-secondary,
.superadmin-content .text-secondary,
.auth-content .text-secondary {
    color: var(--billing-violet) !important;
}

.tenant-content .text-tertiary,
.superadmin-content .text-tertiary,
.auth-content .text-tertiary {
    color: var(--billing-green) !important;
}

.tenant-content .text-error,
.tenant-content .text-on-error-container,
.superadmin-content .text-error,
.superadmin-content .text-on-error-container,
.auth-content .text-error,
.auth-content .text-on-error-container {
    color: var(--billing-red) !important;
}

.tenant-content .bg-primary,
.tenant-content .bg-on-surface,
.superadmin-content .bg-primary,
.superadmin-content .bg-on-surface,
.auth-content .bg-primary {
    background: linear-gradient(135deg, var(--billing-blue), var(--billing-indigo)) !important;
    color: #ffffff !important;
}

.tenant-content .bg-secondary,
.superadmin-content .bg-secondary,
.auth-content .bg-secondary {
    background: linear-gradient(135deg, var(--billing-violet), #5b21b6) !important;
    color: #ffffff !important;
}

.tenant-content .bg-tertiary,
.superadmin-content .bg-tertiary,
.auth-content .bg-tertiary {
    background: linear-gradient(135deg, var(--billing-green), #0d9488) !important;
    color: #ffffff !important;
}

.tenant-content .bg-primary-container,
.tenant-content .bg-primary-fixed,
.tenant-content .bg-primary-fixed-dim,
.superadmin-content .bg-primary-container,
.superadmin-content .bg-primary-fixed,
.auth-content .bg-primary-container,
.auth-content .bg-primary-fixed {
    background-color: var(--billing-blue-soft) !important;
    color: #1d4ed8 !important;
}

.tenant-content .bg-secondary-container,
.tenant-content .bg-secondary-fixed,
.tenant-content .bg-secondary-fixed-dim,
.superadmin-content .bg-secondary-container,
.superadmin-content .bg-secondary-fixed,
.auth-content .bg-secondary-container,
.auth-content .bg-secondary-fixed {
    background-color: var(--billing-violet-soft) !important;
    color: #6d28d9 !important;
}

.tenant-content .bg-tertiary-container,
.tenant-content .bg-tertiary-fixed,
.tenant-content .bg-tertiary-fixed-dim,
.superadmin-content .bg-tertiary-fixed,
.auth-content .bg-tertiary-fixed {
    background-color: var(--billing-green-soft) !important;
    color: #0f766e !important;
}

.tenant-content .bg-error-container,
.superadmin-content .bg-error-container,
.auth-content .bg-error-container {
    background-color: var(--billing-red-soft) !important;
    color: var(--billing-red) !important;
}

.tenant-content .bg-surface,
.tenant-content .bg-white,
.tenant-content .bg-surface-container-lowest,
.superadmin-content .bg-surface,
.superadmin-content .bg-white,
.superadmin-content .bg-surface-container-lowest,
.auth-content .bg-surface,
.auth-content .bg-surface-container-lowest {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
    border-color: var(--billing-border) !important;
}

.tenant-content .bg-surface-container,
.tenant-content .bg-surface-container-low,
.superadmin-content .bg-surface-container,
.superadmin-content .bg-surface-container-low,
.auth-content .bg-surface-container {
    background-color: var(--billing-surface-soft) !important;
}

.tenant-content section > div[class*="border"],
.tenant-content main > div[class*="border"],
.tenant-content form[class*="border"],
.superadmin-content section > div[class*="border"],
.superadmin-content main > div[class*="border"],
.superadmin-content form[class*="border"],
.auth-content > div[class*="border"] {
    border-color: var(--billing-border) !important;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.06) !important;
}

.tenant-content section > div[class*="border"]:nth-child(6n+1),
.superadmin-content section > div[class*="border"]:nth-child(6n+1) {
    border-top: 3px solid var(--billing-blue) !important;
}

.tenant-content section > div[class*="border"]:nth-child(6n+2),
.superadmin-content section > div[class*="border"]:nth-child(6n+2) {
    border-top: 3px solid var(--billing-green) !important;
}

.tenant-content section > div[class*="border"]:nth-child(6n+3),
.superadmin-content section > div[class*="border"]:nth-child(6n+3) {
    border-top: 3px solid var(--billing-violet) !important;
}

.tenant-content section > div[class*="border"]:nth-child(6n+4),
.superadmin-content section > div[class*="border"]:nth-child(6n+4) {
    border-top: 3px solid var(--billing-amber) !important;
}

.tenant-content section > div[class*="border"]:nth-child(6n+5),
.superadmin-content section > div[class*="border"]:nth-child(6n+5) {
    border-top: 3px solid var(--billing-cyan) !important;
}

.tenant-content section > div[class*="border"]:nth-child(6n+6),
.superadmin-content section > div[class*="border"]:nth-child(6n+6) {
    border-top: 3px solid var(--billing-red) !important;
}

.tenant-content table thead tr,
.superadmin-content table thead tr {
    background: linear-gradient(90deg, var(--billing-blue-soft), var(--billing-green-soft)) !important;
    color: #1f3b67 !important;
}

.tenant-content table tbody tr:hover,
.superadmin-content table tbody tr:hover {
    background: #f2f7ff !important;
}

.tenant-content input:focus,
.tenant-content select:focus,
.tenant-content textarea:focus,
.superadmin-content input:focus,
.superadmin-content select:focus,
.superadmin-content textarea:focus,
.auth-content input:focus,
.auth-content select:focus,
.auth-content textarea:focus {
    border-color: var(--billing-blue) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14) !important;
}

.tenant-flash.success {
    border-color: #b7e3d5 !important;
    background: var(--billing-green-soft) !important;
    color: #0f5f57 !important;
}

.tenant-flash.error {
    border-color: #f0b4b4 !important;
    background: var(--billing-red-soft) !important;
    color: var(--billing-red) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--billing-blue-soft) !important;
    color: var(--billing-blue) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--billing-green-soft) !important;
    color: var(--billing-green) !important;
}

canvas {
    color: var(--billing-text);
}

body .text-primary,
body a.text-primary,
body .hover\:text-primary:hover {
    color: var(--billing-blue) !important;
}

body .text-secondary,
body a.text-secondary,
body .hover\:text-secondary:hover {
    color: var(--billing-violet) !important;
}

body .text-tertiary,
body a.text-tertiary,
body .hover\:text-tertiary:hover {
    color: var(--billing-green) !important;
}

body .text-error,
body .text-on-error-container {
    color: var(--billing-red) !important;
}

body .text-on-surface,
body .text-on-background {
    color: var(--billing-text) !important;
}

body .text-on-surface-variant,
body .text-outline {
    color: var(--billing-muted) !important;
}

body .bg-primary,
body .hover\:bg-primary:hover {
    background: linear-gradient(135deg, var(--billing-blue), var(--billing-indigo)) !important;
    color: #ffffff !important;
}

body .bg-secondary,
body .hover\:bg-secondary:hover {
    background: linear-gradient(135deg, var(--billing-violet), #5b21b6) !important;
    color: #ffffff !important;
}

body .bg-tertiary,
body .hover\:bg-tertiary:hover {
    background: linear-gradient(135deg, var(--billing-green), #0d9488) !important;
    color: #ffffff !important;
}

body .bg-error {
    background: linear-gradient(135deg, var(--billing-red), #991b1b) !important;
    color: #ffffff !important;
}

body .bg-primary-container,
body .bg-primary-fixed,
body .bg-primary-fixed-dim {
    background-color: var(--billing-blue-soft) !important;
    color: #1d4ed8 !important;
}

body .bg-secondary-container,
body .bg-secondary-fixed,
body .bg-secondary-fixed-dim {
    background-color: var(--billing-violet-soft) !important;
    color: #6d28d9 !important;
}

body .bg-tertiary-container,
body .bg-tertiary-fixed,
body .bg-tertiary-fixed-dim {
    background-color: var(--billing-green-soft) !important;
    color: #0f766e !important;
}

body .bg-error-container {
    background-color: var(--billing-red-soft) !important;
    color: var(--billing-red) !important;
}

body .bg-surface,
body .bg-background,
body .bg-surface-container-lowest,
body .bg-white {
    background-color: var(--billing-surface) !important;
}

body .bg-surface-container,
body .bg-surface-container-low,
body .bg-surface-container-high,
body .bg-surface-variant {
    background-color: var(--billing-surface-soft) !important;
}

body .border-primary {
    border-color: var(--billing-blue) !important;
}

body .border-secondary {
    border-color: var(--billing-violet) !important;
}

body .border-tertiary {
    border-color: var(--billing-green) !important;
}

body .border-error {
    border-color: var(--billing-red) !important;
}

body .border-outline,
body .border-outline-variant,
body .border-surface-container,
body .border-surface-container-high,
body .border-surface-container-highest {
    border-color: var(--billing-border) !important;
}

body .from-primary-fixed {
    --tw-gradient-from: var(--billing-blue-soft) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(234, 242, 255, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

body .from-primary,
body .from-on-surface {
    --tw-gradient-from: var(--billing-blue) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(37, 99, 235, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

body .via-tertiary {
    --tw-gradient-to: rgba(15, 118, 110, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--billing-green) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

body .to-secondary-fixed {
    --tw-gradient-to: var(--billing-violet-soft) var(--tw-gradient-to-position) !important;
}

body .to-secondary {
    --tw-gradient-to: var(--billing-violet) var(--tw-gradient-to-position) !important;
}

body main :where(.card, .stat-card, .mini-stat),
body main :where(.bg-surface, .bg-surface-container-lowest, .bg-white)[class*="border"],
body main :where(form[class*="border"], section[class*="border"]) {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
    border-color: var(--billing-border) !important;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.055) !important;
}

body main :where(.card, .stat-card, .mini-stat):nth-child(6n+1),
body main :where(.bg-surface, .bg-surface-container-lowest, .bg-white)[class*="border"]:nth-child(6n+1) {
    border-top: 3px solid var(--billing-blue) !important;
}

body main :where(.card, .stat-card, .mini-stat):nth-child(6n+2),
body main :where(.bg-surface, .bg-surface-container-lowest, .bg-white)[class*="border"]:nth-child(6n+2) {
    border-top: 3px solid var(--billing-green) !important;
}

body main :where(.card, .stat-card, .mini-stat):nth-child(6n+3),
body main :where(.bg-surface, .bg-surface-container-lowest, .bg-white)[class*="border"]:nth-child(6n+3) {
    border-top: 3px solid var(--billing-violet) !important;
}

body main :where(.card, .stat-card, .mini-stat):nth-child(6n+4),
body main :where(.bg-surface, .bg-surface-container-lowest, .bg-white)[class*="border"]:nth-child(6n+4) {
    border-top: 3px solid var(--billing-amber) !important;
}

body main :where(table thead tr) {
    background: linear-gradient(90deg, var(--billing-blue-soft), var(--billing-green-soft)) !important;
    color: #1f3b67 !important;
}

body main :where(table tbody tr:hover) {
    background-color: #f2f7ff !important;
}

body input:focus,
body select:focus,
body textarea:focus {
    border-color: var(--billing-blue) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14) !important;
}

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

html,
body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

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

.tenant-main,
.superadmin-main,
.tenant-content,
.superadmin-content,
.tenant-content > main,
.superadmin-content > main,
body main,
body section,
body form {
    min-width: 0;
    max-width: 100%;
}

.tenant-content :where(.grid, .flex),
.superadmin-content :where(.grid, .flex),
body main :where(.grid, .flex) {
    min-width: 0;
}

.tenant-content :where(.min-w-0),
.superadmin-content :where(.min-w-0),
body main :where(.min-w-0) {
    min-width: 0 !important;
}

.tenant-content :where(.overflow-x-auto),
.superadmin-content :where(.overflow-x-auto),
body main :where(.overflow-x-auto),
.dataTables_wrapper {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.tenant-content div:has(> table),
.superadmin-content div:has(> table),
body main div:has(> table) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tenant-content table,
.superadmin-content table,
body main table {
    max-width: 100%;
}

.tenant-content th,
.tenant-content td,
.superadmin-content th,
.superadmin-content td,
body main th,
body main td {
    overflow-wrap: anywhere;
}

.tenant-content :where(a, button, input, select, textarea),
.superadmin-content :where(a, button, input, select, textarea),
body main :where(a, button, input, select, textarea) {
    max-width: 100%;
}

.tenant-content :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
.superadmin-content :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
body main :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    width: 100%;
}

.tenant-content :where([class*="max-w-"]),
.superadmin-content :where([class*="max-w-"]),
body main :where([class*="max-w-"]) {
    min-width: 0;
}

#customerMap,
#nodesMap,
#coverageMap,
#dashboardMiniMap,
#publicCoverageMap,
#customerLocationMap,
#techMap,
.leaflet-container {
    max-width: 100%;
}

@media (max-width: 1024px) {
    .tenant-content > main,
    .superadmin-content > main {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    .tenant-content :where(.xl\:grid-cols-2, .xl\:grid-cols-3, .xl\:grid-cols-4, .xl\:grid-cols-6, .xl\:grid-cols-8, .xl\:grid-cols-12),
    .superadmin-content :where(.xl\:grid-cols-2, .xl\:grid-cols-3, .xl\:grid-cols-4, .xl\:grid-cols-6, .xl\:grid-cols-8, .xl\:grid-cols-12),
    body main :where(.xl\:grid-cols-2, .xl\:grid-cols-3, .xl\:grid-cols-4, .xl\:grid-cols-6, .xl\:grid-cols-8, .xl\:grid-cols-12) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 767px) {
    body {
        background: var(--billing-bg) !important;
    }

    .tenant-main,
    .superadmin-main {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .tenant-content > main,
    .superadmin-content > main {
        margin: 0 !important;
        width: 100% !important;
        padding: 1rem !important;
    }

    .tenant-content > section,
    .superadmin-content > section,
    body main > section {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    .tenant-content :where(header.flex, .flex.items-center.justify-between, .flex.justify-between),
    .superadmin-content :where(header.flex, .flex.items-center.justify-between, .flex.justify-between),
    body main :where(header.flex, .flex.items-center.justify-between, .flex.justify-between) {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    .tenant-content :where(.grid),
    .superadmin-content :where(.grid),
    body main :where(.grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .tenant-content :where(.grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6, .grid-cols-8, .grid-cols-12),
    .superadmin-content :where(.grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6, .grid-cols-8, .grid-cols-12),
    body main :where(.grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6, .grid-cols-8, .grid-cols-12) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .tenant-content :where([class*="grid-cols-["]),
    .superadmin-content :where([class*="grid-cols-["]),
    body main :where([class*="grid-cols-["]) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .tenant-content :where(.p-6, .p-7, .p-8, .p-10, .p-12, .p-14),
    .superadmin-content :where(.p-6, .p-7, .p-8, .p-10, .p-12, .p-14),
    body main :where(.p-6, .p-7, .p-8, .p-10, .p-12, .p-14) {
        padding: 1rem !important;
    }

    .tenant-content :where(.px-6, .px-8, .px-10, .px-12),
    .superadmin-content :where(.px-6, .px-8, .px-10, .px-12),
    body main :where(.px-6, .px-8, .px-10, .px-12) {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .tenant-content :where(.py-6, .py-8, .py-10, .py-12),
    .superadmin-content :where(.py-6, .py-8, .py-10, .py-12),
    body main :where(.py-6, .py-8, .py-10, .py-12) {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .tenant-content :where(.gap-8, .gap-10, .gap-12, .gap-14),
    .superadmin-content :where(.gap-8, .gap-10, .gap-12, .gap-14),
    body main :where(.gap-8, .gap-10, .gap-12, .gap-14) {
        gap: 1rem !important;
    }

    .tenant-content :where(.space-y-8, .space-y-10, .space-y-12) > :not([hidden]) ~ :not([hidden]),
    .superadmin-content :where(.space-y-8, .space-y-10, .space-y-12) > :not([hidden]) ~ :not([hidden]),
    body main :where(.space-y-8, .space-y-10, .space-y-12) > :not([hidden]) ~ :not([hidden]) {
        margin-top: 1rem !important;
    }

    .tenant-content :where(.text-3xl, .text-4xl, .text-5xl, .text-6xl),
    .superadmin-content :where(.text-3xl, .text-4xl, .text-5xl, .text-6xl),
    body main :where(.text-3xl, .text-4xl, .text-5xl, .text-6xl),
    .auth-panel :where(.text-3xl, .text-4xl, .text-5xl, .text-6xl) {
        font-size: clamp(1.45rem, 7vw, 2rem) !important;
        line-height: 1.18 !important;
    }

    .tenant-content :where(a, button),
    .superadmin-content :where(a, button),
    body main :where(a, button) {
        min-height: 2.5rem;
        white-space: normal !important;
    }

    .tenant-content :where(.whitespace-nowrap),
    .superadmin-content :where(.whitespace-nowrap),
    body main :where(.whitespace-nowrap) {
        white-space: normal !important;
    }

    .tenant-content table[class*="min-w-"],
    .superadmin-content table[class*="min-w-"],
    body main table[class*="min-w-"] {
        min-width: max(720px, 100%) !important;
    }

    .tenant-content .dataTables_wrapper table,
    .superadmin-content .dataTables_wrapper table,
    body main .dataTables_wrapper table {
        min-width: max(760px, 100%) !important;
    }

    .dataTables_wrapper .tenant-table-footer,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        width: 100% !important;
        text-align: left !important;
    }

    .dataTables_wrapper .dataTables_paginate {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    #customerMap,
    #nodesMap,
    #coverageMap,
    #customerLocationMap,
    #publicCoverageMap {
        height: min(62vh, 520px) !important;
        min-height: 360px !important;
    }

    #dashboardMiniMap,
    #techMap {
        height: min(58vh, 460px) !important;
        min-height: 320px !important;
    }

    .ios-modal-backdrop {
        padding: 0 !important;
    }

    .ios-modal-sheet {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
    }

    .auth-shell {
        display: block !important;
    }

    .auth-content {
        min-height: 100vh !important;
        padding: 1rem !important;
    }

    body > header,
    header.bg-surface,
    header[class*="bg-surface"] {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        padding: 0.75rem 1rem !important;
    }

    body > header a.text-2xl,
    header.bg-surface a.text-2xl,
    header[class*="bg-surface"] a.text-2xl {
        font-size: 1rem !important;
        line-height: 1.35 !important;
    }

    body > header :where(.px-6, .px-8),
    header.bg-surface :where(.px-6, .px-8),
    header[class*="bg-surface"] :where(.px-6, .px-8) {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }

    footer {
        padding: 1.25rem !important;
        gap: 0.75rem !important;
    }

    footer .flex {
        flex-wrap: wrap !important;
    }
}

.customer-workspace,
.invoice-workspace,
.correction-workspace {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.customer-workspace .dataTables_wrapper,
.invoice-workspace .dataTables_wrapper,
.correction-workspace .dataTables_wrapper {
    width: 100%;
    max-width: 100%;
}

.customer-table,
.invoice-table,
.correction-table {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed;
}

.customer-table th,
.customer-table td,
.invoice-table th,
.invoice-table td,
.correction-table th,
.correction-table td {
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.customer-table th:first-child,
.customer-table td:first-child,
.invoice-table th:first-child,
.invoice-table td:first-child,
.correction-table th:first-child,
.correction-table td:first-child {
    width: 2.5rem !important;
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
    text-align: center;
}

.customer-table th:last-child,
.customer-table td:last-child,
.invoice-table th:last-child,
.invoice-table td:last-child {
    width: 8.5rem !important;
}

.correction-table th:last-child,
.correction-table td:last-child {
    width: 12rem !important;
}

.customer-table td:last-child .flex,
.invoice-table td:last-child .flex,
.correction-table td:last-child .flex {
    flex-wrap: wrap;
}

.customer-table :where(a, button),
.invoice-table :where(a, button),
.correction-table :where(a, button) {
    min-width: 0;
}

.customer-table :where(.rounded-md, .rounded-full),
.invoice-table :where(.rounded-md, .rounded-full),
.correction-table :where(.rounded-md, .rounded-full) {
    max-width: 100%;
}

.row-select-checkbox,
.tenant-content input.row-select-checkbox,
.superadmin-content input.row-select-checkbox,
body main input.row-select-checkbox,
#selectVisibleCustomers,
#selectVisibleInvoices,
#selectVisibleCorrections {
    width: 1.1rem !important;
    height: 1.1rem !important;
    min-width: 1.1rem !important;
    min-height: 1.1rem !important;
    max-width: 1.1rem !important;
    max-height: 1.1rem !important;
    aspect-ratio: 1 / 1;
    padding: 0 !important;
    border-radius: 9999px !important;
    vertical-align: middle;
    cursor: pointer;
    flex: 0 0 auto;
}

.row-select-checkbox:checked,
#selectVisibleCustomers:checked,
#selectVisibleInvoices:checked,
#selectVisibleCorrections:checked {
    border-color: var(--billing-blue) !important;
    background-color: var(--billing-blue) !important;
}

.row-select-checkbox:focus,
#selectVisibleCustomers:focus,
#selectVisibleInvoices:focus,
#selectVisibleCorrections:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
}

.customer-table tr.is-selected,
.invoice-table tr.is-selected,
.correction-table tr.is-selected {
    background-color: #eff6ff !important;
}

.invoice-summary-card {
    min-width: 0;
}

.invoice-summary-card > .flex {
    position: relative;
    display: block !important;
    min-width: 0;
    padding-right: 2.75rem;
}

.invoice-summary-card > .flex > div {
    min-width: 0;
}

.invoice-summary-card > .flex > .material-symbols-outlined {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    width: 2.1rem;
    height: 2.1rem;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.invoice-summary-card [data-summary-amount] {
    font-size: clamp(1.05rem, 0.62vw + 0.72rem, 1.35rem) !important;
    line-height: 1.12;
}

body main :where(.card, .stat-card, .mini-stat, .invoice-summary-card, [class*="bg-surface"][class*="border"], [class*="bg-white"][class*="border"]) {
    min-width: 0;
}

body main :where(.card, .stat-card, .mini-stat, .invoice-summary-card, [class*="bg-surface"][class*="border"], [class*="bg-white"][class*="border"]) :where(.text-xl, .text-2xl, .text-3xl, .text-4xl)[class*="font-black"],
body main :where(.card, .stat-card, .mini-stat, .invoice-summary-card, [class*="bg-surface"][class*="border"], [class*="bg-white"][class*="border"]) [data-summary-amount] {
    display: block;
    max-width: 100%;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0 !important;
}

body main :where(.card, .stat-card, .mini-stat, .invoice-summary-card, [class*="bg-surface"][class*="border"], [class*="bg-white"][class*="border"]) :where(.text-3xl, .text-4xl)[class*="font-black"] {
    font-size: clamp(1.1rem, 0.82vw + 0.74rem, 1.55rem) !important;
    line-height: 1.12 !important;
}

body main :where(.card, .stat-card, .mini-stat, .invoice-summary-card, [class*="bg-surface"][class*="border"], [class*="bg-white"][class*="border"]) :where(.text-xl, .text-2xl)[class*="font-black"],
body main :where(.card, .stat-card, .mini-stat, .invoice-summary-card, [class*="bg-surface"][class*="border"], [class*="bg-white"][class*="border"]) [data-summary-amount] {
    font-size: clamp(0.98rem, 0.55vw + 0.68rem, 1.28rem) !important;
    line-height: 1.14 !important;
}

.invoice-summary-card [data-summary-meta] {
    line-height: 1.25;
}

@media (max-width: 1280px) {
    .customer-table,
    .invoice-table,
    .correction-table {
        font-size: 0.78rem !important;
    }

    .customer-table th,
    .customer-table td,
    .invoice-table th,
    .invoice-table td,
    .correction-table th,
    .correction-table td {
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
    }

    .customer-table :where(a, button),
    .invoice-table :where(a, button),
    .correction-table :where(a, button) {
        font-size: 0.72rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

@media (max-width: 480px) {
    .tenant-content > main,
    .superadmin-content > main {
        padding: 0.75rem !important;
    }

    .tenant-content :where(.p-4, .p-5, .p-6, .p-7, .p-8, .p-10, .p-12),
    .superadmin-content :where(.p-4, .p-5, .p-6, .p-7, .p-8, .p-10, .p-12),
    body main :where(.p-4, .p-5, .p-6, .p-7, .p-8, .p-10, .p-12) {
        padding: 0.875rem !important;
    }

    .tenant-content table[class*="min-w-"],
    .superadmin-content table[class*="min-w-"],
    body main table[class*="min-w-"] {
        min-width: max(640px, 100%) !important;
    }

    .tenant-content :where(.w-12, .h-12),
    .superadmin-content :where(.w-12, .h-12),
    body main :where(.w-12, .h-12) {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
}