/* 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;
}

/* django-prose-editor theme outside the Django admin */
:root {
    --prose-editor-background: #ffffff;
    --prose-editor-foreground: #212529;
    --prose-editor-border-color: #ced4da;
    --prose-editor-active-color: #66247f; /* matches .btn-csm-primary */
    --prose-editor-disabled-color: #6c757d;
}

.prose-editor .ProseMirror {
    min-height: 150px;
    padding: 0.5rem 0.75rem;
    line-height: 1.4;
}

.prose-editor .ProseMirror p {
    margin-bottom: 0.35rem;
}

.prose-editor .ProseMirror p:last-child {
    margin-bottom: 0;
}

/* Override Bootstrap badge font-weight */
.badge {
    --bs-badge-font-weight: 300;
}

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

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

/* Override Bootstrap disabled button styles for more transparency */
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
    opacity: 0.35;
}

.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 {
    font-family: Calibri, Arial, sans-serif;
    color: #e61d72;
    /*white-space: pre-wrap;*/
}

/* 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 */
    position: sticky;
    top: 0;
    z-index: 1030;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.3s ease;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Logo container with fixed height to prevent layout shift */
nav.navbar .navbar-brand {
    position: relative;
    min-height: 80px;
    display: flex;
    align-items: center;
}

/* Logo container - reserve space to prevent layout shift */
nav.navbar .navbar-brand .logo-normal,
nav.navbar .navbar-brand .logo-thin {
    transition: opacity 0.2s ease;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
}

/* Thin logo: position absolute and fade in/out */
nav.navbar .logo-thin {
    position: absolute !important;
    left: 0.5rem;
    opacity: 0;
    pointer-events: none;
    display: block !important; /* Override d-none */
}

/* Normal state: normal logos visible */
nav.navbar .logo-normal {
    opacity: 1;
}

