/* ============================================================
   Gold brand theme — AdminLTE 4 / Bootstrap 5.3
   UX rules: dark-on-gold, darker-on-hover, visible focus,
   readable text-emphasis, semantic colors untouched.
   ============================================================ */

/* ---------- 1. Tokens ------------------------------------------ */
:root {
  /* Brand gold */
  --brand:              #f7d35f;   /* base    */
  --brand-rgb:          247, 211, 95;
  --brand-hover:        #e6c356;   /* darker  */
  --brand-active:       #d0ad3f;   /* darkest */
  --brand-ink:          #171409;   /* text on gold */
  --brand-ink-rgb:      23, 20, 9;

  /* Readable gold for text on light surfaces */
  --brand-emphasis:     #6b5a1c;

  /* Neutral accent */
  --accent:             #6c757d;
  --accent-rgb:         108, 117, 125;
  --accent-hover:       #5c636a;
  --accent-active:      #565e64;

  /* Focus ring shared by every gold-tinted control */
  --brand-ring:         0 0 0 .25rem rgba(var(--brand-rgb), .35);
}

/* ---------- 2. Bootstrap globals ------------------------------- */
:root,
[data-bs-theme="light"] {
  /* Utilities */
  --bs-primary:             var(--brand);
  --bs-primary-rgb:         var(--brand-rgb);
  --bs-secondary:           var(--accent);
  --bs-secondary-rgb:       var(--accent-rgb);

  /* Text-safe emphasis (used by .text-primary-emphasis, alerts, etc.) */
  --bs-primary-text-emphasis:   var(--brand-emphasis);
  --bs-primary-bg-subtle:       #fdf6dc;
  --bs-primary-border-subtle:   var(--brand);

  /* Links: gold text on white is unreadable, so links use emphasis tone */
  --bs-link-color:              var(--brand-emphasis);
  --bs-link-color-rgb:          107, 90, 28;
  --bs-link-hover-color:        #564818;
  --bs-link-hover-color-rgb:    86, 72, 24;

  --bs-focus-ring-color:        rgba(var(--brand-rgb), .35);
}

[data-bs-theme="dark"] {
  --bs-primary-text-emphasis: var(--brand);
  --bs-primary-bg-subtle:     #3a2f08;
  --bs-primary-border-subtle: #6b5a1c;

  /* On dark, gold text is great */
  --bs-link-color:            var(--brand);
  --bs-link-color-rgb:        var(--brand-rgb);
  --bs-link-hover-color:      #ffe082;
  --bs-link-hover-color-rgb:  255, 224, 130;
}

/* ---------- 3. Buttons ----------------------------------------- */
/* Solid: gold bg, ink text, darker on hover, darkest on press */
.btn-primary {
  --bs-btn-color:               var(--brand-ink);
  --bs-btn-bg:                  var(--brand);
  --bs-btn-border-color:        var(--brand);
  --bs-btn-hover-color:         var(--brand-ink);
  --bs-btn-hover-bg:            var(--brand-hover);
  --bs-btn-hover-border-color:  var(--brand-hover);
  --bs-btn-active-color:        var(--brand-ink);
  --bs-btn-active-bg:           var(--brand-active);
  --bs-btn-active-border-color: var(--brand-active);
  --bs-btn-disabled-color:      var(--brand-ink);
  --bs-btn-disabled-bg:         var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb:    var(--brand-rgb);
}

/* Outline: ink-free until hover, then filled for a clear click target */
.btn-outline-primary {
  --bs-btn-color:               var(--brand-emphasis);
  --bs-btn-border-color:        var(--brand);
  --bs-btn-hover-color:         var(--brand-ink);
  --bs-btn-hover-bg:            var(--brand);
  --bs-btn-hover-border-color:  var(--brand);
  --bs-btn-active-color:        var(--brand-ink);
  --bs-btn-active-bg:           var(--brand-hover);
  --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-disabled-color:      var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb:    var(--brand-rgb);
}
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--brand);
}

.btn-link {
  --bs-btn-color:        var(--bs-link-color);
  --bs-btn-hover-color:  var(--bs-link-hover-color);
  --bs-btn-active-color: var(--bs-link-hover-color);
}

