/* ============================================================
   Arbah v1 — Settings (Round 4 PR 10)
   All rules scoped under .arbah-v1. Legacy paint byte-identical
   when the flag is off; this file is a no-op.

   Reads tokens from src/design/arbah-tokens.css. Cross-PR reuse
   with #109/#110/#111/#112/#113/#114/#115. No --arbah-* declared
   here.

   !important policy: 0 in this file.

   --- Greenfield note --------------------------------------
   There is no dedicated #/settings route or src/pages/Settings.js
   in the codebase yet. This PR lands the CSS scaffold so when
   that page is built (or assembled from existing pieces —
   AccountingSettings, UsersAdmin, the Layout.js lang toggle),
   the visual is ready with zero second migration.

   What HAS class wiring today:
     - UsersAdmin.js (route #/users) — team-member-table /
       team-member-item / role-pill-${role}
     - Layout.js topbar — .lang-toggle additive on the lang button

   What is forward-compat (CSS present, JSX not yet wired):
     - .settings-page / .settings-panel / .settings-panel-title /
       .settings-panel-description
     - .toggle-switch (track + knob + on/off state)
     - .connection-item / .connection-status (alias of
       PR #115 .sync-status — cross-PR consistency)
     - .btn-destructive
   ----------------------------------------------------------

   --- Role enum (codebase vs spec) -------------------------
     codebase ROLES (src/auth/roles.js):
       owner / exec / pm / accountant / engineer / admin / client
     spec roles:
       owner / client / worker / family
     resolution: union (9). owner+client overlap (same paint).
       owner → navy-700 bg + white text
       exec → navy-600 bg + white text (codebase-only, similar
              authority to owner)
       pm → info bg + white text (codebase-only, operational lead)
       accountant → success bg + white text (codebase-only,
              financial role)
       engineer → bronze-500 bg + white text (codebase-only,
              field role)
       admin → navy-100 bg + navy-700 text (codebase-only,
              support role)
       client → info bg + white text (spec, codebase shared)
       worker → navy-50 bg + navy-700 text (spec, no codebase
              role currently — engineer would be the closest)
       family → bronze-500 bg + white text (spec, no codebase
              role currently)
   ----------------------------------------------------------
   ============================================================ */

/* -- Page shell --------------------------------------------- */
.arbah-v1 .settings-page {
  background: var(--arbah-bg);
  font-family: var(--arbah-font-sans);
  color: var(--arbah-text);
}

/* -- Settings panels ---------------------------------------- */
.arbah-v1 .settings-panel {
  background: var(--arbah-surface);
  border-radius: var(--arbah-radius-lg);
  box-shadow: var(--arbah-shadow-sm);
  border: 1px solid var(--arbah-border);
  padding: var(--arbah-space-6);
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .settings-panel + .settings-panel {
  margin-top: var(--arbah-space-4);
}
.arbah-v1 .settings-panel-title {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-lg);
  color: var(--arbah-navy-700);
  margin: 0 0 var(--arbah-space-2) 0;
  line-height: 1.3;
}
.arbah-v1 .settings-panel-description {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text-muted);
  margin: 0 0 var(--arbah-space-4) 0;
}

/* -- Form fields (PR #109 login pattern) -------------------- */
.arbah-v1 .settings-panel label,
.arbah-v1 .settings-panel .form-label {
  display: block;
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
  margin-bottom: var(--arbah-space-1);
}
.arbah-v1 .settings-panel input[type="text"],
.arbah-v1 .settings-panel input[type="email"],
.arbah-v1 .settings-panel input[type="tel"],
.arbah-v1 .settings-panel input[type="password"],
.arbah-v1 .settings-panel input[type="search"],
.arbah-v1 .settings-panel select,
.arbah-v1 .settings-panel textarea {
  background: var(--arbah-surface);
  border: 1px solid var(--arbah-border);
  border-radius: var(--arbah-radius-md);
  padding: var(--arbah-space-2) var(--arbah-space-3);
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
  width: 100%;
  transition: border-color var(--arbah-duration-fast) var(--arbah-ease-standard),
              box-shadow var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .settings-panel input:focus,
.arbah-v1 .settings-panel select:focus,
.arbah-v1 .settings-panel textarea:focus {
  border-color: var(--arbah-navy-700);
  box-shadow: var(--arbah-focus-ring-glow);
  outline: none;
}

/* -- Toggle switches --------------------------------------- */
.arbah-v1 .toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  background: var(--arbah-navy-100);
  border-radius: var(--arbah-radius-full);
  cursor: pointer;
  transition: background-color var(--arbah-duration-base) var(--arbah-ease-standard);
  vertical-align: middle;
}
.arbah-v1 .toggle-switch .toggle-knob {
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 20px;
  height: 20px;
  background: var(--arbah-surface);
  border-radius: var(--arbah-radius-full);
  box-shadow: var(--arbah-shadow-sm);
  transition: transform var(--arbah-duration-base) var(--arbah-ease-standard);
}
.arbah-v1 .toggle-switch.is-on,
.arbah-v1 .toggle-switch[aria-checked="true"],
.arbah-v1 .toggle-switch[data-state="on"] {
  background: var(--arbah-bronze-500);
}
.arbah-v1 .toggle-switch.is-on .toggle-knob,
.arbah-v1 .toggle-switch[aria-checked="true"] .toggle-knob,
.arbah-v1 .toggle-switch[data-state="on"] .toggle-knob {
  transform: translateX(20px);
}
/* RTL: the knob travels the opposite direction. */
[dir="rtl"] .arbah-v1 .toggle-switch.is-on .toggle-knob,
[dir="rtl"] .arbah-v1 .toggle-switch[aria-checked="true"] .toggle-knob,
[dir="rtl"] .arbah-v1 .toggle-switch[data-state="on"] .toggle-knob,
.arbah-v1[dir="rtl"] .toggle-switch.is-on .toggle-knob {
  transform: translateX(-20px);
}
.arbah-v1 .toggle-switch:focus-visible {
  outline: var(--arbah-focus-ring);
  outline-offset: var(--arbah-focus-ring-offset);
  box-shadow: var(--arbah-focus-ring-glow);
}

