@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap');

:root {
    color-scheme: light;
    --dt-topbar-height: 72px;
    --font: "Rubik", sans-serif;
    --white-color: #fff;
    --black-color: #000;
    --black-50: rgba(0, 0, 0, 0.50);
    --body-color: #1b1b1b;
    --primary-color: #8037b5;
    --assest-color: #f6f2f9;
    --highlight-color: #f4cb00;
    --green-color: #058f00;
    --red-color: #e3000b;

    /* Theme (light, default) */
    --dt-bg: #ffffff;
    --dt-surface: #ffffff;
    --dt-card-bg: rgba(255, 255, 255, 0.85);
    --dt-card-border: rgba(128, 55, 181, 0.12);
    --dt-text-muted: #6b7280;
    --dt-shadow: rgba(128, 55, 181, 0.18);
    --dt-input-bg: #f6f2f9;
    --dt-input-border: #e9e1f2;
    --dt-accent-light: #b866e0;
    --dt-spinner-track: rgba(255, 255, 255, 0.35);
    --dt-hover-tint: rgba(128, 55, 181, 0.07);
    --dt-active-tint: rgba(128, 55, 181, 0.12);
    --dt-row-hover: rgba(128, 55, 181, 0.05);
    --dt-table-text: var(--body-color);
    --dt-status-active: var(--green-color);
    --dt-status-inactive: var(--red-color);
    --dt-type-google: #4285f4;
    --dt-accent-tint: rgba(128, 55, 181, 0.08);
    --dt-status-active-tint: rgba(5, 143, 0, 0.12);
    --dt-status-inactive-tint: rgba(227, 0, 11, 0.12);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --body-color: #f2effa;
    --assest-color: #221e30;

    --dt-bg: #0f0d16;
    --dt-surface: #1c1926;
    --dt-card-bg: rgba(26, 22, 38, 0.82);
    --dt-card-border: rgba(244, 203, 0, 0.10);
    --dt-text-muted: #a79fbb;
    --dt-shadow: rgba(0, 0, 0, 0.45);
    --dt-input-bg: #1d1929;
    --dt-input-border: #322b47;
    --dt-accent-light: #b866e0;
    --dt-spinner-track: rgba(255, 255, 255, 0.35);
    --dt-hover-tint: rgba(244, 203, 0, 0.08);
    --dt-active-tint: rgba(244, 203, 0, 0.14);
    --dt-row-hover: rgba(255, 255, 255, 0.03);
    --dt-table-text: #c9c3d6;
    --dt-status-active: #4ade80;
    --dt-status-inactive: #f87171;
    --dt-type-google: #669df6;
    --dt-accent-tint: rgba(184, 102, 224, 0.14);
    --dt-status-active-tint: rgba(74, 222, 128, 0.14);
    --dt-status-inactive-tint: rgba(248, 113, 113, 0.14);
}

/* Page-load entrance animations — targeted per element, not a page-wrapper class.
   (A `transform` animation on a `.body-content`-level wrapper would make it a
   containing block for any `position: fixed` descendant — e.g. a Bootstrap
   `.modal` — breaking that modal's viewport-centered positioning. Animating
   the individual content blocks (`.custom-border-card`, `.page-search`,
   `.table-responsive`) instead keeps modals as siblings, never ancestors,
   of an animated element, and applies automatically on every admin module
   that already uses these shared classes.) */
