/* ============================================================================
   asetrix.css — global asetrix.online styling for MajestyScales.
   Auth experience (split hero + orbital data-core illustration) and a reusable
   component vocabulary (panels, metric cards, buttons, inputs, fields, tables,
   badges) so every page is styled consistently. Consumes the cyan/zinc tokens
   from theme.css. Auth-hero is always dark + cyan, regardless of theme.
   ============================================================================ */

:root {
    --auth-hero-base: #08090A;
    --auth-hero-glow-a: #67E8F9;
    --auth-hero-glow-b: #A5F3FC;
    --brand-gradient: linear-gradient(135deg, var(--accent2, #0891B2) 0%, var(--accent, #0E7490) 58%, #155E75 100%);
}

/* ── Animations ───────────────────────────────────────────────────────── */
@keyframes ax-aurora { 0%,100% { transform: translate3d(0,0,0) scale(1); } 33% { transform: translate3d(4%,-3%,0) scale(1.08); } 66% { transform: translate3d(-3%,4%,0) scale(0.96); } }
@keyframes ax-floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes ax-spin { to { transform: rotate(360deg); } }
@keyframes ax-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.82); } }
@keyframes ax-fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ============================== AUTH ==================================== */
.auth-split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 100vh;
    background: var(--bg);
}

.auth-hero {
    position: relative; overflow: hidden;
    background: var(--auth-hero-base); color: #fff;
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 2.5rem 2rem;
}
.auth-hero .glow-a, .auth-hero .glow-b { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.30; pointer-events: none; }
.auth-hero .glow-a { width: 30rem; height: 30rem; top: -8rem; right: -8rem; background: var(--auth-hero-glow-a); animation: ax-aurora 20s ease-in-out infinite; }
.auth-hero .glow-b { width: 24rem; height: 24rem; bottom: -6rem; left: -6rem; background: var(--auth-hero-glow-b); opacity: 0.22; animation: ax-floatY 16s ease-in-out infinite; }

.auth-hero-inner { position: relative; z-index: 1; width: 100%; max-width: 30rem; display: flex; flex-direction: column; align-items: center; }
.auth-hero-art { width: 100%; max-width: 340px; margin: 0 auto 1.5rem; }
.auth-hero-art svg { width: 100%; height: auto; display: block; }
.auth-hero-title { font-family: var(--font-display, 'Fraunces', serif); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 0.75rem; }
.auth-hero-sub { color: rgba(255,255,255,0.70); font-size: 1rem; max-width: 25rem; line-height: 1.7; margin: 0 0 1.5rem; }
.auth-hero-points { display: inline-flex; flex-direction: column; gap: 0.5rem; text-align: left; }
.auth-hero-point { display: flex; align-items: center; gap: 0.75rem; color: rgba(255,255,255,0.82); font-size: 0.875rem; }
.auth-hero-point svg { width: 1.05rem; height: 1.05rem; color: var(--auth-hero-glow-a); flex: none; }

/* orbital data-core illustration */
.ring { transform-box: fill-box; transform-origin: center; }
.ring.r1 { animation: ax-spin 38s linear infinite; }
.ring.r2 { animation: ax-spin 72s linear infinite reverse; }
.ring.r3 { animation: ax-spin 96s linear infinite; }
.orbit-nodes circle { animation: ax-pulse 3s ease-in-out infinite; }
.orbit-nodes circle:nth-child(2n) { animation-delay: 0.8s; }
.orbit-nodes circle:nth-child(3n) { animation-delay: 1.5s; }
.core { transform-box: fill-box; transform-origin: center; animation: ax-pulse 2.6s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(165,243,252,0.9)); }
.spark { filter: drop-shadow(0 0 6px rgba(165,243,252,0.85)); }

