/* ==========================================================================
   Rust Checker — "AURORA" design system
   Cinematic glassmorphism: frosted panels over a moody gradient, soft glows,
   smooth rounded corners, real server/map art as ambient backdrops.
   Class names are kept stable so every page inherits the look.
   ========================================================================== */

@font-face {
    font-family: rust_font;
    src: url(../fonts/Rust.ttf);
    font-display: swap;
}

:root {
    --background: 222 18% 5%;
    --foreground: 30 25% 95%;
    --card: 222 16% 11%;
    --muted: 222 12% 16%;
    --muted-foreground: 30 8% 64%;
    --border: 0 0% 100%;          /* used at low alpha for glass edges */
    --primary: 16 90% 55%;
    --primary-foreground: 0 0% 100%;
    --ember: 30 95% 58%;
    --radius: 1rem;

    --rust: #f0631f;

    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

html { scroll-behavior: smooth; }

body {
    color: hsl(var(--foreground));
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background-color: hsl(var(--background));
}

/* Fixed gradient backdrop (cheaper than background-attachment: fixed) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(55rem 40rem at 8% -6%, hsl(16 85% 48% / 0.20), transparent 55%),
        radial-gradient(48rem 38rem at 96% 4%, hsl(28 85% 50% / 0.14), transparent 52%),
        radial-gradient(60rem 50rem at 50% 112%, hsl(14 75% 42% / 0.12), transparent 60%);
}

/* ---------- typography ---------- */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.1;
}
.rust_font { font-family: rust_font, sans-serif; letter-spacing: .02em; }
.font-display { font-family: var(--font-display); }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
code, .font-mono { font-family: var(--font-mono); }

.kicker {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: hsl(var(--primary));
}
.section-head {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
    color: hsl(var(--foreground));
}

::selection { background: hsl(var(--primary) / 0.35); color: #fff; }

/* ---------- scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(0 0% 100% / 0.12); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--primary) / 0.7); background-clip: padding-box; }

/* ==========================================================================
   Top navigation (glass bar)
   ========================================================================== */
.topnav {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid hsl(var(--border) / 0.06);
    background: hsl(222 18% 5% / 0.55);
}
.topnav-link {
    position: relative;
    font-size: 0.92rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    padding: 0.35rem 0;
    transition: color .18s ease;
}
.topnav-link:hover { color: hsl(var(--foreground)); }
.topnav-link.active { color: #fff; }
.topnav-link.active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1.35rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--ember)));
    box-shadow: 0 0 12px hsl(var(--primary) / 0.7);
}

/* ==========================================================================
   Surfaces — frosted glass
   ========================================================================== */
.rc-card {
    position: relative;
    /* Translucent panel (no per-card backdrop blur — keeps it light on the GPU;
       true frosted blur is reserved for the nav + hero). */
    background: linear-gradient(180deg, hsl(222 16% 12% / 0.85), hsl(222 17% 9% / 0.85));
    border: 1px solid hsl(var(--border) / 0.08);
    border-radius: var(--radius);
    box-shadow:
        0 12px 40px -18px rgb(0 0 0 / 0.65),
        inset 0 1px 0 hsl(var(--border) / 0.06);
}
.rc-card-hover { transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease, box-shadow .25s ease; }
.rc-card-hover:hover {
    transform: translateY(-3px);
    border-color: hsl(var(--primary) / 0.35);
    box-shadow:
        0 24px 60px -24px rgb(0 0 0 / 0.75),
        0 0 50px -26px hsl(16 90% 55% / 0.6),
        inset 0 1px 0 hsl(var(--border) / 0.1);
}
.rc-glass {
    background: hsl(222 16% 9% / 0.6);
}

/* Ambient art backdrop inside a card (server/map art) */
.rc-art {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.16;
    pointer-events: none;
    filter: saturate(120%);
}
.rc-art-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, hsl(222 16% 8% / 0.2), hsl(222 16% 9% / 0.85));
}

