/* ============================================================
   ENHANCED DARK THEME — Cosmic Depth Edition
   Deep space palette · Neon accents · Fluid animations
   ============================================================ */

@import url(https://fonts.googleapis.com/css?family=Nunito:300,300i,400,400i,600,600i,700,700i&display=swap);

/* ─── DESIGN TOKENS ──────────────────────────────────────── */
:root {
    /* Base surfaces */
    --bg-void: #090b10;
    --bg-base: #0d1017;
    --bg-raised: #121824;
    --bg-overlay: #18202e;
    --bg-float: #1e2a3a;
    --bg-subtle: #243040;

    /* Borders */
    --border-dim: #1f2d3d;
    --border-mid: #2a3d54;
    --border-lit: #3a5570;

    /* Text */
    --text-primary: #e8f0fb;
    --text-secondary: #8da8c8;
    --text-muted: #4e6882;
    --text-faint: #2d4260;

    /* Accent — Electric Indigo */
    --accent: #6470ff;
    --accent-glow: rgba(100, 112, 255, 0.35);
    --accent-dim: rgba(100, 112, 255, 0.12);
    --accent-hover: #7a84ff;
    --accent-active: #4e5ae0;

    /* Cyan accent */
    --cyan: #22d3ee;
    --cyan-glow: rgba(34, 211, 238, 0.3);
    --cyan-dim: rgba(34, 211, 238, 0.1);

    /* Violet accent */
    --violet: #a855f7;
    --violet-glow: rgba(168, 85, 247, 0.3);

    /* Emerald accent */
    --emerald: #10d98e;
    --emerald-dim: rgba(16, 217, 142, 0.12);

    /* Amber accent */
    --amber: #f59e0b;
    --amber-dim: rgba(245, 158, 11, 0.12);

    /* Rose accent */
    --rose: #fb7185;
    --rose-dim: rgba(251, 113, 133, 0.12);

    /* Status */
    --success-bg: #0a1f1a;
    --success-fg: #10d98e;
    --success-bd: #0f4032;
    --danger-bg: #1c0a10;
    --danger-fg: #fb7185;
    --danger-bd: #4a1525;
    --warning-bg: #1c1408;
    --warning-fg: #f59e0b;
    --warning-bd: #4a3510;
    --info-bg: #071520;
    --info-fg: #22d3ee;
    --info-bd: #0a3a50;

    /* Easing curves */
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.45, 0, .55, 1);

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .6);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .6), 0 2px 4px rgba(0, 0, 0, .4);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, .7), 0 4px 8px rgba(0, 0, 0, .5);
    --shadow-glow: 0 0 20px var(--accent-glow), 0 0 60px rgba(100, 112, 255, .12);
    --shadow-cyan: 0 0 20px var(--cyan-glow);
}

/* ─── KEYFRAMES ──────────────────────────────────────────── */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 8px var(--accent-glow);
    }

    50% {
        box-shadow: 0 0 22px var(--accent-glow), 0 0 40px rgba(100, 112, 255, .15);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

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

@keyframes borderFlow {
    0% {
        border-color: var(--accent);
    }

    33% {
        border-color: var(--cyan);
    }

    66% {
        border-color: var(--violet);
    }

    100% {
        border-color: var(--accent);
    }
}

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: .6;
    }

    100% {
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes scanline {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100vh);
    }
}

@keyframes notificationPop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    70% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ─── BASE ───────────────────────────────────────────────── */
@supports (font-variation-settings: normal) {
    html {
        font-family: Nunito, Helvetica Neue, Helvetica, Arial, sans-serif;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
    transition-timing-function: var(--ease-out);
}

body,
html {
    height: 100%;
}

body {
    font-family: Nunito, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: .85rem;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--bg-void);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Subtle grid texture */
    background-image:
        linear-gradient(rgba(100, 112, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 112, 255, .03) 1px, transparent 1px);
    background-size: 40px 40px;
}

a {
    color: var(--accent);
    transition: color .2s, text-shadow .2s;
}

a:hover {
    color: var(--accent-hover);
    text-shadow: 0 0 10px var(--accent-glow);
    text-decoration: none;
}

h1 {
    font-weight: 300;
    font-size: 2.2rem;
    margin-bottom: 20px;
    color: var(--text-primary);
    letter-spacing: -.02em;
}

/* ─── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-void);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent), var(--cyan));
    border-radius: 3px;
    transition: opacity .2s;
}

::-webkit-scrollbar-thumb:hover {
    opacity: .8;
}

/* ─── PLACEHOLDERS ───────────────────────────────────────── */
::placeholder {
    color: var(--text-muted);
    font-style: italic;
}

::-webkit-input-placeholder {
    color: var(--text-muted);
    font-style: italic;
}

::-moz-placeholder {
    color: var(--text-muted);
    opacity: 1;
    font-style: italic;
}

:-ms-input-placeholder {
    color: var(--text-muted);
    font-style: italic;
}

/* ─── FOCUS RING ─────────────────────────────────────────── */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--accent-dim);
}

/* ─── UTILITY ────────────────────────────────────────────── */
.hide {
    display: none !important;
}

.no-underline,
.no-underline:hover {
    text-decoration: none;
}

.cursor-move {
    cursor: move;
}

.col-0 {
    width: 0;
}

.grow {
    transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-spring);
}

.grow:hover {
    transform: scale(1.12);
    box-shadow: var(--shadow-glow);
}

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

span.required {
    color: var(--rose);
}

.border-light {
    border-color: var(--border-mid) !important;
}

/* ─── LAYOUT ─────────────────────────────────────────────── */
#content-wrapper {
    min-width: 100vw;
}

@media (min-width: 992px) {
    #content-wrapper {
        min-width: 0;
        width: 100%;
    }
}

