/* ============================================================
   User Management — 101st Airborne Division Theme
   Mirrors the Authentik customcss.css palette exactly
   ============================================================ */


/* 1. DESIGN TOKENS
   ============================================================ */
:root {
    --ab101-bg-950:      #0b0c0d;
    --ab101-bg-900:      #111214;
    --ab101-bg-850:      #17191c;
    --ab101-bg-800:      #1d2024;
    --ab101-bg-750:      #25282d;
    --ab101-bg-700:      #2d3137;
    --ab101-gray-600:    #555a61;
    --ab101-gray-500:    #6a7078;
    --ab101-khaki-500:   #94885f;
    --ab101-khaki-400:   #ab9e71;
    --ab101-khaki-300:   #c2b68b;
    --ab101-text-100:    #f2f2f0;
    --ab101-text-200:    #d8d9d7;
    --ab101-text-300:    #b0b3b6;
    --ab101-danger:      #c45f55;
    --ab101-success:     #78936a;
    --ab101-border:      rgba(171, 158, 113, 0.34);
    --ab101-border-soft: rgba(255, 255, 255, 0.10);
    --ab101-shadow:      0 22px 70px rgba(0, 0, 0, 0.58);
    --ab101-radius:      2px;
}


/* 2. BOOTSTRAP 5.3 DARK-MODE VARIABLE OVERRIDES
   ============================================================ */
[data-bs-theme="dark"] {
    --bs-body-bg:            var(--ab101-bg-900);
    --bs-body-secondary-bg:  var(--ab101-bg-850);
    --bs-secondary-bg:       var(--ab101-bg-800);
    --bs-tertiary-bg:        var(--ab101-bg-750);
    --bs-body-color:         var(--ab101-text-100);
    --bs-secondary-color:    var(--ab101-text-300);
    --bs-tertiary-color:     var(--ab101-gray-500);
    --bs-emphasis-color:     var(--ab101-text-100);
    --bs-border-color:             var(--ab101-border);
    --bs-border-color-translucent: var(--ab101-border-soft);
    --bs-link-color:       var(--ab101-khaki-400);
    --bs-link-hover-color: var(--ab101-khaki-300);
    --bs-link-color-rgb:   171, 158, 113;
    --bs-primary:       var(--ab101-khaki-500);
    --bs-primary-rgb:   148, 136, 95;
    --bs-success:       var(--ab101-success);
    --bs-success-rgb:   120, 147, 106;
    --bs-danger:        var(--ab101-danger);
    --bs-danger-rgb:    196, 95, 85;
    --bs-warning:       var(--ab101-khaki-400);
    --bs-warning-rgb:   171, 158, 113;
    --bs-info:          var(--ab101-khaki-300);
    --bs-info-rgb:      194, 182, 139;
    --bs-border-radius:      var(--ab101-radius);
    --bs-border-radius-sm:   var(--ab101-radius);
    --bs-border-radius-lg:   4px;
    --bs-border-radius-xl:   4px;
    --bs-border-radius-xxl:  6px;
    --bs-border-radius-pill: var(--ab101-radius);
}


/* 3. GLOBAL BASE
   ============================================================ */
html {
    background-color: var(--ab101-bg-950);
}

body {
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    background-color: var(--ab101-bg-900);
    color: var(--ab101-text-100);
}


/* 4. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
    letter-spacing: 0.03em;
}

a { color: var(--ab101-khaki-400); }
a:hover { color: var(--ab101-khaki-300); }

code {
    background: var(--ab101-bg-800);
    padding: 2px 6px;
    border-radius: var(--ab101-radius);
    color: var(--ab101-khaki-300);
    border: 1px solid var(--ab101-border);
}

hr {
    border-color: var(--ab101-border);
    opacity: 1;
}


/* 5. NAVBAR
   ============================================================ */
