@import url("https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&family=Sora:wght@500;600;700&display=swap");

:root {
    --primary: #33b7ff;
    --secondary: #23d8be;
    --primary-hover: #149de6;
    --primary-dark: #0f6fb0;
    --rgba-primary-1: rgba(51, 183, 255, 0.1);
    --rgba-primary-2: rgba(51, 183, 255, 0.2);
    --rgba-primary-3: rgba(51, 183, 255, 0.3);
    --rgba-primary-4: rgba(51, 183, 255, 0.4);
    --rgba-primary-5: rgba(51, 183, 255, 0.5);
    --rgba-primary-6: rgba(51, 183, 255, 0.6);
    --rgba-primary-7: rgba(51, 183, 255, 0.7);
    --rgba-primary-8: rgba(51, 183, 255, 0.8);
    --rgba-primary-9: rgba(51, 183, 255, 0.9);

    --ui-bg: #070d17;
    --ui-bg-soft: #0d1626;
    --ui-surface: rgba(18, 28, 45, 0.78);
    --ui-surface-strong: rgba(15, 24, 38, 0.92);
    --ui-border: rgba(111, 170, 226, 0.22);
    --ui-border-strong: rgba(86, 157, 223, 0.38);
    --ui-text: #b9cce2;
    --ui-text-strong: #eaf4ff;
    --ui-text-soft: #8ca7c4;
    --ui-success: #29cf88;
    --ui-danger: #ff5f73;
    --ui-warning: #ffc65c;
    --ui-shadow: 0 20px 40px rgba(3, 9, 19, 0.45);
    --ui-shadow-soft: 0 12px 30px rgba(3, 9, 19, 0.3);
    --ui-glow: 0 0 0 3px var(--rgba-primary-3);
    --ui-radius-lg: 20px;
    --ui-radius-md: 14px;
    --ui-radius-sm: 10px;

    --font-family-base: "Sarabun", "Poppins", "Segoe UI", Tahoma, sans-serif;
    --font-family-title: "Sora", "Sarabun", "Poppins", sans-serif;
    --title: #eaf4ff;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body,
.content-body,
.authincation {
    font-family: var(--font-family-base) !important;
    color: var(--ui-text) !important;
    background:
        radial-gradient(circle at 12% 12%, rgba(51, 183, 255, 0.16), transparent 42%),
        radial-gradient(circle at 86% 24%, rgba(35, 216, 190, 0.13), transparent 38%),
        radial-gradient(circle at 50% 90%, rgba(105, 128, 255, 0.12), transparent 45%),
        linear-gradient(160deg, #050a13 0%, #0a1220 42%, #0f1729 100%) !important;
}

body::before,
body::after {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: 0;
}

body::before {
    inset: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.02) 0,
        rgba(255, 255, 255, 0.02) 1px,
        transparent 1px,
        transparent 9px
    );
    opacity: 0.28;
}

body::after {
    width: 48vw;
    height: 48vw;
    min-width: 340px;
    min-height: 340px;
    right: -20vw;
    top: -16vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(51, 183, 255, 0.16) 0%, rgba(51, 183, 255, 0) 66%);
}

#main-wrapper,
.content-body,
.footer,
.deznav,
.header,
.sidebar-right {
    background-color: transparent !important;
}

