/**
 * Centralized Page-Specific Inline Styles
 *
 * This file contains CSS that was previously inline in view files.
 * Consolidated for better maintainability and caching.
 * Created to restore styling removed during optimization.
 */

/* ==========================================================================
   Breadcrumb Styles (Global)
   ========================================================================== */
.breadcrumb-wrapper {
    background: linear-gradient(135deg, rgba(163,196,243,0.35) 0%, rgba(144,219,244,0.3) 100%);
    border: 1px solid #a3c4f3;
    border-radius: 5px;
    padding: 8px 15px;
    margin-top: 8px;
    margin-bottom: 10px;
}

.breadcrumb-wrapper .breadcrumb,
div.breadcrumb {
    background: transparent;
    font-size: 14px;
    margin: 0;
    padding: 0;
}

.breadcrumb-wrapper .breadcrumb a,
div.breadcrumb a {
    color: #0F5A7E;
    text-decoration: underline;
}

.breadcrumb-wrapper .breadcrumb a:hover,
div.breadcrumb a:hover {
    color: #1A7BA8;
}

.breadcrumb-wrapper .breadcrumb span,
div.breadcrumb span {
    color: #333;
}

.breadcrumb-separator {
    color: #666;
    margin: 0 5px;
}

/* ==========================================================================
   Common H1 Styles (used across multiple pages)
   Excludes dashboard pages which have their own h1 styling
   ========================================================================== */
body:not(.dashboard-page) h1 {
    font-size: 2.2rem;
    line-height: 103%;
    margin: 2.6rem 0 1.8rem 0;
    font-family: 'Ultra', sans-serif;
}

@media only screen and (max-width: 768px) {
    body:not(.dashboard-page) h1 {
        font-size: 2.2rem;
        line-height: 103%;
        margin: 0.5rem 0 1.8rem 0;
    }
    p {
        text-align: justify;
    }
}

/* ==========================================================================
   Form Elements - Radio & Checkbox Fixes
   ========================================================================== */
/* Note: These rules are page-specific and should only apply to forms that
   use Bootstrap-style radios/checkboxes, not Materialize styled ones.
   Scoped to specific form classes to avoid conflicts with Materialize */

.form-check-input[type="radio"]:not(:checked),
.form-check-input[type="radio"]:checked {
    position: inherit;
    opacity: 100;
    pointer-events: painted;
}

/* For olympiad-books page radio buttons */
.olympiad-books-form [type="radio"]:not(:checked),
.olympiad-books-form [type="radio"]:checked {
    position: inherit;
    opacity: 100;
    pointer-events: painted;
}

form input, form textarea, form button {
    margin: 3px 0px;
}

/* ==========================================================================
   HomeDialog Modal Styles (Books, Registration, etc.)
   ========================================================================== */
.HomeDialog {
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
    overflow-y: hidden;
}

.HomeDialog:target {
    opacity: 1;
    pointer-events: auto;
}

.HomeDialog > .diogbox {
    width: 37%;
    position: fixed;
    margin: 5% auto;
    margin-top: 2%;
    padding: 11px 11px 11px 11px;
    border-radius: 10px;
    background: #565454;
    color: #000;
}

.HomeDialog .modal-body {
    position: fixed;
    padding: 10px;
    background-repeat: no-repeat;
    background-size: 871px 500px;
}

.HomeDialog .content {
    text-align: left;
    font-size: 36px;
    line-height: 15px;
}

.HomeDialog .content > span {
    display: inline-block;
    overflow: hidden;
    margin-top: 0%;
    text-align: center;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    line-height: 35px;
    text-transform: uppercase;
    position: fixed;
    top: 10px;
}

.HomeDialog .close1 {
    background: #6A040F;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
    font-size: 18px;
}

@media only screen and (max-width: 767px) {
    .HomeDialog > .diogbox {
        width: 70% !important;
        margin-top: 20%;
    }
    table.responsive-table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        position: fixed;
    }
}

/* ==========================================================================
   Table Styles
   ========================================================================== */
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    
}

/* Table headers - high specificity selectors */
table.striped > thead > tr > th,
.table-responsive table.striped > thead > tr > th {
    color: #424242;
    background-color: #F8F9FA;
    font-weight: 600;
    border-bottom: 2px solid #E0E0E0;
}

