/**
 * Loaded after Metronic style.bundle.css.
 * Metronic uses selectors like .btn.btn-primary:hover:not(.btn-active) with !important on
 * background-color — one pseudo-class more than .btn.btn-primary:hover, so it wins over our
 * older overrides → light/white hover + white text (e.g. Add Team Member with PHS tooltip, Save in calendar modal).
 * Match :not(.btn-active) (and Metronic’s grouped states) so these rules actually apply.
 */

.btn.btn-primary {
    color: #ffffff !important;
    background-color: var(--phs-primary-action) !important;
    background-image: none !important;
    border-color: var(--phs-primary-action) !important;
    filter: none !important;
}

.btn.btn-primary:hover:not(.btn-active),
.show > .btn.btn-primary {
    color: #ffffff !important;
    background-color: var(--phs-primary-action-hover) !important;
    background-image: none !important;
    border-color: #1b4fc2 !important;
    filter: none !important;
}

.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:focus-visible:not(.btn-active),
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary.active,
.btn.btn-primary.show {
    color: #ffffff !important;
    background-color: #1d4ed8 !important;
    background-image: none !important;
    border-color: #1b4fc2 !important;
    filter: none !important;
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.4) !important;
}

.btn.btn-primary:active:not(.btn-active) {
    background-color: #1e40af !important;
    border-color: #1e3a8a !important;
}

/* Metronic indicator pattern (e.g. calendar Save) — keep label visible on primary hover/focus */
.btn.btn-primary:hover:not(.btn-active) .indicator-label,
.btn.btn-primary:focus:not(.btn-active) .indicator-label,
.btn.btn-primary:focus-visible:not(.btn-active) .indicator-label,
.btn.btn-primary:active:not(.btn-active) .indicator-label,
.btn.btn-primary.active .indicator-label,
.btn.btn-primary.show .indicator-label,
.show > .btn.btn-primary .indicator-label {
    color: #ffffff !important;
    opacity: 1 !important;
}

[data-theme="dark"] .btn.btn-primary,
[data-theme="dark"] .btn.btn-primary:hover:not(.btn-active),
[data-theme="dark"] .btn.btn-primary:focus:not(.btn-active),
[data-theme="dark"] .btn.btn-primary:focus-visible:not(.btn-active),
[data-theme="dark"] .btn.btn-primary:active:not(.btn-active),
[data-theme="dark"] .show > .btn.btn-primary {
    color: #ffffff !important;
    background-color: #2563eb !important;
    background-image: none !important;
    border-color: #2563eb !important;
    filter: none !important;
}

[data-theme="dark"] .btn.btn-primary:hover:not(.btn-active),
[data-theme="dark"] .btn.btn-primary:focus:not(.btn-active),
[data-theme="dark"] .btn.btn-primary:focus-visible:not(.btn-active),
[data-theme="dark"] .btn.btn-primary:active:not(.btn-active),
[data-theme="dark"] .show > .btn.btn-primary {
    background-color: #187ce4 !important;
    border-color: #1478df !important;
}

/*
 * Dark buttons (the Back buttons used across the app). Three things fixed here:
 * (1) Many page stylesheets set .btn-dark:hover { color:black } over a dark hover fill,
 *     so the label went invisible on hover everywhere.
 * (2) Those same rules killed the hover feedback — keep a subtle lighter fill on hover.
 * (3) The Back buttons use .d-inline-flex with an oversized arrow, so they rendered a
 *     different height than the standard inline-block buttons; normalize the box.
 * Matches Metronic's :not(.btn-active) specificity (loaded after the theme) so it wins
 * over both the theme and the page-level rules.
 */
.btn.btn-dark {
    color: #ffffff !important;
    background-color: #1f2937 !important;
    border-color: #1f2937 !important;
    background-image: none !important;
    filter: none !important;
}

.btn.btn-dark:hover:not(.btn-active),
.btn.btn-dark:focus:not(.btn-active),
.btn.btn-dark:focus-visible:not(.btn-active),
.btn.btn-dark:active:not(.btn-active),
.btn.btn-dark.active,
.btn.btn-dark.show,
.show > .btn.btn-dark {
    color: #ffffff !important;
    background-color: #374151 !important;
    border-color: #374151 !important;
    background-image: none !important;
    filter: none !important;
}

