/* Varsity Learning Brand Overrides for IMathAS
   Loaded on VL-branded IMathAS pages (loginpage_vl, newinstructor, etc.)
   Also used by varsitylearning_layout Blade pages.

   vl_refresh_02.css (the IMathAS course theme) loads AFTER this file.
   As of v010, vl_refresh_02.css uses VL design tokens natively (Open Sans,
   #0075C8 blue). The !important rules below are safety overrides for any
   upstream imascore.css styles that may bleed through.

   !important policy:
   - Required: properties where vl_refresh_02.css explicitly overrides them
     (body, table backgrounds, row striping, navlist, buttons, borders)
   - Not required: link colors with higher specificity (now that a:link color
     has no !important, any higher-specificity rule wins naturally)
   - Not required: Blade-only selectors (#mainnav-holder, footer) that never
     appear in IMathAS pages where vl_refresh_02.css loads
*/

/* Fonts are loaded via <link> in the layout, not @import (avoids render-blocking) */

/* ── Design tokens ──
   ⚠️  CANONICAL SOURCE: resources/css/vl-tokens.css
   This block is duplicated here because all_varsitylearning.css is served
   as a static asset (not processed by Vite) and can't @import the canonical
   file without an extra HTTP round-trip. If you change a value here, change
   it in resources/css/vl-tokens.css too. See docs/DESIGN_SYSTEM.md §Tokens.
*/
:root {
    --vl-primary:       #0075C8;
    --vl-primary-dark:  #005A9E;
    --vl-primary-darker: #004B80;
    --vl-secondary:     #B32025;
    --vl-secondary-dark: #8E191D;
    --vl-text:          #263238;
    --vl-text-light:     #546E7A;
    --vl-bg:            #F5F5F5;
    --vl-light-gray:     #E7ECEC;
    --vl-border:        #B8D5F0;
    --vl-border-light:   #E7ECEC;
    --vl-stripe-odd:    #F0F7FF;
    --vl-blue-light:     #D8EAF7;
    --vl-blue-medium:    #A6D4F6;
    --vl-success:        #10B981;
    --vl-warning:        #F59E0B;
    --vl-error:          #EF4444;
}

/* ── Reset imascore.css + vl_refresh_02.css body styles ── */
body {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 100% !important;
    color: var(--vl-text) !important;
    background-color: var(--vl-bg) !important;
}

/* Explicit heading font beats inherited body font — no !important needed */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ── Links — vl_refresh_02.css sets the same values; no !important needed ── */
a:link, a:visited {
    color: var(--vl-primary);
    text-decoration: none;
}
a:hover, a:active {
    color: var(--vl-primary-dark);
    text-decoration: underline;
}
/* VIEW buttons — ID specificity wins over a:link without !important */
#viewbuttoncont a,
#viewbuttoncont a:link,
#viewbuttoncont a:visited,
#viewbuttoncont a:hover,
#viewbuttoncont a:active {
    color: #fff !important;
    text-decoration: none;
}

/* ── Fixed-header body offset ── */
.mainbody {
    padding-top: 0 !important;
    margin: 0 !important;
}
div.headerwrapper {
    margin-top: 0;
}

/* ── IMathAS content area ── */
#centercontent {
    background: #fff;
    border-radius: 8px;
    padding: 20px 24px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
div.midwrapper,
div.contentwrapper {
    background: #fff;
    border-radius: 8px;
    padding: 16px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* ── Course nav tabs — VL blue ── */
ul#navlist {
    background-color: var(--vl-primary) !important;
    position: relative !important;
    z-index: 10 !important;
}
ul#navlist li a {
    background-color: var(--vl-primary) !important;
    color: #fff !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600 !important;
}
ul#navlist li a:hover,
ul#navlist li a:focus {
    background-color: var(--vl-primary-dark) !important;
    color: #fff !important;
}
ul#navlist li a.activetab {
    background-color: var(--vl-primary-darker) !important;
    color: #fff !important;
}

/* ── Course items & blocks — VL brand ── */
div.item {
    border: 1px solid var(--vl-border-light) !important;
    background-color: #fff !important;
}
div.blockitems div.block {
    border: 1px solid var(--vl-border-light) !important;
    background-color: var(--vl-bg) !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 500 !important;
    color: var(--vl-text) !important;
}

/* ── IMathAS Header bar — safety overrides for vl-imathas-head ── */
.vl-imathas-head {
    font-family: 'Open Sans', sans-serif !important;
}

