/* ==========================================================================
   SUM brand tokens
   The association's visual identity. The blue + gold HUES are fixed — they are
   the SUM identity and must not change. Everything below is our own design
   layer, sitting on top of the (compiled, untouched) Metronic bundle.
   ========================================================================== */
:root{
    /* Core identity — do not change these hues */
    --bs-sum-blue-color:#01509e;   /* legacy name kept so existing rules keep working */
    --sum-blue:#01509e;
    --sum-blue-dark:#013e79;       /* hover / active / pressed */
    --sum-blue-tint:#e7eef7;       /* soft blue wash for backgrounds */
    --bs-sum-yellow-color:#ffc904; /* legacy name kept */
    --sum-gold:#ffc904;
    --sum-gold-dark:#e6b400;

    /* Surfaces & shape (our design layer) */
    --sum-bg:#eef2f6;              /* single app background (was split #f3f2ef / #f1f8fa) */
    --sum-surface:#ffffff;
    --sum-border:#e4e8ef;
    --bs-btn-border-radius:0;   /* square UI — no rounded corners */
    --sum-card-radius:0;
    --sum-card-shadow:0 1px 2px rgba(1,80,158,.05), 0 6px 20px rgba(24,28,50,.06);
}
body{
    font-family: 'Changa', sans-serif !important;
    background-color: var(--sum-bg) !important;
}
.btn,.form-control,.form-select,.form-check-input{
    border-radius: var(--bs-btn-border-radius) !important;
}
/* Borderless, filled inputs (no visible border; a light fill defines the field). */
.form-control:not(.is-invalid), .form-select:not(.is-invalid){
    border-color: transparent !important;
    background-color: #eef2f6 !important;
}
.blockui-overlay{
    cursor: not-allowed !important;
}
.rounded {
    border-radius: var(--bs-btn-border-radius) !important;
}
.tagify__tag>div::before {
    box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--bs-info) inset;
}

.tagify__tag__removeBtn:hover+div::before {
    box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--bs-info) inset !important;
    transition: box-shadow .2s;
}
.tagify__tag-text{
    color: white !important;
}
.tagify .tagify__tag .tagify__tag__removeBtn:hover {
    background-color:var(--bs-danger);
}

.tagify .tagify__tag {
    background-color:var(--bs-info);
}

[data-sc-section]{
    transition: height .5s ease;
}

::-webkit-scrollbar {
    display: none;
}
* {
    -ms-overflow-style: none;
    scrollbar-width: none; 
}
.select2-container--bootstrap5 .select2-selection__clear{
    right:unset !important;
}
.form-select:not(.form-select-lg){
    padding: 0.25rem 1rem 0.25rem 3rem !important;
}


.modal {
    backdrop-filter: blur(2px) !important;
    background-color: #808080c7 !important;
}
.aside-menu .menu-item .menu-link.active {
    background-color: var(--bs-sum-yellow-color);
}

.aside-menu .menu-item .menu-link.active:after{
    border-left-color:var(--bs-sum-blue-color);
}

.aside-menu .menu-item .menu-link.active .menu-icon i{
    color: var(--bs-sum-blue-color);
}

.aside-menu .menu-item .menu-link.active .menu-title{
    color: var(--bs-sum-blue-color);
}

.text-yellow{
    color: var(--bs-sum-yellow-color) !important;
}
.text-blue{
    color: var(--bs-sum-blue-color) !important;
}

.aside-menu .menu-item .menu-link .menu-title{
    color: #ffffff;
}

.page-item.active .page-link{
    background-color: var(--bs-sum-yellow-color);
    color: var(--bs-sum-blue-color);
    border-radius: var(--bs-btn-border-radius) !important;

}

.btn-primary{
    --bs-btn-bg:var(--sum-blue);
    --bs-btn-border-color:var(--sum-blue);
    --bs-btn-hover-bg:var(--sum-blue-dark);
    --bs-btn-hover-border-color:var(--sum-blue-dark);
    --bs-btn-active-bg:var(--sum-blue-dark);
    --bs-btn-active-border-color:var(--sum-blue-dark);
    background-color: var(--sum-blue) !important;
    box-shadow:0 2px 6px rgba(1,80,158,.22);
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{
    background-color: var(--sum-blue-dark) !important;
}
.bg-yellow {
    background-color: var(--bs-sum-yellow-color);
}

div#kt_aside_toggle{
    color: var(--bs-sum-blue-color);
}

.table.table-row-bordered.mobile tr{
    border-bottom-color: #5e6278 !important;
}

