@charset "UTF-8";

/* Root variables for light theme */
:root {
    /* Font */
    --font: 'Rubik', sans-serif;
    --white-color: #fff;

    /* ── Brand (static — never change with theme) ── */
    --pink: #E01E75;
    --pink-deep: #B8185F;
    --pink-soft: #EB6DA5;
    --glow: rgba(224, 30, 117, 0.32);
    --glow-sm: rgba(224, 30, 117, 0.12);

    /* ── Page & Card ── */
    --page-bg: #F8F3EA;
    --brand-bg: linear-gradient(150deg, #F1E6D6 0%, #FBF8F2 50%, #E7D8C5 100%);
    --form-bg: rgba(255, 255, 255, 0.88);
    --card-border: rgba(231, 216, 197, 0.30);
    --card-shadow: 0 28px 80px rgba(12, 12, 30, 0.14), 0 0 50px rgba(224, 30, 117, 0.07);
    --sep: rgba(224, 30, 117, 0.14);

    /* ── Text ── */
    --text: #0C0C1E;
    --text-2: #55557A;
    --text-3: #9D9D9D;

    /* ── Toggle ── */
    --tog-bg: rgba(248, 243, 234, 0.96);
    --tog-shadow: rgba(0, 0, 0, 0.20);

    /* ── Inputs ── */
    --inp-bg: rgba(0, 0, 0, 0.03);
    --inp-bdr: rgba(0, 0, 0, 0.10);
    --inp-focus-bg: rgba(224, 30, 117, 0.04);
    --inp-focus-ring: rgba(224, 30, 117, 0.11);

    /* ── Feature Cards ── */
    --feat-bg: rgba(224, 30, 117, 0.07);
    --feat-bdr: rgba(224, 30, 117, 0.14);
    --feat-ico: rgba(224, 30, 117, 0.14);
    --feat-hover-bdr: rgba(224, 30, 117, 0.22);

    /* ── Floating Icon Bubbles ── */
    --fi-bg: rgba(224, 30, 117, 0.07);
    --fi-bdr: rgba(224, 30, 117, 0.14);
    --fi-color: rgba(224, 30, 117, 0.45);
    --fi-shadow: rgba(224, 30, 117, 0.06);
    --fi-inset: rgba(255, 255, 255, 0.00);
    /* no inset in light */

    /* ── Background Grid ── */
    --grid-line: rgba(224, 30, 117, 0.06);

    /* ── Orb colors (static — same in both themes) ── */
    --orb-1: rgba(224, 30, 117, 0.46);
    --orb-2: rgba(184, 24, 95, 0.42);
    --orb-3: rgba(235, 109, 165, 0.36);
    --orb-4: rgba(224, 30, 117, 0.26);
    --orb-5: rgba(22, 33, 62, 0.40);

    /* ── Orb opacity (light = subtle) ── */
    --o1-op: 0.09;
    --o2-op: 0.09;
    --o3-op: 0.09;
    --o4-op: 0.09;
    --o5-op: 0.09;

    /* ── App Name Gradient ── */
    --app-name-gradient: linear-gradient(140deg, var(--pink-deep) 0%, var(--pink) 100%);

    /* ── Logo ── */
    --logo-shadow: rgba(224, 30, 117, 0.45);
    --logo-shadow-hover: rgba(224, 30, 117, 0.70);

    /* ── Admin Badge ── */
    --badge-bg: rgba(224, 30, 117, 0.09);
    --badge-bdr: rgba(224, 30, 117, 0.22);
    --badge-color: var(--pink-deep);
    --badge-shadow: rgba(224, 30, 117, 0.12);

    /* ── Panel Accent ── */
    --panel-glow: rgba(224, 30, 117, 0.08);

    /* ── Button ── */
    --btn-shadow: rgba(224, 30, 117, 0.38);
    --btn-shadow-hover: rgba(224, 30, 117, 0.52);
    --btn-shadow-active: var(--glow);

    /* ── Version Badge ── */
    --ver-bg: rgba(224, 30, 117, 0.07);
    --ver-bdr: rgba(224, 30, 117, 0.18);
    --ver-shimmer: rgba(224, 30, 117, 0.06);
    --ver-hover-bg: rgba(224, 30, 117, 0.12);
    --ver-hover-bdr: var(--glow);
    --ver-hover-shadow: rgba(224, 30, 117, 0.18);
    --ver-dot-glow: rgba(224, 30, 117, 0.50);

    /* ── Footer ── */
    --footer-link-glow: rgba(224, 30, 117, 0.50);

    /* Cleanup: additional color tokens consolidated from component CSS */
    --banner-accent: #8B3FA8;
    --black-a05: rgba(0,0,0,0.05);
    --black-a07: rgba(0,0,0,0.07);
    --black-a10: rgba(0,0,0,0.10);
    --black-a14: rgba(0,0,0,0.14);
    --black-a22: rgba(0,0,0,0.22);
    --black-a28: rgba(0,0,0,0.28);
    --black-a30: rgba(0,0,0,0.30);
    --black-a32: rgba(0,0,0,0.32);
    --black-a35: rgba(0,0,0,0.35);
    --black-a36: rgba(0,0,0,0.36);
    --black-a40: rgba(0,0,0,0.40);
    --black-a62: rgba(0,0,0,0.62);
    --btn-cancel-from: #e3000b;
    --btn-cancel-hover-from: #c0000a;
    --btn-cancel-hover-to: #8b0007;
    --btn-cancel-shadow-rgb: 227,0,11;
    --btn-cancel-to: #b5000a;
    --btn-default-hover: #B8185F;
    --palette-amber: #F59E0B;
    --palette-cyan: #06B6D4;
    --palette-emerald: #10B981;
    --palette-green: #22C55E;
    --palette-indigo: #6366F1;
    --palette-orange: #F97316;
    --palette-purple: #8B5CF6;
    --palette-red: #EF4444;
    --palette-rose: #F43F5E;
    --palette-teal: #14B8A6;
    --palette-violet: #7C3AED;
    --pink-a025: rgba(224, 30, 117,0.025);
    --pink-a22: rgba(224, 30, 117,0.22);
    --pink-a25: rgba(224, 30, 117,0.25);
    --pink-a28: rgba(224, 30, 117,0.28);
    --pink-a35: rgba(224, 30, 117,0.35);
    --pink-a42: rgba(224, 30, 117,0.42);
    --pink-a48: rgba(224, 30, 117,0.48);
    --pink-a88: rgba(224, 30, 117,0.88);
    --pink-soft-a15: rgba(235, 109, 165,0.15);
    --pink-soft-a18: rgba(235, 109, 165,0.18);
    --pink-soft-a20: rgba(235, 109, 165,0.20);
    --pink-soft-a25: rgba(235, 109, 165,0.25);
    --pink-soft-a30: rgba(235, 109, 165,0.30);
    --pink-soft-a40: rgba(235, 109, 165,0.40);
    --pink-soft-a50: rgba(235, 109, 165,0.50);
    --rank-bronze-1: #CD7F32;
    --rank-bronze-2: #A0522D;
    --rank-glow-30: rgba(255,165,0,0.30);
    --rank-glow-35: rgba(255,165,0,0.35);
    --rank-gold-1: #FFD700;
    --rank-gold-2: #FFA500;
    --rank-silver-1: #C0C0C0;
    --rank-silver-2: #A8A8A8;
    --sa-btn-green-rgb: 5,143,0;
    --sa-btn-red-rgb: 227,0,11;
    --sc-item-num-cl: #9aa0ac;
    --white-a04: rgba(255,255,255,0.04);
    --white-a05: rgba(255,255,255,0.05);
    --white-a07: rgba(255,255,255,0.07);
    --white-a09: rgba(255,255,255,0.09);
    --white-a10: rgba(255,255,255,0.10);
    --white-a12: rgba(255,255,255,0.12);
    --white-a15: rgba(255,255,255,0.15);
    --white-a16: rgba(255,255,255,0.16);
    --white-a18: rgba(255,255,255,0.18);
    --white-a22: rgba(255,255,255,0.22);
    --white-a25: rgba(255,255,255,0.25);
    --white-a28: rgba(255,255,255,0.28);
    --white-a30: rgba(255,255,255,0.30);
    --white-a35: rgba(255,255,255,0.35);
    --white-a78: rgba(255,255,255,0.78);
    --white-a85: rgba(255,255,255,0.85);
    --white-a90: rgba(255,255,255,0.90);

    /* ── Admin panel color tokens (light) ── */
    /* Easing curves */
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-o: cubic-bezier(0.22, 1, 0.36, 1);

    /* Brand (panel) */
    --sa-primary:       #E01E75;
    --sa-primary-light: rgba(224, 30, 117, 0.10);
    --sa-surface:       rgba(224, 30, 117, 0.06);
    --primary-color:    #E01E75;
    --core-color:       224, 30, 117;

    /* Page body (cool light grey — the login page keeps --page-bg) */
    --sa-ct-bg:           #F3F4F9;
    --sa-ct-text:         #0C0C1E;
    --sa-scrollbar-thumb: #E01E75;

    /* Semantic utility */
    --sa-btn-green:  #058f00;
    --sa-btn-red:    #e3000b;
    --sa-black-004:  rgba(0, 0, 0, 0.04);
    --sa-black-008:  rgba(0, 0, 0, 0.08);

    /* Sidebar (navy — the app's dark colour) */
    --sa-sidebar-bg:          #16213E;
    --sa-sidebar-border:      rgba(255, 255, 255, 0.06);
    --sa-sidebar-shadow:      rgba(12, 12, 30, 0.10);
    --sa-sidebar-head-bg:     #16213E;
    --sa-sidebar-head-border: rgba(255, 255, 255, 0.08);
    --sa-sidebar-text:        rgba(255, 255, 255, 0.78);
    --sa-sidebar-sub-text:    rgba(255, 255, 255, 0.60);
    --sa-sidebar-hover-bg:    rgba(235, 109, 165, 0.14);
    --sa-sidebar-hover-text:  #EB6DA5;
    --sa-sidebar-active-bg:   #E01E75;
    --sa-sidebar-active-fg:   #ffffff;
    --sa-sidebar-sub-bd:      #E01E75;

    /* Header */
    --sa-header-bg:       #ffffff;
    --sa-header-border:   rgba(12, 12, 30, 0.06);
    --sa-header-sh:       rgba(224, 30, 117, 0.08);
    --sa-header-title:    #0C0C1E;
    --sa-header-btn-bg:   rgba(224, 30, 117, 0.08);
    --sa-header-btn-sh:   rgba(224, 30, 117, 0.18);
    --sa-header-icon:     #E01E75;
    --sa-header-dd-bg:    #ffffff;
    --sa-header-dd-bd:    rgba(224, 30, 117, 0.10);
    --sa-header-dd-text:  #374151;
    --sa-header-dd-sep:   rgba(224, 30, 117, 0.08);

    /* ── adm-dash-* (Dashboard) ── */
    --adm-dash-blue:       #E01E75;
    --adm-dash-emerald:    #10B981;
    --adm-dash-amber:      #F59E0B;
    --adm-dash-stat-bg:    #ffffff;  --adm-dash-stat-bd:    rgba(0,0,0,0.06);
    --adm-dash-stat-num:   #0C0C1E;  --adm-dash-stat-lbl:   rgba(12, 12, 30, 0.50);
    --adm-dash-card-bg:    #ffffff;
}

/* Dark theme overrides */
[data-theme="dark"] {
    /* Page & Card */
    --page-bg: #1A1A2E;
    --brand-bg: linear-gradient(150deg, #16213E 0%, #18203A 50%, #1A1A2E 100%);
    --form-bg: rgba(26, 26, 46, 0.78);
    --card-border: rgba(255, 255, 255, 0.07);
    --card-shadow: 0 32px 96px rgba(0, 0, 0, 0.70), 0 0 80px rgba(224, 30, 117, 0.07);
    --sep: rgba(224, 30, 117, 0.13);

    /* Text */
    --text: #F0F0FF;
    --text-2: #9D9D9D;
    --text-3: #6B6B7B;

    /* Toggle */
    --tog-bg: rgba(22, 33, 62, 0.92);

    /* Inputs */
    --inp-bg: rgba(255, 255, 255, 0.05);
    --inp-bdr: rgba(255, 255, 255, 0.09);

    /* Feature Cards */
    --feat-bg: rgba(224, 30, 117, 0.08);
    --feat-bdr: rgba(224, 30, 117, 0.12);
    --feat-ico: rgba(224, 30, 117, 0.18);
    --feat-hover-bdr: rgba(224, 30, 117, 0.28);

    /* Floating Icon Bubbles */
    --fi-bg: rgba(224, 30, 117, 0.08);
    --fi-bdr: rgba(224, 30, 117, 0.18);
    --fi-color: rgba(224, 30, 117, 0.60);
    --fi-shadow: rgba(224, 30, 117, 0.08);
    --fi-inset: rgba(255, 255, 255, 0.06);

    /* Background Grid */
    --grid-line: rgba(224, 30, 117, 0.03);

    /* Orb opacity (dark = vivid) */
    --o1-op: 0.30;
    --o2-op: 0.26;
    --o3-op: 0.26;
    --o4-op: 0.20;
    --o5-op: 0.26;

    /* App Name Gradient */
    --app-name-gradient: linear-gradient(140deg, #F3A5C8 0%, #E01E75 45%, #FFF 100%);

    /* Admin Badge */
    --badge-bg: rgba(224, 30, 117, 0.12);
    --badge-bdr: rgba(224, 30, 117, 0.28);
    --badge-color: var(--pink-soft);

    /* Cleanup: additional color tokens consolidated from component CSS */
    --btn-cancel-from: #dc2626;
    --btn-cancel-hover-from: #ef4444;
    --btn-cancel-hover-to: #b91c1c;
    --btn-cancel-shadow-rgb: 220,38,38;
    --btn-cancel-to: #991b1b;
    --hdr-dd-hover-tint: #F1E6D6;
    --sa-demo-danger: #f87171;
    --sa-demo-danger-rgb: 248,113,113;
    --sc-item-num-cl: #8b8a99;
    --table-sort-dark: #85b7eb;

    /* Admin panel color tokens (dark) */
    --sa-ct-bg:           #1A1A2E;
    --sa-ct-text:         #F0F0FF;
    --sa-scrollbar-thumb: #E01E75;
    --primary-color:      #EB6DA5;
    --core-color:         235, 109, 165;

    --sa-sidebar-bg:          #16213E;
    --sa-sidebar-border:      rgba(255, 255, 255, 0.07);
    --sa-sidebar-shadow:      rgba(0, 0, 0, 0.30);
    --sa-sidebar-head-bg:     #1B2848;
    --sa-sidebar-head-border: rgba(255, 255, 255, 0.07);
    --sa-sidebar-text:        rgba(255, 255, 255, 0.72);
    --sa-sidebar-sub-text:    rgba(255, 255, 255, 0.55);
    --sa-sidebar-hover-bg:    rgba(224, 30, 117, 0.10);
    --sa-sidebar-hover-text:  #EB6DA5;
    --sa-sidebar-active-bg:   rgba(224, 30, 117, 0.18);
    --sa-sidebar-active-fg:   #EB6DA5;
    --sa-sidebar-sub-bd:      rgba(224, 30, 117, 0.40);

    --sa-header-bg:       #16213E;
    --sa-header-border:   rgba(255, 255, 255, 0.06);
    --sa-header-sh:       rgba(224, 30, 117, 0.12);
    --sa-header-title:    #F0F0FF;
    --sa-header-btn-bg:   rgba(224, 30, 117, 0.14);
    --sa-header-btn-sh:   rgba(224, 30, 117, 0.22);
    --sa-header-icon:     #EB6DA5;
    --sa-header-dd-bg:    #1B2848;
    --sa-header-dd-bd:    rgba(255, 255, 255, 0.08);
    --sa-header-dd-text:  rgba(255, 255, 255, 0.65);
    --sa-header-dd-sep:   rgba(255, 255, 255, 0.06);

    /* adm-dash-* (Dashboard) dark */
    --adm-dash-blue:       #EB6DA5;
    --adm-dash-emerald:    #34D399;
    --adm-dash-amber:      #FCD34D;
    --adm-dash-stat-bg:    #16213E;  --adm-dash-stat-bd:    rgba(255, 255, 255, 0.06);
    --adm-dash-stat-num:   #F0F0FF;  --adm-dash-stat-lbl:   rgba(240, 240, 255, 0.50);
    --adm-dash-card-bg:    #16213E;
}

html,
body {
    height: 100%;
    overflow: auto;
}
body {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    color: var(--body-color);
    font-size: 14px;
    overflow-x: hidden;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--sa-surface);
}
::-webkit-scrollbar-thumb {
    background: var(--sa-scrollbar-thumb);
    border-radius: 100px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--sa-ct-bg);
}

/* =============================================================================
   LOADER
   ============================================================================= */
#dvloader {
    position: fixed;
    z-index: 99999;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(var(--core-color), 0.03);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
}
#dvloader img {
    width: 160px; height: 160px;
    border-radius: 50%;
    box-shadow: 0 4px 24px var(--pink-a88);
}

