/* ============================================================
   admin.css — Constructor (admin) mode: a distinct violet identity
   for every structural control, plus the mode toggle and banner.
   Constructor controls are only rendered while store.state.admin is
   true, so styling them violet here reads unambiguously as "admin".
   ============================================================ */

/* ---- admin accent tokens (own three-tier theming) ---- */
:root{
  --admin:#6C5CE0;--admin-ink:#4B3CB8;--admin-tint:#EDEAFB;--admin-tint-2:#D8D1F5;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --admin:#9E8FF2;--admin-ink:#B7ABF7;--admin-tint:#241F3B;--admin-tint-2:#342C57;
  }
}
:root[data-theme="dark"]{
  --admin:#9E8FF2;--admin-ink:#B7ABF7;--admin-tint:#241F3B;--admin-tint-2:#342C57;
}

/* ---- mode toggle (top bar): Работа / Конструктор ---- */
.modesw{display:inline-flex;align-items:center;background:var(--sink);border-radius:var(--r-pill);padding:3px;gap:2px}
.modesw button{
  display:inline-flex;align-items:center;gap:6px;border:none;background:transparent;
  padding:.42em .85em;border-radius:var(--r-pill);font-weight:600;font-size:.84rem;color:var(--muted);
}
.modesw button:hover{color:var(--ink-2)}
.modesw button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
.modesw button.modesw__adm.on{background:var(--admin);color:#fff;box-shadow:var(--shadow-1)}
.modesw button.modesw__adm.on .icon{color:#fff}

/* ---- global "you are in constructor mode" cue: a thin violet rail ---- */
.app[data-admin="true"] .ws__main{box-shadow:inset 3px 0 0 -1px var(--admin-tint-2)}

/* the constructor banner sits under the header, naming the mode */
.adminbar{
  margin:0 22px 8px;display:flex;align-items:center;gap:9px;
  background:var(--admin-tint);border:1px solid var(--admin-tint-2);border-radius:var(--radius-sm);
  padding:8px 12px;color:var(--admin-ink);font-size:.86rem;
}
.adminbar .icon{flex:none;color:var(--admin)}
.adminbar b{font-weight:700}
.adminbar__hint{color:var(--admin-ink);opacity:.8}
.adminbar__x{margin-left:auto}

/* ---- shared identity for constructor controls ---- */
/* a grouped cluster of admin actions in a header */
.admin-cluster{
  display:inline-flex;align-items:center;gap:8px;padding:3px 3px 3px 10px;
  border:1px dashed var(--admin-tint-2);border-radius:var(--r-pill);background:var(--admin-tint);
}
.admin-cluster__lbl{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;letter-spacing:.02em;color:var(--admin-ink);text-transform:uppercase}
.admin-cluster__lbl .icon{color:var(--admin)}

/* an admin action button */
.btn--admin{background:var(--admin);color:#fff;border-color:transparent;box-shadow:var(--shadow-1)}
.btn--admin:hover{filter:brightness(1.06);box-shadow:var(--shadow-2)}
.btn--admin .icon{color:#fff}
.btn--admin-ghost{color:var(--admin-ink);border-color:var(--admin-tint-2);background:var(--admin-tint)}
.btn--admin-ghost:hover{border-color:var(--admin);background:var(--admin-tint-2);color:var(--admin-ink)}

/* gears, grips and dashed "add" affordances turn violet in constructor mode */
.is-admin-ctl{color:var(--admin) !important}
.is-admin-ctl:hover{color:var(--admin-ink) !important;background:var(--admin-tint) !important}

.navitem--add.is-admin-ctl{color:var(--admin-ink);border-color:transparent}
.navitem--add.is-admin-ctl:hover{border-color:var(--admin-tint-2);color:var(--admin-ink);background:var(--admin-tint)}
.rail__add.is-admin-ctl{border-color:var(--admin-tint-2);color:var(--admin);background:transparent}
.rail__add.is-admin-ctl:hover{border-color:var(--admin);color:var(--admin-ink);background:var(--admin-tint)}

/* the sidebar gear, when its edit sub-mode is active, uses the admin accent */
.btn--icon.is-admin-on{background:var(--admin-tint);color:var(--admin-ink)}

/* the board "add column/option" affordance */
.addcol.is-admin-ctl{border-color:var(--admin-tint-2);color:var(--admin-ink)}
.addcol.is-admin-ctl:hover{border-color:var(--admin);color:var(--admin-ink);background:var(--admin-tint)}

/* constructor surfaces (add-field form, field editor) carry a violet marker */
.admin-surface{border-color:var(--admin) !important}
.eyebrow--admin{color:var(--admin-ink)}
.eyebrow--admin::before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--admin);transform:rotate(45deg);margin-right:7px;vertical-align:middle}

/* drag grips read as admin but stay quiet at rest, full violet on hover */
.kcol__grip.is-admin-ctl,.dfield__grip.is-admin-ctl,.navsec__grip.is-admin-ctl,.navitem__grip.is-admin-ctl{
  color:color-mix(in srgb, var(--admin) 52%, transparent) !important;
}
.kcol__grip.is-admin-ctl:hover,.dfield__grip.is-admin-ctl:hover,.navsec__grip.is-admin-ctl:hover,.navitem__grip.is-admin-ctl:hover{
  color:var(--admin-ink) !important;background:var(--admin-tint) !important;
}

/* dashed "add" affordances in the drawer / table */
.daddfield.is-admin-ctl{color:var(--admin-ink);border-color:var(--admin-tint-2)}
.daddfield.is-admin-ctl:hover{border-color:var(--admin);color:var(--admin-ink);background:var(--admin-tint)}
.addfield-btn.is-admin-ctl,.foot-hidden.is-admin-ctl{color:var(--admin-ink) !important}
.foot-hidden.is-admin-ctl{border-color:var(--admin-tint-2)}
.foot-hidden.is-admin-ctl:hover{border-color:var(--admin);background:var(--admin-tint)}
.th-edit.is-admin-ctl:hover{color:var(--admin-ink) !important;background:transparent !important}
.th-edit.is-admin-ctl .th-edit__ic{color:var(--admin)}

/* plain (read-only) table header for regular users */
.th-plain{display:inline-flex;align-items:center;gap:6px}
.th-plain .ftype{opacity:.7}