/* ═══════════════════════════════════════════════════════════════════════════
   APP.CSS — Import manifest + minimal app-level rules
   Load order is intentional: tokens → reset → components → utilities
   Never add component styles here; use the appropriate component file.
   ════════════════════════════════════════════════════════════════════════ */

/* 1. Design tokens (CSS custom properties) */
@import "tokens.css";

/* 2. Base reset */
@import "reset.css";
@import "cc-animations.css";

/* 2.5 Glasmorphism system (Light Mode + Warm Colors) */
@import "glasmorphism.css";

/* 3. Component library — order matters for cascade */
@import "components/badges.css";
@import "components/briefing.css";
@import "components/buttons.css";
@import "components/forms.css";
@import "components/dialogs.css";
@import "components/navigation.css";
@import "components/states.css";
@import "components/toast.css";
@import "components/settings.css";
@import "components/users.css";
@import "components/community.css";
@import "components/auth-shell.css";

/* 4. Feature modules */
@import "media.css";
@import "content-studio.css";

/* 5. Utilities — loaded last; highest specificity intentional */
@import "utilities.css";

/* ── App shell ───────────────────────────────────────────────────────────── */
html, body {
    font-family: var(--cc-font-sans);
    min-height: 100%;
    margin: 0;
    background: var(--cc-bg);
    color: var(--cc-fg);
    color-scheme: dark;
}

body::before,
body::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    height: 3px;
    pointer-events: none;
    z-index: 999;
    background: linear-gradient(90deg,
        var(--cc-neon-cyan),
        var(--cc-neon-purple),
        var(--cc-neon-green),
        var(--cc-neon-amber),
        var(--cc-neon-red),
        var(--cc-neon-cyan));
    background-size: 360% 100%;
    box-shadow:
        0 0 16px rgba(var(--cc-neon-cyan-rgb), .55),
        0 0 30px rgba(var(--cc-neon-purple-rgb), .26);
    animation: cc-led-spectrum 8s linear infinite;
}

body::before { top: 0; }
body::after  { bottom: 0; opacity: .72; }

#app {
    min-height: 100vh;
    background: var(--cc-bg);
    color: var(--cc-fg);
    position: relative;
    background-image:
        radial-gradient(circle at 12% 8%, rgba(var(--cc-neon-cyan-rgb), .12), transparent 30vw),
        radial-gradient(circle at 82% 12%, rgba(var(--cc-neon-purple-rgb), .12), transparent 28vw),
        radial-gradient(circle at 72% 86%, rgba(var(--cc-neon-green-rgb), .08), transparent 30vw),
        linear-gradient(180deg, color-mix(in oklch, var(--cc-accent) 7%, transparent), transparent 260px),
        linear-gradient(90deg, color-mix(in oklch, var(--cc-cyan, #5DD9C1) 5%, transparent), transparent 34%),
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
    background-size: auto, auto, 36px 36px, 36px 36px;
    background-attachment: fixed;
}

#app::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(115deg, transparent 0 18%, rgba(var(--cc-neon-cyan-rgb), .055) 28%, transparent 42%),
        linear-gradient(245deg, transparent 0 45%, rgba(var(--cc-neon-purple-rgb), .052) 58%, transparent 72%);
    mix-blend-mode: screen;
    opacity: .75;
    animation: cc-aurora-drift 18s ease-in-out infinite alternate;
}

.app-shell,
.auth-layout {
    position: relative;
    z-index: 1;
}

.card,
.page-header,
.studio-section,
.hub-context-bar,
.hub-studio-unknown {
    border-color: color-mix(in oklch, var(--cc-neon-cyan) 20%, var(--cc-border-luxe)) !important;
    box-shadow:
        0 18px 48px rgba(0,0,0,.34),
        0 0 0 1px rgba(255,255,255,.035) inset,
        0 0 22px rgba(var(--cc-neon-cyan-rgb), .055),
        0 0 34px rgba(var(--cc-neon-purple-rgb), .04);
}

.card,
.studio-section {
    background:
        linear-gradient(145deg, rgba(var(--cc-neon-cyan-rgb), .045), transparent 34%),
        linear-gradient(315deg, rgba(var(--cc-neon-purple-rgb), .05), transparent 48%),
        color-mix(in oklch, var(--cc-bg-card) 86%, transparent) !important;
}

.card:hover,
.studio-section:hover,
.page-header:hover {
    border-color: color-mix(in oklch, var(--cc-neon-cyan) 42%, var(--cc-border-luxe)) !important;
    box-shadow:
        0 22px 54px rgba(0,0,0,.38),
        0 0 0 1px rgba(255,255,255,.05) inset,
        0 0 24px rgba(var(--cc-neon-cyan-rgb), .12),
        0 0 44px rgba(var(--cc-neon-purple-rgb), .075);
}

.page-header::after,
.studio-section::before,
.card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    border-radius: inherit;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--cc-neon-cyan-rgb), .85),
        rgba(var(--cc-neon-green-rgb), .8),
        rgba(var(--cc-neon-purple-rgb), .82),
        transparent);
    background-size: 240% 100%;
    opacity: .58;
    pointer-events: none;
    animation: cc-led-spectrum 9s linear infinite;
}

