.remove-elective-subject {
    position: absolute;
    right: 20px;
    margin-top: 3px;
}

#external-events {
    z-index: 2;
    width: 150px;
    padding: 0 10px;
    border: 1px solid #ccc;
    background: #eee;
}

#external-events .fc-event {
    cursor: move;
    margin: 3px 0;
    height: 45px;
    display: flex;
    align-items: center;
    padding-left: 10px;
}

.fc-customButton-button {
    font-size: 13px !important;
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateY(-50%);
}


.form-group {
    margin-bottom: 1rem;
}

.form-group > label {
    margin-bottom: 10px;
}

#delete-modal .modal-footer > .btn {

    border-radius: 3px !important;
    padding: 0 8px !important;
    font-size: 15px;
}

.fc-scroller {
    overflow-y: hidden !important;
}

.context-menu {
    position: absolute;
    z-index: 1000;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
    padding: 5px;
}

.context-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.context-menu ul > li {
    display: block;;
    padding: 5px 15px;
    list-style-type: none;
    color: #333;
    cursor: pointer;
    margin: 0 auto;
    transition: 0.10s;
    font-size: 13px;
}

.context-menu ul > li:hover {
    color: #fff;
    background-color: #007bff;
    border-radius: 2px;
}

/*.fa, .fas {*/
/*    font-size: 13px;*/
/*    margin-right: 4px;*/
/*}*/

.no-header-toolbar .fc-header-toolbar.fc-toolbar {
    margin-top: 0;
    margin-bottom: 0;
}

.fc-h-event {
    border: none;
}

.remove-timetable {
    padding: 2px 3px;
}

.remove-timetable:hover {
    background: white;
    color: black;
    border-radius: 10px;
}

label.filter-menu {
    font-size: 13px;
    color: #7c7c7c;
    font-weight: 500;
    position: absolute;
    top: -8px;
    /*left: 27px;*/
    /*left: 1%;*/
    background: #fff;
    /*margin-bottom: 0;*/
    margin-left: 5px;
    padding: 0 5px;
    z-index: 10;
    border-radius: 20px;
}

/*.select2-container--default.select2-container--focus .select2-selection--multiple {*/
/*    height: 45px;*/
/*}*/

/*.select2-container .select2-selection--multiple {*/
/*    min-height: 45px;*/
/*}*/

.w-fit-content {
    width: fit-content;
}

.select2-container--default .select2-selection--single {
    padding: 0.94rem 0.6rem !important;
}

.select2-container--default .select2-selection--multiple {
    padding: 0.34rem 0.6rem !important;
}

.select2-search__field::placeholder {
    color: #444;
    font-size: 0.8125rem;
}

.asColorPicker-alpha {
    display: none;
}

.remove-number-increment::-webkit-inner-spin-button,
.remove-number-increment::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.total_paidable_amount {
    background-color: lightgray;
}
.dashboard-description {
    font-size: 13px;
}
.v-scroll {
    height: 385px;
    overflow-y: scroll;
}
.custom-card-body {
    padding: 1.25rem !important;
}
.image-tile img {
    height: 200px;
    object-fit: cover;
}
.text-wrap div {
    white-space: normal !important;
}

