/* ===========================================================
   Urealm — الإعدادات.

   لوحةٌ ثابتة إلى الجانب وقائمةٌ تُمرَّر. على الضيّق تتراكب: التبويبات
   شريطٌ أفقيّ فوق المحتوى.
   =========================================================== */

.view--settings {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0;
  max-inline-size: none;
  block-size: 100%;
  min-block-size: 0;
  overflow: hidden;
}

@media (max-width: 860px) {
  .view--settings { grid-template-columns: minmax(0, 1fr); }
}

/* ----------------------- التبويبات ----------------------- */

.settings-tabs {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--sp-4) var(--sp-2);
  border-inline-end: 1px solid var(--line);
  overflow-y: auto;
}

@media (max-width: 860px) {
  .settings-tabs {
    flex-direction: row;
    gap: var(--sp-1);
    padding: var(--sp-2);
    border-inline-end: 0;
    border-block-end: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
  }
}

.settings-tab {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: var(--tap);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-md);
  color: var(--fg-mute);
  font-size: var(--t-sm);
  text-align: start;
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.settings-tab:hover { background: var(--hover); color: var(--fg-soft); }
.settings-tab.is-active { background: var(--selected); color: var(--fg); font-weight: var(--w-medium); }
.settings-tab__icon { flex: none; display: grid; place-items: center; color: inherit; opacity: 0.8; }

/* ----------------------- اللوحة ----------------------- */

.settings-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  max-inline-size: 800px;
  inline-size: 100%;
  padding: var(--sp-6) var(--sp-6) var(--sp-12);
  overflow-y: auto;
}

.settings-panel__head { display: flex; align-items: flex-start; gap: var(--sp-3); }

.settings-panel__icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-surface-2);
  color: var(--fg-mute);
}

.settings-panel__titles { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.settings-panel__title { font-family: var(--font-display); font-size: var(--t-xl); font-weight: var(--w-medium); }
.settings-panel__desc { font-size: var(--t-sm); color: var(--fg-mute); line-height: var(--lh-snug); }
.settings-panel__search { inline-size: min(280px, 100%); }

.settings-empty { display: none; padding: var(--sp-8); text-align: center; color: var(--fg-mute); font-size: var(--t-sm); }
.settings-empty.is-visible { display: block; }

@media (max-width: 620px) {
  .settings-panel { padding: var(--sp-4) var(--sp-4) var(--sp-12); }
  .settings-panel__head { flex-wrap: wrap; }
  .settings-panel__search { inline-size: 100%; }
}

/* ----------------------- الملفّ الشخصيّ ----------------------- */

.profile { display: flex; align-items: flex-start; gap: var(--sp-4); }
.profile__fields { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-3); }

/* ----------------------- المعاينة ----------------------- */

.preview-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
}

.preview-card__bar { display: flex; align-items: center; gap: var(--sp-2); }
.preview-card__dot { inline-size: 8px; block-size: 8px; border-radius: var(--r-full); background: var(--line-strong); }
.preview-card__title { font-size: var(--t-sm); font-weight: var(--w-medium); }
.preview-card__body { display: flex; flex-direction: column; gap: var(--sp-1); }
.preview-card__row { block-size: 6px; border-radius: var(--r-full); background: var(--bg-inset); }
.preview-card__text { font-size: var(--t-xs); color: var(--fg-mute); }

.sample { font-size: var(--t-sm); color: var(--fg-soft); line-height: var(--lh-body); }

/* ----------------------- الأرشيف ----------------------- */

.archived-list { display: flex; flex-direction: column; gap: 1px; }

.archived-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  transition: background-color var(--dur-1) var(--ease);
}

.archived-row:hover { background: var(--hover); }
.archived-row__name { flex: 1; min-inline-size: 0; font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.export-hint { font-size: var(--t-xs); color: var(--fg-mute); line-height: var(--lh-snug); }

/* ----------------------- الاستهلاك ----------------------- */

.usage { display: flex; flex-direction: column; gap: var(--sp-2); }
.usage__legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--t-xs); color: var(--fg-mute); }
.usage__key { display: inline-flex; align-items: center; gap: var(--sp-1); }

.space-usage { display: flex; flex-direction: column; gap: var(--sp-1); }

.space-usage__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--t-xs);
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
}

/* ----------------------- الاختصارات ----------------------- */

.shortcut-list { display: flex; flex-direction: column; gap: 1px; }