/* Schoolhouse Rock Theme - Chalkboard classroom styling
 *
 * All colors defined as CSS variables at the top — change the palette in one place.
 */

/* ============================================================
   Theme Palette
   To restyle: change values here only — everything below reads from these
   ============================================================ */
.theme-schoolhouse-rock {
    --theme-primary:       #D2691E;   /* chocolate brown — buttons, accents */
    --theme-primary-mid:   #CD853F;   /* peru — hover, gradients */
    --theme-primary-dark:  #8B4513;   /* saddle brown — borders, active */
    --theme-accent:        #F4D03F;   /* golden yellow — navbar, footer links */
    --theme-accent-light:  #FFEB99;   /* pale yellow — list item background */
    --theme-bg:            #F5F5DC;   /* beige — card backgrounds */
    --theme-bg-input:      #FFFEF0;   /* warm white — inputs */
    --theme-dark:          #2C3E50;   /* chalkboard dark */
    --theme-dark-mid:      #34495E;   /* chalkboard mid */
    --theme-brown-mid:     #8B7355;   /* warm brown — borders, secondary */
    --theme-text:          #2C3E50;   /* body text on cards */
    --theme-text-light:    #ECF0F1;   /* light text on dark bg */
    --theme-text-warm:     #FFFEF0;   /* warm cream — headings, button text */
    --theme-text-muted:    #7F8C8D;   /* muted text */
    --theme-radius-card:   8px;
    --theme-radius-btn:    8px;
    --theme-radius-input:  4px;

    /* Bridge to global utilities — makes .text-primary use theme color */
    --primary-color:       #D2691E;
}

/* ---- Background ---- */
/* The chalkboard grid lines are layered via background-image along with the gradient.
   Must use background-color + background-image separately to avoid the shorthand
   resetting the grid texture. */
.theme-schoolhouse-rock,
body.theme-schoolhouse-rock,
.theme-schoolhouse-rock body,
html.theme-schoolhouse-rock,
.theme-schoolhouse-rock html,
body.theme-schoolhouse-rock main,
.form-preview.theme-schoolhouse-rock,
body.theme-schoolhouse-rock .form-preview {
    background-color: var(--theme-dark) !important;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 24px, rgba(255, 255, 255, 0.03) 24px, rgba(255, 255, 255, 0.03) 25px),
        repeating-linear-gradient(90deg, transparent, transparent 24px, rgba(255, 255, 255, 0.03) 24px, rgba(255, 255, 255, 0.03) 25px),
        linear-gradient(135deg, var(--theme-dark) 0%, var(--theme-dark-mid) 50%, var(--theme-dark) 100%) !important;
    background-attachment: fixed !important;
    color: var(--theme-text-light) !important;
    min-height: 100vh !important;
    position: relative;
}

@media (max-width: 768px) {
    .theme-schoolhouse-rock,
    body.theme-schoolhouse-rock,
    html.theme-schoolhouse-rock {
        background-attachment: scroll !important;
        background-size: cover !important;
    }
}

/* ---- Floating school elements — 4 emoji icons with staggered animations ---- */

/* Books - gentle diagonal drift */
.theme-schoolhouse-rock::before {
    content: '📚';
    position: fixed;
    top: 10%;
    left: -80px;
    width: 60px;
    height: 60px;
    font-size: 48px;
    line-height: 1;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: floatBooks 35s ease-in-out infinite;
}

/* Apple - curved path from top right */
.theme-schoolhouse-rock::after {
    content: '🍎';
    position: fixed;
    top: 25%;
    right: -80px;
    width: 60px;
    height: 60px;
    font-size: 44px;
    line-height: 1;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: floatApple 40s ease-in-out infinite 10s;
}

/* Ruler - gentle wave pattern */
.theme-schoolhouse-rock .footer::before {
    content: '📐';
    position: fixed;
    bottom: 15%;
    left: -70px;
    width: 50px;
    height: 50px;
    font-size: 40px;
    line-height: 1;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: floatRuler 38s ease-in-out infinite 20s;
}

/* Pencil - slow arc across screen */
.theme-schoolhouse-rock .footer::after {
    content: '✏️';
    position: fixed;
    top: 60%;
    left: -70px;
    width: 50px;
    height: 50px;
    font-size: 38px;
    line-height: 1;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: floatPencil 42s ease-in-out infinite 30s;
}

