/* Awilda shared component layer. Namespace: .awilda-*. Consumed app-wide.
   Values are preserved from the merged gold-standard sheets (SBR / Enrollments /
   ParentReg) and the TransactionTypes reference, so screens using this layer match them.

   HARD RULES encoded here:
   - No class may contain the substring "card-header-" (CDN material-dashboard.css
     hijacks [class*="card-header-"]).
   - Selectors that must beat Site.css !important (links forced to weight 400, the
     brand-yellow "p > a", input max-width:280px) carry the minimum !important needed,
     noted inline.
   - Account for the FontAwesome 5 <i> -> <svg> runtime swap: never hold jQuery refs
     across it; animate via a parent class, not the swapped node.
   Depends on the --awilda-* brand tokens and --awilda-slate-* scale in Site.css :root. */

/* =========================================================================
   Buttons (supersedes the per-feature .ttw-btn)
   ========================================================================= */
.awilda-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid transparent; border-radius: 10px; padding: 10px 22px;
    font-weight: 700 !important; /* beats Site.css a{font-weight:400!important} on <a> buttons */
    /* Declared, not inherited. Omitting it let a migrated button render at the surrounding text
       size and sit visibly larger than the .ttw-btn family it shares a screen with. */
    font-size: .87rem;
    line-height: 1.1; cursor: pointer; text-decoration: none;
    transition: transform 120ms ease-out, background-color 120ms ease, border-color 120ms ease;
}
.awilda-btn:active { transform: scale(.97); }
.awilda-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(58, 195, 207, .30); }
@media (pointer: coarse) { .awilda-btn { min-height: 44px; } }

