/* ==========================================================================
   theme-glass.css
   Glass / Aurora skin. Reuses every component rule in theme-saas.css
   (scoped to body:is(.theme-saas, .theme-glass)) and layers translucent
   surfaces, an aurora mesh background and gradient accents on top.
   Activate with <body class="... smart-skins-1 theme-glass">.
   Must be linked AFTER theme-saas.css.

   Real backdrop blur is only used on elements that sit over moving or
   overlapping content (fixed header/footer, popups, modals). Cards are
   translucent without blur: blurring a soft gradient is invisible, costs
   GPU on large tables, and a filtered ancestor would trap position:fixed
   modals that some pages nest inside widgets.
   ========================================================================== */

/* 1. Tokens
   ========================================================================== */
body.theme-glass {
    --tg-glass: rgba(255, 255, 255, 0.58);
    --tg-glass-strong: rgba(255, 255, 255, 0.82);
    --tg-glass-edge: rgba(255, 255, 255, 0.72);
    --tg-glass-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    --tg-blur: blur(20px) saturate(170%);
    --tg-gradient: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
    --tg-gradient-hover: linear-gradient(135deg, #6d28d9 0%, #be185d 100%);
    --tg-gradient-cool: linear-gradient(135deg, #0891b2 0%, #4f46e5 100%);
    --tg-gradient-cool-hover: linear-gradient(135deg, #0e7490 0%, #4338ca 100%);

    --ts-bg: transparent;
    --ts-surface: var(--tg-glass);
    --ts-surface-2: rgba(255, 255, 255, 0.36);
    --ts-surface-3: rgba(99, 102, 170, 0.09);
    --ts-border: rgba(99, 102, 160, 0.16);
    --ts-border-strong: rgba(99, 102, 160, 0.28);

    --ts-text: #15172e;
    --ts-text-2: #2e3150;
    --ts-muted: #565a78;
    --ts-subtle: #8a8eab;

    --ts-accent: #7c3aed;
    --ts-accent-hover: #6d28d9;
    --ts-accent-text: #6d28d9;
    --ts-accent-soft: rgba(124, 58, 237, 0.12);
    --ts-accent-ring: rgba(124, 58, 237, 0.26);

    --ts-success: #059669;
    --ts-success-hover: #047857;
    --ts-success-text: #047857;
    --ts-success-soft: rgba(16, 185, 129, 0.15);
    --ts-warning: #d97706;
    --ts-warning-hover: #b45309;
    --ts-warning-text: #a14a07;
    --ts-warning-soft: rgba(245, 158, 11, 0.18);
    --ts-danger: #e11d48;
    --ts-danger-hover: #be123c;
    --ts-danger-text: #be123c;
    --ts-danger-soft: rgba(244, 63, 94, 0.14);
    --ts-info: #0891b2;
    --ts-info-hover: #0e7490;
    --ts-info-text: #0e7490;
    --ts-info-soft: rgba(6, 182, 212, 0.15);

    --ts-ink: #1a1533;
    --ts-ink-2: rgba(30, 24, 60, 0.94);
    --ts-ink-3: rgba(255, 255, 255, 0.08);
    --ts-ink-border: rgba(255, 255, 255, 0.08);
    --ts-ink-text: #b9b5da;
    --ts-ink-text-hover: #ffffff;

    --ts-radius-sm: 8px;
    --ts-radius: 10px;
    --ts-radius-lg: 16px;

    --ts-shadow-xs: 0 1px 2px rgba(60, 50, 140, 0.06);
    --ts-shadow: var(--tg-glass-sheen), 0 2px 6px rgba(60, 50, 140, 0.05), 0 12px 32px -12px rgba(60, 50, 140, 0.22);
    --ts-shadow-md: 0 4px 10px rgba(60, 50, 140, 0.06), 0 16px 36px -12px rgba(60, 50, 140, 0.26);
    --ts-shadow-lg: 0 8px 20px rgba(40, 30, 110, 0.10), 0 28px 64px -16px rgba(40, 30, 110, 0.35);

    --primary-color: var(--ts-accent);
    --secondary-color: var(--ts-ink);
}

/* 2. Background
   ========================================================================== */
html:has(> body.theme-glass):not(.login-background) {
    background:
        radial-gradient(70vw 70vw at 0% 0%, rgba(167, 139, 250, 0.80), transparent 60%),
        radial-gradient(55vw 55vw at 100% 0%, rgba(34, 211, 238, 0.55), transparent 60%),
        radial-gradient(65vw 65vw at 100% 100%, rgba(244, 114, 182, 0.65), transparent 60%),
        radial-gradient(55vw 55vw at 0% 100%, rgba(96, 165, 250, 0.60), transparent 60%),
        radial-gradient(40vw 40vw at 55% 45%, rgba(196, 181, 253, 0.45), transparent 65%),
        linear-gradient(180deg, #ebe8fb 0%, #e8eefb 100%);
    background-attachment: fixed;
}

body.theme-glass,
body.theme-glass #main {
    background: transparent;
}

body.theme-glass ::selection {
    background: rgba(124, 58, 237, 0.2);
}

body.theme-glass div::-webkit-scrollbar-thumb,
body.theme-glass ul::-webkit-scrollbar-thumb,
body.theme-glass div:hover::-webkit-scrollbar-thumb {
    background-color: rgba(86, 90, 140, 0.28);
}

body.theme-glass div::-webkit-scrollbar-thumb:hover,
body.theme-glass ul::-webkit-scrollbar-thumb:hover {
    background-color: rgba(86, 90, 140, 0.45);
}

/* 3. Header
   ========================================================================== */
body.theme-glass #header {
    background: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: var(--tg-blur);
    backdrop-filter: var(--tg-blur);
    border-bottom: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 1px 0 rgba(99, 102, 160, 0.10), 0 8px 24px -16px rgba(60, 50, 140, 0.30);
}

body.theme-glass .btn-header > :first-child > a {
    background: rgba(255, 255, 255, 0.6);
    border-color: var(--tg-glass-edge) !important;
    box-shadow: var(--ts-shadow-xs), var(--tg-glass-sheen);
}

body.theme-glass .btn-header > :first-child > a:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(124, 58, 237, 0.25) !important;
    color: var(--ts-accent-text) !important;
}

body.theme-glass #logo-group span#activity {
    background: var(--tg-gradient);
    border-color: transparent;
}