/* Thin navbar state */
nav.navbar.navbar-thin {
    border-bottom: 1px solid #a3145b;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Divider under the navbar when a page blanks the budget banner (R106):
   the banner itself otherwise separates the navbar from the content. */
nav.navbar:not(:has(+ .budget-banner-csm)) {
    border-bottom: 1px solid var(--csm-secondary);
}

nav.navbar.navbar-thin .navbar-brand {
    min-height: 32px !important;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

nav.navbar.navbar-thin .logo-normal {
    opacity: 0 !important;
    pointer-events: none;
    position: absolute !important;
}

nav.navbar.navbar-thin .logo-thin {
    opacity: 1 !important;
    pointer-events: auto;
}

nav.navbar.navbar-thin .navbar-nav .nav-link {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

nav.navbar.navbar-thin .navbar-toggler {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

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;
}

.bg-csm-primary {
    background-color: #66247f !important;
}

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

.bg-csm-orange {
    background-color: #ff923c !important;
}

.text-csm-primary {
    color: #66247f !important;
}

.badge.bg-csm-primary {
    background-color: #66247f !important;
}

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

/* Public/private markers on staff management cards (R205): green =
   reaches the public page when published, dark = team-only. */
.badge-csm-public {
}

.badge-csm-prive {
}

/* Public/private zone containers grouping the staff management cards
   (R205): light tinted background + padding, zone label on top. */
.zone-csm-public {
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: rgb(255 224 224) !important;
}

.zone-csm-prive {
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: rgb(230 255 233) !important;
}

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

/* Card header (primary): replaces "card-header bg-csm-secondary text-white py-3" */
.card-header-csm {
    background-color: var(--csm-secondary) !important;
    color: #fff !important;
    padding: 1rem;
    margin-bottom: 0;
    border-bottom: var(--bs-card-border-width, 1px) solid var(--bs-card-border-color, rgba(33, 37, 41, 0.175));
    border-radius: var(--bs-card-inner-border-radius, calc(0.375rem - 1px)) var(--bs-card-inner-border-radius, calc(0.375rem - 1px)) 0 0;
}

.alert-csm-secondary {
    color: #41464b;
    background-color: #e2e3e5;
    border-color: #d3d6d8;
}

.alert-csm-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

.alert-csm-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

.alert-csm-warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

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

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

.btn-csm-secondary {
    color: #fff;
    background-color: #a3145b;
    border-color: #a3145b;
}

.btn-csm-secondary:hover, .btn-csm-secondary:focus {
    color: #fff;
    background-color: #93104d;
    border-color: #93104d;
}

/* 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 */
.navbar-thin .navbar-nav .nav-link:hover,
.navbar-thin .navbar-nav .nav-link:focus {
    color: #ea5a0b !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

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 {
    --csm-primary: #66247f; /* brand primary (matches .btn-csm-primary / .bg-csm-primary) */
    --csm-secondary: #a3145b; /* brand secondary (matches .bg-csm-secondary) */
    --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;

    --apcsm-blue-primary: #282358;
}

/* 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(--apcsm-orange-primary);
    background-color: transparent;
    opacity: .15;
}


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


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

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

.box-csm-warning {
    background-color: #A3145B3F !important;
}

.nav-csm-pills .nav-link {
    border: 1px solid #dee2e6;
    margin-right: 0.25rem;
    color: #66247f;
}

.nav-csm-pills .nav-link:hover {
    background-color: #f8f9fa;
    color: #56206b;
}

.nav-csm-pills .nav-link.active {
    background-color: #a3145b !important;
    border-color: #a3145b !important;
    color: #fff !important;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: #a3145b !important;
    color: #fff !important;
}

.display-7 {
    font-weight: 200;
    line-height: 1.0;
    font-size: calc(1.175rem + 1.25vw);
}

@media (min-width: 1200px) {
    .display-7 {
        font-size: 2rem;
    }
}

.display-8 {
    font-weight: 150;
    line-height: 0.8;
    font-size: calc(1rem + 1.05vw);
}

@media (min-width: 1200px) {
    .display-8 {
        font-size: 1.5rem;
    }
}

/* Event specific styles */
.event-cover-container {
    height: auto;
    width: 100%;
    background-color: #fff;
}

@media (min-width: 992px) {
    .event-cover-container {
        height: 500px;
        max-height: 500px;
    }
}

.event-cover-img {
    width: 100%;
    height: auto;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

@media (min-width: 992px) {
    .event-cover-img {
        height: 100%;
        width: 100%;
        max-height: 500px;
    }
}

.event-placeholder-img {
    opacity: 0.6;
}

.event-sticky-sidebar {
    top: 1rem;
    z-index: 1020;
}

.event-card-img-container {
    /*height: 400px;*/
    overflow: hidden;
    background-color: #ffffff;
}

.table-col-width-50 {
    width: 50px;
}

/* Volunteer management: keep column widths identical across the three group
   tables (bénévoles / responsables / administrateurs) on large screens. */
.table-csm-volunteers {
    table-layout: fixed;
}

.table-csm-volunteers .col-csm-name {
    width: 25%;
}

.table-csm-volunteers .col-csm-phone {
    width: 15%;
}

.table-csm-volunteers .col-csm-email {
    width: 30%;
}

.table-csm-volunteers .col-csm-children {
    width: 30%;
}

/* Track separator styles */
.track-separator {
    margin: 1.5rem 0;
}

.track-separator--vertical {
    text-align: center;
    font-size: 1.5rem;
    color: #6c757d;
    opacity: 0.6;
}

.track-separator--horizontal {
    border: none;
    border-top: 1px solid #dee2e6;
    margin: 1.5rem 0;
}

.track-separator--spacing {
    height: 1.5rem;
    background: transparent;
}

.track-separator--custom {
    text-align: center;
    font-style: italic;
    color: #6c757d;
    padding: 0.5rem 0;
}

/* Ensure inputs in a 2-col row align vertically even when labels differ in length */
.row-crispy-equal > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.row-crispy-equal > [class*="col-"] > .mb-3 {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.row-crispy-equal > [class*="col-"] > .mb-3 > :is(input, select, textarea) {
    margin-top: auto;
}

/* Library calendar: equal day columns */
.calendar-col {
    width: 14.2857%;
}

/* Library calendar: mobile "add schedule" button toggle */
#calendarWrapper .mobile-add-btn {
    display: none !important;
}

#calendarWrapper.show-add-buttons .mobile-add-btn {
    display: inline-block !important;
}

/* Smallest screens: show + badge for Add button */
@media (max-width: 576.98px) {
    #calendarWrapper .mobile-add-btn {
        border: none; /* keep it compact */
        padding: .125rem; /* minimal padding around the badge */
    }

    #calendarWrapper .mobile-add-btn .plus-badge {
        background-color: var(--apcsm-orange-primary, #ea5a0b);
        color: #fff;
        border-radius: 9999px;
        width: 1.5rem;
        height: 1.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        line-height: 1;
        padding: 0;
    }
}

/* Project app: clickable radio/label cursor (replaces inline style="cursor:pointer;") */
.cursor-pointer {
    cursor: pointer;
}

/* Project app: scrollable rules card body (replaces inline max-height/overflow) */
.scrollable-card-body {
    max-height: 300px;
    overflow-y: auto;
}

/* Delegate app: dinner booking quantity stepper (replaces dinner_book.html <style> block, S4/S9) */
.qty-stepper {
    max-width: 9rem;
}

.qty-stepper .qty-input {
    -moz-appearance: textfield;
    appearance: textfield;
    text-align: center;
}

.qty-stepper .qty-input::-webkit-outer-spin-button,
.qty-stepper .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Delegate app: school map fit inside the ratio box (replaces inline styles, S9) */
.map-fit-image {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

/* Delegate app: reduce products column width in dinner bookings table */
/* Delegate dinner detail: bookings table column sizing */
.dinner-bookings-col-name { width: 19%; }
.dinner-bookings-col-students { width: 17%; }
.dinner-bookings-col-participants { width: 4rem; }
.dinner-bookings-col-products { width: 24%; max-width: 360px; }
.dinner-bookings-col-amount { width: 6.5rem; }
.dinner-bookings-col-communication { width: 9.5rem; }
.dinner-bookings-col-payment { width: 12rem; }

/* Pages app: budget contribution QR code image (replaces inline style, S9) */
.qr-image {
    width: min(100%, 200px);
    aspect-ratio: 1 / 1;
}

/* Shared contact block (R140): inline split-phone prefix select */
.select-csm-phone-prefix {
    flex: 0 0 auto;
    width: auto;
    max-width: 50%;
    min-width: 5rem;
}

/* GDPR consent widget (R110/R142): muted accordion + privacy link aligned
   with the checkbox label */
.accordion-csm-muted {
    --bs-accordion-bg: var(--bs-tertiary-bg);
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: var(--bs-body-color);
    --bs-accordion-btn-focus-border-color: var(--bs-secondary-bg);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-secondary-bg);
}

.gdpr-privacy-link {
    /* .form-check-label starts at 1.5rem (form-check padding-left) */
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}