/*
 * Tomball ISD Student LINK shared theme.
 * Primary Student branding plus the approved Tomball ISD secondary accents.
 */
:root {
    --student-brand-color: #CF0A2C; /* PMS 186 C */
    --student-brand-hover: #A60824;
    --student-brand-soft: #F4D9DE;
    --student-secondary-violet: #410099; /* PMS Violet C */
    --student-secondary-red: #9C182F; /* PMS 7427 C */
    --student-secondary-blue: #1A428A; /* PMS 7687 C */
    --student-secondary-gold: #9C8311; /* PMS 112 C */
    --student-surface-dark: #F1F2F4;
    --student-surface-dark-hover: #E4E7EA;
    --student-surface-light: var(--student-brand-color);
    --student-surface-light-hover: var(--student-brand-hover);
    --student-button-muted: var(--student-surface-light);
    --student-button-muted-hover: var(--student-surface-light-hover);
    --student-brand-contrast: #FFFFFF;
    --student-link-color: var(--student-brand-color);
}

/* Content surfaces that formerly used the legacy teal/slate palette. */
.bcolor3,
.bcolor,
.sidebar.bcolor3,
.sidebar.bcolor,
.form-title,
.form-title2,
.form-title3,
.chader,
.card-header.bcolor3,
th.bcolor3,
tr.bcolor3,
.tblhd.bcolor3 {
    background-color: var(--student-surface-dark) !important;
    color: #222222 !important;
}

/* PMS 186 red is reserved for the master-page branding. */
.student-header,
.student-footer {
    background-color: var(--student-brand-color) !important;
    color: var(--student-brand-contrast) !important;
}

.student-header {
    border-top: 0 !important;
    box-shadow: 0 2px 8px rgba(101, 4, 21, .24);
}

.student-header .nav-link,
.student-footer,
.student-footer h4,
.student-footer .mobile-text,
.student-footer .text-black-50 {
    color: var(--student-brand-contrast) !important;
}

.student-brand {
    display: inline-flex;
    gap: .65rem;
    align-items: center;
}

.tisd-tricolor-mark {
    display: inline-flex;
    height: 31px;
    padding: 0 7px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    gap: 4px;
    align-items: stretch;
    transform: skew(-18deg);
}

.tisd-tricolor-mark > span {
    display: block;
    width: 7px;
    border: 1px solid rgba(216, 220, 225, .55);
    border-radius: 0;
    box-sizing: border-box;
}

