/* =====================================================================
   GLASS LAYER — frosted, translucent surfaces over a soft colour wash.
   Loaded after strong-ui.css. Tints follow the admin theme colour.
   Text sits on surfaces opaque enough to stay readable; menus and
   dialogs are kept nearly solid on purpose.
   ===================================================================== */

:root {
    --glass-bg: rgba(255, 255, 255, 0.58);
    --glass-bg-strong: rgba(255, 255, 255, 0.78);
    --glass-edge: rgba(255, 255, 255, 0.85);
    --glass-line: rgba(20, 33, 61, 0.1);
    --glass-blur: blur(18px) saturate(1.5);
    --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 22px 44px -30px rgba(20, 33, 61, 0.55);
    --app-card-bg: rgba(255, 255, 255, 0.58);
    --app-surface: rgba(255, 255, 255, 0.62);
    --app-thead-bg: rgba(255, 255, 255, 0.5);
    --app-card-border: rgba(255, 255, 255, 0.85);
    --app-border: rgba(20, 33, 61, 0.08);
    --ui-line: rgba(20, 33, 61, 0.1);
}
body.theme-dark {
    --glass-bg: rgba(32, 32, 50, 0.55);
    --glass-bg-strong: rgba(32, 32, 50, 0.82);
    --glass-edge: rgba(255, 255, 255, 0.12);
    --glass-line: rgba(255, 255, 255, 0.1);
    --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 22px 44px -28px rgba(0, 0, 0, 0.9);
    --app-card-bg: rgba(32, 32, 50, 0.55);
    --app-surface: rgba(26, 26, 42, 0.6);
    --app-thead-bg: rgba(255, 255, 255, 0.05);
    --app-card-border: rgba(255, 255, 255, 0.12);
    --app-border: rgba(255, 255, 255, 0.08);
    --ui-line: rgba(255, 255, 255, 0.1);
}

