/* ============================================================
   Colorffy dark theme — Flask pages (Bootstrap 5)
   Primary:  #E0B773  (warm gold)
   Surface:  #00032D  (deep navy)
   ============================================================ */

/* ---- Palette tokens ---------------------------------------- */
:root,
[data-bs-theme="dark"] {
  --ms-primary:          #E0B773;
  --ms-primary-dark:     #c49a55;
  --ms-primary-rgb:      224, 183, 115;
  --ms-primary-subtle:   rgba(224, 183, 115, 0.12);

  --ms-bg:               #00032D;
  --ms-surface-1:        #07103a;
  --ms-surface-2:        #0f1b52;
  --ms-surface-3:        #1a2669;
  --ms-border:           #1f2e74;
  --ms-border-subtle:    rgba(31, 46, 116, 0.5);

  --ms-text:             #ddd5be;
  --ms-text-muted:       #7a80a8;

  --ms-success:          #22946E;
  --ms-success-light:    #47d5a6;
  --ms-warning:          #A87A2A;
  --ms-warning-light:    #d7ac61;
  --ms-danger:           #9C2121;
  --ms-danger-light:     #d94a4a;
  --ms-info:             #21498A;
  --ms-info-light:       #4077d1;

  /* Bootstrap 5 semantic overrides */
  --bs-body-bg:                  var(--ms-bg);
  --bs-body-bg-rgb:              0, 3, 45;
  --bs-body-color:               var(--ms-text);
  --bs-body-color-rgb:           221, 213, 190;
  --bs-secondary-bg:             var(--ms-surface-1);
  --bs-tertiary-bg:              var(--ms-surface-2);
  --bs-secondary-color:          rgba(221, 213, 190, 0.75);
  --bs-tertiary-color:           rgba(221, 213, 190, 0.5);
  --bs-emphasis-color:           var(--ms-primary);

  --bs-primary:                  var(--ms-primary);
  --bs-primary-rgb:              224, 183, 115;
  --bs-secondary:                #3d4580;
  --bs-secondary-rgb:            61, 69, 128;
  --bs-success:                  var(--ms-success);
  --bs-success-rgb:              34, 148, 110;
  --bs-info:                     var(--ms-info);
  --bs-info-rgb:                 33, 73, 138;
  --bs-warning:                  var(--ms-warning);
  --bs-warning-rgb:              168, 122, 42;
  --bs-danger:                   var(--ms-danger);
  --bs-danger-rgb:               156, 33, 33;

  --bs-border-color:             var(--ms-border);
  --bs-border-color-translucent: var(--ms-border-subtle);

  --bs-link-color:               var(--ms-primary);
  --bs-link-hover-color:         var(--ms-primary-dark);
  --bs-link-color-rgb:           224, 183, 115;

  --bs-card-bg:                  var(--ms-surface-1);
  --bs-card-cap-bg:              var(--ms-surface-2);
  --bs-card-border-color:        var(--ms-border);

  --bs-table-color:              var(--ms-text);
  --bs-table-border-color:       var(--ms-border);
  --bs-table-striped-bg:         rgba(7, 16, 58, 0.5);
  --bs-table-hover-bg:           rgba(224, 183, 115, 0.07);
}

/* ---- Layout ------------------------------------------------ */
body {
  background-color: var(--ms-bg)   !important;
  color:            var(--ms-text) !important;
}
a           { color: var(--ms-primary); }
a:hover     { color: var(--ms-primary-dark); }
hr          { border-color: var(--ms-border); opacity: 0.5; }

/* ---- Navbar ------------------------------------------------ */
.navbar-dark,
.navbar,
nav.bg-dark {
  background-color: var(--ms-surface-1) !important;
  border-bottom: 1px solid var(--ms-border) !important;
}
.navbar-dark .navbar-brand     { color: var(--ms-primary) !important; }
.navbar-dark .nav-link         { color: var(--ms-text)    !important; }
.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus   { color: var(--ms-primary) !important; }

/* ---- Buttons ----------------------------------------------- */
.btn-primary {
  background-color: var(--ms-primary)  !important;
  border-color:     var(--ms-primary)  !important;
  color:            var(--ms-bg)       !important;
  font-weight: 500;
}
.btn-primary:hover,
.btn-primary:active {
  background-color: var(--ms-primary-dark) !important;
  border-color:     var(--ms-primary-dark) !important;
  color:            var(--ms-bg)           !important;
}
.btn-outline-primary {
  color:        var(--ms-primary) !important;
  border-color: var(--ms-primary) !important;
}
.btn-outline-primary:hover {
  background-color: var(--ms-primary) !important;
  color:            var(--ms-bg)       !important;
}
.btn-outline-secondary {
  color:        var(--ms-text-muted) !important;
  border-color: var(--ms-border)     !important;
}
.btn-outline-secondary:hover {
  background-color: var(--ms-surface-2) !important;
  color:            var(--ms-text)      !important;
}
.btn-outline-danger {
  color:        var(--ms-danger-light) !important;
  border-color: var(--ms-danger)       !important;
}
.btn-outline-danger:hover {
  background-color: var(--ms-danger) !important;
  color:            #fff             !important;
}
.btn-secondary { background-color: var(--ms-surface-2) !important; border-color: var(--ms-border) !important; color: var(--ms-text) !important; }
.btn-sm.btn-primary { box-shadow: none; }

