/* ============================================================
   WBS App Stylesheet
   All layout colors reference CSS custom properties that are
   injected by header.php from config.php THEME constant.
   To change the color scheme, edit config.php — not this file.
   ============================================================ */

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--wbs-body-bg);
    color: var(--wbs-text);
    font-size: .9rem;
    transition: background-color .2s ease, color .2s ease;
}

/* ── Top Navigation Bar ───────────────────────────────────── */
.wbs-topnav {
    background:    var(--wbs-navbar-bg);
    border-bottom: 1px solid var(--wbs-navbar-border);
    color:         var(--wbs-navbar-text);
    height:        60px;
    position:      fixed;
    top: 0; left: 0; right: 0;
    z-index:       1040;
    box-shadow:    0 1px 6px rgba(0,0,0,.08);
    transition:    background-color .2s ease, border-color .2s ease;
}

.wbs-topnav-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          100%;
    padding:         0 1rem;
    gap:             .5rem;
}

/* Logo */
.wbs-brand { display: flex; align-items: center; text-decoration: none; }
.wbs-logo  { height: 38px; max-width: 180px; object-fit: contain; }
.wbs-brand-text {
    font-size:    1.4rem;
    font-weight:  900;
    font-style:   italic;
    letter-spacing: .1em;
    color:        var(--wbs-primary);
}

/* Navbar buttons */
.sidebar-toggle-btn,
.wbs-theme-toggle,
.wbs-icon-btn {
    background:   transparent;
    border:       none;
    color:        var(--wbs-navbar-text);
    width:        38px;
    height:       38px;
    border-radius: .5rem;
    display:      flex;
    align-items:  center;
    justify-content: center;
    cursor:       pointer;
    transition:   background .15s, color .15s;
    padding:      0;
}
.sidebar-toggle-btn:hover,
.wbs-theme-toggle:hover,
.wbs-icon-btn:hover {
    background: rgba(0,0,0,.07);
    color:      var(--wbs-primary);
}
[data-theme="dark"] .sidebar-toggle-btn:hover,
[data-theme="dark"] .wbs-theme-toggle:hover,
[data-theme="dark"] .wbs-icon-btn:hover {
    background: rgba(255,255,255,.1);
}

/* Notification dot */
.wbs-badge-dot {
    position:      absolute;
    top:           6px;
    right:         6px;
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--wbs-danger);
    border:        2px solid var(--wbs-navbar-bg);
}

/* User menu */
.wbs-user-menu {
    color:       var(--wbs-navbar-text);
    padding:     .25rem .5rem;
    border-radius: .5rem;
    transition:  background .15s;
}
.wbs-user-menu:hover { background: rgba(0,0,0,.05); }
[data-theme="dark"] .wbs-user-menu:hover { background: rgba(255,255,255,.08); }

.wbs-user-name { font-size: .8rem; font-weight: 600; color: var(--wbs-text); }
.wbs-user-role { font-size: .7rem; color: var(--wbs-text-muted); }
.wbs-caret     { font-size: .65rem; color: var(--wbs-text-muted); }

/* Dropdown */
.dropdown-menu {
    border:       1px solid var(--wbs-border);
    background:   var(--wbs-card-bg);
    border-radius: .75rem;
    min-width:    210px;
    padding:      .5rem 0;
}
.dropdown-item {
    color:       var(--wbs-text);
    font-size:   .85rem;
    padding:     .5rem 1rem;
    transition:  background .12s;
}
.dropdown-item:hover {
    background: rgba(0,0,0,.05);
    color:      var(--wbs-text);
}
[data-theme="dark"] .dropdown-item:hover { background: rgba(255,255,255,.07); }
.dropdown-divider { border-color: var(--wbs-border); margin: .35rem 0; }
.dropdown-header  { padding: .5rem 1rem; font-size: .8rem; }

/* ── Avatar ───────────────────────────────────────────────── */
.wbs-avatar {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      var(--wbs-primary);
    color:           #fff;
    font-size:       .75rem;
    font-weight:     700;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    user-select:     none;
}
.wbs-avatar-sm { width: 30px; height: 30px; font-size: .65rem; }

