/* ============================================================
   iDEAN Consulting — Liquid Glass v2 · 2026-08-16
   Rebuilt from the canonical web liquid-glass recipe
   (lucasromerodb/liquid-glass-effect-macos: effect/tint/shine
   layers, specular inset highlights) + Apple Liquid Glass
   principles: light material, glass on chrome only, legibility
   first, motion makes it real.

   Architecture (CSS-only, no per-view markup):
   · Ambient: bright soft mesh gradient (periwinkle/gold/white)
     — glass needs color behind it to refract.
   · Glass material = translucent WHITE + blur(24px) saturate(180%)
     + specular inset shine (2px top-left / -1px bottom-right)
     + soft drop shadow. Text on glass is always dark navy ink.
   · Optional SVG refraction (#glass-distortion) applies to the
     login card via ::before so content never distorts.
   Palette: #273272 primary · #080B41 dark · #FED044 gold.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Lato:wght@400;700&display=swap');

:root {
    --idean-primary: #273272;
    --idean-dark: #080B41;
    --idean-gold: #FED044;
    --ink: #1a2036;
    --ink-soft: #4a5170;
    --glass-bg: rgba(255, 255, 255, .58);
    --glass-bg-strong: rgba(255, 255, 255, .74);
    --glass-edge: rgba(255, 255, 255, .85);
    --glass-shine:
        inset 2px 2px 1px 0 rgba(255, 255, 255, .65),
        inset -1px -1px 1px 1px rgba(255, 255, 255, .35);
    --glass-shadow: 0 8px 32px rgba(31, 38, 135, .18), 0 2px 8px rgba(31, 38, 135, .10);
    --glass-blur: blur(24px) saturate(180%);
    --spring: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */
    /* control boundaries need 3:1 against the panel they sit on — a white
       hairline disappears the moment the panel itself is white glass */
    --field-edge: rgba(39, 50, 114, .60);
}

