@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

:root {
    /*app bars, buttons, menu etc*/
    --primary: #094A64;
    --mdc-theme-primary: #094A64;
    --primary-variant: #538093;
    --mdc-theme-primary-variant: #073a4f;
    /*colors for text, icons etc on the surface they appear, consider contrast colors here*/
    --on-primary: #ffffff;
    --mdc-theme-on-primary: #ffffff;
    --mdc-theme-on-primary-variant: #ffffff;
    /*second level colors for app bars, buttons, menu etc or selected controls etc */
    --secondary: #518036;
    --mdc-theme-secondary: #518036;
    --secondary-variant: #376322;
    --on-secondary: #ffffff;
    --mdc-theme-on-secondary: #ffffff;
    /*background color for the website, mainly for body*/
    --background: #e1e9ec;
    --mdc-theme-background: #e1e9ec;
    --on-background: #000000;
    /*bg for scrollable content, background color components like lists, cards, menu content area*/
    --surface: #ffffff;
    --mdc-theme-surface: #ffffff;
    --on-surface: #8B8585;
    --mdc-theme-on-surface: #8B8585;
    /*if there is error, color to be used. eg: validations*/
    --error: #C62828;
    --mdc-theme-error: #C62828;
    --on-error: #ffffff;
    --mdc-theme-on-error: #ffffff;
    --warning: #FF6F00;
    --on-warning: #ffffff;
    /* Official FSM Colors */
    --fsm-text-black: #262626;
}

.mdc-top-app-bar__row {
    background-color: var(--mdc-theme-primary);
    color: var(--mdc-theme-on-primary);
}


.bg-info, .bg-success, .bg-warning {
    color: var(--on-surface) !important;
}
.list-group-item-info {
    color: var(--on-primary);
    background-color: var(--primary-variant);
}
.text-primary {
    color: var(--primary);
}
.pcs_login_banner {
    right: 0px !important;
}
body {
    font-size: 15px;
    color:var(--on-surface);
}

.home_container .feed .content {
    height: 600px;
    overflow:scroll;
}

#pcs-loggedinas {
    font-size:10px;

}
/*
#content_container:after {
    height: 210px;
    background: var(--primary-variant);
    position: absolute;
    width: 100%;
    top: 65px;
    content: "";
    z-index: -1;
}*/
div.power {
    font-size:12px
}
.multilogin_box {
    background-color: var(--primary-variant) !important;
}
.pcs_msg_box {
    background-color: var(--primary-variant) !important;
}
.b-r-dash-1 {
    border-right: dashed 1px var(--on-surface);
}

/* Ticket #6712: Use the official text color for table list data. */
table.table.list td {
    color: var(--fsm-text-black);
}

/* ==========================================================================
   new-fsmfe-align

   Purpose: bring bs.master content-area styling in line with the FSMFe
   (React) design system, so legacy pages read as the same product as the
   new front end. FSMFe's rules (see FSMFe/src/index.css):
     - Exactly one brand accent color, driven by the customer's
       userdefined_style.css (--mdc-theme-primary/secondary) - same as the
       shared topnav already uses. Content chrome does NOT introduce its
       own competing hues.
     - Only 3 situational colors: positive, warning, danger - each muted/
       desaturated, used sparingly (never as decorative variety).
     - Neutral grayscale surfaces and borders everywhere else.
     - Flat buttons/panels/modals: no gradients, no inset shadows, no
       solid-color header bars.

   This file loads last among our own stylesheets in bs.master (only the
   school's own custom/userdefined_style.css loads after it), so it's the
   one place that reliably wins the cascade against everything else we
   own - style.css, menu.css, and this file's own earlier rules - without
   fighting the customer's own branding overrides.

   FEATURE FLAG: every rule below is scoped under ".ui-redesign", a class
   bs.master puts on <body> (see UiRedesignCssClass in bs.master.cs) only
   when the SPIDER_CONFIG key UI_LEGACY_REDESIGN is "ON". Since each school
   runs its own database/SPIDER_CONFIG table, flipping that key is a
   per-customer, no-deploy toggle - a school with the key unset/OFF gets
   byte-for-byte the same rendering as before this whole section existed.
   The matching critical inline <style> in bs.master's <head> (the FOUC
   fix for .btn-primary/-success/-info/-warning/-danger) is scoped the same
   way, so nothing in this feature - not even a pre-paint flash - reaches a
   school that hasn't opted in.

   Scope: pure CSS (plus the one CSS-class toggle above), no other markup
   changes required on individual .aspx pages.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Typography - match FSMFe's font-sans (Red Hat Display)
   -------------------------------------------------------------------------- */

/* Red Hat Display is loaded alongside the existing Open Sans import in
   bs.master's <head> - but only when .ui-redesign is active (see the <%
   if %> around that <link> in bs.master), so a school without the flag
   never even requests the font. Open Sans stays as the fallback so pages
   don't flash unstyled text if the font fails to load.
   :not(.material-icons) on every selector here is required, not cosmetic:
   confirmed live that this rule was silently breaking every icon rendered
   as a <button class="material-icons"> (e.g. the topnav's account/menu/
   help buttons) - those rely on their text content ("account_circle" etc.)
   being drawn as a glyph by the Material Icons font, and this rule's own
   specificity (one class + one element) beats the plain ".material-icons"
   selector Google's icon stylesheet uses (one class only), so it was
   overriding their font-family and showing raw ligature text instead of
   the icon. */
