/* ============================================================================
 * sage-overrides.css
 * ----------------------------------------------------------------------------
 * Güzellik salon "sage" brand override for the Stack (Webpixels) theme.
 *
 * Load order MUST be:  app.css  ->  sage-overrides.css
 *
 * The Stack theme in this project is Bootstrap 4.5.2 + Material Design Kit
 * (NOT Bootstrap 5). Its `app.css` hard-codes the demo brand color (#6774DF)
 * into every `.btn-primary`, `.bg-primary`, `.text-primary`, navbar and
 * sidebar accent. BS4 has no runtime `--bs-primary` to flip, so we re-map the
 * brand by (a) redefining the custom properties Stack exposes and (b)
 * overriding the concrete brand utility classes with the sage palette.
 *
 * Sage palette (source of truth: /assets/css/variables.css):
 *   primary        #A8C5A0
 *   primary-dark   #8DAF84   (hover / active)
 *   primary-darker #7BA573   (pressed)
 *   primary-light  #C5DCC0
 *   accent         #C9956C
 * ==========================================================================*/

:root {
  --primary: #A8C5A0;
  --bs-primary: #A8C5A0;            /* forward-compat if upgraded to BS5 */
  --bs-primary-rgb: 168, 197, 160;
  --primary-dark: #8DAF84;
  --primary-light: #C5DCC0;
  --accent: #C9956C;
  --sage: #A8C5A0;
  --sage-dark: #8DAF84;
  --sage-light: #C5DCC0;
}

/* ── Buttons ──────────────────────────────────────────────────────────────*/
.btn-primary {
  color: #fff !important;
  background-color: #A8C5A0 !important;
  border-color: #A8C5A0 !important;
}
.btn-primary:hover {
  color: #fff !important;
  background-color: #8DAF84 !important;
  border-color: #8DAF84 !important;
}
.btn-primary:focus,
.btn-primary.focus {
  color: #fff !important;
  box-shadow: 0 0 0 .2rem rgba(168, 197, 160, .5) !important;
}
.btn-primary.disabled,
.btn-primary:disabled {
  color: #fff !important;
  background-color: #A8C5A0 !important;
  border-color: #A8C5A0 !important;
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff !important;
  background-color: #7BA573 !important;
  border-color: #7BA573 !important;
}

.btn-outline-primary {
  color: #8DAF84 !important;
  border-color: #A8C5A0 !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
  color: #fff !important;
  background-color: #A8C5A0 !important;
  border-color: #A8C5A0 !important;
}
.btn-outline-primary:focus,
.btn-outline-primary.focus {
  box-shadow: 0 0 0 .2rem rgba(168, 197, 160, .5) !important;
}

/* ── Backgrounds / text / borders ─────────────────────────────────────────*/
.bg-primary { background-color: #A8C5A0 !important; }
a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover, button.bg-primary:focus { background-color: #8DAF84 !important; }

.text-primary { color: #8DAF84 !important; }
a.text-primary:hover, a.text-primary:focus { color: #7BA573 !important; }

.border-primary { border-color: #A8C5A0 !important; }
.badge-primary { color: #fff !important; background-color: #A8C5A0 !important; }

/* ── Links ────────────────────────────────────────────────────────────────*/
a { color: #8DAF84; }
a:hover { color: #7BA573; }

/* ── Forms: focus ring + checked controls ─────────────────────────────────*/
.form-control:focus,
.custom-select:focus {
  border-color: #C5DCC0 !important;
  box-shadow: 0 0 0 .2rem rgba(168, 197, 160, .25) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
  border-color: #A8C5A0 !important;
  background-color: #A8C5A0 !important;
}
.page-item.active .page-link {
  background-color: #A8C5A0 !important;
  border-color: #A8C5A0 !important;
}

/* ── Navbar (top brand bar) ───────────────────────────────────────────────*/
.navbar-main[data-primary],
.navbar.bg-dark[data-primary] {
  background-color: #8DAF84 !important;  /* sage-dark reads well as a top bar */
}

/* ── Sidebar drawer active / hover state ──────────────────────────────────*/
.sidebar-menu-item.active > .sidebar-menu-button,
.sidebar-menu-item.open > .sidebar-menu-button {
  color: #7BA573 !important;
}
.sidebar-menu-item.active > .sidebar-menu-button .sidebar-menu-icon {
  color: #A8C5A0 !important;
}
.sidebar-light .sidebar-menu-button:hover {
  color: #7BA573 !important;
}

/* ── Progress / misc accents ──────────────────────────────────────────────*/
.progress-bar { background-color: #A8C5A0; }

/* ── Auth / onboarding shell ──────────────────────────────────────────────
 * The auth.php + onboarding.php views wrap their card in `.layout-login >
 * .layout-login__content`. Stack only ships `.layout-login__form` (a left side
 * panel) so `__content` is unstyled — the card collapsed into a sliver and the
 * theme's stock laptop photo showed through. Re-define the shell as a
 * full-height, centered card on an on-brand sage gradient (no off-brand photo).
 * Loaded after app.css; `[dir] .layout-login` matches the theme's specificity
 * and wins via source order. */
.layout-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
}
[dir] .layout-login {
  background-image: linear-gradient(135deg, #C5DCC0 0%, #A8C5A0 45%, #8DAF84 100%);
  background-size: cover;
  background-repeat: no-repeat;
}
.layout-login__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 2rem 0;
}
.layout-login .card {
  box-shadow: 0 1.5rem 4rem rgba(40, 60, 40, .18);
  border: 0;
}

/* ── Dark color-mode tweaks (data-bs-theme / data-theme = dark) ────────────*/
[data-bs-theme="dark"] .navbar-main[data-primary],
[data-theme="dark"] .navbar-main[data-primary] {
  background-color: #6E8C66 !important;
}