/* NEXUS 2026 premium UI layer.
   Frontend-only design tokens and component polish for Bootstrap + Blade views. */

:root {
    color-scheme: light;
    --nx-primary: #4f46e5;
    --nx-primary-dark: #3730a3;
    --nx-primary-soft: #eef2ff;
    --nx-secondary: #10b981;
    --nx-accent: #f59e0b;
    --nx-danger: #ef4444;
    --nx-info: #0ea5e9;
    --nx-icon-ink: #475569;
    --nx-icon-accent: #4f46e5;
    --nx-icon-bg: rgba(79, 70, 229, .075);
    --nx-icon-border: rgba(79, 70, 229, .12);
    --nx-dark: #111827;
    --nx-text: #1c1e21;
    --nx-heading: #111827;
    --nx-muted: #4b5563;
    --nx-subtle: #64748b;
    --nx-bg: #f8fafc;
    --nx-bg-elevated: #fbfdff;
    --nx-card: #ffffff;
    --nx-card-glass: rgba(255, 255, 255, .78);
    --nx-border: #e5e7eb;
    --nx-border-strong: #d8dee9;
    --nx-sidebar: rgba(255, 255, 255, .82);
    --nx-radius-sm: 10px;
    --nx-radius: 14px;
    --nx-radius-lg: 20px;
    --nx-radius-xl: 28px;
    --nx-btn-radius: 11px;
    --nx-input-radius: 12px;
    --nx-card-radius: 18px;
    --nx-space-1: 4px;
    --nx-space-2: 8px;
    --nx-space-3: 12px;
    --nx-space-4: 16px;
    --nx-space-5: 20px;
    --nx-space-6: 24px;
    --nx-space-8: 32px;
    --nx-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --nx-shadow-sm: 0 6px 18px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --nx-shadow-md: 0 16px 44px rgba(15, 23, 42, .09), 0 3px 10px rgba(15, 23, 42, .05);
    --nx-shadow-lg: 0 26px 70px rgba(15, 23, 42, .13), 0 8px 24px rgba(99, 91, 255, .08);
    --nx-ring: 0 0 0 4px rgba(99, 91, 255, .16);
    --nx-transition: 180ms cubic-bezier(.2, .8, .2, 1);
    --nx-transition-spring: 320ms cubic-bezier(.16, 1, .3, 1);
    --nx-font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --nx-font-serif: "Source Serif 4", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --nx-btn-height: 38px;
    --nx-btn-height-sm: 32px;
    --nx-btn-height-lg: 44px;
    --nx-btn-pad-x: .9rem;
    --nx-btn-pad-y: .46rem;

    --bs-primary: var(--nx-primary);
    --bs-primary-rgb: 99, 91, 255;
    --bs-link-color: var(--nx-primary);
    --bs-link-hover-color: var(--nx-primary-dark);

    --adm-primary: var(--nx-primary);
    --adm-primary-dark: var(--nx-primary-dark);
    --adm-bg: var(--nx-bg);
    --adm-card: var(--nx-card);
    --adm-border: var(--nx-border);
    --adm-text: var(--nx-text);
    --adm-text-2: var(--nx-muted);
    --adm-text-3: var(--nx-subtle);
    --adm-shadow: var(--nx-shadow-sm);
    --adm-shadow-md: var(--nx-shadow-md);
    --adm-sb-bg: var(--nx-sidebar);
    --adm-sb-border: rgba(226, 232, 240, .76);
    --adm-sb-item-active: rgba(99, 91, 255, .12);
}

[data-theme="dark"] {
    color-scheme: dark;
    --nx-text: #f1f5f9;
    --nx-heading: #f8fafc;
    --nx-muted: #cbd5e1;
    --nx-subtle: #94a3b8;
    --nx-bg: #0b1020;
    --nx-bg-elevated: #10172a;
    --nx-card: #111827;
    --nx-card-glass: rgba(17, 24, 39, .78);
    --nx-border: rgba(255, 255, 255, .09);
    --nx-border-strong: rgba(255, 255, 255, .14);
    --nx-sidebar: rgba(12, 18, 32, .82);
    --nx-icon-ink: #cbd5e1;
    --nx-icon-accent: #a5b4fc;
    --nx-icon-bg: rgba(255, 255, 255, .06);
    --nx-icon-border: rgba(255, 255, 255, .09);
}

html {
    font-size: 16px;
    background: var(--nx-bg);
}

body {
    background:
        radial-gradient(circle at 18% -10%, rgba(99, 91, 255, .14), transparent 36rem),
        radial-gradient(circle at 86% 2%, rgba(14, 165, 233, .10), transparent 30rem),
        linear-gradient(180deg, #fbfdff 0%, var(--nx-bg) 34rem) !important;
    color: var(--nx-text) !important;
    font-family: var(--nx-font-sans) !important;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01" 1;
}

::selection {
    background: rgba(99, 91, 255, .18);
    color: var(--nx-text);
}

a {
    transition: color var(--nx-transition), background var(--nx-transition), border-color var(--nx-transition), transform var(--nx-transition);
}

:focus-visible {
    outline: none !important;
    box-shadow: var(--nx-ring) !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* App shell */
.brand-bar,
.section-bar,
.ah {
    background: var(--nx-card-glass) !important;
    backdrop-filter: saturate(1.55) blur(18px);
    -webkit-backdrop-filter: saturate(1.55) blur(18px);
    border-color: rgba(226, 232, 240, .72) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .72), 0 10px 30px rgba(15, 23, 42, .04) !important;
}

.brand-name,
.ah-brand-name,
.section-title,
.ah-title {
    color: var(--nx-text) !important;
    font-family: var(--nx-font-sans);
    letter-spacing: -.025em !important;
}

.below-brand,
.am-body {
    background: transparent !important;
}

.main-area,
.am-main {
    background: transparent !important;
}

.page-content,
.am-content {
    animation: nx-page-in 360ms var(--nx-transition-spring) both;
}

@keyframes nx-page-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.sidebar,
.asb {
    background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76)),
        radial-gradient(circle at 20% 0, rgba(99, 91, 255, .12), transparent 18rem) !important;
    border-color: rgba(226, 232, 240, .72) !important;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.72), 18px 0 48px rgba(15, 23, 42, .04) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.sidebar-label,
.asb-label {
    color: #8390a3 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
}

.sidebar-item,
.asb-item,
.asb-sub-item,
.sf-btn {
    border-radius: 12px !important;
    color: #5f6b7d !important;
    transition: transform var(--nx-transition), background var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), border-color var(--nx-transition) !important;
}

.sidebar-item svg,
.asb-item svg,
.asb-sub-item svg,
.ah-icon-btn svg,
.adm-btn svg,
.adm-btn-icon svg,
.nxm-shortcut-btn svg,
.nxm-header-icon svg,
.ah-op-btn svg,
.sidebar-toggle svg,
.nexus-icon,
.btn svg {
    flex-shrink: 0;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.85 !important;
    vector-effect: non-scaling-stroke;
}

.sidebar-item > svg,
.asb-item > svg,
.asb-sub-item > svg {
    background:
        linear-gradient(145deg, rgba(255,255,255,.62), rgba(255,255,255,.18)),
        var(--nx-icon-bg);
    border: 1px solid var(--nx-icon-border);
    border-radius: 10px;
    box-sizing: content-box;
    color: var(--nx-icon-ink);
    height: 18px !important;
    padding: 6px;
    width: 18px !important;
    transition: background var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), transform var(--nx-transition), box-shadow var(--nx-transition);
}

.sidebar-item:hover > svg,
.asb-item:hover > svg,
.asb-sub-item:hover > svg,
.sidebar-item.active > svg,
.asb-item.active > svg,
.asb-item.on > svg,
.asb-sub-item.active > svg,
.asb-sub-item.on > svg {
    background:
        linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.24)),
        rgba(79, 70, 229, .12);
    border-color: rgba(79, 70, 229, .2);
    color: var(--nx-icon-accent);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .07);
    transform: translateY(-1px);
}