body.ui-redesign,
.ui-redesign input:not(.material-icons),
.ui-redesign button:not(.material-icons),
.ui-redesign select:not(.material-icons),
.ui-redesign textarea:not(.material-icons),
.ui-redesign .btn:not(.material-icons) {
    font-family: "Red Hat Display", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Page canvas: FSMFe's <body> is a light gray (confirmed live on
   fsmfe/settings/staff-favourites: oklch(0.97 0 0) = #f5f5f5), with white
   cards/panels sitting on top of it - not pure white background-to-edge
   like bs.master today. */
body.ui-redesign {
    background-color: #f5f5f5;
}


/* --------------------------------------------------------------------------
   2. Situational color tokens
   Values pulled directly from FSMFe/src/index.css so both stacks render the
   identical hue for "positive" / "warning" / "danger" instead of each
   stack's own historical guess at green/orange/red.
   Declared on .ui-redesign (not :root) so they - and --primary below - only
   exist, and only override the base :root values above, inside a flagged
   page; custom properties inherit down from wherever they're declared, and
   .ui-redesign lives on <body>, i.e. the root of everything else here.
   -------------------------------------------------------------------------- */

.ui-redesign {
    /* --primary tracks the customer's actual configured brand color
       (--mdc-theme-primary, set by custom/userdefined_style.css - the same
       variable the shared topnav and FSMFe both already read) instead of
       the hardcoded teal fallback in the base :root above. Scoped here
       rather than promoted to :root so a non-flagged school's .text-primary
       / .list-group-item-info (which also read --primary, outside this
       section) keep rendering exactly as before. */
    --primary: var(--mdc-theme-primary, #094A64);
    --align-positive: #248B33;       /* FSMFe --fsm-green-508 */
    --align-positive-bg: #eaf4ec;    /* ~10% tint for fills */
    --align-warning: #E86D00;        /* FSMFe --fsm-orange-508 */
    --align-warning-bg: #fdf0e6;
    --align-danger: #C24436;         /* FSMFe --fsm-red */
    --align-danger-bg: #f9eae8;
    --align-neutral-text: #262626;   /* FSMFe --fsm-text-black */
    --align-neutral-border: #d6d9db; /* ~FSMFe --subtle */
    --align-neutral-bg: #f5f6f7;     /* ~FSMFe --prime */
    --align-radius: 6px;             /* ~Tailwind rounded-md, used by FSMFe buttons/inputs */
    --align-table-header-text: #484848; /* FSMFe table.tsx header cell: oklch(0.4 0 0), converted live via canvas pixel sampling - lighter than --align-neutral-text, used for table headers only */
}


/* --------------------------------------------------------------------------
   3. Buttons
   FSMFe only has 3 button "colors": brand (default action), destructive
   (red, delete/exit), and a bordered neutral/secondary for everything else.
   Bootstrap's success/info/warning/default map onto that neutral set below
   instead of introducing extra hues; danger maps to the shared danger token.
   Also strips Bootstrap 3's inset gradient/shadow and rounds corners to
   match FSMFe's flat rounded-md buttons.
   -------------------------------------------------------------------------- */

.ui-redesign .btn {
    box-shadow: none;
    text-shadow: none;
}
/* .btn-circle (style.css) sets its own 50%-of-30px radius for round icon
   buttons - don't flatten that back to a rounded rectangle. */
.ui-redesign .btn:not(.btn-circle) {
    border-radius: var(--align-radius);
}

/* Sizing: match FSMFe's default Button (button.tsx) - h-9 (36px), px-4
   (16px), text-sm (14px), font-medium (500). Scoped to :not(.btn-xs,
   .btn-circle) on purpose - .btn-xs is used throughout the data grids for
   dense inline row actions (view/edit icons inside table cells), and
   forcing those to 36px tall would blow out table row heights everywhere;
   .btn-circle has its own fixed 30px round sizing already excluded above. */
.ui-redesign .btn:not(.btn-xs):not(.btn-circle) {
    height: 36px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 34px;
}

/* Form inputs: match FSMFe's default Input (input.tsx) - h-9 (36px, same
   scale as the button height above), px-3 (12px), text-sm (14px),
   rounded-md, thin neutral border, no inset shadow. Bootstrap 3's own
   .form-control default is 34px/padding 6px 12px/4px radius - close, but
   inconsistent with the button height. Scoped to :not(.input-sm) in case
   any page uses that Bootstrap size variant for compact fields. Textareas
   keep their own height (driven by rows/content) but get the same border,
   radius, padding and font treatment. */
.ui-redesign .form-control:not(.input-sm),
.ui-redesign select.form-control:not(.input-sm) {
    height: 36px;
    padding: 4px 12px;
    font-size: 14px;
    border-radius: var(--align-radius);
    border-color: var(--align-neutral-border);
    box-shadow: none;
}
.ui-redesign textarea.form-control {
    padding: 8px 12px;
    font-size: 14px;
    border-radius: var(--align-radius);
    border-color: var(--align-neutral-border);
    box-shadow: none;
}
.ui-redesign .form-control:focus,
.ui-redesign select.form-control:focus,
.ui-redesign textarea.form-control:focus {
    border-color: var(--align-neutral-text);
    box-shadow: none;
}

/* Autocomplete (typeahead.js): f/bs/css/typeahead_custom.css sets its own
   height/padding/line-height/font-size with !important, AND (confirmed live
   via the Staff Member field on AbsenceReview.aspx) it's re-included as a
   page-specific stylesheet that loads AFTER fsm-theme.css on every page - so
   matching its !important alone isn't enough, load order still puts it last.
   Fixed by also out-specificing it: typeahead.js always puts both
   "form-control" and "typeahead" on the real input (confirmed via
   input.className above), so .form-control.typeahead is two classes vs its
   one and wins regardless of load order. .tt-dropdown-menu/.tt-suggestion
   have no second real class to piggyback on, so the class is doubled
   instead (a el.class.class selector is valid CSS and simply counts twice
   for specificity, no markup change needed). Adding .ui-redesign as a third
   ancestor selector only strengthens that further.
   Sized to line up with the 36px .form-control height above; the dropdown
   list rows are brought up from a cramped 3px/17px/12px to something closer
   to FSMFe's Command/list item rows (32px-ish rows, 14px text). */
.ui-redesign .form-control.typeahead {
    height: 36px !important;
    padding: 4px 12px !important;
    line-height: 26px !important;
    font-size: 14px !important;
    border-radius: var(--align-radius) !important;
    border-color: var(--align-neutral-border) !important;
    /* squared below overrides the right side back to 0 when this sits
       inside an input-group next to the Clear/Search buttons - see below */
    box-shadow: none !important;
}
/* Square off the side that touches the Clear/Search buttons. Bootstrap
   normally does this via ".input-group .form-control:first-child", but
   typeahead.js wraps the real input in a "span.twitter-typeahead", so the
   input is the SECOND child of that span (after the hidden .tt-hint) and
   never actually matches :first-child - the right corners were rounded on
   every typeahead-in-a-group field even before this change, just less
   visibly at the old 4px radius. Scoped to .input-group so a standalone
   autocomplete (no buttons) keeps its full rounding. */
.ui-redesign .input-group .form-control.typeahead {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
/* Clear (X) and Search (magnifying glass) buttons share ONE .input-group-btn
   wrapper here (confirmed live: not one wrapper each, which is what
   Bootstrap's own :first-child/:last-child rounding rules assume) - so
   Bootstrap ends up rounding the clear button's LEFT corners (as if it were
   the whole group's first element, when the input actually sits further
   left) and ALL FOUR corners of the search button (as if it had no neighbor
   before it). Targeted by class instead of relying on that positional
   assumption: clear is always an interior button (square all round), search
   is always the group's true rightmost edge (square left, rounded right). */
.ui-redesign .input-group-btn .btn.clear {
    border-radius: 0;
}
.ui-redesign .input-group-btn .btn.search {
    border-radius: 0 var(--align-radius) var(--align-radius) 0;
}
/* Left/right alignment: confirmed live on StudentInformation.aspx - the
   student search widget (.search_section, part of the shared
   usercontrol_student_search control, so this isn't page-specific) nests
   TWO .row > .col-md-12 pairs instead of one. Each pair's own
   margin:-15px/padding:15px cancels out fine on its own, but the extra
   nesting level leaves the innermost content 15px narrower and indented
   15px from both the page heading's left edge and the container's right
   edge. ".with_search" is this widget's own distinguishing class (not a
   generic Bootstrap one), so zeroing it out here only affects this widget,
   not normal grid nesting anywhere else. */
.ui-redesign .row.with_search {
    margin-left: 0;
    margin-right: 0;
}
.ui-redesign .row.with_search > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}
.ui-redesign .tt-dropdown-menu.tt-dropdown-menu {
    padding: 4px 0 !important;
    border: 1px solid var(--align-neutral-border) !important;
    border-radius: var(--align-radius) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}
.ui-redesign .tt-suggestion.tt-suggestion {
    padding: 8px 12px !important;
    line-height: 20px !important;
    font-size: 14px !important;
    color: var(--align-neutral-text) !important;
}
.ui-redesign .tt-suggestion.tt-suggestion:hover,
.ui-redesign .tt-suggestion.tt-suggestion.tt-cursor {
    background-color: var(--align-neutral-bg) !important;
    cursor: pointer;
}

/* Chosen.js: Period/Subject/Status etc. on this page (and 20+ other widgets
   per page) are native <selects> enhanced by chosen.js into their own
   ".chosen-container" markup - same story as typeahead above, the plugin
   hides the real <select> and renders a lookalike, so select.form-control
   never touches what's on screen. chosen.css loads once, in the shared
   bundle, BEFORE fsm-theme.css (unlike typeahead_custom.css) so plain
   specificity/order is enough here - no !important needed. */
.ui-redesign .chosen-container-single .chosen-single {
    height: 36px;
    line-height: 34px;
    padding: 0 0 0 12px;
    border: 1px solid var(--align-neutral-border);
    border-radius: var(--align-radius);
    background: #ffffff;
    box-shadow: none;
    color: var(--align-neutral-text);
}
.ui-redesign .chosen-container-active .chosen-single,
.ui-redesign .chosen-container-active.chosen-with-drop .chosen-single {
    border-color: var(--align-neutral-text);
    box-shadow: none;
}
.ui-redesign .chosen-container-single .chosen-single div b {
    /* keep the sprite's arrow glyph (its x-offset picks the icon) but
       vertically center it - the plugin's own "2px from top" offset
       assumed its original fixed 25px-tall box */
    background-position: 0 center;
}
.ui-redesign .chosen-container .chosen-drop {
    border: 1px solid var(--align-neutral-border);
    border-radius: 0 0 var(--align-radius) var(--align-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.ui-redesign .chosen-container .chosen-results li {
    padding: 8px 12px;
    line-height: 20px;
    font-size: 14px;
}
.ui-redesign .chosen-container .chosen-results li.highlighted {
    background: var(--align-neutral-bg);
    background-image: none;
    color: var(--align-neutral-text);
}

/* Checkboxes & radios: confirmed live in the FSMFe "Edit Favourite" dialog
   (checkbox.tsx / radio-group.tsx) - 16x16px, thin neutral border when
   unset, ink-black fill + white mark when checked. Native inputs restyled
   with appearance:none to match.
   IMPORTANT: this rule must only touch paint (border/background/size), never
   `position` or `margin` - Bootstrap's own .checkbox/.radio wrapper CSS
   relies on `position:absolute` + `margin-left:-20px` on the input itself to
   line it up under the label's padding-left. An earlier version of this rule
   set `position:relative; margin:0;` here, which silently overwrote both of
   those and broke checkbox/label alignment on every page using that
   wrapper. Using a background-image for the check/dot (instead of an
   absolutely-positioned ::after) avoids needing `position` at all. */
.ui-redesign input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
    border: 1px solid var(--align-neutral-border);
    border-radius: 4px;
    cursor: pointer;
}
.ui-redesign input[type="checkbox"]:checked {
    background-color: var(--align-neutral-text);
    border-color: var(--align-neutral-text);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
}
.ui-redesign input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.ui-redesign input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--align-neutral-text);
    outline-offset: 1px;
}

.ui-redesign input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid var(--align-neutral-border);
    border-radius: 50%;
    cursor: pointer;
}
.ui-redesign input[type="radio"]:checked {
    border-color: var(--align-neutral-text);
    background-image: radial-gradient(circle, var(--align-neutral-text) 4px, transparent 4.5px);
}
.ui-redesign input[type="radio"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.ui-redesign input[type="radio"]:focus-visible {
    outline: 2px solid var(--align-neutral-text);
    outline-offset: 1px;
}

/* btn-info -> neutral/outline action (FSMFe's "outline" variant: bordered,
   white fill, dark text). Used heavily for View/secondary actions. */
.ui-redesign .btn-info,
.ui-redesign .btn-info:focus {
    color: var(--align-neutral-text);
    background-color: #ffffff;
    border-color: var(--align-neutral-border);
}
.ui-redesign .btn-info:hover,
.ui-redesign .btn-info:active,
.ui-redesign .btn-info.active {
    color: var(--align-neutral-text);
    background-color: var(--align-neutral-bg);
    border-color: var(--align-neutral-border);
}

/* btn-default -> same neutral/outline treatment for consistency */
.ui-redesign .btn-default,
.ui-redesign .btn-default:focus {
    color: var(--align-neutral-text);
    background-color: #ffffff;
    border-color: var(--align-neutral-border);
}
.ui-redesign .btn-default:hover,
.ui-redesign .btn-default:active,
.ui-redesign .btn-default.active {
    background-color: var(--align-neutral-bg);
    border-color: var(--align-neutral-border);
}

/* btn-success - CORRECTED after checking staff-favourites/interviews/home:
   FSMFe has no green button anywhere. Every primary/confirm action (Save,
   Process, Download, "+Add X") is the same fixed ink-black as btn-primary;
   there's no separate "success" button color at all in FSMFe - green never
   showed up once across the pages checked. .btn-success in this legacy
   codebase is used for exactly that role (SaveAllStudMan, entity_save_*,
   "Download as Tagset", "Print" etc. - the main/confirm action of their
   panel), so it maps to the same treatment as .btn-primary instead of
   introducing a color FSMFe doesn't have. --align-positive stays defined
   above for non-button uses (e.g. a future status badge) even though
   nothing currently uses it for a button. */
.ui-redesign .btn-success,
.ui-redesign .btn-success:focus {
    color: #ffffff;
    background-color: var(--align-neutral-text);
    border-color: var(--align-neutral-text);
}
.ui-redesign .btn-success:hover,
.ui-redesign .btn-success:active,
.ui-redesign .btn-success.active {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
}

/* btn-warning -> shared "warning" token */
.ui-redesign .btn-warning,
.ui-redesign .btn-warning:focus {
    color: #ffffff;
    background-color: var(--align-warning);
    border-color: var(--align-warning);
}
.ui-redesign .btn-warning:hover,
.ui-redesign .btn-warning:active,
.ui-redesign .btn-warning.active {
    background-color: #c95f00;
    border-color: #c95f00;
}

/* btn-danger -> shared "danger" token (Exit/Delete actions) */
.ui-redesign .btn-danger,
.ui-redesign .btn-danger:focus {
    color: #ffffff;
    background-color: var(--align-danger);
    border-color: var(--align-danger);
}
.ui-redesign .btn-danger:hover,
.ui-redesign .btn-danger:active,
.ui-redesign .btn-danger.active {
    background-color: #a8382c;
    border-color: #a8382c;
}

/* btn-primary - CORRECTED after live comparison against fsmfe/settings/
   staff-favourites and fsmfe/interviews: FSMFe's primary action button
   (bg-primary) is a fixed ink-black on every page checked, regardless of
   the school's brand color - "Add Favourite" and "Create Interviews" are
   both oklch(0.18 0 0) = #262626 = the same --align-neutral-text token
   already used elsewhere in this file. Brand color (--mdc-theme-primary)
   is scoped to the topnav only; it never reaches buttons in FSMFe. Originally
   this was left mapped to var(--primary) (the brand color) on the theory
   that a stale hardcoded button color was a bug to fix by tying it to the
   live brand var - that fix was real (see --primary above) but the
   conclusion for THIS selector was wrong: matching FSMFe means matching its
   fixed black, not the brand hue. */
.ui-redesign .btn-primary,
.ui-redesign .btn-primary:focus {
    color: #ffffff;
    background-color: var(--align-neutral-text);
    border-color: var(--align-neutral-text);
}
.ui-redesign .btn-primary:hover,
.ui-redesign .btn-primary:active,
.ui-redesign .btn-primary.active {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
}


/* --------------------------------------------------------------------------
   4. Alerts
   Bootstrap 3 alerts are solid tinted blocks with a matching border and
   dark text. FSMFe's Alert is a plain card (white/surface bg) with colored
   text + icon only. Splitting the difference: keep a light tint (so the
   banner is still easy to scan) but drop the heavy border in favor of a
   single colored left rule, matching FSMFe's fsm-input-error pattern.
   -------------------------------------------------------------------------- */

.ui-redesign .alert-success {
    color: var(--align-positive);
    background-color: var(--align-positive-bg);
    border: none;
    border-left: 3px solid var(--align-positive);
    border-radius: 4px;
}
.ui-redesign .alert-warning {
    color: #8a4300; /* darker shade of --align-warning for AA contrast on light bg */
    background-color: var(--align-warning-bg);
    border: none;
    border-left: 3px solid var(--align-warning);
    border-radius: 4px;
}
.ui-redesign .alert-danger {
    color: var(--align-danger);
    background-color: var(--align-danger-bg);
    border: none;
    border-left: 3px solid var(--align-danger);
    border-radius: 4px;
}
.ui-redesign .alert-info {
    color: var(--align-neutral-text);
    background-color: var(--align-neutral-bg);
    border: none;
    border-left: 3px solid var(--align-neutral-border);
    border-radius: 4px;
}


/* --------------------------------------------------------------------------
   5. Labels & badges
   Same idea as buttons: collapse Bootstrap's saturated label/badge palette
   onto the shared 3-color set, flat fill, no border.
   -------------------------------------------------------------------------- */

.ui-redesign .label,
.ui-redesign .badge {
    border-radius: 999px; /* pill shape, matches FSMFe's badge.tsx (rounded-full) */
    font-weight: 500;
}
.ui-redesign .label-primary { background-color: var(--primary, #094A64); }
.ui-redesign .label-info,
.ui-redesign .badge-info { background-color: var(--align-neutral-border); color: var(--align-neutral-text); }
.ui-redesign .label-success,
.ui-redesign .badge-success { background-color: var(--align-positive); }
.ui-redesign .label-warning,
.ui-redesign .badge-warning { background-color: var(--align-warning); }
.ui-redesign .label-danger,
.ui-redesign .badge-danger { background-color: var(--align-danger); }


/* --------------------------------------------------------------------------
   6. Legacy rainbow utility classes
   These were a bespoke 7-color badge/status palette (color_badge_square,
   span.light_blue/red/orange/green/light_green/pink/yellow/blue) with no
   equivalent in FSMFe. Collapsed onto the same positive/warning/danger/
   neutral set so status colors mean the same thing everywhere in the app.
   If a page genuinely needs >3 distinct categorical colors (e.g. a legend),
   pull from FSMFe's --chart-1..16 palette instead of reintroducing arbitrary
   hues here.
   -------------------------------------------------------------------------- */

.ui-redesign .color_badge_square li.green,
.ui-redesign .color_badge_square li.light_green,
.ui-redesign span.green,
.ui-redesign span.light_green {
    background-color: var(--align-positive) !important;
}
.ui-redesign .color_badge_square li.orange,
.ui-redesign .color_badge_square li.yellow,
.ui-redesign span.orange,
.ui-redesign span.yellow {
    background-color: var(--align-warning) !important;
}
.ui-redesign .color_badge_square li.red,
.ui-redesign .color_badge_square li.pink,
.ui-redesign span.red,
.ui-redesign span.pink {
    background-color: var(--align-danger) !important;
}
.ui-redesign .color_badge_square li.light_blue,
.ui-redesign .color_badge_square li.blue,
.ui-redesign span.light_blue,
.ui-redesign span.blue {
    background-color: var(--align-neutral-border) !important;
}


/* --------------------------------------------------------------------------
   7. Panels / wells
   FSMFe's Card is always plain (white surface, thin gray border, subtle
   shadow, no colored header). Bootstrap's panel-primary/success/etc. paint
   a solid color across the whole heading - flatten all of them to one
   neutral panel style.
   -------------------------------------------------------------------------- */

.ui-redesign .panel {
    border-color: var(--align-neutral-border);
    border-radius: 8px; /* ~Tailwind rounded-xl used by FSMFe Card */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* ~shadow-sm */
}
.ui-redesign .panel-heading {
    background-color: #ffffff;
    color: var(--align-neutral-text);
    border-bottom: 1px solid var(--align-neutral-border);
    border-radius: 8px 8px 0 0;
}
/* div.container.main (style.css) is a hardcoded opaque white background
   that spans the full page - painted over the gray page canvas above
   (body.ui-redesign) with nothing showing through. Making it transparent
   here lets that gray canvas read as intended. .box_rounded.round_box_content_bg
   (style.css: background-color:var(--surface), i.e. white, no border) is
   this codebase's other "card" idiom alongside .panel above - it already
   sits on white today so has never needed its own border/shadow to read as
   a distinct card; against the new gray canvas it does, so it gets the same
   thin-border-plus-shadow treatment as .panel immediately above. */
.ui-redesign div.container.main {
    background-color: transparent;
}
.ui-redesign .box_rounded.round_box_content_bg {
    border: 1px solid var(--align-neutral-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
/* Exception: the main student/record search widget (usercontrol_student_search,
   confirmed live on StudentInformation.aspx via .search_section > .box_rounded.
   round_box_content_bg) is the ONLY user of this card idiom that FSMFe doesn't
   card-ify - fsmfe/absence-notification and fsmfe/settings/staff-favourites both
   render their search input bare on the page canvas, no surrounding panel. Card
   treatment above stays the default for every other use of these two classes.
   IMPORTANT: this same usercontrol's "Search student" popup (uc_search_student_
   popup, opened from this widget) is ALSO a descendant of .search_section, and
   its own multi-column field grid (Student Key/Gender/Barcode/Surname/...) uses
   this exact same .box_rounded.round_box_content_bg > .row.box_content > [col-*]
   structure for perfectly legitimate Bootstrap column spacing - a plain
   descendant selector here stripped that grid's padding too (confirmed live:
   Dennis reported every popup field losing its spacing). Using the DIRECT CHILD
   combinator (.search_section > .box_rounded...) instead of a descendant one
   keys this to the compact inline bar specifically - that card is a direct
   child of .search_section, while the popup's version is nested many levels
   deeper (search_section > ... > container-fluid > .row > .col-md-12 >
   .collapse > .box_rounded...) and never matches a direct-child selector here. */
.ui-redesign .search_section > .box_rounded.round_box_content_bg {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
}
/* With the card gone above, its internal grid padding is exposed as a raw
   left-indent instead of being absorbed inside a card boundary. Confirmed
   live: "Student" label was landing at x=45 vs the page heading's x=35 -
   10px net from .box_content's own 10px padding (style.css: a generic
   "card content" padding utility, not part of Bootstrap) plus this row's
   child .col-md-6's standard 15px Bootstrap gutter padding, only partly
   cancelled by the row's own -15px default margin (25 in, 15 back out = 10
   net). Same fix as .row.with_search below (zero the row's margin and its
   column children's padding), fully qualified down from .search_section
   with the same direct-child chain as immediately above so it can't reach
   the popup's own field grid either. */
.ui-redesign .search_section > .box_rounded.round_box_content_bg > .row.box_content {
    margin-left: 0;
    margin-right: 0;
    /* .box_content (style.css) also adds its own 10px padding on this same
       element, independent of the Bootstrap gutter above - confirmed live
       this was the last 10px still separating the "Student" label from the
       heading after the margin/col-padding fix below landed (col padding
       zeroed correctly, but this row's OWN padding was untouched). */
    padding-left: 0;
    padding-right: 0;
}
.ui-redesign .search_section > .box_rounded.round_box_content_bg > .row.box_content > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}
/* Same "no card, filter sits bare on the canvas" treatment as the student
   search widget above, but for the generic "Filter by" bars used all over
   StudentInfo_Options.ascx (Absences, User Defined, Learner Support Needs,
   Condition History, Timetable Date, Subject Period, ... - confirmed live on
   the Absences tab, and the same markup pattern repeats for every tab listed
   there). Scoped with :has(label) rather than just the class combo alone
   because this exact same class combo (box_rounded.box_content.
   round_box_content_bg.form-inline) is ALSO reused a couple of lines later
   in that same file purely to wrap a data grid table (no label anywhere
   inside it) - :has(label) reliably tells "a filter control row" apart from
   "a table wrapper" without depending on tab-specific class names, since
   real filter bars always have at least one <label> (Filter by/Filter
   By/Filter by Category/...) and no data-grid wrapper ever does. */
.ui-redesign .box_rounded.round_box_content_bg.form-inline:has(label) {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    padding: 0;
}
/* Backs the "Search and Filter" collapsible-bar hider in bs.master - that
   script matches by exact text (not a class, since .sub_heading is a shared
   generic heading class used for unrelated visible headers too) and marks a
   match with this class rather than only setting inline display:none, so the
   hide survives a later reset of the element's own inline style (confirmed
   needed live: the "Search student" popup's own open logic does exactly that
   reset when it opens). !important is required here specifically to keep
   beating any future non-!important inline style the same way. */
.ui-redesign .ui-hide-search-filter {
    display: none !important;
}
.ui-redesign .panel-primary > .panel-heading,
.ui-redesign .panel-success > .panel-heading,
.ui-redesign .panel-info > .panel-heading,
.ui-redesign .panel-warning > .panel-heading,
.ui-redesign .panel-danger > .panel-heading {
    background-color: #ffffff;
    color: var(--align-neutral-text);
    border-color: var(--align-neutral-border);
}
.ui-redesign .well {
    background-color: var(--align-neutral-bg);
    border-color: var(--align-neutral-border);
    box-shadow: none;
    border-radius: 8px;
}


/* --------------------------------------------------------------------------
   8. Modal / popup headers
   bs.master's help_popup and error_popup (and many per-page custom modals)
   use pop_up_header_bg / error_box_header_bg to paint a solid brand-color or
   dark-gray band across the modal header. FSMFe's DialogHeader (dialog.tsx)
   has no color fill at all - just a plain background with a bold title.
   Flattened here to match; the brand color is still used for the primary
   footer action button, so branding isn't lost, just not smeared across
   every header.
   -------------------------------------------------------------------------- */

.ui-redesign .pop_up_header_bg,
.ui-redesign .pop_up_sub_header_bg,
.ui-redesign .error_box_header_bg {
    background-color: #ffffff;
    color: var(--align-neutral-text);
    border-bottom: 1px solid var(--align-neutral-border);
}
.ui-redesign .pop_up_header_bg .close,
.ui-redesign .pop_up_sub_header_bg .close,
.ui-redesign .error_box_header_bg .close {
    color: var(--align-neutral-text);
    opacity: 0.6;
}
/* style.css's "div.modal-header h4 { color: var(--on-primary) }" (white -
   correct against the old solid-brand header bar) targets the <h4> directly,
   so it wins over the `color` set on the header DIV above regardless of that
   rule's specificity - a child with its own explicit color rule never
   inherits from its parent. Confirmed live on StudentInformation.aspx's
   "Search student" popup: title text was rendering white-on-white once the
   header bg was flattened to white above. Re-targeting the h4 itself here
   (2 classes + 1 element beats style.css's 1 class + 2 elements) fixes it
   without touching the base rule, which still applies to non-redesign schools. */
.ui-redesign .pop_up_header_bg h4,
.ui-redesign .pop_up_sub_header_bg h4,
.ui-redesign .error_box_header_bg h4 {
    color: var(--align-neutral-text);
}


/* style.css's "div.modal-footer { height: 40px; padding: 5px }" was sized for
   Bootstrap's original ~30px-tall buttons (30 + 2*5 padding = 40, exact fit).
   Section 3 above raises every non-.btn-xs/.btn-circle button to 36px to
   match FSMFe, so the same footer now needs 36 + 2*5 = 46px minimum - at the
   old fixed 40px the button box just overflows the footer's bottom edge.
   Confirmed live on StudentInformation.aspx's "Search student" popup (Exit
   button visibly poking out of the footer). auto+min-height (rather than a
   new fixed number) keeps this correct if button height or padding change
   again later, and matches FSMFe's footer, which is content-sized, not fixed. */
.ui-redesign div.modal-footer {
    height: auto;
    min-height: 48px;
    display: flex;
    align-items: center;
}


/* --------------------------------------------------------------------------
   9. Tables (bs.master)
   Confirmed live on StudentManagement.aspx-style pages: the real "table" on
   almost every bs.master page is the custom data grid
   (div.data_grid_header/body/footer), not a plain Bootstrap <table>. Its
   header row is a solid var(--primary) fill with white text - the single
   most visible "branded" element on a lot of these pages, and exactly the
   kind of colored header bar FSMFe's own table (src/components/ui/v1/
   table.tsx) doesn't have: FSMFe's TableHeader is plain background, dark
   text, a single thin bottom border under the header row only. Flattened
   to match. A generic Bootstrap .table fallback is included for the rarer
   pages that don't use the data grid component.
   -------------------------------------------------------------------------- */

.ui-redesign div.data_grid_body thead th,
.ui-redesign div.data_grid_body tr.head th {
    background-color: #ffffff;
    color: var(--align-table-header-text);
    font-weight: 500;
    /* 1px, not the 2px this started at - confirmed live against FSMFe's own
       table.tsx (fsmfe/settings/staff-favourites): every row, header
       included, gets the exact same 1px divider (border-b on the <tr>
       itself, same color throughout) - there's no heavier/separate weight
       for the header row specifically. */
    border-bottom: 1px solid var(--align-neutral-border);
}
.ui-redesign div.data_grid_body tr.head {
    background-color: #ffffff;
}
.ui-redesign div.data_grid_body tr.head:hover {
    background-color: var(--align-neutral-bg);
}
.ui-redesign div.data_grid_body table tr:hover,
.ui-redesign div.data_grid_body table tr.selected {
    background-color: var(--align-neutral-bg);
}
/* Bootstrap draws the actual visible row divider via border-TOP on tbody
   cells (border-bottom is unset/0 there), not border-bottom - confirmed
   live on StudentInformation.aspx's Absences table. The border-bottom-color
   this rule set previously was therefore never the line actually on screen;
   setting both here is harmless (recolors whichever side is really active
   for a given table variant) and correct regardless of which Bootstrap
   table markup a given page happens to use. */
.ui-redesign div.data_grid_body tr th,
.ui-redesign div.data_grid_body tr td {
    border-top-color: var(--align-neutral-border);
    border-bottom-color: var(--align-neutral-border);
}
/* The card around the table itself: confirmed live on fsmfe/settings/
   staff-favourites - FSMFe wraps every table in a bordered, rounded-corner,
   white surface (border:1px solid ~neutral-border, radius 6px = the same
   --align-radius already used for buttons/inputs elsewhere in this file),
   sitting on the gray page canvas. bs.master's tables had no such wrapper
   at all before this - just a bare table straight on the page background.
   overflow-y (not overflow, so .table-responsive's own overflow-x:auto for
   horizontal scrolling on narrow screens keeps working) clips the table's
   own square corners to this wrapper's rounded ones. */
.ui-redesign div.data_grid_body {
    border: 1px solid var(--align-neutral-border);
    border-radius: var(--align-radius);
    background-color: #ffffff;
    overflow-y: hidden;
}

.ui-redesign .table > thead > tr > th {
    background-color: #ffffff;
    color: var(--align-table-header-text);
    font-weight: 500;
    border-bottom-color: var(--align-neutral-border);
    border-bottom-width: 1px;
}
.ui-redesign .table > tbody > tr > th,
.ui-redesign .table > tbody > tr > td {
    border-top-color: var(--align-neutral-border);
    border-bottom-color: var(--align-neutral-border);
}

/* .table-bordered (Bootstrap 3) draws a full grid - an outer border plus a
   1px rule around every single cell, both directions. Confirmed live: this
   is what made some of StudentInformation.aspx's tabs (Timetable, Results/
   achievement_list, the attendance-analysis and subject-attendance tables -
   all built with .table.table-bordered) look visibly different from tabs
   like Absences or Learner Support (plain .table.list, no .table-bordered),
   which already read close to FSMFe's table.tsx: no vertical rules at all,
   just a thin line under the header and under each row. Flattened here to
   that same minimal look so every tab's tables read as one consistent
   style rather than two. */
.ui-redesign .table-bordered {
    border: none;
}
.ui-redesign .table-bordered > thead > tr > th,
.ui-redesign .table-bordered > tbody > tr > th,
.ui-redesign .table-bordered > tfoot > tr > th,
.ui-redesign .table-bordered > thead > tr > td,
.ui-redesign .table-bordered > tbody > tr > td,
.ui-redesign .table-bordered > tfoot > tr > td {
    border: none;
    border-bottom: 1px solid var(--align-neutral-border);
}
.ui-redesign .table-bordered > thead > tr > th {
    border-bottom: 1px solid var(--align-neutral-border);
}
.ui-redesign .table > tbody > tr:hover {
    background-color: var(--align-neutral-bg);
}
.ui-redesign .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--align-neutral-bg);
}


/* --------------------------------------------------------------------------
   10. bs-materialise.master (Material Components Web pages)
   This master page shares this file but doesn't use Bootstrap at all -
   confirmed live on ArrivalsLeavers.aspx / EmailTemplates.aspx: no
   .btn-success/.alert-*/.panel-* classes exist here, so sections 3-9 above
   don't apply. What IS there, and already close to FSMFe's discipline: MDC
   buttons already use a single consistent brand color (--mdc-theme-primary)
   for every raised button rather than Bootstrap's rainbow of variants - no
   button recoloring needed. What's different from FSMFe:
     - Uppercase button text with MDC's wide letter-spacing (spec default);
       FSMFe buttons are normal case.
     - 4px button corners vs FSMFe's 6px (--align-radius).
     - Brand color leaking onto things FSMFe keeps neutral: data-table
       header text (confirmed rgb(43,135,200) = --mdc-theme-primary on
       ArrivalsLeavers.aspx) and the secondary-color underline beneath it.
       FSMFe scopes brand color to the topnav and primary buttons only -
       table headers and labels stay neutral dark text.
   Scope note: only two bs-materialise.master pages were checked. Chips,
   form fields, and other mdc-* components haven't been audited yet - watch
   for those needing similar treatment before assuming this section is
   complete for all 250+ pages on this master page. NOTE: bs-materialise.
   master does not currently render UiRedesignCssClass on its own <body> -
   this section (and the "class toggle" approach in general) needs wiring
   into that master page too before any bs-materialise customer can opt in.
   -------------------------------------------------------------------------- */

.ui-redesign .mdc-button {
    text-transform: none;
    letter-spacing: normal;
    border-radius: var(--align-radius);
}
.ui-redesign .mdc-data-table__header-cell {
    color: var(--align-table-header-text);
    font-weight: 500;
    border-bottom-color: var(--align-neutral-border);
}
.ui-redesign .pop_up_footer_bg {
    background-color: #ffffff;
    border-top: 1px solid var(--align-neutral-border);
}


/* --------------------------------------------------------------------------
   11. Page heading
   Matches FSMFe's <header><h1 data-slot="PageTitle"> pattern (confirmed live
   on fsmfe/interviews: 36px/600/line-height 40px/margin-bottom 16px, header
   itself margin-bottom 32px before the next block). The markup (bs.master,
   inside #content_container) is injected only when .ui-redesign is active,
   with its title text copied client-side from the last crumb in the existing
   #tertiary-nav-crumbs breadcrumb trail - no per-page markup change needed.
   No subtitle: FSMFe's are bespoke per-page copy with nothing to derive them
   from on a bs.master page.
   -------------------------------------------------------------------------- */

/* Confirmed live against fsmfe/settings/staff-favourites: FSMFe's whole
   page wrapper (.fsm-page) has padding-top:32px before the heading even
   starts - #content_container here has no top padding at all (only
   left:20px), so the heading was sitting flush against the breadcrumb bar
   with zero breathing room above it. Added as margin-top on the heading
   itself (not a change to #content_container's padding) so it doesn't
   affect anything else on the page. */
/* Left edge: confirmed live on StudentInformation.aspx - .ui-page-heading
   is injected directly into #content_container (no Bootstrap grid wrapper),
   so it sits flush at the page's raw 20px content padding. Every actual
   page body - the search widget, the tab strip, every table - instead goes
   through this master page's own container-fluid > .row > .col-md-12
   wrapper, which adds Bootstrap's standard 15px column gutter on top of
   that. That gutter is normal/expected grid nesting (see the .row.with_search
   comment below - only ITS extra nested pair was a bug, not this outer one),
   but it leaves the heading 15px to the left of literally everything under
   it. Nudging the heading itself (rather than touching container-fluid,
   which every page's markup already assumes keeps its standard padding)
   realigns it with that shared baseline without touching any existing page
   layout. */
.ui-redesign .ui-page-heading {
    margin: 32px 0 24px 15px;
}
/* Most pages don't set window.uiPageSubtitle (it's opt-in, see bs.master),
   so this header is just a single h1 line most of the time - the 32px
   bottom gap tuned for the two-line h1+h3 case was being applied there too,
   reading as too much dead space under a single line with nothing below it
   to visually justify it. bs.master's heading script adds .has-subtitle to
   this element only when a subtitle is actually shown, so the fuller 32px
   gap (this rule's original, unconditional value) is preserved for exactly
   that case, and every plain single-line heading gets the smaller default
   above instead. */
.ui-redesign .ui-page-heading.has-subtitle {
    margin-bottom: 32px;
}
.ui-redesign .ui-page-heading h1 {
    margin: 0;
    font-size: 36px;
    font-weight: 600;
    line-height: 40px;
    color: var(--align-neutral-text);
}
/* Optional per-page subtitle - hidden by default (see the display:none on
   the element itself in bs.master), shown only if a page sets
   window.uiPageSubtitle. Confirmed live on fsmfe/interviews: 18px/500/
   muted gray, sits directly under the title. */
.ui-redesign .ui-page-heading h3 {
    margin: 4px 0 0 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    color: #6b6b6b;
}


/* --------------------------------------------------------------------------
   12. Toolbar (search left, actions right)
   Matches the row above the table on FSMFe pages like fsmfe/interviews:
   a modestly-sized filter input on the left, action buttons grouped with a
   consistent gap on the right, wrapping onto a second line on narrow
   screens instead of overflowing.

   Unlike every other section in this file, this ISN'T applied automatically
   by the master page - each page's search box and action buttons are its
   own markup, in whatever order/wrapper that page's .aspx already uses, so
   there's no single generic DOM shape to hook a selector onto like
   #tertiary-nav-crumbs or .form-control. To use it on a given page, wrap the
   existing search input and the existing button group as siblings inside
   one container:

     <div class="ui-toolbar">
       <div class="ui-toolbar-search"> ... existing search .input-group ... </div>
       <div class="ui-toolbar-actions"> ... existing buttons ... </div>
     </div>

   No other markup inside those needs to change - existing classes
   (.input-group, .btn, etc.) keep working exactly as before, this just
   places the two blocks in one flex row instead of wherever they sit today.
   -------------------------------------------------------------------------- */

.ui-redesign .ui-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.ui-redesign .ui-toolbar-search {
    flex: 1 1 280px;
    max-width: 400px;
}
.ui-redesign .ui-toolbar-search .input-group,
.ui-redesign .ui-toolbar-search .form-control {
    width: 100%;
}
.ui-redesign .ui-toolbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}


/* --------------------------------------------------------------------------
   13. Misc legacy status/list widgets
   Confirmed live on StudentInformation.aspx after selecting a student - the
   remaining bright/brand colors on this kind of "record detail" page, which
   should read as plainly as fsmfe/absence-notification or fsmfe/interviews
   (neutral cards, color only for status), not the Home page's dashboard
   "BoxHeader" widgets (which DO get one fixed brand color per domain, e.g.
   bg-(--fsm-red)/bg-warning/bg-(--fsm-space-blue) - that's a deliberate,
   separate pattern for Home's cards and not what a detail page like this
   should copy).
   -------------------------------------------------------------------------- */

/* .list-group-item.active (style.css) is a generic Bootstrap list used here
   as a vertical tab strip (Caregiver(s)/Address(es)/Emergency/...). It's
   currently painted with var(--primary) - the customer's brand color -
   which is exactly the "content area introduces its own competing hue"
   problem the rest of this file avoids elsewhere; FSMFe confines brand
   color to the topnav. Flattened to the same fixed ink-black used for the
   primary button/active state everywhere else in this file.
   border: none (not just border-color matching the fill, which still leaves
   a 1px box in the layout) - confirmed live on StudentInformation.aspx's
   left-hand student tab strip: the plain Bootstrap .list-group-item border
   was reading as a visible seam/frame around the active black pill, which
   FSMFe's flat tab strip doesn't have. */
.ui-redesign .list-group-item.active,
.ui-redesign .list-group-item.active:hover,
.ui-redesign .list-group-item.active:focus {
    background-color: var(--align-neutral-text);
    border: none;
}
/* style.css's ".list_horizontal li.active:after" draws a 20px CSS-triangle
   "flag" pointing out from the active tab (border-left-color: inherit, off
   the list-group-item.active's own `color`) - a legacy wizard-tab decoration
   with no FSMFe equivalent (its tabs are a flat filled pill, nothing
   pointing off the edge). Confirmed live: this is the second half of what
   read as a stray border/spike on the active item above. */
.ui-redesign .list_horizontal li.active:after {
    display: none;
}
/* style.css's ".list_horizontal li a i { color: var(--primary) }" tints
   every tab icon (Caregiver/Address/Emergency/... on the left-hand student
   strip) with the customer's brand color - confirmed live rendering as blue
   (#2B87C8 for this school) against FSMFe, which never colors icons in a
   plain nav list like this; they're the same neutral text color as the
   label next to them. ":not(.active)" leaves the active tab's icon alone -
   style.css's own ".list_horizontal li.active a i { color: #FFF !important }"
   already makes it readable against the black fill above and its
   `!important` would win over this anyway. */
.ui-redesign .list_horizontal li:not(.active) a i {
    color: var(--align-neutral-text);
}
/* Requested directly: a visible border/ring on click so the tab strip gives
   some feedback beyond the background-color swap, matching the same
   focus-visible treatment already used for checkboxes/radios elsewhere in
   this file. Inset (negative offset) rather than the checkbox/radio's
   outward +1px, since these items sit flush against their neighbours in a
   vertical list - an outward ring would get clipped by (or overlap) the
   item above/below instead of framing the clicked one. */
.ui-redesign .list_horizontal li a:focus-visible {
    outline: 2px solid var(--align-neutral-text);
    outline-offset: -2px;
}

/* .list-group-item-info (top of this file, pre-existing/global) paints a
   solid --primary-variant teal block - used here as a sub-section header
   ("Father [Lives with ...]") grouping one caregiver's details. Flattened to
   a plain muted header row instead of a solid color fill, matching the
   panel-heading/pop_up_header_bg treatment elsewhere in this file. */
.ui-redesign .list-group-item-info {
    background-color: var(--align-neutral-bg);
    color: var(--align-neutral-text);
    border-color: var(--align-neutral-border);
}

/* .msg_trafficlight (f/studentinformation/studentinformation.js) is an
   attendance-rate indicator whose exact color (green/amber/red) comes back
   from the server as an inline style, e.g. style="background-color:#00FF00"
   - there's no class per status to hook, and no fixed palette in this CSS
   file to redirect it to. A saturate/brightness filter mutes whatever raw
   hex the server sends (still reads as "green-ish"/"red-ish", just not a
   pure saturated #00FF00) without needing to know the exact value or touch
   the JS that sets it. Text color is forced to white since the raw colors
   are all mid/dark enough for white to stay readable once muted; the
   default alert text color it inherited otherwise reads too low-contrast on
   top of these fills. */
.ui-redesign .alert.msg_trafficlight {
    filter: saturate(0.55) brightness(0.85);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-weight: 500;
}