/* ─────────────────────────────────────────────────────────────────────────
   theme.css — Mizan Trade Admin
   MudBlazor-era stylesheet. Owns: brand tokens, aurora backdrop, control-tower
   widget, hero dark card, .mzn-num utility.
   Bootstrap / mizan-theme.css / app.css are removed in Phase 5 cleanup.
   ───────────────────────────────────────────────────────────────────────── */

/* ─── Brand tokens ───────────────────────────────────────────────────────── */
:root {
    /* ── MudBlazor CSS variable bridge ──────────────────────────────────────
       MudBlazor v9 injects --mud-palette-* on the root automatically, but some
       pages reference them before MudBlazor is hydrated. Provide safe fallbacks.  */
    --mzn-primary-color: #8F00E0;

    /* ── Unified surface / border tokens (referenced by alert, chart components) */
    --mzn-surface: #FFFFFF;
    --mzn-border:  rgba(0, 0, 0, 0.1);
    --mzn-mono:    'Fira Code', 'Consolas', 'Courier New', monospace;

    /* ── --mizan-* namespace aliases (used by TradeLifecycleCard, DonutChart, etc.)
       These map to our --mzn-* tokens so nothing breaks.                      */
    --mizan-border-strong:  #E1DCEB;
    --mizan-surface-2:      #F5F3FF;
    --mizan-text:           #1B1C39;
    --mizan-text-muted:     #5B5573;
    --mizan-text-dim:       #9089A5;
    --mizan-success:        #10B981;
    --mizan-grad-violet:    linear-gradient(135deg, #8F00E0 0%, #D155FF 100%);
    --mizan-ink-primary:    #0F0A24;
    --mizan-ink-secondary:  #5B5573;
    --mizan-ink-tertiary:   #A08CFF;

    /* ── Original brand tokens (kept in the SAME :root block) ──────────────── */
    --mzn-royal-purple:   #8F00E0;
    --mzn-orchid:         #D155FF;
    --mzn-dark-lavender:  #A08CFF;
    --mzn-light-lavender: #C6BAFF;

    /* Backwards-compat aliases used by aurora CSS */
    --mzn-purple-vibrant: #8F00E0;
    --mzn-purple-deep:    #6B00A8;
    --mzn-purple-bright:  #D155FF;
    --mzn-purple-soft:    #A08CFF;
    --mzn-purple-glow:    #C6BAFF;

    /* Lavender surfaces (light mode defaults) */
    --mzn-lavender-card: #EEE5F8;
    --mzn-lavender-mid:  #D2C1EE;
    --mzn-lavender-edge: #E9E1F9;

    /* Semantic tints (light) */
    --mzn-success:    #10B981; --mzn-success-bg: #D1FAE5;
    --mzn-warning:    #F59E0B; --mzn-warning-bg: #FEF3C7;
    --mzn-danger:     #EF4444; --mzn-danger-bg:  #FEE2E2;
    --mzn-info:       #3B82F6; --mzn-info-bg:    #DBEAFE;
}

[data-theme="dark"] {
    --mzn-lavender-card: #1B1C39;
    --mzn-lavender-mid:  #252748;
    --mzn-lavender-edge: #2D2F56;

    /* Semantic tints (dark — alpha overlays) */
    --mzn-success-bg: rgba(16, 185, 129, 0.12);
    --mzn-warning-bg: rgba(245, 158, 11,  0.12);
    --mzn-danger-bg:  rgba(239, 68, 68,   0.12);
    --mzn-info-bg:    rgba(59, 130, 246,  0.12);

    /* Surface / border overrides for dark */
    --mzn-surface: #1B1C39;
    --mzn-border:  rgba(255, 255, 255, 0.08);

    /* --mizan-* dark overrides */
    --mizan-border-strong: rgba(255, 255, 255, 0.12);
    --mizan-surface-2:     #111130;
    --mizan-text:          #F4F4F7;
    --mizan-text-muted:    #9CA0BD;
    --mizan-text-dim:      #6D6E8A;
    --mizan-ink-primary:   #F4F4F7;
    --mizan-ink-secondary: #9CA0BD;
    --mizan-ink-tertiary:  #C6BAFF;
}

/* ─── Utility ────────────────────────────────────────────────────────────── */
.mzn-num { font-variant-numeric: tabular-nums; }

/* ─── Control Tower widget (MudDrawer footer) ────────────────────────────── */
.control-tower {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 10px;
}
.ct-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.7);
    flex-shrink: 0;
}
.ct-title { font-size: 0.78rem; font-weight: 600; }
.ct-sub   { font-size: 0.70rem; opacity: 0.65; }

/* ─── Hero card (Live Shipment on Home.razor) ────────────────────────────────
   Intentionally dark in BOTH themes — it's a branded "spotlight" card, like a
   credit-card surface. Always dark purple with light text, by design. The text
   colors are scoped inside it so they never leak to the rest of the page.     */