.sidebar-item:nth-of-type(3n + 1),
.asb-item:nth-of-type(4n + 1) { --nx-icon-accent: #0f766e; --nx-icon-bg: rgba(15, 118, 110, .08); --nx-icon-border: rgba(15, 118, 110, .14); }
.sidebar-item:nth-of-type(3n + 2),
.asb-item:nth-of-type(4n + 2) { --nx-icon-accent: #7c3aed; --nx-icon-bg: rgba(124, 58, 237, .08); --nx-icon-border: rgba(124, 58, 237, .14); }
.sidebar-item:nth-of-type(3n),
.asb-item:nth-of-type(4n + 3) { --nx-icon-accent: #b45309; --nx-icon-bg: rgba(180, 83, 9, .08); --nx-icon-border: rgba(180, 83, 9, .14); }
.asb-item:nth-of-type(4n) { --nx-icon-accent: #475569; --nx-icon-bg: rgba(71, 85, 105, .08); --nx-icon-border: rgba(71, 85, 105, .14); }

.nxm-shortcut-btn,
.nxm-header-icon,
.ah-op-btn,
.ah-icon-btn,
.adm-btn-icon,
.sidebar-toggle,
.btn-icon,
.icon-btn {
    isolation: isolate;
    overflow: visible;
}

.nxm-shortcut-btn svg,
.nxm-header-icon svg,
.ah-op-btn svg,
.ah-icon-btn svg,
.adm-btn-icon svg,
.sidebar-toggle svg,
.btn-icon svg,
.icon-btn svg {
    color: currentColor;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.35));
}

.sidebar-item:hover,
.asb-item:hover,
.asb-sub-item:hover,
.sf-btn:hover {
    background: rgba(99, 91, 255, .08) !important;
    color: var(--nx-primary-dark) !important;
    transform: translateY(-1px);
}

.sidebar-item.active,
.asb-item.active,
.asb-item.on,
.asb-sub-item.active,
.asb-sub-item.on,
.sf-active {
    background: linear-gradient(135deg, rgba(99, 91, 255, .15), rgba(14, 165, 233, .08)) !important;
    color: var(--nx-primary-dark) !important;
    box-shadow: inset 0 0 0 1px rgba(99, 91, 255, .14), 0 8px 22px rgba(99, 91, 255, .10) !important;
}

.sidebar-toggle,
.ah-toggle,
.ah-icon-btn,
.adm-btn-icon,
.grp-btn,
.course-icon-btn {
    border-radius: 11px !important;
    border-color: var(--nx-border) !important;
    background: rgba(255,255,255,.72) !important;
    box-shadow: var(--nx-shadow-xs);
    transition: transform var(--nx-transition), box-shadow var(--nx-transition), background var(--nx-transition), border-color var(--nx-transition) !important;
}

.sidebar-toggle:hover,
.ah-toggle:hover,
.ah-icon-btn:hover,
.adm-btn-icon:hover,
.course-icon-btn:hover {
    background: #fff !important;
    border-color: rgba(99, 91, 255, .28) !important;
    box-shadow: var(--nx-shadow-sm);
    color: var(--nx-primary) !important;
    transform: translateY(-1px);
}

.nxm-shortcuts,
.ah-ops {
    gap: 9px !important;
}

.nxm-shortcut-btn,
.nxm-header-icon,
.ah-op-btn,
.ah-icon-btn,
.sidebar-toggle,
.adm-btn-icon {
    background:
        linear-gradient(145deg, rgba(255,255,255,.92), rgba(248,250,252,.72)) !important;
    border-color: rgba(148, 163, 184, .28) !important;
    color: var(--nx-icon-ink) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), inset 0 1px 0 rgba(255,255,255,.78) !important;
}

.nxm-shortcut-btn:hover,
.nxm-header-icon:hover,
.ah-op-btn:hover,
.ah-icon-btn:hover,
.sidebar-toggle:hover,
.adm-btn-icon:hover {
    background:
        linear-gradient(145deg, rgba(255,255,255,1), rgba(248,250,252,.88)),
        var(--nx-icon-bg) !important;
    border-color: var(--nx-icon-border) !important;
    color: var(--nx-icon-accent) !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.nxm-shortcut-btn:nth-child(1) { --nx-icon-accent: #0f766e; --nx-icon-bg: rgba(15, 118, 110, .08); --nx-icon-border: rgba(15, 118, 110, .2); }
.nxm-shortcut-btn:nth-child(2) { --nx-icon-accent: #b45309; --nx-icon-bg: rgba(180, 83, 9, .08); --nx-icon-border: rgba(180, 83, 9, .2); }
.nxm-shortcut-btn:nth-child(3) { --nx-icon-accent: #15803d; --nx-icon-bg: rgba(21, 128, 61, .08); --nx-icon-border: rgba(21, 128, 61, .2); }
.nxm-shortcut-btn:nth-child(4) { --nx-icon-accent: #475569; --nx-icon-bg: rgba(71, 85, 105, .08); --nx-icon-border: rgba(71, 85, 105, .2); }
.nxm-shortcut-btn:nth-child(5) { --nx-icon-accent: #7c3aed; --nx-icon-bg: rgba(124, 58, 237, .08); --nx-icon-border: rgba(124, 58, 237, .2); }

.ah-op-btn.announce { --nx-icon-accent: #4f46e5; }
.ah-op-btn.health { --nx-icon-accent: #0f766e; }
.ah-op-btn.health.warn,
.ah-op-btn.jobs-failed { --nx-icon-accent: #b45309; }
.ah-op-btn.health.err,
.ah-op-btn.flags-pending { --nx-icon-accent: #dc2626; }
.ah-op-btn.lecturers-pending { --nx-icon-accent: #7c3aed; }
.ah-op-btn.support-pending { --nx-icon-accent: #0891b2; }

/* Typography scale */
.nx-display, .adm-hero-title, .course-title {
    font-size: clamp(2rem, 4vw, 3.2rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -.02em !important;
    font-weight: 800 !important;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: var(--nx-font-sans);
}
h1, .h1 { letter-spacing: -.02em; font-weight: 800; }
h2, .h2 { letter-spacing: -.016em; font-weight: 750; }
h3, .h3 { letter-spacing: -.01em; font-weight: 720; }
p, .text-muted { color: var(--nx-muted); }

.nxs-post-content,
.topic-post-body,
.rules-box,
.nx-reading-copy {
    font-family: var(--nx-font-serif);
    font-optical-sizing: auto;
    letter-spacing: 0;
}

/* Cards and modules */
.card,
.adm-card,
.adm-metric,
.adm-panel,
.adm-hero,
.course-card,
.gc-card,
.grp-card,
.grp-feature-card,
.gs-card,
.profile-card,
.nxg-left,
.nxg-chat-win,
.nxg-details,
.modal-content,
.dropdown-menu {
    background: var(--nx-card) !important;
    border: 1px solid rgba(226, 232, 240, .82) !important;
    border-radius: var(--nx-card-radius) !important;
    box-shadow: var(--nx-shadow-sm) !important;
}

.card:hover,
.adm-card:hover,
.adm-metric:hover,
.course-card:hover,
.gc-card:hover,
.grp-card:hover,
.grp-feature-card:hover {
    border-color: rgba(99, 91, 255, .18) !important;
    box-shadow: var(--nx-shadow-md) !important;
    transform: translateY(-2px);
}

.card,
.adm-card,
.adm-metric,
.course-card,
.gc-card,
.grp-card,
.grp-feature-card {
    transition: transform var(--nx-transition-spring), box-shadow var(--nx-transition-spring), border-color var(--nx-transition) !important;
}

.adm-hero,
.course-hero,
.grp-hero {
    position: relative;
    overflow: hidden;
}

.adm-hero::before,
.course-hero::before,
.grp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.22), transparent 36%), radial-gradient(circle at 88% 12%, rgba(255,255,255,.18), transparent 16rem);
}

/* Buttons */
.btn,
.adm-btn,
.grp-btn,
.course-btn,
.adm-arm-item,
button[type="submit"],
input[type="submit"] {
    border-radius: var(--nx-btn-radius) !important;
    font-weight: 700 !important;
    letter-spacing: -.005em !important;
    line-height: 1.15 !important;
    transition: transform var(--nx-transition), box-shadow var(--nx-transition), background var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition) !important;
}

.btn:not(.btn-link):not(.btn-close),
.adm-btn,
.grp-btn,
.course-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .45rem !important;
    min-height: var(--nx-btn-height) !important;
    padding: var(--nx-btn-pad-y) var(--nx-btn-pad-x) !important;
    font-size: .875rem !important;
    white-space: nowrap;
    box-shadow: var(--nx-shadow-xs);
}

.btn-sm,
.btn-group-sm > .btn {
    min-height: var(--nx-btn-height-sm) !important;
    padding: .34rem .68rem !important;
    border-radius: 9px !important;
    font-size: .8rem !important;
}

.btn-lg,
.btn-group-lg > .btn {
    min-height: var(--nx-btn-height-lg) !important;
    padding: .56rem 1.05rem !important;
    border-radius: 13px !important;
    font-size: .95rem !important;
}

.adm-btn-icon,
.btn-icon,
.icon-btn,
.section-btn,
.ah-icon-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 11px !important;
}

.btn:not(.btn-link):not(.btn-close):hover,
.adm-btn:hover,
.grp-btn:hover,
.course-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--nx-shadow-sm);
}

.btn:not(.btn-link):not(.btn-close):active,
.adm-btn:active,
.grp-btn:active,
.course-btn:active {
    transform: translateY(0) scale(.985);
    box-shadow: var(--nx-shadow-xs);
}

.btn-primary,
.adm-btn-primary,
.grp-btn.primary,
.course-btn.primary,
.sf-primary {
    background: linear-gradient(135deg, #312e81, var(--nx-primary-dark)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(49, 46, 129, .18) !important;
}

.btn-primary:hover,
.adm-btn-primary:hover,
.grp-btn.primary:hover,
.course-btn.primary:hover,
.sf-primary:hover {
    filter: saturate(1.04) brightness(1.02);
    box-shadow: 0 12px 28px rgba(49, 46, 129, .22) !important;
}

.btn-outline-secondary,
.btn-light,
.adm-btn-ghost,
.grp-btn.outline,
.course-btn.secondary {
    background: var(--nx-bg) !important;
    border: 1px solid var(--nx-border-strong) !important;
    color: var(--nx-text) !important;
}

.btn-success { background: var(--nx-secondary) !important; border-color: var(--nx-secondary) !important; }
.btn-danger, .adm-btn-err-solid { background: var(--nx-danger) !important; border-color: var(--nx-danger) !important; }
.btn-warning { background: var(--nx-accent) !important; border-color: var(--nx-accent) !important; color: #111827 !important; }
.btn-info { background: var(--nx-info) !important; border-color: var(--nx-info) !important; color: #fff !important; }

.btn:disabled,
.btn.disabled,
.adm-btn:disabled,
.grp-btn:disabled,
button:disabled {
    opacity: .52 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Forms */
.form-control,
.form-select,
.grp-input,
.adm-fb-input,
.adm-fb-select,
.ah-search input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
    border-radius: var(--nx-input-radius) !important;
    border-color: var(--nx-border) !important;
    background-color: rgba(255,255,255,.92) !important;
    color: var(--nx-text) !important;
    transition: border-color var(--nx-transition), box-shadow var(--nx-transition), background var(--nx-transition), transform var(--nx-transition) !important;
}

/* FIX: .form-check-input used to share the generic 12px border-radius
   above, which is large enough relative to a checkbox/radio's ~16px size
   that it rounded BOTH shapes into circles — making multi-select
   checkboxes visually indistinguishable from single-choice radio
   buttons. Bootstrap already distinguishes them correctly (checkbox =
   slightly-rounded square, radio = circle) via [type] selectors, so we
   only override color/border here and leave shape alone. */
.form-check-input {
    border-color: var(--nx-border) !important;
    background-color: rgba(255,255,255,.92) !important;
    transition: border-color var(--nx-transition), box-shadow var(--nx-transition), background var(--nx-transition), transform var(--nx-transition) !important;
}

.form-check-input[type="checkbox"] {
    border-radius: .25em !important;
}

.form-check-input[type="radio"] {
    border-radius: 50% !important;
}

/* FIX: the unconditional background-color !important above also applied
   to the :checked state, beating Bootstrap's (non-!important) blue
   checked background. The result: checking a box toggled it correctly
   in the DOM, but the white checkmark rendered on a near-white box was
   invisible, making multi-select questions look like clicks weren't
   registering at all. Restore the checked-state color explicitly. */
.form-check-input:checked {
    background-color: var(--nx-primary) !important;
    border-color: var(--nx-primary) !important;
}

.form-control:focus,
.form-select:focus,
.grp-input:focus,
.adm-fb-input:focus,
.adm-fb-select:focus,
.ah-search input:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: rgba(99, 91, 255, .64) !important;
    box-shadow: var(--nx-ring) !important;
    background-color: #fff !important;
}

.form-label,
.grp-label,
label {
    color: var(--nx-text);
    font-weight: 700;
}

.invalid-feedback,
.grp-error,
.form-text.text-danger {
    color: var(--nx-danger) !important;
    font-weight: 600;
}

/* Tables */
.table,
.adm-tbl,
.at {
    --bs-table-bg: transparent;
    color: var(--nx-text) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.table thead th,
.adm-tbl th,
.at th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(248, 250, 252, .94) !important;
    color: #68758a !important;
    border-bottom: 1px solid var(--nx-border) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .07em !important;
}

.table tbody td,
.adm-tbl td,
.at td {
    border-bottom: 1px solid rgba(226, 232, 240, .64) !important;
}

.table tbody tr,
.adm-tbl tbody tr,
.at tbody tr {
    transition: background var(--nx-transition);
}

.table tbody tr:hover > *,
.adm-tbl tbody tr:hover td,
.at tbody tr:hover td {
    background: rgba(99, 91, 255, .035) !important;
}

/* `.at` had zero matching CSS anywhere before this — an unstyled,
   un-hoverable, non-sticky table used across 4 admin pages (Audit Log,
   Groups, Moderation Center, Archive Recovery). It now inherits the same
   sticky/hover/border treatment as `.table`/`.adm-tbl` above, plus its
   own base sizing (kept separate from `.table`/`.adm-tbl` so their
   existing padding — much of it Bootstrap's own — is untouched). */
.at {
    width: 100%;
}

.at th,
.at td {
    padding: 11px 14px;
    text-align: left;
}

/* Badges, alerts, pagination */
.badge,
.adm-badge,
.grp-pill,
.course-chip,
.adm-chip {
    border-radius: 999px !important;
    font-weight: 750 !important;
    letter-spacing: .01em !important;
    box-shadow: none !important;
}

.badge.bg-primary,
.adm-badge.blu,
.course-chip {
    background: rgba(99, 91, 255, .12) !important;
    color: var(--nx-primary-dark) !important;
}

.badge.bg-success,
.adm-badge.ok {
    background: rgba(16, 185, 129, .13) !important;
    color: #047857 !important;
}

.badge.bg-warning,
.adm-badge.wrn {
    background: rgba(245, 158, 11, .16) !important;
    color: #a16207 !important;
}

.badge.bg-danger,
.adm-badge.err {
    background: rgba(239, 68, 68, .13) !important;
    color: #b91c1c !important;
}

.badge.bg-secondary,
.adm-badge.neu {
    background: rgba(100, 116, 139, .13) !important;
    color: #475569 !important;
}

.badge.bg-info {
    background: rgba(14, 165, 233, .13) !important;
    color: #0369a1 !important;
}

/* ── Unified status badge component (x-nexus.badge) ──────────────── */
.nx-badge-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 5px;
    vertical-align: middle;
}

.alert {
    border-radius: var(--nx-radius) !important;
    border: 1px solid rgba(226, 232, 240, .82) !important;
    box-shadow: var(--nx-shadow-xs);
}

.pagination {
    gap: 6px;
}

.page-link {
    min-width: 36px;
    border-radius: 10px !important;
    border-color: var(--nx-border) !important;
    color: var(--nx-muted) !important;
    font-weight: 700;
    transition: all var(--nx-transition);
}

.page-link:hover,
.page-item.active .page-link {
    background: var(--nx-primary) !important;
    border-color: var(--nx-primary) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(99, 91, 255, .22);
}

/* Menus and modals */
.dropdown-menu,
.adm-arm,
.ann-notice-dd,
.modal-content {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.dropdown-item,
.adm-arm-item {
    border-radius: 10px;
}

.dropdown-item:hover,
.adm-arm-item:hover {
    background: rgba(99, 91, 255, .08) !important;
}

/* Premium empty/loading states */
.nx-empty,
.empty-state,
.course-empty {
    color: var(--nx-muted);
}

.skeleton,
.nx-skeleton {
    background: linear-gradient(90deg, #eef2f7, #f8fafc, #eef2f7);
    background-size: 220% 100%;
    animation: nx-skeleton 1.4s ease-in-out infinite;
}

@keyframes nx-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Responsive guardrails */
img, svg, video, canvas {
    max-width: 100%;
}

.table-responsive,
[style*="overflow-x:auto"],
[style*="overflow-x: auto"] {
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 91, 255, .32) transparent;
}

@media (max-width: 992px) {
    .brand-bar,
    .ah {
        height: auto !important;
        min-height: 58px;
    }

    .page-content,
    .am-content {
        padding-inline: 14px !important;
    }

    .card-body {
        padding: 1.1rem !important;
    }
}

@media (max-width: 640px) {
    .btn,
    .adm-btn,
    .grp-btn,
    .course-btn {
        min-height: 38px;
    }

    .adm-ph,
    .course-section-head,
    .grp-toolbar {
        align-items: stretch !important;
        flex-direction: column !important;
    }
}

[data-theme="dark"] body {
    background:
        radial-gradient(circle at 20% -10%, rgba(99, 91, 255, .18), transparent 34rem),
        radial-gradient(circle at 88% 0, rgba(14, 165, 233, .10), transparent 28rem),
        var(--nx-bg) !important;
}

[data-theme="dark"] .sidebar,
[data-theme="dark"] .asb,
[data-theme="dark"] .brand-bar,
[data-theme="dark"] .section-bar,
[data-theme="dark"] .ah,
/* .dropdown-menu is deliberately absent here: it is a floating panel
   and takes its background from the LIQUID GLASS section instead. A
   [data-theme] rule would outrank that one and flatten it. */
[data-theme="dark"] .card,
[data-theme="dark"] .adm-card,
[data-theme="dark"] .adm-panel,
[data-theme="dark"] .course-card,
[data-theme="dark"] .gc-card,
[data-theme="dark"] .modal-content {
    background: var(--nx-card-glass) !important;
    border-color: var(--nx-border) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .grp-input,
[data-theme="dark"] .adm-fb-input,
[data-theme="dark"] .adm-fb-select,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: rgba(15, 23, 42, .78) !important;
    color: var(--nx-text) !important;
}

/* Legacy Blade adapter: make older page-specific class names follow the same system. */
.ln-nav,
.ln-reg-menu,
.guest-nav {
    background: var(--nx-card-glass) !important;
    border-color: rgba(226, 232, 240, .72) !important;
    backdrop-filter: saturate(1.55) blur(20px) !important;
    -webkit-backdrop-filter: saturate(1.55) blur(20px) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.72), 0 16px 42px rgba(15, 23, 42, .06) !important;
}

.ln-brand-name,
.ln-hero-title,
.ln-section-title,
.ln-form-title,
.lx-title,
.rc-head h1,
.nxs-form h1,
.nxs-form h2,
.nxs-form h3 {
    color: var(--nx-text) !important;
    letter-spacing: -.045em !important;
}

.ln-brand-sub,
.ln-hero-sub,
.ln-section-sub,
.ln-card-desc,
.ln-pf-desc,
.lx-sub,
.lx-footer,
.rc-head p,
.rc-card-desc {
    color: var(--nx-muted) !important;
}

.ln-navlink,
.ln-foot-col a,
.lx-forgot,
.lx-footer a,
.rc-back a {
    color: var(--nx-primary-dark) !important;
}

.ln-navlink:hover,
.ln-navlink.is-active {
    background: rgba(99, 91, 255, .08) !important;
    color: var(--nx-primary-dark) !important;
}

.ln-navlink.is-active::after {
    background: var(--nx-primary) !important;
}

.lx-card,
.rc-card,
.nxs-card,
.ln-role-card,
.ln-pf-card,
.ln-form-wrap,
.ln-contact-card,
.ln-mission-card,
.ln-stat-card,
.ln-value-card,
.ln-footer,
.rules-box,
.nxf-topic-card,
.nxf-sb-card,
.nxf-compose,
.gs-side-card,
.gs-main-card,
.session-card,
.user-card,
.hover-card {
    background: var(--nx-card) !important;
    border: 1px solid rgba(226, 232, 240, .82) !important;
    border-radius: var(--nx-card-radius) !important;
    box-shadow: var(--nx-shadow-sm) !important;
}

.lx-card,
.rc-card,
.nxs-card,
.ln-role-card,
.ln-pf-card,
.ln-form-wrap,
.nxf-topic-card,
.nxf-sb-card,
.gs-side-card,
.gs-main-card,
.session-card {
    transition: transform var(--nx-transition-spring), box-shadow var(--nx-transition-spring), border-color var(--nx-transition) !important;
}

.rc-card:hover,
.ln-role-card:hover,
.ln-pf-card:hover,
.nxf-topic-card:hover,
.nxf-sb-card:hover,
.session-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(99, 91, 255, .22) !important;
    box-shadow: var(--nx-shadow-md) !important;
}

.ln-btn-primary,
.ln-nav-reg,
.ln-nav-reg-btn,
.ln-form-btn,
.ln-cta-btn,
.ln-nl-btn,
.lx-btn,
.nxs-submit-btn,
.nxf-post-btn,
.nxf-new-topic-btn,
#acceptBtn.active-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .45rem !important;
    min-height: var(--nx-btn-height) !important;
    padding: var(--nx-btn-pad-y) var(--nx-btn-pad-x) !important;
    border-radius: var(--nx-btn-radius) !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--nx-primary), var(--nx-primary-dark)) !important;
    color: #fff !important;
    font-size: .875rem !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;
    box-shadow: 0 8px 20px rgba(99, 91, 255, .20) !important;
    transition: transform var(--nx-transition), box-shadow var(--nx-transition), filter var(--nx-transition) !important;
}

.ln-btn-primary:hover,
.ln-nav-reg:hover,
.ln-nav-reg-btn:hover,
.ln-form-btn:hover,
.ln-cta-btn:hover,
.ln-nl-btn:hover,
.lx-btn:hover,
.nxs-submit-btn:hover,
.nxf-post-btn:hover,
.nxf-new-topic-btn:hover {
    color: #fff !important;
    filter: saturate(1.05) brightness(1.02);
    transform: translateY(-1px) !important;
    box-shadow: 0 12px 28px rgba(99, 91, 255, .26) !important;
}

.ln-btn-outline,
.ln-nav-login,
.ln-cta-btn-sec,
.lx-google,
.rc-card-arrow,
.nxf-cat-btn,
.btn-outline-primary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger {
    border-radius: var(--nx-btn-radius) !important;
    border-color: var(--nx-border-strong) !important;
    background: var(--nx-bg) !important;
    min-height: var(--nx-btn-height) !important;
    padding: var(--nx-btn-pad-y) var(--nx-btn-pad-x) !important;
    font-size: .875rem !important;
    line-height: 1.15 !important;
    box-shadow: var(--nx-shadow-xs) !important;
    transition: transform var(--nx-transition), box-shadow var(--nx-transition), border-color var(--nx-transition), background var(--nx-transition), color var(--nx-transition) !important;
}

.btn-outline-primary { border-color: rgba(79, 70, 229, .24) !important; color: var(--nx-primary-dark) !important; }
.btn-outline-success { border-color: var(--nx-secondary) !important; color: var(--nx-secondary) !important; }
.btn-outline-warning { border-color: var(--nx-accent) !important; color: #b45309 !important; }
.btn-outline-danger { border-color: var(--nx-danger) !important; color: var(--nx-danger) !important; }

.ln-btn-outline:hover,
.ln-nav-login:hover,
.ln-cta-btn-sec:hover,
.lx-google:hover,
.nxf-cat-btn:hover,
.nxf-cat-btn.active {
    background: rgba(99, 91, 255, .08) !important;
    border-color: rgba(99, 91, 255, .28) !important;
    color: var(--nx-primary-dark) !important;
    box-shadow: var(--nx-shadow-sm) !important;
    transform: translateY(-1px) !important;
}

.btn-outline-primary:hover { background: rgba(79, 70, 229, .08) !important; border-color: rgba(79, 70, 229, .32) !important; color: var(--nx-primary-dark) !important; box-shadow: var(--nx-shadow-sm) !important; transform: translateY(-1px) !important; }
.btn-outline-success:hover { background: rgba(16, 185, 129, .1) !important; color: var(--nx-secondary) !important; box-shadow: var(--nx-shadow-sm) !important; transform: translateY(-1px) !important; }
.btn-outline-warning:hover { background: rgba(245, 158, 11, .12) !important; color: #92400e !important; box-shadow: var(--nx-shadow-sm) !important; transform: translateY(-1px) !important; }
.btn-outline-danger:hover { background: rgba(239, 68, 68, .1) !important; color: var(--nx-danger) !important; box-shadow: var(--nx-shadow-sm) !important; transform: translateY(-1px) !important; }

.lx-input,
.ln-form-wrap input,
.ln-form-wrap textarea,
.ln-form-wrap select,
.ln-nl-input,
.nxs-form .form-control,
.nxs-form .form-select,
.nxf-compose-input,
.nxf-search-input,
.rules-box {
    border-radius: var(--nx-input-radius) !important;
    border-color: var(--nx-border) !important;
    background: rgba(255,255,255,.94) !important;
    color: var(--nx-text) !important;
}

.lx-input:focus,
.ln-form-wrap input:focus,
.ln-form-wrap textarea:focus,
.ln-form-wrap select:focus,
.ln-nl-input:focus,
.nxs-form .form-control:focus,
.nxs-form .form-select:focus,
.nxf-compose-input:focus,
.nxf-search-input:focus {
    border-color: rgba(99, 91, 255, .64) !important;
    box-shadow: var(--nx-ring) !important;
}

.lx-label,
.ln-form-label,
.nxs-form .form-label,
.rc-card-name,
.nxf-sb-title,
.nxf-topic-title,
.gs-title,
.gs-side-card h4 {
    color: var(--nx-text) !important;
    font-weight: 750 !important;
}

.lx-alert,
.alert {
    border-radius: var(--nx-radius) !important;
}

.lx-alert.success,
.alert-success {
    background: rgba(16, 185, 129, .12) !important;
    border-color: rgba(16, 185, 129, .24) !important;
    color: #047857 !important;
}

.lx-alert.danger,
.alert-danger {
    background: rgba(239, 68, 68, .11) !important;
    border-color: rgba(239, 68, 68, .24) !important;
    color: #b91c1c !important;
}

.brand-logo,
.ln-brand-ico img,
.lx-logo img,
.rc-head img,
.nxs-form .brand-logo,
.ln-logo-3d img {
    filter:
        drop-shadow(-1px -1px 1px rgba(255,255,255,.58))
        drop-shadow(3px 5px 4px rgba(17, 24, 39, .30))
        drop-shadow(0 18px 32px rgba(99, 91, 255, .18)) !important;
    transition: transform var(--nx-transition-spring), filter var(--nx-transition-spring) !important;
}

.brand-logo:hover,
.ln-brand-ico img:hover,
.lx-logo img:hover,
.rc-head img:hover,
.nxs-form .brand-logo:hover,
.ln-logo-3d img:hover {
    transform: translateY(-2px) scale(1.045) !important;
}

.card img:not(.brand-logo),
.profile-card img:not(.brand-logo),
.ln-role-card img,
.ln-pf-card img,
.nxf-topic-av img,
.nxf-compose-av img,
.adm-av img,
.sidebar-avatar img,
.brand-avatar img {
    object-fit: cover;
}

.nxf-topic-av,
.nxf-compose-av,
.adm-av,
.sidebar-avatar,
.brand-avatar,
.ann-dd-av,
.course-avatar,
.gs-avatar {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 8px 18px rgba(15, 23, 42, .10) !important;
}

.ln-hero,
.ln-section,
.rc-root,
.lx-root {
    background:
        radial-gradient(circle at 14% 0, rgba(99, 91, 255, .12), transparent 34rem),
        radial-gradient(circle at 90% 10%, rgba(14, 165, 233, .10), transparent 30rem) !important;
}

.ln-hero-title {
    font-size: clamp(2.4rem, 6vw, 5.2rem) !important;
    line-height: .98 !important;
    letter-spacing: -.07em !important;
}

.ln-platform-grid,
.rc-cards {
    gap: var(--nx-space-4) !important;
}

.ln-form-row {
    gap: var(--nx-space-4) !important;
}

.rules-box {
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 91, 255, .38) transparent;
}

.rules-box h6 {
    color: var(--nx-primary-dark) !important;
}

.rounded-pill {
    border-radius: 999px !important;
}

@media (max-width: 768px) {
    .ln-nav {
        padding-inline: 16px !important;
    }

    .ln-hero-btns,
    .ln-nav-btns,
    .ln-cta-btns {
        width: 100%;
    }

    .ln-btn-primary,
    .ln-btn-outline,
    .ln-nav-login,
    .ln-nav-reg,
    .ln-nav-reg-btn,
    .ln-cta-btn,
    .ln-cta-btn-sec {
        width: 100%;
    }

    .ln-platform-grid,
    .ln-form-row,
    .rc-cards {
        grid-template-columns: 1fr !important;
    }

    .lx-card {
        width: min(100% - 28px, 430px) !important;
    }
}

[data-theme="dark"] .ln-nav,
[data-theme="dark"] .ln-reg-menu,
[data-theme="dark"] .guest-nav,
[data-theme="dark"] .lx-card,
[data-theme="dark"] .rc-card,
[data-theme="dark"] .nxs-card,
[data-theme="dark"] .ln-role-card,
[data-theme="dark"] .ln-pf-card,
[data-theme="dark"] .ln-form-wrap,
[data-theme="dark"] .ln-footer,
[data-theme="dark"] .rules-box {
    background: var(--nx-card-glass) !important;
    border-color: var(--nx-border) !important;
}

/* Admin sidebar and dropdown refinement */
.asb {
    --nx-admin-foot-h: 44px;
}

.asb .asb-item {
    min-height: 40px !important;
    padding: 10px 12px !important;
    border-radius: 13px !important;
}

.asb .asb-sub-item {
    min-height: 34px !important;
    border-radius: 11px !important;
}

.asb-foot {
    padding: 12px !important;
    border-top: 1px solid rgba(226, 232, 240, .72) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.72)) !important;
}

.asb-foot-stack {
    display: grid;
    gap: 9px;
    margin-bottom: 10px;
}

.asb-foot-notice {
    width: 100%;
    min-height: var(--nx-admin-foot-h);
    border-radius: 14px !important;
    border: 1px solid rgba(226, 232, 240, .86) !important;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    transition: transform var(--nx-transition), box-shadow var(--nx-transition), background var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition) !important;
}

.asb-foot-notice {
    justify-content: center;
    padding: 0 12px !important;
    background: linear-gradient(135deg, var(--nx-primary), var(--nx-primary-dark)) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 12px 28px rgba(99, 91, 255, .24) !important;
    cursor: pointer;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.asb-foot-notice:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 38px rgba(99, 91, 255, .30) !important;
    filter: saturate(1.04) brightness(1.02);
}

.asb-foot-notice:active {
    transform: scale(.985);
}

.asb-foot-ico {
    width: 24px;
    height: 24px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.18);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
    flex: 0 0 auto;
}

