/**
 * components.css — layout chrome (app bar, side rail, bottom tabs) +
 * screen-specific components (dashboard cards, gates, accordions, etc).
 * Reuses base.css design tokens exclusively — no new colors defined here.
 */

/* =========================================================================
   APP BAR
   ========================================================================= */
.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: var(--color-header-navy);
  color: var(--color-header-navy-text);
  padding: var(--space-3) var(--space-4);
  min-height: var(--header-height);
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  /* Both children below can now shrink instead of forcing the bar (and the
     whole page) to overflow horizontally on narrow phones. */
  overflow: hidden;
}

.app-bar__title {
  color: var(--color-header-navy-text);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--font-size-sm);
  /* Shrinks and truncates before it forces .app-bar__right off-screen. */
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .app-bar__title { font-size: var(--font-size-md); }
}

.app-bar__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 0 1 auto;
}

.app-bar__help {
  color: var(--color-header-navy-text);
  text-decoration: none;
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}

/* The connectivity/sync pill has the longest, most variable text
   ("● متصل — 12 بانتظار التصدير") — let it truncate with an ellipsis
   rather than pushing the settings/help icons off the visible viewport. */
.app-bar__right .sync-pill {
  min-width: 0;
  max-width: 38vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}

@media (max-width: 420px) {
  .app-bar { padding-inline: var(--space-3); gap: var(--space-1); }
  .app-bar__right { gap: var(--space-1); }
  /* On very narrow phones, keep only the "؟" glyph — the "مساعدة" label
     is redundant once space is this tight and was a major contributor
     to the bar overflowing 390px-class viewports. */
  .app-bar__help--text-label { font-size: 0; }
  .app-bar__help--text-label::before { content: '؟'; font-size: var(--font-size-sm); }
}

/* =========================================================================
   APP BODY LAYOUT (side rail on desktop, bottom tabs on mobile)
   ========================================================================= */
.app-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.app-main {
  flex: 1;
  max-width: var(--max-content-width);
  margin-inline: auto;
  padding: var(--space-4);
  padding-block-end: calc(var(--space-8) + 56px); /* room for bottom tabs on mobile */
  width: 100%;
}

@media (min-width: 640px) {
  .app-main { padding-inline: var(--space-6); }
}

.side-rail {
  display: none;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.nav-link--active {
  background: rgba(15, 118, 110, 0.12);
  color: var(--color-subheader-teal);
  font-weight: 700;
}

.bottom-tabs {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  justify-content: space-around;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-1) 0;
  z-index: 20;
  overflow-x: auto;
}

.bottom-tabs .nav-link {
  flex-direction: column;
  gap: 2px;
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
}

.bottom-tabs .nav-link__label { font-size: 0.65rem; }

@media (min-width: 900px) {
  .bottom-tabs { display: none; }
  .side-rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: 220px;
    flex-shrink: 0;
    padding: var(--space-4) var(--space-3);
    border-inline-start: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  .app-main { padding-block-end: var(--space-6); }
}

/* =========================================================================
   GENERIC SECTION / TITLE / NOTICE
   ========================================================================= */
.section-title {
  font-size: var(--font-size-md);
  font-weight: 700;
  margin: var(--space-5) 0 var(--space-3);
}

.stage-title {
  font-size: var(--font-size-xl);
  margin-block-end: var(--space-2);
}

.stage-intro {
  color: var(--color-text-muted);
  margin-block-end: var(--space-4);
}

.notice-card {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-block-end: var(--space-4);
  border: 1px solid var(--color-border);
  background: var(--color-computed-bg);
}
.notice-card--ok { background: var(--color-status-ok-bg); border-color: var(--color-status-ok); }
.notice-card--warn { background: var(--color-status-warn-bg); border-color: var(--color-status-warn); }
.notice-card--danger { background: var(--color-status-danger-bg); border-color: var(--color-status-danger); }

.empty-note, .loading-note {
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-3) 0;
}

.pill--lg {
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-4);
  /* pill--lg carries full logic-soundness reason sentences (e.g. "غير
     سليم: بيانات البروتوكول الأساسية..."), not just a one-word state —
     the base .pill's white-space:nowrap forced these to overflow the
     stage header on narrow phones. Let it wrap and fill its container. */
  white-space: normal;
  max-width: 100%;
  text-align: start;
  line-height: 1.35;
  display: inline-block;
}

/* =========================================================================
   STAGE STATUS HEADER
   ========================================================================= */
.stage-header__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-start;
}