.main-wrapper {
    background-color: var(--bg-void);
    transition: transform .3s var(--ease-out), width .3s var(--ease-out), margin .3s var(--ease-out);
}

/* ─── PADDING HELPERS ────────────────────────────────────── */
.p-4-half {
    padding: 2.3rem !important;
}

.pl-4-half {
    padding-left: 2.3rem !important;
}

.pb-4-half,
.pr-4-half {
    padding-right: 2.3rem !important;
}

.pt-4-half {
    padding-top: 2.3rem !important;
}

/* ─── FLEX WIDTH HELPERS ─────────────────────────────────── */
.fw-25 {
    flex: 0 0 25px;
    -webkit-box-flex: 0;
}

.fw-80 {
    flex: 0 0 80px;
    -webkit-box-flex: 0;
}

.fw-160 {
    flex: 0 0 160px;
    -webkit-box-flex: 0;
}

/* ─── BACKGROUND COLORS ──────────────────────────────────── */
.bg-purple-100 {
    background-color: #0f1535 !important;
}

.bg-purple-500 {
    background-color: var(--accent) !important;
}

.bg-trial-header {
    background-color: var(--warning-bg);
}

.bg-success {
    background-color: var(--success-bg) !important;
    color: var(--success-fg) !important;
}

/* ─── TEXT COLOR HELPERS ─────────────────────────────────── */
a.color-purple-500,
a.color-purple-500:active,
a.color-purple-500:hover {
    color: #0f1535;
}

.color-purple-500 {
    color: var(--accent);
}

.color-gray-100 {
    color: #1a2535 !important;
}

.color-gray-200 {
    color: #243040 !important;
}

.color-gray-300 {
    color: #2d3e52 !important;
}

.color-gray-400 {
    color: #4e6882 !important;
}

.color-gray-500 {
    color: #6a8aaa !important;
}

.color-gray-600 {
    color: #8da8c8 !important;
}

.color-gray-700 {
    color: #afc4dc !important;
}

.color-gray-800 {
    color: #cfe0f0 !important;
}

/* ─── PRE / CODE ─────────────────────────────────────────── */
pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    text-align: justify;
    background-color: var(--bg-void);
    border: 1px solid var(--border-mid);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    padding: 1rem 1.2rem;
    color: var(--cyan);
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: .82rem;
    line-height: 1.7;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, .4), var(--shadow-sm);
    animation: fadeSlideUp .4s var(--ease-out) both;
    position: relative;
    overflow: hidden;
}

pre::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent-dim) 0%, transparent 60%);
    pointer-events: none;
}

/* ─── NAVBAR ─────────────────────────────────────────────── */
/* FIX: position + z-index added so navbar creates its own stacking
   context and sits above page content, preventing dropdown from
   being clipped by siblings that use transform/backdrop-filter. */
.navbar {
    position: relative;
    z-index: 1040;
    background-color: rgba(13, 16, 23, .95);
    border-bottom: 1px solid var(--border-dim);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 var(--border-dim), 0 4px 20px rgba(0, 0, 0, .4);
    animation: fadeIn .4s var(--ease-out) both;
}

.navbar-expand .navbar-nav .nav-link {
    padding-right: 0;
}

.main-header .workspace-select {
    line-height: 24px;
}

/* FIX: position:relative lets the shown dropdown anchor correctly
   to this element instead of the nearest positioned ancestor. */
.main-header .user-dropdown {
    position: relative;
    z-index: 1041;
    border: 1px solid transparent;
    line-height: 24px;
    transition: border-color .2s, box-shadow .2s;
}

.main-header .user-dropdown:hover {
    border-color: var(--border-mid);
    box-shadow: var(--shadow-sm);
}

.main-header .dropdown-item:hover .fas {
    color: var(--accent);
}

.main-header .dropdown-toggle::after {
    display: none;
}

@media (min-width: 576px) {
    .main-header .workspace-select {
        border: 1px solid rgba(255, 255, 255, .06);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
        border-radius: 6px;
        line-height: 24px;
        transition: border-color .2s, box-shadow .2s;
    }

    .main-header .workspace-select:hover {
        border-color: var(--border-mid);
        box-shadow: 0 0 0 3px var(--accent-dim);
    }
}

/* ─── SIDEBAR ────────────────────────────────────────────── */
.sidebar {
    flex: 0 0 225px;
    -webkit-box-flex: 0;
    background: linear-gradient(180deg, var(--bg-void) 0%, #0a0e15 100%);
    border-right: 1px solid var(--border-dim);
    transition: transform .15s var(--ease-out), width .15s var(--ease-out), margin .15s var(--ease-out);
}

.sidebar .sidebar-inner {
    margin: 0 1.5rem;
}

.sidebar ul {
    margin: 0;
    padding: 0;
}

.sidebar li {
    white-space: nowrap;
    overflow: hidden;
}

.sidebar li.nav-item {
    color: var(--text-primary);
    margin-bottom: .2rem;
    padding: 0;
    animation: slideInLeft .35s var(--ease-out) both;
}

.sidebar li.nav-item:nth-child(1) {
    animation-delay: .05s;
}

.sidebar li.nav-item:nth-child(2) {
    animation-delay: .10s;
}

.sidebar li.nav-item:nth-child(3) {
    animation-delay: .15s;
}

.sidebar li.nav-item:nth-child(4) {
    animation-delay: .20s;
}

.sidebar li.nav-item:nth-child(5) {
    animation-delay: .25s;
}

.sidebar li.nav-item:nth-child(6) {
    animation-delay: .30s;
}

.sidebar li.nav-item:nth-child(7) {
    animation-delay: .35s;
}

.sidebar li.nav-item:nth-child(8) {
    animation-delay: .40s;
}

.sidebar li.nav-item a.nav-link {
    color: var(--text-secondary);
    font-weight: 400;
    font-size: .88rem;
    padding: .65rem 0 .65rem 1.2rem;
    border-left: 3px solid transparent;
    border-radius: 6px;
    transition: color .2s, background .2s, border-color .2s, box-shadow .2s, padding-left .2s;
    position: relative;
    overflow: hidden;
}

.sidebar li.nav-item a.nav-link::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--accent-dim) 0%, transparent 80%);
    opacity: 0;
    transition: opacity .2s;
}

