/* The login gate, the account menu and the admin tables. Token-driven like the rest. */

/* ---------- Role-based hiding (cosmetic; the server enforces access) ---------- */
/* Admin-only tabs (branding, administration) are hidden from everyone else. */
body:not([data-role='admin']) .tab[data-role='admin'] { display: none; }
/* Viewers are read-only: no play, upload, delete, selection or editing. */
body[data-role='viewer'] .actionbar,
body[data-role='viewer'] .picker,
body[data-role='viewer'] [data-dropzone],
body[data-role='viewer'] .media-actions,
body[data-role='viewer'] .dev-check,
body[data-role='viewer'] .drawer-form,
body[data-role='viewer'] [data-forget] { display: none; }
body[data-role='viewer'] .dev { cursor: default; }
body[data-role='viewer'] .media-pick { cursor: default; }
/* Where screens hang, place names and the column order: editors and admins; viewers only look. */
body[data-role='viewer'] :is(.side-actions, .side-arrange, .loose-place, .arrangebar, .wcol-edit, .wcol-foot, .dev-act) { display: none; }

/* ---------- Auth gate: the Stage look, centered card ---------- */
.authgate {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center; padding: var(--space-5);
  background: var(--fm-stage-bg); color: var(--fm-stage-text);
  overflow: auto;
}
.authgate-light {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--fm-stage-bg) url('/stage-light.webp') right center / cover no-repeat;
  mix-blend-mode: screen;
}
/* Until auth.js has decided between the login card and the dashboard (boot.js sets the class). */
html.is-booting body > * { visibility: hidden; }

body[data-auth='gate'] .topbar,
body[data-auth='gate'] main,
body[data-auth='gate'] .actionbar { display: none; }

.authcard {
  position: relative; z-index: 1;
  width: min(420px, 100%);
  display: grid; gap: var(--space-4);
  padding: var(--space-7) var(--space-6);
  background: var(--fm-surface); color: var(--fm-text);
  border: 1px solid var(--fm-border);
}
.authcard-logo { height: 30px; width: auto; justify-self: start; }
.authcard-logo.logo--on-dark { display: none; }
:root[data-theme='dark'] .authcard-logo.logo--on-light { display: none; }
:root[data-theme='dark'] .authcard-logo.logo--on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .authcard-logo.logo--on-light { display: none; }
  :root:not([data-theme='light']) .authcard-logo.logo--on-dark { display: block; }
}
.authcard-title { font: var(--type-h2); }
.authcard-company { font: var(--type-small); color: var(--fm-text-secondary); margin-top: calc(var(--space-3) * -1); }
.authcard-foot { font: var(--type-small); color: var(--fm-text-secondary); }

.authform { display: grid; gap: var(--space-4); }
.authform-lead { color: var(--fm-text-secondary); }
.authform-submit { margin-top: var(--space-1); }
.authform-error { font: var(--type-small); color: var(--fm-offline); }
.btn-link { justify-self: start; background: none; border: 0; padding: var(--space-2) 0; color: var(--fm-link); font: var(--type-small); font-weight: 600; cursor: pointer; }
.code-input { font-size: 26px; letter-spacing: .4em; text-align: center; direction: ltr; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .05em; }

.pw-strength { display: grid; gap: var(--space-1); }
.pw-bar { height: 4px; background: var(--fm-border); overflow: hidden; }
.pw-bar span { display: block; height: 100%; width: 0; background: var(--fm-offline); transition: width var(--motion-base) var(--ease-out), background-color var(--motion-base) var(--ease-out); }
.pw-strength[data-score='2'] .pw-bar span { background: var(--fm-warning); }
.pw-strength[data-score='3'] .pw-bar span,
.pw-strength[data-score='4'] .pw-bar span { background: var(--fm-online); }
.pw-hint { font: var(--type-small); color: var(--fm-text-secondary); }

.qr-box { justify-self: center; width: 200px; height: 200px; padding: var(--space-3); background: #fff; color: #000; } /* literal-color: QR must be pure B/W to scan */
.qr-box svg { width: 100%; height: 100%; display: block; }
.qr-secret { font: var(--type-small); color: var(--fm-text-secondary); overflow-wrap: anywhere; }
.recovery-codes { list-style: none; padding: var(--space-4); margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); background: var(--fm-surface-alt); border: 1px solid var(--fm-border); }
.recovery-codes li { font: var(--type-body); font-variant-numeric: tabular-nums; direction: ltr; text-align: center; letter-spacing: .05em; }

/* ---------- Account menu ---------- */
.account { position: relative; }
.account-btn { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-2); border: 0; background: transparent; color: var(--fm-topbar-fg); cursor: pointer; }
.account-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--fm-primary); color: var(--fm-on-primary); font: var(--type-label); }
.account-meta { display: grid; text-align: start; line-height: 1.2; }
.account-name { font: var(--type-small); font-weight: 600; }
.account-role { font: var(--type-small); color: var(--fm-text-secondary); }
.account-menu { position: absolute; inset-block-start: calc(100% + var(--space-2)); inset-inline-end: 0; z-index: 60; min-width: 220px; display: grid; background: var(--fm-surface-raised); border: 1px solid var(--fm-ink-border); box-shadow: var(--fm-elev-3); }
.account-item { text-align: start; padding: var(--space-3) var(--space-4); min-height: 44px; border: 0; background: transparent; color: var(--fm-text); font: var(--type-body); cursor: pointer; }
.account-item:hover { background: var(--fm-primary-tint); }
.account-item--danger { color: var(--fm-offline); border-block-start: 1px solid var(--fm-border); }
@media (max-width: 639px) { .account-meta { display: none; } }

/* ---------- Admin tables ---------- */
.admin-subhead { font: var(--type-label); margin-block-start: var(--space-3); }
.admin-fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.admin-fieldset label { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font: var(--type-body); cursor: pointer; }
.admin-table { display: grid; gap: 0; }
.admin-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3) var(--space-4); align-items: center; padding: var(--space-3) 0; border-block-end: 1px solid var(--fm-border); }
.admin-row:last-child { border-block-end: 0; }
.admin-row-main { display: grid; gap: 2px; min-width: 0; }
.admin-row-name { font: var(--type-label); overflow: hidden; text-overflow: ellipsis; }
.admin-row-meta { font: var(--type-small); color: var(--fm-text-secondary); display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }
.admin-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.admin-actions .btn, .admin-actions select { height: 36px; min-height: 36px; padding: 0 var(--space-3); font: var(--type-small); font-weight: 600; }
@media (max-width: 639px) { .admin-actions .btn, .admin-actions select { height: 44px; min-height: 44px; } .admin-row { grid-template-columns: 1fr; } .admin-actions { justify-content: flex-start; } }
.pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 8px; font: var(--type-small); font-weight: 600; border: 1px solid var(--fm-border-strong); }
.pill--admin { color: var(--fm-primary-text); border-color: var(--fm-primary-text); }
.pill--on { color: var(--fm-online); border-color: var(--fm-online); }
.pill--off { color: var(--fm-offline); border-color: var(--fm-offline); }
/* Player update states (admin, تحديث تطبيق الشاشات). */
.pill--wait { color: var(--fm-text-secondary); }
.pill--busy { color: var(--fm-accent); border-color: var(--fm-accent); }
.pill--warn { color: var(--fm-warning); border-color: var(--fm-warning); }
.upd-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding: var(--space-4); border: 1px solid var(--fm-border); background: var(--fm-surface-raised); }
.upd-summary-text { display: grid; gap: 2px; }
.upd-count { font: var(--type-h2); }
.upd-breakdown { font: var(--type-small); color: var(--fm-text-secondary); }
.upd-note { font: var(--type-small); color: var(--fm-text-secondary); }
.upd-note--fail { color: var(--fm-offline); }
.admin-empty { color: var(--fm-text-secondary); padding: var(--space-4) 0; }
.admin-table--audit .admin-row { grid-template-columns: 140px 1fr; align-items: baseline; }
.audit-time { font: var(--type-small); color: var(--fm-text-secondary); white-space: nowrap; }
.audit-msg { font: var(--type-small); overflow-wrap: anywhere; }
.audit-result--denied, .audit-result--fail { color: var(--fm-offline); font-weight: 600; }
@media (max-width: 639px) { .admin-table--audit .admin-row { grid-template-columns: 1fr; } }

/* ---------- USB kit (admin): three steps, how many screens and how long, one download ---------- */
.kit-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); counter-reset: kit; }
.kit-step { display: grid; align-content: start; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--fm-border); background: var(--fm-surface-raised); counter-increment: kit; }
.kit-step::before { content: counter(kit); display: grid; place-items: center; width: 24px; height: 24px; margin-block-end: var(--space-2); border-radius: 50%; background: var(--fm-primary-tint); color: var(--fm-primary-text); font: 600 13px/1 var(--fm-font); }
.kit-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-4); }
.kit-form .field { flex: 0 1 200px; }
.kit-info { font: var(--type-small); color: var(--fm-text-secondary); }
.kit-info--problem { color: var(--fm-warning); font-weight: 600; }
@media (max-width: 899px) { .kit-steps { grid-template-columns: 1fr; } }

/* ---------- Invite dialog (admin): role, note, then the one-time link ---------- */
.dialog--invite[open] { grid-template-columns: minmax(0, 1fr); width: min(520px, calc(100vw - 2 * var(--margin))); }
.invite-step { display: grid; gap: var(--space-4); padding: var(--space-5); }
.invite-step[hidden] { display: none; }
.invite-roles { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); min-width: 0; }
.invite-roles legend { margin-block-end: var(--space-2); }
.invite-role { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--fm-border); cursor: pointer; }
.invite-role:has(input:checked) { border-color: var(--fm-primary-text); background: var(--fm-primary-tint); }
.invite-role input { margin-block-start: 4px; accent-color: var(--fm-primary); }
.invite-role-text { display: grid; gap: 2px; }
.invite-link { font-variant-numeric: tabular-nums; }
.invite-meta { font: var(--type-small); color: var(--fm-text-secondary); }
.invite-copied { font: var(--type-small); font-weight: 600; color: var(--fm-online); min-height: 1.5em; }

/* A secret shown once (enroll token / rotated key). */
.secret-reveal { display: grid; gap: var(--space-2); padding: var(--space-4); background: var(--fm-surface-alt); border: 1px solid var(--fm-border); }
.secret-reveal code { font-variant-numeric: tabular-nums; direction: ltr; overflow-wrap: anywhere; font-weight: 600; }