/*  -- Tabbed Selector Requirements -- */

/*
 * NEW LOOK AND FEEL.
 *
 * This file loads AFTER ace.css (header_includes.php lines 36 then 37), so it wins on equal
 * specificity -- which is why the tab strip could not be fixed from ace.css and is restyled here.
 *
 * FONT. ace.css sets `* { font-family: Arial, sans-serif}`, but `*` has the lowest
 * specificity there is, and header_includes.php line 20 loads a jQuery UI theme FROM A CDN after
 * the local one -- its `.ui-widget` rule (0,1,0) beats `*` (0,0,0) and dresses the whole tab box
 * in whatever that theme ships. Stating the family here, on the strip and the panel and the form
 * controls inside them, is the only thing that holds. Same reasoning as .hlpTabs in ace.css.
 *
 * The old look was a 20px strip of #c7c5c5 tabs with black borders, 0 12px 0 0 radii and a
 * #EDEBDD panel. Everything below is the card language used by .settingsCard, .dashStatsCard and
 * .srDashCard, so a tab box now reads as part of the same application as the cards around it.
 */

/* --- font, stated everywhere the CDN theme reaches ---------------------------------------- */
.ui-tabs,
.ui-tabs .ui-widget,
.ui-tabs .ui-tabs-nav,
.ui-tabs .ui-tabs-nav li,
.ui-tabs .ui-tabs-nav li a,
.ui-tabs .ui-tabs-panel,
.ui-tabs input,
.ui-tabs select,
.ui-tabs textarea,
.ui-tabs button { font-family: Arial, sans-serif; }

.ui-tabs {
    position: relative;
    padding: 0;
    zoom: 1;
    /* NO BORDER ON THE CONTAINER. jQuery UI adds `ui-widget ui-widget-content` to this div and
       the theme gives that a 1px grey edge; the strip draws the line under the tabs and the
       panel draws its own three sides, so a border here is a second frame around the first.
       It was invisible until now only because sr/srstyles.php was painting a 3px branded border
       on the .srPersonInfo wrapper on top of it. No !important needed: this file loads after
       ace.css AND after the CDN theme, so it wins on source order at equal specificity. */
    border: 0 none;
    background: transparent;
}

/* --- the strip ---------------------------------------------------------------------------- */
.ui-tabs .ui-tabs-nav {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    /* Sits on the panel's top border so the active tab can erase its own segment of it. */
    border-bottom: 1px solid var(--aceCardBorder, #D8E2E0);
}

.ui-tabs .ui-tabs-nav li {
    list-style: none;
    float: left;                 /* jQuery UI still measures these; flex does the real layout */
    position: relative;
    top: 1px;                    /* overlap the panel border by exactly its width */
    margin: 0;
    padding: 0;
    white-space: nowrap;
    background: var(--aceAccent2, #F7FAF9);
    border: 1px solid var(--aceCardBorder, #D8E2E0);
    border-bottom-color: var(--aceCardBorder, #D8E2E0);
    border-radius: 8px 8px 0 0;
    color: var(--aceAccent2Text, #2F4F4A);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    height: auto;
}

.ui-tabs .ui-tabs-nav li a {
    float: none;
    display: block;
    padding: 7px 14px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.ui-tabs .ui-tabs-nav li:hover { background: #EDF4F2; }

/* KEYBOARD FOCUS ONLY.
   This was `li:focus-within`, which also matches a MOUSE click -- so clicking a tab left a 2px
   ring in --aceAccent sitting on it for as long as it held focus. --aceAccent is the school's
   PRIMARY accent, a deep indigo for several of them (#2a2f7e, #50176D, #1A10C5), so it read as
   a stray purple outline round the tab box rather than as a focus ring.
   :focus-visible is the browser's own "did they arrive here by keyboard" test, so keyboard users
   still get the ring WCAG 2.4.7 requires and mouse users see nothing. It goes on the anchor,
   which is the element that actually takes focus. */
.ui-tabs .ui-tabs-nav li a:focus-visible {
    outline: 2px solid var(--aceAccent, #2b6cb0);
    outline-offset: -2px;
}

/* The open tab is the panel: same ground, and its bottom border is erased so the two join. */
.ui-tabs .ui-tabs-nav li.ui-tabs-active,
.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
    background: #FFFFFF;
    border-bottom-color: #FFFFFF;
    color: var(--aceInk, #2a2a2a);
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active:hover { background: #FFFFFF; }

/* --- the panel ---------------------------------------------------------------------------- */
.ui-tabs .ui-tabs-panel {
    clear: both;
    display: block;
    background: #FFFFFF;
    border: 1px solid var(--aceCardBorder, #D8E2E0);
    border-top: 0 none;          /* the strip already drew that line */
    border-radius: 0 0 10px 10px;
    padding: 12px 14px;
}

/* --- headings inside a panel -------------------------------------------------------------- */
/* Headings in a tab panel had NO colour rule of their own, so they inherited -- and what they
   inherit can be a brand-derived accent (the accent-from-logo tokens), which is chosen against
   the brand ground, not against this white panel. A pale brand therefore put pale text on
   white. Every hard-coded colour in this file measures 8:1 or better, so the failure could only
   ever come from an inherited one; stating the ink here ends that. --aceInk on white is
   14.35:1, which clears WCAG 2.2 AA (4.5:1) and AAA (7:1). */
/* The family is stated here as well as on the panel. Inheritance SHOULD carry it down from
   .ui-tabs .ui-tabs-panel, and it does -- but a heading is exactly the element a third-party
   sheet is most likely to target by name, and "Tools For People" (an <h3> in the Tools tab)
   was the reported case. Stating it costs one declaration and removes the question. */
.ui-tabs .ui-tabs-panel h1,
.ui-tabs .ui-tabs-panel h2,
.ui-tabs .ui-tabs-panel h3,
.ui-tabs .ui-tabs-panel h4,
.ui-tabs .ui-tabs-panel h5,
.ui-tabs .ui-tabs-panel h6 { color: var(--aceInk, #2a2a2a); font-family: Arial, sans-serif; }

/* --- behaviour, unchanged ----------------------------------------------------------------- */
/* A selected tab's label is text, not a link, so it does not offer a pointer. */
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }

.ui-tabs .ui-tabs-nav li a,
.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; }

/* Off-screen rather than display:none -- a hidden panel must keep its measurements so jQuery UI
   can size the box, and screen readers must still be able to reach it. */
.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -99999px;
}