/* ---- Cards ------------------------------------------------- */
.card {
  background-color: var(--ms-surface-1) !important;
  border-color:     var(--ms-border)    !important;
  border-radius: 8px !important;
}
.card-header {
  background-color: var(--ms-surface-2) !important;
  border-color:     var(--ms-border)    !important;
  color:            var(--ms-text)      !important;
}

/* ---- Tables ------------------------------------------------ */
.table                   { color: var(--ms-text) !important; }
.table > :not(caption) > * > *    { border-color: var(--ms-border) !important; }
.table thead th          { color: var(--ms-text-muted) !important; border-color: var(--ms-border) !important; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; }
.table-dark              { background-color: var(--ms-surface-1) !important; }
.table-hover > tbody > tr:hover > * { background-color: rgba(224, 183, 115, 0.07) !important; }

/* ---- Forms ------------------------------------------------- */
.form-control,
.form-select {
  background-color: var(--ms-surface-1) !important;
  border-color:     var(--ms-border)    !important;
  color:            var(--ms-text)      !important;
}
.form-control:focus,
.form-select:focus {
  background-color: var(--ms-surface-2)                    !important;
  border-color:     var(--ms-primary)                      !important;
  box-shadow:       0 0 0 0.25rem rgba(224, 183, 115, 0.2) !important;
  color:            var(--ms-text)                         !important;
}
.form-control::placeholder { color: var(--ms-text-muted) !important; opacity: 1; }
.form-check-input:checked  { background-color: var(--ms-primary) !important; border-color: var(--ms-primary) !important; }
.form-switch .form-check-input:checked { background-color: var(--ms-primary) !important; border-color: var(--ms-primary) !important; }
.input-group-text {
  background-color: var(--ms-surface-2) !important;
  border-color:     var(--ms-border)    !important;
  color:            var(--ms-text-muted)!important;
}

/* ---- Dropdowns --------------------------------------------- */
.dropdown-menu {
  background-color: var(--ms-surface-2) !important;
  border-color:     var(--ms-border)    !important;
}
.dropdown-item         { color: var(--ms-text) !important; }
.dropdown-item:hover,
.dropdown-item:focus   { background-color: var(--ms-surface-3) !important; color: var(--ms-primary) !important; }
.dropdown-divider      { border-color: var(--ms-border) !important; }

/* ---- Alerts ------------------------------------------------ */
.alert-success { background-color: rgba(34, 148, 110, 0.15) !important; border-color: var(--ms-success) !important; color: var(--ms-success-light) !important; }
.alert-warning { background-color: rgba(168, 122, 42, 0.15) !important; border-color: var(--ms-warning) !important; color: var(--ms-warning-light) !important; }
.alert-danger  { background-color: rgba(156, 33, 33, 0.15)  !important; border-color: var(--ms-danger)  !important; color: var(--ms-danger-light)  !important; }
.alert-info    { background-color: rgba(33, 73, 138, 0.15)  !important; border-color: var(--ms-info)    !important; color: var(--ms-info-light)    !important; }
.alert-primary { background-color: rgba(224, 183, 115, 0.12)!important; border-color: var(--ms-primary) !important; color: var(--ms-primary)       !important; }

/* ---- Modals ------------------------------------------------ */
.modal-content  { background-color: var(--ms-surface-1) !important; border-color: var(--ms-border) !important; }
.modal-header   { border-color: var(--ms-border) !important; }
.modal-footer   { border-color: var(--ms-border) !important; }
.modal-title    { color: var(--ms-primary) !important; }
.close          { color: var(--ms-text-muted) !important; opacity: 0.8; }
.close:hover    { color: var(--ms-text) !important; }

/* ---- Badges & text helpers --------------------------------- */
.badge.bg-primary  { background-color: var(--ms-primary)    !important; color: var(--ms-bg) !important; }
.badge-primary     { background-color: var(--ms-primary)    !important; color: var(--ms-bg) !important; }
.text-muted        { color: var(--ms-text-muted) !important; }
.text-primary      { color: var(--ms-primary)    !important; }
.text-light        { color: var(--ms-text)        !important; }
.bg-dark           { background-color: var(--ms-surface-1) !important; }

/* ---- Headings --------------------------------------------- */
h1, h2, h3, h4, h5, h6 { color: var(--ms-text); }
h2.text-light { color: var(--ms-text) !important; }

/* ---- Manage roles / admin page ---------------------------- */
.table-dark.table-hover tbody tr:hover { background-color: rgba(224, 183, 115, 0.07) !important; }

/* ---- Scrollbars -------------------------------------------- */
::-webkit-scrollbar              { width: 7px; height: 7px; }
::-webkit-scrollbar-track        { background: var(--ms-bg); }
::-webkit-scrollbar-thumb        { background: var(--ms-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover  { background: var(--ms-surface-3); }

/* ---- Selection --------------------------------------------- */
::selection { background: rgba(224, 183, 115, 0.22); color: var(--ms-text); }