/* Settings screen (settings.js): the page list, each with a status line,
   beside the chosen page. Rows and panels come from components.css. */

.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.settings-nav { position: sticky; top: calc(var(--header-height) + var(--space-3)); display: flex; flex-direction: column; gap: 2px; }
.settings-title { margin: 0 0 var(--space-3); padding-inline: var(--space-3); font-size: var(--typo-title-lg); }
.settings-nav a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    color: var(--on-surface); text-decoration: none; padding: 8px var(--space-3); border-radius: var(--shape-lg); font-size: var(--typo-body-md);
}
.settings-nav .nav-text { display: flex; flex-direction: column; min-width: 0; }
/* Where the page stands: up to two lines, then cut short; a dot for ok / needs you. */
.nav-status { color: var(--on-surface-variant); font-size: var(--typo-body-sm); font-weight: 400; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.nav-status:is(.ok, .warn)::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-inline-end: 6px; vertical-align: 1px; background: var(--st-success-fg); }
.nav-status.warn::before { background: var(--st-warning-fg); }
.settings-nav a .icon { display: none; color: var(--on-surface-variant); }
.settings-nav a:hover { background: color-mix(in srgb, currentColor calc(var(--state-hover) * 100%), transparent); }
.settings-nav a[aria-current="page"] { background: var(--secondary-container); color: var(--on-secondary-container); font-weight: 600; }
html[dir="rtl"] .settings-nav a .icon { transform: scaleX(-1); }
/* The way back to the section list exists only on a phone (the list is beside the section otherwise). */
.settings-layout .back-link { display: none; }
.settings-main { max-width: 880px; }
.settings-main .section-head { margin-bottom: var(--space-3); }
.set-part + .set-part { margin-top: var(--space-3); }
.set-part { scroll-margin-top: calc(var(--header-height) + var(--space-3)); }
/* Activity (activity.js): the Orders timeline, with what changed under each entry. */
.panel.activity { padding-block: var(--space-2) var(--space-3); }
.activity-change { font-size: var(--typo-body-sm); overflow-wrap: anywhere; }

.danger-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); border-top: 1px solid var(--outline-variant); flex-wrap: wrap; }
/* The text shrinks and wraps first, so a long description keeps its button at
   the row's end; the button drops below only on a narrow screen. */
.danger-row > span { flex: 1 1 16rem; min-width: 0; }
.danger-row .t { font-weight: 500; }
.danger-row .d { font-size: var(--typo-body-sm); color: var(--on-surface-variant); }

.logo-preview { max-height: 48px; max-width: 180px; border-radius: var(--shape-sm); border: 1px solid var(--outline-variant); background: var(--surface-container-lowest); padding: 4px; }

/* Search-result preview: deliberately Google's own look (not the admin's
   tokens), since its job is to show the merchant what a shopper will see. */
.serp { font-family: Arial, sans-serif; max-width: 600px; }
.serp-url { font-size: 13px; color: var(--on-surface-variant); }
.serp-title { font-size: 19px; color: var(--primary); margin: 2px 0; }
.serp-desc { font-size: 13px; color: var(--on-surface-variant); }

.secret-field .field-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-top: 4px; }
.pick-list .pad { padding: var(--space-3); margin: 0; }
.zones-edit input:not([type="checkbox"]) { width: 100%; }
.zones-edit td:last-child { width: 44px; }
/* Seven columns in the wide dialog: tighter cells, so nothing scrolls sideways. */
.zones-edit :is(th, td) { padding-inline: var(--space-2); }
.zones-edit :is(.zone-fee, .zone-days-min, .zone-days-max) { min-width: 64px; }
.zones-edit :is(.zone-en, .zone-ar) { min-width: 110px; }
/* An area's own rules, under its row (More). */
.zones-edit .zone-rules td { background: var(--surface-container-low); }
.zone-rules-fields { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3) var(--space-4); }
.zone-rules-fields .field { flex: 1 1 160px; margin: 0; }
.zone-rules-fields .check { flex: 1 1 100%; }
.zones-add { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* The governorates an area covers: a checklist in columns, under its rules. */
.zone-covers { flex: 1 1 100%; margin: 0; padding: 0; border: 0; min-width: 0; }
.zone-covers legend { padding: 0; font-weight: 600; font-size: var(--typo-label-lg); }
.zone-covers-actions { display: flex; gap: var(--space-4); margin: var(--space-2) 0; }
.zone-covers-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--space-1) var(--space-3); }

/* Phone: the section list is its own first screen and a section opens full
   width, with a way back to the list. */
@media (max-width: 767px) {
    .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .settings-nav { position: static; }
    .settings-nav a { padding: 12px var(--space-3); border-radius: var(--shape-sm); }
    .settings-nav a .icon { display: inline; }
    .settings-nav a[aria-current="page"] { background: none; color: var(--on-surface); font-weight: 400; }
    .settings-layout:not(.has-section) .settings-main { display: none; }
    .settings-layout.has-section .settings-nav { display: none; }
    .settings-layout.has-section .back-link { display: inline-flex; }
}

/* WhatsApp Connect's card (its SDK) takes the page's column, like a panel. */
wa-connect { --wa-max-width: none; }
.panel + wa-connect { margin-top: var(--space-3); }