/*
 * Tomball ISD Parent LINK shared theme.
 * Change --tisd-brand-color once to recolor all legacy teal components.
 */
:root {
    --tisd-brand-color: #001F5B;
    --tisd-brand-hover: #163B73;
    --tisd-brand-soft: #BCC6D2;
    --tisd-brand-contrast: #FFFFFF;
    --tisd-accent-color: #D9B44A;
    --tisd-success-color: #28A745;
    --tisd-pending-color: #1A428A;
    --tisd-task-hover: #AAB6C4;
    --tisd-task-complete: #526D99;
    --tisd-task-current: #1A428A;
}

.theme-text,
.theme-section-heading { color: var(--tisd-brand-color) !important; }
.theme-background {
    background-color: var(--tisd-brand-color) !important;
    color: var(--tisd-brand-contrast) !important;
}
.theme-section-heading {
    border-bottom: 1px solid var(--tisd-brand-color) !important;
    font-weight: bold !important;
    margin-bottom: 20px !important;
}

/* District header, skyline, and footer */
.district-header {
    background-color: var(--tisd-brand-color) !important;
    border-top: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 31, 91, .22);
}

.district-header .nav-link { color: rgba(255, 255, 255, .88) !important; }
.district-header .nav-link:hover,
.district-header .nav-link:focus { color: var(--tisd-brand-contrast) !important; }

.district-brand,
.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; }

.district-skyline {
    display: block;
    position: relative;
    width: 100%;
    max-width: 1440px;
    height: auto;
    margin-top: 1.5rem;
    margin-right: auto;
    margin-left: auto;
    line-height: 0;
}

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

.district-skyline img {
    display: block;
    width: 100%;
    height: auto;
}

.district-footer {
    position: relative;
    margin-top: 0 !important;
    padding-top: 2.75rem !important;
    background: var(--tisd-brand-color) !important;
    color: var(--tisd-brand-contrast);
}

.district-footer h4,
.district-footer .mobile-text,
.district-footer .text-black-50 { color: var(--tisd-brand-contrast) !important; }
.district-footer hr { border-color: rgba(255, 255, 255, .28); }
.district-footer a { color: var(--tisd-brand-contrast) !important; text-decoration: underline; }
.district-footer .social a { text-decoration: none; }
.district-footer footer {
    padding: 1rem 0;
    background: rgba(0, 0, 0, .18) !important;
    color: rgba(255, 255, 255, .78) !important;
}

@media (max-width: 767.98px) {
    .district-footer { padding-top: 2rem !important; }
}

/* Shared backgrounds and Bootstrap actions */
.bcolor,
.btn-primary,
.btn-info,
.bg-info,
.form-title,
.card-header,
.circleBase,
.sidebar,
navtask li.highlight,
.select-sm option.highlight {
    background-color: var(--tisd-brand-color) !important;
}

.btn-primary,
.btn-info,
.btn.bcolor {
    border-color: var(--tisd-brand-color) !important;
    color: var(--tisd-brand-contrast) !important;
}

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

/* Cards, information panels, and enrollment task controls */
.info-box,
.info-box2 {
    background-color: var(--tisd-brand-color) !important;
    border-color: var(--tisd-brand-color) !important;
    color: var(--tisd-brand-contrast) !important;
}

.s-card {
    border-color: var(--tisd-brand-color) !important;
}

.s-card .scard-title,
.dotted .fa-angle-double-right {
    color: var(--tisd-brand-color) !important;
}

.s-card .circleBase .s-icon,
.s-card .list-icon .fa-user {
    color: #FFFFFF !important;
}

.s-card .circleBase,
.s-card .list-buttons-sm .btn {
    background: var(--tisd-brand-color) !important;
    border-color: var(--tisd-brand-color) !important;
    color: var(--tisd-brand-contrast) !important;
}

/* Exact legacy ribbon selectors: colors only, geometry remains in Main.css. */
.s-card .right-ribbon a {
    background: var(--tisd-brand-color) !important;
}

.s-card .right-ribbon a::before {
    border-top-color: var(--tisd-brand-color) !important;
    border-bottom-color: var(--tisd-brand-color) !important;
}

.s-card .right-ribbon a::after {
    border-top-color: var(--tisd-brand-color) !important;
}

/* The legacy 3px shadow creates a stepped artifact against the navy ribbon. */
.s-card .right-ribbon::after {
    background: transparent !important;
}

.s-card .right-ribbon a:hover,
.s-card .right-ribbon a:focus {
    background: var(--tisd-brand-hover) !important;
}

.s-card .right-ribbon a:hover::before,
.s-card .right-ribbon a:focus::before {
    border-top-color: var(--tisd-brand-hover) !important;
    border-bottom-color: var(--tisd-brand-hover) !important;
}

