/*-----------------------------------------------
|   Footer height (after theme.css — do not set in phoenix-user-layer; theme loads later)
-----------------------------------------------*/
:root {
  --phoenix-footer-height: 3rem;
}
@media (min-width: 576px) {
  :root {
    --phoenix-footer-height: 2rem;
  }
}

/*
 * Keep the shell surface one continuous tone with `.content` so any slack above the
 * fixed copyright bar isn’t a different “white” than the main column.
 */
#root,
#root > .container-fluid,
#root > [data-asn-app-shell] > .container-fluid {
  min-height: 100vh;
  background-color: var(--phoenix-body-bg);
}

/* Compact copyright row for shorter `--phoenix-footer-height` on sm+ */
@media (min-width: 576px) {
  .content > footer.footer p {
    margin-top: 0 !important;
    line-height: 1.2;
    font-size: 0.8125rem;
  }
}

/*
 * Dark theme: Phoenix uses coral/salmon for `--phoenix-danger` (~#F48270). Override to the
 * same red family as light mode (`#EC1F00`) so danger UI (badges, text, borders, buttons)
 * reads as red app-wide. Loaded after `theme.css` (see useToggleStyle).
 */
[data-bs-theme='dark'] {
  --phoenix-danger: #ec1f00;
  --phoenix-danger-rgb: 236, 31, 0;
  --phoenix-danger-text-emphasis: #fa3b1d;
  --phoenix-danger-bg-subtle: #2a1b1e;
  --phoenix-danger-border-subtle: #5c2a2e;
  --phoenix-danger-lighter: #b81800;
  --phoenix-danger-light: #fa3b1d;
  --phoenix-danger-dark: #ec1f00;
  --phoenix-danger-darker: #ec1f00;
  --phoenix-danger-lighter-rgb: 184, 24, 0;
  --phoenix-danger-light-rgb: 250, 59, 29;
  --phoenix-danger-dark-rgb: 236, 31, 0;
  --phoenix-danger-darker-rgb: 236, 31, 0;
}

/*
 * Dark theme: Phoenix forces `color: var(--phoenix-black)` on `.badge.bg-danger` (paired with
 * the old coral fill). With a true red background, use white label text for contrast.
 */
[data-bs-theme='dark'] .text-bg-danger,
[data-bs-theme='dark'] .badge.bg-danger {
  color: #fff !important;
}

/*
 * Warning badges: keep Phoenix dark-theme black ink on `.badge.bg-warning`
 * (peach fill). Light theme stays white via `.text-white` / `.text-bg-warning`.
 * Do not re-add a white-text override (`docs/ui-badge-playbook.md`).
 */

/*-----------------------------------------------
|   FullCalendar (after theme.css)
-----------------------------------------------*/
/*
 * Phoenix `_full-calendar.scss` uses `--phoenix-warning-dark` for Fri/Sat. Use normal weekday ink.
 */
.fc.fc-theme-standard .fc-daygrid-day.fc-day-fri,
.fc.fc-theme-standard .fc-daygrid-day.fc-day-sat {
  color: var(--phoenix-body-color) !important;
}

/*-----------------------------------------------
|   Nav tabs (after theme.css)
-----------------------------------------------*/
/*
 * Phoenix `_nav-tab.scss` strips Bootstrap folder tabs (`border-bottom: 0`, `border: none` on links).
 * Restore bordered tabs using `--phoenix-nav-tabs-*` from the earlier `.nav-tabs` block in `theme.css`.
 */
.nav-tabs {
  border-bottom: var(--phoenix-nav-tabs-border-width) solid var(--phoenix-nav-tabs-border-color);
}

.nav-tabs .nav-link {
  margin-bottom: calc(-1 * var(--phoenix-nav-tabs-border-width));
  border: var(--phoenix-nav-tabs-border-width) solid transparent;
  border-top-left-radius: var(--phoenix-nav-tabs-border-radius);
  border-top-right-radius: var(--phoenix-nav-tabs-border-radius);
  color: var(--phoenix-body-color);
}

.nav-tabs .nav-link:not(.disabled):not(:disabled):not(.active):hover,
.nav-tabs .nav-link:not(.disabled):not(:disabled):not(.active):focus {
  isolation: isolate;
  border-color: var(--phoenix-nav-tabs-link-hover-border-color);
}

.nav-tabs .nav-link.disabled,
.nav-tabs .nav-link:disabled {
  color: var(--phoenix-secondary-color);
  background-color: transparent;
  border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--phoenix-nav-tabs-link-active-color);
  background-color: var(--phoenix-nav-tabs-link-active-bg);
  border-color: var(--phoenix-nav-tabs-link-active-border-color);
}

/*-----------------------------------------------
|   Phoenix buttons
-----------------------------------------------*/
/* -------------------------------------------------------------------------- */
/*                                Phoenix button                              */
/* -------------------------------------------------------------------------- */
/* prettier-ignore */

/*
 * `outline-light` (Edit / Return-for-edits — `docs/ui-button-styles-playbook.md`):
 * Phoenix omits `.btn-outline-light` in `theme.css`. Light theme uses dark ink + gray
 * stroke (pale gray on white is unreadable). Dark theme keeps the light stroke family.
 * Hover fills the light chip (`#e3e6ed` / white) instead of inverting like `outline-secondary`.
 */
.btn-outline-light {
  --phoenix-btn-color: #141824;
  --phoenix-btn-border-color: #9fa6bc;
  --phoenix-btn-hover-color: #141824;
  --phoenix-btn-hover-bg: #e3e6ed;
  --phoenix-btn-hover-border-color: #cbd0dd;
  --phoenix-btn-focus-shadow-rgb: 159, 166, 188;
  --phoenix-btn-active-color: #141824;
  --phoenix-btn-active-bg: #cbd0dd;
  --phoenix-btn-active-border-color: #9fa6bc;
  --phoenix-btn-active-shadow: initial;
  --phoenix-btn-disabled-color: rgba(20, 24, 36, 0.45);
  --phoenix-btn-disabled-bg: transparent;
  --phoenix-btn-disabled-border-color: rgba(159, 166, 188, 0.45);
  --phoenix-gradient: none;
}

[data-bs-theme='dark'] .btn-outline-light {
  --phoenix-btn-color: rgba(255, 255, 255, 0.92);
  --phoenix-btn-border-color: rgba(255, 255, 255, 0.5);
  --phoenix-btn-hover-color: #141824;
  --phoenix-btn-hover-bg: #fff;
  --phoenix-btn-hover-border-color: #fff;
  --phoenix-btn-focus-shadow-rgb: 255, 255, 255;
  --phoenix-btn-active-color: #141824;
  --phoenix-btn-active-bg: #e9ecef;
  --phoenix-btn-active-border-color: #fff;
  --phoenix-btn-disabled-color: rgba(255, 255, 255, 0.4);
  --phoenix-btn-disabled-border-color: rgba(255, 255, 255, 0.22);
}