/* =========================================================================
   v4 — "quiet operator" theme
   Inspired by the monochrome reference layout: near-black surfaces, hairline
   borders, tight radii, light-on-dark primary actions and a soft aura glow.
   No external fonts, images, scripts or URLs — pure CSS, self-contained.
   ========================================================================= */

:root {
  /* neutrals (oklch-derived, converted to hex for compatibility) */
  --bg: #0a0a0b;
  --bg-2: #0c0c0e;
  --panel: #101012;
  --panel-2: #141417;
  --panel-3: #17171a;
  --line: #202024;
  --line-2: #2a2a30;
  --txt: #d6d6d9;
  --txt-2: #a4a4aa;
  --muted: #76767d;
  --dim: #4b4b52;
  --accent: #e8e8ea;
  --accent-2: #f4f4f6;
  --primary-fg: #0a0a0b;
  --ok: #58c99a;
  --warn: #d8b46a;
  --err: #d9777f;
  --info: #9a9aa4;
  --radius: 8px;
  --aura: 0 0 26px 3px rgba(235, 235, 245, .055), 0 0 6px rgba(235, 235, 245, .04);
  --aura-strong: 0 0 34px 6px rgba(235, 235, 245, .075), 0 0 8px rgba(235, 235, 245, .05);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

body {
  background:
    radial-gradient(900px 420px at 78% -14%, rgba(255,255,255,.035), transparent 62%),
    var(--bg);
  color: var(--txt);
  font-size: 13.5px;
}

a { color: #e3e3e6; text-decoration: none; }
a:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------- sidebar -------------------------------- */
.sidebar {
  width: 212px; flex: 0 0 212px;
  background: #0b0b0d;
  border-right: 1px solid #1b1b1f;
  padding: 22px 12px 12px;
}
.brand { padding: 0 10px 24px; }
.brand-name {
  font-family: var(--mono);
  font-size: 13.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: #e8e8ea;
  background: none; -webkit-text-fill-color: currentColor; color: #e8e8ea;
}
.sidebar nav { gap: 1px; }
.nav-item {
  padding: 9px 10px; border-radius: 6px;
  font-size: 12.8px; font-weight: 450; color: #8b8b92;
  letter-spacing: .005em;
}
.nav-item .ico { width: 16px; color: #5c5c63; font-size: 11.5px; }
.nav-item:hover { background: #121215; color: #d6d6d9; }
.nav-item.active {
  background: linear-gradient(90deg, rgba(232,232,234,.09), rgba(232,232,234,.02));
  color: #f2f2f4;
  box-shadow: inset 2px 0 0 #d6d6d9;
}
.nav-item.active .ico { color: #d6d6d9; }

/* identity */
.sidebar-foot { border-top: 1px solid #1b1b1f; padding-top: 12px; }
.profile { padding: 8px; border-radius: 8px; }
.profile:hover { background: #121215; }
.profile-name { font-size: 12.8px; color: #e7e7ea; letter-spacing: .01em; }
.avatar {
  border-radius: 4px; background: #15151a; border: 1px solid #26262c;
  color: #6d6d75;
}
/* toolbars: keep every control on a single line */
.card-actions { flex-wrap: nowrap; }
.card-actions form { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; flex: 0 0 auto; }
.card-actions form input[type=text] { width: 190px; min-width: 140px; }
.card-actions form select { width: 140px; }
.card-actions form .btn { flex: 0 0 auto; }
.card-head h2 { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* flow step builder */
.step-list { display: flex; flex-direction: column; gap: 8px; }
.step-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  background: #0e0e11; border: 1px solid #202024; border-radius: 8px;
  padding: 8px 10px;
}
.step-row:hover { border-color: #2c2c33; }
.step-num {
  width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center;
  border-radius: 4px; background: #17171b; border: 1px solid #26262c;
  font-size: 10.5px; color: #8b8b93; font-family: var(--mono);
}
.step-row select, .step-row input[type=text], .step-row input[type=number] {
  height: 30px; font-size: 12px; background: #0a0a0c; border-color: #242429;
}
.step-type { width: 96px; flex: 0 0 96px; }
.step-target { flex: 1 1 auto; min-width: 140px; }
.step-target select, .step-target input { width: 100%; }
.step-mini {
  display: flex; align-items: center; gap: 5px;
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #6d6d75;
  flex: 0 0 auto;
}
.step-mini input { width: 56px; text-align: center; }
.step-tools { display: flex; gap: 3px; flex: 0 0 auto; }
.step-tools .btn.icon { width: 24px; height: 24px; }

@media (max-width: 900px) {
  .step-row { flex-wrap: wrap; }
  .step-target { flex-basis: 100%; order: 5; }
}

.card-body form input[type=text],
.card-body form input[type=password],
.card-body form input[type=email],
.card-body form input[type=number],
.card-body form input[type=url],
.card-body form select,
.card-body form textarea { width: 100%; }

.btn.signout {
  background: rgba(217, 119, 127, .16);
  border-color: rgba(217, 119, 127, .5);
  color: #f3b0b6;
  font-size: 12px; height: 30px; font-weight: 500;
}
.btn.signout:hover { background: rgba(217, 119, 127, .26); border-color: rgba(217, 119, 127, .7); color: #ffe1e3; }

/* role chips: keep the identity colours but calmer */
.role-badge { font-size: 9.5px; letter-spacing: .12em; padding: 2px 8px; border-radius: 3px; }
.role-badge.admin { box-shadow: none; }
.role-badge.user { box-shadow: none; }
.role-badge.sub { box-shadow: none; }

/* ------------------------------- layout --------------------------------- */
.main { padding: 26px 30px 60px; max-width: 1500px; }
.topbar h1 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.topbar { margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid #1b1b1f; }
.topbar p { color: #5f5f66; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }

/* ------------------------------- cards ---------------------------------- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255,255,255,.015);
  transition: border-color .15s ease, box-shadow .2s ease;
}
.card:hover { border-color: #2a2a30; box-shadow: var(--aura); }
.card-head {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.012), transparent);
}
.card-head h2 {
  font-size: 10.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: #8d8d95;
}
.card-actions .btn { height: 30px; font-size: 12px; }
.card-body { padding: 16px; }

/* ------------------------------- tables --------------------------------- */
th {
  font-size: 9.5px; letter-spacing: .14em; color: #5f5f66;
  padding: 10px 14px; background: #0d0d0f; border-bottom: 1px solid #1c1c20;
  font-weight: 600;
}
td { padding: 12px 14px; font-size: 12.8px; border-bottom: 1px solid #18181c; color: #c9c9ce; }
tbody tr:hover td { background: #121215; }
td a { color: #e2e2e6; }

/* ------------------------------- controls ------------------------------- */
.btn {
  height: 32px; padding: 0 13px; border-radius: 6px;
  background: #121215; border: 1px solid #292930; color: #cfcfd4;
  font-size: 12.5px; font-weight: 500; letter-spacing: .01em;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { background: #18181c; border-color: #34343c; color: #f2f2f4; text-decoration: none; }
.btn.primary {
  background: var(--accent); border-color: var(--accent); color: var(--primary-fg);
  font-weight: 600;
}
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: #000; }
.btn.danger { color: #e2939a; border-color: rgba(217,119,127,.35); background: rgba(217,119,127,.07); }
.btn.danger:hover { background: rgba(217,119,127,.14); border-color: rgba(217,119,127,.55); color: #ffd3d6; }
.btn.icon { width: 26px; height: 26px; padding: 0; border-radius: 5px; background: #121215; }
.btn.icon.trash { color: #e2939a; border-color: rgba(217,119,127,.28); }

input[type=text], input[type=password], input[type=email], input[type=number],
input[type=url], select, textarea {
  background: #0d0d0f; border: 1px solid #26262c; border-radius: 6px;
  color: #dedee2; font-size: 13px; height: 34px; padding: 0 11px;
}
textarea { height: auto; padding: 9px 11px; }
select { padding-right: 28px; }
input:focus, select:focus, textarea:focus {
  border-color: #4d4d55; box-shadow: 0 0 0 3px rgba(235,235,245,.09);
}
.field > label {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: #7f7f87; font-weight: 600; margin-bottom: 3px;
}
.help { color: #6a6a72; font-size: 11px; }
input[type=file] { background: #0d0d0f; border-color: #26262c; }
input[type=file]::file-selector-button {
  background: #17171b; border-color: #2c2c33; color: #d6d6d9; border-radius: 5px;
}

/* badges / stats */
.badge { border-radius: 4px; font-size: 9.5px; letter-spacing: .08em; padding: 2px 7px; }
.badge.ok { color: #7fd7ae; background: rgba(88,201,154,.10); border-color: rgba(88,201,154,.25); }
.badge.warn { color: #e0c184; background: rgba(216,180,106,.10); border-color: rgba(216,180,106,.25); }
.badge.err { color: #e79aa0; background: rgba(217,119,127,.10); border-color: rgba(217,119,127,.25); }
.badge.info { color: #b9b9c2; background: rgba(255,255,255,.05); border-color: #2c2c33; }

.stat {
  background: #0e0e11; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 15px;
}
.stat-label { font-size: 9.5px; letter-spacing: .14em; color: #6b6b73; }
.stat-value { font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: #eeeeef; margin-top: 6px; }
.stat-sub { color: #63636b; font-size: 11px; }

/* login */
.login-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 26px;
  background: radial-gradient(700px 340px at 50% -10%, rgba(255,255,255,.05), transparent 65%), var(--bg);
}
.login { max-width: 374px; }
.login-head { display: flex; justify-content: center; width: 100%; }
.login-head .brand-name {
  font-family: var(--mono); font-size: 16px; letter-spacing: .22em;
  text-transform: uppercase; color: #f0f0f2;
}
.login .card { border-radius: 10px; box-shadow: var(--aura-strong); border-color: #26262c; }
.login .card-body { padding: 22px 22px 20px; }
.login .field > label { font-size: 10.5px; color: #77777f; }
.login .btn.primary { height: 38px; width: 100%; justify-content: center; font-size: 13px; }
.login .flash { margin: 0 0 14px; }

/* misc */
.flash { border-radius: 6px; font-size: 12.5px; }
.flash.ok { background: rgba(88,201,154,.08); border-color: rgba(88,201,154,.28); color: #9be3c2; }
.flash.err { background: rgba(217,119,127,.08); border-color: rgba(217,119,127,.3); color: #eda7ac; }
.flash.info { background: rgba(255,255,255,.04); border-color: #2c2c33; color: #bfbfc7; }
.alert { border-radius: 6px; background: rgba(255,255,255,.035); border-color: #26262c; color: #b9b9c1; font-size: 12.5px; }
.alert.info { background: rgba(255,255,255,.035); border-color: #2a2a31; color: #b9b9c1; }
.steps li::before { background: #141418; border-color: #2a2a31; color: #8b8b93; }
.quick-links a { background: #0f0f12; border-color: #202024; border-radius: 8px; }
.quick-links a:hover { border-color: #33333b; background: #141418; box-shadow: var(--aura); }
.phrase-box { background: #0c0c0e; border-color: #232329; border-radius: 5px; font-family: var(--mono); }
.copyable { background: #0c0c0e; border-color: #232329; border-radius: 5px; }
.pagination .pg { border-radius: 5px; border-color: #2a2a30; }
.foot { color: #4a4a51; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; }