.auth-panel { display: grid; place-items: center; padding: 2rem 1.5rem; background: var(--bg); }
.auth-card { width: 100%; max-width: 26rem; animation: ax-fadeup 0.5s ease both; }
.auth-card h1 { font-family: var(--font-display, 'Fraunces', serif); font-weight: 600; font-size: 1.9rem; letter-spacing: -0.02em; margin: 0 0 0.25rem; color: var(--text); }
.auth-card .sub, .auth-sub { color: var(--text2); margin: 0 0 1.5rem; font-size: 0.95rem; }
.auth-field { display: block; margin-bottom: 1rem; }
.auth-field > span { display: block; font-size: 0.875rem; font-weight: 500; color: var(--text2); margin-bottom: 0.5rem; }
.auth-field input, .auth-field select {
    width: 100%; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 0.9rem;
    background: var(--surface); color: var(--text); font-size: 1rem; font-family: inherit;
    transition: border-color var(--dur, .2s), box-shadow var(--dur, .2s);
}
.auth-field input:focus, .auth-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring, rgba(14,116,144,.18)); }
.auth-btn {
    width: 100%; background: var(--brand-gradient); color: #fff; border: none; border-radius: var(--radius);
    padding: 0.8rem; font-weight: 700; font-size: 1rem; cursor: pointer; margin-top: 0.25rem;
    transition: filter var(--dur, .2s), transform var(--dur, .2s); box-shadow: 0 6px 18px -6px rgba(var(--accent-rgb, 14,116,144), 0.5);
}
.auth-btn:hover { filter: brightness(1.06); }
.auth-btn:active { transform: translateY(1px); }
.auth-alt { margin-top: 1.25rem; font-size: 0.875rem; color: var(--text2); text-align: center; }
.auth-alt a { color: var(--accent); font-weight: 600; }
.auth-msg { border-radius: var(--radius); padding: 0.7rem 0.9rem; margin-bottom: 1rem; font-size: 0.875rem; }
.auth-msg.error { background: var(--danger-subtle, rgba(185,28,28,.1)); color: var(--danger); }
.auth-msg.ok { background: var(--success-subtle, rgba(14,116,144,.1)); color: var(--success); }
.auth-msg.warn { background: var(--warning-subtle, rgba(180,83,9,.12)); color: var(--warning); }
.auth-checkbox { display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; color: var(--text2); margin-bottom: 1rem; cursor: pointer; }
.auth-checkbox input { width: 16px; height: 16px; accent-color: var(--accent); }
.auth-link-btn { background: none; border: none; padding: 0; color: var(--accent); font-weight: 600; font-size: 0.875rem; cursor: pointer; text-decoration: underline; }
.auth-validation { color: var(--danger); font-size: 0.8rem; margin-top: 0.3rem; display: block; }

@media (max-width: 860px) {
    .auth-split { grid-template-columns: 1fr; min-height: auto; }
    .auth-hero { display: none; }
    .auth-panel { min-height: 100vh; padding: 2rem 1.25rem; }
}

/* ====================== REUSABLE COMPONENTS (CRUD pages) ================ */
.ax-page { max-width: var(--page-max-w, 1440px); margin: 0 auto; }
.ax-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.ax-head h1 { font-family: var(--font-display, 'Fraunces', serif); font-weight: 600; font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -0.02em; margin: 0; color: var(--text); }
.ax-head .ax-sub { color: var(--text3); font-size: 0.9rem; margin: 0.15rem 0 0; }

.ax-panel {
    position: relative;
    background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 88%, var(--surface2)));
    border: 1px solid var(--border); border-radius: var(--radius-xl, 16px); padding: 1.25rem;
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.035);
    margin-bottom: 1.25rem;
}
.ax-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ax-panel-head h2, .ax-panel-head h3 { margin: 0; font-family: var(--font-display, 'Fraunces', serif); font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); display: inline-flex; align-items: center; gap: 0.5rem; }

/* Inline <Icon> SVGs carry class "dp-ico". dev-playground.css sizes them on that page;
   this is the GLOBAL base so they don't balloon to full size on every other page that
   uses <Icon> (e.g. /oil-tanks). Context rules below + page styles override it. */
