/* ============================================================
   WHAPI Design Refresh — head-styles
   Structural + layout improvements. Color overrides sunt in
   footer-overrides.blade.php (incarca dupa admin CSS).
   ============================================================ */

/* ============================================================
   FONT INTER — servit LOCAL (fara Google Fonts, fara retea externa)
   Font variabil, greutati 400-800. URL-uri relative la acest fisier:
   public/modificari-platforma/fonts/. latin-ext contine diacriticele
   romanesti (ă â î ș ț).
   ============================================================ */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Plus Jakarta Sans — titluri (h1-h5). Variabil, greutati 400-800. */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Variabile proprii ------------------------------------ */
:root {
    --dr-radius-sm:   6px;
    --dr-radius-md:  10px;
    --dr-radius-lg:  14px;
    --dr-radius-xl:  20px;
    --dr-shadow-xs:  0 1px  3px rgba(0,0,0,.05), 0 1px  2px rgba(0,0,0,.03);
    --dr-shadow-sm:  0 2px  8px rgba(0,0,0,.06), 0 1px  3px rgba(0,0,0,.04);
    --dr-shadow-md:  0 4px 16px rgba(0,0,0,.08), 0 2px  6px rgba(0,0,0,.04);
    --dr-shadow-lg:  0 8px 32px rgba(0,0,0,.09), 0 4px 12px rgba(0,0,0,.05);
    --dr-shadow-xl:  0 16px 48px rgba(0,0,0,.12), 0 6px 18px rgba(0,0,0,.06);
    --dr-transition: 0.16s cubic-bezier(.4,0,.2,1);
    --dr-border:     rgba(0,0,0,.07);
}

/* ============================================================
   FONTURI — strategie duala:
   - Inter: body text, paragrafe, butoane, formulare, navigatie,
     tabele (cifre tabulare aliniate in coloane).
   - Plus Jakarta Sans: titluri h1-h5 si titluri de pagina/card/
     modal, bold 700 — personalitate geometrica calda.
   ============================================================ */

body,
input,
button,
select,
textarea,
.select2-container,
.select2-search__field {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01';
}

/* Cifrele din tabele raman aliniate vertical in coloane */
.table {
    font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5,
.lw-page-title,
.card-title,
.modal-title {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    /* PJS are forme late si rotunde — 600 se percepe ca un bold confortabil,
       700 devenea apasator in interfata densa */
    font-weight: 550 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.3 !important;
}

h6, .h6, legend {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 550 !important;
}

.lw-page-title {
    font-size: 1.6rem !important;
    letter-spacing: -0.02em !important;
}

/* ============================================================
   LAYOUT — Background pagini
   ============================================================ */

/* Pagina autentificata (doar tema deschisa; in cea inchisa ramane culoarea din setari) */
html:not([lw-theme-mode="dark"]) body.lw-authenticated-page {
    background-color: #f1f5f9 !important;
}

/* ============================================================
   A. LOGIN / AUTH — background si card
   ============================================================ */

body.lw-guest-page {
    background: linear-gradient(145deg, #f8fafc 0%, #eef2ff 40%, #f0fdf4 100%) !important;
    min-height: 100vh;
}

.lw-guest-page-container-block {
    padding-top: 2.5rem !important;
    padding-bottom: 3rem !important;
}

.card.lw-form-card-box {
    border-radius: var(--dr-radius-xl) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.05) !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    overflow: hidden;
}

.card.lw-form-card-box .card-header {
    border-bottom: 1px solid rgba(0,0,0,.07) !important;
    padding: 1.75rem 2rem 1.5rem !important;
    background: transparent !important;
    font-size: 1.1rem !important;
    font-weight: 550 !important;
    letter-spacing: -0.02em !important;
}

.card.lw-form-card-box .card-body {
    padding: 1.75rem 2rem 1.25rem !important;
}

.card.lw-form-card-box .card-footer {
    padding: 1.25rem 2rem 2rem !important;
    background: transparent !important;
}

.card.lw-form-card-box .btn-block {
    padding-top: .875rem !important;
    padding-bottom: .875rem !important;
    font-size: 1rem !important;
}


/* ============================================================
   C. SIDEBAR — active pill + structura
   ============================================================ */

.navbar.lw-sidebar-container {
    border-right: 1px solid var(--dr-border) !important;
    box-shadow: 2px 0 16px rgba(0,0,0,.04) !important;
}

/* Indicator thin de stanga — eliminat, inlocuit cu pill */
.lw-minimized-menu .navbar-vertical.navbar-expand-md
  .navbar-nav .nav-link.active:before {
    display: none !important;
}

/* Nav item principal — active pill */
.navbar-vertical .navbar-nav > .nav-item > .nav-link {
    border-radius: var(--dr-radius-sm) !important;
    margin: 1px 8px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    transition: background-color var(--dr-transition),
                color var(--dr-transition) !important;
}

.navbar-vertical .navbar-nav > .nav-item > .nav-link:hover {
    background-color: rgba(0,0,0,.04) !important;
}

.navbar-vertical .navbar-nav > .nav-item > .nav-link.active {
    border-radius: var(--dr-radius-sm) !important;
    font-weight: 550 !important;
}

/* Sub-nav items */
.navbar-vertical .navbar-nav .nav .nav-link {
    border-radius: var(--dr-radius-sm) !important;
    margin: 1px 4px !important;
    transition: background-color var(--dr-transition),
                color var(--dr-transition) !important;
}

.navbar-vertical .navbar-nav .nav .nav-link:hover {
    background-color: rgba(0,0,0,.04) !important;
}

/* Navbar top */
#navbar-main {
    box-shadow: var(--dr-shadow-xs) !important;
    border-bottom: 1px solid var(--dr-border) !important;
}