/* Login Page */
.dt-lp *,
.dt-lp *::before,
.dt-lp *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.dt-lp {
    min-height: 100vh;
    width: 100%;
    background: var(--page-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: background 0.5s;
}
/* CSS-driven label text — no JS needed */
.dt-app-name {
    position: relative;
    z-index: 1;
    font-size: 36px;
    font-weight: 800;
    background: var(--app-name-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    margin-bottom: 10px;
    animation: fadeDown 0.7s 0.42s both;
}
.dt-admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--badge-bg);
    border: 1px solid var(--badge-bdr);
    border-radius: 50px;
    padding: 5px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--badge-color);
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    animation: fadeDown 0.7s 0.5s both;
    box-shadow: 0 0 16px var(--badge-shadow);
}
.dt-admin-badge i {
    font-size: 10px;
    color: var(--pink);
}
.dt-form-top {
    margin-bottom: 30px;
    animation: fadeUp 0.6s 0.5s both;
    text-align: center !important;
}
.dt-form-top h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
    margin-bottom: 6px;
    transition: color 0.3s;
}
.dt-form-top h2 span {
    background: linear-gradient(135deg, var(--pink), var(--pink-soft));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.dt-form-top p {
    font-size: 13px;
    color: var(--text-2);
    transition: color 0.3s;
}
.dt-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.dt-field {
    position: relative;
}
.dt-field:nth-child(1) {
    animation: fadeUp 0.55s 0.62s both;
}
.dt-field:nth-child(2) {
    animation: fadeUp 0.55s 0.74s both;
}
.dt-field:nth-child(3) {
    animation: fadeUp 0.55s 0.84s both;
}
.dt-lbl {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 8px;
    transition: color 0.3s;
}
.dt-fw {
    position: relative;
    display: flex;
    align-items: center;
}
.dt-fi-ico {
    position: absolute;
    left: 15px;
    color: var(--text-3);
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
    transition: color 0.3s;
}
.dt-fw:focus-within .dt-fi-ico {
    color: var(--pink);
}
.dt-inp {
    width: 100%;
    background: var(--inp-bg);
    border: 1px solid var(--inp-bdr);
    border-radius: 14px;
    padding: 14px 44px;
    font-size: 14px;
    color: var(--text);
    outline: none;
    font-family: "Rubik", sans-serif;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s, color 0.3s;
}
.dt-inp::placeholder {
    color: var(--text-3);
    font-size: 13px;
}
.dt-inp:focus {
    border-color: var(--pink);
    background: var(--inp-focus-bg);
    box-shadow: 0 0 0 3.5px var(--inp-focus-ring);
}
.dt-inp:focus~.dt-inp-line {
    transform: scaleX(1);
}
.dt-inp-line {
    position: absolute;
    bottom: -1px;
    left: 12px;
    right: 12px;
    height: 2px;
    background: linear-gradient(90deg, var(--pink), var(--pink-soft));
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.dt-btn {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 15px 24px;
    background: linear-gradient(135deg, var(--pink) 0%, var(--pink-deep) 100%);
    border: none;
    border-radius: 14px;
    color: var(--white-color);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 7px 28px var(--btn-shadow);
    font-family: var(--font);
    transition: transform 0.25s, box-shadow 0.25s;
    animation: fadeUp 0.55s 0.84s both;
    outline: none !important;
}
.dt-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px var(--btn-shadow-hover);
    color: var(--white-color);
}
.dt-btn:active {
    transform: translateY(0) scale(0.984);
    box-shadow: 0 4px 18px var(--btn-shadow-active);
}
.dt-btn-arrow {
    font-size: 13px;
    transition: transform 0.3s;
}
.dt-btn:hover .dt-btn-arrow {
    transform: translateX(5px);
}
@media (max-width: 720px) {
    .dt-app-name {
        font-size: 28px;
    }
    .dt-form-top h2 {
        font-size: 21px;
    }
}
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(-8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
@keyframes cardSlideIn {
    from {
        opacity: 0;
        transform: translateY(56px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes featSlide {
    from {
        opacity: 0;
        transform: translateX(-16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fiFloat {
    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
        opacity: .75;
    }
    25% {
        transform: translateY(-14px) rotate(4deg);
        opacity: 1;
    }
    50% {
        transform: translateY(-6px) rotate(-3deg);
        opacity: .80;
    }
    75% {
        transform: translateY(-18px) rotate(3deg);
        opacity: .95;
    }
}
@keyframes verShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}
@keyframes verDotPulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 6px var(--pink), 0 0 12px var(--ver-dot-glow);
    }
    50% {
        opacity: .55;
        transform: scale(0.7);
        box-shadow: 0 0 3px var(--pink);
    }
}
@keyframes ob1 {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(62px, 40px) scale(1.09);
    }
    50% {
        transform: translate(30px, 78px) scale(0.91);
    }
    75% {
        transform: translate(-30px, 20px) scale(1.05);
    }
}
@keyframes ob2 {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(-54px, -36px) scale(1.13);
    }
    66% {
        transform: translate(-16px, -70px) scale(0.87);
    }
}
@keyframes ob3 {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(44px, -48px) scale(1.18);
    }
}

/* ── Single centered login card (User Panel) ──────────────────────────── */
.dt-card-solo {
    position: relative;
    z-index: 10;
    width: min(440px, 92vw);
    border-radius: 28px;
    border: 1px solid var(--card-border);
    background: var(--form-bg);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    box-shadow: var(--card-shadow);
    padding: 46px 42px 40px;
    animation: cardSlideIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
.dt-solo-head {
    text-align: center;
    margin-bottom: 26px;
}
.dt-solo-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.dt-card-solo .dt-form-top {
    text-align: center;
}
@media (max-width: 480px) {
    .dt-card-solo { padding: 38px 26px 32px; }
}

/* =============================================================================
   INSTALLATION WIZARD — built on top of the dt- login design system
   ============================================================================= */
.dt-inst-card {
    width: min(840px, 94vw);
    text-align: left;
    max-height: 92vh;
    overflow-y: auto;
}
.dt-inst-card .dt-solo-head {
    margin-bottom: 20px;
}
.dt-inst-card .dt-form-top {
    text-align: left;
    margin-bottom: 22px;
}

/* Step progress */
.dt-steps {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.dt-step-seg {
    flex: 1;
    height: 5px;
    border-radius: 4px;
    background: var(--inp-bg);
    border: 1px solid var(--inp-bdr);
    overflow: hidden;
    transition: background 0.4s, border-color 0.4s;
}
.dt-step-seg.is-done,
.dt-step-seg.is-active {
    background: linear-gradient(90deg, var(--pink), var(--pink-soft));
    border-color: transparent;
}
.dt-step-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-3);
}
.dt-step-caption b {
    color: var(--pink);
    font-weight: 700;
}

/* Requirement / info checklist */
.dt-check-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}
.dt-check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--inp-bg);
    border: 1px solid var(--inp-bdr);
    font-size: 13.5px;
    color: var(--text);
    transition: background 0.3s, border-color 0.3s;
}
.dt-check-ico {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.dt-check-item.ok .dt-check-ico {
    background: rgba(var(--sa-btn-green-rgb), 0.14);
    color: var(--sa-btn-green);
}
.dt-check-item.err .dt-check-ico {
    background: rgba(var(--sa-btn-red-rgb), 0.12);
    color: var(--sa-btn-red);
}
.dt-check-item.info .dt-check-ico {
    background: var(--glow-sm);
    color: var(--pink);
}

/* Body copy inside the card */
.dt-inst-text {
    font-size: 13.5px;
    color: var(--text-2);
    line-height: 1.65;
    margin-bottom: 22px;
}
.dt-inst-text a {
    color: var(--pink);
    font-weight: 600;
}
.dt-inst-text a:hover {
    text-decoration: underline;
}
.dt-form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 640px) {
    .dt-form-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Step 4 notice: soft warning box in place of a large bold paragraph */
.dt-inst-bold-text {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-2);
    line-height: 1.65;
    margin-bottom: 22px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.08);
}
.dt-inst-bold-text i { color: #f59e0b; font-size: 15px; margin-top: 3px; flex-shrink: 0; }

/* Buttons */
.dt-btn-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.dt-btn-auto {
    width: auto;
}
.dt-btn-outline {
    width: auto;
    padding: 13px 26px;
    background: transparent;
    border: 1.5px solid var(--inp-bdr);
    color: var(--text);
    box-shadow: none;
    animation: none;
}
.dt-btn-outline:hover {
    border-color: var(--pink);
    color: var(--pink);
    transform: translateY(-2px);
    box-shadow: none;
}
.dt-btn-outline:active {
    transform: translateY(0) scale(0.984);
}

/* Result / notice card (e.g. purchase code already registered) */
.dt-result-card {
    margin-top: 6px;
    margin-bottom: 22px;
    padding: 20px 22px;
    border-radius: 14px;
    background: var(--feat-bg);
    border: 1px solid var(--feat-bdr);
    text-align: center;
}
.dt-result-card p {
    font-size: 13.5px;
    color: var(--text-2);
    margin-bottom: 8px;
}
.dt-result-card strong {
    display: block;
    font-size: 15px;
    color: var(--pink);
    margin-bottom: 16px;
    word-break: break-all;
}

/* Admin credentials (installation step 6) */
.install-credentials {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.install-credentials .row-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--inp-bg);
    border: 1px solid var(--inp-bdr);
    border-radius: 12px;
    padding: 12px 14px;
}
.install-credentials .row-line span {
    font-size: 13px;
    color: var(--text);
    word-break: break-all;
}
.install-credentials .row-line span b {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--text-3);
    margin-bottom: 2px;
}
.install-credentials .copy-btn {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--inp-bdr);
    background: transparent;
    color: var(--pink);
    border-radius: 10px;
    cursor: pointer;
    transition: background .2s, color .2s;
    outline: none;
}
.install-credentials .copy-btn:hover {
    background: var(--pink);
    color: var(--white-color);
}
.install_sub_title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    margin-bottom: 22px;
}

/* Installation steps (step0-step6) only — no delayed fade/slide-in entrance
   animation on reload. Admin & user login pages keep the effect as-is. */
body.dt-install-page .dt-card-solo,
body.dt-install-page .dt-app-name,
body.dt-install-page .dt-admin-badge,
body.dt-install-page .dt-form-top,
body.dt-install-page .dt-field,
body.dt-install-page .dt-btn {
    animation: none !important;
}

/* Installer page: the page itself scrolls only when the screen is really too short (no scrollbar inside the card);
   the footer sits in the bottom padding, so it adds no height */
body.dt-install-page .dt-lp { flex-direction: column; overflow: visible; padding: 76px 16px 52px; }
@media (min-width: 641px) {
    body.dt-install-page .dt-lp { padding: 20px 16px 52px; }
}
body.dt-install-page .dt-inst-card { max-height: none; overflow: visible; padding: 28px 38px 26px; }
body.dt-install-page .dt-inst-card .dt-solo-head { margin-bottom: 16px; }
body.dt-install-page .install_sub_title { margin-bottom: 16px; }
body.dt-install-page .dt-inst-logo { width: 60px; height: 60px; border-radius: 18px; margin-bottom: 8px; font-size: 22px; }
body.dt-install-page .dt-app-name { font-size: 28px; margin-bottom: 8px; }
body.dt-install-page .dt-form-top { margin-bottom: 18px; }
body.dt-install-page .dt-form-top h2 { font-size: 22px; }
body.dt-install-page .dt-step-caption { margin-bottom: 18px; }
body.dt-install-page .dt-check-list { gap: 8px; margin-bottom: 20px; }
body.dt-install-page .dt-check-item { padding: 9px 14px; }
@media (min-width: 641px) {
    /* Check list in two columns; an odd last item takes the full row */
    body.dt-install-page .dt-check-list { display: grid; grid-template-columns: 1fr 1fr; }
    body.dt-install-page .dt-check-item:last-child:nth-child(odd),
    body.dt-install-page .dt-check-item.is-full { grid-column: 1 / -1; }
    /* With a full-width item first (step 0) the rest pair up, so the last one stays half */
    body.dt-install-page .dt-check-item.is-full ~ .dt-check-item:last-child { grid-column: auto; }
}
@media (max-width: 480px) {
    body.dt-install-page .dt-inst-card { padding: 26px 20px 24px; }
}
/* Powered by line under the card on every installation step */
.install-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 10;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: var(--text-2);
    text-align: center;
}
.install-footer b { font-weight: 700; color: var(--pink); }
@media (min-width: 641px) {
    }

/* Alerts */
.dt-lp .alert {
    position: relative;
    border-radius: 12px;
    padding: 13px 34px 13px 16px;
    font-size: 13px;
    margin-bottom: 20px;
    border: 1px solid;
}
.dt-lp .alert-danger {
    background: rgba(var(--sa-btn-red-rgb), 0.08);
    border-color: rgba(var(--sa-btn-red-rgb), 0.24);
    color: var(--sa-btn-red);
}
.dt-lp .alert-success {
    background: rgba(var(--sa-btn-green-rgb), 0.08);
    border-color: rgba(var(--sa-btn-green-rgb), 0.24);
    color: var(--sa-btn-green);
}
.dt-lp .alert .close {
    position: absolute;
    right: 10px;
    top: 8px;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    font-size: 12px;
    outline: none !important;
}
.dt-lp .alert .close:hover {
    opacity: 1;
}

@media (max-width: 480px) {
    .dt-inst-card { padding: 30px 22px 26px; }
}
.dt-inst-logo {
    width: 80px;
    height: 80px;
    margin: 0 auto 10px;
    border-radius: 22px;
    background: var(--app-name-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 14px var(--logo-shadow);
    transition: box-shadow 0.3s, transform 0.3s;
}
.dt-inst-logo:hover {
    box-shadow: 0 0 24px var(--logo-shadow-hover);
    transform: scale(1.06);
}
.dt-inst-logo i {
    font-size: 32px;
    color: var(--white-color);
}

/* =============================================================================
   ADMIN PANEL — header, sidebar
   Colors adapted from DTCampus (blue #1e5fa5) → DTTube (pink #E01E75)
   ============================================================================= */

/* =============================================================================
   HEADER
   ============================================================================= */

.body-content { padding: 25px; }

/* ── Side toggle ──────────────────────────────────────────────────────── */
.side-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: var(--sa-sidebar-hover-bg) !important;
    padding: 4px;
}
.side-toggle span {
    background: var(--sa-header-icon);
    width: 22px;
    height: 3px;
    margin: 2px;
    border-radius: 50px;
}
.side-toggle span:nth-child(2) { width: 26px !important; }
.dropright .dropdown-menu {
    top: 100% !important;
    right: 0;
    transform: none !important;
    left: auto !important;
}
.dropdown-menu {
    box-shadow: 0 15px 35px var(--sa-header-dd-sep);
    padding: 4px;
    border: 0;
    border-radius: 12px;
    background: var(--sa-header-dd-bg);
}
.dropdown-menu .dropdown-item {
    font-weight: 500;
    border-bottom: 2px solid var(--sa-header-dd-sep);
    padding: 7px 11px;
    font-size: 14px;
    color: var(--sa-header-dd-text);
    transition: background 150ms ease, color 150ms ease;
}
.dropdown-menu .dropdown-item:last-child { border-bottom: 0; }
.dropdown-menu .dropdown-item:hover {
    background: var(--sa-header-btn-bg);
    color: var(--sa-header-icon);
}
.dropdown-menu, .card { background-color: var(--sa-header-dd-bg); }

/* ── Header bar ───────────────────────────────────────────────────────── */
.header {
    position: sticky;
    -webkit-position: -webkit-sticky;
    top: 0;
    background: var(--sa-header-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px) !important;
    z-index: 22;
    padding: 0 24px !important;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--sa-header-border);
    box-shadow: 0 1px 8px var(--sa-header-sh) !important;
    transition: background 280ms ease, border-color 280ms ease;
}
@media (min-width: 1680px) {
    .header { padding: 0 36px 0 25px !important; }
}
.header .title-control {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.header .title-control .side-toggle {
    margin-right: 15px;
    display: none;
}
.header .page-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: var(--sa-header-title);
    animation: mkFadeLeftRight .4s var(--ease-o) .05s both;
}
@keyframes mkFadeLeftRight {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}
.header .input-group {
    border: 1px solid var(--sa-header-border);
    border-radius: 100px;
    width: 550px;
    max-width: 100%;
}
.header .input-group .input-group-text,
.header .input-group .form-control {
    background: transparent;
    border: 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: flex;
    align-items: center;
    justify-content: flex-end;
}
.header .head-control .head-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    width: 45px;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    margin-left: 15px;
    background: var(--sa-header-btn-bg);
    color: var(--sa-header-icon);
    box-shadow: 0 1px 5px var(--sa-header-btn-sh) !important;
    border: none;
    transition: background 180ms ease, box-shadow 180ms ease;
}
.header .head-control .head-btn:hover {
    background: var(--sa-primary-light);
    box-shadow: 0 2px 8px var(--sa-header-btn-sh) !important;
}
.header .primary-color { color: var(--sa-header-icon) !important; }

/* ── Avatar ───────────────────────────────────────────────────────────── */

/* ── Demo mode badge ──────────────────────────────────────────────────── */
.demo-mode-box {
    --demo:     #B45309;
    --demo-rgb: 245, 158, 11;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px 0 12px;
    border-radius: 100px;
    border: 1px solid rgba(var(--demo-rgb), .35);
    background: rgba(var(--demo-rgb), .12);
    color: var(--demo);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: default;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.demo-mode-box:hover {
    background: rgba(var(--demo-rgb), .18);
    border-color: rgba(var(--demo-rgb), .6);
    box-shadow: 0 6px 18px -8px rgba(var(--demo-rgb), .6);
}
/* Live dot with a soft ping */
.demo-mode-box .demo-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(var(--demo-rgb));
}
.demo-mode-box .demo-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgb(var(--demo-rgb));
    animation: demoPing 1.6s ease-out infinite;
}
@keyframes demoPing { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }
@media (max-width: 575px) {
    .demo-mode-box { padding: 0 11px; }
    .demo-mode-box .demo-text { display: none; }
}
@media (prefers-reduced-motion: reduce) { .demo-mode-box .demo-dot::after { animation: none; } }

/* ── Dark mode overrides ──────────────────────────────────────────────── */
[data-theme="dark"] .header {
    background: var(--sa-header-bg);
    border-bottom-color: var(--sa-header-border);
}
[data-theme="dark"] .header .page-title    { color: var(--sa-header-title); }
[data-theme="dark"] .header .primary-color { color: var(--sa-header-icon) !important; }
[data-theme="dark"] .header .head-control .head-btn {
    background: var(--sa-header-btn-bg);
    color: var(--sa-header-icon);
    box-shadow: 0 1px 4px var(--sa-header-btn-sh) !important;
}
[data-theme="dark"] .header .head-control .head-btn:hover {
    background: var(--sa-header-btn-sh);
}
[data-theme="dark"] .demo-mode-box { --demo: #FBBF24; }

[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .card {
    background: var(--sa-header-dd-bg);
    border-color: var(--sa-header-dd-bd);
    box-shadow: 0 8px 24px var(--black-a35);
}
[data-theme="dark"] .dropdown-menu .dropdown-item {
    color: var(--sa-header-dd-text);
    border-bottom-color: var(--sa-header-dd-sep);
}
[data-theme="dark"] .dropdown-menu .dropdown-item:hover {
    background: var(--feat-bdr);
    color: var(--primary-color);
}
[data-theme="dark"] .side-toggle span { background: var(--sa-header-icon); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
    .header .input-group { width: 280px; }
}
@media (max-width: 991px) {
    .header { padding: 15px; }
    .header .title-control .side-toggle { display: flex !important; }
    .header .side-logo { display: block; width: 160px; }
}
@media (max-width: 767px) {
    .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; }
}
@media (max-width: 340px) {
    .header .side-logo { width: 120px; }
}

/* =============================================================================
   SIDEBAR
   ============================================================================= */

/* ── Side menu partition labels ───────────────────────────────────────── */
/* Small uppercase heading: pink dot + label + a line that fades out to the right */
.partition {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 20px 12px 8px;
    border: none;
    line-height: 1;
}
.partition span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--sa-sidebar-hover-text);
}
.partition::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--core-color), .60), transparent);
}
[data-theme="dark"] .partition span { color: var(--sa-sidebar-active-fg); }

/* ── Sidebar panel ────────────────────────────────────────────────────── */
.sidebar {
    background: var(--sa-sidebar-bg);
    padding: 0;
    position: fixed;
    left: 0; top: 0; bottom: 0;
    height: 100vh;
    width: 280px;
    max-width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    transform: translateX(0);
    transition: all 0.3s;
    border-right: 1px solid var(--sa-sidebar-border);
    box-shadow: 2px 0 16px var(--sa-sidebar-shadow);
    z-index: 100;
}
@media (min-width: 1680px) { .sidebar { width: 300px; } }
.sidebar.hide-sidebar {
    width: 80px;
    padding: 0;
}

/* ── Side head (pinned) ───────────────────────────────────────────────── */
.sidebar .side-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 14px;
    min-height: 64px;
    border-bottom: 1px solid var(--sa-sidebar-head-border);
    gap: 8px;
    flex-shrink: 0;
    background: var(--sa-sidebar-head-bg);
    z-index: 2;
    transition: background 280ms ease, border-color 280ms ease;
}
.sidebar .side-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    flex: 1;
    color: var(--sa-sidebar-text);
    width: auto;
    text-decoration: none;
}
.sb-name {
    font-size: 28px;
    font-weight: 700;
    color: var(--sa-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    line-height: 1.2;
}
[data-theme="dark"] .sb-name { color: var(--white-color); }

/* ── Side menu (scrollable) ───────────────────────────────────────────── */
.sidebar .side-menu {
    padding: 10px;
    list-style: none;
    margin: 0;
    flex: 1 1 auto;
    min-height: 0; /* lets the menu scroll inside the column so the head and foot stay pinned */
    overflow-y: auto;
    overflow-x: hidden;
}
.sidebar .side-menu::-webkit-scrollbar       { width: 3px; }
.sidebar .side-menu::-webkit-scrollbar-thumb { background: var(--sa-primary); border-radius: 999px; }
.sidebar .side-menu::-webkit-scrollbar-track { background: transparent; }

/* ── Side foot (pinned logout) ────────────────────────────────────────── */
.sidebar .side-foot {
    flex-shrink: 0;
    padding: 10px;
    border-top: 1px solid var(--sa-sidebar-head-border);
    background: var(--sa-sidebar-head-bg);
}
.sidebar .side-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sa-sidebar-text);
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
}
.sidebar .side-logout:hover {
    background: var(--sa-sidebar-hover-bg);
    color: var(--sa-sidebar-hover-text);
}

/* Menu links */
.sidebar .side-menu a {
    color: var(--sa-sidebar-text);
    display: flex;
    padding: 9px 12px;
    position: relative;
    margin: 1px 0;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    gap: 10px;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
}
.sidebar .side-menu a .menu-icon   { margin-right: 0; }
.sidebar .side-menu .dropdown-menu a .submenu-icon { margin-right: 0; }
.sidebar .side-menu .side_line.active a:after,
.sidebar.hide-sidebar .side-menu .side_line.active a:after { display: none; }
.sidebar .side-menu a:hover {
    background: var(--sa-sidebar-hover-bg);
    color: var(--sa-sidebar-hover-text);
}
.sidebar .side-menu .active > a {
    background: var(--sa-sidebar-active-bg);
    border-radius: 8px;
    color: var(--sa-sidebar-active-fg);
    font-weight: 600;
}
.sidebar .side-menu .dropdown-toggle::after {
    position: static;
    margin-left: auto;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Dropdown / submenu */
.sidebar .side-menu .dropdown-menu {
    position: relative !important;
    transform: none !important;
    box-shadow: none;
    float: none;
    background: transparent;
    margin-left: 0;
}
.sidebar .side-menu .dropdown-menu.side-submenu {
    margin-left: 16px;
    padding: 4px 0 4px 10px;
    margin-top: 2px;
    border-left: 2px solid var(--sa-sidebar-sub-bd);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.sidebar .side-menu .dropdown-menu .dropdown-item { padding: 4px 12px; background: transparent !important; }

/* Submenu items */
.sidebar .side-menu .side-submenu .side_line { background: transparent; border: none; padding: 0; margin: 1px 0; border-radius: 0; }
.sidebar .side-menu .side-submenu .dropdown-item {
    padding: 8px 10px;
    border-radius: 7px;
    border-bottom: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--sa-sidebar-sub-text);
    background: transparent;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: normal;
    transition: background 0.18s ease, color 0.18s ease;
}
.sidebar .side-menu .side-submenu .dropdown-item:hover {
    background: var(--sa-sidebar-hover-bg);
    color: var(--sa-sidebar-hover-text);
}
.sidebar .side-menu .side-submenu .submenu-icon {
    font-size: 16px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    color: inherit;
}
.sidebar .side-menu .side-submenu .active { background: transparent; border-radius: 0; padding: 0; }
.sidebar .side-menu .side-submenu .active .dropdown-item {
    background: var(--sa-sidebar-active-bg) !important;
    color: var(--sa-sidebar-active-fg);
    border-radius: 7px;
    font-weight: 600;
}
.sidebar .side-menu .side-submenu .active .dropdown-item:hover {
    background: var(--sa-sidebar-active-bg);
    color: var(--sa-sidebar-active-fg);
}
.sidebar .side-menu .side-submenu .active .submenu-icon { color: var(--sa-sidebar-active-fg); }
.sidebar .side-menu .side-submenu a       { color: var(--sa-sidebar-sub-text); display: flex; align-items: center; cursor: pointer; font-size: 13px; font-weight: 500; }
.sidebar .side-menu .side-submenu a:hover { color: var(--sa-sidebar-hover-text); }
.sidebar .side-menu .side-submenu .active a,
.sidebar .side-menu .side-submenu .active a:hover { color: var(--sa-sidebar-active-fg); }

/* ── Right content offset ─────────────────────────────────────────────── */
.right-content {
    margin-left: 280px;
    transition: all 0.3s;
}
@media (min-width: 1680px) { .right-content { margin-left: 300px; } }
.right-content.right-content-0 { margin-left: 80px; }

/* ── Collapsed sidebar (≥1024px desktop) ─────────────────────────────── */
@media (min-width: 1024px) {
    .sidebar.hide-sidebar .side-head        { padding: 0 6px; gap: 4px; justify-content: center; }
    .sidebar.hide-sidebar .sb-name          { display: none; }
    .sidebar.hide-sidebar .side-logo        { flex: 0 0 auto; width: auto; overflow: visible; }
    .sidebar.hide-sidebar .side-menu .partition span,
    .sidebar.hide-sidebar .side-menu a > span { display: none; }
    /* Collapsed: the heading becomes a short centred divider */
    .sidebar.hide-sidebar .side-menu .partition { justify-content: center; padding: 12px 0 6px; }
    .sidebar.hide-sidebar .side-menu .partition::after { flex: none; width: 26px; background: rgba(var(--core-color), .40); }
    .sidebar.hide-sidebar .side-menu .active a:after { content: none; }
    .sidebar.hide-sidebar .side-menu a      { margin: 2px auto; padding: 10px; width: 46px; height: 46px; gap: 0; justify-content: center; }
    .sidebar.hide-sidebar .side-menu a .menu-icon { margin-right: 0; }
    .sidebar.hide-sidebar .side-foot        { padding: 8px 0; }
    .sidebar.hide-sidebar .side-logout      { margin: 0 auto; padding: 10px; width: 46px; height: 46px; gap: 0; justify-content: center; }
    .sidebar.hide-sidebar .side-logout > span { display: none; }
    .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; }
    .sidebar.hide-sidebar .side-menu .dropdown-menu a { padding: 0; }
    .sidebar.hide-sidebar .side-menu .dropdown-menu .active { padding: 0; margin: 0; }
    .sidebar.hide-sidebar .side-menu .dropdown-menu a svg { margin-right: 0; }
    .sidebar.hide-sidebar .side-menu .dropdown-menu.side-submenu { border-left: none; margin-left: 0; padding-left: 0; }
}
@media (min-width: 1680px) {
    .sidebar.hide-sidebar .side-head { padding: 0 6px; }
}

