/* admin-settings — owned by one agent; see index.html.
   Round 7 layout redesign: owner feedback on the round-6 "grid of cards" settings screen was that cards of very
   different heights left big empty gaps, related fields (hero image far from factory data, payment methods far
   from treasury) were scattered across a very wide stretched page, and each card's save button sat in a
   different spot. Fix: a single, readable, centred content column with one section visible at a time behind a
   small pill navigator (admin-settings.js builds the markup; these are purely its presentation rules). Tokens
   (--pri/--line/--mut/--bg/--red/...) come from admin.css's :root — never redefined here. */

.settings-wrap{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:20px;width:100%}

/* section pill navigator — sticky just under the fixed top bar (64px) so it stays reachable while scrolling a
   long section; horizontally scrollable (never wraps the whole page) so 360-430px screens never get a page-level
   horizontal scrollbar. */
.settings-tabs{position:sticky;top:64px;z-index:15;display:flex;gap:6px;background:var(--bg);padding:10px 2px 14px;margin:0 -2px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.settings-tabs::-webkit-scrollbar{display:none}
.settings-tab{flex:none;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:13px;white-space:nowrap;color:var(--mut);transition:.15s;cursor:pointer}
.settings-tab:hover{background:#f1f5f9;color:var(--ink)}
.settings-tab.on{background:var(--pri);border-color:var(--pri);color:#fff;box-shadow:0 4px 12px rgba(79,70,229,.3)}

/* one section's cards at a time — switching is a class toggle in settingsInit, not a re-render, so nothing
   typed in another section is lost. */
.st-sec{display:none;flex-direction:column;gap:20px}
.st-sec.on{display:flex}

.settings-card .form{gap:14px}
.settings-savebar{display:flex;justify-content:flex-start;margin-top:16px}

/* danger zone: a plain labelled area inside the factory section, right after the factory card. admin-reset.js
   anchors on #stSaveFactory's .card parent and appends ITS OWN card as the next sibling in that same section —
   this label simply sits between the two so the reset card reads as "under منطقة الخطر" instead of looking like
   an extra, unrelated factory-data card. The `+` selector only tints a .card that is truly the very next element
   (i.e. the one admin-reset.js injects); it never affects the factory/season cards above. */
.settings-danger-label{padding:2px 4px}
.settings-danger-label h4{color:var(--red);font-size:14px;margin-bottom:4px}
.settings-danger-label + .card{border-color:#fecaca;background:#fffafa}

@media (max-width:430px){
  /* .top (the fixed 64px header bar) keeps its height at every width, so the sticky offset below stays correct —
     only the pill padding/size shrinks here to fit more tabs per screen without wrapping the whole bar. */
  .settings-tab{padding:0 12px;font-size:12.5px}
}