/* ---- The colour wash behind everything ---- */
html { background: #eef2fb; }
body.theme-dark, html:has(body.theme-dark) { background: #11111c; }
body { background: transparent !important; position: relative; }
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(46vw 46vw at 8% -6%, rgba(var(--bs-primary-rgb), 0.30), transparent 62%),
        radial-gradient(40vw 40vw at 104% 10%, rgba(224, 164, 156, 0.42), transparent 60%),
        radial-gradient(44vw 44vw at 82% 104%, rgba(var(--bs-primary-rgb), 0.20), transparent 62%),
        radial-gradient(36vw 36vw at 18% 100%, rgba(120, 160, 255, 0.26), transparent 60%),
        linear-gradient(180deg, #f6f8fe 0%, #eef2fb 100%);
}
body.theme-dark::before {
    background:
        radial-gradient(46vw 46vw at 8% -6%, rgba(var(--bs-primary-rgb), 0.28), transparent 62%),
        radial-gradient(40vw 40vw at 104% 10%, rgba(224, 164, 156, 0.16), transparent 60%),
        radial-gradient(44vw 44vw at 82% 104%, rgba(var(--bs-primary-rgb), 0.18), transparent 62%),
        linear-gradient(180deg, #151523 0%, #11111c 100%);
}
#main, #main > .main-content, #app, .page-content { background: transparent !important; }

/* ---- Frosted surfaces ---- */
.card, .list-surface, .attn-item, .today-card, .app-footer-card {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-edge) !important;
    box-shadow: var(--glass-shadow) !important;
}
.card { border-radius: 20px !important; }
.list-surface { border-radius: 20px !important; }
.card .card, .card .list-surface, .list-surface .card {
    /* a card inside a card: no second blur, just a lighter pane */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.45) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
body.theme-dark .card .card, body.theme-dark .card .list-surface { background: rgba(255, 255, 255, 0.05) !important; box-shadow: none !important; }
.card-header, .card-footer, .list-footer, .list-surface > .list-toolbar { background: transparent !important; border-color: var(--glass-line) !important; }
.card:hover:not(.card .card) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 26px 50px -30px rgba(20, 33, 61, 0.65) !important; }
a.card:hover, .mk-card:hover, .attn-item:hover { transform: translateY(-3px); }
.attn-item.is-hot { background: linear-gradient(0deg, rgba(226, 87, 76, 0.12), rgba(226, 87, 76, 0.12)), var(--glass-bg) !important; border-color: rgba(226, 87, 76, 0.55) !important; }

/* ---- Sidebar and top bar: long glass panels ---- */
.sidebar-wrapper {
    background: var(--glass-bg-strong) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    backdrop-filter: blur(22px) saturate(1.6);
    border-right: 1px solid var(--glass-edge) !important;
    box-shadow: 18px 0 40px -34px rgba(20, 33, 61, 0.5);
}
body.rtl .sidebar-wrapper { border-left: 1px solid var(--glass-edge) !important; border-right: 0 !important; }
.sidebar-wrapper .sidebar-header { background: transparent !important; }
.sidebar-item.active > .sidebar-link {
    background: linear-gradient(135deg, var(--bs-primary), rgba(var(--bs-primary-rgb), 0.82)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 22px -12px rgba(var(--bs-primary-rgb), 0.95) !important;
}
.app-header, .app-header .navbar {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-edge) !important;
}
.app-header .navbar { background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0 !important; }
.app-header .hdr-icon-btn, .app-header .user-chip {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid var(--glass-edge) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 16px -12px rgba(20, 33, 61, 0.5);
}
body.theme-dark .app-header .hdr-icon-btn, body.theme-dark .app-header .user-chip { background: rgba(255, 255, 255, 0.07) !important; box-shadow: none; }

/* ---- Tables on glass ---- */
.table { --bs-table-bg: transparent; background: transparent !important; }
.table > :not(caption) > * > * { background-color: transparent; }
.table thead th { background: var(--app-thead-bg) !important; border-bottom: 1.5px solid var(--glass-line) !important; }
.table tbody td { border-color: var(--glass-line) !important; }
.table-hover > tbody > tr:hover > *, .list-surface .table tbody tr:hover > * { background: rgba(var(--bs-primary-rgb), 0.08) !important; }

/* ---- Controls: frosted fields and glass buttons ---- */
.form-control, .form-select, .input-group-text, .multiselect__tags, .list-search .form-control {
    background-color: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(20, 33, 61, 0.16) !important;
    box-shadow: inset 0 1px 2px rgba(20, 33, 61, 0.05);
}
.form-control:focus, .form-select:focus { background-color: rgba(255, 255, 255, 0.95) !important; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: rgba(20, 33, 61, 0.06) !important; }
body.theme-dark .form-control, body.theme-dark .form-select, body.theme-dark .input-group-text, body.theme-dark .multiselect__tags { background-color: rgba(255, 255, 255, 0.07) !important; border-color: rgba(255, 255, 255, 0.2) !important; box-shadow: none; }
.btn-primary {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 20px -12px rgba(var(--bs-primary-rgb), 0.95) !important;
}
.btn-outline-primary, .btn-outline-secondary, .btn-light, .btn-outline-danger, .list-icon-btn {
    background: rgba(255, 255, 255, 0.6) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.btn-outline-primary:hover { background: var(--bs-primary) !important; color: #fff !important; }
.btn-outline-danger:hover { background: #dc3545 !important; color: #fff !important; }
body.theme-dark .btn-outline-primary, body.theme-dark .btn-outline-secondary, body.theme-dark .btn-light, body.theme-dark .btn-outline-danger, body.theme-dark .list-icon-btn { background: rgba(255, 255, 255, 0.07) !important; box-shadow: none; }

/* ---- Pills, chips, tabs, alerts ---- */
.nav-tabs { border-bottom-color: var(--glass-line); }
.enq-chip, .mk-ops, .badge.bg-light {
    background: rgba(255, 255, 255, 0.62) !important;
    border: 1px solid var(--glass-edge) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 12px -10px rgba(20, 33, 61, 0.5);
}
.enq-chip.active { background: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: #fff; }
.mk-ops.is-hot { background: rgba(226, 87, 76, 0.12) !important; border-color: rgba(226, 87, 76, 0.55) !important; }
.alert { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.alert-info { background: rgba(234, 243, 255, 0.78); }
.alert-warning { background: rgba(255, 245, 219, 0.82); }
.alert-success { background: rgba(225, 245, 233, 0.82); }
.alert-light { background: rgba(255, 255, 255, 0.6) !important; }
.enq-file, .enq-quote, .enq-note, .enq-mail, .sub-box, .sa-box, .enq-message { background: rgba(255, 255, 255, 0.5); border-color: var(--glass-edge) !important; }
body.theme-dark .enq-file, body.theme-dark .enq-quote, body.theme-dark .enq-note, body.theme-dark .enq-mail, body.theme-dark .sub-box, body.theme-dark .sa-box, body.theme-dark .enq-message, body.theme-dark .enq-chip, body.theme-dark .mk-ops { background: rgba(255, 255, 255, 0.06) !important; box-shadow: none; }
.mk-chart { background: rgba(255, 255, 255, 0.45) !important; border: 1px solid var(--glass-edge); }

/* ---- Side panels, dialogs and menus: frosted but nearly solid, so text stays crisp ---- */
.enq-drawer, .sub-drawer, .sa-drawer {
    background: rgba(255, 255, 255, 0.86) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.6);
    backdrop-filter: blur(26px) saturate(1.6);
    border-inline-start: 1px solid var(--glass-edge);
}
.enq-drawer-backdrop, .sub-backdrop, .sa-backdrop { background: rgba(20, 33, 61, 0.32) !important; }
.modal-content, .dropdown-menu, .multiselect__content-wrapper, .swal2-popup, .offcanvas {
    background: rgba(255, 255, 255, 0.92) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    backdrop-filter: blur(24px) saturate(1.5);
    border: 1px solid var(--glass-edge) !important;
    box-shadow: 0 30px 60px -30px rgba(20, 33, 61, 0.6) !important;
}
.modal-content { border-radius: 22px !important; }
.dropdown-menu { border-radius: 14px !important; }
body.theme-dark .enq-drawer, body.theme-dark .sub-drawer, body.theme-dark .sa-drawer,
body.theme-dark .modal-content, body.theme-dark .dropdown-menu, body.theme-dark .multiselect__content-wrapper, body.theme-dark .swal2-popup, body.theme-dark .offcanvas {
    background: rgba(26, 26, 42, 0.92) !important;
}

/* Browsers without backdrop-filter get solid surfaces instead of see-through ones. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root { --glass-bg: rgba(255, 255, 255, 0.94); --glass-bg-strong: #fff; --app-card-bg: rgba(255, 255, 255, 0.94); }
    body.theme-dark { --glass-bg: rgba(32, 32, 50, 0.96); --glass-bg-strong: #1e1e2d; --app-card-bg: rgba(32, 32, 50, 0.96); }
}
/* Phones: lighter blur keeps scrolling smooth. */
@media (max-width: 767.98px) {
    :root { --glass-blur: blur(10px) saturate(1.3); --glass-bg: rgba(255, 255, 255, 0.74); --app-card-bg: rgba(255, 255, 255, 0.74); }
    body.theme-dark { --glass-bg: rgba(32, 32, 50, 0.78); --app-card-bg: rgba(32, 32, 50, 0.78); }
}
@media (prefers-reduced-transparency: reduce) {
    :root { --glass-bg: #fff; --glass-bg-strong: #fff; --app-card-bg: #fff; --glass-blur: none; }
    body.theme-dark { --glass-bg: #1e1e2d; --glass-bg-strong: #1e1e2d; --app-card-bg: #1e1e2d; }
}

/* Floating helpers sit over other content, so they stay nearly solid. */
.sg-pop, .sg-fab, .bulk-bar, .toast, .v-toast__item {
    background-color: rgba(255, 255, 255, 0.94) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    backdrop-filter: blur(22px) saturate(1.5);
}
body.theme-dark .sg-pop, body.theme-dark .sg-fab, body.theme-dark .bulk-bar { background-color: rgba(26, 26, 42, 0.94) !important; }