.asb-status {
    border-radius: 14px !important;
    padding: 10px 11px !important;
    background: rgba(16, 185, 129, .10) !important;
    border-color: rgba(16, 185, 129, .20) !important;
}

.asb-status-txt strong {
    font-size: 11px !important;
    font-weight: 800 !important;
}

.asb-status-txt span {
    font-size: 10px !important;
    font-weight: 650 !important;
}

.asb.col .asb-foot {
    padding: 10px 8px !important;
}

.asb.col .asb-foot-stack {
    gap: 8px;
}

.asb.col .asb-foot-notice {
    width: 42px;
    min-height: 42px;
    padding: 0 !important;
    justify-content: center;
}

.asb.col .asb-foot-notice span:not(.asb-foot-ico),
.asb.col .asb-status-txt {
    display: none !important;
}

.asb.col .asb-foot-ico {
    background: transparent;
    box-shadow: none;
}

#adm-um {
    min-width: 238px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(226, 232, 240, .88) !important;
    background: var(--nx-card-glass) !important;
    backdrop-filter: saturate(1.4) blur(18px);
    -webkit-backdrop-filter: saturate(1.4) blur(18px);
    box-shadow: 0 22px 60px rgba(15, 23, 42, .14), 0 4px 12px rgba(15, 23, 42, .06) !important;
    padding: 6px !important;
    overflow: hidden;
}