.nav-line-tabs .nav-item .nav-link.active {
    border-bottom: 1px solid var(--bs-sum-blue-color) !important;
    color: var(--bs-sum-blue-color) !important;
}

.select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered{
    color: #181c32 !important;
}

.hover-scale {
    transition: transform .3s ease;
}

.hover-scale:hover {
    transform: scale(1.1);
    transition: transform .3s ease;
    will-change: transform;
}

/* ==========================================================================
   SUM design layer (moderate re-skin)
   Component treatments layered over the Metronic base so the UI reads as our
   own product rather than a stock template — while keeping the blue/gold
   identity. Pure overrides: the vendor bundle is never edited.
   ========================================================================== */

/* Cards: softer corners, a hairline border and one consistent brand shadow
   instead of Metronic's default flat/heavy variants. */
.card{
    border-radius:var(--sum-card-radius) !important;
    border:1px solid var(--sum-border) !important;
    box-shadow:none !important;
}
.card .card-header{
    border-bottom:1px solid var(--sum-border);
    min-height:60px;
}
.card .card-title{ font-weight:700; }

/* Inputs: brand-blue focus ring so form focus matches the identity. */
.form-control:focus,.form-select:focus{
    border-color:transparent !important;
    background-color:#fff !important;
    box-shadow:0 0 0 .2rem rgba(1,80,158,.15) !important;
}
.form-check-input:focus{
    box-shadow:0 0 0 .2rem rgba(1,80,158,.15) !important;
}
.form-check-input:checked{
    background-color:var(--sum-blue) !important;
    border-color:var(--sum-blue) !important;
}

/* Light-primary buttons/badges keyed to the brand tint. */
.btn.btn-light-primary{
    --bs-btn-color:var(--sum-blue);
    --bs-btn-bg:var(--sum-blue-tint);
    --bs-btn-border-color:var(--sum-blue-tint);
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-bg:var(--sum-blue);
    --bs-btn-active-bg:var(--sum-blue-dark);
}

/* Table heads: quiet, brand-tinted column labels (applied inside cards only
   so dense/report tables elsewhere are untouched). */
.card .table thead th{
    color:var(--sum-blue);
    font-weight:700;
    text-transform:none;
}

/* Links follow the brand blue rather than Metronic's default. */
.text-hover-primary:hover,a.link-primary:hover{ color:var(--sum-blue-dark) !important; }

/* Gold accent utility to pair with .text-blue / .bg-yellow already in use. */
.border-gold{ border-color:var(--sum-gold) !important; }
.bg-blue{ background-color:var(--sum-blue) !important; }

/* ==========================================================================
   App shell (sidebar + header)
   Repaints Metronic's generic dark-navy chrome into the SUM brand blue and
   swaps the flat gold "active block + triangle" for a modern inset gold pill,
   so the shell reads as a bespoke design rather than the stock template.
   ========================================================================== */