@keyframes dtFadeInLeft {
    from { opacity: 0; transform: translateX(-18px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes dtFadeInDown {
    from { opacity: 0; transform: translateY(-14px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes dtFadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.sidebar {
    animation: dtFadeInLeft .45s ease both;
}
.header {
    animation: dtFadeInDown .45s ease both;
}
.custom-border-card {
    animation: dtFadeInUp .5s cubic-bezier(0.22, 1, 0.36, 1) .10s both;
}
.page-search {
    animation: dtFadeInUp .5s cubic-bezier(0.22, 1, 0.36, 1) .16s both;
}
.table-responsive {
    animation: dtFadeInUp .5s cubic-bezier(0.22, 1, 0.36, 1) .22s both;
}
@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .header,
    .custom-border-card,
    .page-search,
    .table-responsive {
        animation: none;
    }
}

/* Theme toggle button (header) */
.dt-theme-toggle-btn .fa-moon {
    display: none;
}
:root[data-theme="dark"] .dt-theme-toggle-btn .fa-sun {
    display: none;
}
:root[data-theme="dark"] .dt-theme-toggle-btn .fa-moon {
    display: inline-block;
}

html,
body {
    height: 100%;
    overflow: auto;
}
body {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    color: var(--body-color);
    background: var(--dt-bg);
    font-size: 14px;
    overflow-x: hidden;
    transition: background .3s ease, color .3s ease;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font);
}
.defaultfont {
    font-family: var(--font);
}
a {
    text-decoration: none !important;
}
.primary-color {
    color: var(--primary-color);
}
.primary-bg {
    background-color: var(--primary-color) !important;
}
.highlight-color {
    color: var(--highlight-color);
}
.green-color {
    color: var(--green-color) !important;
}
.red-color {
    color: var(--red-color) !important;
}
.green-bg {
    background-color: var(--green-color) !important;
}
.red-bg {
    background-color: var(--red-color) !important;
}

.text-gray {
    color: var(--body-color);
    opacity: 0.6;
}
.btn:focus {
    outline: none;
    -webkit-box-shadow: 0 0 0;
    box-shadow: 0 0 0;
}
.btn-link {
    color: var(--primary-color) !important;
    font-weight: 600;
    border-bottom: 1px solid var(--primary-color);
    display: inline-block;
    padding: 0 0 0px;
    border-radius: 0;
    font-size: 14px;
}
.btn-default {
    background: var(--primary-color);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--white-color);
    border: 1px solid transparent;
    box-shadow: 0 6px 16px -6px var(--dt-shadow);
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    padding: 9px 20px;
}
.btn-default:hover {
    color: var(--white-color);
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -6px var(--dt-shadow);
}
input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color) !important;
    cursor: pointer;
}
.mw-120 {
    min-width: 120px;
}
.mw-150 {
    min-width: 150px;
}
.btn-icon {
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--primary-color);
}
.dropright .dot-icon {
    height: 18px;
}
.dropright .dropdown-menu {
    top: 100% !important;
    right: 0;
    -webkit-transform: none !important;
    transform: none !important;
    left: auto !important;
}
.dropdown-menu {
    -webkit-box-shadow: 0 15px 35px var(--assest-color);
    box-shadow: 0 15px 35px var(--assest-color);
    padding: 4px;
    border: 0;
    border-radius: 12px;
}
.dropdown-menu .dropdown-item {
    font-weight: 500;
    border-bottom: 2px solid var(--assest-color);
    padding: 7px 11px;
    font-size: 14px;
}
.dropdown-menu .dropdown-item:last-child {
    border-bottom: 0;
}
.side-toggle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: transparent;
    padding: 0;
}
.side-toggle span {
    background: var(--primary-color);
    width: 22px;
    height: 3px;
    margin: 2px;
    border-radius: 50px;
}
.side-toggle span:nth-child(2) {
    width: 26px;
}
.custom-control .custom-control-label::before {
    background: transparent;
    border: 2px solid var(--primary-color);
    border-radius: 3px;
}
.custom-control .custom-control-input:checked~.custom-control-label::after {
    border-radius: 3px;
    background-color: var(--primary-color);
}
.custom-control.custom-radio .custom-control-label::before,
.custom-control.custom-radio .custom-control-label:after {
    border-radius: 50% !important;
}
.sidebar {
    background: var(--dt-surface);
    transition: background .3s ease, box-shadow .3s ease;
    padding: 0 14px 20px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 280px;
    max-width: 100%;
    overflow: auto;
    box-shadow: 1px 0 0 var(--dt-card-border), 8px 0 24px -12px rgba(0, 0, 0, 0.08);
    z-index: 30;
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.sidebar::-webkit-scrollbar {
    width: 6px;
}
.sidebar::-webkit-scrollbar-thumb {
    background-color: var(--dt-text-muted) !important;
    border-radius: 10px;
}
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}
@media (min-width: 1680px) {
    .sidebar {
        width: 300px;
    }
}
.sidebar.hide-sidebar {
    width: 80px;
    padding: 0 10px 20px;
}
@media (min-width: 1024px) {
    .sidebar.hide-sidebar .side-menu .partition{
        display: none;
    }
    .sidebar.hide-sidebar .side-head {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin: 0 -10px 10px;
        padding: 0;
        width: auto;
    }
    .sidebar.hide-sidebar .side-logo,
    .sidebar.hide-sidebar .partition,
    .sidebar.hide-sidebar .side-menu a>span {
        display: none;
    }
    .sidebar.hide-sidebar .side-menu .active a:after {
        content: none;
    }
    .sidebar.hide-sidebar .side-menu a {
        margin: 6px auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 13px 9px;
        height: 50px;
        width: 50px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    .sidebar.hide-sidebar .side-menu a .menu-icon {
        margin-right: 0;
    }
    .sidebar.hide-sidebar .side-menu a.dropdown-toggle:after {
        content: none;
    }
    .sidebar.hide-sidebar .side-menu .dropdown-menu {
        margin-left: 0;
        min-width: unset;
        padding: 0;
        border-left: none;
    }
    .sidebar.hide-sidebar .side-menu .dropdown-menu a {
        padding: 0;
    }
    .sidebar.hide-sidebar .side-menu .dropdown-menu .active{
        padding: 0;
        margin: 0px;
    }
    .sidebar.hide-sidebar .side-menu .dropdown-menu a svg {
        margin-right: 0;
    }
}
@media (min-width: 1680px) {
    .sidebar.hide-sidebar .side-head {
        margin: 0 -10px 10px;
    }
}
.sidebar .side-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: var(--dt-topbar-height);
    margin: 0 -14px 10px;
    padding: 0 20px;
    border-bottom: 1px solid var(--dt-card-border);
}
.sidebar .side-logo {
    width: 150px;
}
.sidebar .side-logo h3 {
    font-size: 22px;
}
.sidebar .side-menu {
    padding: 0;
    list-style: none;
    margin: 4px 0 0;
}
.sidebar .side-menu a {
    color: var(--dt-text-muted);
    display: block;
    padding: 11px 14px;
    position: relative;
    margin: 4px 0;
    border-radius: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.sidebar.hide-sidebar .side-menu .side_line.active a:after {
    display: none;
}
.sidebar .side-menu .side_line.active a:after {
    display: none;
}
.sidebar .side-menu a .menu-icon {
    margin-right: 12px;
    width: 18px;
    text-align: center;
    transition: -webkit-filter .2s ease, filter .2s ease;
}
.sidebar .side-menu .dropdown-menu a .submenu-icon {
    margin-right: 12px;
    width: 16px;
    text-align: center;
}
.sidebar .side-menu a:hover {
    color: var(--primary-color);
    background: var(--dt-hover-tint);
    transform: translateX(2px);
}
.sidebar .side-menu .active a {
    background: var(--primary-color);
    border-radius: 12px;
    color: var(--white-color);
}
.sidebar .side-menu .active a:hover {
    transform: none;
}
.sidebar .side-menu .active a .menu-icon {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
    margin-right: 14px;
}
.sidebar .side-menu .active .dropdown-menu .active .submenu-icon {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
    /* margin-right: 14px; */
}
.sidebar .side-menu .dropdown-toggle::after {
    position: absolute;
    right: 14px;
    top: 22px;
    transition: transform .2s ease;
}
.sidebar .side-menu .dropdown-toggle[aria-expanded="true"]::after,
.sidebar .side-menu .dropdown.show > .dropdown-toggle::after {
    transform: rotate(180deg);
}
.sidebar .side-menu .dropdown-menu {
    position: relative !important;
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-box-shadow: 0 0 0;
    box-shadow: 0 0 0;
    float: none;
    background: transparent;
    margin-left: 14px;
    padding-left: 8px;
    border-radius: 0;
    border-left: 2px solid var(--primary-color);
}
.sidebar .side-menu .dropdown-menu .dropdown-item {
    padding: 4px 12px;
    background: transparent !important;
}
.right-content {
    margin-left: 280px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.sidebar .side-menu .side-submenu a {
    color: var(--dt-text-muted);
    display: block;
    padding: 9px 12px;
    position: relative;
    margin: 3px 0;
    border-radius: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 500;
    transition: background .2s ease, color .2s ease;
}
.sidebar .side-menu .side-submenu .active {
    background: var(--primary-color);
    border-radius: 10px;
    color: var(--white-color);
    padding: 1px 0px;
}
.sidebar .side-menu .side-submenu a:hover {
    color: var(--primary-color);
    background: var(--dt-hover-tint);
}
.sidebar .side-menu .side-submenu .active a:hover {
    color: var(--white-color);
    background: transparent;
}
.sidebar .side-menu .side-submenu .active a {
    color: var(--white-color);
}
@media (min-width: 1680px) {
    .right-content {
        margin-left: 300px;
    }
}
.right-content.right-content-0 {
    margin-left: 80px;
}
.right-content.right-content-0 .header .title-control .side-toggle {
    display: none;
}
.header {
    position: sticky;
    -webkit-position: -webkit-sticky;
    top: 0;
    height: var(--dt-topbar-height);
    background: var(--dt-surface);
    border-bottom: 1px solid var(--dt-card-border);
    transition: background .3s ease, border-color .3s ease;
    z-index: 22;
    padding: 0 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
@media (min-width: 1680px) {
    .header {
        padding: 0 35px;
    }
}
.header .title-control {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.header .title-control .side-toggle {
    margin-right: 15px;
    display: none;
}
.header .page-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--body-color);
    margin: 0;
}
.header .input-group {
    border: 1px solid var(--dt-input-border);
    background: var(--dt-input-bg);
    border-radius: 100px;
    width: 550px;
    max-width: 100%;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.header .input-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px var(--dt-shadow);
}
.header .input-group .input-group-text,
.header .input-group .form-control {
    background: transparent;
    border: 0;
    -webkit-box-shadow: 0 0 0;
    box-shadow: 0 0 0;
}
.header .input-group .input-group-text img,
.header .input-group .form-control img {
    width: 20px;
    margin: 0 5px;
}
.header .input-group .form-control {
    font-size: 14px;
    padding: 12px 6px;
}
.header .side-logo {
    display: none;
}
.header .head-control {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.header .head-control .head-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 44px;
    width: 44px;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 12px;
    background: var(--dt-surface);
    border: 1px solid var(--dt-card-border) !important;
    -webkit-box-shadow: 0 4px 14px -6px var(--dt-shadow) !important;
    box-shadow: 0 4px 14px -6px var(--dt-shadow) !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.header .head-control .head-btn:hover {
    transform: translateY(-2px);
    background: var(--dt-hover-tint);
    box-shadow: 0 8px 20px -8px var(--dt-shadow) !important;
}
.avatar-img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.body-content {
    padding: 18px 32px 40px;
}
.box-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--body-color);
    padding-bottom: 10px;
    margin-top: 20px;
}
.box-title .title {
    font-size: 20px;
    font-weight: 600;
    margin: 5px 0;
}
.avatar-control {
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.avatar-control .avatar-img {
    height: 50px;
    width: 50px;
    border-radius: 20%;
}
/* Table card wrapper — applies to every module's listing table */
.table-responsive {
    overflow-x: auto;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}
.table-striped tbody tr:nth-of-type(even) {
    background-color: var(--dt-row-hover);
}
.table {
    border-color: var(--dt-card-border) !important;
    color: var(--body-color) !important;
    min-width: 650px;
    margin-bottom: 0;
}
/* Neutralize Bootstrap .table-bordered's vertical cell borders — keep row dividers only */
.table-bordered {
    border-left: 0 !important;
    border-right: 0 !important;
}
.table th,
.table td {
    border-left: 0 !important;
    border-right: 0 !important;
}
.table tbody tr {
    transition: background-color .15s ease;
}
.table tbody tr:hover {
    background-color: var(--dt-hover-tint) !important;
}
.table thead th {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    border-top: 0;
    border-bottom: 2px solid var(--dt-card-border) !important;
    background-color: var(--dt-row-hover);
    color: var(--dt-text-muted) !important;
    padding: 12px;
}
.table td {
    font-size: 14px;
    color: var(--dt-table-text) !important;
    border-bottom: 1px solid var(--dt-card-border) !important;
    border-top: 0;
    padding: 12px 14px;
    line-height: 1.5;
    vertical-align: middle;
}
.table td div,
.table td span {
    color: var(--dt-table-text) !important;
}
.table .avatar-img {
    margin-right: 10px;
}
.table .clamp-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.table .btn {
    padding: 2px;
    background: transparent;
    margin: 0 3px;
}
.table .btn img {
    width: 16px;
}
.table tfoot {
    background-color: var(--dt-row-hover);
}
/* Login-type pill (used in the Users table's TYPE column) */
.login-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--primary-color);
    background: var(--dt-hover-tint);
    border: 1px solid var(--dt-card-border);
}
.login-type-pill i {
    font-size: 12px;
}
/* Distinct color per login type, so they're distinguishable at a glance */
.login-type-pill:has(.fa-google) {
    color: var(--dt-type-google);
    background: color-mix(in srgb, var(--dt-type-google) 14%, transparent);
    border-color: color-mix(in srgb, var(--dt-type-google) 30%, transparent);
}
.login-type-pill:has(.fa-apple) {
    color: var(--dt-text-muted);
    background: color-mix(in srgb, var(--dt-text-muted) 14%, transparent);
    border-color: var(--dt-card-border);
}
.login-type-pill:has(.fa-mobile-screen-button) {
    color: var(--dt-status-active);
    background: color-mix(in srgb, var(--dt-status-active) 14%, transparent);
    border-color: color-mix(in srgb, var(--dt-status-active) 30%, transparent);
}
.login-type-pill:has(.fa-lock) {
    color: var(--primary-color);
    background: var(--dt-hover-tint);
    border-color: var(--dt-card-border);
}
.img-thumbnail {
    background-color: var(--dt-surface);
    border-color: var(--dt-card-border);
    border-radius: 10px;
    transition: background-color .3s ease, border-color .3s ease;
}
.dot {
    height: 8px;
    width: 8px;
    background: var(--red-color);
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}
@keyframes dtTabsWrapIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes dtTabItemIn {
    from { opacity: 0; transform: translateY(6px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.custom-tabs {
    margin: 20px 0;
    background: var(--assest-color);
    border-radius: 100px;
    animation: dtTabsWrapIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.custom-tabs li.nav-item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    animation: dtTabItemIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.custom-tabs li.nav-item:nth-child(1) { animation-delay: 0.06s; }
.custom-tabs li.nav-item:nth-child(2) { animation-delay: 0.11s; }
.custom-tabs li.nav-item:nth-child(3) { animation-delay: 0.16s; }
.custom-tabs li.nav-item:nth-child(4) { animation-delay: 0.21s; }
.custom-tabs li.nav-item:nth-child(5) { animation-delay: 0.26s; }
.custom-tabs li.nav-item:nth-child(n+6) { animation-delay: 0.31s; }
.custom-tabs .nav-link {
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    color: var(--body-color);
    padding: 10px;
}
.custom-tabs .nav-link.active {
    background: var(--primary-color);
}
.summary-table-card .border-card {
    padding: 10px;
    border: 2px solid var(--assest-color);
    border-radius: 15px;
    margin-bottom: 15px;
    font-size: 14px;
}
.summary-table-card .border-card:hover {
    border: 2px solid var(--primary-color);
}
.summary-table-card .border-card>.row {
    margin: 0;
}
.summary-table-card .border-card>.row .col,
.summary-table-card .border-card>.row .col-1,
.summary-table-card .border-card>.row .col-2,
.summary-table-card .border-card>.row .col-12 {
    padding: 0;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.summary-table-card .avatar-control {
    min-width: 120px;
    font-weight: 600;
}
.summary-table-card .avatar-control img {
    margin-right: 8px;
}
.summary-table-card .price {
    color: var(--red-color);
    font-weight: 600;
}
.artist-row {
    margin: 0 -10px;
}
.artist-row .col-6 {
    padding: 0 10px;
}
.video-box {
    padding: 25px;
    background: var(--assest-color);
}
.video-box .f600 {
    font-weight: 600;
}
.video-box .box-border-0 {
    border: 0;
    padding-bottom: 0;
}
.page-search {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 12px;
    background: var(--dt-surface);
    border: 1px solid var(--dt-card-border);
    border-radius: 10px;
    box-shadow: 0 1px 3px var(--dt-shadow);
    transition: background .3s ease, border-color .3s ease;
    padding: 7px 14px;
    margin-bottom: 18px;
}
/* ── Export Toolbar — dedicated markup/classes for the "export data" bar.
   Responsive via flex-wrap + a shrinkable label (min-width, flex:1) rather
   than a viewport breakpoint guess: the sidebar (280-300px) eats into the
   available width independently of screen size, so a Bootstrap col-md-*
   guess can be wrong at a given viewport width — this only wraps once the
   label + buttons genuinely don't fit on one line. ── */
.export-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--dt-surface);
    border: 1px solid var(--dt-card-border);
    border-left: 3px solid var(--primary-color);
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px var(--dt-shadow);
    flex-wrap: wrap;
}
.export-toolbar .export-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--dt-text-muted);
    font-weight: 500;
    flex: 1;
    min-width: 160px;
}
.export-toolbar .export-label .fa-circle-info {
    color: var(--primary-color);
    font-size: 15px;
}
.export-toolbar .export-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.export-toolbar .export-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid var(--dt-card-border);
    background: var(--dt-input-bg);
    color: var(--dt-text-muted);
    cursor: pointer;
    transition: all .15s ease;
    font-family: var(--font);
}
.export-toolbar .export-btn:hover {
    background: var(--dt-hover-tint);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px -1px var(--dt-shadow);
}
.export-toolbar .export-btn:focus,
.export-toolbar .export-btn:focus-visible,
.export-toolbar .export-btn:active {
    outline: none;
    box-shadow: none;
}
@media (max-width: 567px) {
    .export-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
}
.page-search .input-group-text,
.page-search .form-control,
.page-search .form-control:focus {
    border: 0;
    background: transparent;
    color: var(--body-color);
    -webkit-box-shadow: 0 0 0;
    box-shadow: 0 0 0;
    font-size: 14px;
    height: 34px !important;
    padding-top: 0;
    padding-bottom: 0;
}
.page-search .input-group-text img,
.page-search .form-control img {
    width: 20px;
}
.page-search .sorting {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 290px;
    background: var(--dt-input-bg);
    border: 1px solid var(--dt-input-border);
    padding: 3px 12px;
    border-radius: 8px;
    transition: background .3s ease, border-color .3s ease;
}
.page-search .sorting label {
    min-width: 60px;
    margin: 0;
    font-weight: 600;
    color: var(--dt-text-muted);
}
.add-video-btn {
    height: calc(100% - 30px);
    background: var(--assest-color);
    border: 1px solid var(--assest-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 15px 0;
    width: 100%;
    border-radius: 15px;
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    padding: 25px;
    color: var(--body-color) !important;
}
.add-video-btn .icon {
    margin-bottom: 15px;
}
.video-card {
    border-radius: 15px;
    border: 3px solid var(--assest-color) !important;
    margin: 15px 0;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.video-card:hover {
    border: 3px solid var(--primary-color) !important;
    /* -webkit-box-shadow: 0 15px 35px var(--assest-color); */
    /* box-shadow: 0 15px 35px var(--assest-color); */
}
.video-card:hover .play-btn,
.video-card:hover .overlap-control,
.video-card:hover .play-btn-top {
    display: block;
}
.video-card .card-img-top {
    border-radius: 11px 11px 0px 0px;
    height: 100px;
    -o-object-fit: fill;
    object-fit:fill
}
.video-card .play-btn {
    background: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: none;
}
.video-card .card-body {
    padding: 10px 10px !important;
    position: relative;
}
.video-card .card-body .dropdown {
    position: absolute;
    right: 10px;
    top: 10px;
}
.video-card .card-body .dropdown .dropdown-menu {
    top: auto !important;
    bottom: 100%;
}
.video-card .card-body .dropdown .head-btn {
    padding: 5px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.video-card .card-body .dropdown .dropdown-item {
    font-weight: 500;
}
.video-card .card-body .dropdown .dropdown-item img {
    height: 18px;
    width: 18px;
    -o-object-fit: contain;
    object-fit: contain;
    margin-right: 10px;
}
.video-card .card-body .card-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 40px !important;
    max-height: 40px !important;
}
.table_description {
    text-align: left;
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.video-card .card-body .card-details {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.video-card .card-body .card-details p {
    margin: 0;
    font-weight: 500;
}
.video-card .card-body .card-details p.tag {
    color: var(--body-color);
}
.video-card .play-btn-top {
    position: absolute;
    right: 00px;
    top: 00px;
    background: transparent;
    padding: 0;
    display: none;
}
.video-card .play-btn-top img {
    width: 45px;
}
.video-card .overlap-control {
    position: absolute;
    right: 10px;
    bottom: -5px;
    display: none;
}
.video-card .overlap-control .btn {
    background: var(--assest-color);
    padding: 2px 6px;
    /* border-radius: 10px; */
}
.video-card .overlap-control .btn .dot-icon {
    height: 16px;
    width: 16px;
    -o-object-fit: contain;
    object-fit: contain;
    color: var(--primary-color) !important;
}
.pagination {
    padding: 5px;
    border: 1px solid var(--dt-card-border);
    background: var(--dt-surface);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    border-radius: 12px;
    margin: 35px auto 0;
    transition: background .3s ease, border-color .3s ease;
}
.pagination .page-link {
    border: 0;
    height: 30px;
    width: 30px;
    background: transparent !important;
    margin: 0 5px;
    border-radius: 50px !important;
    color: var(--body-color);
    transition: background .2s ease, color .2s ease;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.pagination .page-item:not(.active) .page-link:hover {
    background: var(--dt-hover-tint) !important;
    color: var(--primary-color);
}
.pagination .page-link .right-arrow {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.pagination .page-link .dots {
    font-weight: 600;
    margin-top: -4px;
}
.pagination .arrow-icon {
    height: 20px;
    width: 20px;
    background-image: url("../../assets/imgs/left-arrow.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 7px;
}
.pagination .arrow-icon .next-arrow {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.pagination .active .page-link {
    background: var(--primary-color) !important;
}
/* ── MODAL — themed for light/dark (Edit / Sort-Order and every other
   Bootstrap modal in the admin panel share this markup, so styling the
   base `.modal-*` classes here updates all of them at once) ── */
.modal-backdrop.show {
    opacity: .55;
}
.modal-content {
    background: var(--dt-surface);
    color: var(--body-color);
    border: 1px solid var(--dt-card-border);
    border-radius: 16px;
    box-shadow: 0 20px 60px -12px var(--dt-shadow);
    overflow: hidden;
}
.modal-header {
    position: relative;
    background: var(--dt-accent-tint);
    border-bottom: 1px solid var(--dt-card-border);
    padding: 16px 24px;
}
.modal-header .modal-title {
    color: var(--body-color);
    font-weight: 700;
    font-size: 17px;
    padding-right: 32px;
}
.modal-body {
    padding: 22px 24px;
    color: var(--body-color);
}
.modal-footer {
    border-top: 1px solid var(--dt-card-border);
    padding: 16px 24px;
}
.modal .close {
    font-size: 26px;
    color: var(--dt-text-muted);
    opacity: 1;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 300;
    line-height: 1;
    /* Bootstrap's `.modal-header .close` rule sets `padding: 1rem 1rem;
       margin: -1rem -1rem -1rem auto;` — a hack that only makes sense for
       the flex-flow close button it ships by default. Since this button is
       repositioned to `position: absolute` above, that leftover padding
       inflates its box (and the leftover margin re-offsets it), throwing
       off the `top: 50%` centering. Reset both so height is intrinsic
       (line-height only) and the button centers on the header consistently
       everywhere, regardless of that modal's title markup. */
    padding: 0;
    margin: 0;
    z-index: 22;
    outline: none;
    transition: color .15s ease;
}
/* Bootstrap's `.text-dark` utility is `!important`-scoped and was applied
   directly on some close buttons/spans to force a dark glyph against the
   old solid-color header — it now fights the themed header in dark mode,
   so it's neutralized here rather than stripped from ~16 view files.
   Color-only: must NOT repeat the positioning block above, or a `.text-dark`
   span nested *inside* `.close` (as some modals mark up the `×`) would
   itself become an absolutely-positioned box, collapsing the button's own
   content height and breaking its centering. */
.modal .close.text-dark,
.modal .close .text-dark {
    color: var(--dt-text-muted) !important;
}
.modal .close:hover {
    color: var(--primary-color) !important;
}
.modal .close.text-dark:hover,
.modal .close:hover .text-dark {
    color: var(--primary-color) !important;
}
/* Headerless media modal (e.g. video preview) — `.modal .close` above
   centers on `.modal-header`'s height via `top: 50%`; with no header, that
   resolves against `.modal-content` instead and drops the button into the
   middle of the media. Give this body its own positioning context and pin
   the button to its top-right corner as a small floating disc instead. */
.modal-body.p-0.bg-transparent {
    position: relative;
}
.modal-body.p-0.bg-transparent .close {
    top: 12px;
    right: 12px;
    transform: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.modal-body.p-0.bg-transparent .close,
.modal-body.p-0.bg-transparent .close .text-dark {
    color: var(--white-color) !important;
}
.modal-body.p-0.bg-transparent .close:hover,
.modal-body.p-0.bg-transparent .close:hover .text-dark {
    background: rgba(0, 0, 0, 0.75);
    color: var(--white-color) !important;
}
/* ── SweetAlert2 — plain black popup, no button borders/shadows ── */
.swal2-popup.dt-swal-popup {
    background: var(--black-color);
    color: var(--white-color);
    border-radius: 16px;
}
.swal2-popup.dt-swal-popup .swal2-html-container {
    color: var(--white-color);
}
.swal2-popup.dt-swal-popup .swal2-confirm.dt-swal-confirm,
.swal2-popup.dt-swal-popup .swal2-cancel.dt-swal-cancel {
    border: none;
    box-shadow: none;
    outline: none;
    border-radius: 10px;
    padding: 9px 26px;
    font-size: 15px;
    font-weight: 600;
    color: var(--white-color);
}
.swal2-popup.dt-swal-popup .swal2-confirm.dt-swal-confirm:hover,
.swal2-popup.dt-swal-popup .swal2-confirm.dt-swal-confirm:focus,
.swal2-popup.dt-swal-popup .swal2-confirm.dt-swal-confirm:active,
.swal2-popup.dt-swal-popup .swal2-cancel.dt-swal-cancel:hover,
.swal2-popup.dt-swal-popup .swal2-cancel.dt-swal-cancel:focus,
.swal2-popup.dt-swal-popup .swal2-cancel.dt-swal-cancel:active {
    border: none;
    box-shadow: none;
    outline: none;
}
.swal2-popup.dt-swal-popup .swal2-confirm.dt-swal-confirm {
    background: var(--primary-color);
    margin-right: 10px;
}
.swal2-popup.dt-swal-popup .swal2-cancel.dt-swal-cancel {
    background: var(--dt-text-muted);
}
.inline-tabs {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
    z-index: 2;
}
.inline-tabs li.nav-item {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
}
.inline-tabs .nav-link {
    padding: 10px 35px;
}
.app-right-btn {
    text-align: right;
    margin-top: -60px;
    margin-bottom: 30px;
}
.custom-border-card {
    padding: 20px 24px;
    border-radius: 15px;
    margin-bottom: 25px;
    background-color: var(--dt-card-bg) !important;
    border: 1px solid var(--dt-card-border);
    box-shadow: 0 4px 20px -4px var(--dt-shadow);
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.custom-border-card .card-header {
    font-size: 18px;
    background: transparent;
    padding: 0;
    font-weight: 700;
    border-bottom: 1px solid var(--dt-card-border);
    padding-bottom: 15px;
}
.custom-border-card .card-body {
    padding: 18px 0 10px;
}
/* Modern accent card-header — opt-in modifier (`dt-card-header`) so the plain
   .card-header used on the other ~30 custom-border-card pages is untouched.
   Uses `--dt-accent-tint` (not `--dt-hover-tint`, which intentionally shifts
   to a gold wash for hover states) so this static strip stays on-brand
   purple in both themes. */
.custom-border-card .card-header.dt-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    background: var(--dt-accent-tint);
    border-bottom: 1px solid var(--dt-card-border);
    border-radius: 14px 14px 0 0;
    color: var(--body-color);
    padding: 13px 24px;
    margin: -20px -24px 20px;
}
.custom-border-card .card-header.dt-card-header i {
    color: var(--primary-color);
    flex-shrink: 0;
    font-size: 0.95em;
}
.form-group label {
    font-weight: 500;
    color: var(--body-color);
    font-size: 14px;
    margin-bottom: 10px;
}
.form-control,
.custom-select {
    background-color: var(--dt-input-bg);
    border: 1px solid var(--dt-input-border);
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 14px;
    height: auto !important;
    color: var(--body-color);
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* Native <select> popups are rendered by the browser, outside our CSS —
   any transition on the trigger element only shows up as a light/dark
   flash right as the popup opens. Disable it so the dropdown opens instantly
   in the correct theme, no animation. */
select.form-control,
select.custom-select {
    transition: none;
}
.form-control::placeholder,
.custom-select::placeholder {
    color: var(--dt-text-muted);
    opacity: 1;
}
.form-control:focus,
.custom-select:focus {
    background-color: var(--dt-input-bg);
    color: var(--body-color);
    -webkit-box-shadow: 0 0 0 3px var(--dt-active-tint);
    box-shadow: 0 0 0 3px var(--dt-active-tint);
    border-color: var(--primary-color);
}
/* Browser autofill (saved passwords/emails) ignores background-color and
   forces its own white/yellow fill — override via the inset box-shadow trick
   so autofilled fields stay themed in both light and dark mode. Covers both
   the legacy -webkit- pseudo (Chrome/Safari/Edge) and the standard :autofill
   (Firefox). */
.form-control:autofill,
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--dt-input-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--dt-input-bg) inset !important;
    -webkit-text-fill-color: var(--body-color) !important;
    caret-color: var(--body-color) !important;
    transition: background-color 9999s ease-in-out 0s;
}
/* Bootstrap hardcodes .form-control[readonly] to a fixed #e9ecef, which
   ignores the active theme (looks washed-out in dark mode) — re-theme it
   with the same vars as the editable state. */
.form-control[readonly] {
    background-color: var(--dt-input-bg) !important;
    color: var(--dt-text-muted) !important;
    opacity: 1;
}
.file-control {
    padding: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    border-radius: 15px;
    cursor: pointer;
}
.file-control span {
    opacity: 0.6;
    display: inline-block;
    margin-top: 10px;
}
.thumbnail-img {
    position: relative;
    border: 1px solid var(--assest-color);
    display: inline-block;
    height: 100px;
    width: 130px;
    border-radius: 10px;
    padding: 4px;
}
.thumbnail-img img {
    border-radius: 8px;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.thumbnail-img .close {
    position: absolute;
    top: 5px;
    right: 8px;
    color: var(--white-color);
    opacity: 1;
    font-weight: 300;
}
.radio-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 20px;
}
.radio-group .custom-control {
    padding-left: 0;
    margin-right: 15px;
}
.radio-group .custom-control-label {
    margin-bottom: 0;
    background: var(--assest-color);
    padding: 6px 23px 6px 33px;
    border-radius: 100px;
    font-size: 16px;
}
.radio-group .custom-control-label::before,
.radio-group .custom-control-label:after {
    border-radius: 50%;
    top: 10px;
    left: 10px;
}
.radio-group .custom-control-label:after {
    display: none;
}
.radio-group .custom-control-label::before {
    background: transparent;
    border: 3px solid var(--body-color);
}
.radio-group .custom-control-input:checked~.custom-control-label {
    background: var(--primary-color);
    color: var(--white-color);
}
.radio-group .custom-control-input:checked~.custom-control-label::before {
    background: var(--primary-color);
    border-color: var(--white-color);
}
.page-title-sm {
    display: none;
}
.border-bottom {
    border-color: var(--assest-color) !important;
}
table.dataTable>thead .sorting:before,
table.dataTable>thead .sorting_asc:before,
table.dataTable>thead .sorting_desc:before,
table.dataTable>thead .sorting_asc_disabled:before,
table.dataTable>thead .sorting_desc_disabled:before {
    content: "↑";
}
table.dataTable>thead .sorting:after,
table.dataTable>thead .sorting_asc:after,
table.dataTable>thead .sorting_desc:after,
table.dataTable>thead .sorting_asc_disabled:after,
table.dataTable>thead .sorting_desc_disabled:after {
    content: "↓";
}
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--assest-color);
    border-radius: 8px;
    padding: 6px 18px;
    font-weight: 600;
}
div.dataTables_wrapper div.dataTables_length label .form-control,
div.dataTables_wrapper div.dataTables_filter label .form-control {
    padding: 6px 12px;
    text-align: center;
    margin: 0 13px;
}
div.dataTables_wrapper div.dataTables_length label input.form-control,
div.dataTables_wrapper div.dataTables_filter label input.form-control {
    margin-right: 0;
    text-align: left;
}
div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:first-child,
div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:last-child {
    overflow: auto;
}
.left-caption {
    height: 100%;
    position: relative;
}
.left-caption .bg-img {
    height: 100%;
    width: 100%;
    -o-object-fit: fill;
    object-fit:fill;
}
.left-caption .caption {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--black-50);
    color: var(--white-color);
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 160px;
}
.left-caption .caption .text {
    margin-top: 20px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}
.login-bg {
    background: var(--assest-color);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: auto;
    padding-bottom: 20px;
}
@media (max-height: 600px) {
    .login-bg {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: start;
    }
}
.app-logo img {
    width: 180px;
    margin: 15px 0 20px;
}
.app-login-box {
    max-width: 410px;
    margin: 0 auto;
    width: 90%;
    padding: 30px;
    background: var(--white-color);
    border-radius: 20px;
    border: 3px solid var(--primary-color);
}
.app-login-box .form-control {
    background: var(--assest-color);
}
.app-login-box .form-control:focus {
    background: var(--white-color);
}
@media (min-width: 1600px) {
    .counter-row {
        margin-bottom: 20px;
    }
    .table thead th,
    .table td {
        font-size: 16px;
    }
    .custom-tabs .nav-link,
    .summary-table-card .border-card {
        font-size: 16px;
    }
    .video-card .card-img-top {
        height: 250px;
    }
    .video-card .card-body .card-title {
        font-size: 16px;
    }
    .video-card .card-body .card-details p {
        font-size: 14px;
    }
    .video-card .play-btn-top img {
        width: 60px;
    }
    .form-group label {
        font-size: 16px;
    }
    .custom-border-card .card-header {
        font-size: 20px;
    }
}
@media (max-width: 1280px) {
    .header .input-group {
        width: 280px;
    }
}
@media (max-width: 991px) {
    .sidebar {
        left: -280px;
    }
    .sidebar.hide-sidebar {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        left: 0;
        z-index: 99;
        width: 280px;
    }
    .sidebar.hide-sidebar .side-toggle span:first-child {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .sidebar.hide-sidebar .side-toggle span:nth-child(2) {
        display: none;
    }
    .sidebar.hide-sidebar .side-toggle span:last-child {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        margin-top: -5px;
    }
    .right-content {
        margin-left: 0 !important;
    }
    .right-content .page-title {
        display: none;
    }
    .header {
        padding: 15px;
    }
    .header .title-control .side-toggle {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }
    .header .side-logo {
        display: block;
        width: 160px;
    }
    .header .mobile-close-search {
        display: none;
    }
    .counter-row .col-md {
        padding-right: 5px;
        padding-left: 5px;
    }
    .page-title-sm {
        font-size: 26px;
        font-weight: 600;
        margin: -10px 0 20px;
        display: block;
        border-bottom: 1px solid var(--assest-color);
        padding-bottom: 5px;
    }
    .app-logo img {
        margin: 20px 0 10px;
    }
}
@media (max-width: 767px) {
    .btn-default {
        font-size: 14px;
    }
    .header .input-group {
        height: 45px;
        width: 45px;
        border-radius: 5px;
    }
    .header .input-group .input-group-text {
        padding: 7px;
    }
    .header .input-group .form-control {
        display: none;
    }
    .box-title {
        padding-bottom: 8px;
    }
    .box-title .title {
        font-size: 18px;
    }
    .avatar-control .avatar-img {
        height: 30px;
        width: 30px;
    }
    .table th,
    .table td {
        padding: 8px 5px;
    }
    .summary-table-card .border-card {
        padding: 10px 2px;
    }
    .summary-table-card .border-card .row .col {
        text-align: left;
    }
    .summary-table-card .border-card .row .col-12 {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .summary-table-card .avatar-control {
        margin: 0 14px 10px;
    }
    .pagination {
        margin-top: 20px;
    }
    .inline-tabs {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        overflow: auto;
        margin-top: 0;
    }
    .inline-tabs::-webkit-scrollbar {
        display: none;
    }
    .inline-tabs .nav-link {
        padding: 8px 14px;
    }
    .app-right-btn {
        margin: 0 0 15px;
    }
    .form-group label {
        font-size: 14px;
    }
    .custom-border-card {
        padding: 16px 20px;
    }
    .custom-border-card .card-header {
        font-size: 18px;
        padding-bottom: 12px;
    }
    .file-control {
        padding: 16px;
    }
}
@media (max-width: 567px) {
    .page-search {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-bottom: 15px;
    }
    .page-search .sorting {
        margin-top: 8px;
    }
    div.dataTables_wrapper div.dataTables_length label,
    div.dataTables_wrapper div.dataTables_filter label {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:first-child,
    div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:last-child {
        padding: 0;
        overflow: auto;
    }
    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        margin-top: 15px;
    }
}
@media (max-width: 340px) {
    .header .side-logo {
        width: 120px;
    }
}
/* Image Upload Preview */
.avatar-upload {
    position: relative;
    max-width: 205px;
}
.avatar-edit {
    position: absolute;
    right: 12px;
    z-index: 1;
}
.avatar-edit input {
    display: none;
}
.avatar-edit input+label {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-bottom: 0;
    margin-right: 30px;
    margin-top: 125px;
    border-radius: 100%;
    background: var(--white-color);
    border: 1px solid transparent;
    box-shadow: 0px 2px 4px 0px var(--assest-color);
    cursor: pointer;
    font-weight: normal;
    transition: all .2s ease-in-out;
}
.avatar-edit input+label:hover {
    background: var(--assest-color);
    border-color: var(--body-color);
}
.avatar-edit input+label:after {
    content: "\f0ee";
    font-family: 'FontAwesome';
    color: var(--body-color);
    position: absolute;
    top: 130px;
    left: 0;
    right: 30px;
    text-align: center;
    margin: auto;
}
.avatar-upload .avatar-preview {
    width: 150px;
    height: 150px;
    position: relative;
    border-radius: 10%;
    background-color: var(--dt-input-bg);
    border: 2px solid var(--dt-input-border);
    transition: border-color .2s ease, background-color .2s ease;
}
.avatar-upload .avatar-preview:hover {
    border-color: var(--primary-color);
}
.avatar-upload .avatar-preview>img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    border-radius: 10px;
}
.avatar-upload .avatar-preview>img:hover {
    transform: scale(1.05);
}
/* Image Upload — drag & drop component (used by admin.user add/edit).
   Scoped to `.drop-area` / `.image-upload-wrapper > input[type=file]` so the
   older `.avatar-upload`/`.avatar-preview` markup used elsewhere is untouched. */
.image-upload-wrapper {
    position: relative;
    width: 200px;
}
.image-upload-wrapper input[type="file"] {
    display: none;
}
.drop-area {
    position: relative;
    border: 2px dashed var(--dt-input-border);
    border-radius: 14px;
    background: var(--dt-input-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 170px;
    overflow: hidden;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.drop-area:hover {
    border-color: var(--primary-color);
    background: var(--dt-hover-tint);
}
.drop-area.dragover {
    border-color: var(--primary-color);
    background: var(--dt-hover-tint);
    box-shadow: 0 0 0 4px var(--dt-active-tint);
}
.drop-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    text-align: center;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1;
}
.drop-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--dt-hover-tint);
    border: 1.5px solid var(--dt-input-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 22px;
    margin-bottom: 2px;
    transition: background 0.2s ease, transform 0.2s ease;
}
.drop-area:hover .drop-icon,
.drop-area.dragover .drop-icon {
    background: var(--dt-active-tint);
    transform: scale(1.08) translateY(-2px);
}
.drop-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--body-color);
    margin: 0;
}
.drop-hint {
    font-size: 12px;
    color: var(--dt-text-muted);
    margin: 0;
}
/* Preview image sits behind the placeholder; revealed when `.has-preview` is set */
.image-upload-wrapper img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 0;
}
.image-upload-wrapper.has-preview img {
    opacity: 1;
}
.image-upload-wrapper.has-preview .drop-placeholder {
    opacity: 0;
}
/* "Change photo" bar fades in on hover once a preview is set */
.image-upload-wrapper.has-preview .drop-area::before {
    content: '\f030\00a0 ' attr(data-change-label);
    font-family: 'Font Awesome 7 Free', var(--font);
    font-weight: 900;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.55);
    color: var(--white-color);
    font-size: 12px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
    border-radius: 0 0 12px 12px;
}
.image-upload-wrapper.has-preview .drop-area:hover::before {
    opacity: 1;
}
/* ── Generic file drop zone (import/export style pages) — same dashed-zone
   language as .drop-area above, but for a data file (csv/xlsx) instead of
   an image: once chosen, the placeholder swaps for a filename chip rather
   than a photo preview. ── */
.file-upload-wrapper {
    position: relative;
    width: 100%;
}
.file-upload-wrapper input[type="file"] {
    display: none;
}
.file-drop-area {
    position: relative;
    border: 2px dashed var(--dt-input-border);
    border-radius: 14px;
    background: var(--dt-input-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 150px;
    padding: 16px;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.file-drop-area:hover {
    border-color: var(--primary-color);
    background: var(--dt-hover-tint);
}
.file-drop-area.dragover {
    border-color: var(--primary-color);
    background: var(--dt-hover-tint);
    box-shadow: 0 0 0 4px var(--dt-active-tint);
}
.file-upload-wrapper.has-file .drop-placeholder {
    display: none;
}
.file-chip {
    display: none;
    align-items: center;
    gap: 10px;
    background: var(--dt-surface);
    border: 1px solid var(--dt-card-border);
    border-radius: 10px;
    padding: 10px 14px;
    max-width: 100%;
    box-shadow: 0 4px 14px -6px var(--dt-shadow);
}
.file-upload-wrapper.has-file .file-chip {
    display: flex;
}
.file-chip-icon {
    color: var(--primary-color);
    font-size: 20px;
    flex-shrink: 0;
}
.file-chip-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-chip-remove {
    border: none;
    background: transparent;
    color: var(--dt-text-muted);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: color .15s ease, background .15s ease;
}
.file-chip-remove:hover {
    color: var(--red-color);
    background: var(--dt-hover-tint);
}
/* ── Import instructions — a two-column checklist card instead of a raw
   Bootstrap alert; collapses to one column once it no longer fits. ── */
.import-instructions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
}
@media (max-width: 767px) {
    .import-instructions {
        grid-template-columns: 1fr;
    }
}
.import-instruction-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.import-instruction-item > i {
    color: var(--primary-color);
    font-size: 16px;
    margin-top: 3px;
    flex-shrink: 0;
}
.import-instruction-item strong {
    display: block;
    font-size: 14px;
    color: var(--body-color);
    margin-bottom: 2px;
}
.import-instruction-item p {
    font-size: 13px;
    color: var(--dt-text-muted);
    margin: 0;
    line-height: 1.5;
    word-break: break-word;
}
.import-instruction-item code {
    background: var(--dt-input-bg);
    border: 1px solid var(--dt-input-border);
    color: var(--primary-color);
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 12px;
}
.import-instruction-item--warning > i {
    color: var(--red-color);
}
.landscape-preview {
    width: 220px !important;
    height: 120px !important;
}
/* Image Upload Preview (Landscape) */
.avatar-upload-landscape {
    position: relative;
    max-width: 265px;
}
.avatar-edit-landscape {
    position: absolute;
    right: 0;
    bottom: -20px;
    z-index: 1;
}
.avatar-edit-landscape input {
    display: none;
}
.avatar-edit-landscape input+label {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-bottom: 0;
    margin-right: 30px;
    margin-top: 125px;
    border-radius: 100%;
    background: var(--white-color);
    border: 1px solid transparent;
    box-shadow: 0px 2px 4px 0px var(--assest-color);
    cursor: pointer;
    font-weight: normal;
    transition: all .2s ease-in-out;
}
.avatar-edit-landscape input+label:hover {
    background: var(--assest-color);
    border-color: var(--body-color);
}
.avatar-edit-landscape input+label:after {
    content: "\f0ee";
    color: var(--body-color);
    font-family: 'FontAwesome';
    position: absolute;
    top: 130px;
    left: 0;
    right: 30px;
    text-align: center;
    margin: auto;
}
.avatar-upload-landscape .avatar-preview-landscape {
    width: 220px;
    height: 120px;
    position: relative;
    border-radius: 10%;
}
.avatar-upload-landscape .avatar-preview-landscape>img {
    width: 100%;
    height: 100%;
    background-size: cover;
    border-radius: 10%;
    background-repeat: no-repeat;
    background-position: center;
}
/* Video Ribbon */
.ribbon {
    width: 125px;
    height: 125px;
    overflow: hidden;
    position: absolute;
}
.ribbon span {
    position: absolute;
    display: block;
    width: 200px;
    padding: 5px 0;
    background-color: var(--primary-color);
    color: var(--white-color);
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
}
.ribbon-top-left {
    top: -10px;
    left: -10px;
}
.ribbon-top-left::before {
    top: 0;
    right: 0;
}
.ribbon-top-left::after {
    bottom: 0;
    left: 0;
}
.ribbon-top-left span {
    right: -25px;
    top: 30px;
    transform: rotate(-45deg);
}
/* Loader */
#dvloader {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.7;
    background-color: var(--white-color);
    z-index: 9999;
}
#dvloader img {
    max-width: 300px;
    max-height: 300px;
    z-index: 100;
}
/* btn Cancel */
.btn-cancel {
    background: var(--black-color);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--white-color);
    border: 1px solid transparent;
    box-shadow: 0 6px 16px -6px var(--dt-shadow);
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    padding: 9px 20px;
}
.btn-cancel:hover {
    color: var(--white-color);
    background: var(--black-color);
    opacity: .82;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -6px var(--dt-shadow);
}
/* Plain black reads fine on the light theme's white page, but blends into
   the dark theme's near-black background — swap to a surface tone that
   still reads as "dark/neutral" but stays visibly separated from the card. */