.navbar {
    background-color: var(--ab101-bg-950) !important;
    border-bottom: 1px solid var(--ab101-border);
    box-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

.navbar-brand {
    color: var(--ab101-khaki-300) !important;
    font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 1.1rem;
    font-weight: 700;
}

.navbar-brand:hover { color: var(--ab101-text-100) !important; }

.nav-link {
    color: var(--ab101-text-200) !important;
    transition: color .15s;
}

.nav-link:hover,
.nav-link.active { color: var(--ab101-khaki-300) !important; }

.navbar-toggler { border-color: var(--ab101-border); }
.navbar-toggler-icon { filter: invert(0.8); }


/* 6. CARDS
   ============================================================ */
.card {
    background-color: var(--ab101-bg-850);
    border: 1px solid var(--ab101-border);
    border-radius: var(--ab101-radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .35);
}

.card-header {
    background-color: var(--ab101-bg-800);
    border-bottom: 1px solid var(--ab101-border);
    color: var(--ab101-text-200);
    font-size: .875rem;
}

.card-footer {
    background-color: var(--ab101-bg-800);
    border-top: 1px solid var(--ab101-border);
}

.card.border-primary { border-color: var(--ab101-khaki-500) !important; }
.card.border-success  { border-color: var(--ab101-success)   !important; }
.card.border-warning  { border-color: var(--ab101-khaki-400) !important; }
.card.border-info     { border-color: var(--ab101-khaki-300) !important; }
.card.border-dark     { border-color: var(--ab101-border)    !important; }


/* 7. BUTTONS
   ============================================================ */
.btn {
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: .82rem;
    font-weight: 500;
    padding: .375rem .85rem;
}

.btn-sm {
    font-size: .78rem;
    padding: .2rem .6rem;
}

.btn-primary {
    --bs-btn-bg:                  var(--ab101-khaki-500);
    --bs-btn-border-color:        var(--ab101-khaki-500);
    --bs-btn-hover-bg:            var(--ab101-khaki-400);
    --bs-btn-hover-border-color:  var(--ab101-khaki-400);
    --bs-btn-active-bg:           var(--ab101-khaki-300);
    --bs-btn-active-border-color: var(--ab101-khaki-300);
    --bs-btn-focus-shadow-rgb:    148, 136, 95;
    --bs-btn-color:               #0b0c0d;
    --bs-btn-hover-color:         #0b0c0d;
    --bs-btn-active-color:        #0b0c0d;
}

.btn-outline-primary {
    --bs-btn-color:               var(--ab101-khaki-400);
    --bs-btn-border-color:        var(--ab101-khaki-500);
    --bs-btn-hover-bg:            var(--ab101-khaki-500);
    --bs-btn-hover-border-color:  var(--ab101-khaki-500);
    --bs-btn-hover-color:         #0b0c0d;
    --bs-btn-active-bg:           var(--ab101-khaki-400);
    --bs-btn-active-color:        #0b0c0d;
}

.btn-success {
    --bs-btn-bg:                  var(--ab101-success);
    --bs-btn-border-color:        var(--ab101-success);
    --bs-btn-hover-bg:            #8aaa7a;
    --bs-btn-hover-border-color:  #8aaa7a;
    --bs-btn-color:               #f2f2f0;
    --bs-btn-hover-color:         #f2f2f0;
}

.btn-outline-success {
    --bs-btn-color:               var(--ab101-success);
    --bs-btn-border-color:        var(--ab101-success);
    --bs-btn-hover-bg:            var(--ab101-success);
    --bs-btn-hover-color:         #f2f2f0;
}

.btn-danger {
    --bs-btn-bg:                  var(--ab101-danger);
    --bs-btn-border-color:        var(--ab101-danger);
    --bs-btn-hover-bg:            #d46e64;
    --bs-btn-hover-border-color:  #d46e64;
    --bs-btn-color:               #f2f2f0;
    --bs-btn-hover-color:         #f2f2f0;
}

.btn-outline-danger {
    --bs-btn-color:               var(--ab101-danger);
    --bs-btn-border-color:        var(--ab101-danger);
    --bs-btn-hover-bg:            var(--ab101-danger);
    --bs-btn-hover-color:         #f2f2f0;
}

.btn-warning {
    --bs-btn-bg:                  var(--ab101-khaki-400);
    --bs-btn-border-color:        var(--ab101-khaki-400);
    --bs-btn-hover-bg:            var(--ab101-khaki-300);
    --bs-btn-hover-border-color:  var(--ab101-khaki-300);
    --bs-btn-color:               #0b0c0d;
    --bs-btn-hover-color:         #0b0c0d;
}

.btn-secondary {
    --bs-btn-bg:                  var(--ab101-bg-700);
    --bs-btn-border-color:        var(--ab101-gray-600);
    --bs-btn-hover-bg:            var(--ab101-bg-750);
    --bs-btn-hover-border-color:  var(--ab101-gray-500);
    --bs-btn-color:               var(--ab101-text-200);
    --bs-btn-hover-color:         var(--ab101-text-100);
    --bs-btn-active-color:        var(--ab101-text-100);
}

.btn-outline-secondary {
    --bs-btn-color:               var(--ab101-text-300);
    --bs-btn-border-color:        var(--ab101-gray-600);
    --bs-btn-hover-bg:            var(--ab101-bg-700);
    --bs-btn-hover-border-color:  var(--ab101-gray-500);
    --bs-btn-hover-color:         var(--ab101-text-100);
}

.btn-dark {
    --bs-btn-bg:           var(--ab101-bg-800);
    --bs-btn-border-color: var(--ab101-border);
    --bs-btn-hover-bg:     var(--ab101-bg-750);
    --bs-btn-color:        var(--ab101-text-200);
    --bs-btn-hover-color:  var(--ab101-text-100);
}

.btn-link { color: var(--ab101-khaki-400); }
.btn-link:hover { color: var(--ab101-khaki-300); }


/* 8. FORMS
   ============================================================ */
.form-control,
.form-select {
    background-color: var(--ab101-bg-800);
    border-color: var(--ab101-border);
    border-radius: var(--ab101-radius);
    color: var(--ab101-text-100);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--ab101-bg-750);
    border-color: var(--ab101-khaki-500);
    color: var(--ab101-text-100);
    box-shadow: 0 0 0 3px rgba(148, 136, 95, 0.25);
}