/* ── Mobile sidebar (≤991px) ─────────────────────────────────────────── */
@media (max-width: 991px) {
    .sidebar { left: -280px; }
    .sidebar .side-head { min-height: 56px; }
    .sidebar.hide-sidebar {
        transform: translateX(0);
        left: 0;
        z-index: 199;
        width: 280px;
    }
    .sidebar.hide-sidebar .side-toggle span:first-child { transform: rotate(45deg); }
    .sidebar.hide-sidebar .side-toggle span:nth-child(2) { display: none; }
    .sidebar.hide-sidebar .side-toggle span:last-child   { transform: rotate(-45deg); margin-top: -5px; }
    .right-content { margin-left: 0 !important; }
}

/* =============================================================================
   HEADER — enhanced components (hdr-*)
   ============================================================================= */

/* ── Dropdown animation ───────────────────────────────────────────────── */
@keyframes saDropIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
/* ── Head buttons ─────────────────────────────────────────────────────── */
.header .head-control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.header .head-control .head-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    width: 38px;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    margin-left: 0;
    background: var(--sa-black-004);
    border: 1px solid var(--sa-surface);
    box-shadow: none;
    color: var(--sa-primary);
    transition: background 0.18s ease, border-color 0.18s ease,
                box-shadow 0.18s ease, transform 0.15s ease;
    cursor: pointer;
}
.header .head-control .head-btn:hover {
    background: var(--sa-primary-light);
    border-color: var(--sa-primary);
    box-shadow: 0 2px 8px var(--sa-black-008);
    transform: translateY(-1px);
}
.header .head-control .head-btn:active {
    transform: scale(0.96);
    box-shadow: none;
}

/* ── Side logo text ───────────────────────────────────────────────────── */
.header .side-logo h3 {
    color: var(--sa-primary);
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: color 280ms ease;
}

/* ── Dropdown (scoped to header) ──────────────────────────────────────── */
.header .dropdown-menu {
    min-width: 160px;
    border: 1px solid var(--sa-surface);
    border-radius: 10px;
    box-shadow: 0 8px 24px var(--sa-black-008);
    padding: 6px;
    animation: saDropIn 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.header .dropdown-menu .dropdown-item {
    border-radius: 6px;
    border-bottom: none;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sa-ct-text);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}
.header .dropdown-menu .dropdown-item:hover {
    background: var(--sa-primary-light);
    color: var(--sa-primary);
}

/* ── Dark overrides ───────────────────────────────────────────────────── */
[data-theme="dark"] .header .head-control .head-btn {
    background: var(--feat-bg);
    border-color: var(--fi-inset);
    color: var(--sa-header-icon);
}
[data-theme="dark"] .header .head-control .head-btn:hover {
    background: var(--feat-ico);
    border-color: var(--pink-soft-a30);
    box-shadow: 0 2px 8px var(--sa-header-btn-sh);
}
[data-theme="dark"] .header .side-logo h3 { color: var(--sa-header-icon); }
[data-theme="dark"] .header .dropdown-menu {
    background: var(--sa-header-dd-bg);
    border-color: var(--sa-header-dd-bd);
    box-shadow: 0 8px 28px var(--black-a40);
}
[data-theme="dark"] .header .dropdown-menu .dropdown-item { color: var(--sa-header-dd-text); }
[data-theme="dark"] .header .dropdown-menu .dropdown-item:hover {
    background: var(--feat-bdr);
    color: var(--primary-color);
}

/* ── Icon buttons (theme toggle, language, etc.) ─────────────────────── */
.hdr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--sa-surface);
    border-radius: 8px;
    background: var(--sa-black-004);
    color: var(--sa-primary);
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    font-family: var(--font);
    outline: none !important;
    transition: background 180ms ease, border-color 180ms ease,
                color 180ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.hdr-btn:hover {
    background: var(--sa-primary-light);
    border-color: var(--sa-primary);
    color: var(--sa-primary);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px var(--sa-black-008);
}
.hdr-btn:active { transform: scale(0.95); box-shadow: none; }
.show > .hdr-btn,
.hdr-btn[aria-expanded="true"] {
    background: var(--sa-primary-light);
    border-color: var(--sa-primary);
    color: var(--sa-primary);
    box-shadow: 0 0 0 3px var(--glow-sm);
}

/* =============================================================================
   FORM ACTIONS
   ============================================================================= */
.sa-card-actions {
    display: flex;
    align-items: center;
    justify-content: center !important;
    gap: 12px;
    padding-top: 16px;
    margin-top: 12px;
    border-top: 1px solid var(--sa-surface);
    animation: sacCardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both;
}
.sa-card-actions .btn:nth-child(1) { animation: sacCardIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.36s both; }
.sa-card-actions .btn:nth-child(2) { animation: sacCardIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.44s both; }
[data-theme="dark"] .sa-card-actions { border-top-color: var(--card-border); }

/* ── Dropdown panel ───────────────────────────────────────────────────── */
.hdr-dropdown {
    min-width: 220px;
    border-radius: 12px !important;
    overflow: hidden;
    padding: 6px !important;
    border: 1px solid var(--sa-surface) !important;
    box-shadow: 0 10px 32px var(--sa-black-008), 0 2px 8px var(--sa-black-004) !important;
    background: var(--white-color);
    margin-top: 8px !important;
    animation: saDropIn 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Dropdown items ───────────────────────────────────────────────────── */
.hdr-dd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sa-header-dd-text);
    text-decoration: none;
    border-radius: 6px;
    transition: background 150ms ease, color 150ms ease;
    cursor: pointer;
}
.hdr-dd-item i             { width: 15px; text-align: center; font-size: 13px; flex-shrink: 0; }
.hdr-dd-item:hover         { background: var(--sa-primary-light); color: var(--sa-primary); text-decoration: none; }

/* ── Profile menu ─────────────────────────────────────────────────────── */
.hdr-profile {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 10px 0 4px;
    border: 1px solid var(--sa-surface);
    border-radius: 10px;
    background: var(--sa-black-004);
    color: var(--sa-header-dd-text);
    font-family: var(--font);
    cursor: pointer;
    outline: none !important;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 150ms ease;
}
.hdr-profile:hover,
.show > .hdr-profile { background: var(--sa-primary-light); border-color: var(--sa-primary); }
.hdr-avatar {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--white-color);
    background: linear-gradient(135deg, var(--pink-deep), var(--pink));
}
.hdr-profile-info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.hdr-profile-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.hdr-profile-role { font-size: 11px; color: var(--text-3); }
.hdr-profile-caret { font-size: 10px; color: var(--text-3); }
.hdr-dd-item--danger:hover { background: rgba(239, 68, 68, .1); color: var(--palette-red); }
[data-theme="dark"] .hdr-profile { background: var(--sa-header-btn-bg); border-color: var(--sa-header-border); color: var(--sa-header-title); }
@media (max-width: 575px) { .hdr-profile-info, .hdr-profile-caret { display: none; } }

/* ── Language badge ───────────────────────────────────────────────────── */
.hdr-lang-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 18px;
    border-radius: 4px;
    background: var(--sa-primary-light);
    color: var(--sa-primary);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
[data-theme="dark"] .hdr-btn {
    background: var(--sa-header-btn-bg);
    border-color: var(--sa-header-border);
    color: var(--sa-header-icon);
}
[data-theme="dark"] .hdr-btn:hover {
    background: var(--sa-header-btn-sh);
    border-color: var(--pink-soft-a40);
    box-shadow: 0 3px 8px var(--pink-a25);
}
[data-theme="dark"] .show > .hdr-btn,
[data-theme="dark"] .hdr-btn[aria-expanded="true"] {
    background: var(--sa-header-btn-sh);
    border-color: var(--pink-soft-a50);
    color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--feat-ico);
}
[data-theme="dark"] .hdr-dropdown {
    background: var(--sa-header-dd-bg) !important;
    border-color: var(--sa-header-dd-bd) !important;
    box-shadow: 0 8px 32px var(--black-a40) !important;
}
[data-theme="dark"] .hdr-dd-item       { color: var(--sa-header-dd-text); }
[data-theme="dark"] .hdr-dd-item:hover { background: var(--feat-bdr); color: var(--hdr-dd-hover-tint); }
[data-theme="dark"] .hdr-lang-badge    { background: var(--pink-soft-a15); color: var(--primary-color); }

/* =============================================================================
   BASE — html / body / scrollbar
   ============================================================================= */
*::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    height: 100%; margin: 0; padding: 0;
    font-family: var(--font); font-size: 14px;
    color: var(--sa-ct-text); background: var(--sa-ct-bg);
    overflow-x: hidden; -webkit-font-smoothing: antialiased;
    transition: background 280ms ease, color 280ms ease;
}
/* Theme toggle: theme.js adds this class for one frame so light <-> dark swaps instantly everywhere */
.dt-theme-switching *,
.dt-theme-switching *::before,
.dt-theme-switching *::after { transition: none !important; }
a { text-decoration: none !important; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--sa-surface); }
::-webkit-scrollbar-thumb { background: var(--sa-scrollbar-thumb); border-radius: 100px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--sa-ct-bg); }

/* =============================================================================
   ADMIN LOGIN PAGE  (adm-*)
   ============================================================================= */
@keyframes admCardSlideUp {
    from { opacity: 0; transform: translateY(40px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes admOrbDrift {
    from { transform: translate(0,0) scale(1); }
    to   { transform: translate(28px,18px) scale(1.1); }
}
@keyframes admRingPulse {
    0%,100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.06); opacity: 0.6; }
}
@keyframes admVdotPulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.65); }
}
@keyframes admDotBounce {
    from { transform: translateY(0);    opacity: 0.4; }
    to   { transform: translateY(-6px); opacity: 1; }
}
#fieldEmail { animation-delay: 0.32s; }
#fieldPass  { animation-delay: 0.38s; }

/* =============================================================================
   BODY CONTENT / BASE UTILITIES
   ============================================================================= */
.body-content { padding: 25px; }
.right-content.right-content-0 .header .title-control .side-toggle { display: none; }

/* =============================================================================
   PROFILE CARD
   ============================================================================= */

/* =============================================================================
   BREADCRUMB
   ============================================================================= */
/* Plain text trail (same look as the DTPocketFM panel mk-breadcrumb):
   muted links, tiny chevron separators, current page in the brand colour.
   Markup stays the plain Bootstrap <ol class="breadcrumb"> used by every page. */
.breadcrumb {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 20px;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
    font-size: 13px;
    line-height: 1.4;
}
.breadcrumb-item { display: flex; align-items: center; gap: 6px; padding: 0 !important; }
.breadcrumb-item + .breadcrumb-item::before {
    content: "\f054" !important;
    float: none;
    padding: 0 !important;
    font-family: 'FontAwesome';
    font-weight: 900;
    font-size: 9px;
    color: var(--text-3);
}
.breadcrumb-item a {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    text-decoration: none;
    transition: color 0.15s;
}
.breadcrumb-item a:hover { color: var(--primary-color); text-decoration: none; }
.breadcrumb-item.active {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color) !important;
}
[data-theme="dark"] .breadcrumb-item.active { color: var(--pink-soft) !important; }
/* Page load: fade in while sliding left -> right (like DTPocketFM mkFadeLeftRight), no per-item stagger */
@keyframes saBcFade {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}
.breadcrumb,
.row:has(> [class*="col"] > .breadcrumb) { animation: saBcFade 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.row:has(> [class*="col"] > .breadcrumb) > [class*="col"] > .breadcrumb { animation: none; } /* the row already fades */
@media (prefers-reduced-motion: reduce) {
    .breadcrumb, .row:has(> [class*="col"] > .breadcrumb) { animation: none; }
}

/* Next to a page button (breadcrumb in a .row column): centre on the button's height,
   and move the bottom gap to the row so the button is centred on the same line */
.row > [class*="col"] > .breadcrumb { min-height: 42px; margin-bottom: 0; }
.row:has(> [class*="col"] > .breadcrumb) { margin-bottom: 20px; }

/* Desktop: the trail sits in a full-width strip under the header (DTPocketFM mk-hero):
   soft background, bottom line, tight top spacing. Works for both page shapes —
   a bare <ol class="breadcrumb"> and a .row with the breadcrumb + page buttons. */
@media (min-width: 992px) {
    .body-content > .breadcrumb,
    .body-content > .row:has(> [class*="col"] > .breadcrumb) {
        margin: -25px -25px 24px !important;
        min-height: 46px;
        align-items: center;
        background: rgba(255, 255, 255, 0.55) !important;
        border-bottom: 1px solid rgba(12, 12, 30, 0.08);
    }
    .body-content > .breadcrumb { padding: 12px 25px !important; }
    .body-content > .row:has(> [class*="col"] > .breadcrumb) { padding: 10px 10px; } /* + column gutters = 25px */
    [data-theme="dark"] .body-content > .breadcrumb,
    [data-theme="dark"] .body-content > .row:has(> [class*="col"] > .breadcrumb) {
        background: rgba(255, 255, 255, 0.03) !important;
        border-bottom-color: rgba(255, 255, 255, 0.07);
    }
}

/* =============================================================================
   SELECT2
   ============================================================================= */
select.select2-hidden-accessible { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; padding: 0 !important; margin: -1px !important; opacity: 0 !important; pointer-events: none !important; }
.select2-container { width: 100% !important; }
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple { background-color: var(--white-color) !important; border: 1px solid var(--sa-surface) !important; border-radius: 8px !important; font-size: 14px; height: auto !important; color: var(--sa-ct-text) !important; }
.select2-container .select2-selection--single   { padding: 10px 38px 10px 18px !important; min-height: auto !important; }
.select2-container .select2-selection--multiple { padding: 4px 8px !important; min-height: 38px !important; }
.select2-container .select2-selection--single:focus,
.select2-container .select2-selection--multiple:focus { border-color: var(--sa-primary) !important; box-shadow: 0 0 0 3px rgba(var(--core-color), 0.08) !important; outline: none !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--sa-ct-text) !important; line-height: 1.5 !important; padding-left: 0 !important; padding-right: 0 !important; }
.select2-container--default .select2-selection--multiple .select2-selection__rendered { color: var(--sa-ct-text) !important; line-height: 28px; padding-left: 4px; }
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-selection__placeholder { color: var(--sa-ct-text) !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 50% !important; transform: translateY(-50%) !important; right: 12px !important; height: 20px !important; width: 16px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: rgba(var(--core-color), 0.5) transparent transparent; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--sa-primary) transparent; }
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--sa-primary) !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: rgba(var(--core-color), 0.1) !important; border: 1px solid rgba(var(--core-color), 0.25) !important; color: var(--sa-primary) !important; border-radius: 6px !important; padding: 2px 8px !important; font-size: 12px; font-weight: 500; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--sa-primary) !important; margin-right: 6px; }
select option { background-color: var(--white-color); color: var(--sa-ct-text); }
[data-theme="dark"] .select2-container .select2-selection--single,
[data-theme="dark"] .select2-container .select2-selection--multiple { background-color: var(--sa-sidebar-bg) !important; border-color: var(--sa-sidebar-active-bg) !important; color: var(--sa-ct-text) !important; }
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered { color: var(--sa-ct-text) !important; }
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder,
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__placeholder { color: var(--sa-ct-text) !important; }
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: rgba(var(--core-color), 0.7) transparent transparent; }
[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent rgba(var(--core-color), 0.9); }
[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single { border-color: rgba(var(--core-color), 0.5) !important; }
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: rgba(var(--core-color), 0.15) !important; border-color: rgba(var(--core-color), 0.3) !important; color: var(--sa-header-icon) !important; }
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--sa-header-icon) !important; }
[data-theme="dark"] select option { background-color: var(--sa-header-dd-bg); color: var(--sa-ct-text); }

/* =============================================================================
   ACTION BUTTONS
   ============================================================================= */
.info-btn { font-weight: bold; border: 2px solid transparent; color: var(--white-color) !important; padding: 6px 18px !important; outline: none; border-radius: 5px; font-size: 14px !important; cursor: pointer; transition: background 200ms ease, color 200ms ease, border-color 200ms ease; }
.info-btn          { background: var(--sa-primary) !important; }
.info-btn:hover    { background: var(--white-color) !important; border: 2px solid var(--sa-primary) !important; color: var(--sa-primary) !important; }
.info-btn:focus { outline: none; box-shadow: none; }

/* =============================================================================
   PAGE SEARCH
   ============================================================================= */
.page-search {
    display: flex; align-items: center; gap: 10px;
    background: var(--white-color); border-radius: 14px; padding: 10px 14px; margin-bottom: 8px;
    border: 1px solid var(--adm-dash-stat-bd); box-shadow: 0 2px 12px var(--sa-black-004);
    flex-wrap: wrap; position: relative;
    animation: sacCardIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}
.page-search .input-group { flex: 1; min-width: 180px; background: var(--sa-surface); border-radius: 10px; overflow: visible; border: 1.5px solid transparent; transition: border-color 0.2s ease, box-shadow 0.2s ease; flex-wrap: nowrap; }
.page-search .input-group:focus-within { border-color: var(--sa-primary); box-shadow: 0 0 0 3px var(--panel-glow); }
.page-search .input-group-text { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--sa-primary); font-size: 14px; padding: 10px 10px 10px 14px; }
.page-search .input-group .form-control { background: transparent !important; border: none !important; box-shadow: none !important; font-size: 14px; padding: 10px 14px 10px 4px; color: var(--sa-ct-text); }
.page-search .input-group .form-control::placeholder { opacity: 0.45; }
.page-search .sorting { display: flex; align-items: center; gap: 8px; background: var(--sa-surface); border-radius: 10px; padding: 4px 12px 4px 14px; border: 1.5px solid transparent; width: auto; transition: border-color 0.2s ease; min-width: 190px; }
.page-search .sorting:focus-within { border-color: var(--sa-primary); }
/* Custom date range: two date inputs in one pill */
.page-search .sorting.date-range { gap: 6px; min-width: 300px; }
.page-search .sorting.date-range .form-control { min-width: 0; flex: 1; cursor: pointer; }
.page-search .date-range-sep { font-size: 12px; font-weight: 600; color: var(--sa-primary); white-space: nowrap; }
.page-search .sorting label { font-size: 12px; font-weight: 700; color: var(--sa-primary); margin: 0; white-space: nowrap; min-width: fit-content; letter-spacing: 0.02em; }
.page-search .sorting .form-control { background: transparent !important; border: none !important; box-shadow: none !important; font-size: 13px; font-weight: 500; color: var(--sa-ct-text); padding: 8px 0; min-width: 120px; }
.page-search .select2-container { flex: 1; }
.page-search .select2-container--default .select2-selection--single { background: transparent !important; border: none !important; height: auto !important; min-height: unset !important; padding: 0 !important; outline: none !important; box-shadow: none !important; }
.page-search .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--sa-ct-text); font-size: 13px; font-weight: 500; padding: 8px 28px 8px 0; line-height: 1.4; }
.page-search .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; right: 2px; }
.page-search .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--sa-primary) transparent transparent; border-width: 5px 4px 0; margin-top: -2px; }
.page-search .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--sa-primary); border-width: 0 4px 5px; }
.select2-container--default .select2-dropdown { background-color: var(--white-color) !important; border: 1.5px solid var(--sa-primary) !important; border-radius: 10px; box-shadow: 0 8px 24px rgba(var(--core-color), 0.12); overflow: hidden; margin-top: 4px; }
.select2-container--default .select2-results__option { font-size: 13px; font-weight: 500; padding: 9px 16px; color: var(--sa-ct-text); transition: background 0.15s ease; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--sa-primary-light) !important; color: var(--sa-primary) !important; }
.select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--sa-primary) !important; color: var(--white-color) !important; }
.select2-search--dropdown .select2-search__field { background-color: var(--sa-surface) !important; border-color: rgba(var(--core-color), 0.15) !important; color: var(--sa-ct-text) !important; border-radius: 6px; }
[data-theme="dark"] .page-search { background: var(--sa-sidebar-bg); border-color: var(--fi-inset); box-shadow: 0 2px 12px var(--tog-shadow); }
[data-theme="dark"] .page-search .input-group,
[data-theme="dark"] .page-search .sorting { background: var(--sa-header-dd-bg); }
[data-theme="dark"] .page-search .input-group:focus-within,
[data-theme="dark"] .page-search .sorting:focus-within { border-color: rgba(var(--core-color), 0.5); box-shadow: 0 0 0 3px rgba(var(--core-color), 0.1); }
[data-theme="dark"] .page-search .input-group-text            { color: var(--sa-header-icon); }
[data-theme="dark"] .page-search .sorting label               { color: var(--sa-header-icon); }
[data-theme="dark"] .page-search .sorting .form-control       { color: var(--sa-ct-text); }
[data-theme="dark"] .page-search .sorting select option       { background-color: var(--sa-header-dd-bg); color: var(--sa-ct-text); }
[data-theme="dark"] .page-search .input-group .form-control   { color: var(--sa-ct-text); }
[data-theme="dark"] .page-search .select2-container .select2-selection--single,
[data-theme="dark"] .page-search .select2-container .select2-selection--multiple { background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; }
[data-theme="dark"] .select2-container--default .select2-dropdown { background-color: var(--sa-header-dd-bg) !important; border-color: rgba(var(--core-color), 0.4) !important; box-shadow: 0 8px 24px var(--sa-sidebar-shadow); }
[data-theme="dark"] .select2-container--default .select2-results__option { color: var(--sa-ct-text); background-color: var(--sa-header-dd-bg); }
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: rgba(var(--core-color), 0.15) !important; color: var(--sa-header-icon) !important; }
[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--sa-primary) !important; color: var(--white-color) !important; }
[data-theme="dark"] .select2-search--dropdown .select2-search__field { background-color: var(--sa-sidebar-bg) !important; border-color: var(--white-a10) !important; color: var(--sa-ct-text) !important; }
[data-theme="dark"] .page-search .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--sa-ct-text); }
[data-theme="dark"] .page-search .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--sa-header-icon) transparent transparent; }
[data-theme="dark"] .page-search .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--sa-header-icon); }
@media (max-width: 767px) { .page-search { flex-direction: column; align-items: stretch; } .page-search .input-group { min-width: unset; } .page-search .sorting { margin-top: 0; min-width: unset; } }