.sidebar li.nav-item a.nav-link .fas {
    color: var(--text-muted);
    transition: color .2s, transform .2s;
}

.sidebar li.nav-item a.nav-link:hover {
    background: var(--bg-raised);
    border-left-color: var(--accent);
    color: var(--text-primary);
    padding-left: 1.4rem;
    box-shadow: inset 0 0 20px rgba(100, 112, 255, .05);
}

.sidebar li.nav-item a.nav-link:hover::after {
    opacity: 1;
}

.sidebar li.nav-item a.nav-link:hover .fas {
    color: var(--accent);
    transform: translateX(2px);
}

.sidebar li.nav-item.active a.nav-link {
    color: #fff;
    background: linear-gradient(90deg, rgba(100, 112, 255, .15) 0%, rgba(100, 112, 255, .04) 100%);
    border-left-color: var(--accent);
    box-shadow: inset 0 0 20px rgba(100, 112, 255, .08), 0 0 10px rgba(100, 112, 255, .06);
}

.sidebar li.nav-item.active a.nav-link .fas {
    color: var(--accent);
}

.sidebar li.nav-item.active a.nav-link::after {
    opacity: 1;
}

.sidebar .metismenu ul a {
    padding: 5px 0 5px 40px;
    color: var(--text-muted);
    transition: color .2s;
}

.sidebar .metismenu ul a:hover {
    color: var(--accent);
}

/* ─── CARD ───────────────────────────────────────────────── */
.card {
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-dim);
    margin-bottom: 16px;
    background-color: var(--bg-raised);
    transition: box-shadow .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out);
    animation: fadeSlideUp .45s var(--ease-out) both;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--cyan), transparent);
    opacity: 0;
    transition: opacity .3s;
}

.card:hover {
    box-shadow: var(--shadow-lg), 0 0 30px rgba(100, 112, 255, .08);
    border-color: var(--border-mid);
    transform: translateY(-1px);
}

.card:hover::before {
    opacity: 1;
}

.card .card-header {
    background-color: transparent;
    font-weight: 600;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-dim);
    font-size: 1.3rem;
    color: var(--text-primary);
    position: relative;
}

.card .card-header .card-filters {
    margin-top: 1rem;
    padding-top: 1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    border-top: 1px solid var(--border-dim);
}

.card .card-header .h5,
.card .card-header h5 {
    font-size: 1.2rem;
    margin-bottom: 0;
    margin-top: .2rem;
    color: var(--text-muted);
}

.card .card-body {
    background-color: transparent;
    color: var(--text-primary);
}

.card .card-table {
    padding: 0;
}

/* ─── WIDGET ─────────────────────────────────────────────── */
.widget {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background: linear-gradient(135deg, var(--bg-raised) 0%, var(--bg-overlay) 100%);
    background-clip: border-box;
    border-radius: 10px;
    border: 1px solid var(--border-dim);
    border-bottom: 2px solid var(--accent);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    transition: box-shadow .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-spring);
    overflow: hidden;
}

.widget::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--cyan));
    transition: width .4s var(--ease-out);
}

.widget:hover {
    box-shadow: var(--shadow-lg), 0 0 25px var(--accent-glow);
    transform: translateY(-2px);
    border-bottom-color: var(--cyan);
}

.widget:hover::after {
    width: 100%;
}

.widget .h2 {
    font-weight: 400;
}

.widget .fal {
    color: var(--text-muted);
}

/* ─── TABLE ──────────────────────────────────────────────── */
.table {
    color: var(--text-primary);
}

.table thead th {
    border-bottom: 1px solid var(--border-mid);
    background: linear-gradient(180deg, var(--bg-float) 0%, var(--bg-overlay) 100%);
    color: var(--text-secondary);
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .9rem .8rem;
}

.table th {
    background-color: var(--bg-overlay);
    color: var(--text-secondary);
}

.table td,
.table th {
    padding: .8rem;
    border-top: 1px solid var(--border-dim);
    transition: background-color .15s;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(100, 112, 255, .03);
}

.table-hover tbody tr:hover {
    background-color: rgba(100, 112, 255, .07);
    box-shadow: inset 3px 0 0 var(--accent);
}

.table tbody tr.active {
    background: linear-gradient(90deg, rgba(100, 112, 255, .18), rgba(100, 112, 255, .06));
    color: #fff;
    box-shadow: inset 3px 0 0 var(--accent);
}

/* ─── FORM CONTROLS ──────────────────────────────────────── */
.form-control {
    border: 1px solid var(--border-mid);
    background-color: var(--bg-overlay);
    color: var(--text-primary);
    border-radius: 6px;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim), 0 0 12px var(--accent-glow);
    background-color: var(--bg-float);
    color: var(--text-primary);
}

.form-control:hover:not(:focus) {
    border-color: var(--border-lit);
}

.form-check-label,
.form-control {
    font-size: .85rem;
}

.form-row .form-group label {
    margin-bottom: .1rem;
    color: var(--text-secondary);
}

.input-group-text {
    font-size: .85rem;
    background-color: var(--bg-float);
    border-color: var(--border-mid);
    color: var(--text-secondary);
}

.input-group-prepend {
    min-width: 40px;
}

@media (min-width: 576px) {
    .card-filters .form-group {
        margin-bottom: 0;
    }
}