@keyframes floatBooks {
    0%   { transform: translate(0, 0) rotate(-8deg) scale(0.85); opacity: 0; }
    8%   { opacity: 0.45; }
    20%  { transform: translate(20vw, 8vh) rotate(5deg) scale(0.95); opacity: 0.5; }
    40%  { transform: translate(45vw, 15vh) rotate(-10deg) scale(1); opacity: 0.55; }
    60%  { transform: translate(70vw, 12vh) rotate(8deg) scale(0.9); opacity: 0.45; }
    80%  { transform: translate(90vw, 18vh) rotate(-5deg) scale(0.85); opacity: 0.3; }
    95%  { opacity: 0; }
    100% { transform: translate(110vw, 22vh) rotate(12deg) scale(0.75); opacity: 0; }
}

@keyframes floatApple {
    0%   { transform: translate(0, 0) rotate(12deg) scale(0.8); opacity: 0; }
    10%  { opacity: 0.5; }
    25%  { transform: translate(-18vw, 10vh) rotate(-8deg) scale(0.95); opacity: 0.6; }
    45%  { transform: translate(-42vw, 20vh) rotate(15deg) scale(1); opacity: 0.55; }
    65%  { transform: translate(-68vw, 28vh) rotate(-10deg) scale(0.9); opacity: 0.45; }
    85%  { transform: translate(-88vw, 35vh) rotate(5deg) scale(0.85); opacity: 0.25; }
    95%  { opacity: 0; }
    100% { transform: translate(-110vw, 40vh) rotate(-15deg) scale(0.7); opacity: 0; }
}

@keyframes floatRuler {
    0%   { transform: translate(0, 0) rotate(50deg) scale(0.75); opacity: 0; }
    12%  { opacity: 0.4; }
    28%  { transform: translate(15vw, -12vh) rotate(60deg) scale(0.9); opacity: 0.5; }
    48%  { transform: translate(35vw, -25vh) rotate(45deg) scale(0.95); opacity: 0.52; }
    68%  { transform: translate(55vw, -35vh) rotate(70deg) scale(0.88); opacity: 0.42; }
    85%  { transform: translate(72vw, -45vh) rotate(55deg) scale(0.8); opacity: 0.25; }
    95%  { opacity: 0; }
    100% { transform: translate(85vw, -55vh) rotate(80deg) scale(0.7); opacity: 0; }
}

@keyframes floatPencil {
    0%   { transform: translate(0, 0) rotate(-20deg) scale(0.85); opacity: 0; }
    10%  { opacity: 0.45; }
    25%  { transform: translate(22vw, 5vh) rotate(8deg) scale(0.95); opacity: 0.55; }
    45%  { transform: translate(48vw, 8vh) rotate(-15deg) scale(1); opacity: 0.58; }
    65%  { transform: translate(72vw, 3vh) rotate(10deg) scale(0.9); opacity: 0.48; }
    85%  { transform: translate(92vw, 10vh) rotate(-18deg) scale(0.82); opacity: 0.28; }
    95%  { opacity: 0; }
    100% { transform: translate(112vw, 12vh) rotate(20deg) scale(0.75); opacity: 0; }
}

/* ---- Transparent containers ---- */
.theme-schoolhouse-rock .container,
.theme-schoolhouse-rock .container-narrow,
.theme-schoolhouse-rock main,
.theme-schoolhouse-rock .py-2,
.theme-schoolhouse-rock .py-md-5,
.theme-schoolhouse-rock .py-4 {
    background: transparent !important;
}

/* ---- Cards — paper pinned to chalkboard ---- */
.theme-schoolhouse-rock .card {
    position: relative;
    z-index: 100;
    background: var(--theme-bg) !important;
    border: 4px solid var(--theme-brown-mid) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(139, 115, 85, 0.1) !important;
    border-radius: var(--theme-radius-card) !important;
    backdrop-filter: none;
}

/* Pushpin decoration on cards */
.theme-schoolhouse-rock .card::before {
    content: '📌';
    position: absolute;
    top: -8px;
    right: 20px;
    font-size: 28px;
    opacity: 0.9;
    z-index: 1;
    transform: rotate(25deg);
}

/* Remove pushpin from cards where it conflicts with header buttons */
.theme-schoolhouse-rock .ai-form-adjustments::before,
.theme-schoolhouse-rock .form-section-main-options::before {
    content: none;
}

.theme-schoolhouse-rock .card-body {
    background: transparent !important;
}

/* ---- Form Inputs — notebook paper style ---- */
.theme-schoolhouse-rock .form-control,
.theme-schoolhouse-rock .form-select,
.theme-schoolhouse-rock textarea {
    background-color: var(--theme-bg-input) !important;
    background-image: repeating-linear-gradient(
        transparent,
        transparent 31px,
        #E3DAC9 31px,
        #E3DAC9 32px
    ) !important;
    border: 2px solid var(--theme-brown-mid) !important;
    color: var(--theme-text) !important;
    border-radius: var(--theme-radius-input) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    font-size: 16px !important; /* Prevents iOS zoom — do not remove */
    font-weight: 500 !important;
    font-family: 'Coming Soon', cursive !important;
    transition: all 0.3s ease !important;
}

