/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: support@themesbrand.com
File: Custom Css File
*/

/* SweetAlert2 — always render above sidebar/header */
.swal2-container {
    z-index: 99999 !important;
}
/* Toast-style: compact, top-end, no backdrop overlay */
.swal2-container.swal2-top-end,
.swal2-container.swal2-top-right {
    top: 16px !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    pointer-events: none;
}
.swal2-container.swal2-top-end .swal2-popup,
.swal2-container.swal2-top-right .swal2-popup {
    pointer-events: all;
    max-width: 360px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

/* ── Global Badge White Text ──────────────────────────────── */
.badge {
    color: #fff !important;
}
/* Keep light-background badges readable */
.badge.bg-light,
.badge.text-dark {
    color: #212529 !important;
}

/* ── Remove non-brand gradients from cards ─────────────────── */
/* Override inline gradient backgrounds defined per-template */
.stats-card {
    background: var(--vz-card-bg, #fff) !important;
    border-left: 4px solid #d1aa66;
    color: inherit !important;
}
.account-info-card {
    background: #0a0e17 !important;
}
.contact-stats {
    background: #0a0e17 !important;
}
.storage-usage {
    background: #d1aa66 !important;
}
.valedictorian-card {
    background: linear-gradient(135deg, #0a0e17 0%, #d1aa66 100%) !important;
    color: #fff !important;
}

/* ── Page Content & Banner Spacing ──────────────────────────── */
.page-content { padding-top: 70px !important; }
.page-title-box {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    border-bottom: 1px solid var(--vz-border-color, #e9ecef);
}
.banner-slider-row { margin-top: 0 !important; }

/* Uniform vertical rhythm between card rows */
.row.g-3 { margin-bottom: 0; }
.row.g-3 + .row.g-3,
.row.g-4 + .row.g-4 { margin-top: 1.25rem !important; }
.row.g-3 + .row.mt-3,
.row.mt-3 { margin-top: 1.25rem !important; }

/* Card body padding — slightly more breathing room */
.card .card-body { padding: 1.25rem 1.25rem; }
.card .card-header { padding: 0.875rem 1.25rem; }

/* KPI / stat cards: compact header gap */
.kpi-card .card-body,
.res-kpi .card-body {
    padding: 1rem 1.125rem;
}

/* Banner slider: breathing room below + gap before first content row */
.banner-slider-row { margin-bottom: 0.75rem !important; }
.banner-slider-row + .row { margin-top: 0 !important; }

/* Hide back-to-top on chat pages (send button area conflict) */
body[data-page="chat"] #back-to-top { display: none !important; }

/* Back-to-top: small, subtle, non-intrusive */
#back-to-top {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 0.8rem !important;
    opacity: 0.45;
    transition: opacity 0.2s ease;
    bottom: 18px !important;
    right: 14px !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
    padding: 0 !important;
    line-height: 30px !important;
    border-radius: 50% !important;
}
#back-to-top:hover { opacity: 0.9; background-color: #495057 !important; border-color: #495057 !important; }

/* UGC Spinner Component */
.ugc-spin-wrap { position: relative; min-height: 80px; }
.ugc-spinner-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.75); z-index: 10;
    border-radius: inherit;
}
.ugc-spinner-ring {
    width: 36px; height: 36px;
    border: 3px solid #f0f0f0;
    border-top-color: #d1aa66;
    border-radius: 50%;
    animation: ugc-spin 0.7s linear infinite;
}
.ugc-spinner-ring.ugc-spinner-sm { width: 22px; height: 22px; border-width: 2px; }
.ugc-spinner-ring.ugc-spinner-lg { width: 52px; height: 52px; border-width: 4px; }
@keyframes ugc-spin { to { transform: rotate(360deg); } }

/* Skeleton loader */
.ugc-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: ugc-shimmer 1.4s infinite;
    border-radius: 4px;
}
@keyframes ugc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (max-width: 768px) {
    .banner-slider-row { margin-bottom: 1rem !important; }
    .page-title-box { padding-bottom: 0.25rem !important; margin-bottom: 0.5rem !important; }
}