/* ============================================================
   D. ANIMATII — doar pop scurt pe modal
   Animatiile de intrare pe .main-content si card-stats au fost
   ELIMINATE: intarziau perceptual afisarea continutului la fiecare
   navigare. Pastram doar scale-in-ul modalului (scurt, punctual).
   NOTA: fara transform rezidual pe .main-content (vezi garantia de
   mai jos) — altfel .modal-backdrop se deseneaza peste modal.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
    @keyframes dr-scalein {
        from { opacity: 0; transform: scale(.97); }
        to   { opacity: 1; transform: scale(1); }
    }

    .modal.show .modal-dialog {
        animation: dr-scalein 0.2s ease-out backwards;
    }
}

/* Garantie suplimentara: .main-content nu are voie sa aiba transform
   sau filter rezidual (ar rupe pozitionarea fixed si z-index-ul
   modalelor din interior). Declaratiile !important bat animatiile. */
.main-content {
    transform: none !important;
    filter: none !important;
}

/* ============================================================
   F. BUTOANE — click effect + ripple CSS
   ============================================================ */

.btn {
    border-radius: var(--dr-radius-sm) !important;
    font-weight: 550 !important;
    letter-spacing: -0.01em !important;
    position: relative;
    overflow: hidden;
    transition: background-color var(--dr-transition),
                border-color var(--dr-transition),
                box-shadow var(--dr-transition),
                transform var(--dr-transition) !important;
}

.btn::after {
    content: '';
    position: absolute;
    inset: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    transform: translate(-50%, -50%);
    transition: width .5s ease, height .5s ease, opacity .5s ease;
    opacity: 0;
    pointer-events: none;
}

.btn:active::after {
    width: 300%;
    height: 300%;
    opacity: 0;
    transition: 0s;
}

.btn:not(:disabled):not(.disabled):hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--dr-shadow-sm) !important;
}

.btn:not(:disabled):not(.disabled):active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

.btn-sm { border-radius: var(--dr-radius-sm) !important; }
.btn-lg { border-radius: var(--dr-radius-md) !important; }

/* ============================================================
   CARDURI
   ============================================================ */

.card {
    border-radius: var(--dr-radius-lg) !important;
    box-shadow: var(--dr-shadow-sm) !important;
    border: 1px solid var(--dr-border) !important;
    transition: box-shadow var(--dr-transition),
                transform var(--dr-transition) !important;
}

