/* ==========================================================================
   SYMMETRA access layer — sign-in gate, profile and owner dialogs, user and
   workspace management, role badges. Same tokens and components as the app
   (buttons, fields, modals and toasts come from symmetra-components.css).
   ========================================================================== */

@layer pages {

  /* ------------------------------------------------------------- gating */
  body.sym-auth-pending .app, body.sym-auth-locked .app,
  body.sym-auth-pending #modalBackdrop, body.sym-auth-pending #modalShell,
  body.sym-auth-locked #modalBackdrop, body.sym-auth-locked #modalShell {
    opacity: 0; visibility: hidden; pointer-events: none;
  }
  .sym-access-hidden { display: none !important; }

  /* ------------------------------------------------------- sign-in gate */
  #symmetra-auth-gate {
    position: fixed; inset: 0; z-index: var(--z-gate);
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-6) var(--space-4);
    background:
      radial-gradient(900px 520px at 85% -10%, rgba(37, 99, 235, .10), transparent 60%),
      radial-gradient(700px 480px at -10% 110%, rgba(13, 148, 136, .07), transparent 60%),
      var(--bg);
    font-family: var(--font-sans);
    color: var(--text);
  }
  #symmetra-auth-gate[hidden] { display: none !important; }
  .sym-login-card {
    width: 100%; max-width: 380px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-3), var(--inner-highlight);
    overflow: hidden;
    animation: sym-pop-in var(--dur-4) var(--ease-out) both;
  }
  .sym-login-brand { position: relative; background: #f4f4f5; border-bottom: 1px solid var(--border); }
  .sym-login-logo {
    position: relative; width: 100%; aspect-ratio: 16 / 8.2;
    overflow: hidden; isolation: isolate;
    background: linear-gradient(180deg, #e2e2e5 0%, #f1f1f2 60%, #fafafa 100%);
  }
  .sym-login-logo img, .sym-login-logo video, .sym-login-logo-start, .sym-login-logo-freeze, .sym-login-logo-video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 46%;
  }
  .sym-login-logo-start { opacity: 1; transition: opacity .12s ease; }
  .sym-login-logo-freeze, .sym-login-logo-video { opacity: 0; transition: opacity .12s ease; }
  #symmetra-auth-gate.sym-login-video-ready .sym-login-logo-start { opacity: 0; }
  #symmetra-auth-gate.sym-login-video-ready .sym-login-logo-video { opacity: 1; }
  #symmetra-auth-gate.sym-login-video-frozen .sym-login-logo-video { opacity: 0; }
  #symmetra-auth-gate.sym-login-video-frozen .sym-login-logo-freeze { opacity: 1; }
  /* dark theme: the brand mark (transparent PNG) on a deep plate instead of the white-backed video */
  :root[data-theme="dark"] .sym-login-brand { background: #0c1017; }
  :root[data-theme="dark"] .sym-login-logo {
    background: radial-gradient(60% 70% at 50% 42%, rgba(246, 213, 138, .10), transparent 70%),
                url("../assets/symmetra-brand.png") center 52% / auto 112% no-repeat, #0c1017;
  }
  :root[data-theme="dark"] .sym-login-logo > * { display: none; }
  .sym-login-error { display: none; margin: var(--space-4) var(--space-6) 0; }
  .sym-login-error.is-shown { display: flex; }
  .sym-login-form { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6) var(--space-6) var(--space-5); }
  .sym-login-form .sym-input { height: 40px; font-size: var(--text-md); }
  .sym-login-form .sym-btn--primary { height: 40px; font-size: var(--text-md); margin-top: var(--space-1); }
  .sym-login-foot {
    padding: var(--space-3) var(--space-6);
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-2);
    color: var(--subtle); font-size: var(--text-2xs); text-align: center; letter-spacing: .02em;
  }
  .sym-login-foot::before {
    content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: 1px;
    background: var(--success); box-shadow: 0 0 0 3px var(--success-soft);
  }

  /* ----------------------------------------------- dialogs (auth modal root) */
  .sym-modal-backdrop { display: flex; align-items: flex-start; justify-content: center; padding: 8vh var(--space-4) var(--space-6); overflow-y: auto; z-index: var(--z-modal); }
  .sym-modal-backdrop[hidden] { display: none !important; }
  .sym-modal__head-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .sym-modal__subtitle { font-size: var(--text-xs); color: var(--muted); }
  .sym-modal__close {
    width: 30px; height: 30px; border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 18px;
  }
  .sym-modal__close:hover { background: var(--surface-3); color: var(--text); }
  .sym-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
  .sym-form-grid .span-2, .sym-form-grid > .full { grid-column: 1 / -1; }
  @media (max-width: 640px) { .sym-form-grid { grid-template-columns: 1fr; } }
  .sym-section-label {
    margin: var(--space-5) 0 var(--space-2);
    font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--muted);
    letter-spacing: var(--tracking-caps); text-transform: uppercase;
  }
  .sym-section-label:first-child { margin-top: 0; }
  .sym-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
  .sym-toolbar__title { font-size: var(--text-md); font-weight: var(--fw-semibold); }
  .sym-photo-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

  /* owner shortcuts inside the profile dialog */
  .sym-owner-btn { justify-content: flex-start; width: 100%; height: 40px; gap: var(--space-2-5); }
  .sym-owner-btn__icon { display: inline-flex; color: var(--muted); }
  .sym-owner-btn__icon svg { width: 16px; height: 16px; }

  /* badges */
  .sym-badge, .sym-role-badge, .sym-wm-chip {
    display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px;
    border-radius: var(--radius-pill); border: 1px solid var(--neutral-line); background: var(--neutral-soft); color: var(--neutral-fg);
    font-size: var(--text-2xs); font-weight: var(--fw-medium); white-space: nowrap;
  }
  .sym-badge--ok, .sym-wm-chip--ok { border-color: var(--success-line); background: var(--success-soft); color: var(--success-fg); }
  .sym-badge--warn, .sym-wm-chip--warn { border-color: var(--warning-line); background: var(--warning-soft); color: var(--warning-fg); }
  .sym-badge--danger, .sym-wm-chip--danger { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger-fg); }
  .sym-badge--lock { border-color: var(--neutral-line); background: var(--neutral-soft); color: var(--neutral-fg); }
  .sym-role-badge[data-role="superadmin"] { border-color: var(--accent-soft-2); background: var(--accent-soft); color: var(--accent-fg); }
  .sym-role-badge[data-role="admin"] { border-color: var(--info-line); background: var(--info-soft); color: var(--info-fg); }
  .sym-role-badge[data-role="controller"] { border-color: var(--success-line); background: var(--success-soft); color: var(--success-fg); }
  .sym-status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-2); }
  .sym-status-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
  .sym-status-dot.is-off { color: var(--muted); }
  .sym-status-dot.is-off::before { background: var(--subtle); }

  /* users table */
  .sym-users-table td { height: 48px; }
  .sym-user-cell { display: flex; align-items: center; gap: var(--space-2-5); min-width: 0; }
  .sym-user-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
  .sym-user-name { font-weight: var(--fw-semibold); color: var(--text); }
  .sym-user-actions { display: flex; justify-content: flex-end; gap: var(--space-1); }

  /* workspace manager (owner) */
  .sym-wm-table td { height: 46px; }
  .sym-wm-name { font-weight: var(--fw-semibold); }
  .sym-wm-sub, .sym-wm-meta, .sym-wm-dim, .sym-wm-note { font-size: var(--text-xs); color: var(--muted); }
  .sym-wm-chips, .sym-wm-feats, .sym-wm-actions { display: flex; flex-wrap: wrap; gap: var(--space-1-5); align-items: center; }
  .sym-wm-chev { color: var(--subtle); }
  .sym-wm-feat { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); font-size: var(--text-2xs); border: 1px solid var(--border); }
  .sym-wm-feat--on { background: var(--success-soft); color: var(--success-fg); border-color: var(--success-line); }
  .sym-wm-feat--off { background: var(--surface-2); color: var(--muted); }
  .sym-wm-detail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
  .sym-wm-detail-title { font-size: var(--text-lg); font-weight: var(--fw-semibold); }
  .sym-wm-auditbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; }
  .sym-wm-confirm { padding: var(--space-3); border: 1px solid var(--warning-line); border-radius: var(--radius-md); background: var(--warning-soft); color: var(--warning-fg); }
  .sym-wm-confirm--danger { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger-fg); }
  .sym-wm-confirm__msg { font-size: var(--text-sm); margin-bottom: var(--space-2); }
  .sym-wm-confirm__btns { display: flex; gap: var(--space-2); justify-content: flex-end; }

  .brand-logo-combined { display: none; }
}