.dp-ico { width: 1.05rem; height: 1.05rem; flex-shrink: 0; vertical-align: middle; }
.ax-btn .dp-ico { width: 1rem; height: 1rem; }
.ax-btn.sm .dp-ico { width: 0.9rem; height: 0.9rem; }
.ax-panel-head h2 .dp-ico, .ax-panel-head h3 .dp-ico { width: 1.1rem; height: 1.1rem; color: var(--accent); }
.ax-empty .dp-ico { width: 1.25rem; height: 1.25rem; vertical-align: -3px; }
.ax-badge .dp-ico { width: 0.8rem; height: 0.8rem; }

.ax-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.ax-metric { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm); transition: transform var(--dur,.2s), border-color var(--dur,.2s), box-shadow var(--dur,.2s); }
.ax-metric::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--brand-gradient); }
.ax-metric:hover { transform: translateY(-2px); border-color: var(--accent-border, var(--accent)); box-shadow: var(--shadow-md); }
.ax-metric-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); margin-bottom: 0.4rem; font-weight: 600; }
.ax-metric-value { display: block; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums; }

/* buttons */
.ax-btn { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--radius); padding: 0.55rem 1rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all var(--dur,.2s); }
.ax-btn:hover { border-color: var(--border2); background: var(--surface2); }
.ax-btn:active { transform: translateY(1px); }
.ax-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring, rgba(14,116,144,.25)); }
.ax-btn.primary { background: var(--brand-gradient); color: #fff; border-color: transparent; box-shadow: 0 6px 18px -6px rgba(var(--accent-rgb, 14,116,144), 0.5); }
.ax-btn.primary:hover { filter: brightness(1.06); }
.ax-btn.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.ax-btn.danger:hover { background: var(--danger); color: #fff; }
.ax-btn.sm { padding: 0.35rem 0.7rem; font-size: 0.82rem; }

/* inputs / fields */
.ax-field { display: block; margin-bottom: 1rem; }
.ax-field > span, .ax-label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--text2); margin-bottom: 0.4rem; }
.ax-input, .ax-select, input.ax-input, select.ax-select {
    width: 100%; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.55rem 0.8rem;
    background: var(--surface); color: var(--text); font-size: 0.95rem; font-family: inherit;
}
.ax-input:hover, .ax-select:hover { border-color: var(--border2); }
.ax-input:focus, .ax-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring, rgba(14,116,144,.18)); }
.ax-input, .ax-select { transition: border-color var(--dur,.2s), box-shadow var(--dur,.2s); }

/* tables */
.ax-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ax-table th { text-align: left; color: var(--text3); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border2, var(--border)); white-space: nowrap; }
.ax-table td { padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--border); color: var(--text); }
.ax-table tbody tr { transition: background var(--dur, .2s); }
.ax-table tbody tr:hover td { background: var(--row-hover, var(--surface2)); }
.ax-table td.num, .ax-table th.num { font-variant-numeric: tabular-nums; }
.ax-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ax-table .mono { font-family: var(--font-mono); font-size: 0.85rem; }
.ax-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* badges + empty states */
.ax-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: var(--radius-full); background: var(--badge-accent-bg, var(--surface2)); border: 1px solid var(--badge-accent-border, var(--border)); color: var(--badge-accent-text, var(--accent)); }
.ax-empty { text-align: center; color: var(--text3); padding: 2.5rem 1rem; font-size: 0.95rem; }

@media (max-width: 600px) {
    .ax-table { display: block; overflow-x: auto; white-space: nowrap; }
    .ax-panel { padding: 1rem; }
    .ax-head { flex-direction: column; align-items: stretch; }
}

/* ====================================================================
   Bootstrap-class bridge — the Identity scaffolding (Manage, 2FA, reset,
   recovery codes, etc.) uses Bootstrap class names but the app ships no
   Bootstrap. Map the common ones onto the asetrix look so every scaffolded
   page is styled without per-page edits.
   ==================================================================== */