/* legacy hero frame -> glass hero (corner spans hidden) */
.hud-frame {
    position: relative;
    border: 1px solid hsl(var(--border) / 0.08);
    border-radius: calc(var(--radius) + 6px);
    background:
        radial-gradient(120% 120% at 50% -10%, hsl(16 85% 50% / 0.14), transparent 55%),
        hsl(222 16% 10% / 0.45);
    box-shadow: 0 30px 80px -40px rgb(0 0 0 / 0.8), inset 0 1px 0 hsl(var(--border) / 0.08);
}
.hud-frame > .corner { display: none; }

/* ---------- pills / badges ---------- */
.rc-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .65rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    border-radius: 9999px;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.2;
}
.tone-emerald { background: hsl(152 60% 45% / .14); color: hsl(152 70% 64%); border-color: hsl(152 60% 45% / .28); }
.tone-lime    { background: hsl(90 60% 45% / .14);  color: hsl(90 70% 64%);  border-color: hsl(90 60% 45% / .28); }
.tone-amber   { background: hsl(43 90% 50% / .14);  color: hsl(43 95% 64%);  border-color: hsl(43 90% 50% / .28); }
.tone-orange  { background: hsl(25 90% 52% / .14);  color: hsl(25 95% 66%);  border-color: hsl(25 90% 52% / .28); }
.tone-red     { background: hsl(0 80% 55% / .14);   color: hsl(0 90% 70%);   border-color: hsl(0 80% 55% / .3); }
.tone-blue    { background: hsl(205 85% 55% / .14); color: hsl(205 92% 72%); border-color: hsl(205 85% 55% / .28); }
.tone-zinc    { background: hsl(220 8% 50% / .14);  color: hsl(220 10% 74%); border-color: hsl(220 8% 50% / .28); }
.tone-primary { background: hsl(var(--primary) / .15); color: hsl(18 95% 68%); border-color: hsl(var(--primary) / .35); }

.text-emerald { color: hsl(152 70% 64%); }
.text-amber   { color: hsl(43 95% 64%); }
.text-orange  { color: hsl(25 95% 66%); }
.text-red     { color: hsl(0 90% 70%); }
.text-lime    { color: hsl(90 70% 64%); }
.text-rust    { color: hsl(var(--primary)); }

/* ---------- buttons ---------- */
.rc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
    padding: .6rem 1.15rem;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    border-radius: 0.7rem;
    transition: transform .12s ease, filter .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .2s ease;
}
.rc-btn:active { transform: translateY(1px); }
.rc-btn-primary {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--ember)));
    color: #fff;
    box-shadow: 0 10px 30px -10px hsl(16 90% 52% / 0.6);
}
.rc-btn-primary:hover { filter: brightness(1.07); box-shadow: 0 14px 36px -10px hsl(16 90% 52% / 0.8); }
.rc-btn-ghost {
    background: hsl(var(--border) / 0.05);
    color: hsl(var(--foreground));
    border-color: hsl(var(--border) / 0.12);
}
.rc-btn-ghost:hover { background: hsl(var(--border) / 0.1); border-color: hsl(var(--primary) / 0.4); }

/* ---------- inputs ---------- */
.rc-input {
    background: hsl(222 16% 8% / 0.55);
    border: 1px solid hsl(var(--border) / 0.1);
    border-radius: 0.8rem;
    color: hsl(var(--foreground));
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.rc-input::placeholder { color: hsl(var(--muted-foreground) / 0.7); }
.rc-input:focus {
    outline: none;
    border-color: hsl(var(--primary) / 0.6);
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.16);
    background: hsl(222 16% 9% / 0.7);
}

/* legacy sidebar link (kept harmless) */
.rc-nav-link { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border-radius: .7rem; color: hsl(var(--muted-foreground)); }
.rc-nav-link.active { color: #fff; background: hsl(var(--primary) / 0.14); }

/* ---------- stat icon ---------- */
.rc-stat-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.85rem;
    background: linear-gradient(140deg, hsl(var(--primary) / 0.2), hsl(var(--ember) / 0.08));
    color: hsl(18 95% 66%);
    border: 1px solid hsl(var(--primary) / 0.22);
    font-size: 1.15rem;
}