/* Navy header variant - use .navy-header class when navy is needed */
table.striped.navy-header > thead > tr > th,
.table-responsive table.striped.navy-header > thead > tr > th {
    color: #fff;
    background-color: #0F5A7E;
    border-bottom: none;
}

table.striped > tbody > tr > td,
.table-responsive table.striped > tbody > tr > td {
    font-weight: 400;
}

/* Row status classes - high specificity with tbody context */
table tbody tr.warning,
table.striped tbody tr.warning {
    background-color: #e91e630f;
}

table tbody tr.danger,
table.striped tbody tr.danger {
    background-color: #00bcd41a;
}

/* ==========================================================================
   Cutoff & Rankers Page Styles
   ========================================================================== */
@media only screen and (min-width: 601px) {
    .cutoff-page th, .rankers-page th {
        font-size: 20px;
        color: #fff;
        text-align: left;
        padding: 10px 0px 10px 0px;
        font-weight: 600;
    }
    .cutoff-page tr, .rankers-page tr {
        border-bottom: none;
    }
    .cutoff-page td, .rankers-page td {
        font-size: 17px;
        padding-left: 2%;
    }
}

@media only screen and (max-width: 600px) {
    .cutoff-page th, .rankers-page th {
        font-size: 15px;
        color: #fff;
        font-weight: 600;
    }
    .cutoff-page tr, .rankers-page tr {
        border-bottom: none;
    }
    .cutoff-page td, .rankers-page td {
        font-size: 16px;
        font-weight: 600;
    }
}

@media only screen and (min-width: 993px) {
    .container {
        width: 80%;
    }
}

/* Menu margin - ID selector provides sufficient specificity */
div#menu,
nav#menu {
    margin-top: 0rem;
}

.spacebetweenelements {
    margin: 0 auto 21px auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    max-width: 700px;
}

.spacebetweenelements a {
    flex: 0 1 auto;
}

.spacebetweenelements a img {
    max-width: 100%;
    height: auto;
}

@media only screen and (max-width: 992px) {
    .spacebetweenelements {
        max-width: 100%;
        padding: 0 15px;
    }
}

@media only screen and (max-width: 600px) {
    .spacebetweenelements {
        flex-wrap: wrap;
        max-width: 320px;
    }
    .spacebetweenelements a {
        width: 48%;
    }
    .selectYear, .select-wrapper {
        width: 100%;
    }
}

/* ==========================================================================
   Syllabus Menu Styles
   ========================================================================== */
@media only screen and (min-width: 768px) {
    .syllabus-menu {
        position: sticky;
        top: 10px;
        padding: 0px 10px;
    }
    .syllabus-menu .divider {
        margin-right: 75px;
    }
    .syllabus-menu .flow-text {
        margin-top: 0px;
        margin-bottom: 10px;
    }
    .syllabus-menu ul li {
        padding: 5px 10px;
        width: 80%;
        border-bottom: 2px solid #a3c4f3;
        transition: all 1s ease;
    }
    .syllabus-menu ul li:hover {
        letter-spacing: 0.5px;
        border-bottom: 2px solid #0F5A7E;
    }
}

/* ==========================================================================
   Access/Dashboard Page Styles
   ========================================================================== */
/* Inner header - high specificity with element+class combination */
.slider .inner-hed,
section .inner-hed,
div.inner-hed {
    color: #1f1e1e;
    padding-top: 60px;
}

#text-content {
    padding-left: 15px;
}

#text-content ul li {
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: #272528;
    margin-left: 17px;
}

.weekly-results button {
    margin-top: 0px;
}

/* ==========================================================================
   Testimonial Styles
   ========================================================================== */
.testimonial_principal .test {
    padding-top: 40px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    background: rgba(255,255,255,0.8);
    word-wrap: break-word;
}

.testimonial_principal p span {
    font-family: "Eutemia", sans-serif;
    font-size: 45px;
    line-height: 15px;
}

.testimonial_principal {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    padding: 20px 15px;
}

.bx-wrapper .bx-controls-direction a.bx-next {
    left: 100%;
}

