/* CSS */

@media print {
    html, body {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Remove container’s outer margins/padding for print */
    .container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Tighten the title spacing */
    .print-title {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Hide navbars/headers if base.html has them */
    .navbar,
    header,
    .d-print-none {
        display: none !important;
    }
}


/* From styles.css: project-specific styles (no Bootstrap core) */
/* Override Bootstrap default font to Calibri Book (with fallbacks) */
:root {
    --bs-body-font-family: "Calibri Light", "Calibri", Arial;
}

html,
body {
    height: 100%;
    font-family: var(--bs-body-font-family), sans-serif;
}

.form-control::placeholder {
    opacity: 0.5; /* Makes placeholder 50% opacity */
}

.feature {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    width: 3rem;
    font-size: 1.5rem;
}

.bg-featured-blog {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 15rem;
}

#schedule-modal .modal-footer {
    border-top: none;
}

/* Readers by classroom: shared styles (moved from template) */
.barcode svg {
    height: var(--barcode-screen-height-px, 28px);
    vertical-align: middle;
}

/* Page-break element: hidden on screen */
.page-break {
    display: none;
}

/* Calendar responsive tweaks */
.table.calendar {
    table-layout: fixed;
}

.table.calendar td {
    vertical-align: top;
    padding: .25rem;
}

.table.calendar .alert {
    border-width: 1px;
}

.table.calendar .day-number.badge {
    padding: .35rem .45rem;
}

/* Smaller cells when there is no schedule */
.table.calendar td.no-schedule {
    padding: .25rem;
}

.table.calendar td.no-schedule .empty-day-placeholder {
    height: .25rem;
    line-height: 0;
}

@media (max-width: 576.98px) {
    .table.calendar thead th {
        font-size: .8rem;
        padding: .25rem;
    }

    .table.calendar td {
        padding: .25rem;
    }

    .table.calendar .alert {
        padding: .25rem .35rem;
        margin: .25rem 0;
        font-size: .8rem;
    }

    .table.calendar .small {
        font-size: .75rem;
    }

    .table.calendar .badge {
        font-size: .65rem;
    }

    /* Smaller title on small screens */
    .library-planning-title {
        font-size: 1.75rem;
        line-height: 1.2;
        margin-bottom: .75rem !important;
    }
}

@media print {
    @page {
        size: A4 portrait;
        /* margin can be defined by the printer dialog */
    }

    body * {
        visibility: hidden;
    }

    .print-area, .print-area * {
        visibility: visible;
    }

    .print-area {
        position: static;
        /* Reduce overall print font size */
        font-size: 9pt;
        line-height: 1.3;
    }

    .classroom-page {
        /* page breaks handled by explicit .page-break elements */
        border: none;
        margin: 0;
        padding: 0;
    }

    .classroom-title {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 6px;
        border-bottom: 1px solid #333;
        padding-bottom: 4px;
    }

    .classroom-title h3 {
        font-size: 12pt;
        margin: 0;
    }

    /* One-line rows smaller spacing for print */
    .classroom-page .row {
        font-size: 9pt;
        padding: 2px 0 !important;
        margin-left: 0;
        margin-right: 0;
    }

    .classroom-page .row.mb-2 {
        margin-bottom: 2px !important;
    }

    .classroom-page .row.p-2 {
        padding: 2px 0 !important;
    }

    .classroom-page .row > [class^="col-"],
    .classroom-page .row > [class*=" col-"] {
        padding-left: 6px;
        padding-right: 6px;
    }

    .border-bottom {
        border-bottom: 1px dashed #ccc !important;
    }

    .barcode svg {
        height: calc(var(--barcode-print-height-mm, 10) * 1mm);
    }

    /* Explicit page-break element for printing */
    .page-break {
        display: block;
        break-before: page;
        page-break-before: always; /* legacy */
    }
}


/* =========================================
   AP-College custom color theme
   Colors provided by user:
   - Text: #282358
   - Titles: #e61d72
   - Menu background: #a3145b
   - Accent 1: #66247f
   - Accent 2: #ea5a0b
   All styling centralized in this stylesheet.
   ========================================= */

/* Base: white background, primary text color */
html, body {
    background-color: #ffffff;
    color: #282358; /* primary text */
}

/* Headings use the title color */
h1, h2, h3, h4, h5, h6 {
    color: #e61d72;
}

/* Global links: default to accent 1; hover/focus to accent 2 */
a {
    color: #66247f;
    text-decoration-color: rgba(102, 36, 127, 0.35);
}

a:hover, a:focus {
    color: #ea5a0b;
    text-decoration-color: rgba(234, 90, 11, 0.5);
}

/* Navbar styling */
nav.navbar {
    background-color: #ffffff !important; /* white navbar background as requested */
}

nav.navbar .navbar-brand,
nav.navbar .nav-link,
nav.navbar .dropdown-item.dropdown-toggle {
    color: #282358 !important; /* dark text on white navbar */
}

nav.navbar .nav-link:hover,
nav.navbar .nav-link:focus,
nav.navbar .navbar-brand:hover,
nav.navbar .navbar-brand:focus {
    color: #ea5a0b !important; /* accent hover */
}

/* Dropdown menu: keep white background for readability */
nav.navbar .dropdown-menu {
    background-color: #ffffff;
    border-color: #f0d6e1;
}

nav.navbar .dropdown-item {
    color: #282358;
}

nav.navbar .dropdown-item:hover, nav.navbar .dropdown-item:focus {
    color: #a3145b;
    background-color: #fbeaf1; /* subtle tint */
}

/* Navbar toggler visible on colored background */
nav.navbar .navbar-toggler {
    border-color: rgba(40, 35, 88, .55);
}

nav.navbar .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(40,35,88, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Footer styling to match theme */
footer {
    background-color: #a3145b !important;
}

footer, footer .text-white, footer .link-light, footer a, footer .small {
    color: #ffffff !important;
}

footer a:hover, footer a:focus {
    color: #ea5a0b !important;
}

footer .separator, footer .text-white {
    opacity: 0.9;
}

/* Utility: badges, alerts, and buttons (light-touch theming) */
.badge.bg-primary {
    background-color: #66247f !important;
}

.badge.bg-secondary {
    background-color: #a3145b !important;
}

.alert-primary {
    color: #282358;
    background-color: #f3e9f8;
    border-color: #e7d3f3;
}

.btn-primary {
    background-color: #66247f;
    border-color: #66247f;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: #56206b;
    border-color: #56206b;
}


/* Navbar enhancements per user request */
/* Bigger menu text for top-level navbar links */
nav.navbar .navbar-nav .nav-link {
    font-size: 1.2rem; /* ~18px for better readability */
}

/* Navbar link color override: set menu links to #a3145b */
nav.navbar .navbar-nav .nav-link,
nav.navbar .navbar-nav .nav-link.active,
nav.navbar .navbar-nav .show > .nav-link {
    color: #a3145b !important;
}


/* Increase contrast for navbar link hover/focus states */
nav.navbar .navbar-nav .nav-link:hover,
nav.navbar .navbar-nav .nav-link:focus {
    color: #282358 !important; /* darker than base #a3145b for clear contrast */
    text-decoration: underline;
    text-decoration-thickness: 1px; /* thinner underline on hover/focus */
    text-underline-offset: 2px;
}

/* Keyboard accessibility: clear focus indicator */
nav.navbar .navbar-nav .nav-link:focus-visible {
    outline: 2px solid #282358;
    outline-offset: 2px;
    text-decoration: none; /* outline replaces underline for focus-visible */
}

/* center image */
.center-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
}

/* maximum width images */
.image-max-width-600 {
    max-width: 600px; /* adjust width here */
    width: 100%;
    height: auto;
}

.image-max-width-300 {
    max-width: 300px; /* adjust width here */
    width: 100%;
    height: auto;
}

.image-max-height-150 {
    max-height: 150px;
    height: 100%;
    width: auto;
}

.card-image-link {
    transition: filter 0.3s ease;
    cursor: pointer;
}

.card-image-link:hover {
    filter: brightness(0.5);
}

.btn-apcsm-orange {
    --bs-btn-color: #282358;
    --bs-btn-bg: rgba(234, 90, 11, 0.5);
    --bs-btn-border-color: rgba(234, 90, 11, 0.5);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(234, 90, 11, 0.5);
    --bs-btn-hover-border-color: rgba(234, 90, 11, 0.5);
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(234, 90, 11, 0.5);
    --bs-btn-active-border-color: rgba(234, 90, 11, 0.5);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(234, 90, 11, 0.5);
    --bs-btn-disabled-border-color: rgba(234, 90, 11, 0.5);
}



/* APCM custom button variants: duplicate Bootstrap btn-*-primary/secondary with APCM colors */
/* Usage: <button class="btn btn-apcsm-pink-primary"> or "btn btn-apcsm-pink-outline-primary" etc. */
:root {
    --apcsm-pink-primary: #e61d72;
    --apcsm-pink-primary-hover: #c91a64; /* slightly darker */
    --apcsm-pink-primary-active: #b01756; /* darker */
    --apcsm-pink-primary-rgb: 230, 29, 114;

    --apcsm-orange-primary: #ea5a0b;
    --apcsm-orange-primary-hover: #c94c09;
    --apcsm-orange-primary-active: #b44308;
    --apcsm-orange-primary-rgb: 234, 90, 11;
}

/* Solid primary */
.btn-apcsm-pink-primary {
    color: #fff;
    background-color: var(--apcsm-pink-primary);
    border-color: var(--apcsm-pink-primary);
}
.btn-apcsm-pink-primary:hover {
    color: #fff;
    background-color: var(--apcsm-pink-primary-hover);
    border-color: var(--apcsm-pink-primary-hover);
}
.btn-apcsm-pink-primary:focus, .btn-apcsm-pink-primary.focus {
    color: #fff;
    background-color: var(--apcsm-pink-primary-hover);
    border-color: var(--apcsm-pink-primary-hover);
    box-shadow: 0 0 0 .25rem rgba(var(--apcsm-pink-primary-rgb), .5);
}
.btn-apcsm-pink-primary:active, .btn-apcsm-pink-primary.active, .show > .btn-apcsm-pink-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--apcsm-pink-primary-active);
    border-color: var(--apcsm-pink-primary-active);
}
.btn-apcsm-pink-primary:disabled, .btn-apcsm-pink-primary.disabled {
    color: #fff;
    background-color: var(--apcsm-pink-primary);
    border-color: var(--apcsm-pink-primary);
    opacity: .65;
}