.form-control::placeholder { color: var(--ab101-gray-500); }

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--ab101-bg-750);
    color: var(--ab101-text-300);
    border-color: var(--ab101-border-soft);
}

.form-select:disabled {
    background-color: var(--ab101-bg-750);
    color: var(--ab101-text-300);
}

.form-check-input {
    background-color: var(--ab101-bg-800);
    border-color: var(--ab101-border);
    border-radius: var(--ab101-radius);
}

.form-check-input:checked {
    background-color: var(--ab101-khaki-500);
    border-color: var(--ab101-khaki-500);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(148, 136, 95, 0.25);
    border-color: var(--ab101-khaki-500);
}

.form-text   { color: var(--ab101-text-300); }
.form-label  { color: var(--ab101-text-200); font-size: .875rem; font-weight: 500; }

.input-group-text {
    background-color: var(--ab101-bg-800);
    border-color: var(--ab101-border);
    color: var(--ab101-text-300);
    border-radius: var(--ab101-radius);
}

.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236a7078'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230b0c0d'/%3e%3c/svg%3e");
}


/* 9. TABLES
   ============================================================ */
.table {
    --bs-table-bg:            var(--ab101-bg-850);
    --bs-table-striped-bg:    var(--ab101-bg-800);
    --bs-table-hover-bg:      var(--ab101-bg-750);
    --bs-table-border-color:  var(--ab101-border);
    --bs-table-color:         var(--ab101-text-100);
    --bs-table-striped-color: var(--ab101-text-100);
    --bs-table-hover-color:   var(--ab101-text-100);
    --bs-table-active-bg:     var(--ab101-bg-750);
}

.table thead th {
    color: var(--ab101-khaki-300);
    font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-bottom-color: var(--ab101-border);
    background-color: var(--ab101-bg-800);
    white-space: nowrap;
}

.table tbody tr { vertical-align: middle; }


/* 10. BADGES
   ============================================================ */