.form-control.datepicker {
    padding: .25rem .5rem;
}

/* ─── CHECKBOX ───────────────────────────────────────────── */
.abc-checkbox {
    cursor: default;
    padding-left: 4px;
}

.abc-checkbox label {
    cursor: pointer;
    display: inline;
    vertical-align: top;
    position: relative;
    padding-left: 5px;
}

.abc-checkbox label:before {
    content: "";
    width: 17px;
    height: 17px;
    border: 1px solid var(--border-lit);
    border-radius: 4px;
    background-color: var(--bg-overlay);
    transition: border .15s, background-color .15s, box-shadow .15s;
}

.abc-checkbox label:after,
.abc-checkbox label:before {
    cursor: pointer;
    display: inline-block;
    position: absolute;
    top: 2px;
    left: 0;
    margin-left: -20px;
}

.abc-checkbox label:after {
    width: 16px;
    height: 16px;
    padding-left: 3px;
    padding-top: 1px;
    font-size: 11px;
    color: #fff;
}

.abc-checkbox input[type=checkbox],
.abc-checkbox input[type=radio] {
    position: static;
    margin-left: 0;
    cursor: pointer;
    opacity: 0;
    z-index: 1;
}

.abc-checkbox input[type=checkbox]:focus+label:before,
.abc-checkbox input[type=radio]:focus+label:before {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.abc-checkbox input[type=checkbox]:checked+label:after,
.abc-checkbox input[type=radio]:checked+label:after {
    font-family: 'Font Awesome 5 Pro';
    content: "\f00c";
}

.abc-checkbox input[type=checkbox]:indeterminate+label:after,
.abc-checkbox input[type=radio]:indeterminate+label:after {
    display: block;
    content: "";
    width: 10px;
    height: 3px;
    background-color: #fff;
    border-radius: 2px;
    margin-left: -16.5px;
    margin-top: 7px;
}

.abc-checkbox input[type=checkbox]:disabled+label,
.abc-checkbox input[type=radio]:disabled+label {
    opacity: .45;
}

.abc-checkbox input[type=checkbox]:disabled+label:before,
.abc-checkbox input[type=radio]:disabled+label:before {
    background-color: var(--bg-raised);
    cursor: not-allowed;
}

.abc-checkbox.abc-checkbox-circle label:before {
    border-radius: 50%;
}

.abc-checkbox.checkbox-inline {
    margin-top: 0;
}

/* Checkbox variants */
.abc-checkbox-primary input[type=checkbox]:checked+label:before,
.abc-checkbox-primary input[type=radio]:checked+label:before {
    background-color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
}

.abc-checkbox-primary input[type=checkbox]:checked+label:after,
.abc-checkbox-primary input[type=radio]:checked+label:after {
    color: #fff;
}

.abc-checkbox-danger input[type=checkbox]:checked+label:before,
.abc-checkbox-danger input[type=radio]:checked+label:before {
    background-color: var(--rose);
    border-color: var(--rose);
    box-shadow: 0 0 8px rgba(251, 113, 133, .4);
}

.abc-checkbox-danger input[type=checkbox]:checked+label:after,
.abc-checkbox-danger input[type=radio]:checked+label:after {
    color: #fff;
}

.abc-checkbox-info input[type=checkbox]:checked+label:before,
.abc-checkbox-info input[type=radio]:checked+label:before {
    background-color: var(--cyan);
    border-color: var(--cyan);
    box-shadow: 0 0 8px var(--cyan-glow);
}

.abc-checkbox-info input[type=checkbox]:checked+label:after,
.abc-checkbox-info input[type=radio]:checked+label:after {
    color: #fff;
}

.abc-checkbox-warning input[type=checkbox]:checked+label:before,
.abc-checkbox-warning input[type=radio]:checked+label:before {
    background-color: var(--amber);
    border-color: var(--amber);
    box-shadow: 0 0 8px rgba(245, 158, 11, .4);
}

.abc-checkbox-warning input[type=checkbox]:checked+label:after,
.abc-checkbox-warning input[type=radio]:checked+label:after {
    color: #fff;
}

.abc-checkbox-success input[type=checkbox]:checked+label:before,
.abc-checkbox-success input[type=radio]:checked+label:before {
    background-color: var(--emerald);
    border-color: var(--emerald);
    box-shadow: 0 0 8px rgba(16, 217, 142, .4);
}

.abc-checkbox-success input[type=checkbox]:checked+label:after,
.abc-checkbox-success input[type=radio]:checked+label:after {
    color: #fff;
}

/* Indeterminate variants */
.abc-checkbox-primary input[type=checkbox]:indeterminate+label:before,
.abc-checkbox-primary input[type=radio]:indeterminate+label:before {
    background-color: var(--accent);
    border-color: var(--accent);
}

.abc-checkbox-primary input[type=checkbox]:indeterminate+label:after,
.abc-checkbox-primary input[type=radio]:indeterminate+label:after {
    background-color: #fff;
}

.abc-checkbox-danger input[type=checkbox]:indeterminate+label:before,
.abc-checkbox-danger input[type=radio]:indeterminate+label:before {
    background-color: var(--rose);
    border-color: var(--rose);
}

.abc-checkbox-danger input[type=checkbox]:indeterminate+label:after,
.abc-checkbox-danger input[type=radio]:indeterminate+label:after {
    background-color: #fff;
}

.abc-checkbox-info input[type=checkbox]:indeterminate+label:before,
.abc-checkbox-info input[type=radio]:indeterminate+label:before {
    background-color: var(--cyan);
    border-color: var(--cyan);
}

.abc-checkbox-info input[type=checkbox]:indeterminate+label:after,
.abc-checkbox-info input[type=radio]:indeterminate+label:after {
    background-color: #fff;
}

.abc-checkbox-warning input[type=checkbox]:indeterminate+label:before,
.abc-checkbox-warning input[type=radio]:indeterminate+label:before {
    background-color: var(--amber);
    border-color: var(--amber);
}

.abc-checkbox-warning input[type=checkbox]:indeterminate+label:after,
.abc-checkbox-warning input[type=radio]:indeterminate+label:after {
    background-color: #fff;
}

.abc-checkbox-success input[type=checkbox]:indeterminate+label:before,
.abc-checkbox-success input[type=radio]:indeterminate+label:before {
    background-color: var(--emerald);
    border-color: var(--emerald);
}

.abc-checkbox-success input[type=checkbox]:indeterminate+label:after,
.abc-checkbox-success input[type=radio]:indeterminate+label:after {
    background-color: #fff;
}

/* ─── RADIO ──────────────────────────────────────────────── */
.abc-radio {
    cursor: default;
    padding-left: 4px;
}

.abc-radio label {
    cursor: pointer;
    display: inline;
    vertical-align: top;
    position: relative;
    padding-left: 5px;
}

.abc-radio label:before {
    content: "";
    width: 17px;
    height: 17px;
    top: 2px;
    left: 0;
    border: 1px solid var(--border-lit);
    border-radius: 50%;
    background-color: var(--bg-overlay);
    transition: border .15s, box-shadow .15s;
}

.abc-radio label:after,
.abc-radio label:before {
    cursor: pointer;
    display: inline-block;
    position: absolute;
    margin-left: -20px;
}

.abc-radio label:after {
    content: " ";
    width: 9px;
    height: 9px;
    left: 4px;
    top: 6px;
    border-radius: 50%;
    background-color: #fff;
    transform: scale(0);
    transition: transform .15s cubic-bezier(.34, 1.56, .64, 1);
}

.abc-radio input[type=radio] {
    position: static;
    margin-left: 0;
    cursor: pointer;
    opacity: 0;
    z-index: 1;
}

.abc-radio input[type=radio]:focus+label:before {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.abc-radio input[type=radio]:checked+label:after {
    transform: scale(1);
}

.abc-radio input[type=radio]:disabled+label {
    opacity: .45;
}

.abc-radio input[type=radio]:disabled+label:after,
.abc-radio input[type=radio]:disabled+label:before {
    cursor: not-allowed;
}

.abc-radio.radio-inline {
    margin-top: 0;
}

/* Radio variants */
.abc-radio-primary input[type=radio]+label:after {
    background-color: var(--accent);
}

.abc-radio-primary input[type=radio]:checked+label:before {
    border-color: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
}

.abc-radio-primary input[type=radio]:checked+label:after {
    background-color: var(--accent);
}

.abc-radio-danger input[type=radio]+label:after {
    background-color: var(--rose);
}

.abc-radio-danger input[type=radio]:checked+label:before {
    border-color: var(--rose);
    box-shadow: 0 0 8px rgba(251, 113, 133, .4);
}

.abc-radio-danger input[type=radio]:checked+label:after {
    background-color: var(--rose);
}

.abc-radio-info input[type=radio]+label:after {
    background-color: var(--cyan);
}

.abc-radio-info input[type=radio]:checked+label:before {
    border-color: var(--cyan);
    box-shadow: 0 0 8px var(--cyan-glow);
}

.abc-radio-info input[type=radio]:checked+label:after {
    background-color: var(--cyan);
}

.abc-radio-warning input[type=radio]+label:after {
    background-color: var(--amber);
}

.abc-radio-warning input[type=radio]:checked+label:before {
    border-color: var(--amber);
    box-shadow: 0 0 8px rgba(245, 158, 11, .4);
}

.abc-radio-warning input[type=radio]:checked+label:after {
    background-color: var(--amber);
}

.abc-radio-success input[type=radio]+label:after {
    background-color: var(--emerald);
}

.abc-radio-success input[type=radio]:checked+label:before {
    border-color: var(--emerald);
    box-shadow: 0 0 8px rgba(16, 217, 142, .4);
}

.abc-radio-success input[type=radio]:checked+label:after {
    background-color: var(--emerald);
}

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: none;
}

button:disabled {
    cursor: not-allowed;
}

/* Ripple base */
.btn {
    position: relative;
    overflow: hidden;
    transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .15s var(--ease-spring);
}

.btn::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, .4);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
    transition: transform 0s, opacity 0s;
}