/* Smaller font for date/time inputs to prevent overflow on narrow rows */
.theme-schoolhouse-rock .date-row-input,
.theme-schoolhouse-rock .time-row-input,
.theme-schoolhouse-rock .timezone-row-select,
.theme-schoolhouse-rock .duration-row-select,
.theme-schoolhouse-rock input[type="date"],
.theme-schoolhouse-rock input[type="time"],
.theme-schoolhouse-rock #futurePeriodType,
.theme-schoolhouse-rock #hideOptionLeadHoursContainer {
    font-size: 14px !important;
}

/* Compact inline selects need a smaller border-radius to avoid clipping text/arrow */
.theme-schoolhouse-rock #futurePeriodType,
.theme-schoolhouse-rock #hideOptionLeadHoursContainer {
    border-radius: 6px !important;
}

.theme-schoolhouse-rock .form-control:focus,
.theme-schoolhouse-rock .form-select:focus,
.theme-schoolhouse-rock textarea:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px rgba(210, 105, 30, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    background-color: var(--theme-bg-input) !important;
    color: var(--theme-text) !important;
}

/* ---- Typography ---- */

/* Page headings — chalk on chalkboard */
.theme-schoolhouse-rock h1,
.theme-schoolhouse-rock h2,
.theme-schoolhouse-rock h3 {
    color: var(--theme-text-warm) !important;
    font-weight: 700 !important;
    font-family: 'Coming Soon', cursive !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Card headings and labels — dark on paper */
.theme-schoolhouse-rock .form-label,
.theme-schoolhouse-rock .card-title,
.theme-schoolhouse-rock h4,
.theme-schoolhouse-rock h5,
.theme-schoolhouse-rock h6 {
    color: #1a1a1a !important;
    font-weight: 700 !important;
    font-family: 'Coming Soon', cursive !important;
    text-shadow: none !important;
}

.theme-schoolhouse-rock p,
.theme-schoolhouse-rock .card-text,
.theme-schoolhouse-rock .ql-editor {
    color: var(--theme-text) !important;
    font-weight: 500 !important;
    font-family: 'Coming Soon', cursive !important;
}

/* Description text inside cards */
.theme-schoolhouse-rock .card .description-content,
.theme-schoolhouse-rock .card .description-content p,
.theme-schoolhouse-rock .card-body .description-content,
.theme-schoolhouse-rock .card-body .description-content p {
    color: var(--theme-text) !important;
    text-shadow: none !important;
}

/* Description text outside cards — on dark chalkboard */
.theme-schoolhouse-rock .description-content:not(.card .description-content):not(.card-body .description-content),
.theme-schoolhouse-rock .description-content p:not(.card .description-content p):not(.card-body .description-content p) {
    color: var(--theme-text-warm) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.theme-schoolhouse-rock .text-muted {
    color: var(--theme-text-muted) !important;
    font-family: 'Coming Soon', cursive !important;
}

.theme-schoolhouse-rock ::placeholder {
    color: #A0826D !important;
    opacity: 0.7 !important;
    font-family: 'Coming Soon', cursive !important;
}

.theme-schoolhouse-rock .text-warning {
    color: var(--theme-primary-dark) !important;
}

.theme-schoolhouse-rock .required-asterisk {
    color: var(--theme-primary) !important;
    font-weight: bold !important;
}

/* ---- Quill editor ---- */
.theme-schoolhouse-rock .ql-toolbar.ql-snow {
    border: 3px solid var(--theme-brown-mid) !important;
    border-radius: 8px 8px 0 0 !important;
}

.theme-schoolhouse-rock .ql-container.ql-snow {
    border: 3px solid var(--theme-brown-mid) !important;
    border-radius: 0 0 8px 8px !important;
}

/* ---- Primary Buttons — chalk eraser style ---- */
.theme-schoolhouse-rock .btn-primary,
.theme-schoolhouse-rock button[type="submit"],
.theme-schoolhouse-rock #submitBtn {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-mid) 100%) !important;
    border: 3px solid var(--theme-primary-dark) !important;
    color: var(--theme-text-warm) !important;
    font-weight: 700 !important;
    font-family: 'Coming Soon', cursive !important;
    box-shadow: 0 4px 15px rgba(139, 69, 19, 0.4) !important;
    border-radius: var(--theme-radius-btn) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
    padding: 12px 30px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
}

.theme-schoolhouse-rock .btn-primary:hover,
.theme-schoolhouse-rock button[type="submit"]:hover,
.theme-schoolhouse-rock #submitBtn:hover {
    background: linear-gradient(135deg, var(--theme-primary-mid) 0%, var(--theme-primary) 100%) !important;
    border-color: #A0522D !important;
    box-shadow: 0 6px 20px rgba(160, 82, 45, 0.6) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

.theme-schoolhouse-rock .btn-primary:active,
.theme-schoolhouse-rock button[type="submit"]:active,
.theme-schoolhouse-rock #submitBtn:active {
    background: linear-gradient(135deg, #A0522D 0%, var(--theme-primary-dark) 100%) !important;
    border-color: #654321 !important;
    box-shadow: 0 2px 8px rgba(101, 67, 33, 0.8) !important;
    transform: translateY(0) scale(0.98) !important;
}

.theme-schoolhouse-rock .btn-primary:focus,
.theme-schoolhouse-rock button[type="submit"]:focus,
.theme-schoolhouse-rock #submitBtn:focus {
    outline: 3px solid rgba(210, 105, 30, 0.5) !important;
    outline-offset: 2px;
}