.package-type-badge {
    position: absolute;
    left: auto;
    right: -10px;
    clip-path: polygon(50% 0%,100% 0%,100% 100%,0% 100%,14% 52%,0% 0%);
    width: 130px;
    height: 38px;
    top: 8px;
    color: white !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.package-type-badge{
    right: -2px;
}

.postpaid-color {
    background: var(--primary-color);
}
.prepaid-color {
    background: var(--secondary-color);
}

.addon-border-primary {
    overflow: hidden;
}
.addon-ribbon {
    font: bold 15px sans-serif;
    color: #333;
    text-align: center;
    -webkit-transform: rotate(-45deg);
    -moz-transform:    rotate(-45deg);
    -ms-transform:     rotate(-45deg);
    -o-transform:      rotate(-45deg);
    position: absolute;
    padding: 7px 0;
    top: 15px;
    left: -30px;
    width: 120px;
    background-color: #ff0000;
    color: #fff;
}
.sidebar .nav .nav-item .nav-link i.menu-icon {
    margin-left: 5px !important;
    width: 30px;
}
.sidebar .nav .nav-item {
    padding: 0 1.25rem !important;
}
@media (min-width: 992px) {
    .sidebar-icon-only .sidebar .nav .nav-item {
        position: relative;
        padding: 0 !important;
    }
}
.sidebar .nav .nav-item .nav-link i.menu-arrow {
    font-size: 1.5rem !important;
}
.student-id-card-demo {
    position: fixed;
    width: -webkit-fill-available;
    margin-right: 20px;
}

.action-column-dropdown-menu {
    left: -2rem !important;
}
.action-column-menu {

    /* position: absolute; */
    /* transform: translate(-50%, -50%); */

    /* position: absolute;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    z-index: 1000; */

    /* top: 50%;
    left: 50%; */
}

.action-td-cell {
    /* position: absolute; */
    /* border: 0px !important; */
    /* top: 40px; */
}

/* ==========================================================================
   SCOLARIUM THEME -- clean / neutral / Apple-inspired
   Global visual reskin layered on top of the existing admin theme.
   Pure CSS overrides only -- no HTML structure or JS touched.
   ========================================================================== */

:root {
    /* Palette lifted from Sneat (themeselection, MIT) compiled tokens --
       real published theme values, not hand-picked. */
    --sco-accent: #0062c4;
    --sco-accent-dark: #004f9e;
    --sco-accent-soft: rgba(0, 98, 196, 0.09);
    --sco-success: #71DD37;
    --sco-danger: #FF3E1D;
    --sco-warning: #FFAB00;
    --sco-info: #03C3EC;
    --sco-sidebar-bg: #FFFFFF;
    --sco-sidebar-text: #566A7F;
    --sco-sidebar-hover: rgba(0, 98, 196, 0.08);
    --sco-sidebar-active: var(--sco-accent);
    --sco-surface: #FFFFFF;
    --sco-bg: #F5F5F9;
    --sco-border: rgba(0, 0, 0, 0.07);
    --sco-text: #1D1D1F;
    --sco-text-muted: #6E6E73;
    --sco-radius: 8px;
    --sco-radius-sm: 6px;
    --sco-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    --sco-transition: all 0.18s ease;
}

/* Avatar icon badge + soft tinted "label" background, matching Sneat's
   real .avatar / .bg-label-* pattern (color-mix with graceful fallback). */
.sco-avatar {
    width: 42px;
    height: 42px;
    border-radius: var(--sco-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.sco-avatar.bg-label-primary { background: var(--sco-accent-soft); color: var(--sco-accent); }
.sco-avatar.bg-label-info    { background: rgba(3, 195, 236, 0.09); color: var(--sco-info); }
.sco-avatar.bg-label-success { background: rgba(113, 221, 55, 0.12); color: #4C9A19; }
.sco-avatar.bg-label-warning { background: rgba(255, 171, 0, 0.12); color: #B57600; }
.sco-avatar.bg-label-danger  { background: rgba(255, 62, 29, 0.10); color: var(--sco-danger); }

/* Stat card text hierarchy (label / big value / small info line) */
.sco-stat-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--sco-text-muted);
    margin-bottom: 0.35rem;
}

.sco-stat-value {
    font-size: 1.9rem !important;
    font-weight: 700 !important;
    color: var(--sco-text);
    margin-bottom: 0.35rem;
    letter-spacing: -0.02em;
}

.sco-stat-info {
    font-size: 0.8rem;
    color: var(--sco-text-muted);
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body,
.content-wrapper,
.form-control,
.btn,
.table {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

body {
    background:
        radial-gradient(1200px 500px at 100% 0%, rgba(91, 79, 233, 0.07), transparent 60%),
        radial-gradient(900px 400px at 0% 100%, rgba(58, 176, 255, 0.05), transparent 60%),
        var(--sco-bg) !important;
    background-attachment: fixed !important;
    color: var(--sco-text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.page-title {
    font-weight: 600 !important;
    color: var(--sco-text);
    letter-spacing: -0.01em;
}

/* ---------- Page fade-in (subtle) ---------- */
@keyframes scoFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* fill-mode "backwards" (not "both"/"forwards"): once the animation ends,
   the element must fall back to its own natural styles with NO lingering
   transform. A transform left in place by animation-fill-mode:forwards
   creates a new stacking context, which breaks any position:fixed modal
   nested inside (its containing block becomes this element instead of the
   viewport) -- that's what made the bank-transfer approve/reject modals
   unclickable (the backdrop paints above the modal instead of below it). */
.content-wrapper > * {
    animation: scoFadeIn 0.35s ease backwards;
}

/* Belt-and-braces on top of the fill-mode fix above: while any Bootstrap
   modal is open (body.modal-open), fully disable this animation on the
   page behind it. A running/animating ancestor is still capable of
   momentarily creating its own stacking context/repaint during the ~0.35s
   window even with fill-mode fixed, and modals can open before that
   window elapses (e.g. a second modal opened right after the page loads,
   or after an AJAX table refresh re-triggers the animation on new rows).
   Zero risk while a modal is open beats chasing every edge case. */
body.modal-open .content-wrapper > * {
    animation: none !important;
}

/* ---------- Sidebar ----------
   Spacing/typography values below are lifted from Sneat's compiled
   core.css (menu-link: 15px font, 42px min-height, 6px radius, 16px
   horizontal margin) rather than guessed. */
body:not(.sidebar-icon-only) .navbar-brand-wrapper {
    justify-content: flex-start !important;
    padding-left: 1.25rem !important;
}

/* .navbar-brand (not just its wrapper) is a fixed-width, text-align:center
   box in the base theme -- it was re-centering the 140px logo image inside
   its own ~240px width even after the wrapper was left-aligned. */
body:not(.sidebar-icon-only) .navbar-brand-wrapper .navbar-brand.brand-logo {
    width: auto !important;
    text-align: left !important;
    margin: 0 !important;
}

/* Collapsed sidebar mini-logo: base theme constrains it to 20x28px, which
   turns any detailed mark (mascot, multi-shape logo) into an unrecognizable
   smudge. Give it real room in the 70px-wide collapsed rail. */
.brand-logo-mini img {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    object-fit: contain;
}

.sidebar,
.sidebar-offcanvas {
    background: var(--sco-sidebar-bg) !important;
    border-right: 1px solid var(--sco-border) !important;
    padding-top: 4px;
}

/* The base theme gives .sidebar .nav a fixed max-height of
   calc(100vh - 70px), assuming the nav starts right below the top navbar.
   In reality the search box sits above it, pushing the nav down by another
   ~85px -- so that fixed max-height ran the nav's own bottom edge past the
   viewport, permanently hiding the last few menu items (Database Backup)
   no matter how far you scrolled. Switch to flexbox so the nav always
   fills exactly whatever space is actually left, regardless of the search
   box's height. */
@media (min-width: 992px) {
    .sidebar-fixed .sidebar {
        display: flex !important;
        flex-direction: column;
        height: calc(100vh - 70px) !important;
    }

    .sidebar-fixed .sidebar .sidebar-search {
        flex-shrink: 0;
    }

    .sidebar-fixed .sidebar .nav {
        max-height: none !important;
        flex: 1 1 auto;
        overflow-y: auto;
    }
}

.sidebar .nav-item {
    margin: 2px 0;
    background: transparent !important;
    width: 100%;
}

/* .sidebar .nav .nav-item (legacy pre-reskin rule, line ~231) has higher
   specificity than a plain .sidebar .nav-item selector and was forcing
   1.25rem of side padding on every row, which kept the hover/active
   background from ever reaching the sidebar's edges. Must be overridden
   at matching specificity. */
.sidebar .nav .nav-item {
    padding: 0 !important;
}

.sidebar .nav .nav-item .nav-link i.menu-icon {
    margin-left: 0 !important;
    width: 20px;
}

.sidebar .nav-item.active {
    background: transparent !important;
}

.sidebar .nav-item .nav-link {
    color: var(--sco-sidebar-text) !important;
    border-radius: 0;
    margin: 0;
    width: 100%;
    padding: 0.6rem 1.25rem !important;
    min-height: 42px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar .nav-item .nav-link .menu-title {
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.sidebar .nav.sub-menu .nav-item .nav-link {
    min-height: 36px;
    font-size: 0.875rem;
    padding-left: 3.25rem !important;
}

.sidebar .nav-item .nav-link:hover {
    background: var(--sco-sidebar-hover) !important;
    color: var(--sco-accent) !important;
}

.sidebar .nav-item.active > .nav-link,
.sidebar .nav-item .nav-link.active {
    background: var(--sco-sidebar-active) !important;
    color: #fff !important;
    font-weight: 600;
}

/* The base theme colors the active item's label with var(--theme-color),
   which is the school's configured primary color -- injected inline from
   system_settings and often identical to our own --sco-accent used for the
   active row's background. Same color text-on-background made it invisible.
   Force white regardless of what --theme-color happens to be. */
.sidebar .nav-item.active > .nav-link .menu-title,
.sidebar .nav-item .nav-link.active .menu-title {
    color: #fff !important;
}

.sidebar .nav-item .nav-link .menu-icon,
.sidebar .nav-item .nav-link i {
    color: inherit !important;
    font-size: 1.1rem;
    width: 20px;
    flex-shrink: 0;
    text-align: center;
    margin-right: 0.65rem;
    opacity: 0.9;
}

/* Collapsed sidebar (icon-only) mode: hover/active must fill the full
   collapsed-width square, and the icon must sit dead-center in it. */
.sidebar-icon-only .sidebar .nav-item .nav-link {
    margin: 0 !important;
    padding: 0.6rem 0 !important;
    width: 100%;
    justify-content: center !important;
}

.sidebar-icon-only .sidebar .nav-item .nav-link i {
    margin-right: 0 !important;
}

/* Sidebar search */
.sidebar .sidebar-search {
    padding: 12px 16px 4px !important;
}

/* In collapsed (icon-only) mode the full search input has no room and was
   rendering as a crushed 40px box showing only the first letter of its
   placeholder ("S..."). Hide it while collapsed -- hovering the sidebar
   already reveals the full search box via the hover-expand behavior. */
body.sidebar-icon-only .sidebar .sidebar-search {
    display: none !important;
}

.sidebar .menu-search {
    background: var(--sco-bg) !important;
    border: 1px solid var(--sco-border) !important;
    color: var(--sco-text) !important;
    border-radius: var(--sco-radius-sm) !important;
    font-size: 0.875rem;
}

.sidebar .menu-search::placeholder {
    color: var(--sco-text-muted) !important;
}

.sidebar .menu-search:focus {
    background: #fff !important;
    border-color: var(--sco-accent) !important;
    box-shadow: 0 0 0 3px rgba(0, 98, 196, 0.15) !important;
    color: var(--sco-text) !important;
}

/* ---------- Top navbar ---------- */
.navbar.default-layout-navbar {
    background: var(--sco-surface) !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--sco-border) !important;
}

.navbar-nav-right > .nav-item {
    display: flex;
    align-items: center;
}

/* Session year select in the header (see the "Sélecteur d'année" work) */
.session-year-header-select {
    width: auto !important;
    min-width: 120px;
    border-radius: var(--sco-radius-sm) !important;
    border: 1px solid var(--sco-border) !important;
    color: var(--sco-text) !important;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Language switcher */
.sco-lang-toggle {
    display: flex !important;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 14px !important;
    border-radius: 999px;
    border: 1px solid var(--sco-border);
    color: var(--sco-text-muted) !important;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    transition: var(--sco-transition);
}

.sco-lang-toggle:hover {
    background: var(--sco-accent-soft);
    border-color: var(--sco-accent);
    color: var(--sco-accent) !important;
}

.sco-lang-toggle i.fa-globe {
    font-size: 0.95rem;
}

.sco-lang-toggle::after {
    display: none !important;
}

.sco-lang-menu {
    border: 1px solid var(--sco-border) !important;
    border-radius: var(--sco-radius) !important;
    box-shadow: var(--sco-shadow) !important;
    padding: 6px !important;
    min-width: 180px;
}

.sco-lang-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    border-radius: var(--sco-radius-sm) !important;
    padding: 10px 12px !important;
    min-height: 44px;
    color: var(--sco-text) !important;
    border-left: 3px solid transparent;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.sco-lang-item.active {
    border-left-color: var(--sco-accent);
    background: var(--sco-accent-soft);
}

.sco-lang-item:hover {
    background: var(--sco-accent-soft) !important;
    color: var(--sco-accent) !important;
}

.sco-lang-item-code {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--sco-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--sco-text-muted);
}

.sco-lang-item.active .sco-lang-item-code {
    background: var(--sco-accent);
    color: #fff;
}

.sco-lang-item-name {
    flex: 1;
    font-size: 0.9rem;
}

.sco-lang-item-check {
    display: none;
    color: var(--sco-accent);
    font-size: 0.8rem;
}

.sco-lang-item.active .sco-lang-item-check {
    display: block;
}

/* Profile menu */
.sco-profile-toggle {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 0 8px !important;
    border-radius: 999px;
    transition: var(--sco-transition);
}

.sco-profile-toggle:hover {
    background: var(--sco-bg);
}

.sco-profile-toggle .nav-profile-img img {
    border: 2px solid var(--sco-border);
}

.sco-profile-toggle::after {
    display: none !important;
}

.sco-profile-menu {
    border: 1px solid var(--sco-border) !important;
    border-radius: var(--sco-radius) !important;
    box-shadow: var(--sco-shadow) !important;
    padding: 6px !important;
    min-width: 200px;
}

.sco-profile-menu .dropdown-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    border-radius: var(--sco-radius-sm) !important;
    padding: 9px 12px !important;
    color: var(--sco-text) !important;
    font-size: 0.9rem;
    white-space: nowrap;
}

.sco-profile-menu .dropdown-item i {
    width: 16px;
    text-align: center;
    color: var(--sco-text-muted);
}

.sco-profile-menu .dropdown-item:hover {
    background: var(--sco-accent-soft) !important;
    color: var(--sco-accent) !important;
}

.sco-profile-menu .dropdown-item:hover i {
    color: var(--sco-accent);
}

.sco-profile-menu .sco-signout:hover {
    background: rgba(255, 62, 29, 0.08) !important;
    color: var(--sco-danger) !important;
}

.sco-profile-menu .sco-signout:hover i {
    color: var(--sco-danger);
}

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--sco-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 24px rgba(31, 33, 64, 0.06) !important;
    transition: var(--sco-transition);
}

.card:hover {
    box-shadow: 0 10px 32px rgba(31, 33, 64, 0.10) !important;
    transform: translateY(-1px);
}

/* This is the real cause of the "tilting"/unclickable modal reported on
   payment settings: the mouse stays resting over the background .card
   (right where the Edit button was clicked, under the modal backdrop) and
   its hover transform keeps toggling every animation frame -- lifting the
   card 1px shifts it out from under the cursor, which un-hovers it,
   dropping it back down, which re-hovers it, forever, for as long as the
   modal stays open. Disable the hover-lift globally while any modal is
   open; the card is behind a backdrop anyway, nobody can see it "lift". */
body.modal-open .card:hover {
    transform: none !important;
    box-shadow: 0 4px 24px rgba(31, 33, 64, 0.06) !important;
}

.card-title {
    font-size: 1rem !important;
}

/* Stat summary cards: bigger numbers, more breathing room */
.custom-card-body {
    padding: 1.75rem !important;
}

/* Card titles use h3 or h4 depending on the (legacy) markup of each
   dashboard widget -- force both to the same small size regardless of
   the heading tag's own default font-size. */
h3.card-title,
h4.card-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
}


/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--sco-radius-sm) !important;
    font-weight: 500 !important;
    transition: var(--sco-transition) !important;
    border: none;
}

.btn-theme,
.btn-primary {
    background: var(--sco-accent) !important;
    color: #fff !important;
}

.btn-theme:hover,
.btn-primary:hover {
    background: var(--sco-accent-dark) !important;
}

.btn-gradient-info,
.btn-gradient-primary {
    background: var(--sco-accent) !important;
    color: #fff !important;
}

.btn-gradient-success,
.btn-gradient-dark {
    background: var(--sco-success) !important;
    color: #fff !important;
}

/* ---------- Badges / pills ---------- */
.badge {
    border-radius: 999px !important;
    padding: 0.35em 0.85em !important;
    font-weight: 500 !important;
}

.badge-success { background: rgba(31, 164, 99, 0.12) !important; color: var(--sco-success) !important; }
.badge-danger  { background: rgba(224, 72, 62, 0.12) !important; color: var(--sco-danger) !important; }
.badge-warning { background: rgba(185, 119, 14, 0.12) !important; color: var(--sco-warning) !important; }
.badge-info    { background: var(--sco-accent-soft) !important; color: var(--sco-accent) !important; }

/* ---------- Tables ---------- */
.table thead th {
    background: transparent !important;
    color: var(--sco-text-muted) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--sco-border) !important;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.table tbody tr {
    transition: var(--sco-transition);
}

.table tbody tr:hover {
    background: rgba(0, 0, 0, 0.02) !important;
}

/* ---------- Forms ---------- */
.form-control,
.select2-selection {
    border-radius: var(--sco-radius-sm) !important;
    border: 1px solid var(--sco-border) !important;
    transition: var(--sco-transition) !important;
}

.form-control:focus {
    border-color: var(--sco-accent) !important;
    box-shadow: 0 0 0 3px var(--sco-accent-soft) !important;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 999px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- Links ---------- */
.text-theme,
a.text-theme {
    color: var(--sco-accent) !important;
}

/* ---------- Modals ---------- */
.modal-content {
    border: none !important;
    border-radius: var(--sco-radius) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16) !important;
}

/* ---------- Dashboard summary cards: fix rigid 20%-width grid that
   overflows once the sidebar eats into the available width; let cards
   wrap based on real available space instead of raw viewport size. ---------- */
.col-md-2-4 {
    flex: 1 1 210px !important;
    min-width: 210px !important;
    max-width: 100% !important;
}

/* End Scolarium Theme */

.dropdown .dropdown-menu .dropdown-item:hover {
    background-color: #007bff !important;
    color: #fff !important;
}

/* Overrides the rule above for the redesigned menus specifically -- same
   specificity (4 class-level selectors each), so source order (this comes
   after) decides the winner instead of an invalid :not() trick. */
.sco-profile-menu.dropdown-menu .dropdown-item:hover {
    background: var(--sco-accent-soft) !important;
    color: var(--sco-accent) !important;
}

.sco-profile-menu.dropdown-menu .sco-signout:hover {
    background: rgba(255, 62, 29, 0.08) !important;
    color: var(--sco-danger) !important;
}

.sco-lang-menu.dropdown-menu .dropdown-item.sco-lang-item:hover {
    background: var(--sco-accent-soft) !important;
    color: var(--sco-accent) !important;
}

/* Bootstrap-table's default "Loading, please wait ." overlay has no
   font-size of its own -- it was inheriting an oversized value, making it
   look huge on every single table in the app while data loads. */
.fixed-table-loading .loading-wrap,
.fixed-table-loading .loading-wrap .loading-text {
    font-size: 0.9rem !important;
    color: var(--sco-text-muted) !important;
}

/* This spinner's dot-pulse animation runs forever, even while the overlay
   itself is invisible (opacity:0) between loads -- every bootstrap-table
   on a page keeps at least one of these looping in the background always.
   That's wasted repaint work, and on pages with a modal (payment settings'
   "Comptes Bancaires" table) it was frequent enough to make Chrome briefly
   shift layout mid-frame, which is what made the bank-account edit modal
   flicker/refuse clicks. Pause it whenever the overlay isn't actually
   shown ("open") -- no visual difference, since it's invisible anyway. */
.fixed-table-loading:not(.open) .animation-wrap,
.fixed-table-loading:not(.open) .animation-dot {
    animation-play-state: paused !important;
}

/* ---------- Table pagination bar (every bootstrap-table on the site) ----------
   Applied globally instead of per-page: the default toolbar/pagination
   buttons and the "rows per page" dropdown were oversized, plain grey
   Bootstrap defaults on every single list page in the app. */
.fixed-table-toolbar .btn-secondary,
.fixed-table-pagination .btn-secondary {
    border-radius: 8px !important;
    border: 1px solid var(--sco-border) !important;
    background: #fff !important;
    color: var(--sco-text-muted) !important;
    box-shadow: none !important;
}
.fixed-table-toolbar .btn-secondary:hover,
.fixed-table-pagination .btn-secondary:hover {
    background: #f1f5fb !important;
    color: var(--sco-accent) !important;
}
.fixed-table-toolbar .dropdown-menu,
.fixed-table-pagination .dropdown-menu {
    border-radius: 8px !important;
    border: 1px solid var(--sco-border) !important;
}

/* "Rows per page" dropdown button: was 42px tall / 105px wide just to
   show a 2-digit number -- shrink it down to something proportionate. */
.fixed-table-pagination .page-list .btn-secondary {
    padding: 4px 10px !important;
    font-size: 0.8rem !important;
    min-height: 0 !important;
}
.fixed-table-pagination .page-list .page-size {
    display: inline;
}

/* Page-number buttons (1, 2, 3 ... ›): match the app's own accent color
   instead of Bootstrap's default blue/purple, and tone down the borders. */
.fixed-table-pagination .pagination .page-link {
    border-radius: 8px !important;
    margin: 0 2px;
    border: 1px solid var(--sco-border) !important;
    color: var(--sco-text) !important;
    font-size: 0.85rem;
    padding: 0.4rem 0.7rem;
}
.fixed-table-pagination .pagination .page-item.active .page-link {
    background: var(--sco-accent) !important;
    border-color: var(--sco-accent) !important;
    color: #fff !important;
}
.fixed-table-pagination .pagination .page-link:hover {
    background: #f1f5fb !important;
    color: var(--sco-accent) !important;
}
.fixed-table-pagination .pagination .page-item.disabled .page-link {
    color: #b7c0cd !important;
    background: #fff !important;
}