/* ---------- risk donut ---------- */
.rc-donut-track { stroke: hsl(var(--border) / 0.1); }
.rc-donut-bar { transition: stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1); stroke-linecap: round; }

/* ---------- tabs ---------- */
.rc-tab {
    padding: .5rem .95rem;
    border-radius: 0.7rem;
    font-weight: 600;
    font-size: .88rem;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}
.rc-tab:hover { color: hsl(var(--foreground)); }
.rc-tab.active { color: #fff; background: hsl(var(--primary) / 0.15); border-color: hsl(var(--primary) / 0.3); }
.rc-tabpane { display: none; }
.rc-tabpane.active { display: block; animation: rc-fade-up .4s ease both; }

/* ---------- table ---------- */
.rc-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.rc-table thead th {
    text-align: left;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: hsl(var(--muted-foreground));
    padding: .65rem .85rem;
    border-bottom: 1px solid hsl(var(--border) / 0.08);
}
.rc-table tbody td { padding: .72rem .85rem; border-bottom: 1px solid hsl(var(--border) / 0.05); font-size: .9rem; }
.rc-table tbody tr { transition: background-color .12s ease; }
.rc-table tbody tr:hover { background: hsl(var(--border) / 0.03); }
.rc-table tbody tr:last-child td { border-bottom: none; }

/* ---------- skeleton ---------- */
.rc-skeleton { position: relative; overflow: hidden; background: hsl(var(--border) / 0.06); border-radius: .6rem; }
.rc-skeleton::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, hsl(0 0% 100% / 0.06), transparent);
    animation: rc-shimmer 1.4s infinite;
}

/* ---------- meter ---------- */
.rc-meter { height: .4rem; border-radius: 9999px; background: hsl(var(--border) / 0.08); overflow: hidden; }
.rc-meter > span {
    display: block; height: 100%; border-radius: 9999px;
    background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--ember)));
    box-shadow: 0 0 12px hsl(16 90% 52% / 0.5);
    transition: width 1s cubic-bezier(.16,1,.3,1);
}

/* ---------- preloader ---------- */
.rc-preloader {
    position: fixed; inset: 0; z-index: 100;
    display: grid; place-items: center; background: hsl(var(--background));
    transition: opacity .5s ease, visibility .5s ease;
}
.rc-preloader.hidden { opacity: 0; visibility: hidden; }

/* ---------- dots ---------- */
.rc-dot { width: .5rem; height: .5rem; border-radius: 99px; display: inline-block; }
.rc-dot-online { background: hsl(152 70% 52%); box-shadow: 0 0 8px hsl(152 70% 52%); }
.rc-dot-offline { background: hsl(220 6% 42%); }

/* ---------- motion ---------- */
@keyframes rc-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rc-shimmer { 100% { transform: translateX(100%); } }
@keyframes rc-spin { to { transform: rotate(360deg); } }
@keyframes rc-pulse-glow { 0%,100% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0.4); } 50% { box-shadow: 0 0 0 10px hsl(var(--primary) / 0); } }
@keyframes rc-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.rc-spin { animation: rc-spin .8s linear infinite; display: inline-block; }
.rc-fade-up { animation: rc-fade-up .5s ease both; }
.rc-pulse-glow { animation: rc-pulse-glow 2s ease-in-out infinite; }
.rc-stagger > * { animation: rc-fade-up .55s ease both; }
.rc-stagger > *:nth-child(1) { animation-delay: .04s; }
.rc-stagger > *:nth-child(2) { animation-delay: .08s; }
.rc-stagger > *:nth-child(3) { animation-delay: .12s; }
.rc-stagger > *:nth-child(4) { animation-delay: .16s; }
.rc-stagger > *:nth-child(5) { animation-delay: .20s; }
.rc-stagger > *:nth-child(6) { animation-delay: .24s; }

/* ---------- SweetAlert ---------- */
.swal2-popup {
    background: hsl(var(--card) / 0.9) !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--border) / 0.1) !important;
    border-radius: var(--radius) !important;
}
.swal2-title, .swal2-html-container { color: hsl(var(--foreground)) !important; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }