/* ==========================================================================
   Preskool theme for institutx_app — built to Preskool's REAL design tokens:
     font Inter · primary #3D5EE1 · light sidebar #F8FAFC · white topbar
     content bg #F4F6FA · text #6A7287 / headings #202C4B · border #E9EDF4
     cards radius 16px, shadow 0 1px 2px rgba(16,24,40,.04)
   Loaded AFTER Velzon's app.min.css. Each school's primary colour (--vz-primary)
   still drives the accent so per-school branding flows through the layout.
   Remove the <link> in partials/head-css.php to fully revert.
   ========================================================================== */

:root {
    --pk-primary:  var(--vz-primary, #3D5EE1);
    --pk-primary-rgb: var(--vz-primary-rgb, 61, 94, 225);
    --pk-ink:      #202C4B;   /* headings / emphasis */
    --pk-text:     #6A7287;   /* body text */
    --pk-muted:    #8591A6;
    --pk-border:   #E9EDF4;
    --pk-bg:       #F4F6FA;   /* content area */
    --pk-surface:  #FFFFFF;
    --pk-nav-bg:   #F8FAFC;   /* sidebar */
    --pk-nav-text: #515B73;
    --pk-success:  #1ABE17; --pk-warning: #EAB300; --pk-danger: #E82646; --pk-info: #0F65CD;
    --pk-radius:   16px;
    --pk-radius-sm: 10px;
    --pk-shadow:   0 1px 2px rgba(16, 24, 40, .04);
    --pk-shadow-lift: 0 14px 34px -14px rgba(16, 24, 40, .22);

    /* Velzon body token → Preskool content background */
    --vz-body-bg: var(--pk-bg);
}

/* ── Typography / base ────────────────────────────────────────────────── */
/* Velzon + Bootstrap resolve fonts through CSS variables (headings, inputs,
   the sidebar all read them) — override the variables at the root so Inter
   reaches everything, then pin the common elements explicitly as a backstop.
   <i> icons are NOT targeted, so Remix/Boxicons keep their icon fonts. */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
    --pk-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --vz-font-sans-serif:   var(--pk-font);
    --bs-font-sans-serif:   var(--pk-font);
    --bs-body-font-family:  var(--pk-font);
    --vz-body-font-family:  var(--pk-font);
}
html, body,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
input, button, select, textarea, optgroup,
.btn, .form-control, .form-select, .form-label, .form-check-label,
.table, .dropdown-menu, .modal, .tooltip, .popover,
.navbar-menu, .app-menu, .navbar-header, .page-title-box, .breadcrumb,
.card, .badge, .nav, .alert, .list-group {
    font-family: var(--pk-font) !important;
}
body { background: var(--pk-bg) !important; color: var(--pk-text); font-size: 14px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .card-title, .fw-semibold, .fw-bold { color: var(--pk-ink); }
a { color: var(--pk-primary); text-decoration: none; }
a:hover { color: var(--pk-primary); }
.text-muted { color: var(--pk-muted) !important; }
.main-content, .page-content { background: var(--pk-bg); }

/* ── Page title / breadcrumb ──────────────────────────────────────────── */
/* Velzon bleeds this bar 1.5rem past the content on both sides (negative side
   margins + matching padding). Ours is transparent, so drop the side bleed and
   let it align with the page content/cards; keep the -23px top pull so it sits
   at the same height under the topbar. */
.page-title-box { margin: -23px 0 1.5rem; padding: 4px 0 20px; border: 0 !important; background: transparent !important; }
.page-title-box h4 { font-weight: 700; font-size: 20px; color: var(--pk-ink); letter-spacing: -.1px; }
.page-title-box .breadcrumb { font-size: 12.5px; }
.page-title-box .breadcrumb-item a { color: var(--pk-muted); }
.page-title-box .breadcrumb-item.active { color: var(--pk-ink); }

/* ── Cards ────────────────────────────────────────────────────────────── */
.card {
    /* Drive Bootstrap's own card radius tokens so EVERY inner element
       (card-body/header/footer, img-top, pseudo-elements) rounds to match —
       otherwise inner backgrounds keep Velzon's small radius and poke out
       past the 16px border as square corners. */
    --bs-card-border-radius: var(--pk-radius);
    --bs-card-inner-border-radius: calc(var(--pk-radius) - 1px);
    --bs-card-bg: var(--pk-surface);
    --bs-card-border-color: var(--pk-border);
    background: var(--pk-surface);
    border: 1px solid var(--pk-border) !important;
    border-radius: var(--pk-radius) !important;   /* all four corners, like Preskool */
    box-shadow: var(--pk-shadow);
    margin-bottom: 24px;
    background-clip: border-box;
    /* "Bubble" effect: a soft pastel circle peeking from the top-right corner.
       Painted as an SVG on the card's OWN background (rounded corners clip it;
       no overflow:hidden, so dropdown menus inside cards keep working). The SVG
       is sized as a % of the card's WIDTH, so the bubble scales with the card:
       small on stat tiles, large on big content cards. Colour comes from the
       --pk-bubble variable, cycled per column below for a varied palette. */
    --pk-bubble: var(--pk-bubble-blue);
    background-image: var(--pk-bubble);
    background-repeat: no-repeat;
    background-size: 62% auto;
    background-position: right top;
}
/* Pastel bubble palette (circle hangs off the top-right corner of a 100×100 box). */
:root {
    /* Kept deliberately faint (≈ half the original strength) so the bubble reads
       as a soft wash behind the content instead of competing with it. */
    --pk-bubble-blue:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='84' cy='16' r='34' fill='%233d5ee1' fill-opacity='.052'/%3E%3C/svg%3E");
    --pk-bubble-green:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='84' cy='16' r='34' fill='%231dbf73' fill-opacity='.056'/%3E%3C/svg%3E");
    --pk-bubble-purple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='84' cy='16' r='34' fill='%237c3aed' fill-opacity='.05'/%3E%3C/svg%3E");
    --pk-bubble-amber:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='84' cy='16' r='34' fill='%23f5b400' fill-opacity='.075'/%3E%3C/svg%3E");
    --pk-bubble-pink:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='84' cy='16' r='34' fill='%23ef3b5a' fill-opacity='.05'/%3E%3C/svg%3E");
    --pk-bubble-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='94' r='30' fill='%23ef3b5a' fill-opacity='.04'/%3E%3C/svg%3E");
}
/* Vary the colour across cards in a row (cards live in Bootstrap columns). */
[class*="col-"]:nth-child(5n+2) > .card { --pk-bubble: var(--pk-bubble-green); }
[class*="col-"]:nth-child(5n+3) > .card { --pk-bubble: var(--pk-bubble-purple); }
[class*="col-"]:nth-child(5n+4) > .card { --pk-bubble: var(--pk-bubble-amber); }
[class*="col-"]:nth-child(5n+5) > .card { --pk-bubble: var(--pk-bubble-pink); }
/* Larger content cards (ones with a header) also get the reference's second
   bubble rising from the bottom centre. */
.card:has(> .card-header) {
    background-image: var(--pk-bubble), var(--pk-bubble-bottom);
    background-size: 62% auto, 48% auto;
    background-position: right top, center bottom;
}
/* ── Coloured cards (solid bg-* or an inline gradient + .card-body.text-white) ──
   White text throughout (the global dark-heading rule must not win here) and a
   WHITE bubble instead of the pastel one. KPI cards set their gradient inline,
   which overrides the card's background-image, so the bubble is painted on the
   card-body instead — it sits above the gradient, below the content, and is
   clipped by the body's inner radius. */
:root {
    /* Soft filled white circle off the top-right corner (no ring — it distracted). */
    --pk-bubble-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='86' cy='10' r='36' fill='%23ffffff' fill-opacity='.16'/%3E%3C/svg%3E");
}
/* ── KPI cards ("Top Student" style): solid white title badge + translucent pills ── */
/* Badge: one line, truncates rather than wrapping into a two-line pill; must not
   stretch as a flex-column item. Icon spacing via margin (no gap on inline-block). */
.kpi-badge { display:inline-block; align-self:flex-start; max-width:100%; white-space:nowrap; overflow:hidden;
             text-overflow:ellipsis; padding:5px 12px; border-radius:999px; background:#fff;
             color:var(--kpi, var(--pk-primary)); font-size:12px; font-weight:700; letter-spacing:.2px;
             line-height:1.2; box-shadow:0 6px 14px -8px rgba(0,0,0,.35); }
.kpi-badge i { font-size:14px; vertical-align:-2px; margin-right:6px; }
.kpi-caption { font-size:12px; }
/* Faint watermark icon pinned top-right so it never squeezes the badge row. */
.kpi-watermark { position:absolute; top:10px; right:14px; font-size:36px; opacity:.25; line-height:1; pointer-events:none; }
/* Pills: may wrap inside the card on small screens; single-line only from lg. */
.kpi-pill, a.kpi-pill, button.kpi-pill {
    display:inline-flex; align-items:center; gap:6px; max-width:100%; min-width:0; padding:6px 12px;
    border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); color:#fff;
    font-size:12px; font-weight:600; line-height:1.2; text-align:left; text-decoration:none; font-family:inherit; cursor:default; }