.card-header {
    border-radius: var(--dr-radius-lg) var(--dr-radius-lg) 0 0 !important;
    border-bottom: 1px solid var(--dr-border) !important;
    font-weight: 550 !important;
    letter-spacing: -0.01em !important;
}

.card-footer {
    border-radius: 0 0 var(--dr-radius-lg) var(--dr-radius-lg) !important;
    border-top: 1px solid var(--dr-border) !important;
}

.card.lw-whatsapp-chat-block-container:hover {
    box-shadow: var(--dr-shadow-sm) !important;
    transform: none !important;
}

/* E. Card stats — imbunatatite */
.card.card-stats {
    border-radius: var(--dr-radius-lg) !important;
    transition: box-shadow var(--dr-transition),
                transform var(--dr-transition) !important;
}

.card.card-stats:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--dr-shadow-md) !important;
}

.card.card-stats .card-body {
    padding: 1.1rem 1.25rem !important;
}

.icon.icon-shape {
    width: 44px !important;
    height: 44px !important;
    border-radius: var(--dr-radius-md) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}

.icon.icon-shape i {
    font-size: 1.1rem !important;
}

.card-stats .card-title {
    font-size: .7rem !important;
    letter-spacing: .05em !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
}

.card-stats .h2 {
    font-size: 1.65rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.035em !important;
    line-height: 1 !important;
    margin-bottom: 0 !important;
}

/* Card title general */
.card-title {
    font-weight: 550 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.3 !important;
    margin-bottom: .4rem !important;
}

.card-title.text-uppercase {
    font-size: .72rem !important;
    letter-spacing: .05em !important;
    font-weight: 700 !important;
}

.card-subtitle {
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
}

/* ============================================================
   FIELDSET / LEGEND
   ============================================================ */

fieldset:not(.filepond--file-wrapper) {
    border-radius: var(--dr-radius-lg) !important;
    border: 1px solid var(--dr-border) !important;
}

fieldset:not(.filepond--file-wrapper) legend {
    border-radius: var(--dr-radius-sm) !important;
    font-weight: 550 !important;
    letter-spacing: -0.01em !important;
    font-size: .85rem !important;
}

/* ============================================================
   FORM CONTROLS
   ============================================================ */

/* K. Spacing */
.form-group {
    margin-bottom: 1.25rem !important;
}

.form-control,
.custom-select {
    border-radius: var(--dr-radius-sm) !important;
    border-color: rgba(0,0,0,.13) !important;
    font-size: .9rem !important;
    transition: border-color var(--dr-transition),
                box-shadow var(--dr-transition) !important;
}

.form-control:focus,
.custom-select:focus {
    border-color: rgba(0,0,0,.25) !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,.06) !important;
}

/* Input group corners */
.input-group > .form-control:first-child,
.input-group > .input-group-prepend > .input-group-text {
    border-radius: var(--dr-radius-sm) 0 0 var(--dr-radius-sm) !important;
}

.input-group > .form-control:last-child,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append > .btn {
    border-radius: 0 var(--dr-radius-sm) var(--dr-radius-sm) 0 !important;
}

.input-group-text {
    border-radius: var(--dr-radius-sm) !important;
    border-color: rgba(0,0,0,.13) !important;
}

/* #3 input-group-alternative (Argon legacy) */
.input-group-alternative {
    box-shadow: none !important;
    border: 1px solid rgba(0,0,0,.13) !important;
    border-radius: var(--dr-radius-sm) !important;
    transition: border-color var(--dr-transition),
                box-shadow var(--dr-transition) !important;
}

.input-group-alternative:focus-within {
    border-color: rgba(0,0,0,.25) !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,.06) !important;
}