.btn.btn-dark i {
    color: #ffffff !important;
}

/* Back buttons render as a standard button so their height matches the rest. They were
   picking up extra vertical padding (≈11px vs the standard ≈8px), making them taller than
   the sibling buttons; pin them to the Metronic standard .btn padding (0.625rem 1.5rem). */
.btn.btn-dark.d-inline-flex {
    display: inline-block !important;
    padding: 0.625rem 1.5rem !important;
}

.btn.btn-dark.d-inline-flex > i {
    vertical-align: middle;
}

/* Font Awesome Pro kit is the single icon source; Metronic plugins.bundle ships Free font-family rules. */
.fa-solid,
.fas {
    font-family: "Font Awesome 6 Pro" !important;
    font-weight: 900;
}

.fa-regular,
.far {
    font-family: "Font Awesome 6 Pro" !important;
    font-weight: 400;
}

.fa-brands,
.fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400;
}

/* Portal button scale. Metronic's .btn default (~1.075rem) ran larger than the
   portal's 0.9rem control standard, so plain Metronic buttons towered over the
   pinned controls beside them (Back vs New Announcement). Redefining the token
   here (after the theme bundle) aligns every Bootstrap/Metronic button in one
   place; buttons that pin their own font-size are unaffected. */
.btn {
    --bs-btn-font-size: 0.9rem;
}

.btn-sm,
.btn-group-sm > .btn {
    --bs-btn-font-size: 0.8rem;
}

.btn-lg,
.btn-group-lg > .btn {
    --bs-btn-font-size: 1rem;
}

/* Portal action-button height. .btn-primary / .btn-gradient-primary / .btn-success fell
   through to Metronic's 0.775rem padding (42.6px at Medium), while the portal's
   .btn-secondary / .btn-light standard is 0.625rem (36.4px) — so action buttons towered
   over Cancel/Back in mixed footers. Pin them to the compact standard. !important clears
   Metronic's (0,7,0) .btn:not(.btn-outline):not(...) padding; sm/lg/icon buttons are
   excluded so their geometry is intact. Horizontal padding stays 1.5rem (unchanged). */
.btn.btn-primary:not(.btn-sm):not(.btn-lg):not(.btn-icon),
.btn.btn-gradient-primary:not(.btn-sm):not(.btn-lg):not(.btn-icon),
.btn.btn-success:not(.btn-sm):not(.btn-lg):not(.btn-icon) {
    padding: 0.625rem 1.5rem !important;
}

/* Portal type scale for Metronic's fs-* utilities. Metronic's scale runs a step
   larger than the portal's (fs-6 body text at 1.075rem vs the portal's 0.9rem
   control standard), so every page styled with fs-* classes read oversized next
   to portal-styled pages. Recalibrated to the portal tiers:
   fs-1 = page title, fs-4 = card title, fs-6 = body, fs-7 = secondary. */
.fs-1 { font-size: 1.5rem !important; }
.fs-2 { font-size: 1.35rem !important; }
.fs-3 { font-size: 1.2rem !important; }
.fs-4 { font-size: 1.125rem !important; }
.fs-5 { font-size: 1rem !important; }
.fs-6 { font-size: 0.9rem !important; }
.fs-7 { font-size: 0.8rem !important; }
.fs-8 { font-size: 0.75rem !important; }
.fs-9 { font-size: 0.7rem !important; }

/* Plain text inside cards inherits the 16px body base, which runs a step larger
   than the portal's 0.9375rem body standard. Pin card content to the portal
   scale; elements that set their own size (titles, badges, fs-*) are unaffected. */
.card-body {
    font-size: 0.9375rem;
}

/* Portal input scale. Metronic's .form-control/.form-select default to 1.1rem
   (~15.4px at Medium), a step larger than the portal's 0.9375rem body/label
   standard, so input text and placeholders towered over the labels beside them.
   Pin the whole input scale here (after the theme bundle, equal specificity so no
   !important needed) — same one-place approach as the .btn and .fs-* recalibration
   above. Size variants keep their relative step: base = body, lg one up, sm one down. */