/* ---- Outline Buttons ---- */
.theme-schoolhouse-rock .btn-outline-primary {
    color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    border-width: 3px !important;
    border-radius: var(--theme-radius-btn) !important;
    font-weight: 700 !important;
    font-family: 'Coming Soon', cursive !important;
    background: rgba(255, 254, 240, 0.9) !important;
    transition: all 0.3s ease !important;
}

.theme-schoolhouse-rock .btn-outline-primary .bi {
    color: var(--theme-primary-dark) !important;
}

.theme-schoolhouse-rock .btn-outline-primary:hover {
    background: var(--theme-primary) !important;
    color: var(--theme-text-warm) !important;
    box-shadow: 0 4px 15px rgba(210, 105, 30, 0.4) !important;
    transform: translateY(-2px);
}

.theme-schoolhouse-rock .btn-outline-primary:hover .bi {
    color: var(--theme-text-warm) !important;
}

/* Active/Checked state for toggle button groups */
.theme-schoolhouse-rock .btn-check:checked + .btn-outline-primary,
.theme-schoolhouse-rock .btn-outline-primary:active,
.theme-schoolhouse-rock .btn-outline-primary.active {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-mid)) !important;
    border-color: var(--theme-primary-dark) !important;
    color: var(--theme-text-warm) !important;
    box-shadow: 0 4px 15px rgba(210, 105, 30, 0.5), inset 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    font-weight: 700 !important;
    transform: translateY(0);
}

.theme-schoolhouse-rock .btn-check:checked + .btn-outline-primary .bi,
.theme-schoolhouse-rock .btn-outline-primary:active .bi,
.theme-schoolhouse-rock .btn-outline-primary.active .bi {
    color: var(--theme-text-warm) !important;
}

.theme-schoolhouse-rock .btn-outline-secondary {
    color: var(--theme-brown-mid) !important;
    border-color: var(--theme-brown-mid) !important;
    border-width: 3px !important;
    border-radius: var(--theme-radius-btn) !important;
    font-weight: 700 !important;
    font-family: 'Coming Soon', cursive !important;
    transition: all 0.3s ease !important;
}

.theme-schoolhouse-rock .btn-outline-secondary:hover {
    background: var(--theme-brown-mid) !important;
    color: var(--theme-text-warm) !important;
    box-shadow: 0 4px 15px rgba(139, 115, 85, 0.4) !important;
    transform: translateY(-2px);
}

.theme-schoolhouse-rock .btn-outline-danger {
    color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    border-width: 2px !important;
    border-radius: var(--theme-radius-btn) !important;
    font-weight: 600 !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
}

.theme-schoolhouse-rock .btn-outline-danger:hover {
    background: var(--theme-primary) !important;
    color: var(--theme-text-warm) !important;
    box-shadow: 0 4px 15px rgba(210, 105, 30, 0.3) !important;
    transform: translateY(-1px);
}