/* ---------- 4. Forms ------------------------------------------- */
.form-control:focus,
.form-select:focus {
  border-color: var(--brand);
  box-shadow: var(--bs-box-shadow-inset), var(--brand-ring);
}

.form-check-input:focus { border-color: var(--brand); box-shadow: var(--brand-ring); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

/* Ink-coloured tick + radio dot (white-on-gold fails contrast) */
.form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23171409' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23171409'/%3e%3c/svg%3e");
}
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--brand); border-color: var(--brand);
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23171409' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

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

.form-range::-webkit-slider-thumb { background-color: var(--brand); }
.form-range::-webkit-slider-thumb:active { background-color: var(--brand-hover); }
.form-range::-moz-range-thumb { background-color: var(--brand); }
.form-range::-moz-range-thumb:active { background-color: var(--brand-hover); }

/* ---------- 5. Nav / Tabs / Pills ------------------------------ */
.nav-pills {
  --bs-nav-pills-link-active-bg:    var(--brand);
  --bs-nav-pills-link-active-color: var(--brand-ink);
}
.nav-tabs {
  --bs-nav-tabs-link-active-color: var(--brand-ink);
  --bs-nav-tabs-link-active-bg:    var(--brand);
  --bs-nav-tabs-link-active-border-color: var(--brand) var(--brand) var(--bs-body-bg);
}
.nav-underline {
  --bs-nav-underline-link-active-color: var(--brand-emphasis);
}

/* ---------- 6. Dropdowns / Pagination / List group ------------- */
.dropdown-menu {
  --bs-dropdown-link-hover-bg:     rgba(var(--brand-rgb), .18);
  --bs-dropdown-link-hover-color:  var(--brand-ink);
  --bs-dropdown-link-active-bg:    var(--brand);
  --bs-dropdown-link-active-color: var(--brand-ink);
}

.pagination {
  --bs-pagination-color:               var(--brand-emphasis);
  --bs-pagination-hover-color:         var(--brand-ink);
  --bs-pagination-hover-bg:            var(--brand-hover);
  --bs-pagination-hover-border-color:  var(--brand-hover);
  --bs-pagination-focus-color:         var(--brand-ink);
  --bs-pagination-focus-box-shadow:    var(--brand-ring);
  --bs-pagination-active-bg:           var(--brand);
  --bs-pagination-active-border-color: var(--brand);
  --bs-pagination-active-color:        var(--brand-ink);
}

.list-group {
  --bs-list-group-active-bg:           var(--brand);
  --bs-list-group-active-border-color: var(--brand);
  --bs-list-group-active-color:        var(--brand-ink);
}

/* ---------- 7. Accordion / Progress ---------------------------- */
.accordion {
  --bs-accordion-btn-focus-box-shadow: var(--brand-ring);
  --bs-accordion-active-color:         var(--brand-emphasis);
  --bs-accordion-active-bg:            var(--bs-primary-bg-subtle);
}
.progress { --bs-progress-bar-bg: var(--brand); --bs-progress-bar-color: var(--brand-ink); }

/* ---------- 8. Badges / Alerts / Toast ------------------------- */
.text-bg-primary { color: var(--brand-ink) !important; }

.alert-primary {
  --bs-alert-color:        var(--brand-emphasis);
  --bs-alert-bg:           var(--bs-primary-bg-subtle);
  --bs-alert-border-color: var(--bs-primary-border-subtle);
  --bs-alert-link-color:   var(--brand-emphasis);
}

.toast-primary {
  --bs-toast-header-color:        var(--brand-ink);
  --bs-toast-header-bg:           var(--brand);
  --bs-toast-header-border-color: var(--brand);
  --bs-toast-border-color:        var(--brand);
  --bs-toast-bg:                  var(--bs-primary-bg-subtle);
}
.toast-primary .btn-close { filter: none; }

/* ---------- 9. AdminLTE sidebar -------------------------------- */
.app-sidebar {
  --lte-sidebar-hover-bg:             rgba(var(--brand-rgb), .22);
  --lte-sidebar-hover-color:          var(--brand-ink);

  --lte-sidebar-menu-active-bg:       var(--brand);
  --lte-sidebar-menu-active-color:    var(--brand-ink);

  --lte-sidebar-submenu-hover-bg:     rgba(var(--brand-rgb), .18);
  --lte-sidebar-submenu-hover-color:  var(--brand-ink);

  --lte-sidebar-submenu-active-bg:    var(--brand);
  --lte-sidebar-submenu-active-color: var(--brand-ink);

  --lte-sidebar-header-color:         #b8860b;
}

