:root,
body,
body.light {
    color-scheme: light !important;
    --bg: #f4f6f8;
    --bg-alt: #ffffff;
    --surface: #ffffff;
    --surface-soft: #f7f9fc;
    --border: #d9e1ea;
    --text: #172033;
    --text-dim: #64748b;
    --accent: #2563eb;
    --accent-glow: #3b82f6;
    --shadow: 0 4px 16px -8px rgba(15, 23, 42, .22);
    --logo-start: #2563eb;
    --logo-end: #1d4ed8;
    --logo-accent-grad-start: #1d4ed8;
    --logo-accent-grad-end: #60a5fa;
}

html,
body {
    background: var(--bg) !important;
    color: var(--text) !important;
}

.topbar,
.table-wrap,
.ops-toolbar,
.overview-card,
.admin-card {
    background-color: #ffffff;
}

#themeToggle {
    display: none !important;
}

@media (max-width: 700px) {
    .topbar {
        flex-wrap: nowrap !important;
        gap: .5rem;
        padding: .55rem .65rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .topbar::-webkit-scrollbar {
        display: none;
    }

    .brand {
        flex: 0 0 auto;
    }

    .nav {
        flex: 0 0 auto;
        flex-wrap: nowrap !important;
        gap: .25rem;
    }

    .nav button {
        padding: .42rem .62rem;
        white-space: nowrap;
    }

    .actions {
        display: none !important;
    }

    .wrapper {
        margin: .75rem auto;
        padding: 0 .55rem;
        gap: .8rem;
    }

    .ops-overview {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }

    .overview-card {
        min-height: 74px;
        padding: .65rem .7rem;
    }

    .overview-card .value {
        font-size: 21px;
    }

    .ops-toolbar {
        padding: .65rem;
        gap: .55rem;
    }

    #panel-servers .table-wrap,
    #panel-monitors .table-wrap,
    #panel-ssl .table-wrap {
        display: block !important;
        width: 100%;
        overflow-x: auto;
        border-radius: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
    }

    #serversCards,
    #monitorsCards,
    #sslCards {
        display: none !important;
    }

    #serversTable {
        min-width: 1260px !important;
    }

    #monitorsTable {
        min-width: 760px !important;
    }

    #sslTable {
        min-width: 760px !important;
    }

    #serversTable thead th,
    #serversTable tbody td,
    #monitorsTable thead th,
    #monitorsTable tbody td,
    #sslTable thead th,
    #sslTable tbody td {
        display: table-cell !important;
    }

    table.data thead th {
        position: static;
    }

    .footer {
        margin: 1.25rem 0 1.5rem;
    }
}