:root {
    --cs-ink: #172a32;
    --cs-ink-soft: #263d46;
    --cs-gold: #f4af00;
    --cs-gold-soft: #fff3cf;
    --cs-paper: #fbfaf7;
    --bs-primary: #172a32;
    --bs-primary-rgb: 23, 42, 50;
    --bs-info: #172a32;
    --bs-info-rgb: 23, 42, 50;
    --bs-dark: #172a32;
    --bs-dark-rgb: 23, 42, 50;
    --bs-body-bg: var(--cs-paper);
    --bs-link-color: #172a32;
    --bs-link-hover-color: #a66c00;
    --bs-focus-ring-color: rgba(244, 175, 0, .32);
}

body {
    color: #26343a;
    background-color: var(--cs-paper);
}

a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

.btn-primary,
.bg-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cs-ink);
    --bs-btn-border-color: var(--cs-ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0f2027;
    --bs-btn-hover-border-color: #0f2027;
    --bs-btn-active-bg: #0f2027;
    --bs-btn-active-border-color: #0f2027;
    background-color: var(--cs-ink) !important;
    border-color: var(--cs-ink) !important;
}

.btn-primary:hover { background-color: #0f2027 !important; }
.bg-dark,
.table-dark {
    --bs-table-bg: var(--cs-ink);
    background-color: var(--cs-ink) !important;
}
.btn-info,
.bg-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cs-ink);
    --bs-btn-border-color: var(--cs-ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0f2027;
    --bs-btn-hover-border-color: #0f2027;
    color: #fff;
    background-color: var(--cs-ink) !important;
    border-color: var(--cs-ink) !important;
}
.text-primary { color: var(--cs-ink) !important; }
.btn-outline-primary {
    --bs-btn-color: var(--cs-ink);
    --bs-btn-border-color: var(--cs-ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cs-ink);
    --bs-btn-hover-border-color: var(--cs-ink);
}

.btn-warning,
.bg-warning {
    --bs-btn-color: var(--cs-ink);
    --bs-btn-bg: var(--cs-gold);
    --bs-btn-border-color: var(--cs-gold);
    --bs-btn-hover-color: var(--cs-ink);
    --bs-btn-hover-bg: #dda000;
    --bs-btn-hover-border-color: #dda000;
}

.sidebar.bg-dark {
    background-color: var(--cs-ink) !important;
    border-right: 3px solid var(--cs-gold);
}
.sidebar {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sidebar .sidebar-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.sidebar .sidebar-scroll {
    flex: 1 1 0;
    min-height: 0;
    padding: .5rem .65rem !important;
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    scrollbar-color: var(--cs-gold) var(--cs-ink-soft);
}
.sidebar .sidebar-scroll::-webkit-scrollbar { width: 10px; }
.sidebar .sidebar-scroll::-webkit-scrollbar-track { background: var(--cs-ink-soft); }
.sidebar .sidebar-scroll::-webkit-scrollbar-thumb {
    background: var(--cs-gold);
    border: 2px solid var(--cs-ink-soft);
    border-radius: 999px;
}
.sidebar .sidebar-scroll::-webkit-scrollbar-thumb:hover { background: #ffd25c; }
.sidebar .py-2 {
    padding-top: .34rem !important;
    padding-bottom: .34rem !important;
}
.sidebar .nav-link,
.sidebar .accordion-button {
    font-size: .94rem;
    line-height: 1.18;
}
.sidebar .accordion-item { margin-bottom: .1rem; }
.sidebar .sidebar-section-label {
    color: var(--cs-gold);
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .1em;
    margin-bottom: .2rem;
}
.sidebar .sidebar-superadmin-toggle {
    background: rgba(244, 175, 0, .12);
    border: 1px solid rgba(244, 175, 0, .55);
}
.sidebar .sidebar-superadmin-toggle:hover,
.sidebar .sidebar-back-link:hover {
    background: rgba(244, 175, 0, .22) !important;
}
.sidebar .sidebar-back-link {
    border: 1px solid rgba(255, 255, 255, .16);
}
.sidebar .sidebar-superadmin-panel .nav-link { margin-bottom: .12rem; }
.sidebar .sidebar-footer {
    flex: 0 0 auto;
    z-index: 2;
    background: var(--cs-ink);
}
.sidebar .sidebar-ai-link {
    margin-top: .35rem;
    border: 1px solid rgba(244, 175, 0, .42);
    background: rgba(244, 175, 0, .1);
}
.sidebar .sidebar-ai-link:hover {
    background: rgba(244, 175, 0, .2) !important;
}

.sidebar .nav-link,
.sidebar .accordion-button { transition: background-color .16s ease, color .16s ease; }
.sidebar .nav-link:hover,
.sidebar .accordion-button:hover { background-color: rgba(255, 255, 255, .1) !important; }
.sidebar .nav-link.active {
    background: var(--cs-gold) !important;
    color: var(--cs-ink) !important;
    font-weight: 700;
}
.sidebar .text-primary { color: var(--cs-gold) !important; }

.navbar-brand { color: var(--cs-ink) !important; }
.cleverstyle-brand-logo { width: 154px; height: 42px; object-fit: contain; }
.sidebar-brand-logo { max-width: 208px; width: 82%; height: 56px; object-fit: contain; background: #fff; border-radius: .45rem; padding: .2rem .35rem; }

.page-titles { border-left: 4px solid var(--cs-gold); border-radius: .35rem; }
.card { border-radius: .65rem; }
.card-header.bg-primary { color: #fff !important; }
.card-header.bg-dark,
.card-header.bg-info { color: #fff !important; }
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--cs-gold) !important;
    box-shadow: 0 0 0 .2rem rgba(244, 175, 0, .24) !important;
}
.form-check-input:checked { background-color: var(--cs-ink); border-color: var(--cs-ink); }
.page-link { color: var(--cs-ink); }
.page-item.active .page-link { background-color: var(--cs-ink); border-color: var(--cs-ink); }

.login-header { background: var(--cs-ink) !important; border-bottom: 4px solid var(--cs-gold); }
.login-header .brand-icon { display: none; }
.login-header img { display: block; width: min(100%, 260px); height: 76px; object-fit: contain; margin: 0 auto .65rem; background: #fff; border-radius: .4rem; }

@media (max-width: 575.98px) {
    .cleverstyle-brand-logo { width: 118px; height: 36px; }
}