/* 4. Sidebar
   ========================================================================== */
body.theme-glass aside,
body.theme-glass #left-panel {
    background: linear-gradient(180deg, rgba(26, 20, 56, 0.84) 0%, rgba(20, 16, 44, 0.80) 100%);
}

body.theme-glass #left-panel {
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 8px 0 32px -16px rgba(30, 20, 80, 0.45);
}

body.theme-glass nav > ul > li > a > i {
    color: #8f8ab8;
}

body.theme-glass nav ul li a b {
    color: #7d78a6;
}

body.theme-glass:not(.menu-on-top) nav ul li a:hover,
body.theme-glass nav ul li a:focus {
    background: rgba(255, 255, 255, 0.07);
}

body.theme-glass nav ul li.active > a {
    background: var(--tg-gradient);
    box-shadow: 0 8px 20px -8px rgba(219, 39, 119, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.theme-glass nav ul li.active > a > i,
body.theme-glass nav ul li.active > a b {
    color: #fff;
}

body.theme-glass nav ul li.active.open > a {
    background: transparent;
    box-shadow: none;
}

body.theme-glass:not(.menu-on-top) nav ul li.active:not(.open) > a:before,
body.theme-glass:not(.menu-on-top) nav > ul > li.active:not(.open) > a:before {
    display: none !important;
}

body.theme-glass.minified nav > ul > li > a > .menu-item-parent,
body.theme-glass.minified nav > ul > li > ul {
    -webkit-backdrop-filter: var(--tg-blur);
    backdrop-filter: var(--tg-blur);
    border-color: rgba(255, 255, 255, 0.10);
}

body.theme-glass aside .minifyme:hover {
    background: var(--tg-gradient);
}

body.theme-glass .login-info img,
body.theme-glass .profile-image {
    box-shadow: 0 0 0 2px rgba(20, 16, 44, 0.9), 0 0 0 4px rgba(192, 132, 252, 0.75);
}

body.theme-glass .login-info a:hover .font-xs {
    color: #f0abfc;
}

/* 5. Page chrome
   ========================================================================== */
body.theme-glass #content > .row:first-child {
    background: rgba(255, 255, 255, 0.42);
    border-bottom: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 1px 0 rgba(99, 102, 160, 0.08);
}

body.theme-glass .page-footer {
    background: rgba(255, 255, 255, 0.5);
    border-top-color: rgba(255, 255, 255, 0.65);
}

body.theme-glass .fixed-footer {
    background-color: rgba(255, 255, 255, 0.62) !important;
    -webkit-backdrop-filter: var(--tg-blur);
    backdrop-filter: var(--tg-blur);
    border-top: 1px solid rgba(255, 255, 255, 0.7);
}

body.theme-glass .well {
    background: rgba(255, 255, 255, 0.42);
    border-color: var(--tg-glass-edge);
    box-shadow: var(--tg-glass-sheen);
}

/* 6. Widgets as glass cards
   ========================================================================== */
body.theme-glass .jarviswidget {
    background: var(--tg-glass);
    border: 1px solid var(--tg-glass-edge);
    box-shadow: var(--ts-shadow);
}

body.theme-glass .jarviswidget > header,
body.theme-glass .jarviswidget[class*="jarviswidget-color-"] > header {
    background: rgba(255, 255, 255, 0.34) !important;
    border-bottom: 1px solid var(--ts-border) !important;
}

body.theme-glass .jarviswidget > div,
body.theme-glass .jarviswidget[class*="jarviswidget-color-"] > div {
    background-color: transparent !important;
}

body.theme-glass .jarviswidget > header .widget-toolbar > .form-control,
body.theme-glass .jarviswidget > header .widget-toolbar select {
    background-color: rgba(255, 255, 255, 0.7) !important;
}

body.theme-glass .widget-body-toolbar,
body.theme-glass .widget-footer {
    background: rgba(255, 255, 255, 0.3);
}

body.theme-glass .summary-group .jarviswidget::after {
    background: linear-gradient(90deg, #7c3aed, #db2777 55%, #06b6d4);
    height: 3px;
    opacity: 1;
}

body.theme-glass .summary-group .jarviswidget {
    box-shadow: var(--tg-glass-sheen), 0 2px 6px rgba(60, 50, 140, 0.05), 0 16px 36px -14px rgba(124, 58, 237, 0.30);
}

body.theme-glass .summary-group h1,
body.theme-glass .accumulated-sales-summary h1 {
    color: var(--ts-text);
}

body.theme-glass .summary-group .widget-body > i.fa,
body.theme-glass .summary-group .widget-body > .row > i.fa {
    color: #db2777 !important;
    opacity: 0.12 !important;
}

/* 7. Buttons
   ========================================================================== */
body.theme-glass .btn-default {
    background-color: rgba(255, 255, 255, 0.66);
    border-color: var(--tg-glass-edge);
    box-shadow: var(--ts-shadow-xs), var(--tg-glass-sheen);
}

body.theme-glass .btn-default:hover,
body.theme-glass .btn-default:focus {
    background-color: rgba(255, 255, 255, 0.92);
    border-color: rgba(124, 58, 237, 0.22);
}

body.theme-glass .btn-default:active,
body.theme-glass .btn-default.active,
body.theme-glass .open > .dropdown-toggle.btn-default {
    background-color: rgba(255, 255, 255, 0.5);
    border-color: var(--ts-border-strong);
}

body.theme-glass .btn-primary {
    background-color: #7c3aed;
    background-image: var(--tg-gradient);
    border-color: transparent;
    box-shadow: 0 6px 16px -6px rgba(219, 39, 119, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.theme-glass .btn-primary:hover,
body.theme-glass .btn-primary:focus,
body.theme-glass .btn-primary:active,
body.theme-glass .btn-primary.active,
body.theme-glass .open > .dropdown-toggle.btn-primary {
    background-color: #6d28d9;
    background-image: var(--tg-gradient-hover);
    border-color: transparent;
    box-shadow: 0 8px 20px -6px rgba(219, 39, 119, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.theme-glass .btn-info {
    background-color: #0891b2;
    background-image: var(--tg-gradient-cool);
    border-color: transparent;
    box-shadow: 0 6px 16px -6px rgba(79, 70, 229, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.theme-glass .btn-info:hover,
body.theme-glass .btn-info:focus,
body.theme-glass .btn-info:active,
body.theme-glass .btn-info.active {
    background-color: #0e7490;
    background-image: var(--tg-gradient-cool-hover);
    border-color: transparent;
}

body.theme-glass .btn-success,
body.theme-glass .btn-danger,
body.theme-glass .btn-warning {
    border-color: transparent;
    box-shadow: 0 4px 12px -6px rgba(40, 30, 110, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

body.theme-glass .btn-primary:hover,
body.theme-glass .btn-info:hover,
body.theme-glass .btn-success:hover,
body.theme-glass .btn-danger:hover {
    transform: translateY(-1px);
}

body.theme-glass .btn-primary:active,
body.theme-glass .btn-info:active,
body.theme-glass .btn-success:active,
body.theme-glass .btn-danger:active,
body.theme-glass .btn-group > .btn:hover,
body.theme-glass .btn-group-justified .btn:hover {
    transform: none;
}

body.theme-glass .btn-link {
    color: var(--ts-accent-text);
}

/* 8. Forms
   ========================================================================== */
body.theme-glass .form-control,
body.theme-glass .smart-form .input input,
body.theme-glass .smart-form .select select,
body.theme-glass .smart-form .textarea textarea,
body.theme-glass .smart-form .select2-container .select2-choice,
body.theme-glass .bootstrap-tagsinput,
body.theme-glass .select2-container .select2-choice,
body.theme-glass .select2-container-multi .select2-choices {
    background-color: rgba(255, 255, 255, 0.72);
    border-color: rgba(99, 102, 160, 0.22);
}

body.theme-glass .form-control:focus,
body.theme-glass .smart-form .input input:focus,
body.theme-glass .smart-form .select select:focus,
body.theme-glass .smart-form .textarea textarea:focus,
body.theme-glass .select2-container-active .select2-choice,
body.theme-glass .select2-container-active .select2-choices,
body.theme-glass .select2-dropdown-open .select2-choice {
    background-color: rgba(255, 255, 255, 0.95);
}

body.theme-glass .form-control[disabled],
body.theme-glass .form-control[readonly],
body.theme-glass fieldset[disabled] .form-control,
body.theme-glass .select2-container.select2-container-disabled .select2-choice {
    background-color: rgba(99, 102, 170, 0.08);
}

body.theme-glass .input-group-addon {
    background-color: rgba(255, 255, 255, 0.45);
    border-color: rgba(99, 102, 160, 0.22);
}

body.theme-glass .smart-form .checkbox i,
body.theme-glass .smart-form .radio i {
    background: rgba(255, 255, 255, 0.8);
}

body.theme-glass .onoffswitch-label {
    background: rgba(86, 90, 140, 0.24);
}

body.theme-glass .onoffswitch-label:hover {
    background: rgba(86, 90, 140, 0.34);
}

body.theme-glass .onoffswitch-checkbox:checked + .onoffswitch-label {
    background: var(--tg-gradient);
    box-shadow: inset 0 1px 2px rgba(60, 20, 120, 0.3), 0 4px 10px -4px rgba(219, 39, 119, 0.55);
}

body.theme-glass .onoffswitch-checkbox:checked + .onoffswitch-label:hover {
    background: var(--tg-gradient-hover);
}

body.theme-glass .onoffswitch-checkbox:checked:disabled + .onoffswitch-label {
    background: rgba(124, 58, 237, 0.35);
    box-shadow: none;
}

/* 9. Popups: dropdowns, Select2, datepickers, popovers
   ========================================================================== */
body.theme-glass .dropdown-menu,
body.theme-glass .select2-drop,
body.theme-glass .select2-drop.select2-drop-above,
body.theme-glass .ui-datepicker,
body.theme-glass .daterangepicker,
body.theme-glass .popover,
body.theme-glass .bootstrap-datetimepicker-widget {
    background-color: var(--tg-glass-strong);
    -webkit-backdrop-filter: var(--tg-blur);
    backdrop-filter: var(--tg-blur);
    border-color: var(--tg-glass-edge);
    box-shadow: var(--ts-shadow-lg);
}

body.theme-glass .select2-results .select2-highlighted {
    background: var(--tg-gradient);
    color: #fff;
}

body.theme-glass .select2-results .select2-highlighted .select2-match {
    color: #fff;
}

body.theme-glass .daterangepicker .calendar-table,
body.theme-glass .daterangepicker .calendar,
body.theme-glass .daterangepicker td.off,
body.theme-glass .daterangepicker td.available:not(.active),
body.theme-glass .ui-datepicker .ui-datepicker-header {
    background-color: transparent;
}

body.theme-glass .ui-datepicker td .ui-state-active,
body.theme-glass .daterangepicker td.active,
body.theme-glass .daterangepicker td.active:hover {
    background: var(--tg-gradient);
}

body.theme-glass .popover-title {
    background: rgba(255, 255, 255, 0.4);
}

body.theme-glass .tooltip-inner {
    background: rgba(26, 21, 51, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* 10. Tables
   ========================================================================== */
body.theme-glass .table,
body.theme-glass .table > tbody > tr > td,
body.theme-glass .dataTables_wrapper {
    background-color: transparent;
}

body.theme-glass .table thead tr,
body.theme-glass .table > thead > tr > th,
body.theme-glass .table > thead > tr > td {
    background-color: rgba(255, 255, 255, 0.4);
}

body.theme-glass .table-striped > tbody > tr:nth-of-type(odd),
body.theme-glass .table-striped > tbody > tr:nth-child(odd) > td,
body.theme-glass .table-striped > tbody > tr:nth-child(odd) > th {
    background-color: rgba(255, 255, 255, 0.28);
}

body.theme-glass .table-hover > tbody > tr:hover,
body.theme-glass .table-hover > tbody > tr:hover > td,
body.theme-glass .table-hover > tbody > tr:hover > th {
    background-color: rgba(124, 58, 237, 0.06);
}

body.theme-glass .table > tfoot > tr > td,
body.theme-glass .table > tfoot > tr > th {
    background-color: rgba(255, 255, 255, 0.4);
}

body.theme-glass tfoot {
    background-color: transparent;
}

body.theme-glass .table > tbody > tr.isSeen,
body.theme-glass .table > tbody > tr.isSeen > td {
    background-color: rgba(124, 58, 237, 0.045);
}

body.theme-glass .pagination > li > a,
body.theme-glass .pagination > li > span,
body.theme-glass .pagination > .disabled > a,
body.theme-glass .pagination > .disabled > span {
    background: rgba(255, 255, 255, 0.6);
    border-color: var(--tg-glass-edge);
}

body.theme-glass .pagination > li > a:hover,
body.theme-glass .pagination > li > span:hover,
body.theme-glass .pagination > li > a:focus {
    background: rgba(255, 255, 255, 0.92);
}

body.theme-glass .pagination > .active > a,
body.theme-glass .pagination > .active > span,
body.theme-glass .pagination > .active > a:hover,
body.theme-glass .pagination > .active > span:hover,
body.theme-glass .pagination > .active > a:focus {
    background: var(--tg-gradient);
    border-color: transparent;
    box-shadow: 0 4px 12px -4px rgba(219, 39, 119, 0.5);
}

body.theme-glass .list-group-item {
    background-color: rgba(255, 255, 255, 0.45);
}

body.theme-glass .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.75);
}

/* 11. Modals and message boxes
   ========================================================================== */
body.theme-glass .modal-backdrop.in {
    background: rgba(26, 18, 60, 0.38);
    opacity: 1;
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
}

body.theme-glass .modal-content {
    background: var(--tg-glass-strong);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid var(--tg-glass-edge);
    border-radius: 20px;
    box-shadow: var(--tg-glass-sheen), var(--ts-shadow-lg);
}

body.theme-glass .modal-header {
    background: rgba(255, 255, 255, 0.3);
}

body.theme-glass .modal-footer {
    background: rgba(255, 255, 255, 0.3);
}

body.theme-glass .divMessageBox {
    background: rgba(26, 18, 60, 0.42);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
}

body.theme-glass .MessageBoxContainer {
    background: var(--tg-glass-strong) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border-color: var(--tg-glass-edge);
    border-radius: 20px;
}

body.theme-glass .MessageBoxButtonSection button:first-child {
    background: var(--tg-gradient);
    border-color: transparent;
}

body.theme-glass .MessageBoxButtonSection button:first-child:hover {
    background: var(--tg-gradient-hover);
}

body.theme-glass .SmallBox,
body.theme-glass .bigBox {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* 12. Tabs, pills, labels, progress, wizard
   ========================================================================== */
body.theme-glass .nav-tabs > li.active > a,
body.theme-glass .nav-tabs > li.active > a:hover,
body.theme-glass .nav-tabs > li.active > a:focus {
    border-bottom-color: #db2777 !important;
}

body.theme-glass .header-tab .active,
body.theme-glass .header-tab .active:hover {
    border-bottom-color: #db2777;
}

body.theme-glass .nav-pills > li.active > a,
body.theme-glass .nav-pills > li.active > a:hover,
body.theme-glass .nav-pills > li.active > a:focus {
    background: var(--tg-gradient);
    box-shadow: 0 6px 14px -6px rgba(219, 39, 119, 0.55);
}

body.theme-glass .label-default,
body.theme-glass .badge {
    background: rgba(86, 90, 140, 0.12);
}

body.theme-glass .progress {
    background: rgba(86, 90, 140, 0.12);
}

body.theme-glass .progress-bar {
    background-image: var(--tg-gradient);
}

body.theme-glass .progress-bar-success,
body.theme-glass .progress-bar-warning,
body.theme-glass .progress-bar-danger,
body.theme-glass .progress-bar-info {
    background-image: none;
}

body.theme-glass .alert-success { background: rgba(236, 253, 245, 0.75); border-color: rgba(16, 185, 129, 0.3); }
body.theme-glass .alert-info { background: rgba(236, 254, 255, 0.75); border-color: rgba(6, 182, 212, 0.3); }
body.theme-glass .alert-warning { background: rgba(255, 251, 235, 0.78); border-color: rgba(245, 158, 11, 0.32); }
body.theme-glass .alert-danger { background: rgba(255, 241, 242, 0.78); border-color: rgba(244, 63, 94, 0.3); }

body.theme-glass .bootstrapWizard li .step {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35);
}

body.theme-glass .bootstrapWizard li.active .step,
body.theme-glass .bootstrapWizard li.active.complete .step {
    background: var(--tg-gradient);
    border-color: transparent;
    box-shadow: 0 0 0 4px rgba(219, 39, 119, 0.15), 0 6px 14px -6px rgba(219, 39, 119, 0.6);
}

body.theme-glass .panel {
    background-color: rgba(255, 255, 255, 0.55);
    border-color: var(--tg-glass-edge);
}

body.theme-glass .fc-toolbar .fc-button,
body.theme-glass .fc-header .fc-button {
    background: rgba(255, 255, 255, 0.66);
}

/* 13. Auth pages
   ========================================================================== */
html:has(> body.theme-glass.theme-saas-auth):not(.login-background),
body.theme-glass.theme-saas-auth {
    background:
        radial-gradient(60vw 60vw at 110% -10%, rgba(167, 139, 250, 0.60), transparent 60%),
        radial-gradient(50vw 50vw at 110% 110%, rgba(244, 114, 182, 0.50), transparent 60%),
        radial-gradient(45vw 45vw at 55% 50%, rgba(34, 211, 238, 0.28), transparent 60%),
        linear-gradient(180deg, #f1f0fb 0%, #eef2fb 100%);
    background-attachment: fixed;
}

html.login-background > body.theme-glass.theme-saas-auth {
    background: transparent;
}

body.theme-glass.theme-saas-auth div.login-background {
    background-color: #1a1533;
}

body.theme-glass.theme-saas-auth div.login-background::before {
    background:
        radial-gradient(1100px 600px at 0% 110%, rgba(124, 58, 237, 0.50), transparent 60%),
        radial-gradient(900px 520px at 100% -10%, rgba(219, 39, 119, 0.35), transparent 60%),
        radial-gradient(700px 400px at 80% 90%, rgba(6, 182, 212, 0.25), transparent 60%),
        linear-gradient(160deg, rgba(26, 21, 51, 0.10) 0%, rgba(26, 21, 51, 0.50) 100%);
}

body.theme-glass.theme-saas-auth #login-background-color:not([style*="black"]):not([style*="rgb(0, 0, 0)"]) {
    background-color: transparent !important;
    box-shadow: none;
}

body.theme-glass.theme-saas-auth #login-background-color:not([style*="black"]):not([style*="rgb(0, 0, 0)"])::before {
    content: "";
    position: absolute;
    inset: 20px;
    z-index: -1;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 24px;
    box-shadow: var(--tg-glass-sheen), 0 24px 60px -20px rgba(60, 40, 140, 0.40);
    pointer-events: none;
}

body.theme-glass.theme-saas-auth #app-title .app-title {
    background: linear-gradient(90deg, #7c3aed, #db2777);
    -webkit-background-clip: text;
    background-clip: text;
}

body.theme-glass.theme-saas-auth #login-form .form-control {
    background-color: rgba(255, 255, 255, 0.75);
}

body.theme-glass.theme-saas-auth #login-form .form-control:focus {
    background-color: #fff;
}

body.theme-glass.theme-saas-auth #login-form .btn-primary,
body.theme-glass.theme-saas-auth #login-form .btn-block {
    background: var(--tg-gradient);
    border: 0;
    box-shadow: 0 10px 24px -10px rgba(219, 39, 119, 0.70), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.theme-glass.theme-saas-auth #login-form .btn-primary:hover,
body.theme-glass.theme-saas-auth #login-form .btn-block:hover {
    background: var(--tg-gradient-hover);
    box-shadow: 0 14px 28px -10px rgba(219, 39, 119, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.theme-glass.theme-saas-auth .login-container {
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
    border-color: rgba(255, 255, 255, 0.75);
    border-radius: 24px;
}

body.theme-glass.theme-saas-auth .smart-form.client-form header,
body.theme-glass.theme-saas-auth .smart-form.client-form footer {
    background: rgba(255, 255, 255, 0.35);
}

body.theme-glass.theme-saas-auth .popout {
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border-color: rgba(255, 255, 255, 0.75);
}

body.theme-glass.theme-saas-auth .popout_bg {
    background: rgba(26, 18, 60, 0.4);
}

@media (max-width: 767px) {
    body.theme-glass.theme-saas-auth #login-background-color:not([style*="black"]):not([style*="rgb(0, 0, 0)"])::before {
        inset: 12px;
        border-radius: 20px;
    }
}

/* 14. Fallbacks
   ========================================================================== */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.theme-glass {
        --tg-glass: rgba(255, 255, 255, 0.80);
        --tg-glass-strong: rgba(255, 255, 255, 0.97);
    }

    body.theme-glass #header {
        background: rgba(255, 255, 255, 0.94) !important;
    }

    body.theme-glass.theme-saas-auth #login-background-color:not([style*="black"]):not([style*="rgb(0, 0, 0)"])::before {
        background: rgba(255, 255, 255, 0.88);
    }
}

@media (prefers-reduced-transparency: reduce) {
    body.theme-glass {
        --tg-glass: rgba(255, 255, 255, 0.94);
        --tg-glass-strong: #ffffff;
        --ts-surface-2: rgba(255, 255, 255, 0.85);
    }

    body.theme-glass #header {
        background: #fff !important;
    }

    body.theme-glass aside,
    body.theme-glass #left-panel {
        background: #1a1533;
    }

    body.theme-glass #content > .row:first-child {
        background: rgba(255, 255, 255, 0.92);
    }

    body.theme-glass.theme-saas-auth #login-background-color:not([style*="black"]):not([style*="rgb(0, 0, 0)"])::before {
        background: rgba(255, 255, 255, 0.95);
    }
}