/* ---- Secondary Buttons ---- */
.theme-schoolhouse-rock .btn-secondary,
.theme-schoolhouse-rock #addOption,
.theme-schoolhouse-rock #addField,
.theme-schoolhouse-rock #addAdditionalQuestion {
    background: linear-gradient(135deg, var(--theme-brown-mid) 0%, #A0826D 100%) !important;
    border: 3px solid #654321 !important;
    color: var(--theme-text-warm) !important;
    font-weight: 700 !important;
    font-family: 'Coming Soon', cursive !important;
    box-shadow: 0 4px 15px rgba(101, 67, 33, 0.4) !important;
    border-radius: var(--theme-radius-btn) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.theme-schoolhouse-rock .btn-secondary:hover,
.theme-schoolhouse-rock .btn-secondary:active,
.theme-schoolhouse-rock .btn-secondary:focus {
    background: linear-gradient(135deg, #A0826D 0%, var(--theme-brown-mid) 100%) !important;
    border-color: var(--theme-primary-dark) !important;
    box-shadow: 0 6px 20px rgba(139, 69, 19, 0.6) !important;
    transform: translateY(-2px) scale(1.02);
    color: var(--theme-text-warm) !important;
}

/* ---- List Items — sticky notes ---- */
.theme-schoolhouse-rock .list-group-item {
    background: var(--theme-accent-light) !important;
    border: 2px solid var(--theme-accent) !important;
    color: var(--theme-text) !important;
    margin-bottom: 10px !important;
    border-radius: var(--theme-radius-input) !important;
    font-weight: 600 !important;
    font-family: 'Coming Soon', cursive !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
}

.theme-schoolhouse-rock .list-group-item:hover {
    background: #FFE066 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-2px) rotate(1deg);
}

.theme-schoolhouse-rock .option-description-display {
    background: rgba(180, 120, 0, 0.1) !important;
    border-radius: var(--theme-radius-input) !important;
    color: var(--theme-text) !important;
    padding: 0.4rem 0.6rem !important;
}

/* ---- Checkboxes & Radio Buttons ---- */

/* Base — MUST use background-color NOT background shorthand (Issue 19) */
.theme-schoolhouse-rock .form-check-input {
    background-color: var(--theme-bg-input) !important;
    border: 3px solid var(--theme-brown-mid) !important;
    border-radius: 4px !important; /* keep square — radios override to 50% below */
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* Radio — circle */
.theme-schoolhouse-rock .form-check-input[type="radio"] {
    border-radius: 50% !important;
}

/* Checked state — MUST use background-color NOT background shorthand */
.theme-schoolhouse-rock .form-check-input:checked {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary-dark) !important;
    box-shadow: 0 0 10px rgba(210, 105, 30, 0.4) !important;
}

/* Solid fill on checked radio — suppress Bootstrap's inner white dot (Issue 17) */
.theme-schoolhouse-rock .form-check-input[type="radio"]:checked {
    background-image: none !important;
}

/* Default: on dark chalkboard background — cream text */
.theme-schoolhouse-rock .form-check-label {
    color: var(--theme-text-warm) !important;
    font-weight: 600 !important;
    font-family: 'Coming Soon', cursive !important;
    cursor: pointer !important;
    flex: 1 !important;
}

/* Inside cards and card-like containers — dark text */
.theme-schoolhouse-rock .card .form-check-label,
.theme-schoolhouse-rock .additional-question-item .form-check-label,
.theme-schoolhouse-rock .list-group-item .form-check-label {
    color: var(--theme-text) !important;
}

/* Vertical alignment for checkbox/radio rows (excludes toggle switches) */
.theme-schoolhouse-rock .form-check:not(.form-switch) {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.theme-schoolhouse-rock .form-check:not(.form-switch) .form-check-input {
    margin-top: 0 !important;
    flex-shrink: 0 !important;
}

.theme-schoolhouse-rock .form-check:not(.form-switch) .form-check-label {
    margin-bottom: 0 !important;
}

/* Preserve inline-block when Bootstrap d-inline-block is used (e.g. Silent Save checkbox) */
.theme-schoolhouse-rock .form-check.d-inline-block:not(.form-switch) {
    display: inline-flex !important;
}

/* ---- Toggle Switches ---- */

/* White thumb via --bs-form-switch-bg CSS variable (Issue 19 — do NOT use background-image: none) */
.theme-schoolhouse-rock .form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
    background-color: rgba(139, 115, 85, 0.35) !important;
    border: 2px solid var(--theme-brown-mid) !important;
    border-radius: 2em !important;
    width: 2em !important;
    height: 1em !important;
}

.theme-schoolhouse-rock .form-switch .form-check-input:checked {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary-dark) !important;
    box-shadow: 0 0 10px rgba(210, 105, 30, 0.4) !important;
}

/* ---- Disabled / Taken Options ---- */
.theme-schoolhouse-rock .list-group-item input:disabled + label {
    color: var(--theme-primary) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    text-decoration: line-through !important;
}

.theme-schoolhouse-rock .list-group-item input:disabled ~ small {
    color: #228B22 !important;
    font-weight: 600 !important;
}

.theme-schoolhouse-rock .list-group-item:has(input:disabled) {
    background: rgba(210, 105, 30, 0.2) !important;
    border-color: rgba(34, 139, 34, 0.5) !important;
    opacity: 0.75 !important;
}

.theme-schoolhouse-rock .list-group-item:has(input:disabled):hover {
    background: rgba(210, 105, 30, 0.2) !important;
    border-color: rgba(34, 139, 34, 0.5) !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
}

.theme-schoolhouse-rock .list-group-item:has(input:disabled)::before {
    background: linear-gradient(to bottom, rgba(210, 105, 30, 0.5), rgba(34, 139, 34, 0.5)) !important;
}

/* ---- Highlighted Options ---- */
.theme-schoolhouse-rock .list-group-item.option-highlighted {
    background: #FFD000 !important;
    border: 2px solid var(--theme-primary) !important;
    box-shadow: 0 4px 14px rgba(210, 105, 30, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.theme-schoolhouse-rock .list-group-item.option-highlighted:hover {
    background: #FFC400 !important;
    border-color: #A0522D !important;
    box-shadow: 0 6px 18px rgba(210, 105, 30, 0.5), 0 3px 8px rgba(0, 0, 0, 0.25) !important;
}

/* ---- Alerts ---- */
.theme-schoolhouse-rock .alert {
    background: var(--theme-accent-light) !important;
    border: 3px solid var(--theme-accent) !important;
    color: var(--theme-text) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    border-radius: var(--theme-radius-btn) !important;
    font-family: 'Coming Soon', cursive !important;
}

/* ---- Form Sections ---- */
.theme-schoolhouse-rock .form-section-respondent,
.theme-schoolhouse-rock .form-section-main-options,
.theme-schoolhouse-rock .form-section-additional {
    border-color: var(--theme-brown-mid) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
    border-radius: var(--theme-radius-btn) !important;
}

.theme-schoolhouse-rock .form-section-header {
    background: var(--theme-brown-mid) !important;
    color: var(--theme-text-warm) !important;
    border-bottom: 3px solid #654321 !important;
    border-radius: 5px 5px 0 0 !important;
    font-weight: 700 !important;
    font-family: 'Coming Soon', cursive !important;
}

/* ---- Additional Questions ---- */
.theme-schoolhouse-rock .additional-question-section .card,
.theme-schoolhouse-rock .additional-question-item {
    background: var(--theme-bg) !important;
    border: 3px solid var(--theme-brown-mid) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

.theme-schoolhouse-rock .additional-question-section .form-label {
    color: var(--theme-text) !important;
    font-weight: 700 !important;
    font-family: 'Coming Soon', cursive !important;
}

/* ---- Icons ---- */

/* Icons on dark background — light by default */
.theme-schoolhouse-rock .bi {
    color: var(--theme-text-warm) !important;
}

/* Icons inside cards and card-like containers (.additional-question-item is not a .card) — dark */
.theme-schoolhouse-rock .card .bi,
.theme-schoolhouse-rock .additional-question-item .bi {
    color: var(--theme-text) !important;
}

/* Option link icons stay blue */
.theme-schoolhouse-rock .card .option-link-icon .bi {
    color: #0066cc !important;
}

/* Inside buttons, icons inherit the button's color — not forced to card text */
.theme-schoolhouse-rock .card .btn .bi,
.theme-schoolhouse-rock .card .btn i,
.theme-schoolhouse-rock .additional-question-item .btn .bi,
.theme-schoolhouse-rock .additional-question-item .btn i {
    color: inherit !important;
}

/* Trash/delete question buttons — restore red */
.theme-schoolhouse-rock .remove-additional-question-btn,
.theme-schoolhouse-rock .remove-additional-question-btn .bi {
    color: #dc3545 !important;
}

/* Event detail icons */
.theme-schoolhouse-rock .bi-calendar-event-fill,
.theme-schoolhouse-rock .bi-clock-fill,
.theme-schoolhouse-rock .bi-geo-alt-fill {
    color: var(--theme-primary) !important;
}

.theme-schoolhouse-rock .max-signups-icon {
    color: var(--theme-primary) !important;
}

/* ---- Navbar ---- */
.theme-schoolhouse-rock .navbar {
    background: var(--theme-dark-mid) !important;
    border-bottom: 4px solid var(--theme-brown-mid) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

.theme-schoolhouse-rock .navbar-brand {
    color: var(--theme-text-light) !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
    font-weight: 700 !important;
    font-family: 'Coming Soon', cursive !important;
}

.theme-schoolhouse-rock .brand-text-primary {
    color: var(--theme-text-light) !important;
}

.theme-schoolhouse-rock .brand-text-white {
    color: #E67D30 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6) !important;
    font-weight: 700 !important;
    font-family: 'Coming Soon', cursive !important;
}

.theme-schoolhouse-rock .navbar-brand:hover .brand-text-white {
    color: var(--theme-accent) !important;
}

/* Recolor SVG logo to match --theme-primary (#D2691E sienna/coral) */
.theme-schoolhouse-rock .navbar-brand img {
    filter: brightness(0) saturate(100%) invert(46%) sepia(89%) saturate(900%) hue-rotate(5deg) brightness(93%) contrast(95%) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.6));
    transition: filter 0.3s ease !important;
}

.theme-schoolhouse-rock .navbar-brand:hover img {
    filter: brightness(0) saturate(100%) invert(46%) sepia(89%) saturate(900%) hue-rotate(5deg) brightness(93%) contrast(95%) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.6));
}

.theme-schoolhouse-rock .navbar-toggler {
    border-color: var(--theme-brown-mid) !important;
    background: rgba(139, 115, 85, 0.2) !important;
}

.theme-schoolhouse-rock .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28236, 240, 241, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ---- Offcanvas / Mobile Nav ---- */
.theme-schoolhouse-rock .offcanvas {
    background: var(--theme-dark-mid) !important;
    border-left: 4px solid var(--theme-brown-mid) !important;
}

.theme-schoolhouse-rock .btn-close {
    filter: invert(1) !important;
    opacity: 0.8 !important;
}

.theme-schoolhouse-rock .mobile-nav-section .btn {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-mid)) !important;
    border: 3px solid var(--theme-primary-dark) !important;
    color: var(--theme-text-warm) !important;
    font-weight: 700 !important;
    font-family: 'Coming Soon', cursive !important;
}