.adm-nd {
    min-width: 320px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(226, 232, 240, .88) !important;
    background: var(--nx-card-glass) !important;
    backdrop-filter: saturate(1.4) blur(18px);
    -webkit-backdrop-filter: saturate(1.4) blur(18px);
    box-shadow: 0 22px 60px rgba(15, 23, 42, .14), 0 4px 12px rgba(15, 23, 42, .06) !important;
    overflow: hidden;
}

.adm-nd > div:first-child {
    background: linear-gradient(135deg, rgba(99, 91, 255, .08), rgba(14, 165, 233, .05)) !important;
    border-bottom-color: rgba(226, 232, 240, .72) !important;
}

.adm-nd a {
    color: var(--nx-primary-dark) !important;
    font-weight: 800 !important;
}

#adm-um > div:first-child {
    margin: 0 0 4px;
    border-radius: 12px !important;
    border: 1px solid rgba(226, 232, 240, .70) !important;
    background: linear-gradient(135deg, rgba(99, 91, 255, .08), rgba(14, 165, 233, .05)) !important;
}

#adm-um .arm-item,
.arm-item {
    min-height: 38px !important;
    border-radius: 11px !important;
    padding: 9px 11px !important;
    color: var(--nx-text) !important;
    font-weight: 700 !important;
    transition: background var(--nx-transition), color var(--nx-transition), transform var(--nx-transition) !important;
}