.mzn-card--hero-dark {
    background-color: #0E091D;
    color: #F5F3FF;
    border: none !important;
    background-image: radial-gradient(circle at top right, rgba(143,0,224,0.22), transparent 50%);
}
.mzn-card--hero-dark .mud-card-header,
.mzn-card--hero-dark .card-header,
.mzn-card--hero-dark .mud-typography { color: #F5F3FF; }
.mzn-card--hero-dark .card-action  { color: #C6BAFF; }
.mzn-card--hero-dark .card-action:hover { color: #FFFFFF; }

/* ─── Stat icon pill (Home dashboard) ───────────────────────────────────── */
.mzn-stat-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.mzn-stat-icon--purple { background-color: var(--mzn-lavender-card); color: var(--mzn-purple-vibrant); }
.mzn-stat-icon--blue   { background-color: var(--mzn-info-bg);       color: var(--mzn-info); }
.mzn-stat-icon--amber  { background-color: var(--mzn-warning-bg);    color: var(--mzn-warning); }
.mzn-stat-icon--green  { background-color: var(--mzn-success-bg);    color: var(--mzn-success); }
.mzn-stat-icon--red    { background-color: var(--mzn-danger-bg);     color: var(--mzn-danger); }

/* ─── Aurora backdrop ────────────────────────────────────────────────────── */
.mzn-aurora-wrap {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.mzn-aurora-content {
    position: relative;
    z-index: 1;
}
.mzn-aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.mzn-aurora__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.7;
    will-change: transform;
}
.mzn-aurora__blob--1 {
    width: 520px; height: 520px;
    top: -120px; left: -80px;
    background: radial-gradient(circle, var(--mzn-purple-vibrant) 0%, transparent 70%);
    animation: mzn-aurora-drift-1 28s ease-in-out infinite;
}
.mzn-aurora__blob--2 {
    width: 480px; height: 480px;
    top: 20%; right: -120px;
    background: radial-gradient(circle, var(--mzn-purple-bright) 0%, transparent 70%);
    animation: mzn-aurora-drift-2 32s ease-in-out infinite;
}
.mzn-aurora__blob--3 {
    width: 600px; height: 600px;
    bottom: -180px; left: 30%;
    background: radial-gradient(circle, var(--mzn-purple-glow) 0%, transparent 70%);
    animation: mzn-aurora-drift-3 36s ease-in-out infinite;
}

/* Intensity modifiers */
.mzn-aurora--subtle .mzn-aurora__blob { opacity: 0.4; filter: blur(100px); }
.mzn-aurora--medium .mzn-aurora__blob { opacity: 0.7; filter: blur(80px); }
.mzn-aurora--full   .mzn-aurora__blob { opacity: 0.9; filter: blur(60px); }

/* Color schemes */
.mzn-aurora--lavender .mzn-aurora__blob--1 { background: radial-gradient(circle, var(--mzn-lavender-mid)  0%, transparent 70%); }
.mzn-aurora--lavender .mzn-aurora__blob--2 { background: radial-gradient(circle, var(--mzn-purple-soft)   0%, transparent 70%); }
.mzn-aurora--lavender .mzn-aurora__blob--3 { background: radial-gradient(circle, var(--mzn-lavender-edge) 0%, transparent 70%); }
.mzn-aurora--dark .mzn-aurora__blob--1 { background: radial-gradient(circle, var(--mzn-purple-deep)    0%, transparent 70%); opacity: 0.5; }
.mzn-aurora--dark .mzn-aurora__blob--2 { background: radial-gradient(circle, var(--mzn-purple-vibrant) 0%, transparent 70%); opacity: 0.4; }
.mzn-aurora--dark .mzn-aurora__blob--3 { background: radial-gradient(circle, #1A152C 0%, transparent 70%); opacity: 0.6; }

.mzn-aurora--static .mzn-aurora__blob { animation: none; }

/* Drift keyframes */
@keyframes mzn-aurora-drift-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, 60px) scale(1.1); }
    66%      { transform: translate(-30px, 80px) scale(0.95); }
}
@keyframes mzn-aurora-drift-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-60px, 40px) scale(1.15); }
}
@keyframes mzn-aurora-drift-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40%      { transform: translate(50px, -40px) scale(1.1); }
    80%      { transform: translate(-40px, -20px) scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
    .mzn-aurora__blob { animation: none !important; }
}

/* ─── Layout definition polish ───────────────────────────────────────────────
   The app bar and cards are Elevation=0 white surfaces on a near-white page —
   without a hairline they visually merge and the page reads as "floating"
   text. A 1px line keyed to the Mud palette keeps both themes correct.     */
.mud-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.mud-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* Cards per the design system: surface + slate hairline + soft dark shadow.
   The hero dark card opts out via its own border:none !important.          */
.mud-card {
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(27, 28, 57, 0.04);
}

/* Stat tiles (MudPaper Elevation=0 used as cards on dashboards) get the same
   treatment via the shared utility class.                                   */
.mzn-tile {
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(27, 28, 57, 0.04);
}