:root {
    --ofms-navy-900: #071527;
    --ofms-navy-800: #0B1F3A;
    --ofms-navy-700: #14365F;
    --ofms-navy-600: #1E4A7A;
    --ofms-navy-100: #DCE4EF;
    --ofms-navy-50: #EEF2F7;
    --ofms-gold-600: #A8871E;
    --ofms-gold-500: #C9A227;
    --ofms-gold-400: #D9B545;
    --ofms-primary: var(--ofms-navy-800);
}

 
.btn-primary {
    background-color: var(--ofms-navy-800) !important;
    border-color: var(--ofms-navy-800) !important;
    font-weight: 700;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ofms-navy-700) !important;
    border-color: var(--ofms-navy-700) !important;
    box-shadow: 0 6px 18px rgba(11, 31, 58, 0.35);
}
.btn-outline-primary {
    color: var(--ofms-navy-800) !important;
    border-color: var(--ofms-navy-800) !important;
}
.btn-outline-primary:hover {
    background-color: var(--ofms-navy-800) !important;
    color: #fff !important;
}

 
.bg-primary { background-color: var(--ofms-navy-800) !important; }
.text-primary { color: var(--ofms-navy-700) !important; }
.border-primary { border-color: var(--ofms-navy-800) !important; }
.text-bg-primary { background-color: var(--ofms-navy-800) !important; }

 
.sidebar {
    background: linear-gradient(180deg, var(--ofms-navy-900) 0%, var(--ofms-navy-800) 60%, var(--ofms-navy-700) 100%) !important;
}
.sidebar .nav-link.active {
    background: var(--ofms-navy-600) !important;
    box-shadow: inset 3px 0 0 var(--ofms-gold-500);
}
.sidebar .nav-link:hover { background: rgba(255, 255, 255, 0.08); }

 
.side-section { border-radius: 10px; }
.side-sec-btn {
    color: #fff;
    font-size: 0.92rem;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.04);
}
.side-sec-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.side-sec-btn.active-sec {
    background: rgba(201, 162, 39, 0.14);
    border-color: rgba(201, 162, 39, 0.45);
    color: #fff;
}
.side-sec-count {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 0.68rem;
}
.active-sec .side-sec-count { background: var(--ofms-gold-500); color: var(--ofms-navy-900); }
 
.side-live-count {
    background: var(--ofms-gold-500) !important;
    color: var(--ofms-navy-900) !important;
    font-size: 0.7rem;
    min-width: 22px;
}
.side-sec-chev { font-size: 0.75rem; transition: transform 0.25s ease; color: var(--ofms-gold-400); }
.side-sec-btn[aria-expanded="true"] .side-sec-chev { transform: rotate(180deg); }
.side-sub { padding-inline-start: 0.9rem; margin-top: 0.25rem; border-inline-start: 2px solid rgba(201, 162, 39, 0.35); margin-inline-start: 1.1rem; }
.side-sub .nav-link { font-size: 0.87rem; padding-top: 0.45rem; padding-bottom: 0.45rem; }

 
.side-sub-wrap {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.28s ease, opacity 0.22s ease;
}
.side-sub-wrap > ul { overflow: hidden; min-height: 0; }
.side-section.open > .side-sub-wrap {
    grid-template-rows: 1fr;
    opacity: 1;
}
.side-section.open > .side-sec-btn .side-sec-chev { transform: rotate(180deg); }

 
.sidebar .bg-primary {
    background: transparent !important;
    border: 2px solid var(--ofms-gold-500);
    border-radius: 12px !important;
}

 
.navbar.navbar-white {
    border-bottom: 3px solid var(--ofms-navy-800) !important;
}

 
.card {
    border-radius: 14px;
}
.card-header.bg-white h6,
.card-header h6 {
    color: var(--ofms-navy-800);
}

 
.badge.bg-primary { background-color: var(--ofms-navy-800) !important; }

 
.page-link { color: var(--ofms-navy-700); }
.page-item.active .page-link {
    background-color: var(--ofms-navy-800);
    border-color: var(--ofms-navy-800);
}
.table thead.table-light th {
    background-color: var(--ofms-navy-50) !important;
    color: var(--ofms-navy-800);
}

 
.ofms-gold { color: var(--ofms-gold-500) !important; }
.ofms-gold-bg { background-color: var(--ofms-gold-500) !important; }

 
@media (max-width: 576px) {
    .oc-touch-btn { min-height: 44px; }
}

 
.summary-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.summary-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(11, 31, 58, 0.16) !important; }

 
 
.btn {
    white-space: nowrap;
    flex-shrink: 0;
}
.btn .bi + span, .btn span + .bi, .btn i + span { white-space: nowrap; }
@media (max-width: 576px) {
     
    .container-fluid > .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .container-fluid > .d-flex.justify-content-between > .btn,
    .container-fluid > .d-flex.justify-content-between > div:last-child {
        flex-shrink: 0;
    }
}