/* Admin/alert buttons — .vl-admin-btn is VL-specific; no !important needed on most props */
a.vl-admin-btn,
a.vl-admin-btn:link,
a.vl-admin-btn:visited {
    display: inline-block;
    color: #fff;
    background-color: var(--vl-secondary) !important;
    border-radius: 9999px;
    border: 2px solid transparent;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
    padding: 0.3rem 0.9rem;
    margin: 2px 3px;
    line-height: 1.5;
    text-decoration: none;
}
a.vl-admin-btn:hover { background-color: var(--vl-secondary-dark) !important; color: #fff; text-decoration: none; }

/* ── IMathAS left nav ── */
div.leftnav,
div.leftnavinner {
    background: #fff !important;
    border-right: 1px solid var(--vl-border-light) !important;
    font-family: 'Open Sans', sans-serif !important;
}
.leftnav a, .leftnav a:link, .leftnav a:visited,
.leftnavinner a, .leftnavinner a:link, .leftnavinner a:visited {
    color: var(--vl-text) !important;
    font-size: 0.875rem;
}
.leftnav a:hover, .leftnavinner a:hover {
    color: var(--vl-primary) !important;
}
.leftnav b, .leftnavinner b,
.leftnav p > b, .leftnavinner p > b {
    font-family: 'Open Sans', sans-serif !important;
    color: var(--vl-text) !important;
}

/* ── Buttons ── */
input[type=submit], button[type=submit], .btn, .abutton {
    font-family: 'Open Sans', sans-serif !important;
    color: #fff !important;
    background-color: var(--vl-primary) !important;
    border: 2px solid var(--vl-primary) !important;
    border-radius: 6px;
    padding: 0.35rem 0.9rem;
    cursor: pointer;
}
input[type=submit]:hover, button[type=submit]:hover, .btn:hover, .abutton:hover {
    background-color: var(--vl-primary-dark) !important;
    border-color: var(--vl-primary-dark) !important;
}
input[type=submit].btn-primary,
button.btn-primary,
.btn-default {
    background-color: var(--vl-primary) !important;
    border-color: var(--vl-primary) !important;
    color: #fff !important;
    border-radius: 6px;
}
input[type=submit].btn-primary:hover,
button.btn-primary:hover {
    background-color: var(--vl-primary-dark) !important;
    border-color: var(--vl-primary-dark) !important;
}
.btn-danger {
    background-color: var(--vl-secondary) !important;
    border-color: var(--vl-secondary) !important;
    border-radius: 6px;
}
.btn-danger:hover {
    background-color: var(--vl-secondary-dark) !important;
    border-color: var(--vl-secondary-dark) !important;
}

/* ── Tables ── */
table.gb, table.sortable, table.floatinghead {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 0.875rem;
}
table.gb thead th, table.sortable thead th {
    background-color: var(--vl-primary) !important;
    color: #fff !important;
    font-weight: 600;
}
/* Row striping — targets both td and th (name cells) */
table.gb tr.odd td, table.gb tr.odd th,
table.gbl tr.odd td, table.gbl tr.odd th,
table.sortable tr.odd td, table.sortable tr.odd th {
    background-color: var(--vl-stripe-odd) !important;
}
table.gb tr.even td, table.gb tr.even th,
table.gbl tr.even td, table.gbl tr.even th,
table.sortable tr.even td, table.sortable tr.even th {
    background-color: #fff !important;
}
/* Sticky table headers */
table thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
}
table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
}
/* Ensure BS3 dropdowns in table rows render above sticky headers */
.dropdown-menu { z-index: 1050; }
/* tbody th = student name cells (<th scope=row>) */
table.gb tbody th,
table.gbl tbody th {
    font-weight: 400;
    color: var(--vl-text);
    border-bottom: 1px solid var(--vl-border) !important;
}
table.gb tbody th a,
table.gb tbody th a:link,
table.gb tbody th a:visited {
    color: var(--vl-primary);
}
table.gb > tbody > tr > td,
table.gbl > tbody > tr > td {
    border-bottom: 1px solid var(--vl-border) !important;
}

/* Forum table */
table.forum {
    border: 2px solid var(--vl-primary) !important;
}
table.forum > thead > tr {
    border-bottom: 2px solid var(--vl-primary) !important;
}

/* ── Login page — higher specificity than a:link ── */
.vl-login-hero a, .vl-login-hero a:link, .vl-login-hero a:visited {
    color: #fff !important;
}
.vl-login-hero a:hover, .vl-login-hero a:active {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
}

/* ── Gradebook thead — higher specificity than a:link ── */
table.gb thead th a,
table.gb thead th a:link,
table.gb thead th a:visited {
    color: #fff !important;
}
table.gb thead th a:hover {
    color: rgba(255,255,255,0.8);
    text-decoration: underline;
}

/* ── Calendar day numbers — higher specificity than a:link ── */
.day:hover a, .day:hover a:link, .day:hover a:visited, .day:hover a:hover,
.today .day a, .today .day a:link, .today .day a:visited {
    color: #fff !important;
    text-decoration: none;
}

/* ── Breadcrumb ── */
div.breadcrumb {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 0.8rem;
    padding: 8px 16px;
    background: var(--vl-border-light) !important;
    border: none !important;
    border-bottom: 1px solid #CBD5E0 !important;
}
div.breadcrumb a,
div.breadcrumb a:link,
div.breadcrumb a:visited {
    color: var(--vl-primary);
}

/* ── Control panels ── */
div.cp, div.cpmid {
    border: 1px solid var(--vl-border-light) !important;
    background-color: var(--vl-bg) !important;
    font-family: 'Open Sans', sans-serif !important;
}

/* ── VL Legacy Blade layout — Blade-only, vl_refresh_02.css not loaded here ── */
#mainnav-holder {
    background-color: var(--vl-primary);
    border-bottom: 1px solid var(--vl-primary-dark);
}
#mainnav-holder .navbar-nav > li > a,
#mainnav-holder .navbar-nav > li > a:link,
#mainnav-holder .navbar-nav > li > a:visited {
    color: rgba(255,255,255,0.85);
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
}
#mainnav-holder .navbar-nav > li > a:hover,
#mainnav-holder .navbar-nav > li.active > a {
    color: #fff;
    background: rgba(255,255,255,0.1);
}
footer {
    background-color: var(--vl-primary);
    color: #fff;
    font-family: 'Open Sans', sans-serif;
}
footer a, footer a:link, footer a:visited { color: rgba(255,255,255,0.8); }
footer a:hover { color: #fff; }

/* ── Override imascore.css .warn (orange) — used for item descriptions ── */
.warn { color: var(--vl-text-light, #546E7A) !important; }