/* ---------- Ambient world: bright, softly colored ---------- */
html { min-height: 100%; }
body {
    font-family: 'Lato', 'Segoe UI', system-ui, sans-serif !important;
    color: var(--ink);
    background:
        radial-gradient(1000px 600px at 88% -8%, rgba(254, 208, 68, .30), transparent 55%),
        radial-gradient(900px 640px at -10% 20%, rgba(122, 143, 255, .38), transparent 55%),
        radial-gradient(1100px 800px at 70% 115%, rgba(39, 50, 114, .30), transparent 60%),
        linear-gradient(165deg, #eef1ff 0%, #dfe6ff 45%, #cfd9ff 100%) !important;
    background-attachment: fixed !important;
}
h1, h2, h3, h4, h5, h6, .navbar-brand, .card .header h2 {
    font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif !important;
}
/* Text directly on the ambient */
.block-header h2, .block-header small,
.breadcrumb, .breadcrumb li, .breadcrumb a {
    color: var(--idean-primary) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

/* ---------- The glass material ---------- */
/* Top bar */
.navbar {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: none !important;
    border-bottom: 1px solid var(--glass-edge) !important;
    box-shadow: var(--glass-shine), var(--glass-shadow) !important;
}
.navbar-brand, .navbar .navbar-brand:hover,
.navbar .bars, .navbar .navbar-header a,
.navbar .dropdown-toggle, .navbar .text-white {
    color: var(--idean-dark) !important;
    font-weight: 600;
}
.navbar-brand img { border-radius: 8px; }
.navbar .user-helper-dropdown { border-color: rgba(8, 11, 65, .25) !important; }

/* Sidebar */
.sidebar {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-right: 1px solid var(--glass-edge) !important;
    box-shadow: inset -2px 0 1px -1px rgba(255, 255, 255, .55), 8px 0 32px rgba(31, 38, 135, .12) !important;
}
.sidebar .menu .list li a {
    color: var(--ink) !important;
    border-radius: 12px;
    margin: 2px 10px;
    transition: background .25s var(--spring), color .2s ease, transform .25s var(--spring);
}
.sidebar .menu .list li a i,
.sidebar .menu .list li a .material-icons { color: var(--ink-soft) !important; }
.sidebar .menu .list li a:hover {
    background: rgba(255, 255, 255, .65) !important;
    color: var(--idean-primary) !important;
    transform: translateX(2px);
}
.sidebar .menu .list li a:hover i,
.sidebar .menu .list li a:hover .material-icons { color: var(--idean-primary) !important; }
/* Selected = solid navy pill (hierarchy stays unmistakable on glass) */
.sidebar .menu .list li.active > a {
    background: var(--idean-primary) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(39, 50, 114, .35);
}
.sidebar .menu .list li.active > a i,
.sidebar .menu .list li.active > a .material-icons { color: var(--idean-gold) !important; }
.sidebar .menu .list .ml-menu {
    background: rgba(255, 255, 255, .40) !important;
    border-radius: 12px;
    margin: 0 10px;
}
.sidebar .menu .list .ml-menu li a { color: var(--ink) !important; }
.sidebar .legal {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, .7) !important;
    color: var(--ink-soft) !important;
}
.sidebar .legal .copyright, .sidebar .legal .version { color: var(--ink-soft) !important; }
.sidebar .legal a { color: var(--idean-primary) !important; }

/* Dropdown menus float as small glass sheets */
.dropdown-menu {
    background: var(--glass-bg-strong) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-edge) !important;
    border-radius: 14px !important;
    box-shadow: var(--glass-shine), 0 16px 40px rgba(31, 38, 135, .25) !important;
    overflow: hidden;
}
.dropdown-menu > li > a, .dropdown-menu a { color: var(--ink) !important; }
.dropdown-menu > li > a:hover, .dropdown-menu a:hover {
    background: rgba(39, 50, 114, .10) !important;
    color: var(--idean-primary) !important;
}
.dropdown-menu .divider { background: rgba(39, 50, 114, .12) !important; }

/* Cards — the work surface. Strong tint so data never fights glass. */
.card {
    background: var(--glass-bg-strong) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-edge) !important;
    border-radius: 18px !important;
    box-shadow: var(--glass-shine), var(--glass-shadow) !important;
    color: var(--ink);
    transition: box-shadow .3s ease, transform .3s var(--spring);
}
.card:hover {
    box-shadow: var(--glass-shine), 0 14px 44px rgba(31, 38, 135, .24), 0 4px 12px rgba(31, 38, 135, .12) !important;
}
.card .header { border-bottom: 1px solid rgba(39, 50, 114, .10) !important; }
.card .header h2 {
    color: var(--ink) !important;
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
}
.card .header h2 small { color: var(--ink-soft); }
.card .body { color: var(--ink); }

/* ---------- Tables: dark ink, quiet chrome ---------- */
.table { color: var(--ink) !important; }
.table thead th {
    background: rgba(39, 50, 114, .08) !important;
    color: var(--idean-primary) !important;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 2px solid rgba(39, 50, 114, .16) !important;
}
.table td, .table th {
    border-color: rgba(39, 50, 114, .10) !important;
    vertical-align: middle !important;
}
.table tbody tr { transition: background .15s ease; }
.table tbody tr:hover { background: rgba(255, 255, 255, .8); }
.table a { color: var(--idean-primary); font-weight: 700; }

/* ---------- Buttons: glass pills, navy primary ---------- */
.btn {
    border-radius: 999px !important;
    text-transform: none !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    box-shadow: none !important;
    transition: transform .25s var(--spring), box-shadow .25s ease, filter .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary, .btn-info, .bg-blue {
    background: var(--idean-primary) !important;
    border: 1px solid rgba(255, 255, 255, .35) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35), 0 6px 18px rgba(39, 50, 114, .35) !important;
}
.btn-primary:hover, .btn-info:hover { filter: brightness(1.12); }
.btn-warning {
    background: var(--idean-gold) !important;
    border: 1px solid rgba(255, 255, 255, .5) !important;
    color: var(--idean-dark) !important;
    font-weight: 600;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 0 6px 18px rgba(254, 208, 68, .35) !important;
}
.btn-default {
    background: rgba(255, 255, 255, .6) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--field-edge) !important;
    color: var(--ink) !important;
}