/* =============================================================================
   PAGINATION
   ============================================================================= */
.pagination {
    padding: 5px;
    border: 1px solid var(--sa-surface);
    display: inline-flex;
    border-radius: 10px;
    margin: 35px auto 0;
}
.pagination .page-link {
    border: 0;
    height: 30px;
    width: 30px;
    background: var(--sa-surface) !important;
    margin: 0 5px;
    border-radius: 50px !important;
    color: var(--sa-ct-text);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pagination .active .page-link      { background: var(--sa-primary) !important; color: var(--white-color); }

[data-theme="dark"] .pagination               { border-color: var(--sa-sidebar-bg); }
[data-theme="dark"] .pagination .page-link    { background: var(--sa-sidebar-bg) !important; color: var(--sa-ct-text); }
[data-theme="dark"] .pagination .active .page-link { background: var(--sa-sidebar-active-bg) !important; color: var(--sa-sidebar-active-fg); }

@media (max-width: 991px) { .pagination { margin-top: 20px; } }

/* =============================================================================
   CUSTOM BORDER CARD
   ============================================================================= */
@keyframes sacCardIn {
    from { opacity: 0; transform: translateY(22px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.custom-border-card {
    padding: 0; border-radius: 16px; margin-bottom: 22px;
    background-color: var(--white-color) !important; border: 1px solid var(--adm-dash-stat-bd) !important;
    box-shadow: 0 2px 14px var(--black-a05);
    animation: sacCardIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.12s;
}
.custom-border-card .card-header { font-size: 16px; background: var(--sa-primary-light); padding: 14px 22px; font-weight: 700; color: var(--sa-primary); border-bottom: none; border-radius: 16px 16px 0 0; display: flex; align-items: center; gap: 8px; letter-spacing: 0.01em; position: relative; }
.custom-border-card .card-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--sa-primary) 0%, var(--sa-primary) 60%, transparent 100%); }
.custom-border-card .card-body { padding: 20px 22px 16px; }
[data-theme="dark"] .custom-border-card { background-color: var(--sa-header-bg) !important; border-color: var(--fi-inset) !important; box-shadow: 0 2px 14px var(--black-a28); }
[data-theme="dark"] .custom-border-card .card-header { background: var(--feat-bdr); color: var(--primary-color); border-bottom: none; }
@media (max-width: 991px) { .custom-border-card .card-header { font-size: 14px; padding: 12px 16px; } .custom-border-card .card-body { padding: 16px; } }

/* =============================================================================
   FORM GROUP / FORM CONTROL
   ============================================================================= */
.form-group label { font-weight: 500; color: var(--sa-ct-text); font-size: 14px; margin-bottom: 8px; }
.form-control, .custom-select { border: 1px solid var(--sa-surface); border-radius: 8px; padding: 12px 18px; font-size: 14px; height: auto !important; background-color: var(--white-color); color: var(--sa-ct-text); }
.form-control:focus, .custom-select:focus { border-color: var(--sa-primary); box-shadow: 0 0 0 3px var(--sa-primary-light); outline: none; }
.input-group-text { background-color: var(--sa-surface); border-color: var(--sa-surface); color: var(--sa-primary); cursor: pointer; transition: background 0.18s ease, color 0.18s ease; }
.input-group-text:hover { background-color: var(--sa-primary-light); color: var(--sa-primary); }
[data-theme="dark"] .input-group-text { background-color: var(--sa-sidebar-bg); border-color: var(--sa-header-dd-bd); color: var(--primary-color); }
[data-theme="dark"] .input-group-text:hover { background-color: var(--sa-header-btn-bg); color: var(--primary-color); }
[data-theme="dark"] .form-group label     { color: var(--sa-ct-text); }
[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select        { background-color: var(--sa-sidebar-bg); border-color: var(--sa-sidebar-active-bg); color: var(--sa-ct-text); }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .custom-select:focus  { border-color: var(--sa-sidebar-active-fg); box-shadow: 0 0 0 3px var(--feat-ico); }
@media (max-width: 1680px) { .form-group label { font-size: 16px; } }
@media (max-width: 991px)  { .form-group label { font-size: 14px; } }

/* =============================================================================
   UTILITIES + BUTTONS
   ============================================================================= */
.primary-color { color: var(--primary-color); }
.text-gray     { color: var(--sa-ct-text); opacity: 0.6; }
.btn:focus     { outline: none; box-shadow: 0 0 0; }
/* Link buttons (<a class="btn">) behave like <button>: press + move must not start a link drag or select the label */
a.btn { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.mw-120 { min-width: 120px; }
.btn-link { color: var(--sa-primary) !important; font-weight: 600; border-bottom: 1px solid var(--sa-primary); display: inline-block; padding: 0; border-radius: 0; font-size: 14px; }
.btn-default {
    background: linear-gradient(135deg, var(--sa-primary) 0%, var(--pink-deep) 100%);
    border-radius: 10px; font-size: 16px; font-weight: 600; color: var(--white-color); border: none;
    padding: 10px 28px; display: inline-flex; align-items: center; gap: 7px;
    box-shadow: 0 4px 14px var(--glow);
    position: relative; overflow: hidden;
}
.btn-default::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(110deg, transparent 20%, var(--white-a18) 50%, transparent 80%); pointer-events: none; }
.btn-default:hover::after { left: 150%; }
.btn-default:hover { color: var(--white-color); background: linear-gradient(135deg, var(--btn-default-hover) 0%, var(--pink) 100%); box-shadow: 0 8px 22px var(--pink-a42); border-color: transparent; }
.btn-default:active { box-shadow: 0 2px 8px var(--pink-a28); }
.btn-default:focus, .btn-default:focus-visible { outline: none !important; box-shadow: 0 4px 14px var(--glow) !important; color: var(--white-color) !important; background: linear-gradient(135deg, var(--sa-primary) 0%, var(--pink-deep) 100%) !important; }
[data-theme="dark"] .btn-default { background: linear-gradient(135deg, var(--sa-scrollbar-thumb) 0%, var(--pink-deep) 100%); box-shadow: 0 4px 14px var(--btn-shadow); }
[data-theme="dark"] .btn-default:hover { background: linear-gradient(135deg, var(--sa-scrollbar-thumb) 0%, var(--primary-color) 100%); box-shadow: 0 8px 22px var(--pink-a48); color: var(--white-color); }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--sa-primary) !important; cursor: pointer; }

/* =============================================================================
   CUSTOM CONTROL (checkbox / radio)
   ============================================================================= */
.custom-control .custom-control-label::before {
    background: transparent;
    border: 2px solid var(--sa-primary);
    border-radius: 3px;
}
.custom-control .custom-control-input:checked ~ .custom-control-label::after {
    border-radius: 3px;
    background-color: var(--sa-primary);
}
.custom-control.custom-radio .custom-control-label::before,
.custom-control.custom-radio .custom-control-label:after { border-radius: 50% !important; }

/* =============================================================================
   BOX TITLE
   ============================================================================= */
.box-title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; border-bottom: 1.5px solid var(--sa-primary-light); padding-bottom: 4px; }
.box-title .title { font-size: 17px; font-weight: 700; color: var(--sa-primary); display: flex; align-items: center; gap: 8px; }
[data-theme="dark"] .box-title        { border-bottom-color: var(--pink-soft-a18); }
[data-theme="dark"] .box-title .title { color: var(--primary-color); }

/* =============================================================================
   TABLE + DATATABLES
   ============================================================================= */
/* DataTables */
.dataTables_wrapper .dataTables_info { font-size: 13px; color: var(--sa-ct-text); opacity: 0.7; }
.dataTables_wrapper .dataTables_length select { border: 1px solid var(--sa-surface); border-radius: 6px; padding: 4px 10px; font-size: 13px; color: var(--sa-ct-text); background: var(--white-color); }
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after { color: var(--pink-soft); font-size: 11px; }
[data-theme="dark"] .dataTables_wrapper .dataTables_length select { background: var(--sa-sidebar-bg); border-color: var(--sa-header-dd-bd); color: var(--sa-ct-text); }

/* ── Table ────────────────────────────────────────────────────────── */
.table-responsive {
    overflow: hidden;
    animation: sacCardIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
}

/* Row stagger animation triggered via drawCallback */
@keyframes saRowIn {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: translateX(0); }
}
.sa-row-animate {
    animation: saRowIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.table-striped tbody tr:nth-of-type(odd)  { background-color: var(--white-color); }
.table-striped tbody tr:nth-of-type(even) { background-color: var(--pink-a025); }
.table {
    border-color: transparent;
    color: var(--sa-ct-text);
    text-align: left !important;
}
.table.table-bordered { border: none; }
.table.table-bordered td,
.table.table-bordered th { border-left: none; border-right: none; }
.table thead tr {
    background: var(--sa-primary);
}
.table thead th {
    font-size: 16px !important;
    font-weight: 600;
    color: var(--white-color) !important;
    border-top: 0;
    border-bottom: 2px solid var(--glow-sm) !important;
    vertical-align: middle;
    white-space: nowrap;
}
.table tbody tr:hover {
    background: var(--sa-primary-light) !important;
    box-shadow: inset 3px 0 0 var(--sa-primary);
}
.table td {
    font-size: 14px !important;
    border-top: none;
    vertical-align: middle;
}
.table tfoot { background-color: var(--sa-surface); }
.table .btn        { padding: 2px; background: transparent; margin: 0 3px; }
.table .btn img    { width: 16px; }
/* Table thumbnails — click to enlarge (#ImagePreviewModal in the admin layout) */
.image-zoom { cursor: pointer; }
#ImagePreviewModal .modal-body img {
    max-width: 100%;
    max-height: 75vh;
    border-radius: 10px;
}
.table-image {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--adm-dash-stat-bd);
    box-shadow: 0 2px 8px var(--sa-black-004);
    transition: transform 0.2s var(--spring), box-shadow 0.2s ease;
}
.table tbody tr:hover .table-image {
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(var(--core-color), 0.14);
}
[data-theme="dark"] .table-image { border-color: var(--fi-inset); }

/* Dark mode */
[data-theme="dark"] .table-responsive {
    border-color: var(--fi-inset);
    box-shadow: 0 2px 14px var(--sa-sidebar-shadow);
    background-color: var(--sa-sidebar-bg);
}

/* thead — force bg on th cells directly (Bootstrap sets white on th, not tr) */
[data-theme="dark"] .table thead th,
[data-theme="dark"] table.dataTable thead th {
    background-color: var(--feat-bdr) !important;
    color: var(--white-color) !important;
    border-bottom: 2px solid var(--pink-soft-a20) !important;
    border-top: none !important;
}

/* tbody rows — target both :nth-of-type AND DataTables .odd/.even classes */
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
[data-theme="dark"] table.dataTable tbody tr.odd {
    background-color: var(--sa-sidebar-bg) !important;
}
[data-theme="dark"] .table-striped tbody tr:nth-of-type(even),
[data-theme="dark"] table.dataTable tbody tr.even {
    background-color: var(--badge-bg) !important;
}

/* tbody cells — clear Bootstrap's per-cell white background */
[data-theme="dark"] .table tbody td,
[data-theme="dark"] .table tbody th {
    background-color: transparent !important;
    color: var(--sa-ct-text) !important;
    border-bottom: 1px solid var(--inp-bg) !important;
    border-top: none !important;
}

[data-theme="dark"] .table  { border-color: transparent; color: var(--sa-ct-text); background-color: transparent !important; }
[data-theme="dark"] .table tbody tr:hover,
[data-theme="dark"] .table tbody tr:hover td { background-color: var(--feat-ico) !important; }
[data-theme="dark"] .table tbody tr:hover     { box-shadow: inset 3px 0 0 var(--primary-color); }
[data-theme="dark"] .table tfoot              { background-color: var(--sa-sidebar-bg); }
[data-theme="dark"] .table.table-bordered td,
[data-theme="dark"] .table.table-bordered th  { border-color: var(--white-a04) !important; }

/* ── DataTables sorting icons ─────────────────────────────────────── */
/* Hide sort arrows on non-orderable columns (orderable: false) */
table.dataTable > thead .sorting_disabled:before,
table.dataTable > thead .sorting_disabled:after { display: none !important; content: none !important; }

/* Override default side-by-side layout → stack vertically, centered */
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: "▲";
    right: 10px !important;
    bottom: auto !important;
    top: calc(50% - 11px);
    font-size: 12px;
    line-height: 1;
}
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: "▼";
    right: 10px !important;
    bottom: auto !important;
    top: calc(50% + 2px);
    font-size: 12px;
    line-height: 1;
}
/* Active sort direction → primary colour, full opacity */
table.dataTable > thead .sorting_asc:before {
    opacity: 1;
    color: var(--white-color);
}
table.dataTable > thead .sorting_desc:after {
    opacity: 1;
    color: var(--white-color);
}
/* Inactive arrow on active column stays dimmed */
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:before {
    opacity: 0.3;
}
[data-theme="dark"] table.dataTable > thead .sorting_asc:before,
[data-theme="dark"] table.dataTable > thead .sorting_desc:after {
    color: var(--table-sort-dark);
}
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label {
    display: inline-flex;
    align-items: center;
    background: var(--sa-surface);
    border-radius: 8px;
    padding: 6px 18px;
    font-weight: 600;
    color: var(--sa-ct-text);
}
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; }
@media (max-width: 567px) {
    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;
    }
}

[data-theme="dark"] div.dataTables_wrapper div.dataTables_length label,
[data-theme="dark"] div.dataTables_wrapper div.dataTables_filter label {
    background: var(--sa-sidebar-bg);
    color: var(--sa-ct-text);
}

/* =============================================================================
   SWEETALERT2
   ============================================================================= */
.swal2-confirm:focus, .swal2-cancel:focus { box-shadow: none !important; outline: none !important; }
.swal2-popup { border-radius: 16px !important; }
.swal2-confirm { border-radius: 8px !important; }
.swal2-cancel  { border-radius: 8px !important; }

/* =============================================================================
   BTN CANCEL
   ============================================================================= */
.btn-cancel {
    background: linear-gradient(135deg, var(--sa-btn-red) 0%, var(--btn-cancel-to) 100%);
    border-radius: 10px; font-size: 16px; font-weight: 600; color: var(--white-color); border: none; padding: 10px 28px;
    display: inline-flex; align-items: center; gap: 7px; box-shadow: 0 4px 14px rgba(var(--btn-cancel-shadow-rgb), 0.3);
    position: relative; overflow: hidden; text-decoration: none;
}
.btn-cancel::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(110deg, transparent 20%, var(--white-a18) 50%, transparent 80%);
    pointer-events: none;
}
.btn-cancel:hover::after { left: 150%; }
.btn-cancel:hover {
    color: var(--white-color);
    background: linear-gradient(135deg, var(--btn-cancel-hover-from) 0%, var(--btn-cancel-hover-to) 100%);
    box-shadow: 0 8px 22px rgba(var(--btn-cancel-shadow-rgb), 0.4);
    border-color: transparent;
}
.btn-cancel:active { box-shadow: 0 2px 8px rgba(var(--btn-cancel-shadow-rgb), 0.28); }
.btn-cancel:focus,
.btn-cancel:focus-visible {
    outline: none !important;
    box-shadow: 0 4px 14px rgba(var(--btn-cancel-shadow-rgb), 0.3) !important;
    color: var(--white-color) !important;
    background: linear-gradient(135deg, var(--sa-btn-red) 0%, var(--btn-cancel-to) 100%) !important;
}
[data-theme="dark"] .btn-cancel {
    background: linear-gradient(135deg, var(--btn-cancel-from) 0%, var(--btn-cancel-to) 100%);
    box-shadow: 0 4px 14px rgba(var(--btn-cancel-shadow-rgb), 0.35);
}
[data-theme="dark"] .btn-cancel:hover {
    background: linear-gradient(135deg, var(--palette-red) 0%, var(--btn-cancel-hover-to) 100%);
    box-shadow: 0 8px 22px rgba(var(--btn-cancel-shadow-rgb), 0.45);
    color: var(--white-color);
}

/* =============================================================================
   EDIT / DELETE BUTTONS
   ============================================================================= */
.edit-delete-btn {
    border-radius   : 5px;
    padding         : 5px;
    cursor          : pointer;
    outline         : none;
    color           : var(--primary-color);
    background      : rgba(var(--core-color),0.09);
    border          : 1px solid var(--primary-color);
}
.edit-delete-btn:hover {
    color:        var(--white-color) !important;
    border-color: var(--primary-color);
    background:   var(--primary-color);
}
.edit-delete-btn:focus { outline: none; box-shadow: none; }

/* =============================================================================
   SHARED LIST ROW (sc-*) — used by Section, Video, and similar list-style modules
   ============================================================================= */
.sc-list-wrap { padding: 0; overflow: hidden; }
.sc-list-header { display: flex; align-items: center; gap: 10px; padding: 16px 22px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sa-primary); background: var(--sa-primary-light); border-bottom: 1px solid var(--sa-black-008); }
.sc-item-group + .sc-item-group { border-top: 1px solid var(--sa-black-008); }
.sc-item { display: flex; align-items: center; gap: 16px; padding: 10px 22px; transition: background 150ms ease; }
.sc-item:hover { background: var(--sa-primary-light); }
.sc-item-num { flex-shrink: 0; width: 22px; text-align: center; font-size: 13px; font-weight: 600; color: var(--sc-item-num-cl); }
.sc-item-thumb { flex-shrink: 0; width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid var(--sa-black-008); }
.sc-item-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-item-title { display: block; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-item-sub { display: block; font-size: 12.5px; color: var(--sc-item-num-cl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-badge { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 4px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; color: var(--sa-primary); background: var(--sa-primary-light); border: 1px solid rgba(var(--core-color), 0.18); flex-shrink: 0; }
.sc-item-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: auto; }
.sc-status-block { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sc-status-label { font-size: 11px; font-weight: 700; }
.sc-status-label.text-on  { color: var(--sa-btn-green); }
.sc-status-label.text-off { color: var(--sa-btn-red); }
[data-theme="dark"] .sc-list-header { background: var(--feat-bdr); color: var(--primary-color); border-bottom-color: var(--fi-inset); }
[data-theme="dark"] .sc-item-group + .sc-item-group { border-top-color: var(--fi-inset); }
[data-theme="dark"] .sc-item:hover { background: var(--feat-bg); }
[data-theme="dark"] .sc-item-num, [data-theme="dark"] .sc-item-sub { color: var(--sc-item-num-cl); }
[data-theme="dark"] .sc-item-thumb { border-color: var(--fi-inset); }
@media (max-width: 767px) {
    .sc-item { flex-wrap: wrap; }
    .sc-item-main { flex-basis: 100%; order: -1; }
    .sc-item-actions { margin-left: 0; }
}

/* =============================================================================
   CART / EARNING / CATEGORY
   ============================================================================= */
.import-file { border: 2px dashed rgba(var(--core-color), 0.28); border-radius: 12px; padding: 28px; text-align: center; cursor: pointer; transition: border-color 200ms ease, background 200ms ease; }
.import-file:hover { border-color: var(--sa-primary); background: var(--sa-primary-light); }
[data-theme="dark"] .import-file { border-color: var(--pink-soft-a25); }
[data-theme="dark"] .import-file:hover { border-color: var(--sa-header-icon); background: var(--sa-sidebar-hover-bg); }

/* =============================================================================
   CUSTOM CARD (earnings / icons)
   ============================================================================= */
[data-theme="dark"] .bg-white { background-color: var(--sa-header-bg) !important; }

/* =============================================================================
   COLORPICKER
   ============================================================================= */
.colorpicker-component {
    display: flex;
    border: 1px solid var(--sa-surface);
    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;
    background: transparent;
    color: var(--sa-ct-text);
}
[data-theme="dark"] .colorpicker-component { border-color: var(--sa-sidebar-active-bg); background: var(--sa-sidebar-bg); }
[data-theme="dark"] .hexcolor              { color: var(--sa-ct-text); }

/* =============================================================================
   SUMMARY TABLE CARD
   ============================================================================= */

/* =============================================================================
   INLINE TABS / APP RIGHT BTN
   ============================================================================= */
.inline-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.inline-tabs .nav-link { border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--sa-ct-text); padding: 7px 16px; background: var(--sa-surface); border: none; transition: background 150ms ease, color 150ms ease; }
.inline-tabs .nav-link.active,
.inline-tabs .nav-link:hover { background: var(--sa-primary) !important; color: var(--white-color) !important; }
[data-theme="dark"] .inline-tabs .nav-link { background: var(--sa-sidebar-bg); color: var(--sa-ct-text); }
[data-theme="dark"] .inline-tabs .nav-link.active,
[data-theme="dark"] .inline-tabs .nav-link:hover { background: var(--sa-primary) !important; color: var(--white-color) !important; }

/* =============================================================================
   AVATAR UPLOAD
   ============================================================================= */
.avatar-upload { position: relative; max-width: 205px; }
.avatar-upload .avatar-preview {
    width: 150px;
    height: 150px;
    position: relative;
    border-radius: 10%;
}
.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); }

