/* Portal pages: maps the SmartAdmin / Bootstrap colors to the brand palette (css/ctec-brand.css).
   Load after the template and Bootstrap stylesheets. Not used by the homepage. */
body { accent-color: var(--ctec-navy); }

/* ── Links: navy, underlined in body text; menus, tabs, buttons and lists are not ── */
html body a { color: var(--ctec-navy); text-decoration: underline; }
html body a:hover { color: var(--ctec-navy-deep); }
html body a.btn, html body .nav a, html body .nav-link, html body .nav-menu a, html body .dropdown-item,
html body .page-link, html body .page-header a, html body .page-logo a, html body .page-sidebar a,
html body a.badge, html body .list-group-item, html body .navbar a, html body a.header-icon,
html body a[class*="btn-"], html body .ctec-nolink { text-decoration: none; }

/* ── Text colors ── */
.text-primary { color: var(--ctec-navy) !important; }
.text-danger { color: var(--ctec-danger) !important; }
.text-success { color: var(--ctec-success) !important; }
.text-warning { color: var(--ctec-warning) !important; }
.text-info { color: var(--ctec-info) !important; }
.text-muted { color: var(--ctec-ink-soft) !important; }
.text-navy { color: var(--ctec-navy) !important; }
.ctec-msg-danger { color: var(--ctec-danger) !important; }
.ctec-msg-success { color: var(--ctec-success) !important; }