/* ---------- Forms ---------- */
.form-control {
    background: rgba(255, 255, 255, .72) !important;
    border: 1px solid var(--field-edge) !important;
    border-radius: 12px !important;
    color: var(--ink) !important;
    box-shadow: inset 0 1px 2px rgba(31, 38, 135, .06);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-control:focus {
    background: rgba(255, 255, 255, .95) !important;
    border-color: var(--idean-primary) !important;
    box-shadow: 0 0 0 4px rgba(39, 50, 114, .15) !important;
}
.form-control::placeholder { color: var(--ink-soft); opacity: 1; }
.form-line:after { border-bottom-color: var(--idean-primary) !important; }
.form-line.focused label { color: var(--idean-primary) !important; }
label { color: var(--ink); }

/* ---------- Pagination / misc ---------- */
a { color: var(--idean-primary); }
a:hover { color: var(--idean-dark); }
.pagination > li > a {
    border-radius: 12px !important;
    margin: 0 2px;
    border-color: rgba(255, 255, 255, .9) !important;
    background: rgba(255, 255, 255, .55) !important;
    color: var(--ink) !important;
}
.pagination > .active > a, .pagination > .active > a:hover {
    background: var(--idean-primary) !important;
    border-color: var(--idean-primary) !important;
    color: #fff !important;
}
.label-primary, .badge-primary { background-color: var(--idean-primary) !important; }
.text-primary { color: var(--idean-primary) !important; }

/* ---------- Page loader ---------- */
.page-loader-wrapper { background: #dfe6ff !important; }
.page-loader-wrapper p { color: var(--idean-primary) !important; }
.spinner-layer.pl-red { border-color: var(--idean-primary) !important; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(39, 50, 114, .28); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(39, 50, 114, .45); }

/* ---------- Login (etemplate / Login100 markup) ---------- */
.container-login100 {
    background-image: none !important;
    background:
        radial-gradient(800px 500px at 85% 0%, rgba(254, 208, 68, .35), transparent 55%),
        radial-gradient(900px 640px at 0% 60%, rgba(122, 143, 255, .45), transparent 55%),
        radial-gradient(900px 700px at 75% 115%, rgba(39, 50, 114, .35), transparent 60%),
        linear-gradient(165deg, #eef1ff 0%, #dfe6ff 45%, #cfd9ff 100%) !important;
}
.wrap-login100 {
    position: relative;
    padding: 45px 50px 40px !important; /* base ships 55px right / 45px left */
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-edge);
    border-radius: 18px;
    box-shadow: var(--glass-shine), 0 24px 70px rgba(31, 38, 135, .30);
    overflow: hidden;
    transition: transform .4s var(--spring), box-shadow .4s ease;
}
.wrap-login100:hover {
    transform: translateY(-2px);
    box-shadow: var(--glass-shine), 0 30px 80px rgba(31, 38, 135, .36);
}
/* Refraction layer — SVG #glass-distortion is optional; blur carries it if absent */
.wrap-login100::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    filter: url(#glass-distortion);
    pointer-events: none;
}
.wrap-login100 > * { position: relative; z-index: 1; }
.login100-form-logo {
    background: #fff !important;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(31, 38, 135, .25);
}
.login100-form-title {
    color: var(--idean-dark) !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: .5px;
}
/* The login100 skin was drawn for a dark photo backdrop: the field rule is a
   white 24%-alpha underline, the checkbox is a white chip and the button's
   fill is a white ::before behind transparent-backed markup. All three go
   invisible on a light card, so the field frame, the chip and that ::before
   are re-inked here rather than left to the base sheet. */
.wrap-input100 {
    border: 1px solid var(--field-edge) !important;
    border-radius: 14px;
    background: rgba(255, 255, 255, .70);
    box-shadow: inset 0 1px 2px rgba(31, 38, 135, .06);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.wrap-input100:focus-within {
    border-color: var(--idean-primary) !important;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 0 0 4px rgba(39, 50, 114, .14);
}
.input100 {
    color: var(--ink) !important;
    background: transparent !important;
    border-radius: 14px;
    transition: background .2s ease, box-shadow .2s ease;
}
.input100::placeholder { color: var(--ink-soft) !important; opacity: 1; }
/* the animated underline is redundant once the field has a real frame */
.focus-input100::before { display: none !important; }
.focus-input100::after { color: var(--idean-primary) !important; }
.focus-input100::before { background: var(--idean-primary) !important; }
.label-checkbox100, .contact100-form-checkbox label { color: var(--ink) !important; }
.label-checkbox100::before {
    background: rgba(255, 255, 255, .92) !important;
    border: 1.5px solid var(--field-edge) !important;
    border-radius: 6px;
    transition: background .15s ease, border-color .15s ease;
}
.label-checkbox100:hover::before { border-color: var(--idean-primary) !important; }
.input-checkbox100:checked + .label-checkbox100::before {
    background: var(--idean-primary) !important;
    border-color: var(--idean-primary) !important;
    color: #fff !important;
}
.login100-form a { color: var(--idean-primary) !important; font-weight: 700; }
.login100-form-btn {
    background: var(--idean-primary) !important;
    color: #fff !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 10px 26px rgba(39, 50, 114, .4);
    transition: transform .25s var(--spring), filter .15s ease;
}
/* ::before is the real fill (z-index:-1 paints over the button's own
   background) — leaving it white put white text on white. */
.login100-form-btn::before {
    background: var(--idean-primary) !important;
    border-radius: 999px !important;
}
.login100-form-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.login100-form-btn:hover::before { background: var(--idean-primary) !important; }
.wrap-input100 [role="alert"] strong { color: #b3261e !important; }
.wrap-input100 [role="alert"] strong.text-black { color: var(--ink) !important; }

/* ============================================================
   UI hygiene pass · 2026-08-17
   The AdminBSB base + theme-light-blue set hard colors deeper in
   the cascade than the material rules above, which left dark ink
   and cyan labels sitting on our navy/red/green fills. Everything
   below re-anchors ink to its own surface and fixes the input
   ergonomics the boxed fields introduced.
   ============================================================ */

/* --- Sidebar ink follows its link, never the base grey/cyan --- */
body .sidebar .menu .list a span { color: inherit !important; }
/* Open section = quiet tint; current page = the one solid pill */
body .sidebar .menu .list li.active > a.menu-toggle {
    background: rgba(39, 50, 114, .10) !important;
    color: var(--idean-primary) !important;
    box-shadow: none !important;
}
body .sidebar .menu .list li.active > a.menu-toggle i,
body .sidebar .menu .list li.active > a.menu-toggle .material-icons {
    color: var(--idean-primary) !important;
}
body .sidebar .menu .list li.active > a,
body .sidebar .menu .list .ml-menu li.active > a { color: #fff !important; }
body .sidebar .menu .list li.active > :first-child i,
body .sidebar .menu .list li.active > :first-child .material-icons { color: var(--idean-gold) !important; }
body .sidebar .menu .list .ml-menu li.active > a {
    background: var(--idean-primary) !important;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(39, 50, 114, .35);
}
/* the per-theme sheets ship `!important` cyan here, so match their weight */
[class*="theme-"] .sidebar .legal .copyright a,
[class*="theme-"] .sidebar .legal a { color: var(--idean-primary) !important; font-weight: 600; }

/* --- Breadcrumbs: the .breadcrumb-col-* variants ship !important cyan --- */
body .breadcrumb li a, body .breadcrumb li i,
body [class*="breadcrumb-col-"] li a,
body [class*="breadcrumb-col-"] li i { color: var(--idean-primary) !important; }
body .breadcrumb li a:hover { color: var(--idean-dark) !important; }
body .breadcrumb > li + li:before { color: var(--ink-soft); }

/* --- Buttons: a solid fill always carries white ink, icons included --- */
.btn i, .btn .material-icons, .btn .fa, .btn .fas { color: inherit !important; }
.btn-primary, .btn-info, .btn-danger, .btn-success, .btn-inverse, .bg-blue,
a.btn-primary, a.btn-info, a.btn-danger, a.btn-success,
.btn-primary.text-black, .btn-info.text-black,
.btn-danger.text-black, .btn-success.text-black { color: #fff !important; }
.btn-danger {
    background: #d93a2b !important;
    border: 1px solid rgba(255, 255, 255, .3) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .28), 0 6px 18px rgba(217, 58, 43, .32) !important;
}
.btn-success {
    background: #166b3c !important;
    border: 1px solid rgba(255, 255, 255, .3) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .28), 0 6px 18px rgba(22, 107, 60, .32) !important;
}
.btn-danger:hover, .btn-success:hover, .btn-warning:hover { filter: brightness(1.08); }
/* Pills need horizontal room the square base never gave them */
.btn-xs { padding: 4px 11px !important; font-size: 12px !important; }
.btn-sm { padding: 6px 15px !important; }
.btn-xs .material-icons, .btn-xs i { font-size: 15px !important; line-height: 1; }

/* --- Inputs: boxed fields need side padding and a notched label --- */
.form-control, textarea.form-control {
    height: auto !important;
    min-height: 40px;
    padding: 9px 14px !important;
    line-height: 1.45;
}
select.form-control { padding: 8px 12px !important; }
.form-group { margin-bottom: 26px; }
.form-group .form-line { border-bottom: none !important; }
.form-group .form-line:after { display: none !important; }
.form-group .form-line .form-label {
    top: 10px !important;
    left: 14px !important;
    color: var(--ink-soft) !important;
    font-size: 14px;
}
.form-group .form-line.focused .form-label {
    top: -10px !important;
    left: 10px !important;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .92);
    color: var(--idean-primary) !important;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .2px;
}
.help-info, .form-group .help-block { color: var(--ink-soft) !important; }
/* Login fields drop to 5px of padding once filled — too tight inside a pill */
.input100:focus, .has-val.input100 { padding-left: 18px !important; }

/* --- Select widget (bootstrap-select) rides the same glass --- */
.bootstrap-select .dropdown-toggle,
.bootstrap-select > .btn-default { color: var(--ink) !important; }
.bootstrap-select .dropdown-toggle .caret { border-top-color: var(--idean-primary) !important; }
.bootstrap-select .dropdown-menu li a { color: var(--ink) !important; }
.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li a:hover {
    background: rgba(39, 50, 114, .12) !important;
    color: var(--idean-primary) !important;
}

/* --- Modals, alerts, toasts --- */
.modal-content {
    background: var(--glass-bg-strong) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-edge) !important;
    border-radius: 18px !important;
    box-shadow: var(--glass-shine), 0 24px 70px rgba(31, 38, 135, .30) !important;
    color: var(--ink);
}
.modal-header, .modal-footer { border-color: rgba(39, 50, 114, .10) !important; }
.modal-title { font-family: 'Poppins', sans-serif; color: var(--ink); }
.modal-backdrop.in { opacity: .35; }
.alert {
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, .65) !important;
    box-shadow: var(--glass-shadow);
}
.alert-success { background: rgba(31, 138, 76, .14) !important; color: #10592b !important; }
.alert-danger { background: rgba(217, 58, 43, .14) !important; color: #8a1c12 !important; }
.alert-warning { background: rgba(254, 208, 68, .24) !important; color: #6b4e00 !important; }
.alert-info { background: rgba(39, 50, 114, .12) !important; color: var(--idean-primary) !important; }
#toast-container > div {
    border-radius: 14px !important;
    box-shadow: 0 12px 34px rgba(31, 38, 135, .28) !important;
    opacity: 1 !important;
}

/* --- Keyboard focus stays visible on every surface --- */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--idean-primary);
    outline-offset: 2px;
}

/* --- Misc chrome --- */
.table-responsive { border: none !important; }
.card .header .header-dropdown li a { color: var(--ink) !important; }
.sidebar .user-info .info-container .name { color: var(--ink) !important; }
.sidebar .user-info .info-container .email { color: var(--ink-soft) !important; }

/* ============================================================
   Shape + control pass · 2026-08-17

   Radius scale — one rule per role, applied everywhere:
     panels & stat tiles 18px · menus, modals, alerts, chips 14px
     controls (fields, selects, toggles) 12px · menu rows 8px
     checkbox 6px · pills 999px
   The base template mixed 0px, 1px, 2px and 4px across these,
   which is what read as "some sharp, some rounded".
   ============================================================ */

/* --- Checkboxes: one shape, centred, brand ink --- */
[type="checkbox"] + label { position: relative; }
.checkbox_custom_style [type="checkbox"] + label:before,
[type="checkbox"] + label:before {
    top: 50% !important;
    left: 0 !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    border: 1.5px solid var(--field-edge) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, .92) !important;
    transition: background .15s ease, border-color .15s ease;
}
/* the base sheet builds its tick by re-shaping :before and parks a second
   square in :after — both are replaced with a single box + a drawn tick */