:root[data-theme="dark"] .btn-cancel {
    background: var(--dt-surface);
    color: var(--body-color);
    border-color: var(--dt-input-border);
}
:root[data-theme="dark"] .btn-cancel:hover {
    background: var(--dt-hover-tint);
    color: var(--body-color);
    border-color: var(--primary-color);
    opacity: 1;
}
/* Edit-Delete btn — one consistent look for every action icon, tuned for both themes */
.edit-delete-btn {
    border: 1px solid var(--dt-card-border);
    cursor: pointer;
    outline: none;
    background: var(--dt-surface);
    color: var(--primary-color);
    width: 40px;
    height: 40px;
    padding: 0;
    flex-shrink: 0;
    line-height: 1;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px var(--dt-shadow);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.edit-delete-btn i {
    font-size: 18px;
}
.edit-delete-btn:hover {
    background: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -6px var(--dt-shadow);
}
.edit-delete-btn:focus {
    outline: none;
    box-shadow: none;
}
/* Icon action buttons (copy / refresh) sitting beside a readonly input inside
   .input-group — no fixed height so it stretches to match the input via the
   input-group's default flex align-items:stretch, themed via --dt-* tokens. */
.dt-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    flex-shrink: 0;
    background: var(--dt-surface);
    border: 1px solid var(--dt-card-border);
    border-radius: 8px;
    color: var(--primary-color);
    cursor: pointer;
    box-shadow: 0 1px 2px var(--dt-shadow);
    transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.dt-icon-btn i {
    font-size: 18px;
}
.dt-icon-btn:hover {
    background: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
    box-shadow: 0 8px 16px -6px var(--dt-shadow);
}
.cart-bg {
    background-color: var(--assest-color);
}
/* Import File — native <input type="file">, restyled as a quiet ghost-outline
   control: an upload glyph (hardcoded to the primary-color hex, which is
   identical in both light and dark themes) plus an outlined pill button that
   only fills solid on hover/focus. */
.import-file {
    background-color: var(--dt-input-bg);
    border: 1px solid var(--dt-input-border);
    color: var(--dt-text-muted);
    padding: 9px 40px 9px 12px;
    border-radius: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238037b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    transition: border-color .18s ease, background-color .18s ease;
}
.import-file:hover {
    border-color: var(--primary-color);
    background-color: var(--dt-hover-tint);
}
.import-file:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--dt-active-tint);
}
.import-file::file-selector-button {
    margin-right: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    background: transparent;
    border: 1.5px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}