[data-theme="dark"] input[type="time"] {
    color-scheme: dark;
}
[data-theme="dark"] input[type="date"] {
    color-scheme: dark;
}
/* Calendar / clock icon: always white in dark mode (brightness(0) makes it black first, invert turns it white) */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) invert(1);
    opacity: .9;
    cursor: pointer;
}

/* =============================================================================
   ARTIST
   ============================================================================= */

/* ── Avatar control ───────────────────────────────────────────────────── */
.rotate { transform: rotate(180deg); }

/* =============================================================================
   TRANSACTION EARNING STATS (txn-stat-*)
   ============================================================================= */

/* =============================================================================
   MODAL CLOSE
   ============================================================================= */
.modal .close { font-size: 22px; color: var(--sa-ct-text); opacity: 0.55; transition: opacity 150ms ease; outline: none; }
.modal .close:hover { opacity: 1; }
[data-theme="dark"] .modal .close { color: var(--sa-ct-text); }
[data-theme="dark"] .modal-content  { background: var(--sa-header-bg); border-color: var(--sa-header-dd-bd); }
[data-theme="dark"] .modal-header   { border-bottom-color: var(--sa-header-dd-bd); }
[data-theme="dark"] .modal-footer   { border-top-color: var(--sa-header-dd-bd); }

/* =============================================================================
   RADIO GROUP
   ============================================================================= */
.radio-group { display: flex; flex-wrap: wrap; row-gap: 8px; margin-bottom: 20px; }
.radio-group .custom-control { padding-left: 0; margin-right: 15px; }
.radio-group .custom-control-label {
    margin-bottom: 0;
    background: var(--sa-surface);
    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(--sa-ct-text); }
.radio-group .custom-control-input:checked ~ .custom-control-label {
    background: var(--sa-primary);
    color: var(--white-color);
}
.radio-group .custom-control-input:checked ~ .custom-control-label::before {
    background: var(--sa-primary);
    border-color: var(--white-color);
}
[data-theme="dark"] .radio-group .custom-control-label              { background: var(--sa-sidebar-bg); }
[data-theme="dark"] .radio-group .custom-control-input:checked ~ .custom-control-label { background: var(--sa-sidebar-active-bg); }
[data-theme="dark"] .radio-group .custom-control-input:checked ~ .custom-control-label::before { background: var(--sa-sidebar-active-bg); border-color: var(--sa-sidebar-active-fg); }
.page-title-sm   { display: none; }
@media (max-width: 991px) {
    .right-content .page-title {
        display: none;
    }
    .page-title-sm {
        font-size: 22px;
        font-weight: 600;
        margin: -10px 0 20px;
        display: block;
        border-bottom: 1px solid var(--sa-surface);
        padding-bottom: 5px;
        animation: mkFadeLeftRight .4s var(--ease-o) .05s both;
    }
}
@media (max-width: 575px) { .page-title-sm { font-size: 15px; } }

/* =============================================================================
   COUNT CARDS (sa-cnt-*)
   ============================================================================= */
@keyframes saCntIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* =============================================================================
   STATUS TOGGLE
   ============================================================================= */
.status-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    margin: 0;
    vertical-align: middle;
}
.status-toggle-track {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--sa-btn-red);
    -webkit-transition: background 0.3s ease;
    transition: background 0.3s ease;
    flex-shrink: 0;
}
.status-toggle.status-on .status-toggle-track {
    background: var(--sa-btn-green);
}
.status-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--white-color);
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
}
.status-toggle.status-on .status-toggle-thumb {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
}