.tisd-tricolor-mark .mark-red { background: #CF0A2C; }
.tisd-tricolor-mark .mark-blue { background: #001F5B; }
.tisd-tricolor-mark .mark-gold { background: #DCAA00; }

.student-footer hr { border-color: rgba(255, 255, 255, .3); }
.student-footer a { color: var(--student-brand-contrast) !important; }
.student-footer footer {
    background-color: rgba(0, 0, 0, .18) !important;
    color: rgba(255, 255, 255, .82) !important;
}

/* Distinct action hierarchy using red tones instead of gold. */
.btn-primary,
.btn.bcolor3 {
    background-color: var(--student-brand-color) !important;
    border-color: var(--student-brand-color) !important;
    color: var(--student-brand-contrast) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn.bcolor3:hover,
.btn.bcolor3:focus {
    background-color: var(--student-brand-hover) !important;
    border-color: var(--student-brand-hover) !important;
    color: var(--student-brand-contrast) !important;
}

.btn-info {
    background-color: #E31B45 !important;
    border-color: #E31B45 !important;
    color: #FFFFFF !important;
}

.btn-info:hover,
.btn-info:focus {
    background-color: #B80F32 !important;
    border-color: #B80F32 !important;
    color: #FFFFFF !important;
}

.btn-secondary {
    background-color: #F1F2F4 !important;
    border-color: #D8DCE1 !important;
    color: #222222 !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #E4E7EA !important;
    border-color: var(--student-brand-color) !important;
    color: #222222 !important;
}

.btn-warning {
    background-color: #B51F3B !important;
    border-color: #B51F3B !important;
    color: #FFFFFF !important;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #8F172E !important;
    border-color: #8F172E !important;
    color: #FFFFFF !important;
}

.btn-danger {
    background-color: #741121 !important;
    border-color: #741121 !important;
    color: #FFFFFF !important;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #570C18 !important;
    border-color: #570C18 !important;
    color: #FFFFFF !important;
}

.btn-success {
    background-color: #D90832 !important;
    border-color: #D90832 !important;
    color: #FFFFFF !important;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #B00628 !important;
    border-color: #B00628 !important;
    color: #FFFFFF !important;
}

/* Shared panels, tables, navigation and controls */
.info-box.bcolor3,
.info-box,
.modal-header:not(.bg-danger),
.theme-background {
    background-color: var(--student-surface-dark) !important;
    border-color: var(--student-surface-dark) !important;
    color: #222222 !important;
}

.theme-text { color: #000000 !important; }

/* Light section headers need dark text and no legacy embossed shadows. */
.bcolor3:not(.btn) .white,
.bcolor:not(.btn) .white,
.sidebar.bcolor3 .white,
.sidebar.bcolor .white {
    color: #222222 !important;
}

.bcolor3 .tblhd,
.bcolor .tblhd,
thead.bcolor3 th,
tr.bcolor3 th {
    color: #222222 !important;
    text-shadow: none !important;
}

.sidebar.bcolor3 h1,
.sidebar.bcolor3 h2,
.sidebar.bcolor3 h3,
.sidebar.bcolor3 h4,
.sidebar.bcolor3 h5,
.sidebar.bcolor3 h6,
.sidebar.bcolor3 p,
.sidebar.bcolor3 .widget,
.sidebar.bcolor h1,
.sidebar.bcolor h2,
.sidebar.bcolor h3,
.sidebar.bcolor h4,
.sidebar.bcolor h5,
.sidebar.bcolor h6,
.sidebar.bcolor p,
.sidebar.bcolor .widget {
    color: #222222 !important;
    text-shadow: none !important;
}

.modal-header .close,
.modal-header .close span {
    color: #222222 !important;
    text-shadow: none !important;
}

/* Volunteer form tabs: strong labels with a restrained red indicator. */
.volunteer-form-tabs .nav-link,
.volunteer-form-tabs .nav-link:visited {
    color: #333333 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

.volunteer-form-tabs .nav-link i {
    color: var(--student-brand-color) !important;
}

.volunteer-form-tabs .nav-link:hover,
.volunteer-form-tabs .nav-link:focus {
    background-color: #FCE8EC !important;
    color: #222222 !important;
}

.volunteer-form-tabs .nav-link.active {
    border-bottom: 3px solid var(--student-brand-color) !important;
    background-color: #F1F2F4 !important;
    color: #222222 !important;
}

/* Success Academy generated cards and actions use the shared Student palette. */
.s-card {
    background-color: #FFFFFF !important;
    border-color: #D8DCE1 !important;
    color: #222222 !important;
}

.s-card .scard-title,
.s-card .scard-modified {
    color: #222222 !important;
}

.s-card .circleBase {
    background-color: #F1F2F4 !important;
    border-color: #D8DCE1 !important;
}

.s-card .s-icon {
    color: var(--student-brand-color) !important;
}

.s-card .success-action-link {
    color: var(--student-brand-color) !important;
    font-weight: 700;
}

.s-card .success-action-link:hover,
.s-card .success-action-link:focus {
    color: var(--student-brand-hover) !important;
}

.chader,
.chader *,
body .ftext,
.form-title,
.form-title *,
.form-title2,
.form-title2 *,
.form-title3,
.form-title3 *,
.card-header,
.card-header *,
.navbar-brand,
legend {
    text-shadow: none !important;
}

/* Student task buttons: preserve the original sizing/layout and change colors only. */
navTask .linklist > li,
#TaskBarList > li {
    background-color: var(--student-button-muted) !important;
    border-color: var(--student-brand-color) !important;
    color: #FFFFFF !important;
}

navTask .linklist > li:hover,
navTask .linklist > li:focus-within,
#TaskBarList > li:hover,
#TaskBarList > li:focus-within {
    background-color: var(--student-button-muted-hover) !important;
    border-color: var(--student-brand-hover) !important;
    color: #FFFFFF !important;
}

navTask .linklist > li > a,
#TaskBarList > li > a {
    background: transparent !important;
    color: #FFFFFF !important;
}

navTask .linklist > li:hover > a,
navTask .linklist > li:focus-within > a,
#TaskBarList > li:hover > a,
#TaskBarList > li:focus-within > a,
navTask .linklist > li:hover i,
navTask .linklist > li:focus-within i,
#TaskBarList > li:hover i,
#TaskBarList > li:focus-within i {
    color: #FFFFFF !important;
}

navTask .linklist a i,
#TaskBarList a i {
    color: #FFFFFF !important;
}

.teal,
.cyan,
.light-blue {
    color: var(--student-brand-color) !important;
}

/* Main-page task list stays as simple text links with its existing arrow markers. */
#TaskBarLinks,
[id$="TaskBarLinks"],
[id$="TaskBarLinks"] li,
[id$="TaskBarLinks"] li a,
[id$="TaskBarLinks"] li a:hover,
[id$="TaskBarLinks"] li a:focus {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #000000 !important;
}

[id$="TaskBarLinks"] li::before,
[id$="TaskBarLinks"] li::after,
[id$="TaskBarLinks"] li a::before,
[id$="TaskBarLinks"] li a::after,
[id$="TaskBarLinks"] i {
    color: var(--student-brand-color) !important;
}

.breadcrumb a,
navbreadcrumb a,
.fa-question-circle,
.text-info,
.upload-button,
.upload-button a,
.delete-button {
    color: var(--student-link-color) !important;
}

.breadcrumb a:hover,
navbreadcrumb a:hover,
.upload-button a:hover,
.delete-button:hover {
    color: var(--student-secondary-red) !important;
}

.loading-img {
    color: var(--student-brand-color) !important;
    border-color: var(--student-brand-color) !important;
}

.blockUI.blockMsg,
.blockMsg {
    background-color: var(--student-brand-color) !important;
    border-color: var(--student-brand-color) !important;
    color: var(--student-brand-contrast) !important;
}

.frb.frb-info input:checked + label,
.frb.frb-info input:checked ~ label {
    background-color: var(--student-brand-color) !important;
    border-color: var(--student-brand-color) !important;
    color: var(--student-brand-contrast) !important;
}

/* Login page follows the shared light-gray and Student-red system. */
.student-login-page #LoginButton {
    background-color: var(--student-brand-color) !important;
    border-color: var(--student-brand-color) !important;
    color: #FFFFFF !important;
}

