/* ========================================================================== */
/* NXUI-inspired premium layer — ported for Laravel/Blade, dependency-free.   */
/* Sources of interaction patterns: Spotlight Card, Border Glow,             */
/* Noise Texture and Gradient Text from nxui.geoql.in.                        */
/* ========================================================================== */

:root {
    --nx-surface: rgba(31, 20, 23, 0.76);
    --nx-surface-strong: rgba(25, 16, 20, 0.93);
    --nx-line: rgba(255, 237, 226, 0.105);
    --nx-line-hot: rgba(242, 139, 93, 0.48);
    --nx-coral: #f27d5f;
    --nx-gold: #f5bb65;
    --nx-berry: #c84c68;
    --nx-teal: #5fc1ad;
    --nx-purple: #a886ef;
    --nx-ease: cubic-bezier(.2,.8,.2,1);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(720px circle at var(--nx-pointer-x, 75%) var(--nx-pointer-y, 12%), rgba(242,125,95,.115), transparent 56%),
        radial-gradient(520px circle at 8% 92%, rgba(168,134,239,.065), transparent 58%);
    transition: background-position .25s ease;
}

.nx-noise-layer {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: .022;
    mix-blend-mode: soft-light;
}

main,
.sidebar { isolation: isolate; }

.sidebar {
    border-radius: 0;
    border-left-color: rgba(255,255,255,.085);
    background:
        linear-gradient(180deg, rgba(34,21,23,.92), rgba(20,14,17,.94)),
        var(--chrome-bg);
    box-shadow: -14px 0 44px rgba(5,3,5,.22);
}

.brand {
    margin: .2rem .2rem .8rem;
    padding: .55rem .6rem 1rem;
}

.brand-mark {
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(200,76,104,.23), inset 0 1px 0 rgba(255,255,255,.24);
}

.brand-mark::after {
    content: "";
    position: absolute;
    inset: -45%;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%);
    transform: translateX(70%) rotate(8deg);
    animation: nxBrandSheen 7s ease-in-out infinite;
}

@keyframes nxBrandSheen {
    0%, 64%, 100% { transform: translateX(70%) rotate(8deg); }
    76% { transform: translateX(-70%) rotate(8deg); }
}

.sidebar li a,
.logout-btn,
.nav-group > summary {
    border-radius: 13px;
    transition: transform .28s var(--nx-ease), background .28s ease, border-color .28s ease, color .28s ease, box-shadow .28s ease;
}

.sidebar li a:hover,
.nav-group > summary:hover {
    transform: translateX(-3px);
    background: linear-gradient(90deg, rgba(242,125,95,.11), rgba(255,255,255,.035));
    border-color: rgba(242,125,95,.18);
}

.sidebar li a.active {
    background: linear-gradient(120deg, rgba(200,76,104,.95), rgba(242,125,95,.92) 60%, rgba(245,187,101,.92));
    box-shadow: 0 12px 30px rgba(200,76,104,.2), inset 0 1px 0 rgba(255,255,255,.2);
}

.topbar {
    min-height: 74px;
    padding: .75rem 1.05rem;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(36,22,26,.88), rgba(24,16,20,.72));
    border-color: rgba(255,255,255,.1);
    box-shadow: 0 14px 40px rgba(3,2,3,.22), inset 0 1px 0 rgba(255,255,255,.055);
}

.topbar::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(115deg, rgba(242,125,95,.35), transparent 24%, transparent 72%, rgba(168,134,239,.2));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.topbar-title strong,
.dash-hero h1,
.page-header h1,
main > h1 {
    color: transparent;
    background: linear-gradient(90deg, #fff8f1, var(--nx-gold), var(--nx-coral), #fff8f1);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: nxGradientText 9s ease-in-out infinite alternate;
}

@keyframes nxGradientText {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

.topbar-search input {
    min-height: 44px;
    background: rgba(10,7,10,.52);
    border-color: rgba(255,255,255,.095);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.topbar-search input:focus {
    background: rgba(13,9,12,.82);
    border-color: rgba(242,125,95,.48);
    box-shadow: 0 0 0 4px rgba(242,125,95,.1), 0 8px 25px rgba(0,0,0,.15);
}

.topbar-bell,
.help-mode-toggle {
    transition: transform .25s var(--nx-ease), border-color .25s ease, background .25s ease;
}

.topbar-bell:hover,
.help-mode-toggle:hover {
    transform: translateY(-2px) scale(1.03);
    border-color: rgba(242,125,95,.32);
    background: rgba(242,125,95,.1);
}

.topbar-user .avatar {
    box-shadow: 0 8px 24px rgba(200,76,104,.24), inset 0 1px 0 rgba(255,255,255,.28);
}

.stat-card,
.form-card,
.detail-card,
.table-wrap,
.login-card,
.monitor-card,
.metric-card,
.gauge-card,
.nx-spotlight {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(255,255,255,.045), transparent 35%),
        var(--nx-surface);
    border-color: var(--nx-line);
    box-shadow: 0 15px 44px rgba(5,3,5,.2), inset 0 1px 0 rgba(255,255,255,.045);
    transform: translateZ(0);
}

.nx-spotlight::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 420px;
    height: 420px;
    left: var(--nx-local-x, -500px);
    top: var(--nx-local-y, -500px);
    transform: translate(-50%,-50%);
    background: radial-gradient(circle, rgba(242,125,95,.15), rgba(168,134,239,.055) 34%, transparent 68%);
    opacity: var(--nx-hover, 0);
    transition: opacity .38s ease;
    pointer-events: none;
}

.nx-spotlight::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--nx-angle, 225deg), rgba(242,125,95,.72), transparent 24%, rgba(168,134,239,.28) 55%, transparent 76%, rgba(245,187,101,.58));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: calc(.18 + var(--nx-hover, 0) * .72);
    transition: opacity .3s ease;
    pointer-events: none;
}