.import-file::file-selector-button:hover {
    background: var(--primary-color);
    color: var(--white-color);
}
/* Dashboard Category */
.category-box {
    padding: 25px;
    background: var(--assest-color);
}
.category-box .f600 {
    font-weight: 600;
}
.category-box .box-border-0 {
    border: 0;
    padding-bottom: 0;
}
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    width: 100%;
    color: var(--white-color);
    padding-left: 25px;
}
.category-image {
    max-height: 105px;
    height: 105px;
    width: 100%;
    border-radius: 8px;
    filter: blur(1.2px);
    -webkit-filter: blur(1.2px);
}
/* Dashboard Hashtag */
.hashtag-card {
    padding-top: 10px;
    padding-bottom: 10px;
    border-left: 5px solid var(--primary-color);
    border-radius: 0px;
    font-size: 18px;
    font-weight: 600;
    background-color: var(--white-color);
}
.hashtag-card>.row {
    margin: 0;
}
.hashtag-card>.row .col,
.hashtag-card>.row .col-2
.hashtag-card>.row .col-10 {
    padding: 0;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: start;
}
/* Dashboard Artist */
.artist-name {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.artist-image {
    height: 100px;
    width: 100%;
    border-radius: 10px;
}
@media (max-width: 1440px) {
    .artist-image {
        height: 70px;
        border-radius: 10px;
    }
    .wallet-image {
        height: 110px;
        border-radius: 15px;
    }
}
@media (max-width: 1260px) {
    .wallet-image {
        height: 50px;
        border-radius: 15px;
    }
    .wallet-image {
        height: 70px;
        border-radius: 10px;
    }
}
@media (max-width: 991px) {
    .wallet-image {
        height: 140px;
        border-radius: 15px;
    }
}
/* Side Menu Partition */
.partition {
    width: 100%;
    border-bottom: 1px solid var(--dt-card-border);
    line-height: 0.1em;
    margin: 22px 0 14px;
}
.partition span {
    background: var(--dt-surface);
    margin: 10px 0;
    padding: 0 10px 0 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--dt-text-muted);
}
/* Demo Mode Box */
.demo-mode-box {
    background: var(--primary-color);
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    color: var(--white-color);
    border: 1px solid transparent;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    padding: 6px 18px;
    white-space: nowrap;
}
.demo-mode-box:hover {
    color: var(--primary-color);
    background: transparent;
    border-color: var(--primary-color);
}
/* Installation */
.list-group-item {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    background-color: transparent;
}
.dropdown-menu, .card {
    background-color: var(--dt-surface);
    color: var(--body-color);
    border: none;
}
.install-bg-img {
    text-align: center;
}
.install-bg-img img {
    max-width: 100%;
    height: auto;
}
.install-title {
    font-size: 42px;
    font-weight: bold;
}
.install_sub_title {
    font-size: 24px;
}
.install_text {
    font-size: 20px;
    margin-bottom: 30px;
    margin-top: 30px;
}
.install-list li {
    font-size: 20px;
    margin-bottom: 10px;
}
.install-list li:hover {
    background-color: var(--white-color);
    color: var(--primary-color);
}
.install-card {
    margin-left: 100px;
    margin-right: 100px;
}
@media (max-width: 1024px) {
    .install-bg-img {
        display: none !important;
    }
}
.install-footer {
    padding: 20px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    color: var(--black-color);
    background-color: var(--primary-color);
}
.install-footer a {
    color: var(--white-color);
    margin: 0 15px;
    text-decoration: none;
    font-size: 18px;
}
.install-footer a:hover {
    color: var(--black-color);
}
.install-social-icons {
    margin-top: 10px;
}
.install-social-icons a {
    color: var(--white-color);
    font-size: 20px;
    text-decoration: none;
}
.install-social-icons a:hover {
    color: var(--black-color);
}
.install-footer .content {
    position: relative;
    z-index: 1;
}
/* btn Install */
.btn-install {
    background: var(--primary-color);
    border-radius: 5px;
    font-size: 18px;
    font-weight: 600;
    color: var(--white-color);
    border: 1px solid transparent;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    padding: 10px 40px;
}
.btn-install:hover {
    color: var(--primary-color);
    background: transparent;
    border-color: var(--primary-color);
}
/* btn Install Cancel */
.btn-install-cancel {
    background: var(--black-color);
    border-radius: 5px;
    font-size: 18px;
    font-weight: 600;
    color: var(--white-color);
    border: 1px solid transparent;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    padding: 10px 40px;
}
.btn-install-cancel:hover {
    color: var(--black-color);
    background: transparent;
    border-color: var(--black-color);
}
/* Color Picker */
.colorpicker-component {
    display: flex;
    border: 1px solid var(--assest-color);
    border-radius: 5px;
    overflow: hidden;
}
.colorpicker {
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    padding: 0;
    margin: 0;
}
.hexcolor {
    border: none;
    padding: 10px;
    width: 100px;
    outline: none;
}
/* Hide-Show Btn */
.show-btn,
.hide-btn,
.info-btn,
.upload-btn,
.warning-btn {
    font-weight: bold;
    border: 1px solid transparent;
    color: var(--white-color);
    padding: 6px 16px !important;
    outline: none;
    border-radius: 8px;
    font-size: 14px !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, color .2s ease;
}
.show-btn::before,
.hide-btn::before,
.info-btn::before,
.warning-btn::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: .85;
}
.upload-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}
/* Show/Hide/Info/Warning status — soft tinted pill, tuned per theme, solid on hover */
.show-btn {
    background: color-mix(in srgb, var(--dt-status-active) 14%, transparent);
    color: var(--dt-status-active);
    border-color: color-mix(in srgb, var(--dt-status-active) 30%, transparent);
}
.hide-btn {
    background: color-mix(in srgb, var(--dt-status-inactive) 14%, transparent);
    color: var(--dt-status-inactive);
    border-color: color-mix(in srgb, var(--dt-status-inactive) 30%, transparent);
}
.info-btn {
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
}
.warning-btn {
    /* Text stays --primary-color (not --highlight-color) in every state — the
       gold brand color is too low-contrast as text on light backgrounds. */
    background: color-mix(in srgb, var(--highlight-color) 20%, transparent);
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--highlight-color) 40%, transparent);
}
.show-btn:hover {
    background: var(--dt-status-active);
    color: var(--white-color);
    transform: translateY(-2px);
}
.hide-btn:hover {
    background: var(--dt-status-inactive);
    color: var(--white-color);
    transform: translateY(-2px);
}
.info-btn:hover {
    background: var(--primary-color);
    color: var(--white-color);
    transform: translateY(-2px);
}
.warning-btn:hover {
    background: var(--highlight-color);
    color: var(--primary-color);
    transform: translateY(-2px);
}
.upload-btn {
    background: var(--primary-color) !important;
    color: var(--assest-color) !important;
    box-shadow: 0 4px 10px -4px var(--dt-shadow);
}
:root[data-theme="dark"] .upload-btn {
    color: var(--white-color) !important;
}
.show-btn:focus,
.hide-btn:focus,
.info-btn:focus,
.upload-btn:focus,
.warning-btn:focus {
    outline: none;
    box-shadow: none;
}
/* Custom-Card */
.custom-card {
    background-color: var(--assest-color);
    border: 2px solid transparent;
    transition: all 0.3s ease-in-out;
}
.custom-card .card-body h3 {
    margin: 0;
    font-size: 2rem;
    font-weight: bold;
}
.custom-card .card-body span {
    font-size: 1.2rem;
    color: var(--body-color);
    font-weight: bold;
}
.custom-card .card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
}
.card-icon-primary {
    padding: 15px;
    border-radius: 50%;
    color: var(--white-color);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color) !important;
}
.card-color-primary:hover {
    border-color: var(--primary-color);
}
.card-color-primary .card-body {
    color: var(--primary-color);
}
/* Profile-Card */
.profile-card {
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--assest-color);
}
.profile-header {
    height: 80px;
    background: linear-gradient(135deg, var(--assest-color), var(--primary-color));
}
.profile-picture {
    width: 150px;
    height: 150px;
    border-radius: 10%;
    border: 4px solid var(--white-color);
    object-fit: cover;
    margin-top: -60px;
}
.profile-details p {
    font-size: 16px;
}
/* Earning-Card */
.card-earning {
    background-color: var(--assest-color);
    border-radius: 10px;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    align-items: center;
    width: 100%;
}
.card-align {
    display: flex;
    justify-content: space-between;
}
.earning-title {
    font-weight: bold;
    font-size: 16px;
    text-align: center;
}
.earning-amount {
    font-size: 22px;
    font-weight: bold;
    margin: 0;
    color: var(--primary-color);
}
.earning-divider {
    width: 2px;
    height: 60px;
    background-color: var(--body-color);
    margin: 0 15px;
}
/* Landscape Card */
.landscape-card {
    background-color: var(--assest-color) !important;
    padding: 8px;
    margin: 10px 0;
    border: 3px solid transparent;
}
.landscape-card:hover {
    border: 3px solid var(--primary-color);
}
.wallet-image {
    height: 180px;
    width: 180px;
    border-radius: 10px;
}
.landscape-card-title {
    font-size: 16px;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.landscape-card-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.landscape-card-border {
    border-top: 2px dashed var(--primary-color) !important;
    margin: 10px 0px;
}
.landscape-card .ribbon-top-left {
    top: -3px;
    left: -3px;
}
/* Flow Sort Order Card */
.sortable-item {
    cursor: move;
}
.not-draggable {
    user-select: none;
    pointer-events: none;
}
.flow-sort-order-card {
    background-color: var(--assest-color) !important;
    flex-wrap: wrap;
    justify-content:center;
    padding: 10px;
    border-radius: 10px;
    font-size: 24px;
}
/* ── Themed notice banner — replaces raw Bootstrap .alert-*, whose default
   colors don't adapt to dark mode. Reuses the same tint tokens the status
   pills already use, so it stays on-brand in both themes. ── */
.dt-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--body-color);
}
.dt-alert > i {
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}
.dt-alert a {
    color: var(--primary-color);
    font-weight: 600;
}
.dt-alert-danger {
    background: var(--dt-status-inactive-tint);
    border: 1px solid var(--red-color);
}
.dt-alert-danger > i {
    color: var(--red-color);
}
.dt-alert-info {
    background: var(--dt-accent-tint);
    border: 1px solid var(--primary-color);
}
.dt-alert-info > i {
    color: var(--primary-color);
}
.dt-alert ul {
    padding-left: 18px;
}
/* Settings module — repeatable row (social links / onboarding screens) */
.repeater-row {
    background: var(--dt-surface);
    border: 1px solid var(--dt-card-border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}
.repeater-row:last-child {
    margin-bottom: 0;
}
.repeater-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
}
.badge {
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 10px 25px;
    margin-right: 10px;
    font-size: 24px;
    display: inline-block;	
}
@media (min-width: 768px) {
    .badge {
        padding: 8px 5px;
        font-size: 14px;
    }
}
@media (min-width: 1200px) {
    .badge {
        padding: 10px 30px;
        font-size: 18px;
    }
}
@media (min-width: 1600px) {
    .badge {
        padding: 15px 55px;
    }
}
.bg-card-gradient {
    background: linear-gradient(to top left, var(--primary-color), var(--assest-color));
    box-shadow: none;
}

/* 1 vs 1 Battle — show page (VS player comparison layout) */
.battle-room-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--dt-accent-tint);
    color: var(--primary-color);
    font-weight: 700;
    font-size: 14px;
}
.battle-stat-tile {
    height: 100%;
    background: var(--dt-input-bg);
    border: 1px solid var(--dt-input-border);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
}
.battle-stat-tile .battle-stat-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--body-color);
}
.battle-stat-tile .battle-stat-label {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--dt-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
}
.battle-player-card {
    height: 100%;
    border-width: 2px !important;
}
.battle-player-card--winner {
    border-color: var(--dt-status-active) !important;
}
.battle-player-card--loser {
    opacity: .8;
}
.battle-player-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}
.battle-player-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--dt-input-border);
    flex-shrink: 0;
}
.battle-player-role {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--dt-text-muted);
    font-weight: 700;
}
.battle-player-name {
    margin: 2px 0 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--body-color);
}
.battle-player-username {
    font-size: 13px;
    color: var(--dt-text-muted);
}
.battle-result-badge {
    margin-left: auto;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--white-color);
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}
.battle-player-stats {
    display: flex;
    gap: 10px;
}
.battle-player-stats .battle-stat-tile {
    flex: 1;
}
.battle-vs-badge {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white-color);
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px -2px var(--dt-shadow);
    flex-shrink: 0;
}

/* Custom */
/* Sort-Order modal — draggable item cards (category/skill/level/classification/
   avatar sort modals all render `.listitemClass.sortablebox` via their own
   page JS, so themeing this one class updates every module's sort list). */
#contentListId {
    max-height: 360px;
    overflow-y: auto;
    padding-right: 4px;
    margin-right: -4px;
}
#contentListId::-webkit-scrollbar {
    width: 4px;
}
#contentListId::-webkit-scrollbar-thumb {
    background-color: var(--dt-input-border);
    border-radius: 4px;
}
#contentListId::-webkit-scrollbar-track {
    background: transparent;
}
.sortablebox {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: grab;
    background-color: var(--dt-input-bg);
    border: 1px solid var(--dt-input-border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 10px;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sortablebox::before {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 12px;
    background-image: repeating-linear-gradient(to bottom, currentColor 0, currentColor 2px, transparent 2px, transparent 5px);
    color: var(--dt-text-muted);
    opacity: .6;
}
.sortablebox p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--body-color);
}
.sortablebox:hover {
    border-color: var(--primary-color);
    background-color: var(--dt-hover-tint);
}
.sortablebox:active,
.sortablebox.ui-sortable-helper {
    cursor: grabbing;
    border-color: var(--primary-color);
    background-color: var(--dt-surface);
    box-shadow: 0 10px 26px -8px var(--dt-shadow);
}
/* Breadcrumb — card-style trail, themed via --dt-* tokens */
@keyframes dtBcWrapIn {
    from { opacity: 0; transform: translateY(-14px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)     scale(1);    }
}
@keyframes dtBcItemIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}
.breadcrumb {
    background-color: var(--dt-surface) !important;
    border: 1px solid var(--dt-card-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 8px -2px var(--dt-shadow) !important;
    padding: 10px 16px !important;
    margin: 0 0 20px !important;
    display: inline-flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    font-size: 13.5px;
    font-weight: 500;
    max-width: 100%;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
    animation: dtBcWrapIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.breadcrumb-item {
    display: flex;
    align-items: center;
    padding: 0 4px;
    animation: dtBcItemIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.breadcrumb-item:nth-child(1) { animation-delay: 0.10s; }
.breadcrumb-item:nth-child(2) { animation-delay: 0.18s; }
.breadcrumb-item:nth-child(3) { animation-delay: 0.26s; }
.breadcrumb-item:nth-child(4) { animation-delay: 0.34s; }
.breadcrumb-item:nth-child(n+5) { animation-delay: 0.40s; }
.breadcrumb-item a {
    color: var(--dt-text-muted);
    position: relative;
    transition: color .2s ease;
}
.breadcrumb-item a:hover {
    color: var(--primary-color);
}
.breadcrumb-item.active {
    color: var(--body-color) !important;
    font-weight: 500;
    opacity: .55;
}
.breadcrumb-item + .breadcrumb-item {
    padding-left: .6rem;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: "\f105";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    padding-right: .6rem;
    color: var(--dt-text-muted);
    opacity: .6;
    font-size: 11px;
}

:root[data-theme="dark"] .breadcrumb {
    box-shadow: 0 1px 8px -2px var(--dt-shadow) !important;
}
:root[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    opacity: .8;
}
/* ── Select2 (normal forms) — bordered box matching .form-control, in both
   light and dark mode. Every `<select class="form-control">` on every admin
   page gets auto-upgraded to select2 (see page-app.blade.php). ── */
.select2-container:not(.select2-container--open) {
    /* Select2 measures the original (hidden) <select>'s width at init —
       inside a Bootstrap modal that's still display:none, that measures 0.
       Force full-width so add/edit modals don't get a collapsed dropdown.
       Excluded once open: Select2 already applies its own inline width to
       the trigger while `--open` (matching the closed-state width it
       measured), and re-forcing 100% here resolves against a much wider
       ancestor at that point, blowing the container out past the viewport. */
    width: 100% !important;
}
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    border: 1px solid var(--dt-input-border) !important;
    background: var(--dt-input-bg) !important;
    border-radius: 8px !important;
    color: var(--body-color) !important;
    height: 46px !important;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.select2-container .select2-selection--multiple {
    height: auto !important;
    min-height: 46px !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--dt-active-tint);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--body-color) !important;
    line-height: 44px !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--dt-text-muted);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--dt-text-muted) transparent transparent transparent !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 4px 8px !important;
    align-items: center !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--assest-color) !important;
    border: 1px solid var(--dt-input-border) !important;
    border-radius: 6px !important;
    color: var(--body-color) !important;
    padding: 2px 6px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    color: var(--body-color) !important;
    font-size: 13px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--dt-text-muted) !important;
    background: none !important;
    border: none !important;
    font-size: 14px !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    order: -1 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--body-color) !important;
}