/* Sidebar: brand-blue gradient instead of Metronic's #1e1e2d navy. */
.aside.aside-dark,.aside{
    background:linear-gradient(180deg,#013e79 0%,#01509e 100%) !important;
    border-inline-start:none !important;
}
.aside .aside-logo{
    background:#fff !important;
    box-shadow:0 1px 0 rgba(0,0,0,.06);
}

/* Menu items: inset, rounded, with a soft hover wash. */
.aside-menu .menu-item{ padding-inline:12px; }
.aside-menu .menu-item .menu-link{
    border-radius:.7rem;
    margin:3px 0;
    padding-block:9px;
    transition:background-color .15s ease, transform .15s ease;
}
.aside-menu .menu-item .menu-link:hover{ background-color:rgba(255,255,255,.09); }
.aside-menu .menu-item .menu-link .menu-title{ color:#eaf1f9; font-weight:500; }
.aside-menu .menu-item .menu-link .menu-icon i{ color:#9fc0e6; }

/* Active item: a gold pill (no full-width block, no triangle). */
.aside-menu .menu-item .menu-link.active{
    background-color:var(--sum-gold) !important;
    border-radius:.7rem;
    box-shadow:0 6px 16px rgba(255,201,4,.35);
}
.aside-menu .menu-item .menu-link.active:after{ display:none !important; }
.aside-menu .menu-item .menu-link.active .menu-title,
.aside-menu .menu-item .menu-link.active .menu-icon i{
    color:var(--sum-blue-dark) !important;
    font-weight:700;
}

/* Header: same brand blue as the sidebar for a single, cohesive chrome. */
.header{
    background:linear-gradient(90deg,#01509e 0%,#013e79 100%) !important;
    border-bottom:none !important;
    box-shadow:0 4px 24px rgba(1,80,158,.18);
}
#kt_aside_toggle .ki-outline,#kt_aside_toggle i{ color:#fff !important; }

/* Pagination: rounded, spaced pills with a gold active chip. */
.pagination .page-link{
    border-radius:.6rem !important;
    margin:0 3px;
    border:1px solid var(--sum-border);
    color:var(--sum-blue);
    font-weight:600;
}
.pagination .page-item.active .page-link{
    background-color:var(--sum-gold);
    border-color:var(--sum-gold);
    color:var(--sum-blue-dark);
}

/* ==========================================================================
   Dashboard statistic cards (see components/stat-card.blade.php)
   Cohesive white cards with a per-card accent, replacing the saturated
   Metronic gradient tiles.
   ========================================================================== */
.sum-stat{ border-top:3px solid var(--accent) !important; overflow:hidden; }
.sum-stat .card-body{ padding:24px 24px 20px; }
.sum-stat__top{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.sum-stat__icon{
    width:54px; height:54px; border-radius:15px; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    background:var(--accent-soft); color:var(--accent); font-size:26px;
}
.sum-stat__label{ font-weight:600; color:#5e6278; font-size:15px; line-height:1.3; }
.sum-stat__value{
    font-size:40px; font-weight:800; line-height:1; color:#181c32; letter-spacing:.5px;
}
.sum-stat__foot{
    display:flex; align-items:center; gap:7px;
    margin-top:18px; padding-top:14px; border-top:1px solid var(--sum-border); font-size:14px;
}
.sum-stat__foot i{ color:var(--accent); font-size:22px; }
.sum-stat__delta{ font-weight:700; color:var(--accent); }
.sum-stat__sub{ color:#7e8299; }

/* ==========================================================================
   Notifications: toasts (toastr), dialogs (SweetAlert2) and modals
   Rebrands all three feedback surfaces so success/error messaging and dialogs
   read as part of the SUM design system.
   ========================================================================== */

/* Toasts (Metronic-forked toastr — `#toastr-container` / `.toastr-*`): rounded,
   shadowed, semantic-coloured, and pushed clear of the fixed header. */
#toastr-container{ top:84px !important; }
#toastr-container > .toastr{
    border:none !important;
    opacity:1 !important;
    border-radius:.8rem !important;
    box-shadow:0 12px 34px rgba(24,28,50,.22) !important;
    padding:14px 18px !important;
    min-width:300px;
    font-family:'Changa',sans-serif !important;
    font-weight:600;
}
#toastr-container > .toastr-success{ background:#1a9c60 !important; }
#toastr-container > .toastr-error{ background:#e2224e !important; }
#toastr-container > .toastr-warning{ background:var(--sum-gold-dark) !important; }
#toastr-container > .toastr-info{ background:var(--sum-blue) !important; }

/* SweetAlert2 dialogs: brand font/shape and a brand-blue confirm button
   (was Metronic "info" purple). */
.swal2-popup{
    border-radius:var(--sum-card-radius) !important;
    font-family:'Changa',sans-serif !important;
    padding:2.25rem 2rem !important;
}
.swal2-title{ color:#181c32 !important; font-weight:700 !important; }
.swal2-html-container,.swal2-content{ color:#5e6278 !important; }
.swal2-container button.swal2-confirm,
.swal2-container button.swal2-confirm.btn.btn-info{
    background-color:#01509e !important;
    border-color:#01509e !important;
    color:#fff !important;
    box-shadow:0 2px 6px rgba(1,80,158,.22) !important;
}
.swal2-container button.swal2-confirm:hover,
.swal2-container button.swal2-confirm.btn.btn-info:hover{ background-color:#013e79 !important; }
.swal2-container button.swal2-cancel{
    background-color:#eef1f5 !important; border-color:#eef1f5 !important; color:#3f4254 !important;
}
/* ==========================================================================
   Full-page loader (#loading-overlay)
   A bespoke SUM spinner — two counter-rotating brand rings (blue + gold) —
   replacing the generic Bootstrap .spinner-border used by the old platform.
   ========================================================================== */
.sum-loader{ position:relative; width:80px; height:80px; }
.sum-loader::before,
.sum-loader::after{
    content:''; position:absolute; border-radius:50%; border:6px solid transparent;
}
.sum-loader::before{
    inset:0;
    border-top-color:var(--sum-blue);
    border-bottom-color:var(--sum-blue);
    animation:sum-spin 1s linear infinite;
}
.sum-loader::after{
    inset:13px;
    border-left-color:var(--sum-gold);
    border-right-color:var(--sum-gold);
    animation:sum-spin 1.4s linear infinite reverse;
}
@keyframes sum-spin{ to{ transform:rotate(360deg); } }

/* Corner toast (Swal toast mode): compact, rounded, brand font, offset below the
   fixed header so it never overlaps the logo/nav. */
.swal2-container.swal2-top-start,
.swal2-container.swal2-top-end,
.swal2-container.swal2-top{ top:70px !important; }
.swal2-toast{
    border-radius:.8rem !important;
    padding:14px 16px !important;
    box-shadow:0 12px 34px rgba(24,28,50,.20) !important;
    font-family:'Changa',sans-serif !important;
}
.swal2-toast .swal2-title{ font-size:15px !important; font-weight:600 !important; margin:0 !important; }

/* Modals: square corners (no rounding), borderless surface, brand-tinted header. */
.modal-content{
    border:none !important;
    border-radius:0 !important;
    box-shadow:0 24px 70px rgba(24,28,50,.28);
    overflow:hidden;
}
.modal-header{
    background:var(--sum-blue-tint);
    border-bottom:1px solid var(--sum-border);
    padding:1.2rem 1.5rem;
}
.modal-header .modal-title{ color:var(--sum-blue-dark) !important; font-weight:700; }
.modal-body{ padding:1.5rem; }
.modal-footer{ border-top:1px solid var(--sum-border); padding:1rem 1.5rem; }

/* ==========================================================================
   Login pages (auth/login.blade.php)
   The form now sits in a focused white card on a soft neutral panel, beside a
   solid brand-blue identity panel — a distinct, designed layout rather than the
   stock Metronic split with the default illustration background.
   ========================================================================== */
.sum-login-side{ background:var(--sum-bg); }
.sum-login-card{
    width:100%; max-width:860px;
    background:#fff;
    border:1px solid var(--sum-border);
    border-radius:1.1rem;
    box-shadow:0 20px 60px rgba(24,28,50,.10);
    padding:44px 38px;
}
/* Registration form surface — a white card so the borderless filled inputs stay
   visible (the form previously sat directly on the grey page background). */
.sum-register-card{
    width:100%; max-width:1080px;
    background:#fff;
    border:1px solid var(--sum-border);
    box-shadow:0 20px 60px rgba(24,28,50,.08);
    padding:40px 36px;
}
/* Identifier selector: a clean segmented control keyed to the brand blue. */
.sum-login-card .btn-group .btn-outline-primary{ font-weight:600; }
.sum-login-card .btn-group .btn-check:checked + .btn,
.sum-login-card .btn-group .btn.active{
    background-color:var(--sum-blue) !important;
    border-color:var(--sum-blue) !important;
    color:#fff !important;
}

/* Landing "choose your space" cards: keep the solid brand colours (no wave-shape
   background images); drop the global card border and add a subtle hover lift. */
.landing-space{ border:0 !important; transition:transform .2s ease; }
.landing-space:hover{ transform:translateY(-5px); }

/* ==========================================================================
   Square UI
   Design choice: no rounded corners anywhere on rectangular components. This
   catches components that carry their own radius from the Metronic/Bootstrap
   base (dropdowns, tabs, select2, tags, accordions, sidebar links, …). Genuine
   circles — avatars, the logo, the loader, radio buttons — are preserved below.
   ========================================================================== */
.btn, .btn-group > .btn, .btn-group-vertical > .btn,
.form-control, .form-select, textarea, .input-group-text, .input-group > *,
.card, .card-flush, .rounded, .rounded-1, .rounded-2, .rounded-3, .rounded-4,
.dropdown-menu, .menu-sub-dropdown, .menu-rounded .menu-link,
.alert, .badge, .modal-content, .offcanvas, .popover, .tooltip-inner,
.swal2-popup, .swal2-toast, .swal2-actions .btn,
.page-link, .pagination .page-link,
.nav-tabs .nav-link, .nav-line-tabs .nav-item .nav-link,
.select2-container--bootstrap5 .select2-selection,
.select2-container--bootstrap5 .select2-search__field,
.select2-dropdown,
.sum-login-card, .landing-space, .sum-stat__icon,
.accordion, .accordion-item, .accordion-button,
.tagify, .tagify__tag > div,
.aside-menu .menu-item .menu-link,
.form-check-input {
    border-radius: 0 !important;
}

/* Preserve genuine circles (not "rounded corners"). */
.rounded-circle,
.form-check-input[type="radio"],
.sum-loader, .sum-loader::before, .sum-loader::after,
.symbol.symbol-circle > img,
.symbol.symbol-circle .symbol-label {
    border-radius: 50% !important;
}