/*
 * ally.vc Gold Theme — Overrides Metronic's default blue primary.
 * Loaded AFTER style.bundle.css to override CSS custom properties.
 *
 * Color Palette (from CLAUDE.md Section 22):
 *   Gold:    #C9A84C (primary accent)
 *   Navy:    #050A18 (sidebar background)
 *   Ivory:   #FDFBF7 (light mode body)
 */

/* ── Primary color override ── */
:root,
[data-bs-theme="light"] {
  --kt-primary:           #C9A84C;
  --kt-primary-active:    #B8943F;
  --kt-primary-light:     rgba(201, 168, 76, 0.1);
  --kt-primary-inverse:   #ffffff;
  --kt-primary-clarity:   rgba(201, 168, 76, 0.2);

  --kt-app-bg-color:      #FDFBF7;

  /* Link color */
  --kt-link-color:        #C9A84C;
  --kt-link-hover-color:  #B8943F;
}

[data-bs-theme="dark"] {
  --kt-primary:           #D4B96A;
  --kt-primary-active:    #C9A84C;
  --kt-primary-light:     rgba(201, 168, 76, 0.15);

  --kt-app-bg-color:      #0B1120;
}

/* ── Dark sidebar override ── */
[data-kt-app-layout="dark-sidebar"] .app-sidebar {
  background-color: #050A18 !important;
}

/* ── Sidebar logo area ── */
.app-sidebar-logo {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* ── Sidebar active menu gold accent ── */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active {
  background-color: rgba(201, 168, 76, 0.08);
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active .menu-title {
  color: #C9A84C !important;
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active .menu-icon i {
  color: #C9A84C !important;
}

/* ── Button primary override ── */
.btn-primary {
  background-color: #C9A84C;
  border-color: #C9A84C;
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #B8943F;
  border-color: #B8943F;
  color: #fff;
}

.btn-primary:active,
.btn-primary.active {
  background-color: #A8842F;
  border-color: #A8842F;
}

.btn-outline-primary {
  color: #C9A84C;
  border-color: #C9A84C;
}

.btn-outline-primary:hover {
  background-color: #C9A84C;
  border-color: #C9A84C;
  color: #fff;
}

/* ── Badge light variants ── */
.badge-light-primary {
  background-color: rgba(201, 168, 76, 0.1);
  color: #C9A84C;
}

.badge-light-success {
  background-color: rgba(80, 205, 137, 0.1);
  color: #50CD89;
}

.badge-light-warning {
  background-color: rgba(255, 199, 0, 0.1);
  color: #FFC700;
}

.badge-light-danger {
  background-color: rgba(241, 65, 108, 0.1);
  color: #F1416C;
}

.badge-light-secondary {
  background-color: rgba(228, 230, 239, 0.1);
  color: #A1A5B7;
}

/* ── Inter font (Metronic default) ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ─── A wide table must scroll inside its card, never move the page ───
   Metronic's content column is a flex container, and a flex item's
   default `min-width: auto` refuses to shrink below its own content —
   so a card holding a wide table grows past the viewport and takes the
   whole page with it, however correctly that table is wrapped in
   `.table-responsive`. Measured on the dashboard at 390px: 636px of
   content in a 390px viewport, which reads as broken rather than as
   wide, and it is the commonest phone-width defect there is.
   `ui_is_presentable_test` measures every member page at 390px. */
.app-page,
.app-wrapper,
.app-main,
.app-content,
.app-container,
.app-content .card,
.app-content .card-body,
.app-content .row > [class^="col"],
.app-content .row > [class*=" col"] {
  min-width: 0;
}

.table-responsive {
  max-width: 100%;
}

/* Metronic's build does not give `.table-responsive` a horizontal scroll,
   so a wide table inside a card walks the whole page sideways instead of
   scrolling within its own box. Measured on the dashboard: table rows
   671px wide in a 375px viewport. */
.table-responsive {
  overflow-x: auto;
}

/* `flex-stack` rows carry `flex-shrink-0` children, which is right on a
   desktop and is what pushes the featured-deal card past the viewport on
   a phone — a label and a figure that will not shrink and cannot wrap.
   Below the `sm` breakpoint they wrap instead. Phones only: the desktop
   layout is the one those rows were designed for. */
@media (max-width: 575.98px) {
  .app-content .flex-stack {
    flex-wrap: wrap;
  }

  /* `flex-shrink-0` is a desktop instruction: keep this figure on one
     line beside its neighbour. On a phone it makes the child size to its
     own max-content and push the page sideways — measured at 537px in a
     375px viewport on the featured-deal card. Inside a `flex-stack` row,
     on phones only, the child may shrink and its text may wrap. */
  /* `!important` because Bootstrap's own utility is
     `.flex-shrink-0 { flex-shrink: 0 !important }`, and a rule that
     exists is not a rule that wins. */
  .app-content .flex-stack > .flex-shrink-0 {
    flex-shrink: 1 !important;
    min-width: 0;
  }
}