/* =====================================================================
   Midnight Glass theme
   Dark navy sidebar + soft gradient background + frosted glass cards.
   Used by pages that call layout_start(..., ['glass' => true]) and by login.php.
   Colours live in the variables below, so the whole look can be tuned here.
   ===================================================================== */

:root {
    --mg-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --mg-ink: #0b1b33;            /* main text */
    --mg-ink-soft: #4d607c;       /* secondary text */
    --mg-line: rgba(11, 27, 51, .08);

    --mg-brand: #0284c7;          /* sky blue accent */
    --mg-brand-hover: #0369a1;
    --mg-brand-soft: rgba(2, 132, 199, .12);
    --mg-brand-ink: #075985;

    --mg-surface: rgba(255, 255, 255, .58);        /* glass card */
    --mg-surface-solid: rgba(255, 255, 255, .86);  /* for tables / long lists */
    --mg-surface-muted: rgba(255, 255, 255, .5);
    --mg-card-border: rgba(255, 255, 255, .75);
    --mg-shadow: 0 10px 36px -14px rgba(11, 27, 51, .22);
    --mg-blur: blur(16px) saturate(150%);
    --mg-radius: 1.1rem;

    --mg-side-bg: rgba(15, 23, 42, .94);
    --mg-gradient: linear-gradient(140deg, #0f172a 0%, #1e3a8a 55%, #0284c7 120%);

    /* status colours */
    --mg-ok-bg: #dcfce7;   --mg-ok-ink: #15803d;   --mg-ok-dot: #22c55e;
    --mg-mute-bg: #e2e8f0; --mg-mute-ink: #475569; --mg-mute-dot: #94a3b8;
    --mg-crit-bg: #fff1f2; --mg-crit-chip: #ffe4e6; --mg-crit-ink: #be123c; --mg-crit-dot: #e11d48;
    --mg-rev-bg: #fffbeb;  --mg-rev-chip: #fef3c7;  --mg-rev-ink: #b45309;  --mg-rev-dot: #f59e0b;
    --mg-info-bg: #e0f2fe; --mg-info-ink: #075985;  --mg-info-dot: #0ea5e9;
}

/* ---------- Page ---------- */
.mg-body {
    font-family: var(--mg-font);
    color: var(--mg-ink);
    background:
        radial-gradient(1200px 600px at 85% -10%, #c7d2fe 0%, transparent 60%),
        radial-gradient(900px 600px at 10% 110%, #a5f3fc 0%, transparent 55%),
        linear-gradient(135deg, #e0e7ff 0%, #e0f2fe 45%, #ecfeff 100%) fixed;
    min-height: 100vh;
}
.mg-body h1, .mg-body h2, .mg-body h3 { letter-spacing: -.015em; }
.mg-soft { color: var(--mg-ink-soft); }
.mg-brand-text { color: var(--mg-brand); }
.mg-gradient { background: var(--mg-gradient); }

/* ---------- Glass cards ---------- */
.mg-card {
    background: var(--mg-surface);
    border: 1px solid var(--mg-card-border);
    border-radius: var(--mg-radius);
    box-shadow: var(--mg-shadow);
    backdrop-filter: var(--mg-blur);
    -webkit-backdrop-filter: var(--mg-blur);
}
.mg-card-solid { background: var(--mg-surface-solid); }   /* add to .mg-card for table-heavy cards */
.mg-icon {
    width: 2.5rem; height: 2.5rem; border-radius: .8rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mg-brand-soft); color: var(--mg-brand-ink); flex-shrink: 0;
}
.mg-icon-warn { background: #ffedd5; color: #c2410c; }

/* ---------- Buttons ---------- */
.mg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    background: var(--mg-brand); color: #fff; font-weight: 600;
    border-radius: .7rem; padding: .6rem 1rem; transition: background .15s, transform .05s;
}
.mg-btn:hover { background: var(--mg-brand-hover); }
.mg-btn:active { transform: translateY(1px); }
.mg-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    background: var(--mg-surface-solid); color: var(--mg-ink); font-weight: 600;
    border: 1px solid var(--mg-line); border-radius: .7rem; padding: .6rem 1rem; transition: background .15s;
}
.mg-btn-ghost:hover { background: #fff; }

/* ---------- Status chips & boxes ---------- */
.mg-chip {
    display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
    border-radius: 999px; font-size: .75rem; font-weight: 600; padding: .2rem .65rem;
}
.mg-chip::before { content: ''; width: .45rem; height: .45rem; border-radius: 999px; background: currentColor; opacity: .9; }
.mg-chip.ok   { background: var(--mg-ok-bg);   color: var(--mg-ok-ink); }
.mg-chip.mute { background: var(--mg-mute-bg); color: var(--mg-mute-ink); }
.mg-chip.crit { background: var(--mg-crit-chip); color: var(--mg-crit-ink); }
.mg-chip.rev  { background: var(--mg-rev-chip);  color: var(--mg-rev-ink); }
.mg-chip.info { background: var(--mg-info-bg);   color: var(--mg-info-ink); }
.mg-chip.plain::before { display: none; }

.mg-box { border-radius: var(--mg-radius); padding: 1rem; }
.mg-box.crit { background: var(--mg-crit-bg); }  .mg-box.crit .mg-box-action { color: var(--mg-crit-ink); }
.mg-box.rev  { background: var(--mg-rev-bg); }   .mg-box.rev .mg-box-action  { color: var(--mg-rev-ink); }
.mg-box.ok   { background: rgba(220, 252, 231, .6); } .mg-box.ok .mg-box-action { color: var(--mg-ok-ink); }

.mg-alert { border-radius: .8rem; padding: .85rem 1rem; font-size: .875rem; font-weight: 500; border: 1px solid transparent; }
.mg-alert.ok   { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.mg-alert.err  { background: #fff1f2; color: #9f1239; border-color: #fecdd3; }
.mg-alert.warn { background: #fffbeb; color: #92400e; border-color: #fde68a; }

/* ---------- Forms ---------- */
.mg-input {
    width: 100%; border: 1px solid var(--mg-line); background: var(--mg-surface-muted); color: var(--mg-ink);
    border-radius: .75rem; padding: .75rem 1rem; outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.mg-input::placeholder { color: var(--mg-ink-soft); opacity: .75; }
.mg-input:focus { border-color: var(--mg-brand); box-shadow: 0 0 0 4px var(--mg-brand-soft); background: rgba(255, 255, 255, .95); }
.mg-label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .4rem; }

/* ---------- Tables ---------- */
.mg-table { width: 100%; font-size: .875rem; }
.mg-table thead tr { background: rgba(255, 255, 255, .55); color: var(--mg-ink-soft); }
.mg-table th { text-align: left; font-weight: 600; padding: .75rem 1.5rem; border-top: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); }
.mg-table td { padding: .9rem 1.5rem; border-bottom: 1px solid var(--mg-line); }
.mg-table tbody tr:last-child td { border-bottom: 0; }
.mg-table tbody tr:hover { background: rgba(255, 255, 255, .6); }
.mg-avatar {
    width: 2rem; height: 2rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700; background: var(--mg-brand-soft); color: var(--mg-brand-ink); flex-shrink: 0;
}

/* ---------- Sidebar & top bar ---------- */
.mg-side { background: var(--mg-side-bg); color: #94a3b8; border-right: 1px solid rgba(255, 255, 255, .06); backdrop-filter: var(--mg-blur); -webkit-backdrop-filter: var(--mg-blur); }
.mg-side .mg-nav { color: #94a3b8; border-radius: .75rem; }
.mg-side .mg-nav:hover { background: rgba(255, 255, 255, .06); color: #e2e8f0; }
.mg-side .mg-nav.active { background: rgba(56, 189, 248, .14); color: #e0f2fe; font-weight: 600; box-shadow: inset 3px 0 0 #38bdf8; }
.mg-topbar { background: rgba(255, 255, 255, .35); backdrop-filter: var(--mg-blur); -webkit-backdrop-filter: var(--mg-blur); border-bottom: 1px solid rgba(255, 255, 255, .6); }

/* Gradient cards & icons (e.g. "Quick actions", AI icon): the navy-blue gradient must win over
   the glass/soft background that .mg-card and .mg-icon set, so white text stays readable */
.mg-card.mg-gradient,
.mg-icon.mg-gradient {
    background: var(--mg-gradient);
    border-color: transparent;
    color: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.mg-card.mg-gradient { box-shadow: 0 14px 34px -14px rgba(15, 23, 42, .55); }

/* Printing: plain white, no glass */
@media print {
    .mg-body { background: #fff !important; }
    .mg-card { background: #fff !important; box-shadow: none !important; backdrop-filter: none !important; border-color: #e5e7eb !important; }
}