a.kpi-pill, button.kpi-pill { cursor:pointer; }
.kpi-pill:hover, a.kpi-pill:hover, button.kpi-pill:hover { color:#fff; }
a.kpi-pill:hover, button.kpi-pill:hover { background:rgba(255,255,255,.26); }
a.kpi-pill:focus-visible, button.kpi-pill:focus-visible { outline:0; box-shadow:0 0 0 3px rgba(255,255,255,.45); }
.kpi-pill i { font-size:14px; flex:0 0 auto; }
@media (min-width:992px){ .kpi-pill, a.kpi-pill, button.kpi-pill { white-space:nowrap; } }
/* Light-coloured KPI card (amber): dark ink, dark translucent pills, dark watermark —
   white text on amber fails contrast badly. */
.kpi-card--light .card-body { color:#1f2937; }
.kpi-card--light .kpi-caption { color:#3b2a00; }
.kpi-card--light .kpi-pill, .kpi-card--light a.kpi-pill, .kpi-card--light button.kpi-pill {
    color:#3b2a00; background:rgba(0,0,0,.10); border-color:rgba(0,0,0,.18); }
.kpi-card--light a.kpi-pill:hover, .kpi-card--light button.kpi-pill:hover { background:rgba(0,0,0,.16); color:#3b2a00; }
.kpi-card--light a.kpi-pill:focus-visible, .kpi-card--light button.kpi-pill:focus-visible { box-shadow:0 0 0 3px rgba(0,0,0,.25); }
.kpi-card--light .kpi-watermark { color:#000; opacity:.12; }
.card:is(.bg-primary, .bg-secondary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-dark) { --pk-bubble: var(--pk-bubble-white); }
.card > .card-body.text-white, .kpi-card--light > .card-body {
    background-image: var(--pk-bubble-white);
    background-repeat: no-repeat;
    background-size: 62% auto;
    background-position: right top;
}
.text-white :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .fw-bold, .fw-semibold, .card-title),
:is(.bg-primary, .bg-secondary, .bg-success, .bg-info, .bg-danger, .bg-dark) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .fw-bold, .fw-semibold, .card-title) {
    color: #fff;
}
.text-white .text-muted,
:is(.bg-primary, .bg-secondary, .bg-success, .bg-info, .bg-danger, .bg-dark) .text-muted { color: rgba(255, 255, 255, .78) !important; }
@media print { .card, .card-body { background-image: none !important; } }
/* Velzon's "card border effect" draws a 13px corner BRACKET on every card via
   .card::before (top-right) and .card::after (bottom-left) — the notch that
   showed at the corners. Velzon's own opt-out is .card-border-effect-none;
   apply that globally so cards are clean rounded rectangles like Preskool. */
.card::before, .card::after { display: none !important; content: none !important; }

/* Inner first/last children follow the card's corners. Use *-of-type on <div>
   (not :first/:last-child): the dashboard drag handle is a <span> appended as
   the card's last child, which would otherwise steal the bottom rounding. */
.card > div:first-of-type, .card > :first-child { border-top-left-radius: var(--bs-card-inner-border-radius); border-top-right-radius: var(--bs-card-inner-border-radius); }
.card > div:last-of-type,  .card > :last-child  { border-bottom-left-radius: var(--bs-card-inner-border-radius); border-bottom-right-radius: var(--bs-card-inner-border-radius); }
.card > .card-body { background-color: transparent; }   /* body never paints its own square corners */
.card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--pk-border);
    padding: 16px 20px;
    font-weight: 600;
    color: var(--pk-ink);
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0 !important;
}
.card .card-body { padding: 20px; }
.card .card-footer { background: transparent; border-top: 1px solid var(--pk-border); }
.card.shadow-none { box-shadow: none !important; }
/* Velzon coloured card headers (bg-success/bg-primary …) keep their colour but round nicely */
.card .card-header[class*="bg-"] { border-bottom: 0; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn { border-radius: 8px; font-weight: 500; padding: .5rem 1rem; transition: filter .15s ease, box-shadow .15s ease; }
.btn-primary, .btn-primary:focus { background: var(--pk-primary) !important; border-color: var(--pk-primary) !important; color: #fff !important; }
.btn-primary:hover { filter: brightness(.94); }
.btn-outline-primary { color: var(--pk-primary); border-color: var(--pk-primary); }
.btn-outline-primary:hover { background: var(--pk-primary); border-color: var(--pk-primary); color: #fff; }
.btn-light { background: #F4F6FA; border-color: var(--pk-border); color: var(--pk-ink); }
.btn-soft-primary { background: rgba(var(--pk-primary-rgb), .10); color: var(--pk-primary); border: 0; }
.btn-soft-primary:hover { background: var(--pk-primary); color: #fff; }
.btn-success { background: var(--pk-success); border-color: var(--pk-success); }
.btn-danger  { background: var(--pk-danger);  border-color: var(--pk-danger); }
.btn-warning { background: var(--pk-warning); border-color: var(--pk-warning); color: #fff; }
.btn-info    { background: var(--pk-info);    border-color: var(--pk-info); }
.btn-sm { border-radius: 7px; }

/* ── Forms ────────────────────────────────────────────────────────────── */
.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid var(--pk-border);
    color: var(--pk-ink);
    padding: .5rem .85rem;
    background: #fff;
}
.form-control::placeholder { color: #A7B0C2; }
.form-control:focus, .form-select:focus {
    border-color: var(--pk-primary);
    box-shadow: 0 0 0 3px rgba(var(--pk-primary-rgb), .15);
}
.form-label { font-weight: 500; font-size: 13.5px; color: var(--pk-ink); margin-bottom: .4rem; }
.input-group-text { border-radius: 8px; border-color: var(--pk-border); background: #F8FAFC; color: var(--pk-muted); }
.form-check-input:checked { background-color: var(--pk-primary); border-color: var(--pk-primary); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(var(--pk-primary-rgb), .15); border-color: var(--pk-primary); }
.form-switch .form-check-input:checked { background-color: var(--pk-primary); }

/* ── Tables ───────────────────────────────────────────────────────────── */
.table { --bs-table-bg: transparent; color: var(--pk-text); border-color: var(--pk-border); }
.table > :not(caption) > * > * { padding: .8rem .9rem; border-bottom-color: var(--pk-border); }
.table thead th, .table > thead > tr > th {
    background: #F8FAFC !important;
    color: var(--pk-ink) !important;
    font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0;
    border-bottom: 1px solid var(--pk-border) !important;
    white-space: nowrap;
}
.table-hover > tbody > tr:hover > * { background: #F8FAFC; --bs-table-accent-bg: transparent; }
.table td { vertical-align: middle; }
.table-light { --bs-table-bg: #F8FAFC; }
.table-bordered > :not(caption) > * > * { border-color: var(--pk-border); }

/* ── Badges ───────────────────────────────────────────────────────────── */
.badge { font-weight: 500; border-radius: 6px; padding: .4em .65em; font-size: 11.5px; }
.badge.bg-primary { background: var(--pk-primary) !important; }
.badge.bg-success { background: var(--pk-success) !important; }
.badge.bg-danger  { background: var(--pk-danger)  !important; }
.badge.bg-warning { background: var(--pk-warning) !important; color: #fff; }
.badge.bg-info    { background: var(--pk-info)    !important; }

/* ── Dropdowns / modals / tabs / alerts ───────────────────────────────── */
.dropdown-menu { border: 1px solid var(--pk-border); border-radius: 12px; padding: 8px;
                 box-shadow: var(--pk-shadow-lift); }
.dropdown-item { border-radius: 8px; padding: .5rem .75rem; color: var(--pk-text); }
.dropdown-item:hover, .dropdown-item:focus { background: #F4F6FA; color: var(--pk-ink); }
.modal-content { border: 0; border-radius: var(--pk-radius); box-shadow: var(--pk-shadow-lift); }
.modal-header { border-bottom: 1px solid var(--pk-border); padding: 18px 22px; }
.modal-title { color: var(--pk-ink); font-weight: 600; }
.modal-footer { border-top: 1px solid var(--pk-border); }
.nav-tabs { border-bottom: 1px solid var(--pk-border); }
.nav-tabs .nav-link { color: var(--pk-text); border: 0; border-bottom: 2px solid transparent; font-weight: 500; }
.nav-tabs .nav-link.active { color: var(--pk-primary); border-bottom-color: var(--pk-primary); background: transparent; }
.nav-pills .nav-link { border-radius: 8px; color: var(--pk-text); font-weight: 500; }
.nav-pills .nav-link.active { background: var(--pk-primary); color: #fff; }
.alert { border: 0; border-radius: 10px; }
.pagination .page-link { border-radius: 8px !important; margin: 0 2px; border: 1px solid var(--pk-border); color: var(--pk-text); }
.pagination .page-item.active .page-link { background: var(--pk-primary); border-color: var(--pk-primary); }
.progress { border-radius: 20px; background: #EEF1F6; }
.list-group-item { border-color: var(--pk-border); color: var(--pk-text); }

/* ── Topbar (white, hairline border) ─────────────────────────────────── */
[data-topbar="light"] { --vz-header-bg: #FFFFFF; }
#page-topbar, .navbar-header { background: #FFFFFF !important; border-bottom: 1px solid var(--pk-border); box-shadow: none !important; }
.navbar-header .btn-topbar, .topbar-user .btn { border-radius: 10px; }
.topbar-user { background: transparent !important; }

/* ── Sidebar (Preskool light nav) — set via Velzon's own menu variables ── */
[data-sidebar="light"] {
    --vz-vertical-menu-bg:                 var(--pk-nav-bg);
    --vz-vertical-menu-border-color:       var(--pk-border);
    --vz-vertical-menu-item-color:         var(--pk-nav-text);
    --vz-vertical-menu-item-hover-color:   var(--pk-primary);
    --vz-vertical-menu-item-active-color:  var(--pk-primary);
    --vz-vertical-menu-item-active-bg:     rgba(var(--pk-primary-rgb), .10);
    --vz-vertical-menu-sub-item-color:     var(--pk-text);
    --vz-vertical-menu-sub-item-hover-color:  var(--pk-primary);
    --vz-vertical-menu-sub-item-active-color: var(--pk-primary);
    --vz-vertical-menu-title-color:        var(--pk-ink);
}
[data-sidebar="light"] .app-menu, [data-sidebar="light"] .navbar-menu,
[data-sidebar="light"] #scrollbar { background: var(--pk-nav-bg) !important; border-right: 1px solid var(--pk-border); }
[data-sidebar="light"] .navbar-brand-box { background: var(--pk-nav-bg) !important; border-bottom: 1px solid var(--pk-border); }
.app-menu .navbar-nav .nav-link { border-radius: 8px; margin: 2px 12px; padding: .6rem .85rem;
                                  font-weight: 500; font-size: 14px; color: var(--pk-nav-text);
                                  transition: background .15s ease, color .15s ease; }
.app-menu .navbar-nav .nav-link i { font-size: 1.1rem; color: var(--pk-muted); }
.app-menu .navbar-nav .nav-link:hover { color: var(--pk-primary); background: rgba(var(--pk-primary-rgb), .06); }
.app-menu .navbar-nav .nav-link:hover i { color: var(--pk-primary); }
.app-menu .navbar-nav .nav-link.active, .app-menu .navbar-nav > li > .nav-link.active {
    background: rgba(var(--pk-primary-rgb), .10) !important; color: var(--pk-primary) !important; font-weight: 600; }
.app-menu .navbar-nav .nav-link.active i { color: var(--pk-primary) !important; }
/* Menu font: Velzon sets font-family ON the links (Saira / hkgrotesk), so a
   container-level rule never reaches them — pin Inter on the links directly. */
.navbar-menu .navbar-nav .nav-link, .app-menu .navbar-nav .nav-link,
.navbar-menu .navbar-nav .nav-sm .nav-link, .menu-title, .navbar-brand-box {
    font-family: var(--pk-font) !important;
}
/* Sub-menu indent: Velzon forces padding 0.55rem 1.5rem !important; override it
   and drop the extra left margin so sub-items sit closer to the parent. The
   dash marker (:before, left:2px) stays inside the reduced padding. */
.navbar-menu .navbar-nav .nav-sm .nav-link, .app-menu .navbar-nav .nav-sm .nav-link {
    margin: 1px 12px !important;
    padding: .5rem .75rem .5rem 1.6rem !important;
    font-size: 13.5px;
}
.menu-title { text-transform: uppercase; letter-spacing: .5px; font-size: 11px; font-weight: 600;
              color: var(--pk-ink); opacity: .55; padding: 14px 24px 6px; }

/* ── Misc ─────────────────────────────────────────────────────────────── */
/* ── School / branch switcher (sidebar brand box, Preskool style) ─────── */
.pk-brandbox { position: relative; z-index: 6; height: 70px; padding: 0 12px !important;
               display: flex; align-items: center; text-align: left !important; }
.pk-brandbox #vertical-hover { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); float: none; }
.pk-switcher { width: 100%; }
.pk-switcher__btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px;
                    border-radius: 10px; color: var(--pk-ink); text-decoration: none; line-height: 1.2; }
.pk-switcher__btn[data-bs-toggle]:hover { background: rgba(var(--pk-primary-rgb), .06); }
.pk-switcher__tile { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: #fff;
                     border: 1px solid var(--pk-border); display: grid; place-items: center; overflow: hidden;
                     font-weight: 700; font-size: 15px; color: var(--pk-primary); }
.pk-switcher__tile img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.pk-switcher__tile.sm { flex-basis: 34px; width: 34px; height: 34px; border-radius: 8px; font-size: 13px; }
.pk-switcher__meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pk-switcher__name { font-weight: 700; font-size: 14px; color: var(--pk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-switcher__sub { font-size: 12px; color: var(--pk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-switcher__chev { color: var(--pk-muted); font-size: 16px; flex: 0 0 auto; }
.pk-switcher__menu { width: 250px; padding: 8px; border-radius: 14px; margin-top: 6px !important; z-index: 1060; }
.pk-switcher__head { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
                     color: var(--pk-muted); padding: 6px 10px 8px; }
.pk-switcher__form { margin: 0; }
.pk-switcher__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0;
                     background: transparent; border-radius: 10px; text-align: left; color: var(--pk-ink);
                     font-family: var(--pk-font); cursor: pointer; }
.pk-switcher__item:hover { background: #F4F6FA; }
.pk-switcher__item.is-current { background: rgba(var(--pk-primary-rgb), .08); cursor: default; }
.pk-switcher__check { margin-left: auto; color: var(--pk-primary); font-size: 18px; }
.pk-switcher__foot { font-size: 11px; color: var(--pk-muted); padding: 8px 10px 4px;
                     border-top: 1px solid var(--pk-border); margin-top: 6px; }
/* Collapsed sidebar: tile only; expanded-on-hover and pinned modes show the text again. */
[data-sidebar-size="sm"] .pk-brandbox, [data-sidebar-size="sm-hover"] .pk-brandbox { padding: 0 !important; justify-content: center; }
[data-sidebar-size="sm"] .pk-switcher__btn, [data-sidebar-size="sm-hover"] .pk-switcher__btn { justify-content: center; padding: 6px; }
[data-sidebar-size="sm"] .pk-switcher__meta, [data-sidebar-size="sm"] .pk-switcher__chev,
[data-sidebar-size="sm-hover"] .pk-switcher__meta, [data-sidebar-size="sm-hover"] .pk-switcher__chev { display: none; }
[data-sidebar-size="sm-hover"] .navbar-menu:hover .pk-brandbox { padding: 0 12px !important; justify-content: flex-start; }
[data-sidebar-size="sm-hover"] .navbar-menu:hover .pk-switcher__btn { justify-content: flex-start; padding: 6px 8px; }
[data-sidebar-size="sm-hover"] .navbar-menu:hover .pk-switcher__meta, [data-sidebar-size="sm-hover-active"] .pk-switcher__meta { display: flex; }
[data-sidebar-size="sm-hover"] .navbar-menu:hover .pk-switcher__chev, [data-sidebar-size="sm-hover-active"] .pk-switcher__chev { display: inline; }

/* ── Flatpickr (date picker): Velzon hard-codes its default purple #8c68cd into the
   header/weekdays/today/selected rules, so the calendar ignored the school colour.
   Re-key everything on --pk-primary (the calendar is appended to <body>, so the
   per-school :root variables reach it). ── */
.flatpickr-months, .flatpickr-weekdays, span.flatpickr-weekday,
.flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--pk-primary) !important; color: #fff !important; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month, .flatpickr-current-month input.cur-year,
.flatpickr-current-month .numInputWrapper span.arrowUp:after { color: #fff !important; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: #fff !important; fill: #fff !important; }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: #fff !important; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: rgba(255, 255, 255, .75) !important; }
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--pk-primary) !important; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover,
.flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus {
    background: var(--pk-primary) !important; border-color: var(--pk-primary) !important; color: #fff !important; }
.flatpickr-day.today { border-color: var(--pk-primary) !important; background-color: rgba(var(--pk-primary-rgb), .10) !important; color: var(--pk-ink) !important; }
.flatpickr-day.today:hover, .flatpickr-day.today:focus { background: var(--pk-primary) !important; border-color: var(--pk-primary) !important; color: #fff !important; }
.flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.inRange { background: rgba(var(--pk-primary-rgb), .12) !important; border-color: transparent !important; box-shadow: none !important; }
.flatpickr-time input:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus { background: rgba(var(--pk-primary-rgb), .08) !important; }
.flatpickr-calendar { border-radius: 12px; border: 1px solid var(--pk-border); box-shadow: var(--pk-shadow-lift) !important; }

.avatar-title { border-radius: 10px; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--pk-border) !important; }
hr { border-color: var(--pk-border); opacity: 1; }

/* Keep print layouts clean. */
@media print { body { background: #fff !important; } .card { box-shadow: none; } }