/* Dropdown panel (rendered in a portal, outside .page-search/.form-group,
   so it needs its own surface/border/shadow rather than inheriting one) */
.select2-dropdown {
    background: var(--dt-surface) !important;
    border-color: var(--dt-card-border) !important;
    box-shadow: 0 12px 30px -8px var(--dt-shadow) !important;
}
.select2-results__option {
    color: var(--body-color) !important;
    background-color: var(--dt-surface) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--assest-color) !important;
    color: var(--body-color) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-color) !important;
    color: var(--white-color) !important;
}
.select2-search--dropdown .select2-search__field {
    background: var(--dt-input-bg) !important;
    border-color: var(--dt-input-border) !important;
    color: var(--body-color) !important;
    border-radius: 6px !important;
    outline: none !important;
}

/* ── Select2 (search-bar filter chips) — `.page-search .sorting` is this
   theme's filter chip: a bordered pill with a label + control. Select2's own
   chrome is stripped so the pill supplies all the visual styling, matching
   the plain-select chips right next to it. ── */
.page-search .sorting {
    overflow: hidden;
    min-height: 46px;
}
.page-search .sorting:focus-within {
    border-color: var(--primary-color);
    background: var(--dt-active-tint);
}
.page-search .sorting label {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding-right: 10px;
    border-right: 1px solid var(--dt-input-border);
    transition: color .15s ease, border-color .15s ease;
}
.page-search .sorting:focus-within label {
    color: var(--primary-color);
    border-right-color: var(--primary-color);
}
/* Native <select> popups render with the OS default (white) when the
   background is transparent — set an explicit surface color so options
   stay readable before Select2 takes over (and as a no-JS fallback). */
.page-search .sorting select.form-control {
    background-color: var(--dt-input-bg);
}
.page-search .sorting .select2-container {
    flex: 1;
    min-width: 90px;
    width: 100% !important;
    align-self: stretch;
}
.page-search .sorting .select2-container .select2-selection--single {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    width: 100%;
    height: 100% !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
}
.page-search .sorting .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal !important;
    padding: 0 28px 0 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    flex: 1;
    width: 100%;
}
.page-search .sorting .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    /* right: 6px !important; */
    position: absolute !important;
}
.rotate {
    transform: rotate(360deg);
    transition: all 0.5s ease;
}
/* # sourceMappingURL=style.css.map */

/* ===== Login Page ===== */
.dt-login-page {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--dt-bg);
    font-family: var(--font);
    transition: background .4s ease;
    padding: 24px;
    box-sizing: border-box;
}

.dt-login-page * {
    box-sizing: border-box;
}

/* Animated background blobs */
.dt-bg-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.dt-bg-shapes span {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .35;
    animation: dtFloat 14s ease-in-out infinite;
}

:root[data-theme="dark"] .dt-bg-shapes span {
    opacity: .22;
}

.dt-bg-shapes .shape-1 {
    width: 420px;
    height: 420px;
    top: -120px;
    left: -100px;
    background: var(--primary-color);
    animation-delay: 0s;
}

.dt-bg-shapes .shape-2 {
    width: 360px;
    height: 360px;
    bottom: -140px;
    right: -80px;
    background: var(--highlight-color);
    animation-delay: 2s;
}

.dt-bg-shapes .shape-3 {
    width: 260px;
    height: 260px;
    bottom: 10%;
    left: 8%;
    background: var(--primary-color);
    animation-delay: 4s;
}

.dt-bg-shapes .shape-4 {
    width: 200px;
    height: 200px;
    top: 12%;
    right: 18%;
    background: var(--highlight-color);
    animation-delay: 6s;
    animation-duration: 18s;
}

@keyframes dtFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -30px) scale(1.08); }
}

/* Floating quiz icons */
.dt-bg-icons {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.dt-bg-icons i {
    position: absolute;
    color: var(--primary-color);
    opacity: 0;
    animation: dtIconIn .8s ease forwards, dtIconDrift 8s ease-in-out infinite;
}

:root[data-theme="dark"] .dt-bg-icons i {
    color: var(--highlight-color);
}

.dt-bg-icons .icon-1 { top: 12%; left: 10%; font-size: 34px; animation-delay: .2s, .2s; }
.dt-bg-icons .icon-2 { top: 22%; right: 14%; font-size: 26px; animation-delay: .5s, 1s; }
.dt-bg-icons .icon-3 { bottom: 18%; left: 16%; font-size: 30px; animation-delay: .8s, 2s; }
.dt-bg-icons .icon-4 { bottom: 26%; right: 10%; font-size: 40px; animation-delay: 1.1s, .6s; }
.dt-bg-icons .icon-5 { top: 45%; left: 5%; font-size: 22px; animation-delay: 1.4s, 1.5s; }
.dt-bg-icons .icon-6 { top: 8%; left: 45%; font-size: 24px; animation-delay: 1.7s, 2.5s; }
.dt-bg-icons .icon-7 { bottom: 8%; right: 32%; font-size: 28px; animation-delay: 2s, .3s; }
.dt-bg-icons .icon-8 { top: 60%; right: 6%; font-size: 20px; animation-delay: 2.3s, 1.8s; }

@keyframes dtIconIn {
    to { opacity: .18; }
}

@keyframes dtIconDrift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(14px, -22px) rotate(12deg); }
}

/* Theme toggle */
.dt-theme-toggle {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--dt-card-border);
    background: var(--dt-card-bg);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px var(--dt-shadow);
    backdrop-filter: blur(8px);
    transition: transform .25s ease, background .3s ease;
    opacity: 0;
    animation: dtFadeIn .6s ease .3s forwards;
}

.dt-theme-toggle:hover {
    transform: scale(1.08) rotate(-8deg);
}

.dt-theme-toggle i {
    position: absolute;
    font-size: 18px;
    transition: opacity .25s ease, transform .35s ease;
}

.dt-theme-toggle .fa-moon {
    opacity: 0;
    transform: rotate(45deg) scale(.4);
}

:root[data-theme="dark"] .dt-theme-toggle .fa-sun {
    opacity: 0;
    transform: rotate(-45deg) scale(.4);
}

:root[data-theme="dark"] .dt-theme-toggle .fa-moon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* Card */
.dt-login-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 420px;
    background: var(--dt-card-bg);
    border: 1px solid var(--dt-card-border);
    border-radius: 24px;
    padding: 40px 36px;
    backdrop-filter: blur(16px);
    box-shadow: 0 25px 60px var(--dt-shadow);
    opacity: 0;
    transform: translateY(24px);
    animation: dtCardIn .7s cubic-bezier(.22, 1, .36, 1) .15s forwards;
}

@keyframes dtCardIn {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes dtFadeIn {
    to { opacity: 1; }
}

.dt-login-logo {
    text-align: center;
    margin-bottom: 6px;
    opacity: 0;
    animation: dtFadeUp .6s ease .35s forwards;
}

.dt-logo-badge {
    width: 76px;
    height: 76px;
    margin: 0 auto 16px;
    opacity: 0;
    transform: scale(.6) rotate(-8deg);
    animation: dtLogoPop .65s cubic-bezier(.34, 1.56, .64, 1) .1s forwards;
}

.dt-logo-badge-inner {
    width: 100%;
    height: 100%;
    border-radius: 22px;
    background: linear-gradient(145deg, var(--primary-color), var(--dt-accent-light));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px var(--dt-shadow);
    animation: dtLogoFloat 4s ease-in-out 1s infinite;
}

.dt-logo-badge-inner img {
    width: 72px;
    height: 72px;
    border-radius: 22px;
}

.dt-logo-badge-inner i {
    font-size: 32px;
    color: var(--white-color);
}

@keyframes dtLogoPop {
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes dtLogoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.dt-login-logo h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-color);
}

.dt-login-heading {
    text-align: center;
    margin-bottom: 18px;
    opacity: 0;
    animation: dtFadeUp .6s ease .45s forwards;
}

.dt-login-heading h4 {
    margin: 0 0 6px;
    font-weight: 700;
    color: var(--body-color);
    font-size: 19px;
}

.dt-login-heading p {
    margin: 0;
    color: var(--dt-text-muted);
    font-size: 14px;
}

@keyframes dtFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.dt-form-group {
    margin-bottom: 18px;
    opacity: 0;
    animation: dtFadeUp .55s ease forwards;
}

.dt-form-group:nth-of-type(1) { animation-delay: .55s; }
.dt-form-group:nth-of-type(2) { animation-delay: .65s; }

.dt-form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dt-text-muted);
}

.dt-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.dt-input-wrap i.dt-input-icon {
    position: absolute;
    left: 14px;
    color: var(--dt-text-muted);
    font-size: 14px;
    pointer-events: none;
    transition: color .2s ease;
}

.dt-input-wrap input.form-control {
    width: 100%;
    height: 48px !important;
    background: var(--dt-input-bg);
    border: 1px solid var(--dt-input-border);
    border-radius: 12px;
    padding: 0 16px 0 42px;
    color: var(--body-color);
    font-size: 14px;
    transition: border-color .2s ease, box-shadow .2s ease, background .3s ease;
}

.dt-input-wrap input.form-control::placeholder {
    color: var(--dt-text-muted);
    opacity: .7;
}

.dt-input-wrap input.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px var(--dt-shadow);
}

.dt-input-wrap input.form-control:focus ~ i.dt-input-icon {
    color: var(--primary-color);
}

.dt-toggle-password {
    position: absolute;
    right: 14px;
    border: none;
    background: transparent;
    color: var(--dt-text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
}

.dt-toggle-password:hover {
    color: var(--primary-color);
}

.dt-login-btn {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 12px;
    background: var(--primary-color);
    color: var(--white-color);
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    margin-top: 6px;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
    opacity: 0;
    animation: dtFadeUp .55s ease .75s forwards;
}

.dt-login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px var(--dt-shadow);
}

.dt-login-btn:active {
    transform: translateY(0);
}

.dt-login-btn i {
    transition: transform .25s ease;
    font-size: 13px;
}

.dt-login-btn:hover i {
    transform: translateX(3px);
}

.dt-login-btn.dt-loading {
    opacity: .9;
    pointer-events: none;
    cursor: not-allowed;
}

.dt-btn-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2.5px solid var(--dt-spinner-track);
    border-top-color: var(--white-color);
    flex-shrink: 0;
}

.dt-login-btn.dt-loading .dt-btn-arrow {
    display: none;
}

.dt-login-btn.dt-loading .dt-btn-spinner {
    display: inline-block;
    animation: dtSpin .6s linear infinite;
}

@keyframes dtSpin {
    to { transform: rotate(360deg); }
}

.dt-demo-note {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed var(--dt-input-border);
    text-align: center;
    font-size: 13px;
    color: var(--dt-text-muted);
    opacity: 0;
    animation: dtFadeUp .55s ease .85s forwards;
}

.dt-demo-note a {
    color: var(--primary-color);
    font-weight: 600;
}

.dt-footer {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.dt-version-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--dt-card-bg);
    border: 1px solid var(--dt-card-border);
    color: var(--dt-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    backdrop-filter: blur(8px);
    opacity: 0;
    animation: dtFadeUp .55s ease .95s forwards;
}

.dt-version-badge i {
    color: var(--primary-color);
    font-size: 12px;
}

.dt-copyright {
    text-align: center;
    color: var(--dt-text-muted);
    font-size: 12px;
    opacity: 0;
    animation: dtFadeUp .55s ease 1.05s forwards;
}

.dt-login-btn,
.dt-theme-toggle,
.dt-toggle-password {
    outline: none;
}

.dt-login-btn:focus,
.dt-theme-toggle:focus,
.dt-toggle-password:focus {
    outline: none;
}

.dt-login-btn:focus-visible,
.dt-theme-toggle:focus-visible,
.dt-toggle-password:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .dt-login-card {
        padding: 32px 22px;
    }
}

/* ============================================================
   User Dashboard — per-user analytics page (single consumer:
   resources/views/admin/user/dashboard.blade.php). Bespoke,
   dt-udash-*-namespaced so nothing here can regress any other
   page. Built entirely on the --dt- and --primary-color tokens
   above, so light/dark both work with no separate dark block.
   ============================================================ */