[data-bs-theme="dark"].app-sidebar,
[data-bs-theme="dark"] .app-sidebar {
  --lte-sidebar-hover-bg:             rgba(var(--brand-rgb), .22);
  --lte-sidebar-hover-color:          var(--brand);
  --lte-sidebar-menu-active-bg:       var(--brand);
  --lte-sidebar-menu-active-color:    var(--brand-ink);
  --lte-sidebar-submenu-hover-bg:     rgba(var(--brand-rgb), .15);
  --lte-sidebar-submenu-hover-color:  var(--brand);
  --lte-sidebar-submenu-active-bg:    var(--brand);
  --lte-sidebar-submenu-active-color: var(--brand-ink);
  --lte-sidebar-header-color:         var(--brand);
}

.sidebar-wrapper .nav-header { color: #b8860b; background-color: inherit; }
[data-bs-theme="dark"] .sidebar-wrapper .nav-header { color: var(--brand); }

.brand-link, .brand-text { color: inherit; }

/* ---------- 10. AdminLTE cards / small-box --------------------- */
.card-primary,
.bg-primary,
.text-bg-primary {
  --lte-card-variant-bg:          var(--brand);
  --lte-card-variant-bg-rgb:      var(--brand-rgb);
  --lte-card-variant-color:       var(--brand-ink);
  --lte-card-variant-color-rgb:   var(--brand-ink-rgb);
}
.card-primary > .card-header .btn-tool,
.bg-primary   > .card-header .btn-tool {
  --bs-btn-color:       rgba(var(--brand-ink-rgb), .75);
  --bs-btn-hover-color: var(--brand-ink);
}

/* ---------- 11. Balance card ----------------------------------- */
.balance-card {
  background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
  color: var(--brand-ink);           /* ink, not white — gold end is light */
  border-radius: 15px;
}
/* If you want white text, flip to a darker gradient instead: */
.balance-card--dark {
  background: linear-gradient(135deg, var(--brand-emphasis) 0%, var(--accent-active) 100%);
  color: #fff;
  border-radius: 15px;
}

/* ---------- 12. Accessibility niceties ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .form-control, .form-select, .form-check-input, .nav-link,
  .dropdown-item, .page-link, .sidebar-menu .nav-link {
    transition: none !important;
  }
}
/* Strong visible focus for keyboard users on every branded control */
.btn-primary:focus-visible,
.btn-outline-primary:focus-visible,
.page-link:focus-visible,
.form-check-input:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}
[data-bs-theme="dark"] .btn-primary:focus-visible,
[data-bs-theme="dark"] .btn-outline-primary:focus-visible,
[data-bs-theme="dark"] .nav-link:focus-visible {
  outline-color: var(--brand);
}



/* custom-colors.css - WITH ACCENT */
:root {
  --primary: #f7d35f !important;
  --bs-primary: #f7d35f !important;
  --bs-primary-rgb: 247, 211, 95 !important;
  --accent: #6c757d !important; /* ← This is your accent */
}

/* Primary elements (gold) */
.btn-primary,
.bg-primary,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  border-color: #f7d35f !important;
  background-color: #f7d35f !important;
  color: #171409 !important;
}

/* Hover states (darker gold - this is also "accent" behavior) */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
a:hover {
  background-color: #e6c356 !important;
  border-color: #e6c356 !important;
}

/* Secondary/Accent elements (gray) */
.btn-secondary,
.bg-secondary,
.text-secondary {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: white !important;
}

/* Logo/text */
.brand-link,
.brand-text,
.text-primary,
a {
  color: #171409 !important;
}




/*
Self
*/


.sidebar-wrapper .nav-header {
  color: #d79718;
  background-color: inherit;
}


.nav-sidebar .nav-link:hover {
            background-color: var(--primary);
            color: #fff;
        }