a {
    color: #7fcdfc;
    transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover,
a:focus {
    color: #b9e8ff;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-family-title) !important;
    color: var(--ui-text-strong) !important;
    letter-spacing: 0.02em;
}

p,
span,
label,
small,
.text-black,
.text-muted {
    color: var(--ui-text) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.content-body .container-fluid {
    padding-top: 1.5rem;
}

.header {
    border-bottom: 1px solid var(--rgba-primary-3) !important;
    background: var(--headerbg) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(4, 11, 23, 0.28);
}

.header .header-content {
    height: 76px !important;
    width: 100%;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    min-height: 56px;
    padding: 8px 12px !important;
    border-radius: var(--ui-radius-md);
    border: 1px solid var(--rgba-primary-3);
    background: var(--headerbg) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
}

.header .header-content .nav-control {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    padding: 0;
}

.header .header-content .header-right {
    margin-left: auto;
    align-items: center;
}

.header .header-content .header-profile {
    margin-left: 0.75rem;
    padding-left: 0.75rem;
}

.header .header-content .nav-control .hamburger .line {
    background: #dff2ff;
}

.nav-header {
    background: var(--nav-headbg) !important;
    border-bottom: 1px solid var(--rgba-primary-3) !important;
    overflow: hidden;
}

.nav-header .brand-logo {
    display: block !important;
    position: relative;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.nav-header .brand-logo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--nav-headbg);
    opacity: 0.22;
    pointer-events: none;
}

.nav-header .brand-logo img,
.nav-header .brand-logo .logo-abbr {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center;
    border-radius: 0 !important;
}

.header-right .nav-item .nav-link {
    border-radius: 12px;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.header-right .nav-item .nav-link:hover {
    background: var(--rgba-primary-2);
    color: var(--ui-text-strong);
    transform: translateY(-1px);
}

.header .header-content .header-profile .nav-link {
    position: relative;
    background: #fff;
    border-radius: 999px;
    padding: 0.1875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header .header-content .header-profile .nav-link img {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--rgba-primary-6) !important;
    box-shadow: 0 8px 16px var(--rgba-primary-3);
}

@media (max-width: 1400px) {
    .header .header-content .header-profile .nav-link img {
        width: 2.1875rem;
        height: 2.1875rem;
    }
}

.dropdown-menu {
    background: rgba(11, 20, 33, 0.96) !important;
    border: 1px solid rgba(105, 162, 223, 0.28) !important;
    border-radius: 12px !important;
    box-shadow: var(--ui-shadow-soft) !important;
    padding: 8px !important;
}

.dropdown-menu .dropdown-item {
    color: var(--ui-text) !important;
    border-radius: 8px;
    padding: 8px 10px;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    color: var(--ui-text-strong) !important;
    background: var(--rgba-primary-2) !important;
}

.deznav {
    border-right: 1px solid var(--rgba-primary-3);
    box-shadow: 8px 0 20px rgba(5, 11, 20, 0.25);
    background: var(--sidebar-bg) !important;
}

.deznav .deznav-scroll,
.deznav .deznav-scroll.ps,
.deznav .deznav-scroll.mm-active.ps {
    padding: 14px 10px 18px;
}

.deznav .metismenu > li {
    margin-bottom: 5px;
}

.deznav .metismenu > li > a {
    color: var(--ui-text-soft) !important;
    border-radius: 12px !important;
    min-height: 46px;
    padding: 12px 14px !important;
    border: 1px solid transparent;
    transition: all 0.22s ease;
}

.deznav .metismenu > li > a i,
.deznav .metismenu > li > a svg {
    color: var(--primary) !important;
    fill: var(--primary) !important;
    transition: all 0.2s ease;
}

.deznav .metismenu > li:hover > a,
.deznav .metismenu > li:focus > a {
    color: #dff2ff !important;
    background: var(--rgba-primary-2) !important;
    border-color: var(--rgba-primary-4);
}

.deznav .metismenu > li.mm-active > a,
.deznav .metismenu > li.mm-active:hover > a {
    color: #ffffff !important;
    background: linear-gradient(132deg, var(--primary), var(--primary-dark)) !important;
    border-color: var(--rgba-primary-5);
    box-shadow: 0 10px 24px var(--rgba-primary-3);
}

.deznav .metismenu > li.mm-active > a i,
.deznav .metismenu > li.mm-active > a svg,
.deznav .metismenu > li.mm-active:hover > a i,
.deznav .metismenu > li.mm-active:hover > a svg,
.deznav .metismenu > li > a:active i,
.deznav .metismenu > li > a:focus i,
.deznav .metismenu > li > a:active svg,
.deznav .metismenu > li > a:focus svg {
    color: var(--primary) !important;
    fill: var(--primary) !important;
}

.deznav .metismenu > li.mm-active > a::after,
.deznav .metismenu > li:hover > a::after {
    border-color: #ffffff !important;
}

.deznav .metismenu ul {
    margin: 8px 0 6px 6px !important;
    padding: 10px 0 4px 13px !important;
    border-left: 1px dashed var(--rgba-primary-4);
}

.deznav .metismenu ul a {
    color: #8fadcc !important;
    border-radius: 10px;
    padding: 9px 10px !important;
    font-size: 0.94rem;
    transition: all 0.2s ease;
}

.deznav .metismenu ul a:hover,
.deznav .metismenu ul a:focus,
.deznav .metismenu ul a.mm-active {
    color: #dff2ff !important;
    background: var(--rgba-primary-1) !important;
}

.deznav .metismenu ul a::before {
    border-color: var(--rgba-primary-5) !important;
}

.deznav .metismenu .has-arrow::after {
    border-color: var(--primary) !important;
}

.deznav .copyright {
    margin-top: 20px;
    padding: 14px 10px 0;
    border-top: 1px solid rgba(130, 183, 237, 0.17);
}

.deznav .copyright p,
.deznav .copyright strong {
    color: #88a9ca !important;
}

.deznav .ps__rail-y,
.sidebar-right .ps__rail-y {
    width: 8px !important;
    background: transparent !important;
    opacity: 1 !important;
}

.deznav .ps__thumb-y,
.sidebar-right .ps__thumb-y {
    width: 6px !important;
    border-radius: 20px !important;
    background: rgba(127, 195, 249, 0.46) !important;
}

.deznav .ps__thumb-y:hover,
.sidebar-right .ps__thumb-y:hover {
    background: rgba(145, 222, 255, 0.76) !important;
}

.sidebar-right {
    background: linear-gradient(180deg, rgba(10, 18, 30, 0.98), rgba(8, 14, 24, 0.96)) !important;
    border-left: 1px solid rgba(122, 178, 235, 0.3) !important;
    box-shadow: -16px 0 32px rgba(2, 6, 12, 0.5);
}

.sidebar-right .bg-overlay {
    background: rgba(5, 10, 17, 0.76) !important;
}

.sidebar-right.show {
    box-shadow: -20px 0 44px rgba(2, 6, 12, 0.64), -2px 0 0 rgba(122, 178, 235, 0.26);
}

.sidebar-right .sidebar-right-inner {
    padding: 18px 18px 22px;
}

.sidebar-right .sidebar-right-inner > h4 {
    color: var(--ui-text-strong) !important;
    margin-bottom: 16px;
}

.sidebar-right .card-tabs .nav-tabs {
    border-bottom: 1px solid rgba(123, 179, 235, 0.27) !important;
    margin-bottom: 16px;
}

.sidebar-right .card-tabs .nav-tabs .nav-link {
    color: #8eaed0 !important;
    border: 0 !important;
    border-radius: 10px !important;
}

.sidebar-right .card-tabs .nav-tabs .nav-link.active {
    color: #eff8ff !important;
    background: rgba(95, 174, 243, 0.2) !important;
}

.sidebar-right .sidebar-right-trigger,
.sidebar-right .sidebar-close-trigger {
    border: 1px solid rgba(127, 188, 247, 0.4) !important;
    background: rgba(16, 27, 43, 0.88) !important;
    color: #d9f0ff !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 20px rgba(7, 18, 33, 0.45);
}

.sidebar-right .sidebar-right-trigger:hover,
.sidebar-right .sidebar-close-trigger:hover {
    background: var(--rgba-primary-3) !important;
}

.sidebar-right .default-select,
.sidebar-right .form-control,
.sidebar-right .nice-select {
    background: rgba(16, 27, 44, 0.92) !important;
    border: 1px solid rgba(107, 170, 230, 0.34) !important;
    color: #e2f1ff !important;
}

.sidebar-right .nice-select {
    min-height: 42px;
    line-height: 40px;
}

.sidebar-right .nice-select .current {
    color: #e8f5ff !important;
}

.sidebar-right .nice-select:after {
    border-bottom-color: #8fd2ff !important;
    border-right-color: #8fd2ff !important;
}

.sidebar-right .default-select .list,
.sidebar-right .nice-select .list,
[data-theme-version="dark"] .sidebar-right .default-select .list,
[data-theme-version="dark"] .sidebar-right .nice-select .list {
    background: rgba(13, 24, 40, 0.98) !important;
    border: 1px solid rgba(123, 185, 243, 0.4) !important;
    box-shadow: 0 14px 28px rgba(4, 14, 27, 0.52) !important;
}

.sidebar-right .default-select .list .option,
.sidebar-right .nice-select .list .option,
[data-theme-version="dark"] .sidebar-right .default-select .list .option,
[data-theme-version="dark"] .sidebar-right .nice-select .option {
    color: #dbeeff !important;
    background: transparent !important;
}

.sidebar-right .default-select .list .option:hover,
.sidebar-right .default-select .list .option.focus,
.sidebar-right .default-select .list .option.selected,
.sidebar-right .nice-select .list .option:hover,
.sidebar-right .nice-select .list .option.focus,
.sidebar-right .nice-select .list .option.selected,
[data-theme-version="dark"] .sidebar-right .default-select .list .option.selected,
[data-theme-version="dark"] .sidebar-right .default-select .list .option.focus,
[data-theme-version="dark"] .sidebar-right .default-select .list .option:hover {
    background: rgba(58, 169, 247, 0.24) !important;
    color: #ffffff !important;
}

.sidebar-right .sidebar-right-inner > h4 .btn {
    margin-left: 8px;
}

.sidebar-right .note-text {
    color: #8dadcf !important;
    border-top: 1px solid rgba(112, 175, 235, 0.22);
    margin-top: 16px;
    padding-top: 12px;
}

.sidebar-right .admin-settings input[type="radio"] + label {
    border-radius: 10px !important;
    box-shadow: inset 0 0 0 1px rgba(166, 213, 250, 0.2);
    transition: transform 0.16s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.sidebar-right .admin-settings input[type="radio"]:checked + label {
    transform: translateY(-1px);
    box-shadow: 0 0 0 2px rgba(158, 221, 255, 0.92), 0 10px 18px rgba(7, 26, 48, 0.35) !important;
    filter: saturate(1.16);
}

.sidebar-right .admin-settings input[type="radio"]:checked + label::after {
    display: none !important;
}

.sidebar-right :is(#nav_header_color_1, #header_color_1, #sidebar_color_1, #primary_color_1) + label { background-color: #0f1827 !important; }
.sidebar-right :is(#nav_header_color_2, #header_color_2, #sidebar_color_2, #primary_color_2) + label { background-color: #2f62ff !important; }
.sidebar-right :is(#nav_header_color_3, #header_color_3, #sidebar_color_3, #primary_color_3) + label { background-color: #fc7d44 !important; }
.sidebar-right :is(#nav_header_color_4, #header_color_4, #sidebar_color_4, #primary_color_4) + label { background-color: #6a42ea !important; }
.sidebar-right :is(#nav_header_color_5, #header_color_5, #sidebar_color_5, #primary_color_5) + label { background-color: #ff5f73 !important; }
.sidebar-right :is(#nav_header_color_6, #header_color_6, #sidebar_color_6, #primary_color_6) + label { background-color: #ff9c4a !important; }
.sidebar-right :is(#nav_header_color_7, #header_color_7, #sidebar_color_7, #primary_color_7) + label { background-color: #ffd769 !important; }
.sidebar-right :is(#nav_header_color_8, #header_color_8, #sidebar_color_8, #primary_color_8) + label { background-color: #f1f7ff !important; }
.sidebar-right :is(#nav_header_color_9, #header_color_9, #sidebar_color_9, #primary_color_9) + label { background-color: #22d5a1 !important; }
.sidebar-right :is(#nav_header_color_10, #header_color_10, #sidebar_color_10, #primary_color_10) + label { background-color: #23d8be !important; }
.sidebar-right :is(#nav_header_color_11, #header_color_11, #sidebar_color_11, #primary_color_11) + label { background-color: #9461ff !important; }
.sidebar-right :is(#nav_header_color_12, #header_color_12, #sidebar_color_12, #primary_color_12) + label { background-color: #1c2a3b !important; }
.sidebar-right :is(#nav_header_color_13, #header_color_13, #sidebar_color_13, #primary_color_13) + label { background-color: #101927 !important; }
.sidebar-right :is(#nav_header_color_14, #header_color_14, #sidebar_color_14, #primary_color_14) + label { background-color: #33b7ff !important; }
.sidebar-right :is(#nav_header_color_15, #header_color_15, #sidebar_color_15, #primary_color_15) + label { background-color: #29cf88 !important; }

.card,
.authincation-content,
.modal-content,
.profile-card,
.widget-stat,
.dlab-user {
    background: linear-gradient(155deg, rgba(16, 26, 43, 0.86), rgba(11, 18, 30, 0.84)) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-soft) !important;
    overflow: hidden;
}

.card:hover,
.authincation-content:hover {
    border-color: var(--ui-border-strong) !important;
    box-shadow: var(--ui-shadow) !important;
}

.card-header,
.card-footer {
    background: transparent !important;
    border-color: rgba(114, 172, 232, 0.22) !important;
}

.card-header .card-title {
    color: var(--ui-text-strong) !important;
}

.table {
    color: var(--ui-text) !important;
}

.table thead th {
    color: #dff1ff !important;
    border-bottom-color: rgba(116, 176, 238, 0.4) !important;
}

.table tbody td,
.table tbody th {
    border-color: rgba(98, 157, 219, 0.22) !important;
}

.table tbody tr:hover {
    background-color: rgba(85, 164, 236, 0.11) !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: #9eb8d5 !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: rgba(15, 26, 42, 0.88) !important;
    border: 1px solid rgba(117, 176, 236, 0.35) !important;
    color: #e3f3ff !important;
    border-radius: 10px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    color: #9ab4cf !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #f3faff !important;
    border-color: var(--rgba-primary-5) !important;
    background: linear-gradient(136deg, var(--primary), var(--primary-dark)) !important;
}

.form-control,
.form-select,
.default-select,
.nice-select,
.input-group-text,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: var(--ui-radius-sm) !important;
    background: rgba(15, 25, 40, 0.9) !important;
    border: 1px solid rgba(109, 170, 231, 0.34) !important;
    color: #e4f3ff !important;
    min-height: 42px;
}

.form-control::placeholder,
.form-select::placeholder,
input::placeholder,
textarea::placeholder {
    color: #7c9bbc !important;
}

.form-control:focus,
.form-select:focus,
.default-select:focus,
.nice-select:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--rgba-primary-7) !important;
    box-shadow: var(--ui-glow) !important;
    background: rgba(17, 29, 47, 0.98) !important;
}

.input-group-text {
    color: #95d2ff !important;
}

.select2-dropdown {
    background: rgba(12, 21, 34, 0.98) !important;
    border: 1px solid rgba(111, 174, 235, 0.35) !important;
}

.select2-container--default .select2-results__option {
    color: #bdd3eb;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--rgba-primary-3) !important;
    color: #f3faff !important;
}

.btn {
    border-radius: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    transition: transform 0.16s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:focus {
    box-shadow: var(--ui-glow) !important;
}

.btn-primary {
    border: 1px solid var(--rgba-primary-5) !important;
    background: linear-gradient(140deg, var(--primary), var(--primary-dark)) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px var(--rgba-primary-3) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: linear-gradient(140deg, var(--primary-hover), var(--primary-dark)) !important;
    border-color: var(--rgba-primary-7) !important;
}

.btn-danger {
    border-color: rgba(255, 167, 180, 0.45) !important;
    background: linear-gradient(140deg, #ef546b, #ff7b55) !important;
    color: #ffffff !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background: linear-gradient(140deg, #df445d, #ef6e49) !important;
}

.btn-info {
    border-color: rgba(168, 244, 255, 0.45) !important;
    background: linear-gradient(140deg, #3fbef7, #5fecd6) !important;
    color: #03202a !important;
}

.btn-warning {
    border-color: rgba(255, 219, 152, 0.45) !important;
    background: linear-gradient(140deg, #ffbd51, #ff9a44) !important;
    color: #2b1a00 !important;
}

.btn-light {
    background: rgba(103, 167, 231, 0.12) !important;
    border-color: rgba(125, 189, 245, 0.34) !important;
    color: #d8eeff !important;
}

.badge {
    border-radius: 999px;
    padding: 0.42em 0.74em;
    font-weight: 600;
}

.nav-tabs {
    border-bottom-color: rgba(108, 170, 230, 0.26) !important;
}

.nav-tabs .nav-link {
    color: #95b2cf !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 8px 8px 0 0 !important;
}

.nav-tabs .nav-link:hover {
    color: #d8ecff !important;
}

.nav-tabs .nav-link.active {
    color: #e6f5ff !important;
    background: rgba(78, 163, 236, 0.2) !important;
    border-bottom-color: rgba(132, 212, 255, 0.8) !important;
}

.pagination .page-link {
    color: #9fbbd7 !important;
    background: rgba(16, 27, 43, 0.9) !important;
    border-color: rgba(108, 171, 232, 0.3) !important;
}

.pagination .page-item.active .page-link {
    color: #ffffff !important;
    background: linear-gradient(140deg, var(--primary), var(--primary-dark)) !important;
    border-color: var(--rgba-primary-6) !important;
}

.modal-backdrop.show {
    opacity: 0.72 !important;
    background-color: #050a12 !important;
}

.modal-content {
    border-radius: 18px !important;
    border: 1px solid rgba(126, 187, 245, 0.34) !important;
    box-shadow: 0 30px 60px rgba(3, 10, 19, 0.62) !important;
}

.modal-header,
.modal-footer {
    border-color: rgba(114, 175, 233, 0.23) !important;
}

.modal-title {
    color: #e8f6ff !important;
}

.modal .btn-close {
    filter: invert(1) brightness(1.9);
    opacity: 0.8;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.modal .btn-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
    background: rgba(4, 10, 18, 0.78) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.swal2-popup,
.swal2-popup.swal2-modal,
.swal2-popup.swal2-modal.swal2-show {
    border-radius: 18px !important;
    border: 1px solid rgba(135, 200, 255, 0.35) !important;
    background: linear-gradient(155deg, rgba(16, 27, 44, 0.97), rgba(11, 18, 30, 0.95)) !important;
    color: #dff0ff !important;
    box-shadow: 0 26px 60px rgba(3, 10, 19, 0.7) !important;
}

.swal2-title,
.swal2-content,
.swal2-html-container {
    color: #e8f6ff !important;
}

.swal2-actions {
    gap: 10px;
}

.swal2-styled {
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 18px !important;
    box-shadow: none !important;
}

.swal2-styled.swal2-confirm {
    border: 1px solid var(--rgba-primary-6) !important;
    background: linear-gradient(140deg, var(--primary), var(--primary-dark)) !important;
}

.swal2-styled.swal2-cancel {
    border: 1px solid rgba(144, 190, 231, 0.45) !important;
    background: rgba(38, 58, 83, 0.86) !important;
    color: #def2ff !important;
}

.swal2-styled:hover {
    transform: translateY(-1px);
}

.swal2-input,
.swal2-textarea,
.swal2-select {
    background: rgba(15, 25, 41, 0.96) !important;
    border: 1px solid rgba(114, 177, 236, 0.36) !important;
    color: #e4f2ff !important;
    border-radius: 10px !important;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    border-color: rgba(129, 209, 255, 0.8) !important;
    box-shadow: var(--ui-glow) !important;
}

.swal2-icon.swal2-warning {
    border-color: rgba(255, 198, 92, 0.76) !important;
    color: #ffc95f !important;
}

.swal2-icon.swal2-error {
    border-color: rgba(255, 95, 115, 0.74) !important;
}

.swal2-icon.swal2-success {
    border-color: rgba(41, 207, 136, 0.74) !important;
}

.authincation-content {
    border-radius: 22px !important;
}

.authincation .login-aside {
    background: rgba(9, 17, 28, 0.72);
}

.footer {
    border-top: 1px solid rgba(114, 174, 233, 0.2);
    background: linear-gradient(180deg, rgba(7, 13, 23, 0.15), rgba(7, 13, 23, 0.62)) !important;
}

.footer .copyright {
    padding-left: 1rem;
    padding-right: 1rem;
}

.footer .copyright p,
.footer .copyright a {
    color: #93aecb !important;
}

.footer .copyright a:hover {
    color: #d5ecff !important;
}

.CodeMirror,
.cm-s-dracula.CodeMirror {
    border: 1px solid rgba(115, 177, 237, 0.3) !important;
    border-radius: 12px;
    background: rgba(12, 21, 35, 0.92) !important;
    color: #dcefff;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(10, 17, 30, 0.7);
}

::-webkit-scrollbar-thumb {
    background: rgba(123, 190, 247, 0.45);
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(143, 211, 255, 0.7);
}

@media (max-width: 991.98px) {
    [data-layout="vertical"] .header .header-content .nav-control {
        display: flex !important;
    }

    .header .header-content {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        border-radius: 10px;
    }

    .content-body .container-fluid {
        padding-top: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .card,
    .modal-content,
    .authincation-content {
        border-radius: 14px !important;
    }

    .sidebar-right .sidebar-right-inner {
        padding: 14px;
    }

    .swal2-popup {
        width: calc(100% - 1.5rem) !important;
        margin: 0.75rem !important;
    }
}