.form-control,
.form-select {
    font-size: 0.9375rem;
}

.form-control-lg,
.form-select-lg,
.input-group-lg > .form-control,
.input-group-lg > .form-select {
    font-size: 1rem;
}

.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select {
    font-size: 0.85rem;
}

/* Metronic's .text-muted (#99A1B7 !important from style.bundle) fails 4.5:1 on light
   surfaces (2.42 on #f5f8fa). Darken it after the bundle so it reads. Light only -
   dark keeps the page-level --phs-ink-muted override, which already passes. */
html:not([data-theme="dark"]) .text-muted {
    color: #6b7280 !important;
}

/* Metronic's global input placeholder is #99A1B7 (2.58 on white - fails 4.5). site.css
   loads before the bundle so only this file (after the bundle) can beat it. Light only;
   dark placeholders sit on dark input fills and are handled per-page. #6b7280 = 4.83 on
   white, 4.5+ on the common light input fills. Inputs on a more-tinted fill carry their
   own darker per-page override. */
html:not([data-theme="dark"]) .form-control::placeholder {
    color: #6b7280;
}

/* Disabled / read-only fields in dark mode. Page dark rules paint the same fill + crisp
   text whether the field is enabled or not, so a read-only field (e.g. for a delegated
   viewer) looked editable — light mode greys it out, dark mode didn't. Give disabled /
   readonly controls a flatter grey fill, muted-but-legible text and a not-allowed cursor
   so the inactive state is obvious. The :disabled/[readonly] pseudo adds specificity, so
   this beats the plain page fills; !important covers the ones that pin their fill. */
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .form-select:disabled,
[data-theme="dark"] textarea:disabled,
[data-theme="dark"] textarea[readonly] {
    background-color: #262630 !important;
    color: #9aa0ac !important;
    border-color: #363642 !important;
    cursor: not-allowed;
    opacity: 1;
}

/* Bootstrap .form-text and .text-muted resolve to --bs-secondary-color, which stays
   its dark light-theme value in dark mode because the app themes via [data-theme], not
   [data-bs-theme]. Where Bootstrap's rule wins the cascade the text renders dark-on-dark
   (measured 1.03 on a dark card). Force both to the muted ink in dark; #a7aebb clears
   4.5:1 on every dark surface (6.63 on the modal, 6.26 on the darkest cards). Dark
   surfaces are where .text-muted lives - chips/badges set their own colors. */
[data-theme="dark"] .form-text,
[data-theme="dark"] .text-muted {
    color: var(--phs-ink-muted) !important;
}

/* Metronic .text-gray-N and .text-dark are a fixed dark-ink scale (hardcoded dark
   with !important) and have no dark-theme inverse, so they render dark-on-dark.
   Invert the scale for dark mode. All values script-verified >= their floor on the
   lightest dark surface (#374151): 900 9.53, 800 8.33, 700 6.94, 600 4.62.
   Elements on a light-in-dark surface set their own colors, so this is safe. */
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-dark {
    color: #f4f6fb !important;
}

[data-theme="dark"] .text-gray-800 {
    color: #e5e7eb !important;
}

[data-theme="dark"] .text-gray-700 {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .text-gray-600 {
    color: #a7aebb !important;
}

/* SweetAlert2 popups render on document.body, outside any page container, so
   page-scoped dark rules never reach them and they stay white in dark mode.
   Theme them globally (matches the Tactical Plans popup scheme: #1e1e2d card,
   #f1f5f9 title 14.99:1, #cbd5e1 body 11.06:1). Icons and buttons keep their
   own colors. */
[data-theme="dark"] .swal2-popup {
    background-color: #1e1e2d !important;
}

[data-theme="dark"] .swal2-popup .swal2-title {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .swal2-popup .swal2-html-container,
[data-theme="dark"] .swal2-popup #swal2-html-container {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .swal2-popup .swal2-close {
    color: #cbd5e1 !important;
}