:root {
    --sidebar-collapsed-width: 84px;
    --sidebar-expanded-width: 270px;
    --topbar-height: 66px;

    --confixx-blue: #1d4f7a;
    --confixx-blue-dark: #153b5d;
    --confixx-blue-light: #e8f0f7;
    --confixx-silver: #d7dee5;
    --confixx-border: #c2ccd6;
    --confixx-accent: #ef9b21;

    --app-bg: #edf1f4;
    --panel-bg: #ffffff;
    --panel-header-bg: linear-gradient(180deg, #f8fafc 0%, #e8edf2 100%);
    --text-main: #243442;
    --text-muted: #657482;
    --sidebar-bg: #173f62;
    --sidebar-border: rgba(255, 255, 255, .12);
    --sidebar-text: #dce8f2;
    --sidebar-hover: rgba(255, 255, 255, .10);
    --shadow-soft: 0 8px 24px rgba(29, 54, 76, .08);
}

[data-bs-theme="dark"] {
    --confixx-blue: #4c91c8;
    --confixx-blue-dark: #0b2133;
    --confixx-blue-light: #183449;
    --confixx-silver: #344654;
    --confixx-border: #3b4d5b;
    --app-bg: #0f1921;
    --panel-bg: #18252f;
    --panel-header-bg: linear-gradient(180deg, #22333f 0%, #1a2933 100%);
    --text-main: #e5edf3;
    --text-muted: #9fb0bd;
    --sidebar-bg: #0b2133;
    --sidebar-border: rgba(255, 255, 255, .09);
    --sidebar-text: #c4d6e4;
    --sidebar-hover: rgba(255, 255, 255, .08);
    --shadow-soft: 0 10px 28px rgba(0, 0, 0, .24);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--confixx-border) transparent;
}

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--text-main);
    background:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px),
        var(--app-bg);
    background-size: 24px 24px;
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

a {
    text-decoration: none;
}

.text-muted,
.text-body-secondary {
    color: var(--text-muted) !important;
}

code {
    color: color-mix(in srgb, var(--confixx-blue) 82%, var(--text-main));
}

.btn-primary,
.btn-confixx {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--confixx-blue);
    --bs-btn-border-color: var(--confixx-blue-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--confixx-blue-dark);
    --bs-btn-hover-border-color: var(--confixx-blue-dark);
    --bs-btn-focus-shadow-rgb: 29, 79, 122;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--confixx-blue-dark);
    --bs-btn-active-border-color: var(--confixx-blue-dark);
}

.form-control,
.form-select,
.input-group-text,
textarea.form-control {
    color: var(--text-main);
    background-color: var(--panel-bg);
    border-color: var(--confixx-border);
}

.form-control:focus,
.form-select:focus {
    color: var(--text-main);
    background-color: var(--panel-bg);
    border-color: color-mix(in srgb, var(--confixx-blue) 68%, var(--confixx-border));
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--confixx-blue) 16%, transparent);
}

.form-control::placeholder {
    color: var(--text-muted);
    opacity: .75;
}

.form-check-input:checked {
    background-color: var(--confixx-blue);
    border-color: var(--confixx-blue);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--panel-bg);
    --bs-dropdown-color: var(--text-main);
    --bs-dropdown-border-color: var(--confixx-border);
    --bs-dropdown-link-color: var(--text-main);
    --bs-dropdown-link-hover-color: var(--text-main);
    --bs-dropdown-link-hover-bg: var(--confixx-blue-light);
    box-shadow: var(--shadow-soft);
}

.modal-content {
    color: var(--text-main);
    background: var(--panel-bg);
    border-color: var(--confixx-border);
}

.modal-header,
.modal-footer {
    border-color: var(--confixx-border);
}

.alert-light {
    color: var(--text-main);
    background: color-mix(in srgb, var(--panel-bg) 90%, var(--confixx-blue-light));
    border-color: var(--confixx-border) !important;
}

.card {
    overflow: hidden;
    color: var(--text-main);
    background: var(--panel-bg);
    border: 1px solid var(--confixx-border);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.card-header {
    min-height: 48px;
    padding: 11px 15px;
    color: var(--text-main);
    background: var(--panel-header-bg);
    border-bottom: 1px solid var(--confixx-border);
}

.card-body {
    color: var(--text-main);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-main);
    --bs-table-border-color: var(--confixx-border);
    --bs-table-hover-bg: color-mix(in srgb, var(--confixx-blue-light) 44%, transparent);
    --bs-table-hover-color: var(--text-main);
    margin-bottom: 0;
    font-size: .84rem;
}

.table > :not(caption) > * > * {
    padding: .75rem .85rem;
    vertical-align: middle;
}

.table thead th,
.table-light > * > * {
    color: var(--text-muted) !important;
    background: color-mix(in srgb, var(--panel-bg) 75%, var(--confixx-blue-light)) !important;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.table-sm > :not(caption) > * > * {
    padding: .58rem .7rem;
}

.badge {
    font-weight: 650;
}

.page-heading-icon {
    display: inline-grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--confixx-blue);
    background: var(--confixx-blue-light);
    border: 1px solid color-mix(in srgb, var(--confixx-blue) 22%, transparent);
    border-radius: 8px;
    font-size: 1.2rem;
}

.admin-page-title {
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -.02em;
}

.admin-page-subtitle {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: .82rem;
}

.admin-status-card {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: var(--panel-bg);
    border: 1px solid var(--confixx-border);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.admin-status-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    content: "";
    background: var(--status-color, var(--confixx-blue));
}

.admin-status-card--blue { --status-color: #287bb5; }
.admin-status-card--green { --status-color: #2aa765; }
.admin-status-card--purple { --status-color: #7658b8; }
.admin-status-card--orange { --status-color: #d98208; }
.admin-status-card--red { --status-color: #c94b45; }
.admin-status-card--slate { --status-color: #657482; }

.admin-status-card-body {
    display: flex;
    min-height: 118px;
    padding: 18px 16px 17px 20px;
    align-items: flex-start;
    gap: 14px;
}

.admin-status-icon {
    display: inline-grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--status-color, var(--confixx-blue));
    background: color-mix(in srgb, var(--status-color, var(--confixx-blue)) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--status-color, var(--confixx-blue)) 26%, transparent);
    border-radius: 8px;
    font-size: 1.2rem;
}

.admin-status-label {
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-status-value {
    margin-top: 2px;
    font-size: 1.55rem;
    font-weight: 750;
    line-height: 1.15;
}

.admin-status-meta {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: .75rem;
}

.admin-key-actions {
    min-width: 280px;
}

.admin-ip-input {
    width: 135px;
}

.admin-user-agent {
    max-width: 260px;
}

.admin-version-json {
    font-size: .78rem;
}

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