.stage-header__item { min-width: 200px; max-width: 100%; flex: 1 1 200px; }

.stage-header__pct { font-weight: 700; margin-block-start: var(--space-1); }

.stage-header__note {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-block-start: var(--space-3);
  margin-block-end: 0;
}

.progress-bar {
  background: var(--color-computed-bg);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
  margin-block: var(--space-1);
}
.progress-bar__fill { height: 100%; border-radius: 999px; transition: width 0.3s ease; }
.progress-bar__fill--ok { background: var(--color-status-ok); }
.progress-bar__fill--warn { background: var(--color-status-warn); }
.progress-bar__fill--danger { background: var(--color-status-danger); }

.subcheck-list { margin-block-start: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.subcheck-row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); }

/* =========================================================================
   DASHBOARD
   ========================================================================= */
.next-action-banner {
  background: var(--color-header-navy);
  color: #fff;
  text-align: center;
  padding: var(--space-5);
}
.next-action-banner__label { font-size: var(--font-size-sm); opacity: 0.8; margin-block-end: var(--space-2); }
.next-action-banner__message { font-size: var(--font-size-lg); font-weight: 700; margin-block-end: var(--space-4); }

.three-layer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-block: var(--space-4);
}
@media (min-width: 700px) { .three-layer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.layer-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-inline-start: 6px solid var(--color-border);
}
.layer-card--ok { border-inline-start-color: var(--color-status-ok); }
.layer-card--warn { border-inline-start-color: var(--color-status-warn); }
.layer-card--danger { border-inline-start-color: var(--color-status-danger); }
.layer-card--neutral { border-inline-start-color: var(--color-status-neutral); }
.layer-card__label { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.layer-card__value { font-size: var(--font-size-md); font-weight: 700; margin-block: var(--space-1); }
.layer-card__guidance { font-size: var(--font-size-sm); color: var(--color-text-muted); }

.gates-panel { display: flex; flex-direction: column; gap: var(--space-2); }
.gate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-block-end: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.gate-row:last-child { border-block-end: none; }
.gate-row__label { font-weight: 600; flex: 1; min-width: 180px; }
.gate-row__source { font-size: var(--font-size-xs); color: var(--color-text-muted); }

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
@media (min-width: 700px) { .workspace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .workspace-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.workspace-card { text-decoration: none; color: inherit; min-height: var(--tap-target-min); }
.workspace-card__title { font-weight: 700; margin-block-end: var(--space-2); }
.workspace-card__range { font-weight: 400; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.workspace-card__meta { display: flex; justify-content: space-between; align-items: center; margin-block-start: var(--space-1); }
.workspace-card__pill { margin-block-start: var(--space-2); }

.stage-list { display: flex; flex-direction: column; gap: var(--space-2); }
.stage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: var(--space-3);
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: var(--space-3) var(--space-4);
}
.stage-row__title { font-weight: 600; }
.stage-row__bar { width: 100px; }
.stage-row__pct { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* .pill is normally a short nowrap chip ("سليم"/"مفتوح"), but here it also
   carries full reason sentences (e.g. "غير سليم: بيانات البروتوكول
   الأساسية..."). Forcing those to stay on one line was the actual cause of
   the dashboard's horizontal page overflow on narrow phones — let long
   status pills wrap instead. */
.stage-row .pill,
.workspace-card__pill .pill {
  white-space: normal;
  max-width: 100%;
  text-align: start;
  line-height: 1.35;
}

.dashboard-footer-note {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-block-start: var(--space-6);
}

/* =========================================================================
   TABS
   ========================================================================= */
.tab-bar {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  margin-block-end: var(--space-4);
  border-block-end: 2px solid var(--color-border);
}
.tab-bar__tab {
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  color: var(--color-text-muted);
  white-space: nowrap;
  border-block-end: 3px solid transparent;
  font-weight: 600;
}
.tab-bar__tab--active {
  color: var(--color-header-navy);
  border-block-end-color: var(--color-subheader-teal);
}

/* =========================================================================
   STAT GRID / GATE CARDS
   ========================================================================= */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-block-start: var(--space-3);
}
.stat-tile {
  background: var(--color-computed-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.stat-tile__label { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.stat-tile__value { font-size: var(--font-size-lg); font-weight: 700; }

.gate-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-block-end: var(--space-3);
}
.gate-card__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.gate-card__id { font-weight: 700; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.gate-card__label { flex: 1; font-weight: 600; }
.gate-card__override summary { cursor: pointer; color: var(--color-link); margin-block-start: var(--space-2); font-size: var(--font-size-sm); }

.gap-badge { font-weight: 700; }
.gap-badge--unestimated { color: var(--color-status-warn); font-style: italic; }
.exe-validity-badge { margin-block-start: var(--space-1); }

/* =========================================================================
   ACCORDION / TIMELINE / CHAIN DIAGRAM (help + onboarding)
   ========================================================================= */
.accordion__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-block-end: var(--space-2);
}
.accordion__item summary { cursor: pointer; font-weight: 700; }
.accordion__body { margin-block-start: var(--space-3); }
.accordion__body ul { margin-block: var(--space-1); padding-inline-start: var(--space-5); }

.checklist { padding-inline-start: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.checklist--numbered { list-style: decimal; }

.timeline { display: flex; flex-direction: column; gap: var(--space-3); margin-block-end: var(--space-4); }
.timeline__item { display: flex; gap: var(--space-4); align-items: baseline; }
.timeline__time { flex-shrink: 0; width: 100px; font-weight: 700; color: var(--color-subheader-teal); }

.chain-diagram {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-block-end: var(--space-4);
}
.chain-diagram__step {
  background: var(--color-header-navy);
  color: #fff;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.chain-diagram__arrow { color: var(--color-text-muted); }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 700px) { .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.onboarding__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-block-start: var(--space-5); }

/* =========================================================================
   OUTPUTS
   ========================================================================= */
.print-actions { display: flex; align-items: center; gap: var(--space-3); margin-block-end: var(--space-4); flex-wrap: wrap; }
.readonly-note {
  background: var(--color-computed-bg);
  color: var(--color-computed-text);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  margin-block-end: var(--space-4);
}
.print-section { margin-block-end: var(--space-5); }
.print-section h2 { font-size: var(--font-size-md); border-block-end: 2px solid var(--color-subheader-teal); padding-block-end: var(--space-1); }
.print-footer { color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* =========================================================================
   TOASTS (non-blocking sync/error banners)
   ========================================================================= */
.toast-host {
  position: fixed;
  inset-block-end: calc(56px + var(--space-4));
  inset-inline: var(--space-3);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  pointer-events: none;
}
@media (min-width: 900px) {
  .toast-host { inset-block-end: var(--space-4); inset-inline-start: auto; inset-inline-end: var(--space-5); align-items: flex-end; }
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 420px;
  width: 100%;
  background: var(--color-header-navy);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-sm);
  animation: toast-in 0.2s ease;
}
.toast--ok { background: var(--color-status-ok); }
.toast--warn { background: var(--color-status-warn); }
.toast--danger { background: var(--color-status-danger); }
.toast--neutral { background: var(--color-header-navy); }
.toast__msg { flex: 1; }
.toast__close {
  background: transparent;
  border: none;
  color: inherit;
  font-size: var(--font-size-md);
  cursor: pointer;
  line-height: 1;
  padding: 0 var(--space-1);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   SYNC STATUS PILL (app bar)
   ========================================================================= */
.sync-pill {
  text-decoration: none;
  cursor: pointer;
  border: none;
  font: inherit;
}

/* =========================================================================
   iOS install banner
   ========================================================================= */
.ios-install-banner {
  position: fixed;
  inset-inline: var(--space-3);
  inset-block-end: calc(56px + var(--space-3));
  z-index: 40;
  background: var(--color-header-navy);
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
}
@media (min-width: 900px) {
  .ios-install-banner { inset-block-end: var(--space-4); inset-inline-start: auto; inset-inline-end: var(--space-5); max-width: 380px; }
}
.ios-install-banner__close {
  background: transparent;
  border: none;
  color: inherit;
  font-size: var(--font-size-md);
  cursor: pointer;
  margin-inline-start: auto;
  padding: 0 var(--space-1);
}

/* =========================================================================
   SETTINGS SCREEN
   ========================================================================= */
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-block-end: 1px solid var(--color-border); flex-wrap: wrap; }
.settings-row:last-child { border-block-end: none; }
.settings-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-block-start: var(--space-3); }
.settings-file-input { display: none; }
.settings-tabs { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-block-start: var(--space-3); }

/* API (cloud accounts) sync mode — login/register forms + user list */
.user-list { display: flex; flex-direction: column; gap: var(--space-2); margin-block: var(--space-3); }
.user-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); flex-wrap: wrap; }
.user-row__info { display: flex; flex-direction: column; gap: 2px; }
.user-row__name { font-weight: 600; }
.user-row__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }