.sidebarBgColor { background-color: rgba(255, 209, 218, 0.85); }
.dark .sidebarBgColor { background-color: rgba(53, 49, 56, 0); }
.navbarBgColor { background-color: rgba(255, 250, 245, 1); }
.dark .navbarBgColor { background-color: rgba(51, 48, 117, 0); }
.dashboardBgColor { background-color: rgba(252, 254, 255, 1); }
.dark .dashboardBgColor { background-color: rgba(37, 46, 71, 1); }
.footerBgColor { background-color: rgba(255, 254, 252, 0.95); }
.dark .footerBgColor { background-color: rgba(44, 50, 89, 0); }
#nav-parent{
    padding-top: 0.75rem; 
    padding-bottom: 0.75rem;
}

#app-content {
    min-height: calc(100vh - 7.5rem);
}

#footer {
    min-height: 48px;
}

/* Global responsive baseline for all tenants */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

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

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.table-responsive table {
    min-width: 640px;
}

.modal-dialog {
    margin: 0.75rem auto;
}

@media (max-width: 1199.98px) {
    #main-content {
        padding: 1rem !important;
    }
}

@media (max-width: 991.98px) {
    #app-content {
        min-height: calc(100vh - 7rem);
    }

    #footer {
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
    }

    #nav-parent .tenant-switch {
        min-width: 170px;
        width: 170px;
    }

    .top-admin-row {
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .top-admin-left,
    .top-admin-actions {
        width: 100%;
    }

    .top-admin-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .top-admin-actions .mx-3 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #sidebar {
        max-height: calc(100vh - 4.5rem) !important;
    }

    #sidebarOverflow {
        max-height: calc(100vh - 6rem) !important;
    }

    #main-content {
        padding: 0.85rem !important;
    }

    .card-body {
        padding: 0.85rem;
    }

    .card-header,
    .card-footer {
        padding: 0.75rem 0.85rem;
    }

    .btn,
    .form-control,
    .form-select,
    .input-group-text {
        min-height: 42px;
    }

    .modal-dialog {
        width: calc(100% - 1rem);
        max-width: 100%;
        margin: 0.5rem auto;
    }

    .modal-content {
        max-height: calc(100vh - 1rem);
        overflow-y: auto;
    }

    .table-responsive table {
        min-width: 560px;
    }
}

@media (max-width: 767.98px) {
    #app-content {
        min-height: calc(100vh - 6.75rem);
    }

    #footer {
        min-height: 44px;
        padding-left: 0.7rem !important;
        padding-right: 0.7rem !important;
    }

    #footer > div {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    #footer p {
        font-size: 0.72rem;
    }

    #nav-parent > .flex {
        gap: 0.5rem;
    }

    #nav-parent .tenant-switch {
        min-width: 140px;
        width: 140px;
    }

    #nav-parent .mx-3 {
        margin-left: 0.35rem !important;
        margin-right: 0.35rem !important;
    }

    #sidebar {
        width: min(84vw, 320px);
    }

    .table-responsive table td[data-label] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.6rem;
        text-align: right;
        white-space: normal;
    }

    .table-responsive table td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: #8ca1c3;
        text-align: left;
        flex: 0 0 auto;
    }

    #main-content {
        padding: 0.65rem !important;
    }

    .card {
        border-radius: 10px;
    }

    .card-header h4,
    .card-header h5 {
        font-size: 1rem;
        margin-bottom: 0;
    }

    .d-flex.justify-content-between.align-items-center {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .btn {
        white-space: normal;
    }

    .table-responsive table {
        min-width: 520px;
    }
}

@media (max-width: 575.98px) {
    #app-content {
        min-height: calc(100vh - 6.5rem);
    }

    #nav-parent .tenant-switch {
        min-width: 120px;
        width: 120px;
    }

    .top-admin-actions {
        justify-content: space-between;
    }

    .top-admin-actions .btn {
        min-height: 38px;
        padding: 0.35rem 0.55rem;
    }

    #main-content {
        padding: 0.5rem !important;
    }

    .card-body {
        padding: 0.75rem;
    }

    .card-header,
    .card-footer {
        padding: 0.65rem 0.75rem;
    }

    .table-responsive table {
        min-width: 480px;
    }
}