.btn:active::after {
    transform: scale(60);
    opacity: 0;
    transition: transform .5s var(--ease-out), opacity .5s var(--ease-out);
}

.btn:active {
    transform: scale(.97);
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, #7c45f0 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 15px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .15);
}

.btn-primary .badge {
    color: rgba(255, 255, 255, .7);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-hover) 0%, #8a55ff 100%);
    border-color: transparent;
    box-shadow: 0 6px 20px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .2);
    transform: translateY(-1px);
}

.btn-primary:not(:disabled):not(.disabled):active {
    background: linear-gradient(135deg, var(--accent-active) 0%, #6830d0 100%);
    transform: translateY(0);
}

.btn-secondary {
    background-color: var(--bg-float);
    border: 1px solid var(--border-mid);
    color: var(--accent);
}

.btn-secondary:hover {
    background-color: var(--bg-subtle);
    border-color: var(--accent);
    color: var(--accent-hover);
    box-shadow: 0 0 12px var(--accent-dim);
}

.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show>.btn-secondary.dropdown-toggle {
    background-color: var(--bg-subtle);
    border-color: var(--border-lit);
    color: var(--accent);
}

.btn-light {
    color: var(--text-primary);
    background-color: var(--bg-float);
    border: 1px solid var(--border-mid);
}

.btn-light:hover {
    color: #fff;
    background-color: var(--bg-subtle);
    border: 1px solid var(--border-lit);
}

.btn-light:not(:disabled):not(.disabled).active,
.btn-light:not(:disabled):not(.disabled):active,
.show>.btn-light.dropdown-toggle {
    color: #fff;
    background-color: var(--bg-subtle);
    border-color: var(--border-lit);
}

a.btn-link {
    color: var(--accent);
}

a.btn-link:hover {
    color: var(--accent-hover);
}

.btn-filter {
    padding: .26rem 1rem !important;
}

.btn-outline-primary {
    color: var(--accent);
    border-color: var(--accent);
    background: transparent;
}

.btn-outline-primary:hover {
    background: linear-gradient(135deg, var(--accent) 0%, #7c45f0 100%);
    color: #fff;
    box-shadow: 0 4px 15px var(--accent-glow);
    border-color: transparent;
}

.btn-xs {
    padding: .4rem;
    font-size: .7rem;
    line-height: .5;
    border-radius: .2rem;
}

.btn-wide {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.btn-group-sm>.btn,
.btn-sm {
    padding: .4rem 1rem;
    line-height: 1.5;
}

.btn .badge {
    color: var(--text-secondary);
    top: auto;
}

.btn-group .btn {
    border: 1px solid var(--border-mid);
    color: var(--text-primary);
    background-color: var(--bg-float);
    transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}

.btn-group .btn:hover {
    background-color: var(--bg-subtle);
    border-color: var(--border-lit);
    z-index: 1;
}

.btn-group .btn-primary {
    color: #fff;
}

.btn-group-sm>.btn,
.btn-sm {
    font-size: .75rem;
    padding: .2rem .5rem;
}

.btn-group-md>.btn,
.btn-md {
    font-size: .8rem;
    padding: .35rem .75rem;
}

/* ─── DROPDOWN ───────────────────────────────────────────── */
/* FIX: position:absolute + z-index:1050 ensures the menu always
   renders on top of all page content including transformed/
   backdrop-filtered elements. overflow:visible overrides any
   inherited clip from parent stacking contexts. */
.dropdown-menu {
    font-size: .85rem;
    background: var(--bg-float);
    border: 1px solid var(--border-mid);
    box-shadow: var(--shadow-lg), 0 0 30px rgba(0, 0, 0, .5);
    border-radius: 8px;
    color: var(--text-primary);
    animation: fadeSlideUp .2s var(--ease-out) both;
    backdrop-filter: blur(10px);
    overflow: visible;
    position: absolute;
    z-index: 1050;
}

/* FIX: Explicit right-aligned positioning for .dropdown-menu-right.show
   so Bootstrap's JS toggling (which adds .show) works correctly and
   the menu anchors to the right edge of the toggle button. */
.dropdown-menu-right.show {
    display: block;
    position: absolute;
    right: 0;
    left: auto;
    top: 100%;
    z-index: 1050;
}

.dropdown-menu .dropdown-item {
    color: var(--text-primary);
    transition: background-color .15s, color .15s, padding-left .15s;
    border-radius: 4px;
    margin: 1px 4px;
}

.dropdown-menu .dropdown-item:hover {
    background-color: var(--accent-dim);
    color: var(--accent-hover);
    padding-left: 1.4rem;
    box-shadow: inset 2px 0 0 var(--accent);
}

/* ─── NAV PILLS ──────────────────────────────────────────── */
.nav-pills a.nav-link {
    border-radius: 0;
    color: var(--text-secondary);
    padding: .4rem .8rem .3rem;
    margin-right: .5rem;
    transition: color .2s, border-color .2s, background-color .2s;
    border-bottom: 3px solid transparent;
    position: relative;
}

.nav-pills a.nav-link.active {
    background-color: transparent;
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.nav-pills a.nav-link.active,
.nav-pills a.nav-link:hover {
    border-bottom: 3px solid var(--accent);
    border-radius: 3px;
    color: var(--accent);
}

/* ─── PAGINATION ─────────────────────────────────────────── */
ul.pagination {
    margin-bottom: 0;
}

ul.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--accent) 0%, #7c45f0 100%);
    border-color: transparent;
    box-shadow: 0 4px 12px var(--accent-glow);
}

ul.pagination .page-link {
    color: var(--text-primary);
    background-color: var(--bg-float);
    border-color: var(--border-mid);
    transition: background-color .2s, border-color .2s, box-shadow .2s, transform .15s var(--ease-spring);
}

ul.pagination .page-link:hover {
    background-color: var(--bg-subtle);
    color: var(--accent);
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--accent-dim);
}

/* ─── MODAL ──────────────────────────────────────────────── */
.modal-content {
    background-color: var(--bg-raised);
    border: 1px solid var(--border-mid);
    border-radius: 12px;
    box-shadow: var(--shadow-lg), 0 0 50px rgba(100, 112, 255, .12);
    animation: fadeSlideUp .3s var(--ease-out) both;
    overflow: hidden;
}

.modal-header {
    border-bottom-color: var(--border-dim);
    background: linear-gradient(135deg, var(--bg-overlay) 0%, var(--bg-raised) 100%);
    position: relative;
}

.modal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--cyan), transparent);
    opacity: .5;
}