/* ── UGC Global Button Overrides ──────────────────────────────── */
/* Primary action buttons → UGC gold */
.btn-primary {
    background-color: #d1aa66 !important;
    border-color: #d1aa66 !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #b8913f !important;
    border-color: #b8913f !important;
    color: #fff !important;
}
/* btn-gradient (used across several dashboard templates) */
.btn-gradient {
    background: #d1aa66 !important;
    border: none !important;
    color: #fff !important;
}
.btn-gradient:hover, .btn-gradient:focus {
    background: #b8913f !important;
    color: #fff !important;
}
/* btn-soft-primary → light gold tint */
.btn-soft-primary {
    background-color: rgba(209,170,102,.15) !important;
    border-color: transparent !important;
    color: #b8913f !important;
}
.btn-soft-primary:hover {
    background-color: #d1aa66 !important;
    color: #fff !important;
}
.main-content{transition:none !important;}.page-content>.container-fluid>.container-fluid{padding-left:0!important;padding-right:0!important;}
/* ════════════════════════════════════════════════════════════════════════
   UGC REFRESH — global Velzon/Bootstrap reskin (gold + neutral, shadcn-ish).
   Loads after app.min.css (this is the universal custom layer) so it wins.
   Modernizes EVERY existing page with ZERO template changes. Conservative on
   contrast: gold is used as fill (with dark ink text) and as accent — never
   as body/link text on white (that uses a darker bronze).
   ════════════════════════════════════════════════════════════════════════ */
:root,
[data-bs-theme="light"]{
  --vz-primary:#d1aa66; --vz-primary-rgb:209,170,102;
  --ugc-ink:#11151f; --ugc-gold:#d1aa66; --ugc-gold-deep:#9a7a2c;
  --vz-body-bg:#f7f8fa; --vz-body-color:#2b3140; --vz-secondary-color:#6b7280;
  --vz-border-color:#e7e9ee; --vz-card-bg:#ffffff; --vz-heading-color:#151a23;
  --vz-link-color:#9a7a2c; --vz-link-color-hover:#806223;
  --vz-border-radius:.55rem; --vz-border-radius-sm:.4rem;
  --vz-border-radius-lg:.8rem; --vz-border-radius-xl:1rem;
  --vz-body-font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
body{font-family:var(--vz-body-font-family);letter-spacing:-.005em;}
h1,h2,h3,h4,h5,h6,.fw-semibold,.fw-bold{font-family:"Plus Jakarta Sans",var(--vz-body-font-family);letter-spacing:-.02em;}
.text-primary{color:var(--ugc-gold-deep)!important;}
a{text-decoration:none;}

/* Cards */
.card{border:1px solid var(--vz-border-color);border-radius:var(--vz-border-radius-lg);box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.03);}
.card .card-header{background:transparent;border-bottom:1px solid var(--vz-border-color);padding-top:1rem;padding-bottom:1rem;}