.bx-wrapper .bx-controls-direction a.bx-prev {
    left: -33px !important;
}

.bx-wrapper .bx-controls-direction a {
    top: 75%;
}

/* ==========================================================================
   Misc Utility Classes
   ========================================================================== */
.customst {
    overflow: hidden;
}

.displayProperty {
    pointer-events: none;
    cursor: default;
    color: cadetblue;
}

.marquee {
    display: block;
    align-items: center;
    transition: all 0.5s ease;
}

/* ==========================================================================
   Sample Questions Page Styles
   ========================================================================== */
.notif {
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
}

.notif ul {
    margin: 0;
    padding-left: 20px;
}

.notif ul li {
    margin-bottom: 5px;
}

/* ==========================================================================
   Registration Form Styles
   ========================================================================== */
.registerboxcrest {
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    margin: 20px 0;
}

.registerboxcrest h4 {
    margin: 10px 0;
}

.btn-primaryadd a {
    display: inline-block;
    padding: 10px 30px;
    background-color: #0F5A7E;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.btn-primaryadd a:hover {
    background-color: #0A4560;
}

/* ==========================================================================
   Registration Page Specific Styles
   ========================================================================== */
@media only screen and (max-width: 1199px) {
    #share_buttons {
        margin-left: 0px !important;
        margin-right: 0px !important;
        padding-top: 15px;
        padding-bottom: 10px;
        background-color: #fefefe;
    }
    .link_to_share {
        left: 0px !important;
        top: -3px !important;
        margin: 0px auto !important;
        border: 1px solid #000;
        text-align: center;
    }
    #share_buttons button {
        padding: 5px;
    }
    .subjects_div span {
        font-size: 0.80rem !important;
    }
    .row .col.offset-m3 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 25px;
    }
    .well {
        padding: 15px;
    }
}

@media only screen and (max-width: 786px) {
    #share_buttons button {
        font-size: 11px;
        margin-bottom: 5px;
    }
}

.testchk [type="checkbox"]:checked:disabled+span::before {
    border-right: 2px solid rgba(0, 0, 0, 0.42);
    border-bottom: 2px solid rgba(0, 0, 0, 0.42);
}

.testchk [type="checkbox"]:checked+span:not(.lever)::before {
    top: -4px;
    left: -5px;
    width: 12px;
    height: 22px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #0F5A7E;
    border-bottom: 2px solid #0F5A7E;
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

/* ==========================================================================
   Bootstrap Button Styles (for forms)
   ========================================================================== */
.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

.btn-primary {
    color: #fff;
    background-color: #0F5A7E;
    border-color: #0A4560;
}

.btn-success {
    color: #fff;
    background-color: #449d44;
    border-color: #398439;
}

/* Registration form checkbox positioning - removed negative left offset that was pushing checkboxes outside container */
/* Remove grey border from result pages */
#result table { border: none; }

/* ==========================================================================
   Mobile Styles - Clean, Consistent Approach
   Industry standard: 16px padding (Material Design)
   ========================================================================== */

@media only screen and (max-width: 768px) {
    /* Base - 16px is Material Design standard */
    body {
        padding-top: 8px;
        margin: 0;
    }

    .navbar {
        margin-bottom: 0;
    }

    /* Container - full width with 16px padding */
    .container {
        width: 100%;
        max-width: 100%;
        padding: 0 16px;
        margin: 0;
    }

    /* Grid - reset Bootstrap/Materialize negative margins, add mobile padding */
    .row {
        margin: 0;
        padding: 0 12px;
    }

    /* Columns - no extra padding, container handles spacing */
    .col,
    [class*="col-"],
    [class*="col "] {
        padding: 0;
    }

    /* Forms - consistent spacing */
    .input-field {
        margin: 8px 0;
        padding: 0;
    }

    /* Well/Card containers - no side margins on mobile */
    .well,
    .dashboard-well {
        padding: 16px;
        margin: 0 0 16px 0;
        border-radius: 8px;
    }

    /* Clearfix should not take space */
    .clearfix {
        height: 0;
        margin: 0;
        padding: 0;
    }

    /* Typography */
    h1 {
        margin: 8px 0 16px 0;
    }

    /* Dashboard specific */
    .hello-section,
    #hello {
        margin: 0 0 8px 0;
        padding: 12px 16px;
    }

    #menu {
        display: none;
    }
}

