/* Aizada Admin - qabıq, ümumi komponentlər. Tokenlər: tokens/tokens.css (nocturne). Raw hex yoxdur. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--size-base); }
[hidden] { display: none !important; }
.icon { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mono { font-family: var(--font-mono); font-size: 0.92em; font-variant-numeric: tabular-nums; }
.jv-muted { color: var(--text-muted); }
.jv-note { margin: var(--space-3) 0 0; font-size: var(--size-xs); color: var(--text-subtle); line-height: var(--leading-normal); }
.jv-link { color: var(--primary); font-size: var(--size-sm); text-decoration: none; }
.jv-link:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* MOKAP nişanı */
.jv-mock { display: inline-block; padding: 0.1rem 0.45rem; border: 1px dashed var(--accent); color: var(--accent);
  border-radius: var(--radius-sm); font: var(--weight-semibold) var(--size-2xs)/1.4 var(--font-mono); letter-spacing: var(--tracking-wide); }
.auth-split__form-wrap .jv-mock { margin-bottom: var(--space-4); }

/* Giriş: HUD vizualı (fotoşəkil əvəzinə) */
.auth-split__visual { background: radial-gradient(120% 80% at 70% 20%, color-mix(in oklab, var(--primary) 18%, var(--brand-surface)), var(--brand-surface) 60%); }
.jv-hud { position: absolute; z-index: -2; width: min(64%, 28rem); aspect-ratio: 1; top: 3%; right: -6%; opacity: 0.85; }
.auth-split__mark { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 1.5px var(--primary); border-radius: 50%; }
.jv-hud * { fill: none; stroke: var(--primary); }
.jv-hud__ticks { stroke-width: 10; stroke-dasharray: 1.5 7.4; opacity: 0.45; }
.jv-hud__ring { stroke-width: 1; opacity: 0.5; }
.jv-hud__arc { stroke-width: 3; stroke-linecap: round; }
.jv-hud__arc--b { stroke: var(--accent); }
.jv-hud__core { stroke-width: 1.5; fill: color-mix(in oklab, var(--primary) 10%, transparent); }
.jv-hud__wave { stroke-width: 2.5; stroke-linejoin: round; }
.jv-hud__spin { transform-origin: 200px 200px; animation: jv-spin 60s linear infinite; }
.jv-hud__spin--rev { animation-duration: 24s; animation-direction: reverse; }
@keyframes jv-spin { to { transform: rotate(360deg); } }
.auth-split__footer.jv-muted { font-size: var(--size-xs); }

/* Qabıq əlavələri */
.app-shell__brand { font-family: var(--font-display); letter-spacing: var(--tracking-tight); }
.app-shell__mark { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 1.5px var(--primary); border-radius: 50%; }
.app-shell__body { min-width: 0; }
.app-shell__search input { all: unset; flex: 1; min-width: 0; font-size: var(--size-sm); color: var(--text); }
.app-shell__search input::placeholder { color: var(--text-subtle); }
.app-shell__topbar-actions { gap: var(--space-2); }
.app-shell__topbar-actions .auth-split__lang { display: inline-flex; }
.app-shell__topbar-actions .auth-split__theme { border: 0; }
.jv-live { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3);
  font-size: var(--size-xs); color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-md); }
.app-shell__main { padding: var(--space-6); max-width: 92rem; width: 100%; }
.app-shell__main:focus { outline: none; }
.jv-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border); font-size: var(--size-xs); color: var(--text-subtle); margin-top: auto; }
.jv-footer a { color: inherit; }
.jv-footer__ver { margin-left: auto; font: inherit; font-family: var(--font-mono); color: var(--text-muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-full); padding: 0.15rem 0.6rem; cursor: pointer; }
.jv-footer__ver:hover { color: var(--primary); border-color: var(--primary-border); }

/* Nöqtə, nişan */
.jv-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--text-subtle); vertical-align: middle; }
.jv-dot--ok { background: var(--success); }
.jv-dot--pulse { background: var(--primary); box-shadow: 0 0 0 0 var(--primary); animation: jv-pulse 2s var(--ease-out-quart) infinite; }
@keyframes jv-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--primary) 60%, transparent); } 100% { box-shadow: 0 0 0 0.6rem transparent; } }
.jv-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.5rem; border-radius: var(--radius-full); white-space: nowrap;
  font-size: var(--size-2xs); font-weight: var(--weight-semibold); background: var(--surface-3); color: var(--text-muted); }