.modal-footer {
    border-top-color: var(--border-dim);
}

.modal-header .close {
    color: var(--text-primary);
    text-shadow: none;
    opacity: .6;
    transition: opacity .2s, transform .2s var(--ease-spring);
}

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

/* Slide-in modal */
.modal-left .modal-dialog {
    position: fixed;
    margin: auto;
    width: 200px;
    height: 100%;
    transform: translateZ(0);
}

.modal-left .modal-content {
    overflow-y: auto;
    height: 100%;
    border-radius: 0;
}

.modal-left.fade .modal-dialog {
    left: -200px;
    transition: opacity .2s linear, left .25s var(--ease-out);
}

.modal-left.fade.show .modal-dialog {
    left: 0;
}

/* ─── ALERTS ─────────────────────────────────────────────── */
.alert ul {
    margin-bottom: 0;
}

.alert {
    border-radius: 8px;
    animation: fadeSlideUp .35s var(--ease-out) both;
    position: relative;
    overflow: hidden;
}

.alert::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}

.alert-info {
    background-color: var(--info-bg);
    border-color: var(--info-bd);
    color: var(--info-fg);
}

.alert-info::before {
    background: var(--cyan);
}

.alert-success {
    background-color: var(--success-bg);
    border-color: var(--success-bd);
    color: var(--success-fg);
}