/* ==========================================================================
   Login Page Mobile Fix
   Fix inline width styles (50-60%) that break on small screens
   ========================================================================== */
@media only screen and (max-width: 600px) {
    .register-now {
        width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media only screen and (max-width: 400px) {
    .register-now {
        width: 100% !important;
        padding: 10px !important;
    }
}

/* ==========================================================================
   Login Page Spacing Fix
   Reduce excessive margins that combine with body padding-top
   ========================================================================== */
@media only screen and (max-width: 767px) {
    /* Reduce login container top margin to compensate for body padding */
    .login-div {
        margin-top: 1rem !important;
    }
    
    /* Reduce register-now margins - original values were too large */
    .register-now {
        margin-top: 2rem !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .register-now {
        margin-top: 2rem !important;
    }
}

/* Login page - reduce top gap on mobile */
@media only screen and (max-width: 767px) {
    .slider {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    .bradcome-menu,
    .inner-breadcrumb {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
    }
    
    .responsive-image {
        padding-top: 0 !important;
    }
}

/* ==========================================================================
   AGGRESSIVE Login Page Gap Fix
   ========================================================================== */
@media only screen and (max-width: 767px) {
    /* Target the main login container */
    body .slider,
    body .slider .row,
    body .slider .responsive-image {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Remove any hidden breadcrumb space */
    .bradcome-menu {
        display: none !important;
    }
    
    /* Login form container - minimal top margin */
    .login-div {
        margin-top: 0 !important;
        padding-top: 10px !important;
    }
    
    /* The h1 "Login" heading */
    .login-h1, 
    h1.login-h1 {
        margin-top: 0 !important;
    }
}

/* Final login gap fix - remove remaining whitespace */
@media only screen and (max-width: 767px) {
    /* The white login card container */
    .login-txt {
        padding-top: 1rem !important;
    }
    
    /* Space above Login heading */
    .login-div .login-txt h1,
    .login-div h1 {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* The outer flex container */
    .col-md-6.login-div {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

/* ==========================================================================
   YouTube Videos - Responsive
   ========================================================================== */

/* Make YouTube video containers responsive - high specificity */
.container .youtube-videos div.embed-responsive,
section .youtube-videos div.embed-responsive,
.youtube-videos div.embed-responsive[class] {
    width: 100%;
    max-width: 350px;
    height: auto;
    aspect-ratio: 16 / 9;
}

@media only screen and (max-width: 767px) {
    .youtube-videos div.embed-responsive {
        max-width: 100%;
        height: auto;
        min-height: 200px;
    }
}

@media only screen and (max-width: 400px) {
    .youtube-videos div.embed-responsive {
        min-height: 180px;
    }
}


/* ==========================================================================
   Blog Article Images - Responsive with Padding
   ========================================================================== */

/* Base - all images scale to container */
.blog-article img,
.article-content img,
#contentSection img,
.featured-image img,
.media-left-latest img,
.registration-banner img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
}


/* Desktop (1200px+) */
@media only screen and (min-width: 1200px) {
    .featured-image img {
        max-width: 800px;
        margin: 0 auto 20px auto;
    }
    .article-content img {
        margin: 15px 0;
    }
}

/* Laptop (992px - 1199px) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .featured-image img {
        max-width: 700px;
        margin: 0 auto 15px auto;
    }
}

/* Tablet (768px - 991px) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .featured-image img {
        max-width: 100%;
        margin-bottom: 15px;
    }
    .media-left-latest img {
        max-width: 200px;
        margin-right: 15px;
    }
}

/* Mobile (up to 767px) */
@media only screen and (max-width: 767px) {
    .featured-image img {
        width: 100% !important;
        margin-bottom: 10px;
    }
    .media-left-latest img {
        max-width: 150px;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    .registration-banner img {
        max-width: 100% !important;
        margin: 10px 0;
    }
}

/* Small mobile (up to 400px) */
@media only screen and (max-width: 400px) {
    .media-left-latest img {
        max-width: 100px;
        margin-right: 8px;
    }
}

/* ==========================================================================
   Utility Classes (replacing common inline styles)
   ========================================================================== */

/* Text Colors */
.text-danger,
.text-red {
    color: #B71C1C !important;
}

.text-success,
.text-green {
    color: #2E7D32 !important;
}

.text-warning,
.text-orange {
    color: #E65100 !important;
}

.text-info,
.text-blue {
    color: #0F5A7E !important;
}

.text-muted,
.text-gray {
    color: #757575 !important;
}

.text-dark {
    color: #212121 !important;
}

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

.text-white {
    color: #FFFFFF !important;
}

/* Required Field Indicator */
.required-indicator,
.required-star {
    color: #B71C1C !important;
    font-weight: bold;
}

/* Text Alignment */
.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.text-justify {
    text-align: justify !important;
}

/* Display Utilities */
.hidden {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-inline {
    display: inline !important;
}

.d-inline-block {
    display: inline-block !important;
}

.d-flex {
    display: flex !important;
}

/* Font Styles */
.text-bold,
.font-bold {
    font-weight: bold !important;
}

.font-semibold {
    font-weight: 600 !important;
}

.text-normal,
.font-normal {
    font-weight: normal !important;
}

.text-larger {
    font-size: larger !important;
}

.text-smaller {
    font-size: smaller !important;
}

/* Font Size Utilities */
.text-xs { font-size: 12px !important; }
.text-sm { font-size: 14px !important; }
.text-base { font-size: 15px !important; }
.text-lg { font-size: 18px !important; }
.text-xl { font-size: 20px !important; }

.text-underline {
    text-decoration: underline !important;
}

/* Spacing Utilities */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }

.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.pr-0 { padding-right: 0 !important; }

.mt-1 { margin-top: 5px !important; }
.mb-1 { margin-bottom: 5px !important; }
.ml-1 { margin-left: 5px !important; }
.mr-1 { margin-right: 5px !important; }

.pt-1 { padding-top: 5px !important; }
.pb-1 { padding-bottom: 5px !important; }
.pl-1 { padding-left: 5px !important; }
.pr-1 { padding-right: 5px !important; }

.mt-2 { margin-top: 10px !important; }
.mb-2 { margin-bottom: 10px !important; }
.ml-2 { margin-left: 10px !important; }
.mr-2 { margin-right: 10px !important; }

.pt-2 { padding-top: 10px !important; }
.pb-2 { padding-bottom: 10px !important; }
.pl-2 { padding-left: 10px !important; }
.pr-2 { padding-right: 10px !important; }
.p-2 { padding: 10px !important; }

.mt-3 { margin-top: 20px !important; }
.mb-3 { margin-bottom: 20px !important; }
.ml-3 { margin-left: 20px !important; }
.mr-3 { margin-right: 20px !important; }

/* Float Utilities */
.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Width Utilities */
.w-100 { width: 100% !important; }
.w-75 { width: 75% !important; }
.w-50 { width: 50% !important; }
.w-25 { width: 25% !important; }
.w-auto { width: auto !important; }

/* Cursor */
.cursor-pointer {
    cursor: pointer !important;
}

.cursor-default {
    cursor: default !important;
}

/* List Styles */
.list-alpha {
    list-style-type: lower-alpha !important;
}

.list-roman {
    list-style-type: lower-roman !important;
}

.list-circle {
    list-style-type: circle !important;
}

.list-disc {
    list-style-type: disc !important;
}

.list-none {
    list-style-type: none !important;
}

/* ==========================================================================
   Exam Schedule Table Styles
   ========================================================================== */

/* Table header cells - olympiad names */
.exam-schedule-header,
.exam-table-header {
    color: #0F5A7E !important;
    font-size: larger !important;
}

/* Table data cells */
.exam-table-cell {
    font-size: larger !important;
    text-align: center !important;
}

/* Answer key date text (small) */
.answer-key-date {
    font-size: 12.5px !important;
    font-weight: normal !important;
}

/* Mobile exam schedule cards */
.exam-mobile-card {
    border-left: 4px solid #0F5A7E;
    padding: 10px;
    margin-bottom: 10px;
    background: #f9f9f9;
}

.exam-mobile-card .exam-name {
    color: #0F5A7E;
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 5px;
}

/* ==========================================================================
   Country Wiselist Styles
   ========================================================================== */

/* Country link style (used extensively in country_wiselist.php) */
.country-link {
    width: 25%;
    padding-bottom: 8px;
    text-decoration: underline;
    color: #978e43;
    font-weight: bold;
}

/* ==========================================================================
   Spellbee Exam Styles
   ========================================================================== */

/* Spellbee question highlight background */
.sb-highlight-bg {
    background-color: #3f51b533;
}

/* Spellbee width spacer */
.sb-spacer {
    width: 10px;
}

/* Float right with padding */
.float-right-padded {
    float: right;
    padding-right: 10px;
}

/* ==========================================================================
   Profile & Form Styles
   ========================================================================== */

/* Disabled/inactive state */
.pointer-none {
    pointer-events: none;
}

.pointer-active {
    opacity: 1;
    pointer-events: visible;
}

/* Muted/disabled text color */
.text-muted-light {
    color: #b6bbb5 !important;
}

/* Font size utilities */
.text-0-9em { font-size: 0.9em !important; }
.text-2em { font-size: 2em !important; }

/* Min height for content areas */
.min-h-347 {
    min-height: 347px;
}

/* Margin utilities */
.ml-24 { margin-left: 24px !important; }
.mt-24 { margin-top: 24px !important; }

/* ==========================================================================
   Green Warrior Styles
   ========================================================================== */

/* GW dark red text */
.gw-text-red {
    color: #940006 !important;
}

.gw-text-red-lh {
    color: #940006 !important;
    line-height: 25px;
}

/* ==========================================================================
   Marking Scheme & Registration Form Styles
   ========================================================================== */

/* Top padding for marking scheme tables */
.pt-38 {
    padding-top: 38px !important;
}

/* Border utilities */
.border-bottom-none {
    border-bottom: none !important;
}

/* Combined text-danger bold */
.text-danger-bold {
    color: #B71C1C !important;
    font-weight: bold !important;
}

/* ==========================================================================
   Soothing Pastel Accent Utilities
   Use these sparingly as highlights/borders, not large backgrounds
   ========================================================================== */

/* Accent border-left variants (3px subtle line) */
.accent-warm { border-left: 3px solid #fde4cf !important; }      /* Powder Petal */
.accent-rose { border-left: 3px solid #ffcfd2 !important; }      /* Cotton Rose */
.accent-orchid { border-left: 3px solid #f1c0e8 !important; }    /* Pink Orchid */
.accent-lavender { border-left: 3px solid #cfbaf0 !important; }  /* Periwinkle */
.accent-mint { border-left: 3px solid #98f5e1 !important; }      /* Soft Cyan */
.accent-aqua { border-left: 3px solid #8eecf5 !important; }      /* Electric Aqua */

/* Accent border-bottom variants (for cards, sections) */
.accent-bottom-warm { border-bottom: 2px solid #fde4cf !important; }
.accent-bottom-rose { border-bottom: 2px solid #ffcfd2 !important; }
.accent-bottom-orchid { border-bottom: 2px solid #f1c0e8 !important; }
.accent-bottom-lavender { border-bottom: 2px solid #cfbaf0 !important; }
.accent-bottom-mint { border-bottom: 2px solid #98f5e1 !important; }

/* Very subtle pastel backgrounds (for special highlights only) */
.bg-subtle-warm { background-color: #fef9f5 !important; }        /* 5% Powder Petal */
.bg-subtle-rose { background-color: #fff9f9 !important; }        /* 5% Cotton Rose */
.bg-subtle-lavender { background-color: #faf8fd !important; }    /* 5% Periwinkle */
.bg-subtle-mint { background-color: #f7fefc !important; }        /* 5% Soft Cyan */

/* Clean card style - white with subtle shadow */
.card-clean {
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.card-clean:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Soothing well - neutral background */
.well-soothing {
    background: #FAFAFA;
    border: 1px solid #EEEEEE;
    border-radius: 8px;
    padding: 16px;
}