.card-success, .bg-success, .text-bg-success {
  --lte-card-variant-bg: #198754;
  --lte-card-variant-bg-rgb: 25, 135, 84;
  --lte-card-variant-color: #fff;
  --lte-card-variant-color-rgb: 255, 255, 255;
}



        .balance-card {
            background: linear-gradient(135deg, var(--bg-success) 0%, var(--accent) 100%);
            color: #fff;
            border-radius: 15px;
        }





/*DS:: 6e16b8a7-6c24-4aed-b81c-8b7ef6d111b6*/

/* Fix for btn-outline-primary */
.btn-outline-primary {
  color: #f7d35f !important;
  border-color: #f7d35f !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: #f7d35f !important;
  border-color: #f7d35f !important;
  color: #171409 !important;
}

/* Also fix btn-outline-secondary if needed */
.btn-outline-secondary {
  color: #6c757d !important;
  border-color: #6c757d !important;
  background-color: transparent !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #fff !important;
}



/* Fix for btn-outline-primary with btn-check */
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
  background-color: #f7d35f !important;
  border-color: #f7d35f !important;
  color: #171409 !important;
}

.btn-check:checked + .btn-outline-primary:focus,
.btn-check:active + .btn-outline-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(247, 211, 95, 0.5) !important;
}

/* For the radio button check state when selected */
.btn-check:checked + .btn-outline-primary .fa-user,
.btn-check:checked + .btn-outline-primary .fa-briefcase {
  color: #171409 !important;
}


/* Additional fix for btn-check checked state on label */
.btn-check:checked + .btn-outline-primary {
  background-color: #f7d35f !important;
  border-color: #f7d35f !important;
  color: #171409 !important;
  box-shadow: 0 0 0 0.25rem rgba(247, 211, 95, 0.5) !important;
}

/* Ensure unchecked state shows gold border */
.btn-check:not(:checked) + .btn-outline-primary {
  background-color: transparent !important;
  border-color: #f7d35f !important;
  color: #f7d35f !important;
}





/* COMPLETE FIX FOR ALL OUTLINE PRIMARY BUTTONS */
.btn-outline-primary {
    color: #f7d35f !important;
    border-color: #f7d35f !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: #f7d35f !important;
    border-color: #f7d35f !important;
    color: #171409 !important;
}

/* FIX FOR CHECKED RADIO BUTTONS WITH btn-check */
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-primary:hover,
.btn-check:checked + .btn-outline-primary:focus,
.btn-check:checked + .btn-outline-primary:active {
    background-color: #f7d35f !important;
    border-color: #f7d35f !important;
    color: #171409 !important;
    box-shadow: 0 0 0 0.25rem rgba(247, 211, 95, 0.5) !important;
}

/* Ensure unchecked state stays gold outline */
.btn-check:not(:checked) + .btn-outline-primary {
    background-color: transparent !important;
    border-color: #f7d35f !important;
    color: #f7d35f !important;
}

/* Fix for active/focus states */
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
    background-color: #f7d35f !important;
    border-color: #f7d35f !important;
    color: #171409 !important;
}



/* Fix for btn-outline-primary when NOT selected - make text visible */
.btn-outline-primary {
    color: #f7d35f !important;
    border-color: #f7d35f !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: #f7d35f !important;
    border-color: #f7d35f !important;
    color: #171409 !important;
}

/* FIX: When radio is NOT checked, text stays gold and readable */
.btn-check:not(:checked) + .btn-outline-primary {
    background-color: transparent !important;
    border-color: #f7d35f !important;
    color: #f7d35f !important;  /* Gold text when not selected */
}

/* FIX: When radio IS checked, text becomes dark for contrast */
.btn-check:checked + .btn-outline-primary {
    background-color: #f7d35f !important;
    border-color: #f7d35f !important;
    color: #171409 !important;  /* Dark text when selected */
    box-shadow: 0 0 0 0.25rem rgba(247, 211, 95, 0.5) !important;
}

/* Ensure icons also change color */
.btn-check:not(:checked) + .btn-outline-primary .fas {
    color: #f7d35f !important;  /* Gold icons when not selected */
}

.btn-check:checked + .btn-outline-primary .fas {
    color: #171409 !important;  /* Dark icons when selected */
}