/* NIHOA Dark Professional Theme - NHL/Arbiter Sports Inspired */
:root {
    --nihoa-primary: #0B1426;
    --nihoa-secondary: #1E3A5F;
    --nihoa-accent: #FFD700;
    --nihoa-danger: #DC3545;
    --nihoa-success: #28A745;
    --nihoa-warning: #FFC107;
    --nihoa-light: #F8F9FA;
    --nihoa-dark: #121212;
    --nihoa-border: #2A3441;
    --nihoa-card-bg: #1A1A1A;
    --nihoa-text-muted: #A0A0A0;
}

* {
    box-sizing: border-box;
}

body {
    background: linear-gradient(135deg, #0B1426 0%, #1A1A1A 100%);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: #ffffff;
    min-height: 100vh;
}

/* Navigation Styling */
.navbar {
    background: linear-gradient(90deg, var(--nihoa-primary) 0%, var(--nihoa-secondary) 100%) !important;
    border-bottom: 2px solid var(--nihoa-accent);
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);

    /* Issue #236 — do NOT reintroduce backdrop-filter here.
       A non-none backdrop-filter creates a stacking context on .navbar, which
       traps the child .dropdown-menu (z-index 1000) inside it. The member nav
       carries no sticky-top, so the navbar sits at z-index auto and .hero-content
       (z-index 2) painted straight over the open Admin dropdown. The blur was
       invisible anyway — the gradient above is opaque. The explicit z-index below
       keeps the nav and its dropdowns above page content regardless. */
    position: relative;
    z-index: 1030;
}

.navbar-brand {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--nihoa-accent) !important;
}

.navbar-nav .nav-link {
    color: rgba(255,255,255,0.9) !important;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.navbar-nav .nav-link:hover {
    color: var(--nihoa-accent) !important;
    transform: translateY(-1px);
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--nihoa-accent);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.navbar-nav .nav-link:hover::after {
    width: 100%;
}

/* Hero Section */
.nihoa-hero {
    background: linear-gradient(135deg, rgba(11,20,38,0.95) 0%, rgba(30,58,95,0.95) 100%), 
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="%23ffffff" fill-opacity="0.05" points="0,1000 1000,0 1000,1000"/></svg>');
    color: white;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.nihoa-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255,215,0,0.1) 0%, transparent 70%);
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    background: linear-gradient(45deg, #ffffff, var(--nihoa-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

/* Cards */
.card {
    background: var(--nihoa-card-bg);
    border: 1px solid var(--nihoa-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--nihoa-accent) 0%, var(--nihoa-secondary) 100%);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(255,215,0,0.2);
    border-color: var(--nihoa-accent);
}

.card-header {
    background: linear-gradient(135deg, var(--nihoa-secondary) 0%, var(--nihoa-primary) 100%);
    color: white;
    font-weight: 600;
    border-bottom: 2px solid var(--nihoa-accent);
    padding: 1.25rem;
}

.card-body {
    padding: 1.5rem;
    color: #ffffff;
}

/* Registration Period Card */
.registration-card {
    background: linear-gradient(135deg, var(--nihoa-secondary) 0%, #2E5D31 100%);
    border: 2px solid var(--nihoa-accent);
    position: relative;
    overflow: hidden;
}

.registration-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,215,0,0.1), transparent);
    transform: rotate(45deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(300%) rotate(45deg); }
}

/* Stats Cards */
.stat-card {
    background: linear-gradient(135deg, var(--nihoa-secondary) 0%, var(--nihoa-primary) 100%);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, var(--nihoa-accent), transparent, var(--nihoa-accent));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card:hover::before {
    opacity: 0.1;
}