.alert-success::before {
    background: var(--emerald);
}

.alert-warning {
    background-color: var(--warning-bg);
    border-color: var(--warning-bd);
    color: var(--warning-fg);
}

.alert-warning::before {
    background: var(--amber);
}

.alert-danger {
    background-color: var(--danger-bg);
    border-color: var(--danger-bd);
    color: var(--danger-fg);
}

.alert-danger::before {
    background: var(--rose);
}

/* ─── BADGES ─────────────────────────────────────────────── */
.badge {
    letter-spacing: .075em;
    padding: .3rem .55rem;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 700;
    animation: notificationPop .35s var(--ease-spring) both;
    transition: box-shadow .2s, transform .2s var(--ease-spring);
}

.badge:hover {
    transform: scale(1.08);
}

.badge-light {
    background-color: var(--bg-float);
    color: var(--text-primary);
}

.badge-success {
    background-color: var(--success-bg);
    color: var(--success-fg);
    box-shadow: 0 0 8px rgba(16, 217, 142, .2);
}

.badge-danger {
    background-color: var(--danger-bg);
    color: var(--danger-fg);
    box-shadow: 0 0 8px rgba(251, 113, 133, .2);
}

.badge-warning {
    background-color: var(--warning-bg);
    color: var(--warning-fg);
    box-shadow: 0 0 8px rgba(245, 158, 11, .2);
}

.badge-info {
    background-color: var(--info-bg);
    color: var(--info-fg);
    box-shadow: 0 0 8px rgba(34, 211, 238, .2);
}

/* ─── PROGRESS ───────────────────────────────────────────── */
.progress {
    background-color: var(--bg-float);
    border-radius: 99px;
    height: 6px;
    overflow: visible;
}

.progress-bar {
    background: linear-gradient(90deg, var(--accent) 0%, var(--cyan) 50%, var(--violet) 100%);
    background-size: 200% 100%;
    animation: gradientShift 3s var(--ease-in-out) infinite;
    border-radius: 99px;
    box-shadow: 0 0 10px var(--accent-glow);
    transition: width .6s var(--ease-out);
}

/* ─── SELECT2 ────────────────────────────────────────────── */
.select2 {
    width: 100% !important;
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--border-mid);
    background-color: var(--bg-overlay);
    border-radius: 6px;
    transition: border-color .2s, box-shadow .2s;
}

.select2-container .select2-selection--multiple {
    min-height: 30px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 3px;
    background-color: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent-hover);
    border-radius: 4px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.select2-container .select2-search--inline .select2-search__field {
    margin-top: 2px;
    background-color: var(--bg-overlay);
    color: var(--text-primary);
}

.select2-dropdown {
    background-color: var(--bg-float);
    border-color: var(--border-mid);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--accent-dim);
    color: var(--accent-hover);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgba(100, 112, 255, .15);
    color: var(--text-primary);
}

.select2-container .select2-search--inline .select2-search__field::placeholder {
    padding-top: 5px;
}

/* ─── BOOTSTRAP SELECT ───────────────────────────────────── */
.bootstrap-select>.dropdown-toggle {
    background-color: var(--bg-overlay);
    border-color: var(--border-mid);
    color: var(--text-primary);
    transition: border-color .2s, box-shadow .2s;
}

.bootstrap-select>.dropdown-toggle:hover {
    border-color: var(--border-lit);
}

.bootstrap-select .dropdown-menu {
    background-color: var(--bg-float);
    border-color: var(--border-mid);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
}

.bootstrap-select .dropdown-item:hover,
.bootstrap-select .dropdown-item:focus {
    background-color: var(--accent-dim);
    color: var(--accent-hover);
}

.filter-option-inner-inner {
    font-size: .85rem;
}

/* ─── NOTE EDITOR ────────────────────────────────────────── */
.note-editor.note-frame {
    border: 1px solid var(--border-mid);
    background-color: var(--bg-overlay);
    border-radius: 8px;
    overflow: hidden;
}

.note-editor.note-frame .note-editing-area {
    background-color: var(--bg-overlay);
    color: var(--text-primary);
}

.note-editor.note-frame .note-toolbar {
    background-color: var(--bg-float);
    border-bottom-color: var(--border-mid);
}

.note-editor.note-frame .note-statusbar {
    background-color: var(--bg-float);
    border-top-color: var(--border-mid);
}

.note-editor.note-frame .note-editing-area .note-codable {
    background-color: var(--bg-void);
    color: var(--cyan);
}

/* ─── STEP ROW ───────────────────────────────────────────── */
.step-row {
    transition: all .25s var(--ease-out);
    border-left: 3px solid var(--border-mid) !important;
    background: var(--bg-raised);
    border-radius: 8px;
    margin-bottom: .5rem;
    position: relative;
    overflow: hidden;
}

.step-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--accent-dim) 0%, transparent 50%);
    opacity: 0;
    transition: opacity .25s;
}

.step-row:hover {
    border-left-color: var(--accent) !important;
    box-shadow: var(--shadow-md), -4px 0 20px var(--accent-dim);
    background: var(--bg-overlay);
    transform: translateX(2px);
}