.s-card .right-ribbon a,
.s-card .list-buttons-sm .btn,
.form-title,
.form-title a,
.sidebar,
.sidebar a,
navtask li.highlight a {
    color: var(--tisd-brand-contrast) !important;
}

.s-card .upload-button,
.s-card .upload-button a,
.s-card .upload-button .fa {
    color: var(--tisd-brand-color) !important;
}

.s-card .upload-button a:hover,
.s-card .upload-button a:focus {
    color: var(--tisd-brand-hover) !important;
}

/* Preserve the legacy task dimensions and layout; replace colors only. */
navtask .linklist li,
navTask .linklist li {
    background-color: var(--tisd-brand-soft) !important;
    border-color: rgba(0, 31, 91, .35) !important;
}

navtask .linklist li a,
navTask .linklist li a,
navtask .linklist li a .fa,
navTask .linklist li a .fa {
    background-color: transparent !important;
    color: var(--tisd-brand-color) !important;
}

navtask .linklist li:hover,
navTask .linklist li:hover {
    background-color: var(--tisd-task-hover) !important;
}

navtask .linklist li:hover a,
navTask .linklist li:hover a {
    color: var(--tisd-brand-color) !important;
}

/* Preserve visible task status differences. */
navtask .linklist li.visited,
navTask .linklist li.visited {
    background-color: var(--tisd-task-complete) !important;
}

navtask .linklist li.visited a,
navTask .linklist li.visited a {
    color: var(--tisd-brand-contrast) !important;
}

navtask .linklist li.new-step,
navTask .linklist li.new-step {
    background-color: var(--tisd-brand-soft) !important;
}

navtask .linklist li.new-step a,
navTask .linklist li.new-step a {
    color: var(--tisd-brand-color) !important;
}

navtask .linklist li.highlight,
navTask .linklist li.highlight {
    background-color: var(--tisd-task-current) !important;
}

navtask .linklist li.highlight a,
navTask .linklist li.highlight a {
    color: var(--tisd-brand-contrast) !important;
}

/* Task-count badges are nested links and need their own contrasting colors. */
.sidebar navtask .linklist li > span > a,
.sidebar navTask .linklist li > span > a {
    background-color: var(--tisd-accent-color) !important;
    border-color: var(--tisd-accent-color) !important;
    color: #111111 !important;
}

/* jQuery BlockUI loading message. */
.blockUI.blockMsg,
.blockMsg {
    background-color: var(--tisd-brand-color) !important;
    border-color: var(--tisd-brand-color) !important;
    color: var(--tisd-brand-contrast) !important;
}

.blockUI.blockMsg *,
.blockMsg * {
    color: var(--tisd-brand-contrast) !important;
}

/* High-contrast progress and task status accents on navy sidebars. */
.sidebar .progress-bar.bg-info,
.sidebar .progress-bar-striped.bg-info {
    background-color: var(--tisd-accent-color) !important;
    color: var(--tisd-brand-color) !important;
}

.sidebar .progress .p-text,
.sidebar .progress .p-details {
    color: var(--tisd-brand-color) !important;
    font-weight: bold;
}

.sidebar navtask .fa-cog,
.sidebar navtask .fa-hourglass-end,
.sidebar navTask .fa-cog,
.sidebar navTask .fa-hourglass-end {
    color: var(--tisd-pending-color) !important;
}

.sidebar navtask li.highlight .fa-cog,
.sidebar navTask li.highlight .fa-cog {
    color: var(--tisd-accent-color) !important;
}

.sidebar navtask .fa-check,
.sidebar navTask .fa-check,
.sidebar navtask .text-success,
.sidebar navTask .text-success {
    color: var(--tisd-success-color) !important;
}

/* Custom radio/checkbox cards: replace the legacy teal selected state only. */
.frb.frb-info input:checked + label,
.frb.frb-info input:checked ~ label {
    background-color: var(--tisd-brand-color) !important;
    border-color: var(--tisd-brand-color) !important;
    color: var(--tisd-brand-contrast) !important;
}

/* Breadcrumbs, help icons, links, and mobile selectors */
.breadcrumb a,
navbreadcrumb a,
.breadcrumb .active,
.fa-question-circle,
.more-info,
.q-mark,
.text-info {
    color: var(--tisd-brand-color) !important;
}

.navbar .dropdown-menu .nav-link,
.header-link {
    color: var(--tisd-brand-color) !important;
}

.brselect-mobile,
.brlisted,
.select-sm {
    border-color: var(--tisd-brand-color) !important;
}

.brselect-mobile:focus,
.brlisted:focus,
.select-sm:focus {
    border-color: var(--tisd-brand-color) !important;
    box-shadow: 0 0 0 .2rem rgba(0, 31, 91, .2) !important;
}

/* Previous/next form navigation */
.button-footer .btn-info,
#button-footer .btn-info {
    background-color: var(--tisd-brand-color) !important;
    border-color: var(--tisd-brand-color) !important;
}