/* Outline primary */
.btn-apcsm-pink-outline-primary {
    color: var(--apcsm-pink-primary);
    border-color: var(--apcsm-pink-primary);
}
.btn-apcsm-pink-outline-primary:hover {
    color: #fff;
    background-color: var(--apcsm-pink-primary);
    border-color: var(--apcsm-pink-primary);
}
.btn-apcsm-pink-outline-primary:focus, .btn-apcsm-pink-outline-primary.focus {
    box-shadow: 0 0 0 .25rem rgba(var(--apcsm-pink-primary-rgb), .5);
}
.btn-apcsm-pink-outline-primary:active, .btn-apcsm-pink-outline-primary.active, .show > .btn-apcsm-pink-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--apcsm-pink-primary-active);
    border-color: var(--apcsm-pink-primary-active);
}
.btn-apcsm-pink-outline-primary:disabled, .btn-apcsm-pink-outline-primary.disabled {
    color: var(--apcsm-pink-primary);
    background-color: transparent;
    opacity: .65;
}

/* Solid secondary */
.btn-apcsm-orange-primary {
    color: #fff;
    background-color: var(--apcsm-orange-primary);
    border-color: var(--apcsm-orange-primary);
}
.btn-apcsm-orange-primary:hover {
    color: #fff;
    background-color: var(--apcsm-orange-primary-hover);
    border-color: var(--apcsm-orange-primary-hover);
}
.btn-apcsm-orange-primary:focus, .btn-apcsm-orange-primary.focus {
    color: #fff;
    background-color: var(--apcsm-orange-primary-hover);
    border-color: var(--apcsm-orange-primary-hover);
    box-shadow: 0 0 0 .25rem rgba(var(--apcsm-orange-primary-rgb), .5);
}
.btn-apcsm-orange-primary:active, .btn-apcsm-orange-primary.active, .show > .btn-apcsm-orange-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--apcsm-orange-primary-active);
    border-color: var(--apcsm-orange-primary-active);
}
.btn-apcsm-orange-primary:disabled, .btn-apcsm-orange-primary.disabled {
    color: #fff;
    background-color: var(--apcsm-orange-primary);
    border-color: var(--apcsm-orange-primary);
    opacity: .65;
}

/* Outline secondary */
.btn-apcsm-orange-outline-primary {
    color: var(--apcsm-orange-primary);
    border-color: var(--apcsm-orange-primary);
}
.btn-apcsm-orange-outline-primary:hover {
    color: #fff;
    background-color: var(--apcsm-orange-primary);
    border-color: var(--apcsm-orange-primary);
}
.btn-apcsm-orange-outline-primary:focus, .btn-apcsm-orange-outline-primary.focus {
    box-shadow: 0 0 0 .25rem rgba(var(--apcsm-orange-primary-rgb), .5);
}
.btn-apcsm-orange-outline-primary:active, .btn-apcsm-orange-outline-primary.active, .show > .btn-apcsm-orange-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--apcsm-orange-primary-active);
    border-color: var(--apcsm-orange-primary-active);
}
.btn-apcsm-orange-outline-primary:disabled, .btn-apcsm-orange-outline-primary.disabled {
    color: var(--apcm-secondary);
    background-color: transparent;
    opacity: .65;
}

.txt-orange-primary {
    color: var(--apcsm-orange-primary);
}

.txt-pink-primary {
    color: var(--apcsm-pink-primary);
}