#adm-um .arm-item:hover,
.arm-item:hover {
    background: rgba(99, 91, 255, .08) !important;
    color: var(--nx-primary-dark) !important;
    transform: translateX(1px);
}

#adm-um .arm-item.err {
    color: #b91c1c !important;
}

#adm-um .arm-item.err:hover {
    background: rgba(239, 68, 68, .10) !important;
    color: #991b1b !important;
}

.adm-modal {
    border-radius: 22px !important;
    border: 1px solid rgba(226, 232, 240, .82) !important;
    box-shadow: 0 34px 86px rgba(15, 23, 42, .20), 0 10px 28px rgba(99, 91, 255, .08) !important;
}

.adm-modal-ico {
    border-radius: 16px !important;
}

.ann-mode-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px !important;
}

.ann-mode-btn {
    min-height: 42px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(226, 232, 240, .88) !important;
    background: rgba(248, 250, 252, .82) !important;
    color: var(--nx-muted) !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    box-shadow: var(--nx-shadow-xs);
}

.ann-mode-btn:hover,
.ann-mode-btn.active {
    background: rgba(99, 91, 255, .10) !important;
    border-color: rgba(99, 91, 255, .28) !important;
    color: var(--nx-primary-dark) !important;
    box-shadow: var(--nx-shadow-sm);
    transform: translateY(-1px);
}