.student-login-page #LoginButton:hover,
.student-login-page #LoginButton:focus {
    background-color: var(--student-brand-hover) !important;
    border-color: var(--student-brand-hover) !important;
    color: #FFFFFF !important;
}

.student-login-page #BackButton,
.student-login-page .student-login-help,
.student-login-page #heading-A {
    background-color: #F1F2F4 !important;
    border-color: #D8DCE1 !important;
    color: #222222 !important;
}

.student-login-page #BackButton:hover,
.student-login-page #BackButton:focus {
    background-color: var(--student-brand-color) !important;
    border-color: var(--student-brand-color) !important;
    color: #FFFFFF !important;
}

.student-login-page .student-login-help {
    border-top: 5px solid var(--student-brand-color) !important;
}

.student-login-page .student-login-help h4,
.student-login-page .student-login-help p,
.student-login-page #heading-A a,
.student-login-page #heading-A i {
    color: #222222 !important;
}

.student-login-page .input-group-text i {
    color: var(--student-brand-color) !important;
}

/* Student home task panel: light-gray card with Student-red actions. */
.sidebar.bcolor3.student-task-panel,
.student-task-panel {
    background-color: #F1F2F4 !important;
    border-color: #D8DCE1 !important;
    color: #222222 !important;
}

.student-task-panel h4,
.student-task-panel h5 {
    color: #222222 !important;
}

.student-task-panel h4,
.student-task-panel h5,
.student-task-panel .widget > div:first-child {
    border-color: #D8DCE1 !important;
}

.student-task-panel hr {
    border-color: #D8DCE1 !important;
}

.student-task-panel navTask .linklist > li,
.student-task-panel #TaskBarList > li {
    background-color: var(--student-brand-color) !important;
    border-color: var(--student-brand-color) !important;
    box-shadow: none;
}

.student-task-panel navTask .linklist > li > a,
.student-task-panel #TaskBarList > li > a {
    color: #FFFFFF !important;
}

.student-task-panel navTask .linklist > li i,
.student-task-panel #TaskBarList > li i {
    color: #FFFFFF !important;
}

.student-task-panel navTask .linklist > li:hover,
.student-task-panel navTask .linklist > li:focus-within,
.student-task-panel #TaskBarList > li:hover,
.student-task-panel #TaskBarList > li:focus-within {
    background-color: var(--student-brand-hover) !important;
    border-color: var(--student-brand-hover) !important;
    box-shadow: none;
}

.student-task-panel navTask .linklist > li:hover > a,
.student-task-panel navTask .linklist > li:focus-within > a,
.student-task-panel #TaskBarList > li:hover > a,
.student-task-panel #TaskBarList > li:focus-within > a,
.student-task-panel navTask .linklist > li:hover i,
.student-task-panel navTask .linklist > li:focus-within i,
.student-task-panel #TaskBarList > li:hover i,
.student-task-panel #TaskBarList > li:focus-within i {
    color: #FFFFFF !important;
}

/* Local official Tomball skyline, recolored to Student LINK PMS 186 red. */
.student-skyline {
    position: relative;
    width: 100%;
    max-width: 1440px;
    aspect-ratio: 1440 / 331;
    margin: 1.5rem auto 0;
    background: transparent url("/Student/Images/TomballSkyline.svg") center bottom / contain no-repeat;
}

.student-skyline::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--student-brand-color);
    content: "";
}