/* Settings panels (Report emails, Agent approvals, API keys, Zoho): one card style */
@layer pages {
  .sym-ak-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-1); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); display: grid; gap: var(--space-3); }
  .sym-ak-card-head { display: grid; gap: var(--space-1); }
  .sym-ak-card-title { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text); }
  .sym-ak-card-sub, .sym-ak-hint { font-size: var(--text-sm); color: var(--muted); line-height: var(--lh-md); max-width: 820px; }
  .sym-ak-hint { font-size: var(--text-xs); }
  .sym-ak-field { display: grid; gap: var(--space-1-5); max-width: 520px; }
  .sym-ak-label { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-2); }
  .sym-ak-input { width: 100%; }
  .sym-ak-footer { display: flex; gap: var(--space-2); justify-content: flex-start; }
  .sym-ak-prefix { font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
  .sym-ak-scope { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-1-5) 0; cursor: pointer; }
  .sym-ak-scope-text { display: grid; }
  .sym-ak-scope-name { font-size: var(--text-sm); color: var(--text); }
  .sym-ak-scope-code { font-size: var(--text-xs); color: var(--muted); font-family: var(--font-mono, ui-monospace, monospace); }
  .sym-mail-notice { font-size: var(--text-sm); color: var(--success-fg); }
  .sym-ak-card .sym-users-table { width: 100%; }
}

/* Settings -> Agent approvals */
@layer pages {
  .sym-ag-table td { vertical-align: top; }
  .sym-ag-table code { font-size: var(--text-xs); }
  .sym-ag-actions { white-space: nowrap; text-align: right; }
  .sym-ag-actions .sym-btn + .sym-btn { margin-left: var(--space-1); }
  .sym-ag-preview { margin-top: var(--space-1-5); padding: var(--space-2); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--text-xs); color: var(--text-2); }
  .sym-ag-preview ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
}