/* =====================================================================
   PSiRA Portal — "Bracket Plus" style theme
   Flat + material design with subtle gradients, dark slate sidebar,
   Roboto/Rubik typography, reusable utility classes.
   Emulates the Bracket Plus admin dashboard visual language.
   ===================================================================== */
:root {
    /* PSiRA brand palette mapped onto Bracket theme variables:
       Deep Navy #002855 | Burgundy #8B0000 | Warm Gold #D4AF37 | Off-White #F8F9FA */
    --br-primary: #002855;        /* deep navy — primary actions/links */
    --br-primary-dark: #001b3a;
    --br-indigo: #013a75;         /* lighter navy for gradients */
    --br-purple: #5c0000;         /* deep burgundy shade for gradients */
    --br-teal: #D4AF37;           /* warm gold — accent / active markers */
    --br-orange: #D4AF37;         /* gold for awarded/warn accents */
    --br-pink: #8B0000;           /* rich burgundy — secondary emphasis */
    --br-danger: #8B0000;
    --br-slate: #002855;          /* sidebar — deep navy */
    --br-slate-dark: #001b3a;     /* sidebar heading — darker navy */
    --br-slate-light: #0a3a6e;
    --br-body-bg: #F8F9FA;        /* crisp off-white */
    --br-border: #e3e7ed;
    --br-text: #495057;
    --br-text-muted: #868ba1;
    --br-heading: #002855;
    --sidebar-width: 240px;
    /* Crisp native font stacks — no webfont blur */
    --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Segoe UI Semibold", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

html, body {
    height: 100%;
}

body {
    background-color: var(--br-body-bg);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--br-text);
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--br-heading);
    font-family: var(--font-display);
    font-weight: 600;
}

a { color: var(--br-primary); }
a:hover { color: var(--br-primary-dark); }

/* =================== Layout: sidebar =================== */
#wrapper {
    display: flex;
    min-height: 100vh;
}

#sidebar-wrapper {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: var(--br-slate);
    transition: margin-left .25s ease;
    overflow-y: auto;
}

#wrapper.toggled #sidebar-wrapper {
    margin-left: calc(-1 * var(--sidebar-width));
}

#page-content-wrapper {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#page-content-wrapper > main {
    flex: 1 0 auto;
    padding: 25px !important;
}

.sidebar-heading {
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    background: var(--br-slate-dark);
    color: #fff;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1px;
    /*text-transform: uppercase;*/
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.sidebar-heading .text-gold { color: var(--br-teal) !important; }

/* Sidebar nav items — Bracket style */
#sidebar-wrapper .list-group-item,
#sidebar-wrapper .nav-link {
    background: transparent;
    color: rgba(255, 255, 255, .55);
    border: 0;
    border-radius: 0;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .3px;
    transition: all .2s;
    position: relative;
}

#sidebar-wrapper .list-group-item:hover,
#sidebar-wrapper .nav-link:hover {
    background: var(--br-slate-light);
    color: #fff;
}

#sidebar-wrapper .list-group-item.active,
#sidebar-wrapper .nav-link.active {
    background: linear-gradient(90deg, rgba(212,175,55,.18) 0%, transparent 100%);
    color: #fff;
    font-weight: 500;
}

#sidebar-wrapper .list-group-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--br-teal);
}

#sidebar-wrapper .bi {
    width: 22px;
    display: inline-block;
    font-size: 15px;
    color: rgba(255,255,255,.45);
}

#sidebar-wrapper .list-group-item.active .bi,
#sidebar-wrapper .list-group-item:hover .bi {
    color: var(--br-teal);
}

/* Nested submenu items */
#sidebar-wrapper .collapse .list-group-item,
#sidebar-wrapper .collapsing .list-group-item {
    padding-left: 44px;
    font-size: 12.5px;
    background: rgba(0,0,0,.15);
}

#sidebar-wrapper .collapse .list-group-item:hover {
    background: rgba(0,0,0,.3);
}

#sidebar-wrapper .border-gold {
    border-color: rgba(255,255,255,.08) !important;
}

/* =================== Top bar =================== */
.topbar {
    background: #fff;
    height: 60px;
    border-bottom: 1px solid var(--br-border);
    box-shadow: 0 1px 3px rgba(28,39,60,.06);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.topbar .breadcrumb {
    background: transparent;
    font-size: 13px;
    margin-bottom: 0;
}

.topbar .breadcrumb a { color: var(--br-primary); text-decoration: none; }
.topbar .breadcrumb .active { color: var(--br-text-muted); }

.topbar .nav-link {
    color: var(--br-text-muted) !important;
}

.topbar .nav-link:hover { color: var(--br-primary) !important; }

#menu-toggle {
    background: transparent;
    border: 0;
    color: var(--br-text-muted);
    padding: 4px 10px;
}