.ann-notice-desc {
    border-radius: 13px;
    padding: 10px 12px;
    background: rgba(248, 250, 252, .86);
    border: 1px solid rgba(226, 232, 240, .72);
}

.ann-search-input,
.ann-notice-dd {
    border-radius: 13px !important;
}

.ann-notice-dd {
    border-color: rgba(226, 232, 240, .88) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .14) !important;
    padding: 6px;
}

.ann-dd-item {
    border-radius: 11px;
    min-height: 42px;
}

.ann-dd-item:hover {
    background: rgba(99, 91, 255, .08) !important;
}

@media (max-width: 560px) {
    .ann-mode-row {
        grid-template-columns: 1fr;
    }
}

[data-theme="dark"] .asb-foot,
[data-theme="dark"] #adm-um,
[data-theme="dark"] .ann-notice-desc {
    background: rgba(17, 24, 39, .78) !important;
    border-color: var(--nx-border) !important;
}

/* Readability pass: Facebook-like contrast without harsh pure black. */
body,
.page-content,
.am-content,
.card,
.adm-card,
.course-card,
.gc-card,
.grp-card,
.profile-card,
.modal-content,
.dropdown-menu {
    color: var(--nx-text) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.adm-ph-title,
.adm-card-title,
.adm-panel-title,
.adm-row-title,
.course-section-title,
.course-list-title,
.grp-title,
.gs-title,
.nxf-topic-title,
.ann-title,
.lx-title,
.ln-hero-title,
.ln-section-title {
    color: var(--nx-heading) !important;
}

p,
li,
td,
th,
.card-body,
.adm-tbl td,
.table tbody td,
.course-list-meta,
.course-section-sub,
.adm-row-meta,
.adm-ph-sub,
.adm-panel-sub,
.adm-card-sub,
.ann-message,
.ann-admin-name,
.nxf-topic-meta,
.nxf-sb-card,
.gs-meta-item,
.gs-side-label,
.gs-side-val,
.profile-card,
.form-text,
.small,
small {
    color: var(--nx-muted) !important;
}

.text-muted,
.adm-text-muted,
.ann-date,
.ann-admin-role,
.sidebar-label,
.asb-label,
.caption,
.course-muted,
.grp-muted,
.nxf-muted,
.lx-sub,
.ln-hero-sub,
.ln-section-sub,
.rc-card-desc {
    color: var(--nx-subtle) !important;
}

.nxf-topic-title {
    font-size: .98rem !important;
    font-weight: 720 !important;
    line-height: 1.42 !important;
    letter-spacing: 0 !important;
    color: var(--nx-heading) !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.nxf-topic-preview {
    font-size: .88rem !important;
    line-height: 1.58 !important;
}

.topic-title {
    font-size: clamp(1.35rem, 1.05rem + 1.05vw, 1.92rem) !important;
    font-weight: 780 !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
    color: var(--nx-heading) !important;
}

.adm-topic-title {
    font-size: .9rem !important;
    font-weight: 680 !important;
    line-height: 1.35 !important;
}

.sidebar-item,
.asb-item,
.asb-sub-item,
.sf-btn,
.brand-right,
.ah-user,
.ah-icon-btn {
    color: var(--nx-muted) !important;
}

.sidebar-item span,
.asb-lbl,
.asb-sub-item,
.sf-label {
    font-weight: 680 !important;
}

.sidebar-item.active,
.sidebar-item.active span,
.asb-item.on,
.asb-item.on .asb-lbl,
.asb-sub-item.on,
.sf-active {
    color: var(--nx-primary-dark) !important;
}

.form-label,
.grp-label,
.lx-label,
.ln-form-label,
.nxs-form .form-label,
label {
    color: var(--nx-heading) !important;
    font-weight: 760 !important;
}

.form-control,
.form-select,
.grp-input,
.lx-input,
.ann-search-input,
.adm-fb-input,
.adm-fb-select,
.afb-input,
.afb-select,
input,
textarea,
select {
    color: var(--nx-text) !important;
    font-weight: 560;
}

.form-control::placeholder,
.grp-input::placeholder,
.lx-input::placeholder,
.ann-search-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: #7c8798 !important;
    opacity: 1 !important;
}

.badge,
.adm-badge,
.ab,
.ann-badge,
.course-chip,
.grp-pill {
    font-weight: 780 !important;
}

.table thead th,
.adm-tbl th,
.at th {
    color: #4b5563 !important;
    font-weight: 780 !important;
}

.table tbody td,
.adm-tbl td,
.at td {
    color: #2f3744 !important;
}

.ann-hero-sub,
.ann-message,
.ann-admin-name,
.ann-date {
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased;
}

[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .form-text,
[data-theme="dark"] small,
[data-theme="dark"] .small {
    color: var(--nx-muted) !important;
}

[data-theme="dark"] .table tbody td,
[data-theme="dark"] .adm-tbl td,
[data-theme="dark"] .at td {
    color: #dbe4f0 !important;
}

/* ============================================================
   LIQUID GLASS
   One translucent surface shared by every floating panel in the
   app: Bootstrap dropdowns, the avatar / notification / admin
   menus, the flatpickr calendar, and the NxsSelect listbox that
   replaces the OS-rendered <select> popup.

   Everything below is driven by the --nx-glass-* tokens, so a
   panel only needs the surface mixin selectors to pick up both
   the light and the dark treatment.
   ============================================================ */
:root {
    --nx-glass-blur: 22px;
    --nx-glass-sat: 1.8;
    --nx-glass-layer:
        radial-gradient(125% 90% at 0% 0%, rgba(255, 255, 255, .78), rgba(255, 255, 255, 0) 55%),
        radial-gradient(110% 85% at 100% 0%, rgba(99, 91, 255, .09), rgba(255, 255, 255, 0) 60%),
        linear-gradient(165deg, rgba(255, 255, 255, .88) 0%, rgba(244, 247, 253, .74) 100%);
    --nx-glass-border: rgba(255, 255, 255, .9);
    --nx-glass-ring: rgba(15, 23, 42, .10);
    --nx-glass-shadow: 0 28px 70px rgba(15, 23, 42, .16), 0 8px 22px rgba(15, 23, 42, .07);
    --nx-glass-inset: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(15, 23, 42, .03);
    --nx-glass-hover: rgba(99, 91, 255, .10);
    --nx-glass-active: rgba(99, 91, 255, .16);
    --nx-glass-sep: rgba(15, 23, 42, .08);
    --nx-glass-danger-hover: rgba(239, 68, 68, .10);
    --nx-glass-radius: 20px;
}

[data-theme="dark"] {
    --nx-glass-layer:
        radial-gradient(125% 90% at 0% 0%, rgba(148, 163, 255, .17), rgba(255, 255, 255, 0) 55%),
        radial-gradient(110% 85% at 100% 0%, rgba(56, 110, 220, .15), rgba(255, 255, 255, 0) 60%),
        linear-gradient(165deg, rgba(31, 43, 79, .90) 0%, rgba(14, 22, 43, .84) 100%);
    --nx-glass-border: rgba(255, 255, 255, .14);
    --nx-glass-ring: rgba(2, 6, 23, .55);
    --nx-glass-shadow: 0 30px 80px rgba(2, 6, 23, .62), 0 8px 24px rgba(2, 6, 23, .45);
    --nx-glass-inset: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(0, 0, 0, .26);
    --nx-glass-hover: rgba(129, 140, 248, .18);
    --nx-glass-active: rgba(129, 140, 248, .26);
    --nx-glass-sep: rgba(255, 255, 255, .09);
    --nx-glass-danger-hover: rgba(248, 113, 113, .16);
}

/* The surface itself. Inline styles on some of the older menus
   (#avatar-menu, #adm-um) hardcode a white background, so these
   declarations have to be !important to reach them. */
.dropdown-menu,
.nxs-glass,
#avatar-menu,
#adm-um,
.nxs-notif-dropdown,
.ann-notice-dd,
.adm-arm,
.arm,
.adm-nd,
.gs-m-menu,
.ln-reg-menu,
.nxs-select-menu,
.flatpickr-calendar {
    background: var(--nx-glass-layer) !important;
    background-color: transparent !important;
    border: 1px solid var(--nx-glass-border) !important;
    border-radius: var(--nx-glass-radius) !important;
    box-shadow:
        var(--nx-glass-inset),
        0 0 0 1px var(--nx-glass-ring),
        var(--nx-glass-shadow) !important;
    backdrop-filter: blur(var(--nx-glass-blur)) saturate(var(--nx-glass-sat)) !important;
    -webkit-backdrop-filter: blur(var(--nx-glass-blur)) saturate(var(--nx-glass-sat)) !important;
    color: var(--nx-text) !important;
    overflow: hidden;
}

/* Without backdrop-filter the panel would be see-through with no
   blur to separate it from the page, so fall back to near-opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    .dropdown-menu,
    .nxs-glass,
    #avatar-menu,
    #adm-um,
    .nxs-notif-dropdown,
    .ann-notice-dd,
    .adm-arm,
    .gs-m-menu,
    .ln-reg-menu,
    .nxs-select-menu,
    .flatpickr-calendar {
        background: var(--nx-card) !important;
    }
}

/* Panels open with a short rise so the glass reads as a layer
   floating above the page rather than a repaint of it. */
@keyframes nx-glass-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.dropdown-menu.show,
.nxs-select-menu.is-open,
.flatpickr-calendar.open,
.gs-m-menu.open {
    animation: nx-glass-in 180ms cubic-bezier(.16, 1, .3, 1);
}

/* Rows inside any glass panel */
.dropdown-item,
.adm-arm-item,
.arm-item,
.gs-m-menu-item,
.avatar-menu-link,
.ln-reg-menu-item {
    border-radius: 12px !important;
    transition: background var(--nx-transition), color var(--nx-transition) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.adm-arm-item:hover,
.arm-item:hover,
.gs-m-menu-item:hover,
.avatar-menu-link:hover,
.ln-reg-menu-item:hover {
    background: var(--nx-glass-hover) !important;
    color: var(--nx-primary) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--nx-glass-active) !important;
    color: var(--nx-primary) !important;
}

.dropdown-menu {
    padding: 8px !important;
}

.dropdown-divider,
.ln-reg-menu-sep {
    border-top-color: var(--nx-glass-sep) !important;
    opacity: 1 !important;
}

/* The menus below are laid out edge-to-edge by their own page CSS
   (rows run the full panel width), so they get inner padding here
   to keep the rounded hover pills clear of the glass edge. */
#avatar-menu,
#adm-um,
.gs-m-menu,
.ln-reg-menu {
    padding: 8px !important;
}

#avatar-menu .avatar-menu-link,
#adm-um .arm-item,
.gs-m-menu .gs-m-menu-item {
    margin: 1px 0;
}

/* Logout rows read as destructive, so they keep a red wash on hover
   instead of the primary one. The markup sets these colours inline
   (and used to swap them with onmouseover), hence !important. */
#avatar-menu form button,
#adm-um form button,
.nxs-menu-danger {
    border-radius: 12px !important;
    color: var(--nx-danger) !important;
    transition: background var(--nx-transition) !important;
}

#avatar-menu form button:hover,
#adm-um form button:hover,
.nxs-menu-danger:hover {
    background: var(--nx-glass-danger-hover) !important;
}

/* Profile header block at the top of the account menus */
.avatar-menu-profile,
.ah-menu-profile {
    background: linear-gradient(135deg, rgba(99, 91, 255, .10), rgba(14, 165, 233, .08)) !important;
    border-radius: 14px !important;
    border-bottom: 0 !important;
    margin-bottom: 6px;
}

[data-theme="dark"] .avatar-menu-profile,
[data-theme="dark"] .ah-menu-profile {
    background: linear-gradient(135deg, rgba(129, 140, 248, .20), rgba(56, 189, 248, .10)) !important;
}

#avatar-menu-name,
#adm-um .ah-menu-name {
    color: var(--nx-heading) !important;
}

#avatar-menu-role,
#adm-um .ah-menu-mail {
    color: var(--nx-subtle) !important;
}