.input-group-alternative .form-control,
.input-group-alternative .form-control:focus {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.input-group-alternative .input-group-text {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: var(--dr-radius-sm) 0 0 var(--dr-radius-sm) !important;
}

/* G. Custom checkbox / radio */
.custom-control-label::before {
    border-radius: 5px !important;
    border: 2px solid rgba(0,0,0,.18) !important;
    width: 1.1rem !important;
    height: 1.1rem !important;
    top: .18rem !important;
    transition: background-color var(--dr-transition),
                border-color var(--dr-transition),
                box-shadow var(--dr-transition) !important;
}

.custom-control-label::after {
    width: 1.1rem !important;
    height: 1.1rem !important;
    top: .18rem !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    border-radius: 5px !important;
    border-color: transparent !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(0,0,0,.08) !important;
}

/* Radio — ramanem cu cerc dar mai mic si curat */
.custom-radio .custom-control-label::before {
    border-radius: 50% !important;
}

/* ============================================================
   H. PROGRESS BARS
   ============================================================ */

.progress {
    border-radius: 99px !important;
    height: 6px !important;
    background-color: rgba(0,0,0,.07) !important;
    overflow: hidden;
}

.progress-bar {
    border-radius: 99px !important;
}

/* ============================================================
   MODALS
   ============================================================ */

.modal-backdrop.show {
    background-color: rgba(0,0,0,.5) !important;
    /* backdrop-filter: blur() ELIMINAT — cauza freeze-ului la deschis/inchis modal
       (GPU compositing pe viewport intreg bloca UI pe device-uri medii) */
}

.modal-content {
    border-radius: var(--dr-radius-xl) !important;
    box-shadow: var(--dr-shadow-xl) !important;
    border: none !important;
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--dr-border) !important;
    padding: 1.25rem 1.5rem !important;
}

.modal-header .h1, .modal-header .h2, .modal-header .h3, .modal-header .h4,
.modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4 {
    font-size: 1.05rem !important;
    font-weight: 550 !important;
    letter-spacing: -0.02em !important;
}

.modal-footer {
    border-top: 1px solid var(--dr-border) !important;
    padding: 1rem 1.5rem !important;
}

/* ============================================================
   DROPDOWN-URI
   ============================================================ */

.dropdown-menu {
    border-radius: var(--dr-radius-md) !important;
    box-shadow: var(--dr-shadow-lg) !important;
    border: 1px solid var(--dr-border) !important;
    padding: 6px !important;
}

.dropdown-item {
    border-radius: var(--dr-radius-sm) !important;
    font-size: .875rem !important;
    transition: background-color var(--dr-transition),
                color var(--dr-transition) !important;
}

.dropdown-divider {
    margin: 6px 0 !important;
}

/* ============================================================
   BADGE-URI
   ============================================================ */

.badge {
    border-radius: var(--dr-radius-sm) !important;
    font-weight: 550 !important;
    letter-spacing: .01em !important;
    font-family: 'Inter', sans-serif !important;
}

/* ============================================================
   NAV TABS
   ============================================================ */

.nav-tabs .nav-link {
    border-radius: var(--dr-radius-sm) var(--dr-radius-sm) 0 0 !important;
    font-weight: 500 !important;
    font-size: .875rem !important;
    transition: background-color var(--dr-transition),
                color var(--dr-transition) !important;
}

/* ============================================================
   TABELE
   ============================================================ */

.table thead th {
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    font-size: .72rem !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    border-bottom-width: 1px !important;
}

.table td,
.table th {
    vertical-align: middle !important;
    font-size: .875rem !important;
}

.table tbody tr {
    transition: background-color var(--dr-transition) !important;
}

.table tbody tr:hover > td,
.table tbody tr:hover > th {
    background-color: rgba(0,0,0,.025) !important;
}

.table-responsive {
    border-radius: var(--dr-radius-md) !important;
    overflow: hidden;
}

/* I. DataTable empty state */
td.dataTables_empty {
    padding: 3.5rem 1rem !important;
    color: #94a3b8 !important;
    font-style: normal !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
    text-align: center !important;
}

/* ============================================================
   DATATABLES — toolbar (search, entries, info) + paginare
   ============================================================ */

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter input[type="search"] {
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--dr-radius-sm) !important;
    padding: .45rem .75rem !important;
    font-size: .875rem !important;
    background-color: transparent;
    box-shadow: none !important;
    outline: none !important;
    margin-left: .5rem;
    transition: border-color var(--dr-transition),
                box-shadow var(--dr-transition);
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--lw-primary-color, #00a884) !important;
    box-shadow: 0 0 0 3px rgba(0,168,132,.12) !important;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--dr-radius-sm) !important;
    padding: .35rem 1.5rem .35rem .6rem !important;
    font-size: .85rem !important;
    background-color: transparent;
    outline: none !important;
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
    font-size: .85rem !important;
    font-weight: 500 !important;
    color: #64748b;
    align-items: center;
}