.card,
.studio-section {
    position: relative;
    overflow: visible;
}

.clip-card,
.surface-clip,
.card[data-clip="true"],
.studio-section[data-clip="true"] {
    overflow: hidden;
}

.btn-primary,
.btn-secondary,
.pill,
.filter-chip,
.tab-item.active {
    text-shadow: 0 0 14px color-mix(in oklch, currentColor 25%, transparent);
}

.btn-primary,
.pill.active,
.filter-chip.active,
.tab-item.active {
    box-shadow:
        0 10px 24px color-mix(in oklch, var(--cc-accent) 20%, transparent),
        0 0 20px rgba(var(--cc-neon-cyan-rgb), .14) !important;
}

.stat-card,
.metric-card,
.status-badge,
.severity-pill {
    filter: drop-shadow(0 0 10px rgba(var(--cc-neon-cyan-rgb), .08));
}

@keyframes cc-led-spectrum {
    0%   { background-position: 0% 50%; filter: hue-rotate(0deg); }
    50%  { background-position: 100% 50%; filter: hue-rotate(18deg); }
    100% { background-position: 0% 50%; filter: hue-rotate(0deg); }
}

@keyframes cc-aurora-drift {
    from { transform: translate3d(-1.5%, -1%, 0) scale(1); opacity: .62; }
    to   { transform: translate3d(1.5%, 1%, 0) scale(1.03); opacity: .86; }
}

html[data-theme="light"],
body[data-theme="light"],
[data-theme="light"] body {
    color-scheme: light;
}

[data-theme="light"] #app {
    background-image:
        linear-gradient(180deg, color-mix(in oklch, var(--cc-accent) 7%, transparent), transparent 260px),
        linear-gradient(90deg, color-mix(in oklch, var(--cc-cyan, #5DD9C1) 5%, transparent), transparent 34%);
}

/* ── Auth layout ─────────────────────────────────────────────────────────── */
.auth-layout {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--cc-bg);
    color: var(--cc-fg);
}

/* ── Inline content area ─────────────────────────────────────────────────── */
.content {
    padding-top: 1.1rem;
}

/* ── Form validation (Blazor DataAnnotationsValidator) ──────────────────── */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--cc-success);
}

.invalid {
    outline: 1px solid var(--cc-danger);
}

.validation-message {
    color: var(--cc-danger);
    font-size: var(--cc-fs-xs);
    font-family: var(--cc-font-sans);
}

/* ── Blazor floating label placeholder fix ──────────────────────────────── */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--cc-fg-dim);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}