[type="checkbox"] + label:after { display: none !important; }
[type="checkbox"]:checked + label:before {
    background: var(--idean-primary) !important;
    border-color: var(--idean-primary) !important;
}
[type="checkbox"]:checked + label:after {
    display: block !important;
    content: '' !important;
    position: absolute;
    top: 50%;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    transform: translateY(-60%) rotate(45deg);
}
th.checkbox_custom_style, td.checkbox_custom_style { text-align: center; vertical-align: middle !important; }
.checkbox_custom_style [type="checkbox"] + label {
    width: 18px;
    height: 18px;
    padding: 0 !important;
    margin: 0 auto !important;
    display: block;
}

/* --- Select widget: one frame, not a pill inside a box --- */
.bootstrap-select { border-bottom: none !important; }
.bootstrap-select.form-control {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}
.bootstrap-select > .dropdown-toggle.btn-default {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    padding: 0 38px 0 14px !important;
    line-height: 1.3;
    text-align: left;
    border-radius: 12px !important;
    border: 1px solid var(--field-edge) !important;
    background: rgba(255, 255, 255, .72) !important;
    box-shadow: inset 0 1px 2px rgba(31, 38, 135, .06) !important;
    transform: none !important;
}
.bootstrap-select > .dropdown-toggle.btn-default:hover { border-color: var(--idean-primary) !important; }
.bootstrap-select.open > .dropdown-toggle.btn-default {
    border-color: var(--idean-primary) !important;
    box-shadow: 0 0 0 4px rgba(39, 50, 114, .14) !important;
}
.bootstrap-select .filter-option { line-height: 1.3; }
/* the plugin centres .caret against the .btn-group itself — giving .bs-caret
   its own positioning made that 50% resolve against the wrong box */