/* Buttons — gold primary with ink text */
.btn{border-radius:var(--vz-border-radius);font-weight:500;}
.btn-primary{--vz-btn-bg:#d1aa66;--vz-btn-border-color:#d1aa66;--vz-btn-color:#11151f;--vz-btn-hover-bg:#c49b50;--vz-btn-hover-border-color:#c49b50;--vz-btn-hover-color:#11151f;--vz-btn-active-bg:#b98f44;--vz-btn-active-border-color:#b98f44;--vz-btn-active-color:#11151f;--vz-btn-disabled-bg:#d1aa66;--vz-btn-disabled-border-color:#d1aa66;--vz-btn-disabled-color:#11151f;box-shadow:0 1px 2px rgba(16,24,40,.06);}
.btn-soft-primary{--vz-btn-color:var(--ugc-gold-deep);}
.btn-outline-primary{--vz-btn-color:var(--ugc-gold-deep);--vz-btn-border-color:#d1aa66;--vz-btn-hover-bg:#d1aa66;--vz-btn-hover-color:#11151f;--vz-btn-hover-border-color:#d1aa66;}

/* Filled primary surfaces — keep gold, force readable ink text */
.bg-primary,.bg-primary.text-white,.bg-primary .text-white{color:#11151f!important;}

/* Forms — gold focus ring */
.form-control,.form-select{border-radius:var(--vz-border-radius);border-color:var(--vz-border-color);}
.form-control:focus,.form-select:focus{border-color:#d1aa66;box-shadow:0 0 0 .2rem rgba(209,170,102,.25);}
.form-check-input:checked{background-color:#d1aa66;border-color:#d1aa66;}
.form-check-input:focus{border-color:#d1aa66;box-shadow:0 0 0 .2rem rgba(209,170,102,.25);}

/* Tables — quiet uppercase headers, subtle hover */
.table>:not(caption)>*>*{padding:.7rem .9rem;}
.table>thead th{text-transform:uppercase;font-size:.69rem;letter-spacing:.04em;font-weight:600;color:var(--vz-secondary-color);border-bottom:1px solid var(--vz-border-color);}
.table>tbody>tr{border-color:#eef0f3;}
.table-hover>tbody>tr:hover>*{background:#f6f7f9;}

/* Badges — soft tinted */
.badge{font-weight:600;border-radius:999px;padding:.35em .7em;}
.badge.bg-primary{background:rgba(209,170,102,.16)!important;color:var(--ugc-gold-deep)!important;}
.badge.bg-success{background:rgba(25,135,84,.13)!important;color:#157347!important;}
.badge.bg-danger{background:rgba(220,53,69,.12)!important;color:#b02a37!important;}
.badge.bg-warning{background:rgba(255,193,7,.16)!important;color:#997404!important;}
.badge.bg-info{background:rgba(13,202,240,.14)!important;color:#0a93b3!important;}
.badge.bg-secondary{background:#eef0f3!important;color:#475467!important;}

/* Sidebar — gold accent ONLY. The previous rule added a tinted background block
   on top of Velzon's own active background, so the active parent and the active
   sub-item highlights overlapped. Let Velzon own the active background; we only
   recolour the text/icon to gold so the states stay clean and separated. */
.navbar-menu .navbar-nav .nav-link.active > span,
.navbar-menu .navbar-nav .nav-link.active,
.navbar-menu .navbar-nav .nav-link:hover{color:#d1aa66!important;}
.navbar-menu .navbar-nav .nav-link.active i,
.navbar-menu .navbar-nav .nav-link.active .icon{color:#d1aa66!important;}
[data-sidebar="dark"]{--vz-vertical-menu-item-active-color:#d1aa66;--vz-vertical-menu-sub-item-active-color:#d1aa66;--vz-vertical-menu-item-hover-color:#d1aa66;--vz-vertical-menu-sub-item-hover-color:#d1aa66;}

/* Dropdowns / modals */
.dropdown-menu{border:1px solid var(--vz-border-color);border-radius:var(--vz-border-radius-lg);box-shadow:0 8px 28px rgba(16,24,40,.12);}
.dropdown-item.active,.dropdown-item:active{background:rgba(209,170,102,.14);color:#11151f;}
.modal-content{border:0;border-radius:var(--vz-border-radius-xl);box-shadow:0 24px 64px rgba(16,24,40,.22);}

/* Pagination / tabs / progress accents */
.page-item.active .page-link{background:#d1aa66;border-color:#d1aa66;color:#11151f;}
.page-link{color:var(--ugc-gold-deep);}
.nav-tabs .nav-link.active{color:#11151f;border-bottom-color:#d1aa66;}
.progress-bar{background-color:#d1aa66;}
/* ── end UGC REFRESH ── */

/* UGC REFRESH — keep headings readable on dark surfaces (modal headers, dark
   cards). The reskin's dark --vz-heading-color would otherwise make an <h_>
   on a dark/gradient header invisible. */
.text-white :is(h1,h2,h3,h4,h5,h6),
[style*="color:#fff"] :is(h1,h2,h3,h4,h5,h6),
[style*="color: #fff"] :is(h1,h2,h3,h4,h5,h6),
[style*="color:white"] :is(h1,h2,h3,h4,h5,h6),
.bg-dark :is(h1,h2,h3,h4,h5,h6){color:inherit !important;}

/* Select2 — the bootstrap-5 theme leaves the dropdown background unset against
   Velzon's --vz-* vars, so it renders transparent. Force a solid surface and
   keep the panel above modals/cards. */
.select2-container--bootstrap-5 .select2-dropdown,
.select2-dropdown{background-color:#fff !important;border-color:#e7e9ee;}
.select2-container--bootstrap-5 .select2-results__options{background-color:#fff;}
.select2-container--bootstrap-5 .select2-results__option{background-color:#fff;}
.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected]{background-color:#d1aa66 !important;color:#11151f !important;}
.select2-container{z-index:1060;}
.select2-dropdown{z-index:1061;}

/* Uniform button padding/spacing across filters & dashboards (was inconsistent) */
.btn{padding:.45rem .9rem;font-weight:500;line-height:1.45;}
.btn-sm{padding:.3rem .65rem;font-size:.8125rem;}
.btn-lg{padding:.6rem 1.15rem;}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;min-width:2.15rem;padding-left:.5rem;padding-right:.5rem;}
.btn > i,.btn > [class^="ri-"],.btn > [class*=" ri-"]{line-height:1;vertical-align:middle;}
.btn-group-sm > .btn{padding:.3rem .55rem;}
/* Filter toolbars: consistent gaps + bottom-aligned controls */
.card-header .row.g-2 > [class*="col"],.card-header .row.g-3 > [class*="col"]{display:flex;align-items:flex-end;}

/* ── Reskin gap fixes: button consistency (keep semantic info/success/danger) ── */
/* Outline-primary: Velzon renders this BLUE. Make it gold (bronze text for AA contrast,
   gold fill + ink text on hover). */
.btn-outline-primary{--vz-btn-color:#9a7a2c;--vz-btn-border-color:#d1aa66;--vz-btn-bg:transparent;--vz-btn-hover-bg:#d1aa66;--vz-btn-hover-color:#11151f;--vz-btn-hover-border-color:#d1aa66;--vz-btn-active-bg:#c49b50;--vz-btn-active-border-color:#c49b50;--vz-btn-active-color:#11151f;}
/* Soft / ghost primary variants → gold tint */
.btn-soft-primary,.btn-ghost-primary{--vz-btn-color:#9a7a2c;--vz-btn-bg:rgba(209,170,102,.14);--vz-btn-border-color:transparent;--vz-btn-hover-bg:#d1aa66;--vz-btn-hover-color:#11151f;}
/* Secondary / light → clean neutral (not the old muted blue-grey) */
.btn-secondary{--vz-btn-bg:#eef0f3;--vz-btn-border-color:#e3e6eb;--vz-btn-color:#3f4655;--vz-btn-hover-bg:#e3e6eb;--vz-btn-hover-color:#1f2430;--vz-btn-hover-border-color:#d9dde3;}
.btn-soft-secondary{--vz-btn-bg:#f1f3f5;--vz-btn-color:#475467;--vz-btn-border-color:transparent;}
/* Links coloured with the old Velzon blue → brand gold (used as nav/inline accents) */
.btn-link{--vz-btn-color:#9a7a2c;--vz-btn-hover-color:#806223;}
/* Inline-styled gold-background buttons: guarantee readable dark text */
[style*="background:#d1aa66"],[style*="background-color:#d1aa66"]{color:#11151f !important;}

/* ── btn-xs — Bootstrap 3 legacy size, used across project ──── */
.btn-xs {
    padding: .15rem .45rem;
    font-size: .72rem;
    line-height: 1.4;
    border-radius: .25rem;
}

/* ── UI Shake / Layout-Shift Prevention ────────────────────── */

/* Reserve scrollbar space permanently — prevents horizontal shift
   when scrollbar appears/disappears on tab/content switches */
html {
    scrollbar-gutter: stable;
}

/* Bootstrap sets smooth scroll on :root; tab anchor clicks cause
   a visible vertical jump — override to instant */
:root {
    scroll-behavior: auto !important;
}

/* GPU-composite the card hover lift so sibling cards don't reflow */
.card-animate {
    will-change: transform;
    backface-visibility: hidden;
}
.card-animate:hover {
    transform: translateY(-4px) translateZ(0);
}

/* ── Sticky elements vs the fixed topbar ──────────────────────────────────────
   Bootstrap ships  .sticky-top { position:sticky; top:0; z-index:1020 }
   Velzon ships     #page-topbar { position:fixed; height:70px; z-index:1002 }

   1020 > 1002, so every .sticky-top element scrolled *over* the navbar, and
   top:0 pinned it to the very top of the viewport — exactly where the navbar
   already is. That is what made the Scoresheet Notes editor ride over the
   header on scroll, and it affected six other templates the same way.

   Fixing it here rather than per-template so all of them are corrected at once
   and no future page reintroduces it. */
:root {
    --ugc-topbar-h: 70px;
}

.sticky-top {
    top: calc(var(--ugc-topbar-h) + 1rem);
    /* Below the topbar (1002) and well below the modal backdrop (1050), so a
       sticky card can never punch through an open dialog either. */
    z-index: 1000;
}

/* A sticky card header/thead inside page content. The custom rule in the
   scoresheet template used top:0 with z-index:100, which sent it *under* the
   navbar — the "Add Resit Student" button disappeared behind the header on
   scroll. */
.sticky-header {
    position: sticky;
    top: var(--ugc-topbar-h);
    background: #fff;
    z-index: 20;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}

/* A sticky table head must clear the sticky card header above it, or the two
   occupy the same strip and overlap. */
.sticky-header + .card-body thead.sticky-header,
thead.sticky-header {
    top: calc(var(--ugc-topbar-h) + 3.5rem);
    z-index: 19;
    box-shadow: none;
}

/* Bootstrap places the backdrop at 1050 and the modal at 1055. The sidebar is
   position:fixed at 1002, so it dims correctly — but only while nothing else
   raises itself above the backdrop. Keep Quill's toolbar (which is sticky
   inside the notes editor) out of that range. */
.ql-toolbar {
    z-index: 5;
}

/* ── KPI / stat cards: fluid sizing so long numbers/labels never distort
   the card ───────────────────────────────────────────────────────────────
   Every dashboard home page (~19 of them, plus another ~17 sub-pages)
   duplicates its own .kpi-card markup with a fixed-px icon box and fixed
   rem font-sizes, and only one of them (lecturer_dashboard) had a mobile
   media query. At narrow widths — or with a long label/large number — the
   fixed-width icon squeezes the text column, and the qa/registrar pattern's
   .overflow-hidden wrapper clips instead of wrapping. Centralising fluid
   rules here (with !important to win over the inline width/font-size every
   template sets directly) fixes all of them at once. */
.kpi-card .kpi-icon,
.kpi-card .kpi-icon-box {
    width: clamp(34px, 9vw, 48px) !important;
    height: clamp(34px, 9vw, 48px) !important;
    font-size: clamp(1rem, 3vw, 1.35rem) !important;
    flex-shrink: 0;
}
.kpi-card .kpi-value {
    font-size: clamp(1.15rem, 2.6vw, 1.75rem) !important;
    line-height: 1.2;
    overflow-wrap: break-word;
}
.kpi-card .kpi-label {
    font-size: clamp(0.68rem, 1.8vw, 0.82rem) !important;
    white-space: normal;
    overflow-wrap: break-word;
}
/* qa/registrar-style cards use a bare <h4> + <p class="text-muted"> instead
   of .kpi-value/.kpi-label — give those the same fluid treatment. */
.kpi-card h3, .kpi-card h4 {
    font-size: clamp(1.15rem, 2.6vw, 1.5rem) !important;
    overflow-wrap: break-word;
}
.kpi-card p.text-muted, .kpi-card small.text-muted {
    font-size: clamp(0.68rem, 1.8vw, 0.8125rem) !important;
    white-space: normal;
}
/* That pattern also wraps the text column in Bootstrap's .overflow-hidden,
   which clips long content once the fixed-width icon sibling has claimed
   its space — let it wrap instead. */
.kpi-card .overflow-hidden {
    overflow: visible !important;
}
/* Let the text column shrink below its content's natural width so the row
   wraps/shrinks instead of the fixed-width icon sibling overflowing it. */
.kpi-card .d-flex.justify-content-between > div:first-child {
    min-width: 0;
}
@media (max-width: 575.98px) {
    .kpi-card .card-body {
        padding: 0.75rem !important;
    }
}