@keyframes dtUdashCardIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dt-udash-profile,
.dt-udash-kpi-tile,
.dt-udash-panel,
.dt-udash-quiztype-card,
.dt-udash-subcard {
    animation: dtUdashCardIn .5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dt-udash-profile { animation-delay: .06s; }
.dt-udash-kpi-tile:nth-child(1) { animation-delay: .14s; }
.dt-udash-kpi-tile:nth-child(2) { animation-delay: .18s; }
.dt-udash-kpi-tile:nth-child(3) { animation-delay: .22s; }
.dt-udash-kpi-tile:nth-child(4) { animation-delay: .26s; }
.dt-udash-kpi-tile:nth-child(5) { animation-delay: .30s; }
.dt-udash-kpi-tile:nth-child(6) { animation-delay: .34s; }
.dt-udash-kpi-tile:nth-child(7) { animation-delay: .38s; }
.dt-udash-kpi-tile:nth-child(n+8) { animation-delay: .42s; }
.dt-udash-panel { animation-delay: .30s; }
.dt-udash-quiztype-card:nth-child(1) { animation-delay: .36s; }
.dt-udash-quiztype-card:nth-child(2) { animation-delay: .40s; }
.dt-udash-quiztype-card:nth-child(3) { animation-delay: .44s; }
.dt-udash-quiztype-card:nth-child(4) { animation-delay: .48s; }
.dt-udash-quiztype-card:nth-child(n+5) { animation-delay: .52s; }
.dt-udash-subcard:nth-child(1) { animation-delay: .30s; }
.dt-udash-subcard:nth-child(2) { animation-delay: .36s; }
.dt-udash-subcard:nth-child(n+3) { animation-delay: .42s; }
@media (prefers-reduced-motion: reduce) {
    .dt-udash-profile,
    .dt-udash-kpi-tile,
    .dt-udash-panel,
    .dt-udash-quiztype-card,
    .dt-udash-subcard {
        animation: none;
    }
}
.dt-udash-profile {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    background: var(--dt-card-bg);
    border: 1px solid var(--dt-card-border);
    border-radius: 18px;
    box-shadow: 0 4px 24px -6px var(--dt-shadow);
    padding: 24px 28px;
    margin-bottom: 24px;
}
.dt-udash-profile-main {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
    min-width: 260px;
}
.dt-udash-avatar {
    width: 84px;
    height: 84px;
    border-radius: 18px;
    object-fit: cover;
    border: 3px solid var(--dt-surface);
    box-shadow: 0 6px 18px -4px var(--dt-shadow);
    flex-shrink: 0;
}
.dt-udash-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dt-accent-tint);
    color: var(--primary-color);
    font-size: 34px;
}
.dt-udash-profile-info {
    min-width: 0;
}
.dt-udash-profile-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dt-udash-profile-name-row h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--body-color);
    margin: 0;
}
.dt-udash-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--dt-accent-tint);
    color: var(--primary-color);
    font-size: 12px;
    transition: background .2s ease, transform .15s ease;
}
.dt-udash-edit-btn:hover {
    background: var(--dt-active-tint);
    color: var(--primary-color);
    transform: scale(1.08);
}
.dt-udash-username {
    color: var(--dt-text-muted);
    font-size: 13.5px;
}
.dt-udash-at {
    opacity: .7;
}
.dt-udash-profile-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
.dt-udash-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: transform .15s ease;
}
.dt-udash-status-pill:hover {
    transform: translateY(-1px);
}
.dt-udash-status-pill i {
    font-size: 8px;
}
.dt-udash-status-pill.is-active {
    background: var(--dt-status-active-tint);
    color: var(--dt-status-active);
}
.dt-udash-status-pill.is-inactive {
    background: var(--dt-status-inactive-tint);
    color: var(--dt-status-inactive);
}
.dt-udash-joined {
    font-size: 12.5px;
    color: var(--dt-text-muted);
}
.dt-udash-bio {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--dt-text-muted);
    max-width: 520px;
}
.dt-udash-wallet {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--dt-accent-tint);
    border-radius: 14px;
    padding: 14px 22px;
}
.dt-udash-wallet-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--dt-surface);
    color: var(--primary-color);
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px -4px var(--dt-shadow);
}
.dt-udash-wallet h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--body-color);
    margin: 0;
}
.dt-udash-wallet span {
    font-size: 12px;
    color: var(--dt-text-muted);
}
.dt-udash-qr {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    border: 1px solid var(--dt-card-border);
    padding: 4px;
    background: var(--white-color);
}

/* KPI tiles */
.dt-udash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
@media (max-width: 1200px) {
    .dt-udash-kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 767px) {
    .dt-udash-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .dt-udash-kpi-grid {
        grid-template-columns: 1fr;
    }
}
.dt-udash-kpi-tile {
    background: var(--dt-card-bg);
    border: 1px solid var(--dt-card-border);
    border-radius: 14px;
    box-shadow: 0 4px 18px -6px var(--dt-shadow);
    padding: 18px 20px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.dt-udash-kpi-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -6px var(--dt-shadow);
}
.dt-udash-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--dt-accent-tint);
    color: var(--primary-color);
    font-size: 15px;
    margin-bottom: 10px;
}
.dt-udash-kpi-tile.is-positive .dt-udash-kpi-icon {
    background: var(--dt-status-active-tint);
    color: var(--dt-status-active);
}
.dt-udash-kpi-tile.is-negative .dt-udash-kpi-icon {
    background: var(--dt-status-inactive-tint);
    color: var(--dt-status-inactive);
}
.dt-udash-kpi-tile h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--body-color);
    margin: 0 0 2px;
}
.dt-udash-kpi-tile span {
    font-size: 12.5px;
    color: var(--dt-text-muted);
}

/* Panels — shared shell for quiz breakdown / coin economy / badges / referrals */
.dt-udash-panel {
    background: var(--dt-card-bg);
    border: 1px solid var(--dt-card-border);
    border-radius: 16px;
    box-shadow: 0 4px 20px -6px var(--dt-shadow);
    padding: 22px 24px;
    margin-bottom: 24px;
}
.dt-udash-panel-header {
    margin-bottom: 16px;
}
.dt-udash-panel-header h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--body-color);
    margin: 0;
}
.dt-udash-panel-header h2 i {
    color: var(--primary-color);
}

/* Quiz type grid */
.dt-udash-quiztype-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 18px;
}
@media (max-width: 1260px) {
    .dt-udash-quiztype-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 992px) {
    .dt-udash-quiztype-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 767px) {
    .dt-udash-quiztype-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .dt-udash-quiztype-grid {
        grid-template-columns: 1fr;
    }
}
.dt-udash-quiztype-card {
    background: var(--dt-input-bg);
    border: 1px solid var(--dt-input-border);
    border-radius: 12px;
    padding: 14px;
    transition: border-color .2s ease;
}
.dt-udash-quiztype-card:hover {
    border-color: var(--primary-color);
}
.dt-udash-quiztype-icon {
    color: var(--primary-color);
    font-size: 16px;
    margin-bottom: 6px;
}
.dt-udash-quiztype-card h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--body-color);
    margin: 0 0 8px;
}
.dt-udash-quiztype-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--dt-text-muted);
    padding: 2px 0;
}
.dt-udash-quiztype-row strong {
    color: var(--body-color);
}

/* Battles & tournaments */
.dt-udash-battles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.dt-udash-subcard {
    background: var(--dt-card-bg);
    border: 1px solid var(--dt-card-border);
    border-radius: 14px;
    box-shadow: 0 4px 18px -6px var(--dt-shadow);
    padding: 18px 20px;
}
.dt-udash-subcard h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--body-color);
    margin: 0 0 12px;
}
.dt-udash-subcard h4 i {
    color: var(--primary-color);
}
.dt-udash-stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--dt-text-muted);
    padding: 6px 0;
    border-bottom: 1px dashed var(--dt-card-border);
}
.dt-udash-stat-row:last-child {
    border-bottom: none;
}
.dt-udash-stat-row strong {
    color: var(--body-color);
    font-weight: 600;
}

/* Coin economy */
.dt-udash-coin-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
@media (max-width: 992px) {
    .dt-udash-coin-grid {
        grid-template-columns: 1fr;
    }
}
.dt-udash-coin-list {
    margin-top: 8px;
}
.dt-udash-coin-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--dt-text-muted);
    padding: 8px 0;
    border-bottom: 1px solid var(--dt-card-border);
}
.dt-udash-coin-row:last-child {
    border-bottom: none;
}
.dt-udash-coin-row i {
    color: var(--primary-color);
}
.dt-udash-coin-row strong {
    color: var(--body-color);
    font-weight: 600;
}
.dt-udash-activity-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dt-udash-activity-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--dt-input-bg);
    border: 1px solid var(--dt-input-border);
    border-radius: 10px;
    padding: 10px 14px;
}
.dt-udash-activity-row strong {
    display: block;
    color: var(--body-color);
    font-size: 13px;
}
.dt-udash-activity-row span {
    font-size: 11.5px;
    color: var(--dt-text-muted);
}
.dt-udash-amount {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 13px;
}
.dt-udash-empty {
    text-align: center;
    color: var(--dt-text-muted);
    font-size: 13px;
    padding: 24px 0;
    margin: 0;
}

/* Badges gallery */
.dt-udash-badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 14px;
}
.dt-udash-badge-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--dt-input-bg);
    border: 1px solid var(--dt-input-border);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    transition: transform .2s ease, border-color .2s ease;
}
.dt-udash-badge-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-color);
}
.dt-udash-badge-card img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}
.dt-udash-badge-card span {
    font-size: 12px;
    font-weight: 600;
    color: var(--body-color);
}

/* Referral network */
.dt-udash-referral-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 992px) {
    .dt-udash-referral-grid {
        grid-template-columns: 1fr;
    }
}
.dt-udash-referral-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--dt-card-border);
}
.dt-udash-referral-row:last-child {
    border-bottom: none;
}
.dt-udash-referral-row img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}
.dt-udash-referral-row div {
    flex: 1;
    min-width: 0;
}
.dt-udash-referral-row strong {
    display: block;
    font-size: 13px;
    color: var(--body-color);
}
.dt-udash-referral-row span {
    font-size: 12px;
    color: var(--dt-text-muted);
}

/* Summernote editor (Pages module) — only the chrome (toolbar/dropdowns/
   statusbar) is themed for dark mode. .note-editable is left alone: its
   background is intentionally driven by the admin-configured
   --page-background-color, previewing the real public page, not the admin
   theme — light mode already looked correct without any of this.
   !important is needed here: the summernote CDN stylesheet is emitted inside
   @section('content'), so it lands in <body> — after style.css in <head> —
   and wins same-specificity ties without it. */
:root[data-theme="dark"] .note-editor.note-frame {
    border-color: var(--dt-card-border) !important;
}
:root[data-theme="dark"] .note-toolbar {
    background-color: var(--dt-surface) !important;
    border-bottom: 1px solid var(--dt-card-border) !important;
}
:root[data-theme="dark"] .note-btn,
:root[data-theme="dark"] .note-btn.btn-light,
:root[data-theme="dark"] .note-toolbar .btn-light {
    background-color: var(--dt-input-bg) !important;
    border-color: var(--dt-input-border) !important;
    color: var(--body-color) !important;
}
:root[data-theme="dark"] .note-btn:hover,
:root[data-theme="dark"] .note-btn:focus,
:root[data-theme="dark"] .note-toolbar .btn-light:hover {
    background-color: var(--dt-hover-tint) !important;
    border-color: var(--primary-color) !important;
    color: var(--body-color) !important;
}
:root[data-theme="dark"] .note-btn.active,
:root[data-theme="dark"] .note-btn.active:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--white-color) !important;
}
:root[data-theme="dark"] .note-dropdown-menu,
:root[data-theme="dark"] .note-toolbar .dropdown-menu {
    background-color: var(--dt-surface) !important;
    border-color: var(--dt-card-border) !important;
    box-shadow: 0 8px 24px -4px var(--dt-shadow) !important;
}
:root[data-theme="dark"] .note-dropdown-item,
:root[data-theme="dark"] .note-toolbar .dropdown-item {
    color: var(--body-color) !important;
}
:root[data-theme="dark"] .note-dropdown-item:hover,
:root[data-theme="dark"] .note-toolbar .dropdown-item:hover {
    background-color: var(--dt-hover-tint) !important;
    color: var(--body-color) !important;
}
:root[data-theme="dark"] .note-toolbar .divider {
    background-color: var(--dt-card-border) !important;
}
:root[data-theme="dark"] .note-statusbar {
    background-color: var(--dt-surface) !important;
    border-top: 1px solid var(--dt-card-border) !important;
}
:root[data-theme="dark"] .note-status-output {
    color: var(--dt-text-muted) !important;
}
:root[data-theme="dark"] .note-editable.card-block {
    border-color: var(--dt-card-border) !important;
}
:root[data-theme="dark"] .note-placeholder {
    color: var(--dt-text-muted) !important;
}
:root[data-theme="dark"] .note-codable {
    background-color: var(--dt-input-bg) !important;
    color: var(--body-color) !important;
}

/* ============================================================
   Quiz Configuration hub — per-page bespoke design (single
   consumer: resources/views/admin/quiz_configuration/index.blade.php).
   dt-qcfg-*-namespaced so nothing here can regress any other page.
   Built entirely on the --dt- and --primary-color tokens above, so
   light/dark both work with no separate dark block.
   ============================================================ */
@keyframes dtQcfgCardIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dt-qcfg-hero,
.dt-qcfg-card {
    animation: dtQcfgCardIn .5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
    .dt-qcfg-hero,
    .dt-qcfg-card {
        animation: none;
    }
}

.dt-qcfg-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    background: linear-gradient(120deg, var(--dt-card-bg), var(--dt-accent-tint));
    border: 1px solid var(--dt-card-border);
    border-radius: 18px;
    padding: 24px 28px;
    margin-bottom: 20px;
    box-shadow: 0 4px 24px -6px var(--dt-shadow);
}
.dt-qcfg-hero-text h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    color: var(--body-color);
    margin: 0 0 6px;
}
.dt-qcfg-hero-text h2 i {
    color: var(--primary-color);
}
.dt-qcfg-hero-text p {
    margin: 0;
    max-width: 480px;
    font-size: 13.5px;
    color: var(--dt-text-muted);
}
.dt-qcfg-hero-stats {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.dt-qcfg-stat {
    min-width: 96px;
    text-align: center;
    background: var(--dt-surface);
    border: 1px solid var(--dt-card-border);
    border-radius: 14px;
    padding: 12px 20px;
    box-shadow: 0 4px 12px -6px var(--dt-shadow);
}
.dt-qcfg-stat h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--body-color);
}
.dt-qcfg-stat span {
    font-size: 11px;
    color: var(--dt-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.dt-qcfg-stat.is-active h3 {
    color: var(--dt-status-active);
}
.dt-qcfg-stat.is-inactive h3 {
    color: var(--dt-status-inactive);
}

.dt-qcfg-toolbar {
    margin-bottom: 18px;
}
.dt-qcfg-search {
    position: relative;
    max-width: 320px;
}
.dt-qcfg-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--dt-text-muted);
}
.dt-qcfg-search input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border-radius: 10px;
    border: 1px solid var(--dt-input-border);
    background: var(--dt-input-bg);
    color: var(--body-color);
    font-size: 13.5px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.dt-qcfg-search input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px var(--dt-shadow);
}

.dt-qcfg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 18px;
}

.dt-qcfg-card {
    display: flex;
    flex-direction: column;
    background: var(--dt-card-bg);
    border: 1px solid var(--dt-card-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px -6px var(--dt-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dt-qcfg-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px -8px var(--dt-shadow);
    border-color: var(--primary-color);
}
.dt-qcfg-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.dt-qcfg-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary-color), var(--dt-accent-light));
    color: var(--white-color);
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 6px 16px -6px var(--dt-shadow);
}
.dt-qcfg-name {
    margin: 0 0 6px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--body-color);
}
.dt-qcfg-desc {
    flex: 1;
    margin: 0 0 16px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--dt-text-muted);
}
.dt-qcfg-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--dt-card-border);
}