/* -- Language toggle (segmented control) ------------------- */
.arbah-v1 .lang-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--arbah-navy-50);
  border-radius: var(--arbah-radius-md);
  padding: 2px;
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
  border: none;
  cursor: pointer;
  transition: background-color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .lang-toggle:hover {
  background: var(--arbah-navy-100);
}
.arbah-v1 .lang-toggle.is-active,
.arbah-v1 .lang-toggle[data-active="true"] {
  background: var(--arbah-bronze-500);
  color: #FFFFFF;
}
.arbah-v1 .lang-toggle-group {
  display: inline-flex;
  background: var(--arbah-navy-50);
  border-radius: var(--arbah-radius-md);
  padding: 2px;
  gap: 2px;
}
.arbah-v1 .lang-toggle-group .lang-toggle-option {
  background: transparent;
  border: none;
  padding: var(--arbah-space-1) var(--arbah-space-3);
  border-radius: var(--arbah-radius-sm);
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-text);
  cursor: pointer;
  transition: background-color var(--arbah-duration-fast) var(--arbah-ease-standard),
              color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .lang-toggle-group .lang-toggle-option.is-active,
.arbah-v1 .lang-toggle-group .lang-toggle-option[aria-pressed="true"] {
  background: var(--arbah-bronze-500);
  color: #FFFFFF;
}
.arbah-v1 .lang-toggle-group .lang-toggle-option[data-lang="ar"] {
  /* IBM Plex Sans Arabic for the Arabic option. */
  font-family: "IBM Plex Sans Arabic", var(--arbah-font-sans);
}

/* -- Connections list -------------------------------------- */
.arbah-v1 .connection-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--arbah-surface);
  padding: var(--arbah-space-3) 0;
  border-bottom: 1px solid var(--arbah-border);
  font-family: var(--arbah-font-sans);
}
.arbah-v1 .connection-item:last-child {
  border-bottom: none;
}
.arbah-v1 .connection-item-label {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-navy-700);
}
.arbah-v1 .connection-item-meta {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-muted);
}
/* Connection status reuses the PR #115 .sync-status* pattern.
   The .connection-status class is an alias hook so a future
   markup that doesn't import sync-status still picks up the
   same paint. */
.arbah-v1 .connection-status {
  display: inline-flex;
  align-items: center;
  gap: var(--arbah-space-2);
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text);
}
.arbah-v1 .connection-status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--arbah-radius-full);
  display: inline-block;
}
.arbah-v1 .connection-status.connection-status-connected .connection-status-dot { background: var(--arbah-success); }
.arbah-v1 .connection-status.connection-status-syncing .connection-status-dot { background: var(--arbah-info); }
.arbah-v1 .connection-status.connection-status-error .connection-status-dot { background: var(--arbah-danger); }
.arbah-v1 .connection-status.connection-status-disconnected .connection-status-dot { background: var(--arbah-text-muted); }

/* Connect/Disconnect action button. */
.arbah-v1 .connection-item .btn-connect,
.arbah-v1 .connection-item button[data-action="connect"] {
  background: var(--arbah-bronze-500);
  color: #FFFFFF;
  border: none;
  border-radius: var(--arbah-radius-md);
  padding: var(--arbah-space-2) var(--arbah-space-3);
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-sm);
  cursor: pointer;
  transition: background-color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .connection-item .btn-connect:hover {
  background: var(--arbah-bronze-700);
}
.arbah-v1 .connection-item .btn-connect:active {
  background: var(--arbah-bronze-800);
}