.bootstrap-select.btn-group .dropdown-toggle .bs-caret {
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    transform: translateY(-50%);
    line-height: 0;
}
.bootstrap-select.btn-group .dropdown-toggle .bs-caret .caret {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
}
.bootstrap-select .dropdown-menu { border-radius: 12px !important; padding: 6px !important; }
/* A long list (the year picker runs to 13 rows) grows past the space the
   plugin measured, and when it flips to dropup the overflow lands off the
   top of the window where there is nothing to scroll. Cap the sheet, keep
   the search box pinned, and let only the option list scroll. The plugin
   writes its own inline max-height, so these carry !important. */
/* NOTE: the menu wrapper carries a literal `open` class at all times in this
   app's markup — visibility is driven by `.open` on the .btn-group parent.
   Only ever match the parent, or every select on the page hangs open. */
.bootstrap-select.open > .dropdown-menu {
    display: flex;
    flex-direction: column;
    max-height: 42vh !important;
    overflow: hidden !important;
}
.bootstrap-select .dropdown-menu > .bs-searchbox { flex: 0 0 auto; }
.bootstrap-select .dropdown-menu > .inner,
.bootstrap-select .dropdown-menu .dropdown-menu.inner {
    flex: 1 1 auto;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}
.bootstrap-select .dropdown-menu li a {
    padding: 9px 14px !important;
    line-height: 1.4;
    border-radius: 8px;
}
.bootstrap-select .bs-searchbox {
    padding: 6px !important;
    position: relative;
    border-bottom: none !important;
}
/* the base sheet parks a 25px Material search glyph at top:0/left:10px,
   straight through whatever the user types */