/* Pill switch for list pages: <label class="status-toggle status-pill"> holding the track + <small> label */
.status-pill {
    align-self: flex-start; /* do not stretch inside the flex-column cell */
    margin: 0;
    --pill-rgb: 227, 0, 11;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border: 1px solid rgba(var(--pill-rgb), .22);
    border-radius: 100px;
    background: rgba(var(--pill-rgb), .08);
    color: rgb(var(--pill-rgb));
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.status-pill ~ .approval-badge { align-self: flex-start; } /* approval badge under the pill keeps its own width */
.status-pill.status-on { --pill-rgb: 5, 143, 0; }
.status-pill:hover { background: rgba(var(--pill-rgb), .14); box-shadow: 0 4px 12px -6px rgba(var(--pill-rgb), .6); }
.status-pill:focus { outline: none; }
.status-pill:focus-visible { box-shadow: 0 0 0 3px rgba(var(--pill-rgb), .25); }
.status-pill small { color: inherit !important; font-size: 12px; font-weight: 700; line-height: 1; }
.status-pill .status-toggle-track { width: 36px; height: 20px; }
.status-pill .status-toggle-thumb { top: 3px; left: 3px; width: 14px; height: 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.status-pill.status-on .status-toggle-thumb { transform: translateX(16px); }
[data-theme="dark"] .status-pill { --pill-rgb: 248, 113, 113; }
[data-theme="dark"] .status-pill.status-on { --pill-rgb: 74, 222, 128; }

/* =============================================================================
   DASHBOARD STATS STRIP (adm-dash-strip)
   ============================================================================= */

/* =============================================================================
   MODAL FOOTER / SORTABLE BOX
   ============================================================================= */
.modal-footer  { display: flex; align-items: center; justify-content: center; background: var(--white-color); border-top: 1px solid var(--sa-black-008); border-radius: 0 0 16px 16px; }
.sortablebox {
    cursor: s-resize;
    background-color: var(--pink-soft);
    font-size: 16px;
    border: 1px solid var(--sa-primary);
    margin-bottom: 10px;
}
[data-theme="dark"] .modal-footer  { background: var(--sa-header-bg); border-top-color: var(--sa-header-dd-bd); }
[data-theme="dark"] .sortablebox   { background-color: var(--sa-header-bg); border-color: var(--pink-soft-a30); }

/* Sort order list (drag rows): handle, position, thumbnail, name, colour dot */
.sort-hint { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; color: var(--text-2); }
.sort-hint i { color: var(--primary-color); }
.sort-list { max-height: 60vh; overflow-y: auto; padding: 2px 4px 2px 2px; }
.sortablebox.sort-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 8px 14px 8px 10px;
    border: 1px solid var(--adm-dash-stat-bd);
    border-radius: 12px;
    background: var(--white-color);
    cursor: grab;
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.sortablebox.sort-item:hover { border-color: rgba(var(--core-color), .35); box-shadow: 0 4px 14px -8px rgba(var(--core-color), .45); }
.sortablebox.sort-item.ui-sortable-helper { cursor: grabbing; border-color: var(--primary-color); box-shadow: 0 12px 28px -10px rgba(var(--core-color), .55); }
.sort-handle { color: var(--text-3); font-size: 14px; flex: none; }
.sort-item:hover .sort-handle { color: var(--primary-color); }
.sort-pos {
    flex: none;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(var(--core-color), .10);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
}
.sort-thumb { flex: none; width: 40px; height: 40px; object-fit: cover; border-radius: 8px; border: 1px solid var(--adm-dash-stat-bd); }
.sort-name { flex: 1; min-width: 0; font-weight: 600; color: var(--sa-ct-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sort-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(128, 128, 140, .35); }
.sort-placeholder { height: 58px; margin-bottom: 8px; border: 2px dashed rgba(var(--core-color), .45); border-radius: 12px; background: rgba(var(--core-color), .05); visibility: visible !important; }
.sort-empty { margin: 0; padding: 24px 0; text-align: center; color: var(--text-2); }
[data-theme="dark"] .sortablebox.sort-item { background: var(--sa-header-bg); border-color: var(--fi-inset); }
[data-theme="dark"] .sort-thumb { border-color: var(--fi-inset); }

/* =============================================================================
   ADMIN PROFILE PAGE  (pro-*)
   ============================================================================= */

/* ── Keyframes ─────────────────────────────────────── */
@keyframes proCardIn {
    from { opacity: 0; transform: translateY(22px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes avPop {
    from { opacity: 0; transform: scale(0.6) translateY(20px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* ── Header card ───────────────────────────────────── */
.pro-hdr-card {
    border-radius: 20px; overflow: hidden; margin-bottom: 20px;
    background: var(--white-color);
    border: 1px solid var(--adm-dash-stat-bd);
    box-shadow: 0 4px 24px rgba(var(--core-color), 0.08);
    animation: proCardIn 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
[data-theme="dark"] .pro-hdr-card {
    background: var(--adm-dash-card-bg);
    border-color: rgba(var(--core-color), 0.12);
    box-shadow: 0 4px 24px var(--black-a32);
}

/* ── Banner ────────────────────────────────────────── */
.pro-banner {
    height: 100px;
    background: linear-gradient(135deg, var(--sa-primary) 0%, var(--pink-deep) 60%, var(--banner-accent) 100%);
    position: relative; overflow: hidden;
}
.pro-banner::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle, var(--white-a30) 2px, transparent 2px);
    background-size: 33px 33px;
    opacity: 0.6;
}

/* ── Avatar section ────────────────────────────────── */
.pro-av-section {
    display: flex; align-items: flex-end; gap: 22px;
    padding: 0 28px; margin-top: -52px; position: relative; z-index: 1;
}
.pro-av-ring {
    width: 104px; height: 104px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--sa-primary), var(--pink-deep));
    padding: 3px;
    box-shadow: 0 6px 24px rgba(var(--core-color), 0.36);
    animation: avPop 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
}
.pro-av-inner {
    width: 100%; height: 100%; border-radius: 50%;
    background: var(--white-color);
    display: flex; align-items: center; justify-content: center;
}
[data-theme="dark"] .pro-av-inner { background: var(--adm-dash-card-bg); }
.pro-av-initial {
    font-size: 38px; font-weight: 900; line-height: 1;
    background: linear-gradient(135deg, var(--sa-primary), var(--pink-deep));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.pro-av-actions {
    padding-bottom: 0; flex: 1; /* name + badge sit below the banner edge */
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
}
.pro-av-name-wrap { display: flex; flex-direction: column; gap: 5px; }
.pro-av-name      { font-size: 22px; font-weight: 800; color: var(--sa-ct-text); line-height: 1.1; }

/* ── Header body (meta row) ────────────────────────── */
.pro-hdr-body   { padding: 14px 28px 24px; }
.pro-meta-row   { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 4px; }
.pro-meta-item  {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 500; color: var(--sa-ct-text); opacity: 0.72;
}
.pro-meta-ico {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    background: rgba(var(--core-color), 0.08);
    color: var(--sa-primary);
    display: flex; align-items: center; justify-content: center; font-size: 12px;
}
[data-theme="dark"] .pro-meta-ico { color: var(--sa-header-icon); }

/* ── Role badge ────────────────────────────────────── */
.pro-role-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px; border-radius: 20px;
    background: rgba(var(--core-color), 0.09);
    border: 1px solid rgba(var(--core-color), 0.22);
    color: var(--sa-primary);
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
[data-theme="dark"] .pro-role-badge { color: var(--sa-header-icon); }

/* ── Form cards ────────────────────────────────────── */
.pro-form-card {
    background: var(--white-color); border-radius: 18px;
    border: 1px solid var(--adm-dash-stat-bd);
    box-shadow: 0 2px 16px var(--black-a05);
    overflow: hidden;
    animation: proCardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.14s both;
}
[data-theme="dark"] .pro-form-card {
    background: var(--adm-dash-card-bg);
    border-color: rgba(var(--core-color), 0.10);
    box-shadow: 0 2px 16px var(--black-a32);
}
.pro-form-head {
    padding: 12px 18px; display: flex; align-items: center; gap: 12px;
    border-bottom: 1px solid var(--adm-dash-stat-bd);
    background: rgba(var(--core-color), 0.03);
}
[data-theme="dark"] .pro-form-head { border-bottom-color: var(--fi-inset); }
.pro-form-head-ico {
    width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 17px;
    background: rgba(var(--core-color), 0.10);
    color: var(--sa-primary);
}
[data-theme="dark"] .pro-form-head-ico { color: var(--sa-header-icon); }
.pro-form-head-text .form-head-title { font-size: 15px; font-weight: 700; color: var(--sa-ct-text); }
.pro-form-body { padding: 24px; }
/* Equal-height cards keep their Update button on the bottom edge */
.pro-form-card.h-100             { display: flex; flex-direction: column; }
.pro-form-card.h-100 > form      { flex: 1; display: flex; flex-direction: column; }
.pro-form-card.h-100 .pro-form-body { flex: 1; }
.pro-form-foot {
    padding: 14px 24px; display: flex; justify-content: flex-end;
    border-top: 1px solid var(--adm-dash-stat-bd);
}
[data-theme="dark"] .pro-form-foot { border-top-color: var(--fi-inset); }

/* ── Form fields ───────────────────────────────────── */
.pro-field              { margin-bottom: 18px; }
.pro-field:last-of-type { margin-bottom: 0; }
.pro-field label {
    font-size: 13px; font-weight: 600; color: var(--sa-ct-text);
    margin-bottom: 7px; display: flex; align-items: center; gap: 1px;
}
.pro-field label .req { color: var(--sa-primary); font-size: 15px; line-height: 1; }
.pro-input-wrap { position: relative; }
.pro-input-ico {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--sa-primary); font-size: 14px; pointer-events: none; z-index: 1;
}
[data-theme="dark"] .pro-input-ico { color: var(--sa-header-icon); }
.pro-inp {
    width: 100%; padding: 11px 16px 11px 42px;
    border: 1.5px solid var(--black-a10); border-radius: 10px;
    font-family: 'Rubik', sans-serif; font-size: 14px;
    color: var(--sa-ct-text); background: var(--white-color);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    outline: none;
}
.pro-inp:focus {
    border-color: var(--sa-primary);
    box-shadow: 0 0 0 3px rgba(var(--core-color), 0.10);
}
.pro-inp::placeholder { color: var(--black-a30); }
[data-theme="dark"] .pro-inp {
    background: var(--white-a04);
    border-color: var(--white-a10);
    color: var(--sa-ct-text);
}
[data-theme="dark"] .pro-inp:focus { border-color: var(--sa-header-icon); }
[data-theme="dark"] .pro-inp::placeholder { color: var(--white-a25); }
.pro-inp-pw { padding-right: 44px; }

/* Creator profile: cover image in the banner, photo in the avatar ring, fields in a grid, textarea icon on top */
.pro-banner.has-cover { height: 160px; background-size: cover; background-position: center; }
.pro-banner.has-cover::before { display: none; }
.pro-av-inner img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pro-form-body .form-row > [class*="col"] > .pro-field { margin-bottom: 18px; }
.pro-input-wrap.is-area .pro-input-ico { top: 22px; }
textarea.pro-inp { resize: vertical; min-height: 96px; }
.pro-upload-row { display: flex; gap: 22px; flex-wrap: wrap; }
.pro-upload-row .avatar-upload { margin: 0; }

/* ── Password eye toggle ───────────────────────────── */
.pro-eye {
    position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 4px;
    color: var(--sa-primary); font-size: 14px; z-index: 2;
    transition: color 0.15s ease; outline: none !important;
}
.pro-eye:hover           { color: var(--pink-deep); }
[data-theme="dark"] .pro-eye       { color: var(--sa-header-icon); }
[data-theme="dark"] .pro-eye:hover { color: var(--sa-primary); }

/* ── Password strength meter (data-level 0-4) ──────── */

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 991px) {
    .pro-av-section { padding: 0 18px; margin-top: -44px; gap: 14px; }
    .pro-av-ring    { width: 88px; height: 88px; }
    .pro-av-initial { font-size: 30px; }
    .pro-av-name    { font-size: 18px; }
    .pro-hdr-body   { padding: 12px 18px 20px; }
}
@media (max-width: 575px) {
    .pro-av-section { flex-direction: column; align-items: flex-start; margin-top: -40px; }
    .pro-av-actions { width: 100%; flex-direction: column; align-items: flex-start; padding-bottom: 0; }
}

/* ══════════════════════════════════════════════════════════
   ADMIN DASHBOARD PAGE (db-*)
   ══════════════════════════════════════════════════════════ */

/* ── WELCOME BANNER ──────────────────────────────────────── */
.db-welcome {
    border-radius: 20px; padding: 28px 32px;
    background: linear-gradient(135deg, var(--sa-primary) 0%, var(--pink-deep) 55%, var(--banner-accent) 100%);
    color: var(--white-color); position: relative; overflow: hidden; margin-bottom: 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    box-shadow: 0 8px 32px rgba(var(--core-color), 0.32);
    animation: dbFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) both;
}
.db-welcome::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 50%, var(--white-a10) 0%, transparent 60%);
}
.db-welcome-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.db-welcome-orb-1 { width: 300px; height: 300px; top: -120px; right: -60px; background: var(--white-a07); }
.db-welcome-orb-2 { width: 180px; height: 180px; bottom: -70px; left: 30%; background: var(--white-a05); }
.db-wel-left       { position: relative; z-index: 1; }
.db-wel-greeting   { font-size: 13px; font-weight: 600; opacity: 0.80; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.db-wel-title      { font-size: clamp(20px, 3vw, 28px); font-weight: 900; line-height: 1.15; margin-bottom: 6px; }
.db-wel-sub        { font-size: 14px; opacity: 0.75; font-weight: 400; }

/* ── STAT GRID ───────────────────────────────────────────── */
.db-stat-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 16px; margin-bottom: 24px;
}
.db-stat-card {
    border-radius: 16px; padding: 20px 20px 16px;
    background: var(--white-color); border: 1px solid var(--adm-dash-stat-bd);
    box-shadow: 0 2px 12px var(--black-a05);
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 12px;
    transition: transform 0.2s var(--spring), box-shadow 0.2s ease;
    animation: dbFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
.db-stat-card:hover { transform: translateY(-4px); }
[data-theme="dark"] .db-stat-card { background: var(--adm-dash-card-bg); border-color: var(--fi-inset); box-shadow: 0 2px 12px var(--black-a28); }
.db-stat-card::after {
    content: ''; position: absolute; top: -20px; right: -20px;
    width: 80px; height: 80px; border-radius: 50%; opacity: 0.08;
    background: var(--db-card-color, var(--sa-primary));
}
.db-stat-top  { display: flex; align-items: flex-start; justify-content: space-between; }
.db-stat-ico  {
    width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    background: rgba(var(--db-card-rgb, 224, 30, 117), 0.10);
    color: var(--db-card-color, var(--sa-primary));
    transition: background 0.18s ease, transform 0.18s ease;
}
.db-stat-card:hover .db-stat-ico { background: var(--db-card-color, var(--sa-primary)); color: var(--white-color); transform: scale(1.08) rotate(-5deg); }
.db-stat-num  { font-size: 28px; font-weight: 900; line-height: 1; color: var(--sa-ct-text); }
.db-stat-lbl  { font-size: 12px; font-weight: 600; color: var(--sa-ct-text); opacity: 0.52; text-transform: uppercase; letter-spacing: 0.05em; }

/* Stat card colour variants */
.db-stat--pink    { --db-card-color: var(--pink); --db-card-rgb: 224,30,117; }
.db-stat--pink:hover    { box-shadow: 0 8px 28px var(--ver-bdr); }
.db-stat--purple  { --db-card-color: var(--palette-purple); --db-card-rgb: 139,92,246; }
.db-stat--purple:hover  { box-shadow: 0 8px 28px rgba(var(--db-card-rgb), 0.18); }
.db-stat--emerald { --db-card-color: var(--palette-emerald); --db-card-rgb: 16,185,129; }
.db-stat--emerald:hover { box-shadow: 0 8px 28px rgba(var(--db-card-rgb), 0.18); }
.db-stat--amber   { --db-card-color: var(--palette-amber); --db-card-rgb: 245,158,11; }
.db-stat--amber:hover   { box-shadow: 0 8px 28px rgba(var(--db-card-rgb), 0.18); }
.db-stat--rose    { --db-card-color: var(--palette-rose); --db-card-rgb: 244,63,94; }
.db-stat--rose:hover    { box-shadow: 0 8px 28px rgba(var(--db-card-rgb), 0.18); }
.db-stat--indigo  { --db-card-color: var(--palette-indigo); --db-card-rgb: 99,102,241; }
.db-stat--indigo:hover  { box-shadow: 0 8px 28px rgba(var(--db-card-rgb), 0.18); }
.db-stat--orange  { --db-card-color: var(--palette-orange); --db-card-rgb: 249,115,22; }
.db-stat--orange:hover  { box-shadow: 0 8px 28px rgba(var(--db-card-rgb), 0.18); }
.db-stat--teal    { --db-card-color: var(--palette-teal); --db-card-rgb: 20,184,166; }
.db-stat--teal:hover    { box-shadow: 0 8px 28px rgba(var(--db-card-rgb), 0.18); }
.db-stat--cyan    { --db-card-color: var(--palette-cyan); --db-card-rgb: 6,182,212; }
.db-stat--cyan:hover    { box-shadow: 0 8px 28px rgba(var(--db-card-rgb), 0.18); }
.db-stat--violet  { --db-card-color: var(--palette-violet); --db-card-rgb: 124,58,237; }
.db-stat--violet:hover  { box-shadow: 0 8px 28px rgba(var(--db-card-rgb), 0.18); }
.db-stat--green   { --db-card-color: var(--palette-green); --db-card-rgb: 34,197,94; }
.db-stat--green:hover   { box-shadow: 0 8px 28px rgba(var(--db-card-rgb), 0.18); }
.db-stat--red     { --db-card-color: var(--palette-red); --db-card-rgb: 239,68,68; }
.db-stat--red:hover     { box-shadow: 0 8px 28px rgba(var(--db-card-rgb), 0.18); }

/* ── SECTION CARD ────────────────────────────────────────── */
.db-section {
    background: var(--white-color); border-radius: 18px;
    border: 1px solid var(--adm-dash-stat-bd); box-shadow: 0 2px 14px var(--black-a05);
    overflow: hidden; animation: dbFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}
[data-theme="dark"] .db-section { background: var(--adm-dash-card-bg); border-color: var(--fi-inset); box-shadow: 0 2px 14px var(--black-a28); }
.db-section-head {
    padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    border-bottom: 1px solid var(--adm-dash-stat-bd); background: rgba(var(--core-color), 0.03);
}
[data-theme="dark"] .db-section-head { border-bottom-color: var(--fi-inset); }
.db-section-title     { font-size: 15px; font-weight: 700; color: var(--sa-ct-text); display: flex; align-items: center; gap: 8px; }
.db-section-title i   { color: var(--sa-primary); }
[data-theme="dark"] .db-section-title i { color: var(--sa-header-icon); }
.db-section-link      { font-size: 12px; font-weight: 700; color: var(--sa-primary); text-decoration: none; display: flex; align-items: center; gap: 4px; transition: opacity 0.15s ease; }
.db-section-link:hover { opacity: 0.72; color: var(--sa-primary); }
[data-theme="dark"] .db-section-link { color: var(--sa-header-icon); }
.db-section-body      { padding: 20px 22px; }

/* ── CHART TOGGLE BUTTONS ────────────────────────────────── */

/* ── CONTENT TABS ────────────────────────────────────────── */
.db-tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    padding: 14px 22px 0; border-bottom: 1px solid var(--adm-dash-stat-bd);
}
[data-theme="dark"] .db-tabs { border-bottom-color: var(--fi-inset); }
.db-tab-btn {
    padding: 8px 16px; border-radius: 8px 8px 0 0; font-size: 13px; font-weight: 600;
    color: var(--sa-ct-text); opacity: 0.55; cursor: pointer; border: none; background: none;
    border-bottom: 3px solid transparent; margin-bottom: -1px;
    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease; outline: none !important;
}
.db-tab-btn:hover  { opacity: 0.85; }
.db-tab-btn.active { color: var(--sa-primary); opacity: 1; border-bottom-color: var(--sa-primary); }
[data-theme="dark"] .db-tab-btn.active { color: var(--sa-header-icon); border-bottom-color: var(--sa-header-icon); }

/* ── RANKED CONTENT LIST ─────────────────────────────────── */
.db-content-list  { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; }
.db-content-item  { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; transition: background 0.15s ease; }
.db-content-item:hover { background: rgba(var(--core-color), 0.05); }
.db-content-rank  {
    width: 24px; height: 24px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; background: var(--adm-dash-stat-bd); color: var(--sa-ct-text); opacity: 0.55;
}
.db-content-rank.top-1 { background: linear-gradient(135deg, var(--rank-gold-1), var(--rank-gold-2)); color: var(--white-color); opacity: 1; box-shadow: 0 2px 8px var(--rank-glow-35); }
.db-content-rank.top-2 { background: linear-gradient(135deg, var(--rank-silver-1), var(--rank-silver-2)); color: var(--white-color); opacity: 1; }
.db-content-rank.top-3 { background: linear-gradient(135deg, var(--rank-bronze-1), var(--rank-bronze-2)); color: var(--white-color); opacity: 1; }
[data-theme="dark"] .db-content-rank { background: var(--white-a10); }
.db-content-thumb {
    width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
    background: rgba(var(--core-color), 0.08);
}
.db-content-info  { flex: 1; min-width: 0; }
.db-content-title { font-size: 13px; font-weight: 600; color: var(--sa-ct-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-content-stat  { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--sa-primary); flex-shrink: 0; }
[data-theme="dark"] .db-content-stat { color: var(--sa-header-icon); }

/* ── CHANNEL LIST ────────────────────────────────────────── */
.db-channel-list { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; }
.db-channel-item { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 10px; transition: background 0.15s ease; }
.db-channel-item:hover { background: rgba(var(--core-color), 0.05); }
.db-channel-rank {
    width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
    font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;
    background: var(--black-a07); color: var(--sa-ct-text); opacity: 0.55;
}
.db-channel-rank.top-1 { background: linear-gradient(135deg, var(--rank-gold-1), var(--rank-gold-2)); color: var(--white-color); opacity: 1; box-shadow: 0 2px 6px var(--rank-glow-30); }
.db-channel-rank.top-2 { background: linear-gradient(135deg, var(--rank-silver-1), var(--rank-silver-2)); color: var(--white-color); opacity: 1; }
.db-channel-rank.top-3 { background: linear-gradient(135deg, var(--rank-bronze-1), var(--rank-bronze-2)); color: var(--white-color); opacity: 1; }
[data-theme="dark"] .db-channel-rank { background: var(--white-a10); }
.db-channel-avatar {
    width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 2px solid rgba(var(--core-color), 0.20); background: rgba(var(--core-color), 0.08);
}
.db-channel-info { flex: 1; min-width: 0; }
.db-channel-name { font-size: 13px; font-weight: 600; color: var(--sa-ct-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── CATEGORY GRID ───────────────────────────────────────── */
.db-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 4px 0; }
.db-cat-item { position: relative; border-radius: 10px; overflow: hidden; cursor: pointer; aspect-ratio: 1; }
.db-cat-item:hover .db-cat-img { transform: scale(1.08); }
.db-cat-img  { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; display: block; }
.db-cat-label {
    position: absolute; inset: 0; display: flex; align-items: flex-end;
    background: linear-gradient(0deg, var(--black-a62) 0%, transparent 55%);
    padding: 6px 8px; font-size: 11px; font-weight: 700; color: var(--white-color); line-height: 1.2;
}

/* ── HASHTAG LIST ────────────────────────────────────────── */
.db-hashtag-list { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.db-hashtag-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-radius: 10px;
    background: rgba(var(--core-color), 0.04); border: 1px solid rgba(var(--core-color), 0.08);
    transition: background 0.15s ease, transform 0.15s ease;
}
.db-hashtag-item:hover { background: rgba(var(--core-color), 0.09); transform: translateX(3px); }
.db-hashtag-tag { font-size: 14px; font-weight: 700; color: var(--sa-primary); }
[data-theme="dark"] .db-hashtag-tag { color: var(--sa-header-icon); }
.db-hashtag-cnt {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(var(--core-color), 0.10); color: var(--sa-primary);
    border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 700;
}
[data-theme="dark"] .db-hashtag-cnt { background: rgba(var(--core-color), 0.18); color: var(--sa-header-icon); }

/* ── EMPTY STATE ─────────────────────────────────────────── */
.db-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; color: var(--sa-ct-text); opacity: 0.40; font-size: 13px; font-weight: 500; }
.db-empty i { font-size: 28px; width: auto; line-height: 1; } /* Font Awesome 7 icons have a fixed width: centered by the flex column */

/* ── ANIMATION ───────────────────────────────────────────── */
@keyframes dbFadeUp {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1200px) { .db-stat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px)  { .db-stat-grid { grid-template-columns: repeat(2, 1fr); } .db-welcome { padding: 22px 20px; } .db-cat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 575px)  { .db-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .db-stat-num { font-size: 22px; }.db-cat-grid { grid-template-columns: repeat(3, 1fr); } }

/* ══════════════════════════════════════════════════════════
   DASHBOARD — PERIOD FILTER, KPI, CHARTS (one page, data over ajax)
   ══════════════════════════════════════════════════════════ */

/* ── HERO + FILTER ───────────────────────────────────────── */
.db-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.db-filter { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; max-width: 100%; }
.db-range {
    display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px;
    background: var(--white-a10); border: 1px solid var(--white-a18); backdrop-filter: blur(6px);
}
.db-range-btn {
    border: none; background: transparent; color: var(--white-color); opacity: 0.85;
    padding: 7px 13px; border-radius: 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease; outline: none !important;
}
.db-range-btn:hover { background: var(--white-a10); opacity: 1; }
.db-range-btn.active { background: var(--white-color); color: var(--sa-primary); opacity: 1; box-shadow: 0 4px 14px var(--black-a10, rgba(0,0,0,.10)); }
.db-custom { display: none; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.db-custom.show { display: flex; animation: dbFadeUp 0.3s ease both; }
.db-custom span { opacity: 0.8; font-weight: 700; }
.db-custom .form-control {
    width: 150px; height: 36px; border-radius: 10px; font-size: 13px; font-weight: 600;
    background: var(--white-a18); border: 1px solid var(--white-a35); color: var(--white-color); color-scheme: dark;
}
.db-custom .form-control:focus { background: var(--white-a28); color: var(--white-color); box-shadow: none; }
.db-apply {
    height: 36px; padding: 0 16px; border-radius: 10px; border: none; cursor: pointer; font-size: 13px; font-weight: 700;
    background: var(--white-color); color: var(--sa-primary); outline: none !important; transition: transform 0.18s ease;
}
.db-apply:hover { transform: translateY(-2px); }

/* ── GROUP LABEL ─────────────────────────────────────────── */
.db-group       { margin-bottom: 8px; }
.db-group-label { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.db-group-text  { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--sa-primary); white-space: nowrap; }
[data-theme="dark"] .db-group-text { color: var(--sa-header-icon); }
.db-group-line  { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--core-color),0.30) 0%, transparent 100%); }

/* ── KPI CARDS ───────────────────────────────────────────── */
a.db-stat-card, a.db-stat-card:hover { text-decoration: none; color: inherit; }
.db-stat-sub { font-size: 12px; font-weight: 700; color: var(--db-card-color, var(--sa-primary)); margin-top: -6px; }
.db-kpi { gap: 8px; padding-bottom: 12px; }
.db-kpi .db-stat-lbl { margin-bottom: 4px; }
.db-kpi .db-stat-num { font-size: 26px; }
.db-kpi-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.db-delta {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 20px;
    font-size: 11.5px; font-weight: 800; background: rgba(150,150,170,0.14); color: var(--sa-ct-text);
}
.db-delta.up   { background: rgba(16,185,129,0.13); color: #059669; }
.db-delta.down { background: rgba(239,68,68,0.13); color: #DC2626; }
.db-delta.flat { opacity: 0.6; }
[data-theme="dark"] .db-delta.up   { color: #34D399; }
[data-theme="dark"] .db-delta.down { color: #F87171; }
.db-kpi-prev { font-size: 11.5px; font-weight: 600; color: var(--sa-ct-text); opacity: 0.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-spark { margin: 0 -20px -12px; height: 46px; }
.db-kpi:not(:has(.db-spark)) { padding-bottom: 16px; }

/* ── CHARTS / LISTS ──────────────────────────────────────── */
.db-chart { min-height: 300px; }
.db-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.db-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sa-ct-text); opacity: 0.85; }
.db-legend-item i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.db-legend-item b { font-weight: 800; opacity: 1; }
.db-badge-all {
    font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 20px; display: none;
    background: rgba(var(--core-color), 0.10); color: var(--sa-primary); text-transform: none;
}
.db-tabs .db-tab-btn i { margin-right: 4px; font-size: 12px; }
.db-content-by { font-size: 11px; font-weight: 600; color: var(--sa-ct-text); opacity: 0.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-content-like i { color: #EF4444; }
.db-channel-full { font-size: 11px; color: var(--sa-ct-text); opacity: 0.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-cat-label { flex-direction: column; align-items: flex-start; justify-content: flex-end; }
.db-cat-count { font-size: 10px; font-weight: 600; opacity: 0.8; }
.db-time { font-size: 11px; font-weight: 600; color: var(--sa-ct-text); opacity: 0.5; white-space: nowrap; text-align: right; }
.db-money-ico {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px;
    background: rgba(var(--core-color), 0.10); color: var(--sa-primary);
}
.db-money-coin_purchase { background: rgba(245,158,11,0.13); color: #D97706; }
.db-money-rent { background: rgba(139,92,246,0.13); color: #7C3AED; }
.db-money-gift { background: rgba(236,72,153,0.13); color: #DB2777; }
.db-money-amt { font-size: 13px; font-weight: 800; color: var(--sa-ct-text); white-space: nowrap; }
.db-money-amt i { color: #F59E0B; }
.db-money-amt.is-money { color: #059669; }
[data-theme="dark"] .db-money-amt.is-money { color: #34D399; }
.db-channel-info { min-width: 0; flex: 1; }

/* ── USERS BY LOGIN TYPE ─────────────────────────────────── */
.db-login-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.db-login-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--adm-dash-stat-bd); border-radius: 14px; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.db-login-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.25); }
[data-theme="dark"] .db-login-item { border-color: var(--fi-inset); }
.db-login-ico { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-size: 19px; color: var(--login); background: color-mix(in srgb, var(--login) 14%, transparent); }
.db-login-info { flex: 1; min-width: 0; }
.db-login-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--sa-ct-text); }
.db-login-top span { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.db-login-top span b { font-size: 16px; color: var(--sa-ct-text); }
.db-login-bar { height: 7px; margin: 8px 0 6px; border-radius: 10px; overflow: hidden; background: rgba(var(--core-color), 0.08); }
.db-login-bar span { display: block; height: 100%; border-radius: 10px; transition: width 0.4s ease; }
.db-login-info small { font-size: 11.5px; color: var(--text-3); }
.db-login-info small b { color: var(--sa-ct-text); }
@media (max-width: 575px) { .db-login-list { grid-template-columns: 1fr; } }

/* ── ACTIVE USERS / SUBSCRIPTION / PEAK HOURS ─────────────── */
.db-active-hero { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.db-active-lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.db-active-num { font-size: 34px; font-weight: 900; line-height: 1.1; color: var(--sa-ct-text); }
.db-active-sub { font-size: 12.5px; font-weight: 600; color: #059669; }
[data-theme="dark"] .db-active-sub { color: #34D399; }
.db-active-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.db-active-grid > div { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; background: rgba(var(--core-color), 0.05); }
.db-active-grid span { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-3); }
.db-active-grid b { font-size: 20px; font-weight: 800; color: var(--sa-ct-text); }
.db-sub-grid { grid-template-columns: repeat(2, 1fr); }
.db-sub-grid .db-warn { background: rgba(245, 158, 11, 0.10); }
.db-sub-grid .db-warn b { color: #D97706; }
.db-active-stick small { font-size: 11.5px; color: var(--text-3); }
.db-mini-title { margin: 6px 0 8px; font-size: 13px; font-weight: 800; color: var(--sa-ct-text); }
.db-mini-title small { margin-left: 4px; font-weight: 500; color: var(--text-3); }
.db-pack { margin-bottom: 10px; }
.db-pack .db-login-bar { margin: 6px 0 0; }
.db-days { padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; color: #D97706; background: rgba(245, 158, 11, 0.13); }
.db-days.is-urgent { color: #DC2626; background: rgba(239, 68, 68, 0.13); }
#chart_peak .apexcharts-legend { display: none; }

/* ── LOADING ─────────────────────────────────────────────── */
#dashboard_body { transition: opacity 0.2s ease; }
#dashboard_body.db-loading { opacity: 0.55; pointer-events: none; }
.db-loading .db-kpi-value { animation: dbPulse 1s ease-in-out infinite; }
@keyframes dbPulse { 50% { opacity: 0.35; } }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (min-width: 1201px) { .db-kpi-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } }
@media (max-width: 991px)  { .db-filter { align-items: flex-start; width: 100%; } .db-custom { justify-content: flex-start; } }
@media (max-width: 575px)  {
    .db-range { width: 100%; }
    .db-range-btn { flex: 1 1 auto; padding: 7px 8px; font-size: 12px; }
    .db-custom .form-control { width: calc(50% - 16px); }
    .db-apply { width: 100%; }
    .db-kpi .db-stat-num { font-size: 20px; }
    .db-kpi-prev { display: none; }
    .db-content-like { display: none; }
}

/* =============================================================================
   ADMIN LOGIN — PREMIUM  (alp-*)
   Only resources/views/admin/login/login.blade.php uses these classes; the
   User panel login and the installer keep the dt-* styles above.
   One centered card on a honeycomb (hex outline) background. The pattern is a
   CSS mask, so it always takes the theme color (--pink) in light and dark.
   ============================================================================= */
/* Honeycomb pattern settings, shared by the admin login (.alp) and the installation wizard */
.alp,
body.dt-install-page .dt-lp {
    /* Honeycomb tile (pointy hexagon outlines), drifted by exactly one tile so the loop is seamless */
    --alp-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cdefs%3E%3Cpath id='h' d='M28 0L56 16.17L56 48.5L28 64.67L0 48.5L0 16.17Z' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/defs%3E%3Cuse href='%23h'/%3E%3Cuse href='%23h' x='28' y='48.5'/%3E%3Cuse href='%23h' x='-28' y='48.5'/%3E%3Cuse href='%23h' x='28' y='-48.5'/%3E%3Cuse href='%23h' x='-28' y='-48.5'/%3E%3C/svg%3E");
    --alp-size: 56px 97px;
    --alp-dx: 56px;
    --alp-dy: 97px;
    --alp-op: .2;
    isolation: isolate;
}
.alp {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--page-bg);
    color: var(--text);
    font-family: var(--font);
    overflow: hidden;
    isolation: isolate;
}

/* ── Background ─────────────────────────────────────────────────────────── */
.alp-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

/* Aurora blobs — soft radial colour pools in the corners (never behind the card),
   slowly morphing shape so the light feels alive rather than a flat smudge */
.alp-blob {
    position: absolute;
    border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%;
    filter: blur(60px);
    will-change: transform, border-radius;
}
.alp-blob--1 {
    width: 620px;
    height: 620px;
    top: -220px;
    left: -180px;
    background: radial-gradient(circle at 35% 35%, rgba(var(--core-color), .42) 0%, rgba(var(--core-color), .18) 45%, transparent 70%);
    animation: alpMorph 18s ease-in-out infinite, alpFloat 26s ease-in-out infinite;
}
.alp-blob--2 {
    width: 560px;
    height: 560px;
    bottom: -220px;
    right: -160px;
    background: radial-gradient(circle at 60% 60%, rgba(var(--core-color), .34) 0%, rgba(var(--core-color), .12) 45%, transparent 70%);
    animation: alpMorph 22s ease-in-out infinite reverse, alpFloat 30s ease-in-out infinite reverse;
}
/* Warm accent (app colorPrimaryLight) so the light theme is not only pink */
.alp-blob--3 {
    width: 380px;
    height: 380px;
    top: -120px;
    right: 8%;
    background: radial-gradient(circle, rgba(214, 184, 146, .55) 0%, rgba(231, 216, 197, .25) 45%, transparent 70%);
    animation: alpMorph 20s ease-in-out infinite, alpFloat 34s ease-in-out infinite;
}
[data-theme="dark"] .alp-blob--1 { background: radial-gradient(circle at 35% 35%, rgba(var(--core-color), .34) 0%, rgba(var(--core-color), .12) 45%, transparent 70%); }
[data-theme="dark"] .alp-blob--2 { background: radial-gradient(circle at 60% 60%, rgba(var(--core-color), .26) 0%, rgba(var(--core-color), .08) 45%, transparent 70%); }
/* Cool accent (app colorPrimaryDark, lifted) in the dark theme */
[data-theme="dark"] .alp-blob--3 { background: radial-gradient(circle, rgba(64, 86, 170, .45) 0%, rgba(22, 33, 62, .3) 45%, transparent 70%); }

/* Pattern stays visible across the screen; it only softens a little at the far edges */
.alp-pattern {
    position: absolute;
    inset: 0;
    -webkit-mask-image: radial-gradient(ellipse 95% 90% at 50% 50%, #000 55%, rgba(0, 0, 0, .45) 100%);
            mask-image: radial-gradient(ellipse 95% 90% at 50% 50%, #000 55%, rgba(0, 0, 0, .45) 100%);
}
.alp-pattern-fill {
    position: absolute;
    inset: -200px;
    /* Deeper tone than the blobs, so the lines still read on top of them */
    background: linear-gradient(135deg, var(--pink-deep) 0%, var(--pink) 50%, var(--pink-deep) 100%);
    -webkit-mask-image: var(--alp-tile);
            mask-image: var(--alp-tile);
    -webkit-mask-size: var(--alp-size);
            mask-size: var(--alp-size);
    opacity: var(--alp-op);
    animation: alpDrift 40s linear infinite;
}
[data-theme="dark"] .alp-pattern-fill {
    background: linear-gradient(135deg, var(--pink-soft) 0%, var(--pink) 50%, var(--pink-soft) 100%);
    opacity: calc(var(--alp-op) * .9);
}

/* ── Corner controls ────────────────────────────────────────────────────── */
.alp-tog {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 5;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid var(--inp-bdr);
    background: var(--form-bg);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    color: var(--pink);
    font-size: 16px;
    cursor: pointer;
    transition: transform .35s var(--ease-o), border-color .25s;
    outline: none !important;
}
.alp-tog:hover { transform: rotate(-18deg); border-color: var(--pink); }

/* ── Card ───────────────────────────────────────────────────────────────── */
.alp-card {
    position: relative;
    width: 100%;
    max-width: 452px;
    padding: 0 0 24px;
    border-radius: 30px;
    background: var(--form-bg);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
            backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--card-border);
    box-shadow: 0 40px 80px -36px rgba(var(--core-color), .38), 0 14px 30px -14px rgba(12, 12, 30, .14);
    animation: alpRise .8s var(--ease-o) both;
}
[data-theme="dark"] .alp-card { box-shadow: 0 40px 80px -34px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03); }

/* Hero band */
.alp-hero {
    position: relative;
    height: 118px;
    overflow: hidden;
    border-radius: 29px 29px 0 0;
    background: linear-gradient(135deg, var(--pink-deep) 0%, var(--pink) 55%, var(--pink-soft) 120%);
    -webkit-mask-image: radial-gradient(130% 100% at 50% 0%, #000 72%, transparent 72.5%);
            mask-image: radial-gradient(130% 100% at 50% 0%, #000 72%, transparent 72.5%);
}
/* Version badge, top-right of the hero (glass, like the eyebrow) */
.alp-version {
    position: absolute;
    top: 22px;
    right: 24px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px 6px 10px;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--white-color);
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}
.alp-version-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--white-color); animation: alpPulse 1.8s ease-out infinite; }

.alp-eyebrow {
    position: absolute;
    top: 22px;
    left: 24px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--white-color);
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}

/* Logo overlapping the hero edge */
.alp-card-head { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; margin-top: -62px; text-align: center; }
.alp-logo {
    position: relative;
    width: 116px;
    height: 116px;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
    border-radius: 34px;
    background: var(--white-color);
    box-shadow: 0 20px 40px -16px var(--btn-shadow), 0 0 0 6px var(--form-bg);
}
.alp-logo img { width: 100%; height: 100%; object-fit: cover; }
.alp-app-name { margin: 10px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--pink); }

.alp-card-body { padding: 12px 40px 0; }

.alp-title { margin: 0 0 8px; text-align: center; font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -.03em; color: var(--text); }
.alp-sub { margin: 0 0 20px; text-align: center; font-size: 14.5px; color: var(--text-2); }

/* Bottom note with rules on both sides */
/* Divider with a shield badge in the middle */
.alp-note { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.alp-note::before, .alp-note::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--core-color), .28)); }
.alp-note::after { background: linear-gradient(90deg, rgba(var(--core-color), .28), transparent); }
.alp-note i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 13px;
    color: var(--pink);
    background: rgba(var(--core-color), .08);
    border: 1px solid rgba(var(--core-color), .22);
    box-shadow: 0 0 0 5px rgba(var(--core-color), .04);
}

/* Floating-label fields */
.alp-field { position: relative; margin-bottom: 12px; }
.alp-inp {
    width: 100%;
    height: 56px;
    padding: 21px 52px 7px 58px;
    border-radius: 16px;
    border: 1.5px solid var(--inp-bdr);
    background: var(--inp-bg);
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    outline: none;
    transition: border-color .25s, box-shadow .25s, background .25s;
}
.alp-inp:hover { border-color: rgba(var(--core-color), .35); }
.alp-inp:focus { border-color: var(--pink); background: var(--inp-focus-bg); box-shadow: 0 0 0 4px var(--inp-focus-ring); }
.alp-inp:-webkit-autofill { -webkit-text-fill-color: var(--text); transition: background-color 9999s ease-out; }
.alp-field label {
    position: absolute;
    left: 58px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    font-size: 15px;
    color: var(--text-3);
    pointer-events: none;
    transition: top .22s var(--ease-o), font-size .22s var(--ease-o), color .22s;
}
.alp-inp:focus + label,
.alp-inp:not(:placeholder-shown) + label,
.alp-inp:-webkit-autofill + label { top: 17px; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--text-2); }
.alp-inp:focus + label { color: var(--pink); }
.alp-field-ico {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 14px;
    color: var(--text-3);
    background: rgba(var(--core-color), .06);
    transition: color .25s, background .25s;
}
.alp-field:focus-within .alp-field-ico { color: var(--white-color); background: linear-gradient(135deg, var(--pink-deep), var(--pink)); }
.alp-eye {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    transition: color .2s, background .2s;
}
.alp-eye:hover { color: var(--pink); background: rgba(var(--core-color), .08); }

.alp-btn {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 54px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 16px;
    color: var(--white-color);
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: .01em;
    background: linear-gradient(120deg, var(--pink-deep), var(--pink) 60%, var(--pink-soft));
    background-size: 200% 100%;
    box-shadow: 0 16px 32px -12px var(--btn-shadow);
    cursor: pointer;
    transition: background-position .5s var(--ease-o), transform .2s, box-shadow .3s;
    outline: none !important;
}
.alp-btn i { transition: transform .3s var(--ease-o); }
.alp-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg);
    transition: left .7s var(--ease-o);
}
.alp-btn:hover::after { left: 130%; }
.alp-btn:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 20px 38px -12px var(--btn-shadow-hover); }
.alp-btn:hover i { transform: translateX(4px); }
.alp-btn:active { transform: translateY(0) scale(.99); }
.alp-btn:focus-visible { outline: 3px solid var(--inp-focus-ring); outline-offset: 3px; }

.alp-demo {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    color: var(--text-2);
    background: rgba(var(--core-color), .06);
    border: 1px dashed rgba(var(--core-color), .3);
    transition: border-color .25s, background .25s, box-shadow .25s, transform .25s var(--ease-o);
}
.alp-demo:hover {
    border-style: solid;
    border-color: var(--pink);
    background: rgba(var(--core-color), .1);
    box-shadow: 0 10px 24px -14px var(--btn-shadow);
}
.alp-demo i { margin-top: 2px; color: var(--pink); }
.alp-demo a { font-weight: 600; color: var(--pink); }

/* Card footer */
.alp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; font-size: 14px; font-weight: 500; letter-spacing: .01em; color: var(--text-3); }
.alp-foot strong { font-weight: 700; color: var(--pink); }
.alp-foot-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(var(--core-color), .5); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .alp { padding: 76px 16px 24px; }
    .alp-card { border-radius: 24px; }
    .alp-card-body { padding: 10px 22px 0; }
    .alp-hero { height: 108px; border-radius: 23px 23px 0 0; }
    .alp-title { font-size: 23px; }
}
/* Short screens (laptops with browser toolbars): tighten so the card fits without scrolling */
@media (max-height: 760px) and (min-width: 481px) {
    .alp-hero { height: 92px; }
    .alp-card-head { margin-top: -52px; }
    .alp-logo { width: 96px; height: 96px; border-radius: 28px; }
    .alp-app-name { margin-top: 8px; font-size: 26px; }
    .alp-title { font-size: 23px; margin-bottom: 4px; }
    .alp-sub { margin-bottom: 16px; font-size: 14px; }
    .alp-inp { height: 50px; padding-top: 18px; padding-bottom: 5px; }
    .alp-inp:focus + label, .alp-inp:not(:placeholder-shown) + label, .alp-inp:-webkit-autofill + label { top: 14px; }
    .alp-field { margin-bottom: 10px; }
    .alp-btn { height: 50px; }
    .alp-demo { margin-top: 10px; padding: 8px 12px; }
    .alp-note { margin-top: 12px; }
    .alp-note i { width: 28px; height: 28px; font-size: 11px; }
    .alp-foot { margin-top: 6px; }
    .alp-card { padding-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .alp *, .alp *::before, .alp *::after { animation: none !important; transition: none !important; }
}

/* ── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes alpDrift { to { transform: translate3d(var(--alp-dx), var(--alp-dy), 0); } }
@keyframes alpFloat { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(60px, 40px) rotate(20deg); } }
@keyframes alpMorph { 0%, 100% { border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%; } 33% { border-radius: 63% 37% 45% 55% / 55% 62% 38% 45%; } 66% { border-radius: 38% 62% 55% 45% / 62% 45% 55% 38%; } }
@keyframes alpRise  { from { opacity: 0; transform: translateY(22px) scale(.98); } }
@keyframes alpPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 100% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } }

/* =============================================================================
   ADMIN PANEL — shared small helpers (1.8)
   ============================================================================= */
/* =============================================================================
   ADMIN USER DASHBOARD (ud-*)
   ============================================================================= */
.ud-hero { margin-bottom: 24px; border-radius: 18px; overflow: hidden; background: var(--white-color); border: 1px solid var(--adm-dash-stat-bd); box-shadow: 0 2px 16px var(--sa-black-004); }
.ud-cover { height: 130px; background: linear-gradient(135deg, var(--pink-deep) 0%, var(--pink) 55%, var(--pink-soft) 120%); background-size: cover; background-position: center; }
.ud-hero-body { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 0 28px 18px; margin-top: -34px; } /* avatar overlaps the cover, the name stays below it */
.ud-identity { display: flex; align-items: flex-end; gap: 18px; min-width: 0; }
.ud-avatar { flex: none; width: 112px; height: 112px; object-fit: cover; border-radius: 24px; border: 4px solid var(--white-color); background: var(--white-color); box-shadow: 0 10px 28px -10px rgba(var(--core-color), .55); }
.ud-identity-text { min-width: 0; padding-bottom: 2px; }
.ud-name { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--sa-ct-text); word-break: break-word; }
.ud-handle { margin: 2px 0 8px; font-size: 14px; font-weight: 600; color: var(--primary-color); }
.ud-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ud-badge-kyc { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.ud-refcode { display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 12px; border: 1px dashed rgba(var(--core-color), .45); background: rgba(var(--core-color), .06); }
.ud-refcode-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.ud-refcode-value { font-family: monospace; font-size: 15px; font-weight: 700; letter-spacing: .08em; color: var(--primary-color); }
.ud-copy { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: rgba(var(--core-color), .12); color: var(--primary-color); cursor: pointer; transition: background .15s ease; }
.ud-copy:hover { background: rgba(var(--core-color), .22); }
.ud-copy:focus { outline: none; }
.ud-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; border-top: 1px solid var(--adm-dash-stat-bd); background: var(--adm-dash-stat-bd); }
.ud-info-item { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--white-color); min-width: 0; }
.ud-info-ico { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(var(--core-color), .10); color: var(--primary-color); font-size: 15px; }
.ud-info-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ud-info-text small { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.ud-info-text span { font-size: 14px; font-weight: 600; color: var(--sa-ct-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ud-info-text em { font-style: normal; font-size: 12px; color: var(--text-2); }

.ud-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--sa-ct-text); }
.ud-section-title i { color: var(--primary-color); }
.ud-balance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.ud-balance { --bal: 224, 30, 117; position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; border-radius: 16px; overflow: hidden; color: var(--white-color) !important; text-decoration: none !important; background: linear-gradient(135deg, rgba(var(--bal), 1) 0%, rgba(var(--bal), .78) 100%); box-shadow: 0 12px 26px -14px rgba(var(--bal), .75); transition: transform .2s ease, box-shadow .2s ease; }
a.ud-balance:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -14px rgba(var(--bal), .85); }
.ud-balance--wallet { --bal: 224, 30, 117; }
.ud-balance--earning { --bal: 16, 150, 110; }
.ud-balance--locked { --bal: 79, 70, 229; }
.ud-balance-ico { position: absolute; right: 18px; top: 18px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .18); font-size: 20px; }
.ud-balance-num { font-size: 30px; font-weight: 800; line-height: 1.1; }
.ud-balance-lbl { font-size: 13px; font-weight: 600; opacity: .9; }
.ud-balance-link { margin-top: 10px; font-size: 12px; font-weight: 600; opacity: .85; }
.ud-balance-note { font-weight: 500; }