/* ── Backgrounds and borders ── */
.bg-primary, .bg-primary-300, .bg-primary-500 { background-color: var(--ctec-navy) !important; color: #fff; }
.bg-success, .bg-success-200, .bg-success-500, .bg-success-600 { background-color: var(--ctec-success) !important; color: #fff; }
.bg-info, .bg-info-200, .bg-info-500, .bg-info-700 { background-color: var(--ctec-info) !important; color: #fff; }
.bg-danger, .bg-danger-500 { background-color: var(--ctec-danger) !important; color: #fff; }
.bg-warning, .bg-warning-400, .bg-warning-500 { background-color: var(--ctec-gold) !important; color: var(--ctec-navy); }
.bg-warning-200 { background-color: var(--ctec-cream) !important; color: var(--ctec-navy); }
.bg-light { background-color: var(--ctec-bg-alt) !important; }
/* Decorative fills (cards, counters): palette only, each with its readable text color */
.ctec-fill-navy { background-color: var(--ctec-navy); color: #fff; }            /* 10.1 */
.ctec-fill-navy-deep { background-color: var(--ctec-navy-deep); color: #fff; }  /* 13.7 */
.ctec-fill-gold { background-color: var(--ctec-gold); color: var(--ctec-navy); }  /* 6.5 */
.ctec-fill-sky { background-color: var(--ctec-sky-2); color: var(--ctec-navy); }   /* 5.7 */
.border-primary { border-color: var(--ctec-navy) !important; }
.border-primary-subtle { border-color: var(--ctec-sky-1) !important; }
.border-info { border-color: var(--ctec-info-line) !important; }
.bg-brand-gradient, .page-logo, .page-sidebar, .nav-footer {
    background-image: linear-gradient(135deg, var(--ctec-navy) 0%, var(--ctec-navy-deep) 100%);
    background-color: var(--ctec-navy);
}

/* ── Buttons (SmartAdmin / Bootstrap 4 properties and Bootstrap 5 variables) ── */
.btn-primary {
    --bs-btn-color: #fff; --bs-btn-bg: var(--ctec-navy); --bs-btn-border-color: var(--ctec-navy);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ctec-navy-deep); --bs-btn-hover-border-color: var(--ctec-navy-deep);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--ctec-navy-deep); --bs-btn-active-border-color: var(--ctec-navy-deep);
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--ctec-navy); --bs-btn-disabled-border-color: var(--ctec-navy);
    color: #fff; background-color: var(--ctec-navy); border-color: var(--ctec-navy); box-shadow: none;
}
.btn-success {
    --bs-btn-color: #fff; --bs-btn-bg: var(--ctec-success); --bs-btn-border-color: var(--ctec-success);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ctec-success-hover); --bs-btn-hover-border-color: var(--ctec-success-hover);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--ctec-success-hover); --bs-btn-active-border-color: var(--ctec-success-hover);
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--ctec-success); --bs-btn-disabled-border-color: var(--ctec-success);
    color: #fff; background-color: var(--ctec-success); border-color: var(--ctec-success); box-shadow: none;
}
.btn-danger {
    --bs-btn-color: #fff; --bs-btn-bg: var(--ctec-danger); --bs-btn-border-color: var(--ctec-danger);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ctec-danger-hover); --bs-btn-hover-border-color: var(--ctec-danger-hover);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--ctec-danger-hover); --bs-btn-active-border-color: var(--ctec-danger-hover);
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--ctec-danger); --bs-btn-disabled-border-color: var(--ctec-danger);
    color: #fff; background-color: var(--ctec-danger); border-color: var(--ctec-danger); box-shadow: none;
}
.btn-info {
    --bs-btn-color: #fff; --bs-btn-bg: var(--ctec-info); --bs-btn-border-color: var(--ctec-info);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ctec-info-hover); --bs-btn-hover-border-color: var(--ctec-info-hover);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--ctec-info-hover); --bs-btn-active-border-color: var(--ctec-info-hover);
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--ctec-info); --bs-btn-disabled-border-color: var(--ctec-info);
    color: #fff; background-color: var(--ctec-info); border-color: var(--ctec-info); box-shadow: none;
}
.btn-warning {
    --bs-btn-color: var(--ctec-navy); --bs-btn-bg: var(--ctec-gold); --bs-btn-border-color: var(--ctec-gold);
    --bs-btn-hover-color: var(--ctec-navy); --bs-btn-hover-bg: var(--ctec-gold-hover); --bs-btn-hover-border-color: var(--ctec-gold-hover);
    --bs-btn-active-color: var(--ctec-navy); --bs-btn-active-bg: var(--ctec-gold-hover); --bs-btn-active-border-color: var(--ctec-gold-hover);
    --bs-btn-disabled-color: var(--ctec-navy); --bs-btn-disabled-bg: var(--ctec-gold); --bs-btn-disabled-border-color: var(--ctec-gold);
    color: var(--ctec-navy); background-color: var(--ctec-gold); border-color: var(--ctec-gold); box-shadow: none;
}
.btn-secondary {
    --bs-btn-color: #fff; --bs-btn-bg: var(--ctec-ink-soft); --bs-btn-border-color: var(--ctec-ink-soft);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ctec-ink); --bs-btn-hover-border-color: var(--ctec-ink);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--ctec-ink); --bs-btn-active-border-color: var(--ctec-ink);
    color: #fff; background-color: var(--ctec-ink-soft); border-color: var(--ctec-ink-soft); box-shadow: none;
}
.btn-outline-primary {
    --bs-btn-color: var(--ctec-navy); --bs-btn-border-color: var(--ctec-navy);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ctec-navy); --bs-btn-hover-border-color: var(--ctec-navy);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--ctec-navy-deep); --bs-btn-active-border-color: var(--ctec-navy-deep);
    color: var(--ctec-navy); background-color: transparent; border-color: var(--ctec-navy);
}
.btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled):active {
    color: #fff; background-color: var(--ctec-navy-deep); border-color: var(--ctec-navy-deep);
}
.btn-success:hover, .btn-success:not(:disabled):not(.disabled):active { color: #fff; background-color: var(--ctec-success-hover); border-color: var(--ctec-success-hover); }
.btn-danger:hover, .btn-danger:not(:disabled):not(.disabled):active { color: #fff; background-color: var(--ctec-danger-hover); border-color: var(--ctec-danger-hover); }
.btn-info:hover, .btn-info:not(:disabled):not(.disabled):active { color: #fff; background-color: var(--ctec-info-hover); border-color: var(--ctec-info-hover); }
.btn-warning:hover, .btn-warning:not(:disabled):not(.disabled):active { color: var(--ctec-navy); background-color: var(--ctec-gold-hover); border-color: var(--ctec-gold-hover); }
.btn-secondary:hover, .btn-secondary:not(:disabled):not(.disabled):active { color: #fff; background-color: var(--ctec-ink); border-color: var(--ctec-ink); }
.btn:focus, .btn.focus, .btn:focus-visible {
    outline: 2px solid var(--ctec-navy); outline-offset: 2px; box-shadow: var(--ctec-focus-ring);
}

/* ── Alerts ── */
.alert-danger { --bs-alert-color: var(--ctec-danger); --bs-alert-bg: var(--ctec-danger-bg); --bs-alert-border-color: var(--ctec-danger-line);
    color: var(--ctec-danger); background-color: var(--ctec-danger-bg); border-color: var(--ctec-danger-line); }
.alert-success { --bs-alert-color: var(--ctec-success); --bs-alert-bg: var(--ctec-success-bg); --bs-alert-border-color: var(--ctec-success-line);
    color: var(--ctec-success); background-color: var(--ctec-success-bg); border-color: var(--ctec-success-line); }
.alert-warning { --bs-alert-color: var(--ctec-warning); --bs-alert-bg: var(--ctec-warning-bg); --bs-alert-border-color: var(--ctec-warning-line);
    color: var(--ctec-warning); background-color: var(--ctec-warning-bg); border-color: var(--ctec-warning-line); }
.alert-info { --bs-alert-color: var(--ctec-info); --bs-alert-bg: var(--ctec-info-bg); --bs-alert-border-color: var(--ctec-info-line);
    color: var(--ctec-info); background-color: var(--ctec-info-bg); border-color: var(--ctec-info-line); }

/* ── Badges ── */
.badge-primary { color: #fff; background-color: var(--ctec-navy); }
/* Badges are labels, not messages: palette colors (red only for a problem: Not paid, Inactive, Overdue) */
.badge-success { color: #fff; background-color: var(--ctec-navy); }
.badge-danger { color: #fff; background-color: var(--ctec-danger); }
.badge-info { color: var(--ctec-navy); background-color: var(--ctec-sky-1); }
.badge-warning { color: var(--ctec-navy); background-color: var(--ctec-gold); }
.badge-secondary { color: #fff; background-color: var(--ctec-ink-soft); }

/* ── Forms ── */
.form-control:focus, .custom-select:focus, .form-select:focus {
    border-color: var(--ctec-navy); box-shadow: var(--ctec-focus-ring);
}
.form-control:focus ~ .input-group-prepend .input-group-text,
.form-control:focus ~ .input-group-append .input-group-text { border-color: var(--ctec-navy); }
.custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked { background-color: var(--ctec-navy); border-color: var(--ctec-navy); }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--ctec-danger); }
.invalid-feedback { color: var(--ctec-danger); }
.valid-feedback { color: var(--ctec-success); }

/* ── Template parts that used the purple primary ── */
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--ctec-navy); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--ctec-navy); }
.page-item.active .page-link { color: #fff; background-color: var(--ctec-navy); border-color: var(--ctec-navy); }
.page-link, .pagination .page-link:hover { color: var(--ctec-navy); }
.pagination .page-link:hover { background-color: var(--ctec-navy-deep) !important; color: #fff; }
.pagination .page-item:first-child:not(.active) .page-link,
.pagination .page-item:last-child:not(.active) .page-link,
.pagination .page-item.disabled .page-link { background: var(--ctec-bg-alt); color: var(--ctec-navy); }
/* DataTables: the "+" / "-" that opens a row's hidden columns on narrow screens */
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before,
table.dataTable.dtr-column > tbody > tr > td.control:before,
table.dataTable.dtr-column > tbody > tr > th.control:before { background-color: var(--ctec-navy); }
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before,
table.dataTable.dtr-column > tbody > tr.parent td.control:before,
table.dataTable.dtr-column > tbody > tr.parent th.control:before { background-color: var(--ctec-navy-deep); }
table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected,
table.dataTable tbody th.focus, table.dataTable tbody td.focus { box-shadow: inset 0 0 0 1px var(--ctec-navy); }
.dataTables_wrapper .pagination .page-item.active .page-link { background-color: var(--ctec-navy); border-color: var(--ctec-navy); }
.nav-menu li.active > a { box-shadow: inset 3px 0 0 var(--ctec-gold); }
.header-icon:not(.btn) > [class*='fa-']:first-child { color: var(--ctec-navy); }
/* Phone menu button in the portal header (template: pink gradient) */
.header-btn[data-class='mobile-nav-on'] { border-color: var(--ctec-navy); background-color: var(--ctec-navy); background-image: none; color: #fff; }
.header-btn[data-class='mobile-nav-on']:hover { background-color: var(--ctec-navy-deep); color: #fff; }
.badge.badge-icon { background-color: var(--ctec-danger); color: #fff; border-color: #fff; }
body:not(.mod-pace-custom) .pace .pace-progress, body.mod-pace-custom .pace .pace-progress { background-color: var(--ctec-gold); }
.subheader-title { color: var(--ctec-ink); }

/* A button-styled link with no address (e.g. no file to view) looks disabled */
a.btn:not([href]) { color: var(--ctec-ink-soft); background-color: var(--ctec-bg-alt); border-color: var(--ctec-line); cursor: default; }

/* ── Text size on the template pages (<html class="ctec-portal">: Main.master, Login, Registration, ActivateAndReset;
   on <html> because the template's theme script rewrites the <body> class) ──
   The template's base is 13 px; one value sets body text, forms, buttons, tables, menus and tabs.
   Small variants (btn-sm, help text) stay 2 px smaller. Review / Pay / ThankYou (Bootstrap 5) are 16 px already. */
:root { --ctec-font-base: 15px; --ctec-font-small: calc(var(--ctec-font-base) - 2px); }
html.ctec-portal body { font-size: var(--ctec-font-base); }
html.ctec-portal .form-control, html.ctec-portal .custom-select, html.ctec-portal .form-select,
html.ctec-portal .form-control-plaintext, html.ctec-portal .input-group-text, html.ctec-portal .btn,
html.ctec-portal .dropdown-menu, html.ctec-portal .page-footer, html.ctec-portal .nav-menu li a,
html.ctec-portal .nav .nav-link:not([class^="btn-"]):not([class*=" btn-"]),
html.ctec-portal .dataTables_wrapper .dataTables_paginate .pagination .page-item > .page-link { font-size: var(--ctec-font-base); }
html.ctec-portal .btn-sm, html.ctec-portal .form-control-sm, html.ctec-portal .custom-select-sm,
html.ctec-portal .col-form-label-sm, html.ctec-portal .help-block,
html.ctec-portal .invalid-feedback, html.ctec-portal .valid-feedback { font-size: var(--ctec-font-small); }html.ctec-portal input[type="date"].form-control { min-width: 11.5em; } /* room for the full date at 15-16 px */

/* ── Headings in proportion to the 15 px body (template sizes were set for 13 px, x 15/13).
   :where() keeps them at the template's own specificity: page classes (.display-4, .section-title) still win. ── */
:where(html.ctec-portal) h1, :where(html.ctec-portal) .h1 { font-size: 28px; }
:where(html.ctec-portal) h2, :where(html.ctec-portal) .h2 { font-size: 25px; }
:where(html.ctec-portal) h3, :where(html.ctec-portal) .h3 { font-size: 22px; }
:where(html.ctec-portal) h4, :where(html.ctec-portal) .h4 { font-size: 20px; }
:where(html.ctec-portal) h5, :where(html.ctec-portal) .h5,
:where(html.ctec-portal) .card-title { font-size: 17px; }
:where(html.ctec-portal) h6, :where(html.ctec-portal) .h6 { font-size: 16px; }
:where(html.ctec-portal) .subheader-title { font-size: 25px; }
:where(html.ctec-portal) .panel-hdr h2 { font-size: 17px; font-weight: 600; }

/* Dashboard counters: the number and its label are one heading at the same size, two lines at most,
   on every card (EN and ES); every card is tall enough for two lines, so the four stay the same height */
.ctec-card { --ctec-count-size: 34px; display: flex; align-items: center;
    min-height: calc(2 * 1.15 * var(--ctec-count-size) + 2rem); }
.ctec-card > div { width: 100%; }
.ctec-card-count {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin: 0; padding-right: 4.5rem; /* clear of the card's watermark icon */
    font-size: var(--ctec-count-size); font-weight: 700; line-height: 1.15; overflow-wrap: break-word;
}
.ctec-card-count .ctec-card-label { display: inline; font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0; } /* flows after the number */
@media (max-width: 1399.98px) { .ctec-card { --ctec-count-size: 32px; } }
@media (max-width: 575.98px) { .ctec-card { --ctec-count-size: 26px; } .ctec-card-count { padding-right: 3.5rem; } }

/* Bootstrap 5 text classes used in the pages but missing from the template (Bootstrap 4): without them,
   headings and labels marked bold showed in the light default weight */
.fw-bold { font-weight: 700 !important; }
.fw-semibold { font-weight: 600 !important; }
.fst-italic { font-style: italic !important; }

/* Sidebar menu: 18 px text with 22 px icons (template: 14 px / 18 px); one line per item, EN and ES, desktop and phone
   (checked by the E2E test PortalMenu, which reads the computed sizes) */
:root { --ctec-menu-font: 18px; --ctec-menu-icon: 22px; }
html.ctec-portal .nav-menu li a { font-size: var(--ctec-menu-font); }
html.ctec-portal .nav-menu li a > [class*='fa-'], html.ctec-portal .nav-menu li a > .ni { font-size: var(--ctec-menu-icon); margin-right: .5rem; }
html.ctec-portal .nav-menu li a .nav-link-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Template padding (2rem each side) narrowed so the longest items fit on one line at 18 px */
html.ctec-portal .nav-menu > li > a { padding-left: .75rem; padding-right: .5rem; }
/* The new-tab mark after "My coursework (Canvas)", the longest item: a little smaller so the label fits */
html.ctec-portal #lnkCanvas .fa-external-link { font-size: .6em !important; margin-left: .2rem !important; }html.ctec-portal .nav-menu a[target] { text-decoration: none !important; font-weight: inherit; }