.stat-number {
    font-size: 3rem;
    font-weight: 900;
    color: var(--nihoa-accent);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1.1rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Buttons */
.btn-nihoa-primary {
    background: linear-gradient(135deg, var(--nihoa-accent) 0%, #FFB000 100%);
    border: none;
    color: var(--nihoa-primary);
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(255,215,0,0.3);
}

.btn-nihoa-primary:hover {
    background: linear-gradient(135deg, #FFB000 0%, var(--nihoa-accent) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,215,0,0.4);
    color: var(--nihoa-primary);
}

.btn-nihoa-outline {
    border: 2px solid var(--nihoa-accent);
    color: var(--nihoa-accent);
    background: transparent;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-nihoa-outline:hover {
    background: var(--nihoa-accent);
    color: var(--nihoa-primary);
    transform: translateY(-2px);
}

/* Feature Cards */
.feature-card {
    text-align: center;
    padding: 2rem;
    height: 100%;
}

.feature-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    color: var(--nihoa-accent);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.feature-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--nihoa-accent);
}

/* Status Badges */
.badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-open {
    background: linear-gradient(135deg, var(--nihoa-success) 0%, #20C997 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(40,167,69,0.3);
}

/* Container Adjustments */
.container-fluid {
    max-width: 1400px;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
    
    .nihoa-hero {
        padding: 2rem 0;
    }
}

/* Loading Animation */
.fade-in {
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--nihoa-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--nihoa-accent);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #FFB000;
}

/* ---------------------------------------------------------------------------
   Issue #233 — dark-theme text contrast.

   The :root block at the top of this file declares --nihoa-text-muted but
   nothing ever consumed it, so Bootstrap's own .text-muted / .text-secondary
   kept winning. Those resolve against Bootstrap's LIGHT-theme body colour
   (near-black), and this theme paints a near-black background — so every
   "muted" string on the site rendered dark-on-dark and was only legible once
   you text-selected it. "text-muted" appears in ~90 view files, so overriding
   the class here is what actually fixes them all rather than patching views.

   #A0A0A0 on the darkest surface (#121212) is ~7.4:1 — clears WCAG AA (4.5:1)
   and AAA (7:1) for body text.
   --------------------------------------------------------------------------- */
.text-muted,
.text-secondary,
small.text-muted,
.card .text-muted,
.card-body .text-muted,
.list-group-item .text-muted,
.dropdown-item .text-muted {
    color: var(--nihoa-text-muted) !important;
}

/* Bootstrap utility opacity classes stack on top of an already-dim colour and
   push it back under the contrast floor. Raise the floor for the two we use. */
.opacity-75 { opacity: 0.9 !important; }
.opacity-50 { opacity: 0.75 !important; }

/* .text-light at reduced opacity inside the hero was the other offender
   (hero subtitle, "NIHOA Member"). Keep it genuinely light. */
.nihoa-hero .text-light,
.nihoa-hero .lead {
    color: #E8E8E8 !important;
}

/* Empty-state blocks (no claims / no notifications) lean on .text-muted for
   both the headline and the sub-line; give the headline a bit more presence
   so the two are distinguishable. */
.empty-state h5,
.empty-state h6,
.text-center > .text-muted + .text-muted {
    color: #C8C8C8 !important;
}

/* Definition lists on the dashboard Account Information card. */
dl dt { color: #FFFFFF; }
dl dd { color: #E0E0E0; }

/* ---------------------------------------------------------------------------
   Issue #253 — printable NIHOA membership card.

   Sized to CR80 (the real ID-card standard, 3.375in x 2.125in) so a printed
   sheet can be trimmed to something that fits a wallet or a referee's kit bag.
   Uses `in` units on purpose: at print time physical units are exact, whereas
   px depends on the browser's DPI assumption.
   --------------------------------------------------------------------------- */
.nihoa-idcard {
    width: 3.375in;
    height: 2.125in;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.16in 0.18in;
    border-radius: 12px;
    /* LIGHT on purpose (toner-friendly, and it mirrors the PDF exactly so the
       on-screen preview is WYSIWYG). A real credential looks like this. */
    background: #FFFFFF;
    border: 1.5px solid var(--nihoa-secondary);
    border-top: 5px solid #C8A200;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    color: #10182B;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    overflow: hidden;
}

.nihoa-idcard-top {
    display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem;
}
.nihoa-idcard-brand { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.nihoa-idcard-brand > i { color: var(--nihoa-secondary); font-size: 1.35rem; flex: 0 0 auto; }
.nihoa-idcard-wordmark {
    color: var(--nihoa-secondary); font-weight: 800; font-size: 1.15rem;
    letter-spacing: .06em; line-height: 1;
}
.nihoa-idcard-org {
    font-size: .44rem; text-transform: uppercase; letter-spacing: .07em;
    color: #4A5568; line-height: 1.25; margin-top: .1rem;
}

.nihoa-idcard-status {
    flex: 0 0 auto;
    font-size: .46rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: .18rem .42rem; border-radius: 999px; white-space: nowrap;
}
.nihoa-idcard.is-active  .nihoa-idcard-status { background: #fff; color: #12551F; border: 1px solid #12551F; }
.nihoa-idcard.is-pending .nihoa-idcard-status { background: var(--nihoa-warning); color: #212529; }
.nihoa-idcard.is-void    .nihoa-idcard-status { background: #333; color: #fff; }
/* A card that isn't currently valid should read that way at a glance. */
.nihoa-idcard.is-void { border-color: rgba(220, 53, 69, .8); filter: grayscale(.35); }

.nihoa-idcard-body { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.nihoa-idcard-photo {
    width: .82in; height: .82in; flex: 0 0 auto;
    border-radius: 8px; object-fit: cover;
    border: 2px solid var(--nihoa-secondary); background: #EEF1F6;
}
.nihoa-idcard-photo--empty {
    display: flex; align-items: center; justify-content: center;
    color: #9AA5B8; font-size: 1.5rem;
}
.nihoa-idcard-details { min-width: 0; }
.nihoa-idcard-name {
    font-size: .95rem; font-weight: 700; line-height: 1.1; margin-bottom: .18rem;
    color: #10182B;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nihoa-idcard-meta {
    display: grid; grid-template-columns: auto 1fr; gap: 0 .4rem; margin: 0;
}
.nihoa-idcard-meta dt {
    font-size: .42rem; text-transform: uppercase; letter-spacing: .08em;
    color: #5A6478; font-weight: 600; align-self: center;
}
.nihoa-idcard-meta dd {
    font-size: .58rem; margin: 0; color: #10182B; align-self: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nihoa-idcard-meta dd.mono {
    font-family: 'Courier New', monospace; font-weight: 700;
    color: var(--nihoa-secondary); letter-spacing: .06em;
}

.nihoa-idcard-foot {
    display: flex; justify-content: space-between; gap: .4rem;
    font-size: .4rem; letter-spacing: .05em; color: #5A6478;
    border-top: 1px solid #C9CFDC; padding-top: .12rem;
}

/* Narrow phones: let the card shrink proportionally on screen. Print sizing
   below is unaffected — a printed card must stay physically correct. */
@media (max-width: 420px) {
    .nihoa-idcard { transform: scale(.86); transform-origin: top left; margin-bottom: -.3in; }
}

/* Printing is handled by the real PDF at /member/card.pdf (issue #253), so
   the browser-print stylesheet that used to live here has been removed — two
   print paths that could drift apart is one too many. */

/* ---------------------------------------------------------------------------
   Issue #257 — card headers carrying a Bootstrap bg-* utility.

   .card-header above sets a dark navy gradient. A view that writes
   `card-header bg-warning text-dark` loses the BACKGROUND fight (same
   specificity, this file loads after Bootstrap) but KEEPS text-dark — so the
   heading rendered near-black on the dark gradient and was invisible until
   you selected it (reported on /member/profile "Security").

   Two intents, two treatments — deliberately NOT one blanket rule:

   * bg-warning — the author meant "look here" (the 2FA policy notice, the API
     token warning). Honour it: real amber panel, dark text. Reads as intended
     emphasis rather than a styling accident.

   * bg-light — 11 section headers inside the admin chapter forms/views,
     written against the old light theme. Letting those win would drop eleven
     white bars into dark cards. Keep the dark gradient and just correct the
     foreground, so they match every other card header on the site.
   --------------------------------------------------------------------------- */
.card-header.bg-warning {
    background: var(--nihoa-warning) !important;
    border-bottom-color: var(--nihoa-accent);
}
.card-header.bg-warning,
.card-header.bg-warning h1, .card-header.bg-warning h2, .card-header.bg-warning h3,
.card-header.bg-warning h4, .card-header.bg-warning h5, .card-header.bg-warning h6,
.card-header.bg-warning strong, .card-header.bg-warning i {
    color: #212529 !important;
}

/* bg-light headers: neutralise back into the dark theme. */
.card-header.bg-light {
    background: linear-gradient(135deg, var(--nihoa-secondary) 0%, var(--nihoa-primary) 100%) !important;
}
.card-header.bg-light,
.card-header.bg-light strong,
.card-header.bg-light h1, .card-header.bg-light h2, .card-header.bg-light h3,
.card-header.bg-light h4, .card-header.bg-light h5, .card-header.bg-light h6 {
    color: #FFFFFF !important;
}

/* `bg-nihoa-primary` (public/vendors.php) was never defined anywhere — the
   header fell back to the default gradient, which happens to look right, but
   define it so the intent is real rather than accidental. */
.bg-nihoa-primary {
    background: linear-gradient(135deg, var(--nihoa-secondary) 0%, var(--nihoa-primary) 100%) !important;
}

/* ---------------------------------------------------------------------------
   Issue #238 — admin top bar. The items were wrapping onto a second line and
   "Claims Queue" broke across two lines around its count badge. body carries
   .admin-layout (app/Views/layouts/admin.php), so scope tightly to admin.
   --------------------------------------------------------------------------- */
.admin-layout .navbar .navbar-nav .nav-link {
    white-space: nowrap;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}

.admin-layout .navbar .navbar-nav .nav-link .badge {
    vertical-align: middle;
    font-size: 0.7em;
}

/* Issue #246 — REGRESSION FIX. This block previously forced
   `flex-wrap: nowrap` on .navbar-collapse and .navbar-nav at >=992px. That did
   stop the two-line wrap, but it converted the overflow into a horizontal one:
   with 12 top-level items the bar ran clean off the right edge of the page and
   put a scrollbar on the document. The real cure was reducing the item count
   (Governance / Finance / Setup dropdowns in admin/partials/nav.php) plus
   navbar-expand-xl, NOT forbidding the wrap. Wrapping is left as the safe
   last-resort behaviour — a second line beats content you cannot reach.
   Keep `white-space: nowrap` on the links above: that is what stops an
   individual label like "Claims Queue" breaking around its count badge. */
.admin-layout .navbar-collapse,
.admin-layout .navbar .navbar-nav {
    flex-wrap: wrap;
}

/* Absolute backstop: the admin bar must never make the page scroll sideways. */
.admin-layout .navbar > .container-fluid {
    max-width: 100%;
    overflow-x: clip;
}

/* Dropdown panels sit on the dark theme — make sure their own text is legible
   and not inheriting the muted override above as a hover colour. */
.dropdown-menu-dark .dropdown-item { color: #E9ECEF; }
.dropdown-menu-dark .dropdown-item:hover,
.dropdown-menu-dark .dropdown-item:focus {
    background-color: var(--nihoa-secondary);
    color: var(--nihoa-accent);
}