#menu-toggle:hover { color: var(--br-primary); background: transparent; }

/* =================== Buttons =================== */
.btn {
    border-radius: 2px;   /* Bracket's squared corners */
    font-size: 13px;
    letter-spacing: .5px;
    text-transform: uppercase;
    font-weight: 500;
    padding: .5rem 1rem;
}

.btn-sm { padding: .3rem .7rem; font-size: 11.5px; }
.btn-lg { padding: .65rem 1.4rem; font-size: 14px; }

.btn-psira {
    background: var(--br-primary);
    color: #fff;
    border: 1px solid var(--br-primary);
}

.btn-psira:hover, .btn-psira:focus {
    background: var(--br-primary-dark);
    border-color: var(--br-primary-dark);
    color: #fff;
}

.btn-psira-gold {
    background: var(--br-teal);
    color: var(--br-primary);
    border: 1px solid var(--br-teal);
    font-weight: 600;
}

.btn-psira-gold:hover {
    background: #c19e2e;
    border-color: #c19e2e;
    color: var(--br-primary);
}

/* =================== Color utilities (remapped) =================== */
.text-psira { color: var(--br-primary) !important; }
.text-gold { color: var(--br-teal) !important; }
.bg-psira { background-color: var(--br-primary) !important; }
.bg-burgundy { background-color: var(--br-pink) !important; }
.border-gold { border-color: var(--br-teal) !important; }

/* =================== Cards — flat Bracket style =================== */
.card {
    border: 1px solid var(--br-border);
    border-radius: 3px;
    box-shadow: none;
}

.summary-card {
    border: 1px solid var(--br-border);
    border-radius: 3px;
    border-top: 0;
    box-shadow: 0 1px 1px rgba(28,39,60,.04);
    transition: box-shadow .2s;
}

.summary-card:hover {
    box-shadow: 0 2px 8px rgba(28,39,60,.1);
}

.card-header {
    background: #fff;
    border-bottom: 1px solid var(--br-border);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 14px 20px;
    border-radius: 3px 3px 0 0 !important;
}

/* Colored headers become Bracket gradient panels */
.card-header.bg-psira {
    background: linear-gradient(135deg, var(--br-primary) 0%, var(--br-indigo) 100%) !important;
    color: #fff;
    border-bottom: 0;
}

.card-header.bg-burgundy {
    background: linear-gradient(135deg, var(--br-pink) 0%, var(--br-purple) 100%) !important;
    color: #fff;
    border-bottom: 0;
}

.summary-card .card-icon {
    font-size: 34px;
    color: var(--br-primary);
    opacity: .85;
}

/* Dashboard stat cards */
.summary-card.text-center .card-body {
    padding: 22px 15px;
}

.summary-card.text-center h3 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    color: var(--br-heading);
    margin-top: 6px;
}