#avatar-menu .avatar-menu-link,
#adm-um .arm-item {
    color: var(--nx-text) !important;
}

/* Notification dropdown: its rows are separated by hairlines rather
   than pills, so they follow the glass separator instead. */
.nxs-notif-item {
    background: transparent !important;
    border-bottom: 1px solid var(--nx-glass-sep) !important;
    transition: background var(--nx-transition) !important;
}

.nxs-notif-item:hover {
    background: var(--nx-glass-hover) !important;
}

.nxs-notif-item.unread {
    background: rgba(99, 91, 255, .09) !important;
}

.nxs-notif-item.unread:hover {
    background: var(--nx-glass-active) !important;
}

[data-theme="dark"] .nxs-notif-item.unread {
    background: rgba(129, 140, 248, .16) !important;
}

.nxs-notif-head {
    border-bottom: 1px solid var(--nx-glass-sep) !important;
}

.nxs-notif-title {
    color: var(--nx-heading) !important;
}

.nxs-notif-see-all {
    color: var(--nx-primary) !important;
}

.nxs-notif-label {
    color: var(--nx-text) !important;
}

.nxs-notif-time,
.nxs-notif-empty {
    color: var(--nx-subtle) !important;
}

/* ------------------------------------------------------------
   Select control (the closed box)
   The popup itself is NxsSelect's glass listbox further down;
   this is just the trigger the user clicks.
   ------------------------------------------------------------ */
.form-select,
select.form-control,
.grp-select,
.afb-select,
.adm-fb-select,
.ml-select,
.la-select,
.sa-select,
.ob-select,
.ln-select,
.roc-select,
.sh-range-select,
.gs-grp-select,
.nxs-rm-select,
select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 16px 16px !important;
    padding-right: 2.25rem !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer;
}

[data-theme="dark"] .form-select,
[data-theme="dark"] select.form-control,
[data-theme="dark"] .grp-select,
[data-theme="dark"] .afb-select,
[data-theme="dark"] .adm-fb-select,
[data-theme="dark"] .ml-select,
[data-theme="dark"] .la-select,
[data-theme="dark"] .sa-select,
[data-theme="dark"] .ob-select,
[data-theme="dark"] .ln-select,
[data-theme="dark"] .roc-select,
[data-theme="dark"] .sh-range-select,
[data-theme="dark"] .gs-grp-select,
[data-theme="dark"] .nxs-rm-select,
[data-theme="dark"] select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") !important;
    /* Repeat/position/size are restated (not just inherited from the rule
       above) because several views paint their dark inputs with the
       `background` SHORTHAND, which resets these longhands to `initial` —
       i.e. repeat + auto — and tiles the caret across the control. */
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 16px 16px !important;
}

/* While its glass listbox is open the trigger stays lit, so the
   panel and the control it belongs to read as one object. */
select.nxs-select-open {
    border-color: rgba(99, 91, 255, .64) !important;
    box-shadow: var(--nx-ring) !important;
}

/* ------------------------------------------------------------
   NxsSelect listbox — the glass replacement for the native
   <select> popup (see partials/nxs-select.blade.php).
   Portalled to <body> and positioned fixed, so it escapes any
   overflow:hidden card or modal it was opened from.
   ------------------------------------------------------------ */
.nxs-select-menu {
    position: fixed;
    z-index: 2200;
    display: none;
    padding: 6px;
    min-width: 180px;
    max-width: min(92vw, 420px);
    font-family: inherit;
}