.dataTables_wrapper .dataTables_info {
    font-size: .8rem !important;
    color: #94a3b8 !important;
    padding-top: 1rem !important;
}

/* Paginare tip pill */
.pagination .page-link {
    border: none !important;
    border-radius: var(--dr-radius-sm) !important;
    margin: 0 2px !important;
    min-width: 2.1rem;
    text-align: center;
    color: #475569;
    font-weight: 500 !important;
}

.pagination .page-item.disabled .page-link {
    background-color: transparent !important;
    color: #cbd5e1 !important;
}

/* ============================================================
   STAT CARDS — tipografie cifre
   ============================================================ */

.card.card-stats .card-body .h2,
.card.card-stats .card-body .font-weight-bold {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em !important;
}

.card.card-stats .card-title {
    font-size: .72rem !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
}

/* ============================================================
   ALERTE
   ============================================================ */

.alert {
    border-radius: var(--dr-radius-md) !important;
    border: none !important;
    font-weight: 500 !important;
    font-size: .875rem !important;
}

/* ============================================================
   LIST GROUP
   ============================================================ */

.list-group-item {
    transition: background-color var(--dr-transition) !important;
    font-size: .875rem !important;
}

.list-group-item:first-child { border-radius: var(--dr-radius-md) var(--dr-radius-md) 0 0 !important; }
.list-group-item:last-child  { border-radius: 0 0 var(--dr-radius-md) var(--dr-radius-md) !important; }

/* ============================================================
   PAGINARE
   ============================================================ */

.page-link {
    border-radius: var(--dr-radius-sm) !important;
    font-size: .85rem !important;
    transition: background-color var(--dr-transition),
                border-color var(--dr-transition) !important;
}

/* ============================================================
   J. BREADCRUMB — cleanup hardcoded dark bg
   ============================================================ */

.lw-breadcrumb-container {
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 0 8px 0 !important;
}

.lw-breadcrumb-container .breadcrumb {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: .8rem !important;
}

.breadcrumb {
    border-radius: var(--dr-radius-sm) !important;
}

/* ============================================================
   SWEETALERT2
   ============================================================ */

div:where(.swal2-container) div:where(.swal2-popup) {
    border-radius: var(--dr-radius-xl) !important;
    box-shadow: var(--dr-shadow-xl) !important;
}

div:where(.swal2-container) button:where(.swal2-styled) {
    border-radius: var(--dr-radius-sm) !important;
    font-weight: 550 !important;
    font-family: 'Inter', sans-serif !important;
    letter-spacing: -0.01em !important;
    transition: transform var(--dr-transition),
                box-shadow var(--dr-transition) !important;
}

div:where(.swal2-container) button:where(.swal2-styled):hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--dr-shadow-sm) !important;
}

/* ============================================================
   TOAST NOTIFICARI
   ============================================================ */

.mdtoast {
    border-radius: var(--dr-radius-md) !important;
    box-shadow: var(--dr-shadow-lg) !important;
    font-family: 'Inter', sans-serif !important;
}

/* ============================================================
   DARK THEME
   ============================================================ */

[lw-theme-mode="dark"] .card,
[lw-theme-mode="dark"] fieldset:not(.filepond--file-wrapper) {
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.30),
                0 1px 3px rgba(0,0,0,.22) !important;
}

[lw-theme-mode="dark"] .card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.38),
                0 2px 6px rgba(0,0,0,.26) !important;
}

[lw-theme-mode="dark"] .card-header,
[lw-theme-mode="dark"] .card-footer {
    border-color: rgba(255,255,255,.07) !important;
}