.step-row:hover::before {
    opacity: 1;
}

.step-number-badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, var(--violet) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: .9rem;
    box-shadow: 0 0 12px var(--accent-glow);
    animation: float 3s ease-in-out infinite;
}

.config-panel {
    background: var(--bg-overlay);
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
    border: 1px solid var(--border-mid);
    animation: fadeSlideUp .3s var(--ease-out) both;
    position: relative;
    overflow: hidden;
}

.config-panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--cyan), var(--violet));
    animation: gradientShift 4s linear infinite;
    background-size: 200% 100%;
}

/* ─── ERROR LISTING ──────────────────────────────────────── */
.error-listing .card,
.error-listing .card .card-body {
    padding-top: 0;
    padding-bottom: 0;
}

.error-listing .card .row {
    border-bottom: 1px solid var(--border-dim);
    padding-top: 1rem;
    padding-bottom: 1rem;
    transition: background-color .2s;
}

.error-listing .card .row:hover {
    background-color: rgba(100, 112, 255, .04);
}

.error-listing .card .row:last-of-type {
    border-bottom: none;
}

.error-listing .card .error-name {
    font-weight: 700;
}

.error-listing .card .error-name span {
    font-weight: 400;
    color: var(--text-muted);
    font-size: .7rem;
}

/* ─── CARD TABLE ─────────────────────────────────────────── */
.card-table .table {
    margin-bottom: 0;
}

.card-table .table th {
    border-top: none;
}

/* ─── EMPTY TABLE TEXT ───────────────────────────────────── */
.empty-table-text {
    margin: 0 2rem;
    text-align: center;
    color: var(--text-muted);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* ─── SUB PLANS ──────────────────────────────────────────── */
.sub-plans label {
    line-height: 24px;
}

/* ─── PAGE SIGNIN ────────────────────────────────────────── */
.page-signin-alt .signin-password {
    position: relative;
}

.page-signin-alt .signin-password .forgot {
    position: absolute;
    right: 7px;
    top: 7px;
    color: var(--text-secondary);
    background: var(--bg-overlay);
    border-radius: 4px;
    line-height: 25px;
    padding: 0 7px;
    font-size: 12px;
    transition: color .2s, background-color .2s;
}

.page-signin-alt .signin-password .forgot:hover {
    color: var(--accent);
    background: var(--bg-float);
}

/* ─── SIDEBAR MODAL ──────────────────────────────────────── */
.sidebar.modal .close {
    position: absolute;
    right: 5px;
    top: 2px;
    color: #fff;
    text-shadow: 0 1px 0 #000;
    opacity: .8;
    transition: opacity .2s, transform .2s var(--ease-spring);
}

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

/* ─── LIST GROUP ─────────────────────────────────────────── */
.list-group-item {
    background-color: var(--bg-raised);
    border-color: var(--border-dim);
    color: var(--text-primary);
    transition: background-color .2s, border-color .2s, padding-left .2s, box-shadow .2s;
}

.list-group-item-action:hover {
    background-color: var(--bg-overlay);
    color: var(--accent);
    border-color: var(--border-mid);
    padding-left: 1.6rem;
    box-shadow: inset 3px 0 0 var(--accent);
}

/* ─── TAG FILTER ─────────────────────────────────────────── */
#tagFilterSelector button {
    padding: .25rem .5rem !important;
}

/* ─── SHIMMER LOADING ────────────────────────────────────── */
.shimmer {
    background: linear-gradient(90deg,
            var(--bg-float) 25%,
            var(--bg-subtle) 50%,
            var(--bg-float) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.6s infinite;
    border-radius: 4px;
}

/* ─── GLOW UTILITIES ─────────────────────────────────────── */
.glow-accent {
    box-shadow: 0 0 20px var(--accent-glow), 0 0 60px rgba(100, 112, 255, .1);
}

.glow-cyan {
    box-shadow: 0 0 20px var(--cyan-glow);
}

.glow-violet {
    box-shadow: 0 0 20px var(--violet-glow);
}

.text-glow-accent {
    text-shadow: 0 0 15px var(--accent-glow);
}

.text-glow-cyan {
    text-shadow: 0 0 15px var(--cyan-glow);
}

/* ─── GRADIENT TEXT ──────────────────────────────────────── */
.gradient-text {
    background: linear-gradient(90deg, var(--accent), var(--cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ─── ANIMATED BORDER ────────────────────────────────────── */
.border-animated {
    animation: borderFlow 4s linear infinite;
}

/* ─── PULSE ANIMATION ────────────────────────────────────── */
.pulse {
    animation: pulseGlow 2.5s ease-in-out infinite;
}

/* ─── FLOAT ANIMATION ────────────────────────────────────── */
.float {
    animation: float 3s ease-in-out infinite;
}

/* ─── ANIMATED ENTRY ─────────────────────────────────────── */
.animate-in {
    animation: fadeSlideUp .45s var(--ease-out) both;
}

/* ─── STAGGERED CHILD ANIMATIONS ────────────────────────── */
.stagger-children>*:nth-child(1) {
    animation: fadeSlideUp .4s var(--ease-out) .05s both;
}

.stagger-children>*:nth-child(2) {
    animation: fadeSlideUp .4s var(--ease-out) .10s both;
}

.stagger-children>*:nth-child(3) {
    animation: fadeSlideUp .4s var(--ease-out) .15s both;
}

.stagger-children>*:nth-child(4) {
    animation: fadeSlideUp .4s var(--ease-out) .20s both;
}

.stagger-children>*:nth-child(5) {
    animation: fadeSlideUp .4s var(--ease-out) .25s both;
}

.stagger-children>*:nth-child(6) {
    animation: fadeSlideUp .4s var(--ease-out) .30s both;
}

/* ─── REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}