.nxs-select-menu.is-open {
    display: block;
}

.nxs-select-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 8px;
    border-bottom: 1px solid var(--nx-glass-sep);
    margin-bottom: 4px;
}

.nxs-select-search input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 4px 2px !important;
    font-size: .86rem;
    color: var(--nx-text) !important;
    outline: none;
}

.nxs-select-search svg {
    flex: none;
    color: var(--nx-subtle);
}

.nxs-select-list {
    max-height: 264px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.nxs-select-group {
    padding: 8px 10px 4px;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--nx-subtle);
}

.nxs-select-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 12px;
    font-size: .875rem;
    font-weight: 560;
    color: var(--nx-text);
    cursor: pointer;
    transition: background var(--nx-transition), color var(--nx-transition);
}

/* is-active follows the keyboard cursor, is-selected is the value
   currently held by the underlying <select>. */
.nxs-select-opt.is-active {
    background: var(--nx-glass-hover);
}

.nxs-select-opt.is-selected {
    background: var(--nx-glass-active);
    color: var(--nx-primary);
    font-weight: 720;
}

.nxs-select-opt.is-disabled {
    opacity: .42;
    cursor: not-allowed;
}

.nxs-select-opt-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nxs-select-check {
    flex: none;
    opacity: 0;
    color: var(--nx-primary);
}

.nxs-select-opt.is-selected .nxs-select-check {
    opacity: 1;
}

.nxs-select-empty {
    padding: 14px 10px;
    text-align: center;
    font-size: .82rem;
    color: var(--nx-subtle);
}

/* ============================================================
   Flatpickr — the date / datetime calendar, dressed in the same
   glass as the menus above (surface comes from the shared rule).
   ============================================================ */
.flatpickr-calendar {
    font-family: inherit;
    width: auto !important;
    padding: 12px 14px 6px;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
    display: none !important;
}

.flatpickr-months {
    padding-bottom: 2px;
    align-items: center;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month {
    font-size: 1.05rem;
    font-weight: 760;
    color: var(--nx-heading) !important;
    background: transparent !important;
    padding: 0;
    letter-spacing: -.01em;
    overflow: visible;
}

/* The month <select> and year <input> sit inside the calendar and must
   not pick up the app-wide form chrome (filled background, border,
   caret sprite), which would render them as white pills on the glass. */
.flatpickr-calendar .flatpickr-monthDropdown-months,
.flatpickr-calendar input.cur-year,
.flatpickr-calendar .numInputWrapper input {
    font-weight: 760;
    color: var(--nx-heading) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding-right: 0 !important;
}

.flatpickr-calendar .flatpickr-monthDropdown-months {
    appearance: menulist;
    -webkit-appearance: menulist;
    cursor: pointer;
}

/* Options render in an OS popup, so they need a solid colour. */
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background: var(--nx-card) !important;
    color: var(--nx-text) !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    color: var(--nx-muted) !important;
    fill: var(--nx-muted) !important;
    border-radius: 999px !important;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background var(--nx-transition), color var(--nx-transition);
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: currentColor !important;
    width: 13px;
    height: 13px;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: var(--nx-glass-hover) !important;
    color: var(--nx-primary) !important;
    fill: var(--nx-primary) !important;
}

.numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--nx-muted) !important;
}

.numInputWrapper span.arrowDown:after {
    border-top-color: var(--nx-muted) !important;
}

/* Weekday strip, closed by the lit hairline from the reference. */
.flatpickr-weekdays {
    background: transparent !important;
    margin-bottom: 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, rgba(99, 91, 255, .55), transparent) 1;
}

.flatpickr-weekdaycontainer {
    background: transparent !important;
}

span.flatpickr-weekday {
    color: var(--nx-subtle) !important;
    font-weight: 800;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: transparent !important;
}

/* Paint only. Flatpickr sizes the grid (dayContainer is a fixed
   ~308px flex row and each day flex-basis:14.28%), so overriding
   width/min-width/max-width here stretches the calendar out of shape. */
.flatpickr-days,
.dayContainer {
    background: transparent !important;
    border: none !important;
}

/* flatpickr.min.css is loaded from the nxs-datepicker partial at the end
   of <body>, i.e. AFTER this stylesheet, so its own .flatpickr-day rule
   (a hardcoded color:#393939) outranks anything unflagged here and would
   leave the dates near-invisible on the dark glass. Hence !important. */
.flatpickr-day {
    color: var(--nx-text) !important;
    border-radius: 12px !important;
    font-weight: 620 !important;
    border: 1.5px solid transparent !important;
    transition: background var(--nx-transition), color var(--nx-transition), border-color var(--nx-transition), box-shadow var(--nx-transition);
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--nx-glass-hover) !important;
    border-color: transparent !important;
    color: var(--nx-primary) !important;
}

.flatpickr-day.today {
    border-color: var(--nx-primary) !important;
    color: var(--nx-primary) !important;
    font-weight: 760;
}

.flatpickr-day.today:hover {
    background: var(--nx-glass-hover) !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: linear-gradient(160deg, var(--nx-primary), var(--nx-primary-dark)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(99, 91, 255, .38);
}

.flatpickr-day.inRange {
    background: var(--nx-glass-active) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--nx-primary) !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--nx-subtle) !important;
    opacity: .45;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--nx-subtle) !important;
    opacity: .3;
    background: transparent !important;
}

.flatpickr-time {
    border-top: 1px solid var(--nx-glass-sep) !important;
    margin-top: 4px;
}

.flatpickr-time input,
.flatpickr-time .numInput {
    color: var(--nx-text) !important;
    font-weight: 700;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
    color: var(--nx-muted) !important;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
    background: var(--nx-glass-hover) !important;
}

/* Clear / Today footer, injected by NxsDatepicker (nxs-datepicker.blade.php) */
.nxs-fp-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: 6px -4px -2px;
    padding: 10px 4px 2px;
    border-top: 1px solid var(--nx-glass-sep);
}

.nxs-fp-footer button {
    border: none;
    background: transparent;
    font-size: .8rem;
    font-weight: 720;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--nx-transition), color var(--nx-transition);
}

.nxs-fp-footer .nxs-fp-clear {
    color: var(--nx-muted);
}

.nxs-fp-footer .nxs-fp-clear:hover {
    background: var(--nx-glass-sep);
    color: var(--nx-text);
}

.nxs-fp-footer .nxs-fp-today {
    color: var(--nx-primary);
    background: var(--nx-glass-hover);
}

.nxs-fp-footer .nxs-fp-today:hover {
    background: var(--nx-primary);
    color: #fff;
}

/* System SVG polish */
[data-theme="dark"] .sidebar-item > svg,
[data-theme="dark"] .asb-item > svg,
[data-theme="dark"] .asb-sub-item > svg {
    background:
        linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
        var(--nx-icon-bg);
    border-color: var(--nx-icon-border);
    color: var(--nx-icon-ink);
}

[data-theme="dark"] .sidebar-item:hover > svg,
[data-theme="dark"] .asb-item:hover > svg,
[data-theme="dark"] .asb-sub-item:hover > svg,
[data-theme="dark"] .sidebar-item.active > svg,
[data-theme="dark"] .asb-item.active > svg,
[data-theme="dark"] .asb-item.on > svg,
[data-theme="dark"] .asb-sub-item.active > svg,
[data-theme="dark"] .asb-sub-item.on > svg {
    background:
        linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.035)),
        rgba(165, 180, 252, .09);
    border-color: rgba(165, 180, 252, .18);
    color: var(--nx-icon-accent);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}

[data-theme="dark"] .nxm-shortcut-btn,
[data-theme="dark"] .nxm-header-icon,
[data-theme="dark"] .ah-op-btn,
[data-theme="dark"] .ah-icon-btn,
[data-theme="dark"] .sidebar-toggle,
[data-theme="dark"] .adm-btn-icon {
    background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)) !important;
    border-color: var(--nx-border) !important;
    color: var(--nx-icon-ink) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

[data-theme="dark"] .nxm-shortcut-btn:hover,
[data-theme="dark"] .nxm-header-icon:hover,
[data-theme="dark"] .ah-op-btn:hover,
[data-theme="dark"] .ah-icon-btn:hover,
[data-theme="dark"] .sidebar-toggle:hover,
[data-theme="dark"] .adm-btn-icon:hover {
    background:
        linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.035)),
        var(--nx-icon-bg) !important;
    border-color: rgba(165, 180, 252, .18) !important;
    color: var(--nx-icon-accent) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255,255,255,.08) !important;
}