.dt-qcfg-status-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
}
.dt-qcfg-status-tag i {
    font-size: 8px;
}
.dt-qcfg-status-tag.is-active {
    background: var(--dt-status-active-tint);
    color: var(--dt-status-active);
}
.dt-qcfg-status-tag.is-hidden {
    background: var(--dt-status-inactive-tint);
    color: var(--dt-status-inactive);
}

.dt-qcfg-configure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
    transition: gap .2s ease, color .2s ease;
}
.dt-qcfg-configure:hover {
    gap: 10px;
    color: var(--primary-color);
}
.dt-qcfg-configure i {
    font-size: 11px;
    transition: transform .2s ease;
}
.dt-qcfg-configure:hover i {
    transform: translateX(2px);
}

/* Toggle switch */
.dt-qcfg-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}
.dt-qcfg-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.dt-qcfg-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: var(--dt-status-inactive-tint);
    border: 1px solid var(--dt-card-border);
    border-radius: 24px;
    transition: background .2s ease, border-color .2s ease;
}
.dt-qcfg-slider::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 18px;
    height: 18px;
    background: var(--white-color);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
    transition: transform .2s ease;
}
.dt-qcfg-switch input:checked + .dt-qcfg-slider {
    background: var(--dt-status-active);
    border-color: var(--dt-status-active);
}
.dt-qcfg-switch input:checked + .dt-qcfg-slider::before {
    transform: translateX(18px);
}
.dt-qcfg-switch input:focus-visible + .dt-qcfg-slider {
    box-shadow: 0 0 0 3px var(--dt-shadow);
}

.dt-qcfg-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--dt-text-muted);
}
.dt-qcfg-empty i {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: .5;
}

@media (max-width: 767px) {
    .dt-qcfg-hero {
        flex-direction: column;
        align-items: flex-start;
    }
    .dt-qcfg-hero-stats {
        width: 100%;
    }
    .dt-qcfg-stat {
        flex: 1;
    }
}

/* ============================================================
   Quiz Configuration edit — per-page bespoke design (single
   consumer: resources/views/admin/quiz_configuration/edit.blade.php).
   dt-qedit-*-namespaced so nothing here can regress any other page.
   Reuses the .dt-qcfg-switch toggle control from the quiz
   configuration hub for visual consistency between the two pages.
   ============================================================ */
@keyframes dtQeditPanelIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dt-qedit-hero,
.dt-qedit-panel {
    animation: dtQeditPanelIn .45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
    .dt-qedit-hero,
    .dt-qedit-panel {
        animation: none;
    }
}

.dt-qedit-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    background: linear-gradient(120deg, var(--dt-card-bg), var(--dt-accent-tint));
    border: 1px solid var(--dt-card-border);
    border-radius: 18px;
    padding: 22px 26px;
    margin-bottom: 20px;
    box-shadow: 0 4px 24px -6px var(--dt-shadow);
}
.dt-qedit-hero-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary-color), var(--dt-accent-light));
    color: var(--white-color);
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 6px 16px -6px var(--dt-shadow);
}
.dt-qedit-hero-text {
    flex: 1;
    min-width: 200px;
}
.dt-qedit-hero-text h2 {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 700;
    color: var(--body-color);
}
.dt-qedit-hero-text p {
    margin: 0;
    max-width: 560px;
    font-size: 13px;
    color: var(--dt-text-muted);
}
.dt-qedit-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    background: var(--dt-surface);
    border: 1px solid var(--dt-card-border);
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 600;
    transition: background .2s ease, transform .15s ease;
}
.dt-qedit-back:hover {
    background: var(--dt-hover-tint);
    color: var(--primary-color);
    transform: translateX(-3px);
}

.dt-qedit-panel {
    background: var(--dt-card-bg);
    border: 1px solid var(--dt-card-border);
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px -6px var(--dt-shadow);
}
.dt-qedit-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--dt-card-border);
}
.dt-qedit-panel-header i {
    font-size: 16px;
    color: var(--primary-color);
}
.dt-qedit-panel-header h3 {
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--body-color);
}

.dt-qedit-toggle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.dt-qedit-toggle-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--dt-surface);
    border: 1px solid var(--dt-card-border);
    border-radius: 14px;
    padding: 14px 16px;
    transition: border-color .2s ease, transform .2s ease;
}
.dt-qedit-toggle-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
}
.dt-qedit-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--dt-accent-tint);
    color: var(--primary-color);
    font-size: 15px;
    flex-shrink: 0;
}
.dt-qedit-toggle-info {
    flex: 1;
    min-width: 0;
}
.dt-qedit-toggle-info h5 {
    margin: 0 0 2px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--body-color);
}
.dt-qedit-toggle-state {
    font-size: 11.5px;
    color: var(--dt-text-muted);
}

/* Flow / sort order builder */
.dt-qedit-sort-label {
    display: block;
    margin-bottom: 4px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--body-color);
}
.dt-qedit-sort-hint {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--dt-text-muted);
}
.dt-qedit-sort-track {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--dt-surface);
    border: 1px dashed var(--dt-card-border);
    border-radius: 14px;
    padding: 16px 20px;
}
.dt-qedit-sort-endpoint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 20px;
    background: var(--dt-accent-tint);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.dt-qedit-sort-items {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    min-width: 160px;
}
.dt-qedit-sort-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--dt-card-bg);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-size: 12.5px;
    font-weight: 600;
    cursor: grab;
    transition: box-shadow .2s ease, transform .2s ease;
}
.dt-qedit-sort-item:hover {
    box-shadow: 0 6px 14px -6px var(--dt-shadow);
}
.dt-qedit-sort-item i {
    font-size: 11px;
    opacity: .6;
}
.dt-qedit-sort-item.sortable-ghost {
    opacity: .4;
}
.dt-qedit-sort-item.sortable-chosen {
    transform: scale(1.03);
    box-shadow: 0 8px 18px -6px var(--dt-shadow);
}

/* Field grid */
.dt-qedit-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
}
.dt-qedit-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--body-color);
}

/* Segmented control — two-option choice (e.g. Level Wise / Quiz Wise) */
.dt-qedit-segment {
    display: inline-flex;
    gap: 2px;
    background: var(--dt-input-bg);
    border: 1px solid var(--dt-input-border);
    border-radius: 10px;
    padding: 3px;
}
.dt-qedit-segment input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.dt-qedit-segment label {
    margin: 0;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dt-text-muted);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.dt-qedit-segment input:checked + label {
    background: var(--primary-color);
    color: var(--white-color);
    box-shadow: 0 4px 10px -4px var(--dt-shadow);
}
.dt-qedit-segment input:focus-visible + label {
    box-shadow: 0 0 0 3px var(--dt-shadow);
}

.dt-qedit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 6px;
}

@media (max-width: 767px) {
    .dt-qedit-hero {
        flex-direction: column;
        align-items: flex-start;
    }
    .dt-qedit-back {
        width: 100%;
        justify-content: center;
    }
    .dt-qedit-sort-track {
        flex-direction: column;
        align-items: stretch;
    }
    .dt-qedit-sort-endpoint {
        justify-content: center;
    }
}

/* ============================================================
   Admin Dashboard — landing page (single consumer:
   resources/views/admin/dashboard/dashboard.blade.php). Bespoke,
   dt-adash-*-namespaced so nothing here can regress any other
   page. Built entirely on the --dt- and --primary-color tokens
   above, so light/dark both work with no separate dark block.
   ============================================================ */
@keyframes dtAdashIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes dtAdashFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-2%, 3%) scale(1.05); }
}
.dt-adash-kpi-tile,
.dt-adash-hero {
    animation: dtAdashIn .45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
    .dt-adash-kpi-tile,
    .dt-adash-hero,
    .dt-adash-hero-blob {
        animation: none;
    }
}

/* Hero */
.dt-adash-hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 20px;
    padding: 30px 32px;
    margin-bottom: 26px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--dt-accent-light) 100%);
    box-shadow: 0 16px 32px -14px var(--dt-shadow);
}
.dt-adash-hero-blob {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    filter: blur(2px);
    animation: dtAdashFloat 9s ease-in-out infinite;
}
.dt-adash-hero-blob-a {
    width: 220px;
    height: 220px;
    top: -110px;
    right: 8%;
}
.dt-adash-hero-blob-b {
    width: 140px;
    height: 140px;
    bottom: -80px;
    right: 22%;
    background: rgba(255, 255, 255, .1);
    animation-delay: -4s;
}
.dt-adash-hero-content {
    position: relative;
    z-index: 1;
}
.dt-adash-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .14);
    border-radius: 20px;
    padding: 6px 14px;
}
.dt-adash-hero h1 {
    font-size: 25px;
    font-weight: 800;
    color: var(--white-color);
    margin: 12px 0 0;
    letter-spacing: -.01em;
}
@media (max-width: 480px) {
    .dt-adash-hero {
        padding: 24px 22px;
    }
    .dt-adash-hero h1 {
        font-size: 21px;
    }
}

.dt-adash-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--dt-text-muted);
    margin: 26px 0 14px;
}
.dt-adash-section-title:first-child {
    margin-top: 0;
}
.dt-adash-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--dt-card-border), transparent);
}
.dt-adash-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--dt-accent-tint);
    color: var(--primary-color);
    font-size: 12px;
    flex-shrink: 0;
}

.dt-adash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}
@media (max-width: 1400px) {
    .dt-adash-kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 991px) {
    .dt-adash-kpi-grid,
    .dt-adash-kpi-grid-finance {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .dt-adash-kpi-grid,
    .dt-adash-kpi-grid-finance {
        grid-template-columns: 1fr;
    }
}
.dt-adash-kpi-tile {
    --dt-kpi-accent: var(--primary-color);
    --dt-kpi-tint: var(--dt-accent-tint);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--dt-card-bg);
    border: 1px solid var(--dt-card-border);
    border-radius: 16px;
    box-shadow: 0 4px 16px -8px var(--dt-shadow);
    padding: 22px 22px 20px 24px;
    overflow: hidden;
    transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .25s ease, border-color .25s ease;
}
.dt-adash-kpi-tile::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--dt-kpi-accent);
}
.dt-adash-kpi-ghost {
    position: absolute;
    top: -14px;
    right: -6px;
    font-size: 78px;
    color: var(--dt-kpi-accent);
    opacity: .07;
    transform: rotate(-10deg);
    transition: transform .35s ease, opacity .35s ease;
    pointer-events: none;
}
.dt-adash-kpi-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 30px -10px var(--dt-shadow);
    border-color: var(--dt-kpi-accent);
}
.dt-adash-kpi-tile:hover .dt-adash-kpi-ghost {
    transform: rotate(0deg) scale(1.08);
    opacity: .12;
}
.dt-adash-kpi-tile.is-blue { --dt-kpi-accent: #3498db; --dt-kpi-tint: rgba(52, 152, 219, .14); }
.dt-adash-kpi-tile.is-amber { --dt-kpi-accent: #f4b400; --dt-kpi-tint: rgba(244, 180, 0, .14); }
.dt-adash-kpi-tile.is-pink { --dt-kpi-accent: #e84393; --dt-kpi-tint: rgba(232, 67, 147, .14); }
.dt-adash-kpi-tile.is-teal { --dt-kpi-accent: #17a589; --dt-kpi-tint: rgba(23, 165, 137, .14); }
.dt-adash-kpi-tile.is-spotlight {
    background: linear-gradient(135deg, var(--dt-kpi-accent) 0%, var(--dt-accent-light) 100%);
    border-color: transparent;
}
.dt-adash-kpi-tile.is-spotlight::before {
    display: none;
}
.dt-adash-kpi-tile.is-spotlight .dt-adash-kpi-ghost {
    color: var(--white-color);
    opacity: .12;
}
.dt-adash-kpi-tile.is-spotlight:hover .dt-adash-kpi-ghost {
    opacity: .18;
}
.dt-adash-kpi-tile.is-spotlight .dt-adash-kpi-icon {
    background: rgba(255, 255, 255, .18);
    color: var(--white-color);
}
.dt-adash-kpi-tile.is-spotlight h3,
.dt-adash-kpi-tile.is-spotlight span {
    color: var(--white-color);
}
.dt-adash-kpi-tile.is-spotlight span {
    opacity: .85;
}
.dt-adash-kpi-tile .dt-adash-kpi-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--dt-kpi-accent);
    color: var(--white-color);
    font-size: 17px;
    flex-shrink: 0;
    box-shadow: 0 8px 16px -6px var(--dt-kpi-accent);
}
.dt-adash-kpi-tile .dt-adash-kpi-icon i {
    color: var(--white-color);
}
.dt-adash-kpi-tile h3 {
    position: relative;
    z-index: 1;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--body-color);
    margin: 0;
    line-height: 1.2;
}
.dt-adash-kpi-tile span {
    position: relative;
    z-index: 1;
    font-size: 13px;
    color: var(--dt-text-muted);
}

/* Chart / stat cards */
.dt-adash-card {
    transition: box-shadow .25s ease, border-color .25s ease;
}
.dt-adash-card:hover {
    box-shadow: 0 10px 26px -12px var(--dt-shadow);
}

/* Segmented range toggle (This Year / This Month) */
.dt-adash-segment {
    display: inline-flex;
    gap: 4px;
    background: var(--dt-input-bg);
    border: 1px solid var(--dt-card-border);
    border-radius: 12px;
    padding: 4px;
}
.dt-adash-segment-btn {
    border: none;
    background: transparent;
    color: var(--dt-text-muted);
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 22px;
    border-radius: 9px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.dt-adash-segment-btn:hover {
    color: var(--body-color);
}
.dt-adash-segment-btn:focus {
    outline: none;
}
.dt-adash-segment-btn:focus-visible {
    box-shadow: 0 0 0 3px var(--dt-shadow);
}
.dt-adash-segment-btn.active {
    background: var(--primary-color);
    color: var(--white-color);
    box-shadow: 0 6px 14px -4px var(--dt-shadow);
}