.nx-spotlight > * { position: relative; z-index: 1; }

.stat-card,
.metric-card,
.monitor-card,
.gauge-card,
.form-card,
.detail-card {
    transition: transform .34s var(--nx-ease), border-color .3s ease, box-shadow .34s ease;
}

.stat-card:hover,
.metric-card:hover,
.monitor-card:hover,
.gauge-card:hover,
.form-card:hover,
.detail-card:hover {
    transform: translateY(-4px);
    border-color: rgba(242,125,95,.25);
    box-shadow: 0 20px 50px rgba(4,2,4,.27), 0 0 32px rgba(242,125,95,.055), inset 0 1px 0 rgba(255,255,255,.07);
}

.stat-value,
.metric-value,
.kpi-value {
    letter-spacing: -.035em;
    text-shadow: 0 8px 24px rgba(245,187,101,.12);
}

.table-wrap {
    border-radius: 20px;
}

table thead th {
    background: rgba(255,255,255,.028);
    color: #e8d7dc;
    border-bottom-color: rgba(255,255,255,.09);
}

table tbody tr {
    transition: background .2s ease, transform .2s var(--nx-ease);
}

table tbody tr:hover {
    background: linear-gradient(90deg, rgba(242,125,95,.075), rgba(168,134,239,.035));
}

.btn-primary,
button.btn-primary,
a.btn-primary {
    position: relative;
    overflow: hidden;
    border: 0;
    background: linear-gradient(115deg, var(--nx-berry), var(--nx-coral) 55%, var(--nx-gold));
    box-shadow: 0 10px 26px rgba(200,76,104,.22), inset 0 1px 0 rgba(255,255,255,.22);
    transition: transform .25s var(--nx-ease), box-shadow .25s ease, filter .25s ease;
}

.btn-primary::after,
button.btn-primary::after,
a.btn-primary::after {
    content: "";
    position: absolute;
    inset: -80% -30%;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.3) 50%, transparent 60%);
    transform: translateX(65%);
    transition: transform .65s var(--nx-ease);
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    transform: translateY(-2px);
    filter: saturate(1.08);
    box-shadow: 0 15px 34px rgba(200,76,104,.3), inset 0 1px 0 rgba(255,255,255,.25);
}

.btn-primary:hover::after,
button.btn-primary:hover::after,
a.btn-primary:hover::after { transform: translateX(-65%); }

input,
select,
textarea {
    transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(242,125,95,.48) !important;
    box-shadow: 0 0 0 4px rgba(242,125,95,.09) !important;
}

.nx-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s var(--nx-ease), transform .6s var(--nx-ease);
}

.nx-reveal.nx-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .brand-mark::after,
    .topbar-title strong,
    .dash-hero h1,
    .page-header h1,
    main > h1 { animation: none !important; }
    .nx-reveal { opacity: 1; transform: none; transition: none; }
    .nx-spotlight::before { display: none; }
}

@media (max-width: 768px) {
    .topbar { border-radius: 16px; min-height: 64px; }
    .stat-card:hover,
    .metric-card:hover,
    .monitor-card:hover,
    .gauge-card:hover,
    .form-card:hover,
    .detail-card:hover { transform: none; }
}

/* Specificity bridge for the existing glass-ui theme loaded before this file. */
body .topbar {
    background: linear-gradient(135deg, rgba(36,22,26,.91), rgba(24,16,20,.79)) !important;
    border-color: rgba(255,255,255,.1) !important;
    box-shadow: 0 14px 40px rgba(3,2,3,.22), inset 0 1px 0 rgba(255,255,255,.055) !important;
}