/* -- Team member list -------------------------------------- */
.arbah-v1 .team-member-table {
  width: 100%;
  background: var(--arbah-surface);
  font-family: var(--arbah-font-sans);
  border-collapse: collapse;
}
.arbah-v1 .team-member-table thead tr {
  background: var(--arbah-navy-50);
  border-bottom: 1px solid var(--arbah-border);
}
.arbah-v1 .team-member-table th {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-navy-700);
  padding: var(--arbah-space-3) var(--arbah-space-4);
  text-align: start;
}
.arbah-v1 .team-member-item {
  display: table-row;
  font-family: var(--arbah-font-sans);
  border-top: 1px solid var(--arbah-border);
  transition: background-color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .team-member-item:hover {
  background: var(--arbah-navy-50);
}
.arbah-v1 .team-member-item td {
  padding: var(--arbah-space-3) var(--arbah-space-4);
  font-size: var(--arbah-text-sm);
}
.arbah-v1 .team-member-name {
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-sm);
  color: var(--arbah-navy-700);
}
.arbah-v1 .team-member-email {
  font-family: var(--arbah-font-sans);
  font-size: var(--arbah-text-xs);
  color: var(--arbah-text-muted);
}
.arbah-v1 .team-member-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--arbah-radius-full);
  background: var(--arbah-navy-100);
  color: var(--arbah-navy-700);
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* -- Role pills (union: codebase 7 + spec 4) ---------------- */
/* Compound selector base — same compound-modifier pattern as
   PR #113 (.task-status.task-status-${value}) and PR #115
   (.txn-status.txn-status-${value}). */
.arbah-v1 .role-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--arbah-font-sans);
  font-weight: 500;
  font-size: var(--arbah-text-xs);
  padding: 2px var(--arbah-space-2);
  border-radius: var(--arbah-radius-full);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.arbah-v1 .role-pill.role-pill-owner {
  background: var(--arbah-navy-700);
  color: #FFFFFF;
}
.arbah-v1 .role-pill.role-pill-exec {
  background: var(--arbah-navy-600);
  color: #FFFFFF;
}
.arbah-v1 .role-pill.role-pill-pm {
  background: var(--arbah-info);
  color: #FFFFFF;
}
.arbah-v1 .role-pill.role-pill-accountant {
  background: var(--arbah-success);
  color: #FFFFFF;
}
.arbah-v1 .role-pill.role-pill-engineer {
  background: var(--arbah-bronze-500);
  color: #FFFFFF;
}
.arbah-v1 .role-pill.role-pill-admin {
  background: var(--arbah-navy-100);
  color: var(--arbah-navy-700);
}
.arbah-v1 .role-pill.role-pill-client {
  background: var(--arbah-info);
  color: #FFFFFF;
}
.arbah-v1 .role-pill.role-pill-worker {
  /* Spec role, no codebase analog yet — forward-compat hook. */
  background: var(--arbah-navy-50);
  color: var(--arbah-navy-700);
}
.arbah-v1 .role-pill.role-pill-family {
  /* Spec role, no codebase analog yet — forward-compat hook. */
  background: var(--arbah-bronze-500);
  color: #FFFFFF;
}

/* -- Destructive button ------------------------------------ */
.arbah-v1 .btn-destructive,
.arbah-v1 button.btn-destructive {
  background: var(--arbah-danger);
  color: #FFFFFF;
  border: none;
  border-radius: var(--arbah-radius-md);
  padding: var(--arbah-space-2) var(--arbah-space-4);
  font-family: var(--arbah-font-sans);
  font-weight: 600;
  font-size: var(--arbah-text-sm);
  cursor: pointer;
  transition: background-color var(--arbah-duration-fast) var(--arbah-ease-standard);
}
.arbah-v1 .btn-destructive:hover {
  /* Darken danger via opacity blend — no second token needed. */
  background: #8C1414;
}

/* -- Mobile (375x812) -------------------------------------- */
@media (max-width: 640px) {
  .arbah-v1 .settings-panel {
    padding: var(--arbah-space-4);
    border-radius: var(--arbah-radius-md);
  }
  .arbah-v1 .settings-panel + .settings-panel {
    margin-top: var(--arbah-space-3);
  }
  .arbah-v1 .toggle-switch,
  .arbah-v1 .lang-toggle,
  .arbah-v1 .lang-toggle-group {
    width: auto;
  }
  /* Team table → card stack at phone width (same approach as
     PR #115 transactions table). */
  .arbah-v1 .team-member-table,
  .arbah-v1 .team-member-table thead,
  .arbah-v1 .team-member-table tbody {
    display: block;
  }
  .arbah-v1 .team-member-table thead {
    display: none;
  }
  .arbah-v1 .team-member-item {
    display: block;
    background: var(--arbah-surface);
    border: 1px solid var(--arbah-border);
    border-radius: var(--arbah-radius-md);
    padding: var(--arbah-space-3);
    margin-bottom: var(--arbah-space-2);
  }
  .arbah-v1 .team-member-item td {
    display: block;
    padding: var(--arbah-space-1) 0;
    border: none;
  }
}

/* -- AR / RTL ----------------------------------------------- */
/* Plex Sans Arabic is first in --arbah-font-sans, so AR labels
   pick it up automatically. Form field alignment + table column
   order are direction-driven by inset-inline-* / text-align:
   start (rather than left) so [dir="rtl"] inverts them
   automatically — no per-rule overrides needed except the
   toggle-switch knob translateX, handled above. */