[lw-theme-mode="dark"] .navbar.lw-sidebar-container {
    border-right-color: rgba(255,255,255,.06) !important;
    box-shadow: 2px 0 16px rgba(0,0,0,.30) !important;
}

[lw-theme-mode="dark"] #navbar-main {
    border-bottom-color: rgba(255,255,255,.06) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.24) !important;
}

[lw-theme-mode="dark"] .navbar-vertical .navbar-nav > .nav-item > .nav-link:hover,
[lw-theme-mode="dark"] .navbar-vertical .navbar-nav .nav .nav-link:hover {
    background-color: rgba(255,255,255,.06) !important;
}

[lw-theme-mode="dark"] .form-control,
[lw-theme-mode="dark"] .custom-select {
    border-color: rgba(255,255,255,.12) !important;
}

[lw-theme-mode="dark"] .form-control:focus,
[lw-theme-mode="dark"] .custom-select:focus {
    border-color: rgba(255,255,255,.24) !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,.07) !important;
}

[lw-theme-mode="dark"] .input-group-alternative {
    border-color: rgba(255,255,255,.12) !important;
}

[lw-theme-mode="dark"] .input-group-alternative:focus-within {
    border-color: rgba(255,255,255,.24) !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,.07) !important;
}

[lw-theme-mode="dark"] .input-group-text {
    border-color: rgba(255,255,255,.12) !important;
}

[lw-theme-mode="dark"] .dropdown-menu {
    border-color: rgba(255,255,255,.08) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.50),
                0 4px 12px rgba(0,0,0,.34) !important;
}

[lw-theme-mode="dark"] .alert {
    border: none !important;
}

[lw-theme-mode="dark"] .modal-content {
    box-shadow: 0 16px 48px rgba(0,0,0,.56),
                0 6px 18px rgba(0,0,0,.36) !important;
}

[lw-theme-mode="dark"] div:where(.swal2-container) div:where(.swal2-popup) {
    box-shadow: 0 16px 48px rgba(0,0,0,.56) !important;
}

[lw-theme-mode="dark"] .table thead th {
    color: rgba(255,255,255,.4) !important;
}

[lw-theme-mode="dark"] .card-stats .card-title {
    color: rgba(255,255,255,.4) !important;
}

[lw-theme-mode="dark"] .table tbody tr:hover > td,
[lw-theme-mode="dark"] .table tbody tr:hover > th {
    background-color: rgba(255,255,255,.04) !important;
}

[lw-theme-mode="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18);
}

[lw-theme-mode="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.28);
}

/* system_default dark via media query */
@media (prefers-color-scheme: dark) {
    [lw-theme-mode="system_default"] .card,
    [lw-theme-mode="system_default"] fieldset:not(.filepond--file-wrapper) {
        border-color: rgba(255,255,255,.07) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,.30),
                    0 1px 3px rgba(0,0,0,.22) !important;
    }
    [lw-theme-mode="system_default"] .card:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,.38) !important;
    }
    [lw-theme-mode="system_default"] .navbar.lw-sidebar-container {
        border-right-color: rgba(255,255,255,.06) !important;
    }
    [lw-theme-mode="system_default"] #navbar-main {
        border-bottom-color: rgba(255,255,255,.06) !important;
    }
    [lw-theme-mode="system_default"] .navbar-vertical .navbar-nav > .nav-item > .nav-link:hover,
    [lw-theme-mode="system_default"] .navbar-vertical .navbar-nav .nav .nav-link:hover {
        background-color: rgba(255,255,255,.06) !important;
    }
    [lw-theme-mode="system_default"] .form-control,
    [lw-theme-mode="system_default"] .custom-select,
    [lw-theme-mode="system_default"] .input-group-alternative {
        border-color: rgba(255,255,255,.12) !important;
    }
    [lw-theme-mode="system_default"] .dropdown-menu {
        border-color: rgba(255,255,255,.08) !important;
    }
    [lw-theme-mode="system_default"] ::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.18);
    }
    [lw-theme-mode="system_default"] .table thead th,
    [lw-theme-mode="system_default"] .card-stats .card-title {
        color: rgba(255,255,255,.4) !important;
    }
}

/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.16);
    border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.26); }