body .sidebar {
    position: fixed !important;
    right: 0;
    top: 0;
    background: linear-gradient(180deg, rgba(34,21,23,.94), rgba(20,14,17,.97)) !important;
}

body .nx-spotlight,
body .stat-card,
body .form-card,
body .detail-card,
body .table-wrap,
body .monitor-card,
body .metric-card,
body .gauge-card {
    background-color: var(--nx-surface) !important;
    background-image: linear-gradient(145deg, rgba(255,255,255,.045), transparent 35%) !important;
    border-color: var(--nx-line) !important;
    box-shadow: 0 15px 44px rgba(5,3,5,.2), inset 0 1px 0 rgba(255,255,255,.045) !important;
}

/* EasyUI-inspired micro interactions, ported without React dependencies. */
@property --easyui-edge-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
@keyframes easyuiEdgeOrbit { to { --easyui-edge-angle: 360deg; } }
@keyframes easyuiValueIn {
    from { opacity: .25; transform: translateY(7px) scale(.975); filter: blur(2px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes easyuiPageSettle {
    0% { transform: scale(.86); opacity: .45; }
    65% { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}
.nxui-ready :is(.btn-primary, button.primary, a.primary, .action-primary, [type="submit"]):not(.logout-btn) {
    position: relative; isolation: isolate; overflow: hidden;
    border-color: transparent !important;
    box-shadow: 0 10px 26px rgba(200,76,104,.18), 0 0 22px -10px rgba(245,187,101,.8);
}
.nxui-ready :is(.btn-primary, button.primary, a.primary, .action-primary, [type="submit"]):not(.logout-btn)::before {
    content: ""; position: absolute; z-index: -2; inset: -180%;
    background: conic-gradient(from var(--easyui-edge-angle), transparent 0 72%, rgba(255,255,255,.95) 80%, var(--nx-gold) 85%, var(--nx-coral) 90%, transparent 97%);
    animation: easyuiEdgeOrbit 3.6s linear infinite;
}
.nxui-ready :is(.btn-primary, button.primary, a.primary, .action-primary, [type="submit"]):not(.logout-btn)::after {
    content: ""; position: absolute; z-index: -1; inset: 1px; border-radius: inherit;
    background: linear-gradient(125deg, #c84c68, #e86f5d 56%, #d9984d);
    box-shadow: inset 0 1px rgba(255,255,255,.22);
}
.nx-pressable {
    transform-origin: 50% 70%;
    transition: transform .28s cubic-bezier(.2,.85,.25,1.25), box-shadow .25s ease, filter .2s ease !important;
    -webkit-tap-highlight-color: transparent;
}
.nx-pressable:hover { filter: brightness(1.055); }
.nx-pressable.nx-pressed { transform: scaleX(.975) scaleY(.94) !important; }
.nx-counting { display: inline-block; font-variant-numeric: tabular-nums; animation: easyuiValueIn .62s var(--nx-ease) both; }
.topbar-search, .search-box, form:has(> input[type="search"]) {
    transition: width .42s cubic-bezier(.2,.85,.2,1), transform .35s var(--nx-ease);
}
.topbar-search:focus-within, .search-box:focus-within, form:has(> input[type="search"]):focus-within { transform: translateY(-1px); }
.topbar-search input[type="search"], .topbar-search input[type="text"] { transition: width .42s cubic-bezier(.2,.85,.2,1), background .25s ease, box-shadow .25s ease; }
@media (min-width: 860px) {
    .topbar-search input[type="search"]:focus, .topbar-search input[type="text"]:focus { width: min(34vw, 390px); }
}
.pagination {
    gap: .45rem; padding: .42rem; width: fit-content;
    border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
    background: rgba(18,12,15,.58);
    box-shadow: inset 0 1px rgba(255,255,255,.035), 0 10px 30px rgba(0,0,0,.13);
}
.pagination .page { border-radius: 9px; transition: transform .28s var(--nx-ease), color .2s ease, background .2s ease, border-color .2s ease; }
.pagination a.page:hover { transform: translateY(-2px); border-color: rgba(242,125,95,.34); }
.pagination .page-info {
    position: relative; padding: .55rem .85rem; border-radius: 9px; color: #fff7f1;
    background: linear-gradient(120deg, rgba(200,76,104,.78), rgba(242,125,95,.7));
    box-shadow: 0 7px 18px rgba(200,76,104,.17), inset 0 1px rgba(255,255,255,.16);
    animation: easyuiPageSettle .5s var(--nx-ease) both;
}
@media (prefers-reduced-motion: reduce) {
    .nxui-ready :is(.btn-primary, button.primary, a.primary, .action-primary, [type="submit"])::before { animation: none; }
    .nx-counting, .pagination .page-info { animation: none; }
    .nx-pressable { transition: none !important; }
}