.jv-badge .icon { width: 0.75rem; height: 0.75rem; }
.jv-badge--ok { background: var(--success-subtle); color: var(--success); }
.jv-badge--error { background: var(--danger-subtle); color: var(--danger); }
.jv-badge--wake_miss, .jv-badge--off { background: var(--surface-3); color: var(--text-subtle); }
.jv-badge--stt_empty, .jv-badge--warn { background: var(--warning-subtle); color: var(--warning); }
.jv-badge--primary { background: var(--primary-subtle); color: var(--primary); }
.jv-badge--soon { background: var(--accent-subtle); color: var(--accent); }
.jv-lang { font: var(--weight-semibold) var(--size-2xs) var(--font-mono); color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 0.3rem; }
.hid { font-family: var(--font-mono); font-size: var(--size-xs); color: var(--text-subtle); background: repeating-linear-gradient(-45deg, var(--surface-2) 0 6px, var(--surface-3) 6px 12px);
  padding: 0.1rem 0.45rem; border-radius: var(--radius-sm); }

/* Düymə, input */
.jv-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 2.25rem; padding: 0 var(--space-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text);
  font: var(--weight-medium) var(--size-sm) var(--font-body); cursor: pointer; transition: background var(--duration-fast) var(--ease-out-quart), transform var(--duration-fast); }
.jv-btn:hover { background: var(--hover-veil); }
.jv-btn:active { transform: scale(0.98); }
.jv-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.jv-btn--primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.jv-btn--primary:hover { background: var(--primary-hover); }
.jv-btn--danger { background: var(--danger); color: var(--on-danger); border-color: var(--danger); }
.jv-btn--danger:hover { background: color-mix(in oklab, var(--danger) 88%, var(--text)); }
.jv-btn--danger-ghost { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 45%, transparent); }
.jv-btn--block { width: 100%; justify-content: flex-start; }
.jv-input, .jv-sel select { min-height: 2.25rem; padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text); font: var(--size-sm) var(--font-body); }
.jv-input--sm { min-height: 2rem; font-family: var(--font-mono); }
.jv-sel { display: inline-flex; flex-direction: column; gap: 0.25rem; font-size: var(--size-2xs); color: var(--text-muted); font-weight: var(--weight-medium); }
.jv-field { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--size-sm); font-weight: var(--weight-medium); }

/* Açar (switch) */
.sw { position: relative; width: 2.5rem; height: 1.4rem; border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: var(--surface-3); cursor: pointer; padding: 0;
  transition: background var(--duration-base) var(--ease-out-quart); }
.sw__k { position: absolute; top: 2px; left: 2px; width: calc(1.4rem - 6px); height: calc(1.4rem - 6px); border-radius: 50%; background: var(--text-muted);
  transition: transform var(--duration-base) var(--ease-out-quint), background var(--duration-base); }
.sw[aria-checked="true"] { background: var(--primary-subtle); border-color: var(--primary); }
.sw[aria-checked="true"] .sw__k { transform: translateX(1.1rem); background: var(--primary); }
.sw:disabled { opacity: 0.4; cursor: not-allowed; }

/* Dialoq: <dialog>.showModal(); backdrop klikində bağlanma handler-i YOXDUR */
.jv-dialog { width: min(32rem, calc(100vw - 2rem)); max-height: min(80dvh, 42rem); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.jv-dialog[open] { display: flex; flex-direction: column; animation: jv-in var(--duration-slow) var(--ease-out-quint); }
.jv-dialog::backdrop { background: color-mix(in oklab, var(--overlay) 62%, transparent); backdrop-filter: blur(2px); }
@keyframes jv-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.jv-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); }
.jv-dialog__title { margin: 0; font-size: var(--size-lg); font-weight: var(--weight-semibold); }
.jv-dialog__x { width: 2rem; height: 2rem; display: grid; place-items: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; }
.jv-dialog__x:hover { background: var(--hover-veil); color: var(--text); }
.jv-dialog__body { overflow: auto; padding: var(--space-5) var(--space-6); font-size: var(--size-sm); line-height: var(--leading-relaxed); color: var(--text-muted); }
.jv-dialog__body p { margin: 0; }
.jv-dialog__foot { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); background: var(--surface-2); }
.jv-rel + .jv-rel { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.jv-rel__head { display: flex; align-items: baseline; gap: var(--space-3); color: var(--text); }
.jv-rel__h { margin: var(--space-3) 0 var(--space-1); font-size: var(--size-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-subtle); }
.jv-rel ul { margin: 0; padding-left: 1.1rem; }
.jv-dialog__body > .jv-note { margin: 0 0 var(--space-4); }

.jv-toast { position: fixed; z-index: var(--z-toast); right: var(--space-6); bottom: var(--space-6); max-width: 24rem; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--primary-border); border-left: 3px solid var(--primary); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text);
  font-size: var(--size-sm); box-shadow: var(--shadow-lg); animation: jv-in var(--duration-slow) var(--ease-out-quint); }

@media (prefers-reduced-motion: reduce) {
  .jv-hud__spin, .jv-dot--pulse, .jv-dialog[open], .jv-toast { animation: none; }
  .sw, .sw__k, .jv-btn { transition: none; }
}