.theme-schoolhouse-rock .mobile-nav-header {
    color: var(--theme-text-light) !important;
    font-weight: 700 !important;
    font-family: 'Coming Soon', cursive !important;
}

.theme-schoolhouse-rock .mobile-nav-item {
    color: var(--theme-text-light) !important;
    font-weight: 600 !important;
    font-family: 'Coming Soon', cursive !important;
}

.theme-schoolhouse-rock .mobile-nav-item:hover {
    color: var(--theme-accent) !important;
}

.theme-schoolhouse-rock .mobile-nav-item i {
    color: var(--theme-accent) !important;
}

/* ---- Footer ---- */
.theme-schoolhouse-rock .footer {
    background: var(--theme-dark-mid) !important;
    border-top: 4px solid var(--theme-brown-mid) !important;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.4) !important;
}

.theme-schoolhouse-rock .footer p {
    color: var(--theme-text-light) !important;
    font-weight: 600 !important;
    font-family: 'Coming Soon', cursive !important;
}

/* Footer links + all descendants (overrides inline style on <i> icons — Issue 11) */
.theme-schoolhouse-rock .footer a,
.theme-schoolhouse-rock .footer a * {
    color: var(--theme-accent) !important;
    font-weight: 600 !important;
}

/* ---- Modals ---- */
.theme-schoolhouse-rock .modal-content {
    background: var(--theme-bg-input) !important;
    border: 3px solid var(--theme-primary-dark) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 48px rgba(139, 69, 19, 0.4) !important;
}