/* ── Page Wrapper ─────────────────────────────────────────── */
.wbs-wrapper {
    display:        flex;
    padding-top:    60px;      /* navbar height */
    min-height:     100vh;
}

/* ── Sidebar ──────────────────────────────────────────────── */
:root { --sidebar-width: 265px; }

.wbs-sidebar {
    width:          var(--sidebar-width);
    background:     var(--wbs-sidebar-bg);
    position:       fixed;
    top:            60px;
    left:           0;
    bottom:         0;
    z-index:        1030;
    overflow:       hidden;
    transition:     width .25s ease, transform .25s ease, background-color .2s ease;
}

.sidebar-inner {
    width:          var(--sidebar-width);
    height:         100%;
    display:        flex;
    flex-direction: column;
    overflow-y:     auto;
    overflow-x:     hidden;
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}
.sidebar-inner::-webkit-scrollbar          { width: 4px; }
.sidebar-inner::-webkit-scrollbar-track    { background: transparent; }
.sidebar-inner::-webkit-scrollbar-thumb    { background: #334155; border-radius: 2px; }

/* Nav */
.sidebar-nav {
    list-style: none;
    padding:    .75rem 0 1rem;
    margin:     0;
    flex:       1;
}

.sidebar-nav .nav-section {
    padding:        .875rem .875rem .2rem;
    font-size:      .65rem;
    font-weight:    700;
    letter-spacing: .1em;
    color:          #475569;
    text-transform: uppercase;
    user-select:    none;
}

.sidebar-nav .nav-item > a {
    display:        flex;
    align-items:    center;
    padding:        .55rem .875rem;
    color:          var(--wbs-sidebar-text);
    text-decoration: none;
    font-size:      .835rem;
    font-weight:    500;
    gap:            .65rem;
    white-space:    nowrap;
    border-radius:  0;
    transition:     background .15s, color .15s;
    border-left:    3px solid transparent;
}
.sidebar-nav .nav-item > a:hover {
    background:  var(--wbs-sidebar-hover);
    color:       var(--wbs-sidebar-text-active);
}
.sidebar-nav .nav-item.active > a {
    background:   var(--wbs-sidebar-active);
    color:        #fff;
    border-left-color: rgba(255,255,255,.4);
}
.nav-icon  { width: 18px; text-align: center; font-size: .85rem; flex-shrink: 0; }
.nav-label { flex: 1; }
.nav-badge {
    background:   rgba(255,255,255,.15);
    color:        rgba(255,255,255,.6);
    font-size:    .6rem;
    font-weight:  700;
    padding:      .1em .4em;
    border-radius: .25rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.sidebar-nav .nav-item.active .nav-badge {
    background: rgba(255,255,255,.25);
    color:      #fff;
}

/* ── Department collapse toggles ─────────────────────────── */
.sidebar-nav .nav-dept-toggle {
    /* Reset all button defaults */
    -webkit-appearance: none;
    appearance:     none;
    border:         none;
    outline:        none;
    box-shadow:     none;
    /* Match .sidebar-nav .nav-item > a exactly */
    display:        flex;
    align-items:    center;
    padding:        .55rem .875rem;
    color:          var(--wbs-sidebar-text);
    font-size:      .835rem;
    font-weight:    500;
    gap:            .65rem;
    white-space:    nowrap;
    border-left:    3px solid transparent;
    transition:     background .15s, color .15s;
    /* Button-specific */
    width:          100%;
    background:     transparent;
    cursor:         pointer;
    text-align:     left;
}
.sidebar-nav .nav-dept-toggle:hover {
    background: var(--wbs-sidebar-hover);
    color:      var(--wbs-sidebar-text-active);
}
.sidebar-nav .nav-dept-toggle:focus { outline: none; box-shadow: none; }
.dept-chevron {
    font-size:   .6rem;
    opacity:     .45;
    transition:  transform .2s ease;
    flex-shrink: 0;
}
.sidebar-nav .nav-dept-toggle[aria-expanded="true"] .dept-chevron {
    transform: rotate(180deg);
    opacity:   .75;
}
.sidebar-subnav {
    list-style: none;
    padding:    0;
    margin:     0;
}
.dept-coming-soon {
    display:     flex;
    align-items: center;
    gap:         .4rem;
    padding:     .4rem .875rem .4rem 2.75rem;
    font-size:   .8rem;
    color:       #64748b;
    font-style:  italic;
}
/* Sub-level items inside a dept collapse (indented one level) */
.sidebar-subnav .nav-dept-toggle { padding-left: 1.875rem; }
.sidebar-subnav .nav-item > a    { padding-left: 1.875rem; font-size: .81rem; }
/* Third level (links inside a category inside dept) */
.sidebar-subnav .sidebar-subnav .nav-item > a    { padding-left: 2.75rem; font-size: .8rem; }
.sidebar-subnav .sidebar-subnav .dept-coming-soon { padding-left: 3.5rem; }

/* Sidebar footer */
.sidebar-footer {
    display:        flex;
    align-items:    center;
    gap:            .65rem;
    padding:        .875rem;
    border-top:     1px solid rgba(255,255,255,.07);
    background:     var(--wbs-sidebar-bg);
    transition:     background-color .2s ease;
}
.sf-name { font-size: .78rem; font-weight: 600; color: #cbd5e1; }
.sf-role { font-size: .68rem; color: #64748b; }

/* Collapsed sidebar (desktop toggle) */
.wbs-sidebar.collapsed { width: 0; }

/* ── Main Content ─────────────────────────────────────────── */
.wbs-main {
    flex:           1;
    margin-left:    var(--sidebar-width);
    min-height:     calc(100vh - 60px);
    padding:        1.5rem;
    transition:     margin-left .25s ease;
    background:     var(--wbs-body-bg);
}
.wbs-sidebar.collapsed ~ .wbs-main { margin-left: 0; }

/* ── Mobile Overlay ───────────────────────────────────────── */
.sidebar-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.55);
    z-index:    1029;
    backdrop-filter: blur(2px);
}
.sidebar-overlay.active { display: block; }

/* ── Page Header ──────────────────────────────────────────── */
.page-header {
    margin-bottom: 1.5rem;
}
.page-header h1 {
    font-size:    1.4rem;
    font-weight:  700;
    color:        var(--wbs-text);
    margin-bottom: .2rem;
}
.page-header .breadcrumb { font-size: .78rem; margin: 0; }
.breadcrumb-item,
.breadcrumb-item a { color: var(--wbs-text-muted); text-decoration: none; }
.breadcrumb-item.active { color: var(--wbs-text-muted); }

/* ── Stat Cards ───────────────────────────────────────────── */
.stat-card {
    background:    var(--wbs-card-bg);
    border-radius: .875rem;
    box-shadow:    0 1px 4px rgba(0,0,0,.07);
    padding:       1.25rem;
    border-left:   4px solid;
    display:       flex;
    align-items:   center;
    gap:           1rem;
    transition:    transform .18s ease, box-shadow .18s ease, background-color .2s ease;
    height:        100%;
}
.stat-card:hover {
    transform:  translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.1);
}

.stat-card.clr-primary { border-color: var(--wbs-primary); }
.stat-card.clr-success  { border-color: var(--wbs-success); }
.stat-card.clr-warning  { border-color: var(--wbs-warning); }
.stat-card.clr-info     { border-color: var(--wbs-info); }
.stat-card.clr-danger   { border-color: var(--wbs-danger); }

.stat-icon {
    width:          52px;
    height:         52px;
    border-radius:  .75rem;
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      1.3rem;
    flex-shrink:    0;
}
.stat-card.clr-primary .stat-icon { background: rgba(200,32,46,.12);  color: var(--wbs-primary); }
.stat-card.clr-success  .stat-icon { background: rgba(16,185,129,.12); color: var(--wbs-success); }
.stat-card.clr-warning  .stat-icon { background: rgba(245,158,11,.12); color: var(--wbs-warning); }
.stat-card.clr-info     .stat-icon { background: rgba(14,165,233,.12); color: var(--wbs-info); }
.stat-card.clr-danger   .stat-icon { background: rgba(239,68,68,.12);  color: var(--wbs-danger); }

.stat-label { font-size: .75rem; color: var(--wbs-text-muted); font-weight: 500; margin-bottom: .15rem; }
.stat-value { font-size: 1.7rem; font-weight: 700; color: var(--wbs-text); line-height: 1; }
.stat-change { font-size: .73rem; margin-top: .2rem; color: var(--wbs-text-muted); }

/* ── Content Cards ────────────────────────────────────────── */
.wbs-card {
    background:    var(--wbs-card-bg);
    border-radius: .875rem;
    box-shadow:    0 1px 4px rgba(0,0,0,.07);
    border:        1px solid var(--wbs-border);
    height:        100%;
    transition:    background-color .2s ease, border-color .2s ease;
}
.wbs-card .card-header {
    background:    transparent;
    border-bottom: 1px solid var(--wbs-border);
    padding:       .875rem 1.1rem;
    border-radius: .875rem .875rem 0 0;
}
.wbs-card .card-header h6 { color: var(--wbs-text); font-size: .85rem; }
.wbs-card .card-body { padding: 1.1rem; }

/* ── Tables ───────────────────────────────────────────────── */
.wbs-table { margin: 0; }
.wbs-table thead th {
    background:     var(--wbs-body-bg);
    border-bottom:  2px solid var(--wbs-border);
    font-size:      .72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          var(--wbs-text-muted);
    padding:        .65rem 1rem;
    white-space:    nowrap;
}
.wbs-table tbody td {
    padding:        .65rem 1rem;
    border-color:   var(--wbs-border);
    vertical-align: middle;
    font-size:      .85rem;
    color:          var(--wbs-text);
}
.wbs-table tbody tr { transition: background .1s; }
.wbs-table tbody tr:hover { background: rgba(0,0,0,.025); }
[data-theme="dark"] .wbs-table tbody tr:hover { background: rgba(255,255,255,.04); }

/* ── Badges ───────────────────────────────────────────────── */
.badge.bg-purple { background-color: #7c3aed !important; }
.badge.bg-indigo { background-color: #4f46e5 !important; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary {
    background:   var(--wbs-primary);
    border-color: var(--wbs-primary);
    font-weight:  600;
}
.btn-primary:hover {
    background:   var(--wbs-primary-hover);
    border-color: var(--wbs-primary-hover);
}

/* ── Login Page ───────────────────────────────────────────── */
.login-page {
    min-height: 100vh;
    display:    flex;
}

/* Left branding panel */
.login-branding {
    flex:             1;
    background:       linear-gradient(145deg, #141c2b 0%, #1e2535 40%, var(--wbs-primary) 100%);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          3rem 2rem;
    position:         relative;
    overflow:         hidden;
}
.login-branding::before {
    content:  '';
    position: absolute;
    inset:    0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}

.login-branding-inner {
    position:   relative;
    z-index:    1;
    max-width:  420px;
    color:      #fff;
}
.login-branding-logo {
    height:        80px;
    max-width:     260px;
    object-fit:    contain;
    margin-bottom: 1.5rem;
    filter:        brightness(0) invert(1);  /* make logo white on dark bg */
}
.login-branding-tagline {
    font-size:    1.1rem;
    opacity:      .75;
    font-weight:  300;
    margin-bottom: 2.5rem;
}
.login-features { list-style: none; padding: 0; margin: 0; }
.login-features li {
    display:       flex;
    align-items:   center;
    gap:           .875rem;
    padding:       .6rem 0;
    font-size:     .9rem;
    opacity:       .85;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.login-features li:last-child { border-bottom: none; }
.login-features li i {
    width:           32px;
    height:          32px;
    background:      rgba(255,255,255,.12);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    font-size:       .8rem;
}

/* Right form panel */
.login-form-panel {
    width:           480px;
    background:      #fff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         3rem 2.5rem;
}
.login-form-inner { width: 100%; max-width: 380px; }

.login-form-header {
    text-align:    center;
    margin-bottom: 2rem;
}
.login-form-logo {
    height:        56px;
    max-width:     200px;
    object-fit:    contain;
    margin-bottom: 1.25rem;
}
.login-form-logo-fallback {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           56px;
    height:          56px;
    background:      var(--wbs-primary);
    border-radius:   14px;
    color:           #fff;
    font-size:       1.4rem;
    font-weight:     900;
    font-style:      italic;
    letter-spacing:  .05em;
    margin-bottom:   1.25rem;
    box-shadow:      0 8px 24px rgba(200,32,46,.3);
}
.login-form-header h1 {
    font-size:   1.5rem;
    font-weight: 700;
    color:       #0f172a;
    margin-bottom: .3rem;
}
.login-form-header p { color: #64748b; font-size: .875rem; margin: 0; }

/* Login form controls */
.form-floating .form-control:focus {
    border-color: var(--wbs-primary);
    box-shadow:   0 0 0 .2rem rgba(200,32,46,.18);
}

.btn-login {
    width:         100%;
    padding:       .8rem;
    background:    var(--wbs-primary);
    border:        none;
    color:         #fff;
    font-size:     .95rem;
    font-weight:   600;
    border-radius: .625rem;
    transition:    background .2s, transform .15s, box-shadow .2s;
}
.btn-login:hover {
    background:  var(--wbs-primary-hover);
    transform:   translateY(-1px);
    box-shadow:  0 6px 16px rgba(200,32,46,.35);
    color:       #fff;
}
.btn-login:active { transform: none; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991.98px) {
    /* Hide branding on small screens */
    .login-branding { display: none; }
    .login-form-panel { width: 100%; }

    /* Sidebar: slide off-screen on mobile */
    .wbs-sidebar {
        transform: translateX(-100%);
        width:     var(--sidebar-width) !important;
    }
    .wbs-sidebar.mobile-open { transform: translateX(0); }
    .wbs-main { margin-left: 0 !important; }
}

@media (max-width: 767.98px) {
    .wbs-main { padding: 1rem; }
    .stat-value { font-size: 1.4rem; }
}

/* ── Empty State ──────────────────────────────────────────── */
.empty-state {
    padding:    3rem 1rem;
    text-align: center;
    color:      var(--wbs-text-muted);
}
.empty-state-icon {
    font-size:     3rem;
    opacity:       .2;
    margin-bottom: 1rem;
    display:       block;
}

/* ── Utilities ────────────────────────────────────────────── */
.text-primary-brand { color: var(--wbs-primary) !important; }
.bg-primary-brand   { background: var(--wbs-primary) !important; }
.border-primary-brand { border-color: var(--wbs-primary) !important; }

/* ── Dark Mode — comprehensive Bootstrap + custom overrides ──── */

/* 1. Override Bootstrap's root CSS variables so ALL components inherit dark colors */
[data-theme="dark"] {
    color-scheme: dark;
    --bs-body-bg:              var(--wbs-body-bg);
    --bs-body-color:           var(--wbs-text);
    --bs-border-color:         var(--wbs-border);
    --bs-card-bg:              var(--wbs-card-bg);
    --bs-card-border-color:    var(--wbs-border);
    --bs-dropdown-bg:          var(--wbs-card-bg);
    --bs-dropdown-border-color:var(--wbs-border);
    --bs-dropdown-color:       var(--wbs-text);
    --bs-dropdown-link-color:  var(--wbs-text);
    --bs-dropdown-link-hover-bg:rgba(255,255,255,.07);
    --bs-dropdown-link-hover-color: var(--wbs-text);
    --bs-pagination-bg:        var(--wbs-card-bg);
    --bs-pagination-border-color: var(--wbs-border);
    --bs-pagination-color:     var(--wbs-text-muted);
    --bs-pagination-hover-bg:  rgba(255,255,255,.07);
    --bs-pagination-hover-color: var(--wbs-text);
    --bs-pagination-active-bg: var(--wbs-primary);
    --bs-pagination-active-border-color: var(--wbs-primary);
    --bs-pagination-disabled-bg: var(--wbs-card-bg);
    --bs-pagination-disabled-color: #3d5a80;
    --bs-input-bg:             #1e3252;
    --bs-secondary-bg:         #162035;
}

/* 2. THE BIG TABLE FIX — Bootstrap uses a box-shadow trick via --bs-table-accent-bg.
      Setting it transparent + overriding cell BG kills the white overlay. */
[data-theme="dark"] .table {
    --bs-table-bg:          var(--wbs-card-bg);
    --bs-table-accent-bg:   transparent;
    --bs-table-color:       var(--wbs-text);
    --bs-table-border-color:var(--wbs-border);
    --bs-table-striped-bg:  rgba(255,255,255,.03);
    --bs-table-hover-bg:    rgba(255,255,255,.05);
    color: var(--wbs-text);
}
[data-theme="dark"] .table > :not(caption) > * > * {
    color:            var(--wbs-text);
    background-color: var(--wbs-card-bg);
    border-bottom-color: var(--wbs-border);
    /* Kill the box-shadow layer Bootstrap uses for striping/hover */
    box-shadow: none !important;
}
[data-theme="dark"] .wbs-table thead th {
    background-color: var(--wbs-body-bg);
    color:            var(--wbs-text-muted);
    border-bottom-color: var(--wbs-border);
}
[data-theme="dark"] .wbs-table tbody tr:hover > * {
    background-color: rgba(255,255,255,.045) !important;
}

/* 3. Logo — boost visibility on the dark navbar */
[data-theme="dark"] .wbs-logo {
    filter: brightness(1.25) drop-shadow(0 1px 4px rgba(0,0,0,.6));
}

/* 4. Form controls */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text {
    background-color: #1e3252;
    border-color:     var(--wbs-border);
    color:            var(--wbs-text);
}
[data-theme="dark"] .form-control::placeholder { color: #4a6fa0; }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: #1e3252;
    border-color:     var(--wbs-primary);
    color:            var(--wbs-text);
    box-shadow:       0 0 0 .2rem rgba(200,32,46,.2);
}
[data-theme="dark"] .form-floating > label { color: var(--wbs-text-muted); }
[data-theme="dark"] .form-check-input {
    background-color: #1e3252;
    border-color:     var(--wbs-border);
}

/* 5. Cards & modal */
[data-theme="dark"] .modal-content  { background: var(--wbs-card-bg); color: var(--wbs-text); border-color: var(--wbs-border); }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer   { border-color: var(--wbs-border); }

/* 6. Alerts */
[data-theme="dark"] .alert-warning  { background: rgba(245,158,11,.15); border-color: rgba(245,158,11,.35); color: #fcd34d; }
[data-theme="dark"] .alert-danger   { background: rgba(239,68,68,.15);  border-color: rgba(239,68,68,.35);  color: #fca5a5; }
[data-theme="dark"] .alert-success  { background: rgba(16,185,129,.15); border-color: rgba(16,185,129,.35); color: #6ee7b7; }
[data-theme="dark"] .alert-info     { background: rgba(14,165,233,.15); border-color: rgba(14,165,233,.35); color: #7dd3fc; }

/* 7. Buttons */
[data-theme="dark"] .btn-outline-primary   { border-color: var(--wbs-primary); color: var(--wbs-primary); }
[data-theme="dark"] .btn-outline-primary:hover { background: var(--wbs-primary); color: #fff; }
[data-theme="dark"] .btn-outline-secondary { border-color: var(--wbs-border); color: var(--wbs-text-muted); }
[data-theme="dark"] .btn-outline-secondary:hover { background: rgba(255,255,255,.07); color: var(--wbs-text); }
[data-theme="dark"] .btn-outline-success   { border-color: var(--wbs-success); color: var(--wbs-success); }
[data-theme="dark"] .btn-outline-info      { border-color: var(--wbs-info); color: var(--wbs-info); }

/* 8. Pagination */
[data-theme="dark"] .page-link {
    background-color: var(--wbs-card-bg);
    border-color:     var(--wbs-border);
    color:            var(--wbs-text-muted);
}
[data-theme="dark"] .page-link:hover       { background-color: rgba(255,255,255,.07); color: var(--wbs-text); }
[data-theme="dark"] .page-item.active .page-link { background-color: var(--wbs-primary); border-color: var(--wbs-primary); color: #fff; }
[data-theme="dark"] .page-item.disabled .page-link { background-color: var(--wbs-card-bg); color: #3d5a80; }

/* 9. Badges */
[data-theme="dark"] .badge.bg-light { background-color: #243350 !important; color: var(--wbs-text) !important; }

/* 10. Misc text helpers */
[data-theme="dark"] .text-muted { color: var(--wbs-text-muted) !important; }
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top { border-color: var(--wbs-border) !important; }