/* Layout grid (row / col-*) → simple flex that stacks on small screens */
.row { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0; }
[class*="col-"] { flex: 1 1 280px; min-width: 0; }

/* Identity pages render bare in MainLayout — give them page rhythm */
main.page-content > h1, main.page-content > h2 { font-family: var(--font-display, 'Fraunces', serif); letter-spacing: -0.02em; color: var(--text); }
main.page-content > h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 1.25rem; }

section { margin-bottom: 1.25rem; }
hr { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; }

/* Inputs */
.form-control, .form-select, input.form-control, select.form-select, textarea.form-control {
    width: 100%; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.85rem;
    background: var(--surface); color: var(--text); font-size: 0.95rem; font-family: inherit;
}
.form-control:focus, .form-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring, rgba(14,116,144,.18)); }
.form-label, .form-check-label { color: var(--text2); font-size: 0.9rem; font-weight: 500; }
.form-check-input { width: 16px; height: 16px; accent-color: var(--accent); }
.form-text { color: var(--text3); font-size: 0.82rem; }

/* Floating labels — no Bootstrap, so render label above the field */
.form-floating { position: relative; margin-bottom: 1rem; display: flex; flex-direction: column-reverse; gap: 0.4rem; }
.form-floating > label { position: static; padding: 0; color: var(--text2); font-size: 0.9rem; font-weight: 500; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--radius); padding: 0.6rem 1.1rem; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all var(--dur,.2s); text-decoration: none; }
.btn:hover { border-color: var(--border2); background: var(--surface2); text-decoration: none; }
.btn-primary { background: var(--brand-gradient); color: #fff; border-color: transparent; box-shadow: 0 6px 18px -6px rgba(var(--accent-rgb, 14,116,144), 0.5); }
.btn-primary:hover { filter: brightness(1.06); color: #fff; }
.btn-lg { padding: 0.75rem 1.25rem; font-size: 1rem; }
.btn-link { background: none; border: none; color: var(--accent); box-shadow: none; font-weight: 600; }
.btn-link:hover { background: none; text-decoration: underline; }
.btn-danger { background: var(--danger); color: #fff; border-color: transparent; }
.w-100 { width: 100%; }

/* Cards / alerts / tables */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-body { padding: 1.25rem; }
.alert { border-radius: var(--radius); padding: 0.7rem 0.9rem; margin-bottom: 1rem; font-size: 0.9rem; border: 1px solid transparent; }
.alert-success { background: var(--success-subtle, rgba(14,116,144,.1)); color: var(--success); }
.alert-danger { background: var(--danger-subtle, rgba(185,28,28,.1)); color: var(--danger); }
.alert-warning { background: var(--warning-subtle, rgba(180,83,9,.12)); color: var(--warning); }
.alert-info { background: var(--info-subtle, rgba(29,78,216,.12)); color: var(--info); }
.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; color: var(--text); }
.table th { text-align: left; color: var(--text3); font-weight: 600; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--border); }
.table td { padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--border); }
.text-danger { color: var(--danger) !important; font-size: 0.82rem; }
.text-success { color: var(--success) !important; }
.text-secondary, .text-muted { color: var(--text3) !important; }

/* Manage section: nav-pills sidebar (ManageNavMenu) */
.nav-pills { display: flex; flex-direction: column; gap: 0.25rem; padding: 0; list-style: none; }
.nav-pills .nav-link { display: block; padding: 0.5rem 0.85rem; border-radius: var(--radius); color: var(--text2); font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.nav-pills .nav-link:hover { background: var(--surface2); color: var(--text); }
.nav-pills .nav-link.active { background: var(--badge-accent-bg, var(--surface2)); color: var(--accent); }
.list-group { list-style: none; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.list-group-item { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface); color: var(--text); }