.theme-schoolhouse-rock .modal-header {
    background: transparent !important;
    border-bottom: none !important;
    padding: 1.5rem 1.5rem 0.5rem !important;
}

.theme-schoolhouse-rock .modal-title {
    color: var(--theme-primary) !important;
    font-family: 'Coming Soon', cursive !important;
    font-weight: 700 !important;
}

.theme-schoolhouse-rock .modal-title .bi {
    color: var(--theme-primary) !important;
}

.theme-schoolhouse-rock .modal-body {
    color: var(--theme-text) !important;
    background: transparent !important;
    padding: 1rem 1.5rem !important;
}

.theme-schoolhouse-rock .modal-body .bi {
    color: var(--theme-text) !important;
}

.theme-schoolhouse-rock .modal-footer {
    background: transparent !important;
    border-top: 2px solid #D5C4A0 !important;
    padding: 0.5rem 1.5rem 1.5rem !important;
}

/* ---- Spreadsheet Modal — full theme opt-out (Issue 15) ---- */

/* Reset all text to dark-on-white */
.theme-schoolhouse-rock #ssModal *,
.theme-schoolhouse-rock #ssModal h1,
.theme-schoolhouse-rock #ssModal h2,
.theme-schoolhouse-rock #ssModal h3,
.theme-schoolhouse-rock #ssModal h4,
.theme-schoolhouse-rock #ssModal h5,
.theme-schoolhouse-rock #ssModal h6,
.theme-schoolhouse-rock #ssModal p,
.theme-schoolhouse-rock #ssModal small,
.theme-schoolhouse-rock #ssModal .text-muted {
    color: #212529 !important;
    text-shadow: none !important;
    filter: none !important;
    font-family: inherit !important;
}

/* Icons inside buttons inherit button color, not the wildcard */
.theme-schoolhouse-rock #ssModal .btn i,
.theme-schoolhouse-rock #ssModal .btn .bi {
    color: inherit !important;
}