.badge {
    border-radius: var(--ab101-radius);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.badge.bg-primary   { background-color: var(--ab101-khaki-500) !important; color: #0b0c0d !important; }
.badge.bg-success   { background-color: var(--ab101-success)   !important; color: #f2f2f0 !important; }
.badge.bg-danger    { background-color: var(--ab101-danger)    !important; color: #f2f2f0 !important; }
.badge.bg-warning   { background-color: var(--ab101-khaki-400) !important; color: #0b0c0d !important; }
.badge.bg-info      { background-color: var(--ab101-khaki-300) !important; color: #0b0c0d !important; }
.badge.bg-dark      { background-color: var(--ab101-bg-800)    !important; color: var(--ab101-text-200) !important; border: 1px solid var(--ab101-border); }
.badge.bg-secondary { background-color: var(--ab101-bg-700)    !important; color: var(--ab101-text-200) !important; border: 1px solid var(--ab101-border-soft); }


/* 11. ALERTS
   ============================================================ */
.alert { border-radius: var(--ab101-radius); border-width: 1px; font-size: .875rem; }

.alert-danger  { background-color: rgba(196,  95, 85, 0.14); border-color: rgba(196,  95, 85, 0.4);  color: #e8908a; }
.alert-success { background-color: rgba(120, 147,106, 0.14); border-color: rgba(120, 147,106, 0.4);  color: #9fc295; }
.alert-warning { background-color: rgba(171, 158,113, 0.12); border-color: rgba(171, 158,113, 0.35); color: var(--ab101-khaki-300); }
.alert-info    { background-color: rgba(148, 136, 95, 0.12); border-color: rgba(148, 136, 95, 0.3);  color: var(--ab101-khaki-300); }
.alert-primary { background-color: rgba(148, 136, 95, 0.14); border-color: rgba(148, 136, 95, 0.4);  color: var(--ab101-khaki-300); }
.alert-dark    { background-color: var(--ab101-bg-800); border-color: var(--ab101-border); color: var(--ab101-text-200); }


/* 12. MODALS
   ============================================================ */
.modal-content {
    background-color: var(--ab101-bg-850);
    border: 1px solid var(--ab101-border);
    border-radius: var(--ab101-radius);
    box-shadow: var(--ab101-shadow);
}

.modal-header {
    background-color: var(--ab101-bg-800);
    border-bottom: 1px solid var(--ab101-border);
    color: var(--ab101-text-100);
    padding: 1rem 1.25rem;
}

.modal-footer {
    background-color: var(--ab101-bg-800);
    border-top: 1px solid var(--ab101-border);
}

.modal-title {
    font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ab101-khaki-300);
    font-size: 1rem;
}

.btn-close       { filter: invert(1) opacity(0.55); }
.btn-close:hover { filter: invert(1) opacity(0.9);  }


/* 13. DROPDOWNS
   ============================================================ */
.dropdown-menu {
    background-color: var(--ab101-bg-800);
    border: 1px solid var(--ab101-border);
    border-radius: var(--ab101-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
}

.dropdown-item { color: var(--ab101-text-200); font-size: .875rem; }

.dropdown-item:hover,
.dropdown-item:focus { background-color: var(--ab101-bg-750); color: var(--ab101-text-100); }

.dropdown-item.text-danger:hover { background-color: rgba(196, 95, 85, 0.15); color: #e8908a; }

.dropdown-divider { border-color: var(--ab101-border); }

.dropdown-header { color: var(--ab101-khaki-300); font-size: .75rem; text-transform: uppercase; letter-spacing: 0.06em; }


/* 14. TABS
   ============================================================ */
.nav-tabs { border-bottom-color: var(--ab101-border); }

.nav-tabs .nav-link {
    color: var(--ab101-text-300) !important;
    border-radius: var(--ab101-radius) var(--ab101-radius) 0 0 !important;
    border-color: transparent !important;
    font-size: .85rem;
}

.nav-tabs .nav-link:hover {
    color: var(--ab101-khaki-300) !important;
    background-color: var(--ab101-bg-800);
    border-color: var(--ab101-border) var(--ab101-border) transparent !important;
}

.nav-tabs .nav-link.active {
    background-color: var(--ab101-bg-850) !important;
    border-color: var(--ab101-border) var(--ab101-border) var(--ab101-bg-850) !important;
    color: var(--ab101-khaki-300) !important;
}

.nav-pills .nav-link { border-radius: var(--ab101-radius); color: var(--ab101-text-200); }

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background-color: var(--ab101-khaki-500); color: #0b0c0d; }


/* 15. UTILITY OVERRIDES
   ============================================================ */
.text-primary { color: var(--ab101-khaki-400) !important; }
.text-success { color: var(--ab101-success)   !important; }
.text-danger  { color: var(--ab101-danger)    !important; }
.text-warning { color: var(--ab101-khaki-400) !important; }
.text-info    { color: var(--ab101-khaki-300) !important; }
.text-muted   { color: var(--ab101-text-300)  !important; }
.text-dark    { color: var(--ab101-text-200)  !important; }

.border-primary { border-color: var(--ab101-khaki-500) !important; }
.border-success { border-color: var(--ab101-success)   !important; }
.border-danger  { border-color: var(--ab101-danger)    !important; }
.border-warning { border-color: var(--ab101-khaki-400) !important; }
.border-info    { border-color: var(--ab101-khaki-300) !important; }
.border-dark    { border-color: var(--ab101-border)    !important; }

.bg-primary   { background-color: var(--ab101-khaki-500)  !important; color: #0b0c0d !important; }
.bg-success   { background-color: var(--ab101-success)    !important; }
.bg-danger    { background-color: var(--ab101-danger)     !important; }
.bg-dark      { background-color: var(--ab101-bg-800)     !important; }
.bg-secondary { background-color: var(--ab101-bg-700)     !important; }
.bg-light     { background-color: var(--ab101-bg-750)     !important; color: var(--ab101-text-100) !important; }


/* 16. PROGRESS & SPINNERS
   ============================================================ */
.progress { background-color: var(--ab101-bg-700); border-radius: var(--ab101-radius); height: .5rem; }
.progress-bar { background-color: var(--ab101-khaki-500); }
.spinner-border { color: var(--ab101-khaki-400); }


/* 17. LIST GROUP
   ============================================================ */
.list-group-item {
    background-color: var(--ab101-bg-850);
    border-color: var(--ab101-border);
    color: var(--ab101-text-100);
    border-radius: var(--ab101-radius) !important;
}

.list-group-item:hover { background-color: var(--ab101-bg-800); }

.list-group-item.active {
    background-color: var(--ab101-khaki-500);
    border-color: var(--ab101-khaki-500);
    color: #0b0c0d;
}


/* 18. PAGINATION
   ============================================================ */
.page-link {
    background-color: var(--ab101-bg-800);
    border-color: var(--ab101-border);
    color: var(--ab101-khaki-400);
    border-radius: var(--ab101-radius) !important;
}

.page-link:hover { background-color: var(--ab101-bg-750); color: var(--ab101-khaki-300); border-color: var(--ab101-border); }

.page-item.active .page-link { background-color: var(--ab101-khaki-500); border-color: var(--ab101-khaki-500); color: #0b0c0d; }
.page-item.disabled .page-link { background-color: var(--ab101-bg-850); color: var(--ab101-gray-600); border-color: var(--ab101-border-soft); }


/* 19. AUTH PAGES
   ============================================================ */
.auth-wrapper {
    background-color: var(--ab101-bg-950);
    background-image: repeating-linear-gradient(
        45deg,
        transparent, transparent 60px,
        rgba(171, 158, 113, 0.018) 60px,
        rgba(171, 158, 113, 0.018) 61px
    );
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background-color: var(--ab101-bg-850);
    border: 1px solid var(--ab101-border);
    box-shadow: var(--ab101-shadow);
    border-radius: var(--ab101-radius);
}

.auth-card .card-body { padding: 2.25rem; }

.auth-card .card-title {
    font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
    letter-spacing: 0.05em;
}


/* 20. FOOTER
   ============================================================ */
footer {
    border-top-color: var(--ab101-border) !important;
    color: var(--ab101-text-300) !important;
    background-color: var(--ab101-bg-950);
    font-size: .78rem;
}


/* 21. RANK ICONS
   ============================================================ */
.rank-icon    { height: 28px; width: auto; object-fit: contain; vertical-align: middle; }
.rank-icon-sm { height: 20px; width: auto; object-fit: contain; vertical-align: middle; }


/* 22. SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track  { background: var(--ab101-bg-950); }
::-webkit-scrollbar-thumb  { background: var(--ab101-bg-700); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--ab101-khaki-500); }


/* 23. ACCORDION
   ============================================================ */
.accordion-item { background-color: var(--ab101-bg-850); border-color: var(--ab101-border); border-radius: var(--ab101-radius) !important; }
.accordion-button { background-color: var(--ab101-bg-800); color: var(--ab101-text-100); border-radius: var(--ab101-radius) !important; }
.accordion-button:not(.collapsed) { background-color: var(--ab101-bg-750); color: var(--ab101-khaki-300); box-shadow: inset 0 -1px 0 var(--ab101-border); }
.accordion-button::after { filter: invert(0.75); }
.accordion-body { background-color: var(--ab101-bg-850); }


/* 24. TOOLTIP
   ============================================================ */
.tooltip-inner {
    background-color: var(--ab101-bg-750);
    border: 1px solid var(--ab101-border);
    color: var(--ab101-text-100);
    border-radius: var(--ab101-radius);
    font-size: .8rem;
}