.awilda-btn.pri    { background: var(--awilda-navy); color: #fff; }
.awilda-btn.save   { background: var(--awilda-navy); color: #fff; }
/* Cancel: neutral outline. NOT coral — coral-alt text fails AA (2.5:1) and coral-deep
   would be visually identical to .danger-outline (Cancel must not read as destructive). */
.awilda-btn.ghost  { background: #fff; color: var(--awilda-slate-600); border-color: var(--awilda-slate-300); }
.awilda-btn.back   { background: var(--awilda-slate-100); color: var(--awilda-slate-600); }

/* Every variant hovers. The base already declares a background-color transition, so a variant
   without a :hover animates toward a state that never arrives -- the button just sits there under
   the cursor. Only .danger had one, which is how the first screen migrated onto this layer lost
   the hover its .ttw-btn.save had. #1f2740 is that same navy-pressed value. */
.awilda-btn.pri:hover,
.awilda-btn.save:hover  { background: #1f2740; }
.awilda-btn.ghost:hover { background: var(--awilda-slate-50); border-color: var(--awilda-slate-400); }
.awilda-btn.back:hover  { background: var(--awilda-slate-200); }
.awilda-btn.danger { background: var(--awilda-coral-deep); color: #fff; }
.awilda-btn.danger:hover { filter: brightness(.95); }
.awilda-btn.danger-outline {
    background: transparent; color: var(--awilda-coral-deep); border-color: var(--awilda-coral-deep);
}
.awilda-btn.danger-outline:visited { color: var(--awilda-coral-deep); } /* survive on <a> */
.awilda-btn.danger-outline:hover { background: rgba(200, 66, 31, .08); }

/* =========================================================================
   Badges & status pills
   Base carries the shape; a modifier carries color only. A modifier used without
   the base renders a sharp rectangle -- a deliberate "you forgot the base" tell.
   Text colors are darkened for AA (>=4.5:1) on their tint -- do not lighten them
   back toward the raw brand hue without re-checking contrast.
   ========================================================================= */
.awilda-badge, .awilda-status {
    display: inline-flex; align-items: center; border-radius: 20px;
    padding: 3px 11px; font-size: .72rem; font-weight: 700; line-height: 1.3;
}
.awilda-badge--charge   { background: var(--awilda-soft-coral-tint);  color: #b3402a; }
.awilda-badge--discount { background: var(--awilda-soft-yellow-tint); color: #7a5410; }
.awilda-badge--voucher  { background: var(--awilda-soft-teal-tint);   color: #146b73; }
.awilda-badge--payment  { background: var(--awilda-soft-indigo-tint); color: #443c86; }
.awilda-badge--neutral  { background: var(--awilda-slate-100);        color: var(--awilda-slate-600); }
/* 74px is measured, not round: it must stay >= the natural width of the longest label
   ("Inactive", 65.6px) or the pills stop forming a uniform vertical band. box-sizing keeps
   that band honest once the 11px padding is added. */
.awilda-status { min-width: 74px; justify-content: center; box-sizing: border-box; }
.awilda-status--active   { background: var(--awilda-soft-green-tint); color: #155724; }
.awilda-status--inactive { background: var(--awilda-slate-100);       color: var(--awilda-slate-600); }

/* =========================================================================
   Select (supersedes the per-screen .sd-select-btn / .ttw-select-btn and the Material
   btn-success skin). Engine: bootstrap-select. Usage:
     <select class="selectpicker awilda-select" data-style="btn awilda-select">
   The class names the wrapper (bootstrap-select copies the select's classes onto it), so the open
   list is reachable without :has(); data-style skins the toggle button.
   Modes are bootstrap-select attributes, nothing else:
     multiple + data-actions-box="true"   -> multi-select with Select all / Deselect all
     data-live-search="true"              -> search box over the options
   It reads as an input (white, slate border), at awilda-btn's 40px / 10px radius so a filter
   row of selects + buttons is one family. Recipe proven on StudentDirectory (Oct 2026), where
   the centering, ellipsis and caret fixes below were measured in the browser.
   !important is the minimum needed to beat Material's .btn rules and Site.css .btn-success.
   ========================================================================= */
.btn.awilda-select {
    height: 40px; margin: 0; padding: 0 12px;
    background: #fff !important; color: var(--awilda-navy) !important;
    /* slate-500, not the slate-300 it was promoted from: an input boundary needs 3:1 (WCAG 1.4.11);
       slate-300 was 1.48:1, slate-500 is 4.8:1. Decided by Rafael, 15-oct (review of #643). */
    border: 1px solid var(--awilda-slate-500) !important; border-radius: 10px !important;
    box-shadow: none !important;
    font-size: .87rem; font-weight: 500; text-transform: none; letter-spacing: 0; text-align: left;
    transition: border-color 120ms ease, background-color 120ms ease;
}
.btn.awilda-select:hover { background: var(--awilda-slate-50) !important; border-color: var(--awilda-slate-600) !important; }
.btn.awilda-select:focus,
.bootstrap-select.show > .btn.awilda-select {
    /* Darkened teal (the same #146b73 the sheet uses for AA text on tints): the brand teal ring was
       2.1:1 on white. The solid ring carries the 3:1; the soft halo outside it is decoration. */
    border-color: #146b73 !important;
    box-shadow: 0 0 0 2px #146b73, 0 0 0 5px rgba(20, 107, 115, .18) !important; outline: none;
}
.bootstrap-select .awilda-select .filter-option { color: var(--awilda-navy); }
/* bootstrap-select pins .filter-option to the top (absolute, top 0) and leaves the caret in the
   flow: center the text, pin the caret right. min-width:0 + ellipsis keep a long label (semesters
   run ~55 chars) inside the button; bootstrap-select's title shows the full text on hover. */
.awilda-select .filter-option { display: flex; align-items: center; padding-right: 32px; }
.awilda-select .filter-option-inner { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.awilda-select .filter-option-inner-inner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.awilda-select.dropdown-toggle::after {
    position: absolute; right: 12px; top: 50%; margin: -2px 0 0; vertical-align: 0;
}
/* Touch: the toggle follows awilda-btn's 44px; the search box and each option get the same target. */
@media (pointer: coarse) {
    .btn.awilda-select { height: 44px; }
    .bootstrap-select.awilda-select .bs-searchbox .form-control { height: 44px; }
    .bootstrap-select.awilda-select .dropdown-menu li a { min-height: 44px; display: flex; align-items: center; }
}
/* Validation: a screen that flags the field puts .is-invalid on the <select> (bootstrap-select copies
   it to the wrapper) instead of fighting the !important border above. It wins only because its
   specificity (0,5,0) beats the base (0,2,0), :hover (0,3,0) and focus/open (0,4,0), all !important:
   keep it that way. On focus the border stays coral and the dark-teal ring still shows around it. */
.bootstrap-select.awilda-select.is-invalid .btn.awilda-select { border-color: var(--awilda-coral-deep) !important; }

/* The open list, reached through the wrapper (.bootstrap-select.awilda-select). Tested against the CDN
   bootstrap-select 1.13.1 (hand-edited) in its Bootstrap 3 mode, which the guard in _Layout forces, so
   the menu markup is li > a, li.selected. A BS4-mode or newer engine changes that markup (a.dropdown-item,
   .active) and the check mark and hover below stop matching silently: re-verify on /DevTools/StyleGuide.
   The menu's own slate-300 border is a container edge, not a control boundary (1.4.11 does not apply). */
.bootstrap-select.awilda-select > .dropdown-menu {
    border: 1px solid var(--awilda-slate-300); border-radius: 10px; padding: 4px 0;
    box-shadow: 0 6px 18px rgba(40, 48, 80, .12);
}
.bootstrap-select.awilda-select .dropdown-menu li a {
    position: relative; padding-left: 34px;
    color: var(--awilda-navy) !important; font-size: .87rem; font-weight: 400 !important; /* Site.css a{400!important} */
}
/* Material paints the hovered option navy; keep it a quiet slate wash instead. */
.bootstrap-select.awilda-select .dropdown-menu li a:hover,
.bootstrap-select.awilda-select .dropdown-menu li a:focus { background: var(--awilda-slate-50) !important; box-shadow: none !important; }
.bootstrap-select.awilda-select .dropdown-menu li.selected a { background: #eefafb !important; }
/* The CDN build marks the selection with glyphicon-ok, a font that is not loaded (the mark measures
   0x0). Draw it instead: a check on the left, in the darkened teal so it holds 3:1 on the tint.
   Same mark T951 approved for Transactions' filters. */
.bootstrap-select.awilda-select .dropdown-menu li a span.check-mark { display: none; }
.bootstrap-select.awilda-select .dropdown-menu li.selected a span.check-mark {
    display: block; position: absolute; left: 12px; top: 50%; width: auto; height: auto;
    transform: translateY(-50%);
}
.bootstrap-select.awilda-select .dropdown-menu li.selected a span.check-mark::after {
    content: "\2713"; color: #146b73; font-family: inherit; font-weight: 700;
}
.bootstrap-select.awilda-select .bs-searchbox .form-control {
    max-width: none; /* Site.css input max-width:280px */
    border: 1px solid var(--awilda-slate-500); border-radius: 8px; height: 34px; padding: 0 10px;
    background-image: none; /* Material's animated purple underline */
}
.bootstrap-select.awilda-select .bs-searchbox .form-control:focus {
    border-color: #146b73; box-shadow: 0 0 0 2px #146b73; outline: none;
}
.bootstrap-select.awilda-select .bs-actionsbox .btn {
    background: #fff !important; color: var(--awilda-navy) !important; box-shadow: none !important;
    border: 1px solid var(--awilda-slate-500) !important; border-radius: 8px !important; /* 3:1, like the toggle */
    text-transform: none; font-size: .8rem;
}
.bootstrap-select.awilda-select .bs-actionsbox .btn:hover { background: var(--awilda-slate-50) !important; }

/* =========================================================================
   Option chips (on / off). State also conveyed to AT via .sr-only.
   ========================================================================= */
.awilda-opt {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 20px; padding: 5px 13px; font-size: .82rem; font-weight: 600;
    border: 1px solid transparent;
}
.awilda-opt--on  { background: rgba(20, 107, 115, .10); color: #146b73; border-color: #146b73; }
.awilda-opt--off { background: transparent; color: var(--awilda-slate-500); border: 1px dashed var(--awilda-slate-300); }
.awilda-opt .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =========================================================================
   Stat row (4-col grid -> 2-col <=640px)
   ========================================================================= */
.awilda-statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.awilda-stat {
    background: var(--awilda-slate-50); border: 1px solid var(--awilda-slate-200);
    border-radius: 11px; padding: 11px 13px;
}
.awilda-stat-k {
    text-transform: uppercase; font-size: .66rem; font-weight: 700;
    letter-spacing: .07em; color: var(--awilda-slate-500); /* slate-400 fails AA at this size */
}
.awilda-stat-v {
    font-size: 1rem; font-weight: 700; color: var(--awilda-navy);
    font-variant-numeric: tabular-nums;
}
.awilda-stat--money .awilda-stat-v { font-size: 1.35rem; color: var(--awilda-navy-alt); }
@media (max-width: 640px) { .awilda-statrow { grid-template-columns: repeat(2, 1fr); } }

/* =========================================================================
   Recap (labeled key/values). Gap-only separators -- NO ::before bullets, they
   orphan on a wrapped line. The uppercase micro-label makes each value self-delimiting;
   min-width:0 so a long value (an email) wraps instead of overflowing the row.
   ========================================================================= */
.awilda-recap {
    display: flex; flex-wrap: wrap; gap: 5px 20px; font-size: .82rem;
    color: var(--awilda-slate-500); margin: 0 2px 4px;
}
.awilda-recap span {
    display: inline-flex; align-items: baseline; flex: 0 1 auto;
    min-width: 0; overflow-wrap: anywhere;
}
.awilda-recap-k {
    text-transform: uppercase; font-size: .62rem; font-weight: 700;
    letter-spacing: .06em; color: var(--awilda-slate-500); margin-right: 5px; /* slate-400 fails AA */
}

/* =========================================================================
   Callout banner (tinted; AA-safe icon color on the tint)
   ========================================================================= */
.awilda-callout {
    display: flex; align-items: flex-start; gap: 9px;
    background: rgba(58, 195, 207, .09); border-radius: 11px; padding: 11px 14px;
    color: var(--awilda-navy); font-size: .9rem;
}
.awilda-callout-ic { color: #146b73; flex: 0 0 auto; } /* darkened teal for AA on the tint */

/* =========================================================================
   Cards, accent bars, consequence list
   ========================================================================= */
.awilda-card {
    background: #fff; border: 1px solid var(--awilda-slate-200);
    border-radius: 14px; box-shadow: 0 1px 3px rgba(40, 48, 80, .05);
}
.awilda-item-card {
    display: grid; border: 1px solid var(--awilda-slate-200);
    border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(40, 48, 80, .05);
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.awilda-item-card:hover { transform: translateY(-1px); box-shadow: 0 2px 12px rgba(40, 48, 80, .06); }
.awilda-accent--charge   { border-left: 4px solid var(--awilda-coral-alt); }
.awilda-accent--discount { border-left: 4px solid var(--awilda-warm-yellow-alt); }
.awilda-accent--voucher  { border-left: 4px solid var(--awilda-primary-teal); }
.awilda-accent--neutral  { border-left: 4px solid var(--awilda-slate-300); }
.awilda-conseq { list-style: none; padding: 0; margin: 0; }
.awilda-conseq li { display: flex; gap: 8px; padding: 4px 0; color: var(--awilda-slate-600); }
.awilda-conseq--danger li { color: var(--awilda-coral-deep); }

/* =========================================================================
   Record header (breadcrumb + icon + name + badge/status + top-right action).
   720px centered measure so the page never reads as an "L". Composite: consumes
   .awilda-badge / .awilda-status / .awilda-btn.
   ========================================================================= */
.awilda-record-header { max-width: 720px; margin: 0 auto; padding: 0 22px; }
.awilda-crumb ol {
    list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
    padding: 0; margin: 0 0 8px; font-size: .78rem;
}
.awilda-crumb li { display: inline-flex; align-items: center; color: var(--awilda-slate-600); }
/* Terminal crumb is slate-500, not slate-400: at .78rem it is read as text, and slate-400
   is 2.6:1 on white -- the same AA defect the micro-labels had. */
.awilda-crumb li[aria-current="page"] { color: var(--awilda-slate-500); }
/* U+203A, not "/". The house separator, chosen deliberately over Bootstrap's "/". */
.awilda-crumb li + li::before { content: "\203A"; margin-right: 6px; color: var(--awilda-slate-400); }
.awilda-crumb a {
    color: var(--awilda-navy-alt) !important; /* beats the brand-yellow "p > a" link color */
    font-weight: 600 !important; text-decoration: none;
}
.awilda-crumb a:hover { text-decoration: underline; }
.awilda-crumb a:focus-visible { outline: 2px solid var(--awilda-navy-alt); outline-offset: 2px; }

/* flex-wrap is load-bearing: name + badge + status + actions exceed the 720px measure on a
   narrow viewport, and without it the row overflows instead of stacking. */
.awilda-rec-titlerow { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-bottom: 4px; }
.awilda-rec-ico {
    width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    /* Navy tint echoing the H1. NOT teal: teal is the payments semantic, so a teal chrome
       icon competes with a meaning the rest of the system assigns to that hue. */
    background: rgba(53, 79, 142, .12); color: var(--awilda-navy-alt);
}
.awilda-rec-ico i { font-size: 16px; }
/* font-size carries !important for the same reason font-weight does: any scoped
   "<container> h1" rule (0,1,1) outguns this 0,1,0 selector. That exact collision shipped
   as the #283050-instead-of-navy heading defect caught only in the browser (PR #217). */
.awilda-rec-name {
    font-size: 1.7rem !important; font-weight: 800 !important; /* beats Site.css forced weight 400 */
    margin: 0; line-height: 1.1; overflow-wrap: anywhere;
    color: var(--awilda-navy-alt) !important;
}
.awilda-rec-actions { margin-left: auto; display: flex; gap: 8px; }

/* Narrow viewport: the 1.7rem name is too big for a phone measure, and the action button
   stops being a top-right affordance once the row has wrapped -- it becomes the row's own
   full-width control. !important on font-size mirrors the base rule; without it the base's
   own !important would win here. */
@media (max-width: 640px) {
    .awilda-rec-name { font-size: 1.4rem !important; }
    .awilda-rec-actions { margin-left: 0; width: 100%; }
}