/* Restore danger red for X delete row buttons */
.theme-schoolhouse-rock #ssModal .text-danger,
.theme-schoolhouse-rock #ssModal .text-danger i,
.theme-schoolhouse-rock #ssModal .text-danger .bi {
    color: #dc3545 !important;
}

/* Strip all button chrome from X delete row buttons */
.theme-schoolhouse-rock #ssModal .spreadsheet-delete-row {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Modal shell */
.theme-schoolhouse-rock #ssModal .modal-content {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none !important;
}

.theme-schoolhouse-rock #ssModal .modal-header {
    background-color: transparent !important;
    border-bottom: 1px solid #dee2e6 !important;
    padding: 1rem !important;
}

.theme-schoolhouse-rock #ssModal .modal-body {
    background-color: transparent !important;
    padding: 1rem !important;
}

.theme-schoolhouse-rock #ssModal .modal-footer {
    background-color: transparent !important;
    border-top: 1px solid #dee2e6 !important;
    padding: 0.75rem !important;
}

/* Apply Changes — theme primary */
.theme-schoolhouse-rock #ssModal .btn-primary {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-mid) 100%) !important;
    border: 1px solid var(--theme-primary) !important;
    color: var(--theme-text-warm) !important;
    border-radius: var(--theme-radius-btn) !important;
    padding: 0.25rem 0.75rem !important;
    font-weight: 600 !important;
    box-shadow: 0 0 8px rgba(210, 105, 30, 0.4) !important;
    transform: none !important;
}

.theme-schoolhouse-rock #ssModal .btn-primary:hover {
    background: linear-gradient(135deg, var(--theme-primary-mid) 0%, var(--theme-primary) 100%) !important;
    box-shadow: 0 0 14px rgba(210, 105, 30, 0.7) !important;
    transform: none !important;
}

/* Add Row — solid primary fill */
.theme-schoolhouse-rock #ssModal .btn-outline-secondary {
    color: var(--theme-text-warm) !important;
    border: 1px solid var(--theme-primary) !important;
    background: var(--theme-primary) !important;
    border-radius: var(--theme-radius-btn) !important;
    padding: 0.25rem 0.75rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transform: none !important;
}

.theme-schoolhouse-rock #ssModal .btn-outline-secondary:hover {
    background: var(--theme-primary-mid) !important;
    border-color: var(--theme-primary-mid) !important;
    box-shadow: 0 0 8px rgba(210, 105, 30, 0.4) !important;
    color: var(--theme-text-warm) !important;
    transform: none !important;
}

/* Cancel */
.theme-schoolhouse-rock #ssModal .btn-outline-danger {
    color: var(--theme-primary) !important;
    border: 1px solid var(--theme-primary) !important;
    background: transparent !important;
    border-radius: var(--theme-radius-btn) !important;
    padding: 0.25rem 0.75rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transform: none !important;
}

.theme-schoolhouse-rock #ssModal .btn-outline-danger:hover {
    background: rgba(210, 105, 30, 0.12) !important;
    box-shadow: 0 0 8px rgba(210, 105, 30, 0.3) !important;
    color: var(--theme-primary) !important;
    transform: none !important;
}

/* Table inputs — keep neutral */
.theme-schoolhouse-rock #ssModal input,
.theme-schoolhouse-rock #ssModal .form-control {
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    color: #212529 !important;
    box-shadow: none !important;
}

/* ---- Question Type Pills (additional questions editor) ---- */
.theme-schoolhouse-rock .question-type-pill {
    background: rgba(255, 254, 240, 0.9) !important;
    color: var(--theme-brown-mid) !important;
    border: 1px solid var(--theme-brown-mid) !important;
    font-family: 'Coming Soon', cursive !important;
}

.theme-schoolhouse-rock .question-type-pill:hover {
    background: rgba(139, 115, 85, 0.15) !important;
    color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.theme-schoolhouse-rock .question-type-pill.active {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-mid) 100%) !important;
    color: var(--theme-text-warm) !important;
    border-color: var(--theme-primary-dark) !important;
}

/* Restore icon color inside active pills — overrides the broad .card .bi rule */
.theme-schoolhouse-rock .question-type-pill.active i,
.theme-schoolhouse-rock .question-type-pill.active .bi {
    color: var(--theme-text-warm) !important;
}

.theme-schoolhouse-rock .question-type-pill i,
.theme-schoolhouse-rock .question-type-pill .bi {
    color: inherit !important;
}

/* ---- Drag Handles ---- */
.theme-schoolhouse-rock .drag-handle {
    color: var(--theme-brown-mid) !important;
}

/* ---- Smooth transitions ---- */
.theme-schoolhouse-rock .btn,
.theme-schoolhouse-rock .form-control,
.theme-schoolhouse-rock .list-group-item {
    transition: all 0.3s ease !important;
}