.summary-card.text-center .text-muted {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.summary-card.bg-psira {
    background: linear-gradient(135deg, var(--br-primary) 0%, var(--br-indigo) 100%) !important;
    border: 0;
    color: #fff;
}

.summary-card.bg-psira h5 { color: #fff; }
.summary-card.bg-psira .text-gold { color: rgba(255,255,255,.85) !important; }

/* =================== Hero banner =================== */
.hero-banner {
    background: linear-gradient(135deg, var(--br-slate) 0%, var(--br-primary) 65%, var(--br-teal) 130%);
    color: #fff;
    padding: 60px 40px;
    border-radius: 3px;
    box-shadow: 0 2px 10px rgba(28,39,60,.15);
}

.hero-banner h1 {
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
}

.hero-banner .lead {
    color: rgba(255,255,255,.75);
    font-weight: 300;
}

.hero-banner .bi { color: rgba(255,255,255,.25) !important; }

/* =================== News ticker =================== */
.news-ticker {
    background: linear-gradient(90deg, var(--br-pink) 0%, var(--br-purple) 100%);
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 2px;
    font-size: 13px;
}

.news-ticker .ticker-track {
    display: inline-block;
    animation: ticker 30s linear infinite;
    padding-left: 100%;
}

@keyframes ticker {
    to { transform: translateX(-100%); }
}

/* =================== Badges =================== */
.badge {
    border-radius: 2px;
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: .35em .6em;
}

.badge.bg-burgundy { background: var(--br-pink) !important; }
.badge.bg-success { background: #1e7e34 !important; }

/* =================== Forms — Bracket flat inputs =================== */
.form-control, .form-select {
    border-radius: 2px;
    border-color: var(--br-border);
    font-size: 14px;
    color: var(--br-text);
}

.form-control:focus, .form-select:focus {
    border-color: var(--br-primary);
    box-shadow: 0 0 0 .15rem rgba(0,40,85,.15);
}

.form-floating > label {
    color: var(--br-text-muted);
    font-size: 13px;
}

.input-group-text {
    border-radius: 2px;
    background: #fff;
    border-color: var(--br-border);
    color: var(--br-text-muted);
}

/* =================== Tables / DataTables =================== */
.table {
    font-size: 13.5px;
    color: var(--br-text);
}

.table thead th, .table-light th {
    background: #f8f9fc !important;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .8px;
    color: var(--br-text-muted);
    border-bottom: 1px solid var(--br-border);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #fafbfe;
    --bs-table-accent-bg: transparent;
}

.table-hover > tbody > tr:hover > * {
    background-color: #f0f3f7;
    --bs-table-accent-bg: transparent;
}

div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
    border: 1px solid var(--br-border);
    border-radius: 2px;
}

.page-link {
    color: var(--br-primary);
    border-radius: 0 !important;
    font-size: 13px;
}

.page-item.active .page-link {
    background: var(--br-primary);
    border-color: var(--br-primary);
}

/* =================== Nav pills & tabs =================== */
.nav-pills .nav-link {
    border-radius: 2px;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 500;
    color: var(--br-text-muted);
}

.nav-pills .nav-link.active,
.nav-pills .nav-link.active.bg-psira {
    background: var(--br-primary) !important;
    color: #fff;
}

.nav-pills .nav-link.text-psira { color: var(--br-text-muted) !important; }
.nav-pills .nav-link.text-psira:hover { color: var(--br-primary) !important; }

.nav-tabs {
    border-bottom: 2px solid var(--br-border);
}

.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: 0;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 500;
    color: var(--br-text-muted);
    background: transparent;
}

.nav-tabs .nav-link:hover { color: var(--br-primary); }

.nav-tabs .nav-link.active {
    color: var(--br-primary);
    border-bottom-color: var(--br-primary);
    background: transparent;
}

/* =================== Modals =================== */
.modal-content {
    border-radius: 3px;
    border: 0;
    box-shadow: 0 5px 25px rgba(28,39,60,.25);
}

.modal-header {
    border-radius: 3px 3px 0 0;
    padding: 15px 20px;
}

.modal-header.bg-psira {
    background: linear-gradient(135deg, var(--br-primary) 0%, #0a4f96 100%) !important;
}

.modal-title {
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: inherit;
}

/* =================== Dropdowns =================== */
.dropdown-menu {
    border-radius: 2px;
    border: 1px solid var(--br-border);
    box-shadow: 0 2px 10px rgba(28,39,60,.12);
    font-size: 13px;
}

.dropdown-item:hover {
    background: #f0f3f7;
    color: var(--br-primary);
}

/* =================== Breadcrumb =================== */
.breadcrumb {
    font-size: 13px;
}

/* =================== Alerts =================== */
.alert {
    border-radius: 2px;
    font-size: 13.5px;
    border-width: 0;
    border-left: 3px solid;
}

.alert-info {
    background: #e8eef5;
    border-left-color: var(--br-primary);
    color: #002855;
}

/* =================== Footer =================== */
.portal-footer {
    background: #fff;
    color: var(--br-text-muted);
    border-top: 1px solid var(--br-border);
    font-size: 12.5px;
    flex-shrink: 0;
}

.portal-footer .small { letter-spacing: .5px; }

/* =================== Page headings =================== */
main > h2, main .d-flex > h2 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0;
}

main > h2 .bi, main .d-flex > h2 .bi { color: var(--br-primary); }

/* =================== Responsive: off-canvas =================== */
@media (max-width: 767.98px) {
    #sidebar-wrapper {
        position: fixed;
        z-index: 1040;
        height: 100%;
        margin-left: calc(-1 * var(--sidebar-width));
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: 0;
        box-shadow: 0 0 0 100vmax rgba(20,29,47,.6);
    }

    #page-content-wrapper > main {
        padding: 15px !important;
    }
}

/* =================== Scrollbar (sidebar) =================== */
#sidebar-wrapper::-webkit-scrollbar { width: 5px; }
#sidebar-wrapper::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); }