.bootstrap-select .bs-searchbox:after {
    top: 50% !important;
    left: 16px !important;
    transform: translateY(-50%);
    font-size: 18px !important;
    line-height: 1;
    color: var(--ink-soft);
}
.bootstrap-select .bs-searchbox .form-control {
    border-radius: 12px !important;
    min-height: 38px;
    padding-left: 42px !important;
}
/* the select and its Apply button were flush against each other */
.select-and-apply-area {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.select-and-apply-area .form-group { margin-bottom: 0 !important; flex: 0 0 auto; width: auto; }
.select-and-apply-area .form-group.width-300 { width: 300px; }
.select-and-apply-area .form-line { border: none !important; }

/* Card headers put an h2 and one or two selects on one grid row; on the
   float grid they collided, and stacked flush once the columns wrapped. */
.card .header .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 14px;
}
.card .header .row > [class*="col-"] { display: flex; align-items: center; }
.card .header .row > [class*="col-"] > .form-group { width: 100%; }
.card .header h2 { margin: 0 !important; }
.card .header .form-group { margin-bottom: 0 !important; }
.card .header .form-line { border: none !important; }

/* --- Dashboard: stat tiles as glass, colour carried by the icon --- */
.info-box, .info-box-2, .info-box-3, .info-box-4 {
    background: var(--glass-bg-strong) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-edge) !important;
    border-radius: 18px !important;
    box-shadow: var(--glass-shine), var(--glass-shadow) !important;
    height: auto !important;
    min-height: 96px;
    align-items: center;
    padding: 14px 18px 14px 14px;
    margin-bottom: 24px;
    transition: transform .3s var(--spring), box-shadow .3s ease;
}
.info-box:hover {
    transform: translateY(-3px);
    box-shadow: var(--glass-shine), 0 16px 44px rgba(31, 38, 135, .24) !important;
}
/* the 0.95s dark wash on hover is the template's age showing */
.info-box.hover-expand-effect:after, .info-box.hover-expand-effect:hover:after { display: none !important; }
.info-box .icon {
    width: 62px !important;
    height: 62px;
    flex: 0 0 62px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--tile-soft, rgba(39, 50, 114, .12)) !important;
}
.info-box .icon i, .info-box .icon .material-icons {
    font-size: 26px !important;
    line-height: 1 !important;
    color: var(--tile-accent, var(--idean-primary)) !important;
}
.info-box .content { padding: 0 0 0 16px !important; }
.info-box .content .text {
    color: var(--ink-soft) !important;
    font-size: 13px !important;
    margin-top: 0 !important;
    letter-spacing: .2px;
}
.info-box .content .text h4 { font-size: 13px; font-weight: 600; margin: 0; color: inherit; }
.info-box .content .number {
    font-family: 'Poppins', sans-serif;
    font-size: 28px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    margin-top: 2px !important;
    line-height: 1.15;
}
/* muted jewel tones: distinct per tile, all legible on white glass */
.info-box.bg-pink { --tile-accent: #b3306e; --tile-soft: rgba(179, 48, 110, .12); }
.info-box.bg-cyan { --tile-accent: #155e75; --tile-soft: rgba(21, 94, 117, .12); }
.info-box.bg-purple { --tile-accent: #6d28d9; --tile-soft: rgba(109, 40, 217, .12); }
.info-box.bg-light-green { --tile-accent: #14652f; --tile-soft: rgba(20, 101, 47, .12); }
.info-box.bg-blue-grey { --tile-accent: #475569; --tile-soft: rgba(71, 85, 105, .12); }
.info-box.bg-orange { --tile-accent: #9a4a08; --tile-soft: rgba(154, 74, 8, .12); }
.info-box.bg-red { --tile-accent: #b91c1c; --tile-soft: rgba(185, 28, 28, .12); }
.info-box.bg-brown { --tile-accent: #78350f; --tile-soft: rgba(120, 53, 15, .12); }

/* Quick-access links: same pill everywhere, colour reduced to a dot */
.card .body .btn[class*="bg-"] {
    background: rgba(255, 255, 255, .72) !important;
    border: 1px solid var(--field-edge) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    margin: 0 8px 10px 0;
    padding: 8px 16px !important;
}
.card .body .btn[class*="bg-"]:before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 9px;
    border-radius: 50%;
    background: var(--idean-primary);
    vertical-align: 1px;
}
.card .body .btn.bg-teal:before { background: #0f766e; }
.card .body .btn.bg-green:before { background: #15803d; }
.card .body .btn.bg-orange:before { background: #b45309; }
.card .body .btn.bg-deep-purple:before { background: #6d28d9; }
.card .body .btn.bg-blue:before { background: #1d4ed8; }
.card .body .btn.bg-light-green:before { background: #4d7c0f; }
.card .body .btn.bg-light-blue:before { background: #0369a1; }
.card .body .btn.bg-cyan:before { background: #0e7490; }
.card .body .btn[class*="bg-"]:hover {
    background: var(--idean-primary) !important;
    border-color: var(--idean-primary) !important;
    color: #fff !important;
}

/* --- One radius scale across the shell --- */
.alert, .dropdown-menu, .sweet-alert, .modal-content, .popover, .tooltip-inner { border-radius: 14px !important; }
.modal-content { border-radius: 18px !important; }
.table-responsive, .card .body > .table-responsive { border-radius: 14px; }
.pagination > li > a, .pagination > li > span { border-radius: 12px !important; }
.label, .badge { border-radius: 999px !important; padding: .3em .7em; }
.well, .panel, .jumbotron { border-radius: 18px !important; }
.input-group-addon { border-radius: 12px !important; border-color: var(--field-edge) !important; }
.progress { border-radius: 999px !important; }

/* --- Login mark: a plate sized for the wordmark, not a circle --- */
.login100-form-logo {
    display: block !important;
    align-self: center;
    margin: 0 auto 18px !important;
    width: -webkit-fit-content !important;
    width: fit-content !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 18px 26px !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(31, 38, 135, .18) !important;
    line-height: 0;
}
.login100-form-logo img {
    width: auto !important;
    height: 56px !important;
    max-width: 220px;
}

/* ---------- No-blur fallback: solid light panels, same ink ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .navbar, .sidebar, .dropdown-menu, .btn-default { background: #f2f4ff !important; }
    .card, .wrap-login100 { background: #f8f9ff !important; }
    .wrap-login100::before { display: none; }
}