.ud-card { margin-bottom: 24px; padding: 18px 20px; border-radius: 16px; background: var(--white-color); border: 1px solid var(--adm-dash-stat-bd); box-shadow: 0 2px 16px var(--sa-black-004); }
.ud-card-head { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--sa-ct-text); }
.ud-card-head > i { color: var(--primary-color); }
.ud-count { margin-left: auto; min-width: 26px; height: 22px; padding: 0 8px; display: grid; place-items: center; border-radius: 100px; background: rgba(var(--core-color), .10); color: var(--primary-color); font-size: 12px; font-weight: 700; }
.ud-activity { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ud-tile { --tile: 224, 30, 117; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; border-radius: 14px; background: rgba(var(--tile), .07); border: 1px solid rgba(var(--tile), .14); }
.ud-tile--pink   { --tile: 224, 30, 117; }
.ud-tile--violet { --tile: 124, 77, 255; }
.ud-tile--rose   { --tile: 225, 29, 72; }
.ud-tile--indigo { --tile: 79, 70, 229; }
.ud-tile--orange { --tile: 234, 88, 12; }
.ud-tile--teal   { --tile: 13, 148, 136; }
.ud-tile--green  { --tile: 22, 163, 74; }
.ud-tile-ico { margin-bottom: 6px; font-size: 16px; color: rgb(var(--tile)); }
.ud-tile-num { font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--sa-ct-text); }
.ud-tile-lbl { font-size: 12px; font-weight: 600; color: var(--text-2); }
.ud-table { border-radius: 12px; }
.ud-device-type { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ud-total { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(245, 158, 11, .10); font-size: 13px; font-weight: 600; color: var(--text-2); }
.ud-total b { color: #B45309; }
.ud-people { max-height: 360px; overflow-y: auto; }
.ud-person { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--adm-dash-stat-bd); }
.ud-person:last-child { border-bottom: 0; }
.ud-person-img { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(var(--core-color), .18); }
.ud-person-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ud-person-text span { font-size: 14px; font-weight: 600; color: var(--sa-ct-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ud-person-text small { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ud-coin { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 100px; background: rgba(245, 158, 11, .12); color: #B45309; font-size: 12.5px; font-weight: 700; }
.ud-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 0; text-align: center; font-size: 13px; color: var(--text-2); }
.ud-empty i { font-size: 26px; opacity: .45; }

[data-theme="dark"] .ud-hero,
[data-theme="dark"] .ud-card { background: var(--sa-header-bg); border-color: var(--fi-inset); box-shadow: 0 2px 16px rgba(0, 0, 0, .25); }
[data-theme="dark"] .ud-avatar { border-color: var(--sa-header-bg); background: var(--sa-header-bg); }
[data-theme="dark"] .ud-info { background: var(--fi-inset); border-top-color: var(--fi-inset); }
[data-theme="dark"] .ud-info-item { background: var(--sa-header-bg); }
[data-theme="dark"] .ud-person { border-bottom-color: var(--fi-inset); }
[data-theme="dark"] .ud-total b,
[data-theme="dark"] .ud-coin { color: #FBBF24; }
[data-theme="dark"] .ud-tile-ico { filter: brightness(1.35); }

@media (max-width: 767px) {
    .ud-activity { grid-template-columns: repeat(2, 1fr); }
    .ud-hero-body { padding: 0 18px 16px; }
    .ud-identity { flex-direction: column; align-items: flex-start; gap: 10px; }
    .ud-avatar { width: 96px; height: 96px; border-radius: 20px; }
}

/* Date column in tables: date on top, time below */
.date-cell { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; white-space: nowrap; }
.date-cell-day { font-weight: 600; color: var(--sa-ct-text); }
.date-cell-time { font-size: 12px; color: var(--text-2); }

/* Colour column in tables: swatch + hex code */
.color-swatch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; font-family: monospace; letter-spacing: .02em; white-space: nowrap; }
/* Small dot with the same mid-grey ring in both themes, so white / black colours never stand out as a block */
.color-swatch-box { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(128, 128, 140, .35); }
.approval-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 100px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.approval-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-approval-pending { color: #B7791F; background: rgba(245, 158, 11, .14); }
.badge-approval-approved { color: #15803D; background: rgba(34, 197, 94, .14); }
.badge-approval-rejected { color: #DC2626; background: rgba(239, 68, 68, .12); }
[data-theme="dark"] .badge-approval-pending { color: #FCD34D; }
[data-theme="dark"] .badge-approval-approved { color: #4ADE80; }
[data-theme="dark"] .badge-approval-rejected { color: #F87171; }
.kyc-dl { margin: 0; }
.kyc-dl dt { font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-3); }
.kyc-dl dd { margin: 0 0 10px; font-size: 14px; color: var(--text); word-break: break-word; }
/* Bootstrap 4.0 has no .modal-xl (added in 4.2): same sizes as Bootstrap */
@media (min-width: 992px) { .modal-xl { max-width: 800px; } }
@media (min-width: 1200px) { .modal-xl { max-width: 1140px; } }
.kyc-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 575px) { .kyc-images { grid-template-columns: 1fr; } }
.kyc-image-slot { display: flex; flex-direction: column; gap: 4px; font-size: 12px; text-align: center; color: var(--text-2); }
.kyc-image-slot > span { font-weight: 600; }
.kyc-images a { display: block; text-decoration: none; }
.kyc-images img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--inp-bdr); background: var(--inp-bg); transition: transform .2s ease, box-shadow .2s ease; }
.kyc-images a:hover img { transform: scale(1.03); box-shadow: 0 6px 18px -8px rgba(var(--core-color), .6); }
/* No file: dashed placeholder of the same size */
.kyc-image-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 4 / 3; border-radius: 10px; border: 1.5px dashed var(--inp-bdr); background: var(--inp-bg); color: var(--text-3); }
.kyc-image-empty i { font-size: 22px; }
.kyc-image-empty small { font-size: 11px; font-weight: 600; }

/* =============================================================================
   TIME PICKER (bootstrap-datetimepicker) — content duration
   ============================================================================= */
/* Cards keep their entry-animation transform, so each one is its own stacking layer;
   lift the card holding an open picker above the cards after it */
.custom-border-card:has(.bootstrap-datetimepicker-widget) { position: relative; z-index: 30; }
.bootstrap-datetimepicker-widget.dropdown-menu { background-color: var(--white-color); border: 1.5px solid var(--sa-primary); border-radius: 12px; box-shadow: 0 8px 24px var(--black-a05); padding: 8px; min-width: 220px; }
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before { border-bottom-color: var(--sa-primary); }
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after { border-bottom-color: var(--white-color); }
.bootstrap-datetimepicker-widget.dropdown-menu.top:before { border-top-color: var(--sa-primary); }
.bootstrap-datetimepicker-widget.dropdown-menu.top:after { border-top-color: var(--white-color); }
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th { color: var(--sa-ct-text); border-radius: 8px; }
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second { font-size: 20px; font-weight: 700; color: var(--sa-ct-text); }
.bootstrap-datetimepicker-widget table td span,
.bootstrap-datetimepicker-widget table td.hour,
.bootstrap-datetimepicker-widget table td.minute,
.bootstrap-datetimepicker-widget table td.second { color: var(--sa-ct-text); border-radius: 8px; }
.bootstrap-datetimepicker-widget table td span:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td.second:hover { background: var(--sa-primary-light); color: var(--sa-primary); }
.bootstrap-datetimepicker-widget a[data-action] { color: var(--sa-primary); border-radius: 8px; }
.bootstrap-datetimepicker-widget a[data-action]:hover { background: var(--sa-primary-light); }
.bootstrap-datetimepicker-widget .btn { color: var(--sa-primary); box-shadow: none; }
.bootstrap-datetimepicker-widget .picker-switch td span { color: var(--sa-primary); }
[data-theme="dark"] .bootstrap-datetimepicker-widget.dropdown-menu { background-color: var(--sa-header-bg); box-shadow: 0 8px 24px var(--black-a28); }
[data-theme="dark"] .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after { border-bottom-color: var(--sa-header-bg); }
[data-theme="dark"] .bootstrap-datetimepicker-widget.dropdown-menu.top:after { border-top-color: var(--sa-header-bg); }

/* =============================================================================
   FEED MEDIA ROWS (admin feed add / edit)
   ============================================================================= */
.feed-media-list { counter-reset: feed-media; display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.feed-media-row { counter-increment: feed-media; position: relative; display: flex; align-items: flex-start; gap: 22px; padding: 18px 56px 18px 18px; border: 1.5px dashed var(--adm-dash-stat-bd); border-radius: 14px; background: var(--white-color); }
.feed-media-row::before { content: counter(feed-media); position: absolute; top: -11px; left: 16px; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--sa-primary); color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
.feed-media-img { flex: 0 0 auto; }
.feed-media-body { flex: 1 1 auto; min-width: 0; }
.feed-media-file { font-size: 13px; color: var(--sa-ct-text); margin-bottom: 6px; word-break: break-all; }
.feed-media-remove { position: absolute; top: 14px; right: 14px; }
[data-theme="dark"] .feed-media-row { background: var(--sa-header-bg); border-color: var(--fi-inset); }
@media (max-width: 767px) { .feed-media-row { flex-direction: column; gap: 12px; } }

/* =============================================================================
   RENT TRANSACTION (admin) — filter grid, table cells, summary split, add summary
   ============================================================================= */
.page-search.filter-grid { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 1200px) { .page-search.filter-grid.filter-grid-4 { grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .page-search.filter-grid.filter-grid-3 { grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(0, 1fr)); } }
.page-search.filter-grid .sorting { min-width: 0; }
.page-search.filter-grid .select2-container { min-width: 0; }
@media (max-width: 1199px) { .page-search.filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .page-search.filter-grid .input-group { grid-column: 1 / -1; } }
@media (max-width: 767px) { .page-search.filter-grid { grid-template-columns: 1fr; } }
.rt-cell { display: flex; align-items: center; gap: 10px; min-width: 170px; }
.rt-cell-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.rt-cell-title { font-weight: 600; color: var(--sa-ct-text); line-height: 1.25; }
.rt-amount, .rt-validity { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; white-space: nowrap; }
.rt-coin { font-size: 16px; font-weight: 800; color: var(--sa-ct-text); white-space: nowrap; }
.rt-coin i, .rt-summary i.fa-coins { color: #f5b301; }
.rt-amount-line, .rt-validity small { font-size: 12px; color: var(--text); }
.rt-amount-line b, .rt-validity b { color: var(--sa-ct-text); font-weight: 600; }
.rt-amount-line i, .rt-validity i { width: 14px; color: var(--sa-primary); }
.rt-summary { list-style: none; margin: 0; padding: 0; }
.rt-summary li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--adm-dash-stat-bd); font-size: 14px; }
.rt-summary li span { color: var(--text); }
.rt-summary li b { color: var(--sa-ct-text); text-align: right; }
.rt-summary li b.text-danger, .rt-summary li b.text-danger span { color: #e3000b !important; }
.rt-summary li.rt-summary-line { margin-top: 6px; border-top: 1px solid var(--adm-dash-stat-bd); }
.rt-summary li:last-child { border-bottom: none; }
.rt-summary-alert { margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: #e3000b; background: rgba(227, 0, 11, 0.08); border: 1px solid rgba(227, 0, 11, 0.25); }
[data-theme="dark"] .rt-summary li { border-color: var(--fi-inset); }
[data-theme="dark"] .rt-summary-alert { color: #ff6b6b; background: rgba(255, 107, 107, 0.08); border-color: rgba(255, 107, 107, 0.25); }

/* Overview cards (rent + subscription transactions): hero card, period tiles and an info strip; the shared txn-stat cards stay as they are */
.ov-overview { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: auto auto; gap: 18px; margin-bottom: 26px; }
.ov-hero { grid-row: span 2; position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: 24px 26px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, var(--sa-primary) 0%, var(--pink-deep) 100%); box-shadow: 0 12px 32px rgba(var(--core-color), 0.28); animation: sacCardIn 0.5s var(--ease-o) both; }
.ov-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 100% 0%, var(--white-a22), transparent 55%); }
.ov-hero-bg { position: absolute; right: -10px; top: 50%; z-index: -1; font-size: 150px; color: var(--white-a12); transform: translateY(-58%) rotate(-12deg); }
.ov-hero-top { display: flex; align-items: flex-start; gap: 16px; }
.ov-hero-ico { flex-shrink: 0; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; font-size: 22px; background: var(--white-a15); border: 1px solid var(--white-a25); }
.ov-hero-lbl { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white-a90); }
.ov-hero-num { display: block; margin-top: 4px; font-size: 40px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.ov-hero-sub { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--white-a15); }
.ov-split { padding: 14px 16px; border-radius: 14px; background: rgba(0, 0, 0, 0.14); border: 1px solid var(--white-a15); }
.ov-split-head { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white-a78); }
.ov-split-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--white-a15); }
.ov-split-admin { background: #fff; }
.ov-split-creator { background: #ffd166; }
.ov-split-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ov-split-legend div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--white-a90); }
.ov-split-legend div > span { flex: 1 0 calc(100% - 20px); } /* dot + label on line 1, amount + percent on line 2 */
.ov-split-legend b { font-size: 16px; font-weight: 800; color: #fff; }
.ov-split-legend small { padding: 1px 7px; border-radius: 999px; font-weight: 700; background: var(--white-a15); }
.ov-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ov-dot-admin { background: #fff; }
.ov-dot-creator { background: #ffd166; }
.ov-split-locked, .ov-dot-locked { background: #a78bfa; }
.ov-split-legend.ov-split-3 { grid-template-columns: repeat(3, 1fr); }
.ov-split-3 b { flex-basis: 100%; } /* 3 columns: dot + label, amount, % each on its own line so long labels / amounts never break the row */
.ov-tile { --tile: var(--sa-primary); --tile-soft: var(--sa-primary-light); position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 20px; border-radius: 18px; background: var(--white-color); border: 1px solid var(--adm-dash-stat-bd); box-shadow: 0 2px 14px var(--black-a05); animation: sacCardIn 0.5s var(--ease-o) both; transition: transform 200ms var(--ease-o), box-shadow 200ms ease; }
.ov-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 26px var(--black-a05), 0 0 0 1px var(--tile-soft); }
.ov-tile:nth-child(2) { animation-delay: 0.05s; } .ov-tile:nth-child(3) { animation-delay: 0.1s; } .ov-tile:nth-child(4) { animation-delay: 0.15s; } .ov-tile:nth-child(5) { animation-delay: 0.2s; }
.ov-tile-pink { --tile: #e01e75; --tile-soft: rgba(224, 30, 117, 0.12); }
.ov-tile-violet { --tile: #7c4dff; --tile-soft: rgba(124, 77, 255, 0.12); }
.ov-tile-amber { --tile: #f59e0b; --tile-soft: rgba(245, 158, 11, 0.14); }
.ov-tile-green { --tile: #10b981; --tile-soft: rgba(16, 185, 129, 0.13); }
.ov-tile-ico { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-size: 16px; color: var(--tile); background: var(--tile-soft); }
.ov-tile-lbl { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); }
.ov-tile-num { margin-top: 6px; font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--sa-ct-text); }
.ov-tile-num i { font-size: 18px; color: #f5b301; }
.ov-tile-sub { font-size: 12px; font-weight: 600; color: var(--tile); padding: 2px 9px; border-radius: 999px; background: var(--tile-soft); }
.ov-live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #10b981; }
.ov-live::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #10b981; opacity: 0; animation: ovPulse 1.6s ease-out infinite; }
@keyframes ovPulse { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(1.4); opacity: 0; } }
[data-theme="dark"] .ov-tile { background: var(--sa-header-bg); border-color: var(--fi-inset); box-shadow: 0 2px 14px var(--black-a28); }
@media (max-width: 1199px) { .ov-overview { grid-template-columns: 1fr 1fr; } .ov-hero { grid-row: auto; grid-column: 1 / -1; } }
@media (max-width: 575px) { .ov-overview { grid-template-columns: 1fr; } .ov-split-legend, .ov-split-legend.ov-split-3 { grid-template-columns: 1fr; } }

/* Subscription transaction summary: 4 cards in a row */

/* Overview info strip: small facts under the overview cards */
.ov-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: -8px 0 26px; }
.ov-fact { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; background: var(--white-color); border: 1px solid var(--adm-dash-stat-bd); box-shadow: 0 2px 14px var(--black-a05); min-width: 0; }
.ov-fact-ico { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 16px; color: var(--tile, var(--sa-primary)); background: var(--tile-soft, var(--sa-primary-light)); }
.ov-fact-text { display: flex; flex-direction: column; min-width: 0; }
.ov-fact-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); }
.ov-fact-val { font-size: 16px; font-weight: 800; color: var(--sa-ct-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-fact-sub { font-size: 12px; color: var(--text-3); }
[data-theme="dark"] .ov-fact { background: var(--sa-header-bg); border-color: var(--fi-inset); box-shadow: 0 2px 14px var(--black-a28); }
.page-search + .ov-strip { margin-top: 16px; } /* strip under the filters (selected user balances) */
.ov-strip.ov-strip-4 { grid-template-columns: repeat(4, 1fr); }
.custom-border-card + .ov-strip { margin-top: 0; } /* strip right under a card */
@media (max-width: 1199px) { .ov-strip.ov-strip-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991px) { .ov-strip, .ov-strip.ov-strip-4 { grid-template-columns: 1fr; } }

/* Url cell in tables (Social Links): pink pill link, long urls cut with … */
.table-link { display: inline-flex; align-items: center; gap: 8px; max-width: 320px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--sa-primary) !important; background: var(--sa-primary-light); text-decoration: none !important; transition: background 150ms ease, color 150ms ease; }
.table-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-link i { flex-shrink: 0; font-size: 11px; }
.table-link:hover { color: var(--white-color) !important; background: var(--sa-primary); }

/* Two cards side by side with the same height (column is d-flex flex-column; Bootstrap 4.0 has no flex-fill) */
.st-card-fill { flex: 1 1 auto; }

/* API path copy field (App Settings): link icon, read only url, copy button that turns into Copied */
.api-copy { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 14px; background: var(--sa-surface); border: 1px dashed rgba(224, 30, 117, 0.35); }
.api-copy-ico { flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--sa-primary); background: var(--sa-primary-light); }
.api-copy .api-copy-input { flex: 1; min-width: 0; height: 38px; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; font-weight: 600; color: var(--sa-ct-text); cursor: text; }
.api-copy-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 10px; border: 0; font-size: 13px; font-weight: 700; color: var(--white-color); background: var(--sa-primary); box-shadow: 0 4px 12px rgba(224, 30, 117, 0.28); transition: background 200ms ease, transform 150ms ease, box-shadow 200ms ease; }
.api-copy-btn:hover { color: var(--white-color); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(224, 30, 117, 0.35); }
.api-copy-btn:active { transform: translateY(0) scale(0.97); }
.api-copy-icon-btn { flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 10px; border: 0; color: var(--sa-primary); background: var(--sa-primary-light); }
.api-copy-icon-btn:hover { color: var(--white-color); background: var(--sa-primary); }
.api-copy-icon-btn.copied, .api-copy-icon-btn.copied:hover { color: var(--white-color); background: #10b981; }
.api-copy-icon-btn.copied i { animation: apiCopyPop 300ms ease; }
.api-copy-btn.copied, .api-copy-btn.copied:hover { background: #10b981; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
.api-copy-btn.copied i { animation: apiCopyPop 300ms ease; }
@keyframes apiCopyPop { 0% { transform: scale(0.4); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
[data-theme="dark"] .api-copy { background: var(--sa-primary-light); border-color: rgba(224, 30, 117, 0.4); }

/* Page opened with the sidebar already collapsed (App Settings): no open -> close animation on load */
.sb-instant .sidebar, .sb-instant .sidebar *, .sb-instant .right-content { transition: none !important; }

/* =============================================================================
   SETTINGS SHELL (st-*): one settings menu on the left, the settings form on the right
   ============================================================================= */
.st-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.st-content { min-width: 0; }
.st-menu-card { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 14px 12px; border-radius: 18px; background: var(--white-color); border: 1px solid var(--adm-dash-stat-bd); box-shadow: 0 2px 14px var(--black-a05); }
/* Scrollbar like the main sidebar: thin pink thumb, no track (height for the phone chip row) */
.st-menu-card::-webkit-scrollbar       { width: 3px; height: 3px; }
.st-menu-card::-webkit-scrollbar-thumb { background: var(--sa-primary); border-radius: 999px; }
.st-menu-card::-webkit-scrollbar-track { background: transparent; }
.st-menu { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; }
.st-menu-group { padding: 12px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.st-menu-group:first-child { padding-top: 2px; }
.st-menu .st-menu-link { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--sa-ct-text); transition: background 150ms ease, color 150ms ease; }
.st-menu-ico { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: 13px; color: var(--sa-primary); background: var(--sa-primary-light); transition: background 150ms ease, color 150ms ease; }
.st-menu-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-menu .st-menu-link:hover { background: var(--sa-surface); color: var(--sa-primary); }
.st-menu .st-menu-link.active { background: var(--sa-primary); color: var(--white-color); box-shadow: 0 6px 16px rgba(224, 30, 117, 0.28); }
.st-menu .st-menu-link.active .st-menu-ico { background: rgba(255, 255, 255, 0.2); color: var(--white-color); }
[data-theme="dark"] .st-menu-card { background: var(--sa-header-bg); border-color: var(--fi-inset); box-shadow: 0 2px 14px var(--black-a28); }
[data-theme="dark"] .st-menu .st-menu-link:hover { background: var(--sa-primary-light); }
@media (max-width: 991px) {
    /* Phone / tablet: the menu turns into one row of chips that scrolls sideways */
    .st-shell { grid-template-columns: 1fr; gap: 16px; }
    .st-menu-card { position: static; max-height: none; padding: 8px; overflow-x: auto; }
    .st-menu { flex-direction: row; gap: 6px; }
    .st-menu-group { display: none; }
    .st-menu .st-menu-link { padding: 6px 12px 6px 6px; gap: 8px; white-space: nowrap; }
    .st-menu-ico { width: 26px; height: 26px; font-size: 12px; }
}

/* =============================================================================
   ADMIN ROLES & SUB ADMINS (rl-*)
   Role list cell, permission matrix page (live summary, groups, check boxes), sub-admin password eye
   ============================================================================= */
.rl-name { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.rl-name b { font-weight: 700; color: var(--sa-ct-text); }
.rl-avatar { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 16px; color: var(--sa-primary); background: rgba(var(--core-color), 0.10); }
.rl-avatar-letter { border-radius: 50%; font-weight: 800; font-size: 15px; color: var(--white-color); background: linear-gradient(135deg, var(--sa-primary), #7c4dff); }
.rl-desc { font-size: 12px; color: var(--text-3); }
.rl-access { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.rl-access-full { color: #059669; background: rgba(16, 185, 129, 0.13); }
.rl-access-bar { width: 140px; height: 7px; border-radius: 10px; overflow: hidden; background: rgba(var(--core-color), 0.10); }
.rl-access-bar span { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--sa-primary), #7c4dff); }
.rl-access-text { display: block; margin-top: 4px; font-weight: 600; color: var(--text-3); }

/* Live summary card */
.rl-summary { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; padding: 22px; border-radius: 18px; color: var(--white-color); background: linear-gradient(135deg, var(--sa-primary) 0%, var(--pink-deep, #b5125b) 60%, #7c4dff 100%); box-shadow: 0 10px 30px -12px rgba(var(--core-color), 0.55); }
.rl-summary-bg { position: absolute; right: -18px; bottom: -22px; font-size: 120px; opacity: 0.10; }
.rl-summary-lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.85; }
.rl-summary-num { font-size: 18px; font-weight: 600; }
.rl-summary-num b { font-size: 36px; font-weight: 900; }
.rl-summary-bar { height: 8px; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, 0.22); }
.rl-summary-bar span { display: block; width: 0; height: 100%; border-radius: 10px; background: var(--white-color); transition: width 0.25s ease; }
.rl-summary-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; opacity: 0.95; }
.rl-summary-btns { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.rl-chip { padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 20px; font-size: 12px; font-weight: 700; color: var(--white-color); background: rgba(255, 255, 255, 0.15); cursor: pointer; transition: background 0.15s ease; outline: none !important; }
.rl-chip:hover { background: rgba(255, 255, 255, 0.28); }

/* Toolbar + groups */
.rl-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.rl-toolbar-title { font-size: 16px; font-weight: 800; color: var(--sa-ct-text); }
.rl-toolbar-title i { color: var(--sa-primary); }
.rl-toolbar-title small { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--text-3); }
.rl-search { width: 280px; max-width: 100%; }
.rl-group { margin-bottom: 18px; border: 1px solid var(--adm-dash-stat-bd); border-radius: 16px; overflow: hidden; background: var(--white-color); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); }
[data-theme="dark"] .rl-group { border-color: var(--fi-inset); background: var(--adm-dash-card-bg); }
.rl-group-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--adm-dash-stat-bd); background: rgba(var(--core-color), 0.04); }
[data-theme="dark"] .rl-group-head { border-bottom-color: var(--fi-inset); }
.rl-group-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--sa-primary); background: rgba(var(--core-color), 0.12); }
.rl-group-name { font-size: 15px; font-weight: 800; color: var(--sa-ct-text); }
.rl-group-count { padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; color: var(--sa-primary); background: rgba(var(--core-color), 0.10); }
.rl-group .custom-switch .custom-control-label { font-size: 13px; font-weight: 700; color: var(--sa-ct-text); cursor: pointer; }
.rl-table th { padding: 10px 8px; border-top: 0; border-bottom: 1px solid var(--adm-dash-stat-bd); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; color: var(--text-3); }
.rl-table td { padding: 9px 8px; vertical-align: middle; border-top: 1px solid var(--adm-dash-stat-bd); }
[data-theme="dark"] .rl-table th, [data-theme="dark"] .rl-table td { border-color: var(--fi-inset); }
.rl-table tbody tr { transition: background 0.15s ease; }
.rl-table tbody tr:hover, .rl-table tbody tr.rl-on { background: rgba(var(--core-color), 0.04); }
.rl-module { min-width: 170px; font-weight: 700; color: var(--sa-ct-text); }
.rl-col { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; cursor: pointer; }
.rl-col input { width: 15px; height: 15px; accent-color: var(--sa-primary); cursor: pointer; }
.rl-na { color: var(--text-3); opacity: 0.5; }
.rl-check { position: relative; display: inline-block; margin: 0; cursor: pointer; }
.rl-check input { position: absolute; opacity: 0; pointer-events: none; }
.rl-check span { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid rgba(var(--core-color), 0.30); border-radius: 8px; font-size: 12px; color: transparent; transition: all 0.15s ease; }
.rl-check:hover span { border-color: var(--sa-primary); }
.rl-check input:checked + span { border-color: var(--sa-primary); color: var(--white-color); background: var(--sa-primary); box-shadow: 0 4px 10px -4px rgba(var(--core-color), 0.7); }
.rl-check input:focus-visible + span { box-shadow: 0 0 0 3px rgba(var(--core-color), 0.25); }
.rl-check-row input:checked + span { border-color: #7c4dff; background: #7c4dff; }
.rl-actions { position: sticky; bottom: 12px; z-index: 5; margin-top: 6px; padding: 12px 16px; border: 1px solid var(--adm-dash-stat-bd); border-radius: 16px; background: var(--white-color); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.25); }
[data-theme="dark"] .rl-actions { border-color: var(--fi-inset); background: var(--adm-dash-card-bg); }

/* Password eye */
.rl-pass .rl-eye { border-left: 0; color: var(--text-3); cursor: pointer; outline: none !important; }
.rl-pass .rl-eye:hover { color: var(--sa-primary); }

@media (max-width: 575px) {
    .rl-search { width: 100%; }
    .rl-group-head { flex-wrap: wrap; }
    .rl-summary-num b { font-size: 30px; }
}

/* =============================================================================
   SECTION LIST (sec-*): tab counts, form blocks, list row (drag handle, type icon, badges, schedule state), order bar
   ============================================================================= */
.sec-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 20px; font-size: 11px; font-weight: 800; color: var(--sa-primary); background: rgba(var(--core-color), 0.12); }
.sec-tab-count { transition: background 150ms ease, color 150ms ease; }
.nav-link.active .sec-tab-count,
.nav-link:hover .sec-tab-count,
[data-theme="dark"] .nav-link.active .sec-tab-count,
[data-theme="dark"] .nav-link:hover .sec-tab-count { color: var(--sa-primary); background: var(--white-color); }
.sec-block { padding: 16px 18px 4px; margin-bottom: 14px; border: 1px solid var(--adm-dash-stat-bd); border-radius: 14px; background: rgba(var(--core-color), 0.02); }
[data-theme="dark"] .sec-block { border-color: var(--fi-inset); }
.sec-block-title { margin-bottom: 12px; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sa-primary); }
.sec-block-title small { margin-left: 6px; font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.sec-list-head { flex-wrap: wrap; }
.sec-hint { font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.sec-list-tools { display: flex; gap: 8px; margin-left: auto; }
.sec-list-tools .form-control { height: 36px; font-size: 13px; text-transform: none; letter-spacing: 0; }
.sec-list-tools input { width: 220px; }
.sec-list-tools select { width: 140px; }
.sec-order-bar { display: none; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 22px; font-size: 13px; font-weight: 700; color: #B45309; background: rgba(245, 158, 11, 0.12); }
.sec-order-bar.show { display: flex; }
.sec-order-bar .btn { margin-left: 6px; }
.sec-row .sc-item { align-items: center; padding: 14px 22px; }
.sec-row.is-off .sc-item-main, .sec-row.is-off .sec-type-ico { opacity: 0.55; }
.sec-row.ui-sortable-helper { background: var(--white-color); border-radius: 12px; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.3); cursor: grabbing; }
.sec-placeholder { margin: 6px 14px; border: 2px dashed rgba(var(--core-color), 0.45); border-radius: 12px; background: rgba(var(--core-color), 0.05); visibility: visible !important; }
[data-theme="dark"] .sec-placeholder { border-color: rgba(var(--core-color), 0.55); background: rgba(var(--core-color), 0.08); }
[data-theme="dark"] .sec-row.ui-sortable-helper { background: var(--adm-dash-card-bg); }
.sec-handle { flex-shrink: 0; color: var(--text-3); cursor: grab; }
.sec-handle:hover { color: var(--sa-primary); }
.sec-type-ico { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 17px; color: var(--sa-primary); background: rgba(var(--core-color), 0.10); }
.sec-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sec-badges .sc-badge { padding: 3px 10px; font-size: 11.5px; }
.sec-badge-auto { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sec-state { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.sec-state-live { color: #059669; background: rgba(16, 185, 129, 0.13); }
.sec-state-scheduled { color: #D97706; background: rgba(245, 158, 11, 0.13); }
.sec-state-expired { color: #DC2626; background: rgba(239, 68, 68, 0.12); }
@media (max-width: 767px) {
    .sec-list-tools { width: 100%; margin-left: 0; }
    .sec-list-tools input { flex: 1; width: auto; }
    .sec-row .sc-item { flex-wrap: wrap; padding: 12px 14px; gap: 10px; }
    .sec-row .sc-item-actions { width: 100%; justify-content: flex-end; }
    .sec-row .sc-item-main { flex: 1 1 0; min-width: 0; order: 0; }
    .sec-row .sc-item-num { display: none; }
    .sec-row .sec-type-ico { width: 36px; height: 36px; font-size: 15px; }
    .sec-badges .sc-badge { white-space: normal; }
}
.inline-tabs + .ov-strip { margin-top: 16px; }