/* FlowDesk — shared launcher-style Settings master-detail (category rail + content pane). Used by all three surfaces:
   the OPERATE console (screen-directory-admin.js), the personal Settings page (page-settings.js), and admin system
   settings (screen-settings.js). Pure logical properties → auto-mirrors for RTL (rail moves to the inline-start = right
   in Hebrew) with zero RTL-specific rules. Structural only; reuses the existing design tokens. */

.settings-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}

/* Rail (master) — a sticky vertical list of category buttons. */
.settings-rail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  position: sticky;
  inset-block-start: var(--sp-4);
  align-self: start;
  min-inline-size: 0;
}
.settings-rail-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  inline-size: 100%;
  text-align: start;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 8px);
  padding-block: var(--sp-2);
  padding-inline: var(--sp-3);
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.settings-rail-item:hover { background: var(--bg-sunken); }
.settings-rail-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-rail-item[aria-current="page"] {
  background: var(--accent-weak);
  color: var(--accent);
  border-color: var(--accent-weak);
  font-weight: 600;
}
.settings-rail-item .settings-rail-ico { flex: 0 0 auto; inline-size: 1.15rem; block-size: 1.15rem; }
.settings-rail-item .settings-rail-label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }

/* Panel (detail) — holds ONLY the active category's body. min-inline-size:0 prevents a grid blow-out from wide content. */
.settings-panel { min-inline-size: 0; }

/* Responsive: collapse to one column; the rail becomes a horizontal scroll strip. */
@media (max-width: 640px) {
  .settings-shell { grid-template-columns: minmax(0, 1fr); }
  .settings-rail {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    white-space: nowrap;
    gap: var(--sp-2);
    padding-block-end: var(--sp-1);
  }
  .settings-rail-item { flex: 0 0 auto; inline-size: auto; }
}