/* Shared admin components added with the catalog + settings revamp: chips,
   segmented buttons, filter chips, search box, notices, dialog, drawer, radio
   options and key/value rows. Built only from tokens.css roles, with logical
   properties throughout so RTL needs no mirror rules beyond glyph flips.
   Used by catalog.js and ui.js. */

/* Buttons: variants styles.css did not have. */
.btn.danger { background: var(--error); color: var(--on-error); }
.btn.danger:hover:not(:disabled) { box-shadow: var(--elev-1); }
.btn.tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.btn.tonal:hover:not(:disabled) { box-shadow: var(--elev-1); }
a.btn { text-decoration: none; }
.btn.sm { padding: 6px 12px; font-size: var(--typo-label-lg); min-height: 32px; }
.btn.sm.icon-only { min-width: 32px; padding: 6px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--primary); font: inherit; cursor: pointer; text-decoration: none; text-underline-offset: 2px; }
.linkbtn:hover { text-decoration: underline; }
.linkbtn.danger { color: var(--error); }

/* "‹ Settings" / "‹ Orders": back to the list a page was opened from. */
.back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); text-decoration: none; margin-bottom: var(--space-2); }
html[dir="rtl"] .back-link svg { transform: scaleX(-1); }

.chip {
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    font-size: var(--typo-label-md); line-height: var(--typo-label-md-lh); font-weight: 500;
    padding: 2px var(--space-2); border-radius: var(--shape-full);
    background: var(--st-neutral-bg); color: var(--st-neutral-fg);
}
/* Status tones use Edara 3's status pairs (tokens.css --st-*). */
.chip.ok { background: var(--st-success-bg); color: var(--st-success-fg); }
.chip.warn { background: var(--st-warning-bg); color: var(--st-warning-fg); }
.chip.info { background: var(--st-info-bg); color: var(--st-info-fg); }
.chip.danger { background: var(--st-error-bg); color: var(--st-error-fg); }
/* Destructive but not the main action: outlined, so it never outshouts the next step. */
.btn.danger-outline { background: transparent; color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.btn.danger-outline:hover:not(:disabled) { background: color-mix(in srgb, currentColor calc(var(--state-hover) * 100%), transparent); }
.chip svg { width: 14px; height: 14px; }
.num { font-variant-numeric: tabular-nums; }
.small { font-size: var(--typo-body-sm); }
.code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12px; color: var(--on-surface-variant); direction: ltr; unicode-bidi: isolate; }

.seg { display: inline-flex; border: 1px solid var(--outline); border-radius: var(--shape-full); overflow: hidden; }
/* Segments are aria-pressed buttons, or radio labels in a form (.seg.choice). */
.seg :is(button, label) {
    border: 0; background: transparent; color: var(--on-surface); font: inherit; font-size: var(--typo-label-lg);
    padding: 6px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
}
.seg :is(button, label) + :is(button, label) { border-inline-start: 1px solid var(--outline); }
.seg button[aria-pressed="true"], .seg label:has(input:checked) { background: var(--secondary-container); color: var(--on-secondary-container); font-weight: 600; }
.seg button:hover:not([aria-pressed="true"]), .seg label:hover:not(:has(input:checked)) { background: color-mix(in srgb, currentColor calc(var(--state-hover) * 100%), transparent); }
/* A form field: one row of short answers spread over the width (AdminUI.choice). */
.seg.choice { display: flex; width: 100%; }
.seg.choice label { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; }
.seg.choice input { position: absolute; opacity: 0; pointer-events: none; }
.seg.choice label:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: -2px; }

.fchip {
    border: 1px solid var(--outline-variant); background: transparent; color: var(--on-surface-variant);
    font: inherit; font-size: var(--typo-label-lg); padding: 4px 12px; border-radius: var(--shape-sm);
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
}
.fchip[aria-pressed="true"] { background: var(--secondary-container); color: var(--on-secondary-container); border-color: transparent; }
.fchip .n { font-variant-numeric: tabular-nums; opacity: .8; }

.searchbox { position: relative; min-width: 0; display: block; }
.searchbox input {
    width: 100%; box-sizing: border-box; font: inherit; font-size: var(--typo-body-md);
    padding: 8px 12px; padding-inline-start: 34px; border-radius: var(--shape-full);
    border: 1px solid var(--outline-variant); background: var(--surface-container-lowest); color: var(--on-surface);
}
.searchbox input:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: transparent; }
.searchbox svg { position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--on-surface-variant); pointer-events: none; }

.check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--typo-body-md); cursor: pointer; flex-wrap: wrap; }
.check input { width: 18px; height: 18px; accent-color: var(--primary); margin: 0; }
.check.disabled { opacity: .5; cursor: default; }

.notice {
    display: flex; align-items: flex-start; gap: var(--space-3); border-radius: var(--shape-md);
    padding: var(--space-3) var(--space-4); margin-block-end: var(--space-3); font-size: var(--typo-body-md);
}
.notice > svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.notice.info { background: var(--primary-container); color: var(--on-primary-container); }
.notice.warn { background: var(--warning-container); color: var(--on-warning-container); }
.notice .grow { flex: 1; min-width: 0; }
.notice .actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }

/* Dialog (ui.js openDialog) */
.dialog-scrim, .scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .32); z-index: 80; }
.dialog {
    position: fixed; z-index: 81; inset-inline: 0; margin-inline: auto; top: 8vh; width: min(560px, calc(100vw - 32px));
    max-height: 84vh; display: flex; flex-direction: column;
    background: var(--dialog); color: var(--on-surface); border-radius: var(--shape-xl); box-shadow: var(--elev-3);
}
.dialog.wide { width: min(720px, calc(100vw - 32px)); }
.dialog-head { padding: var(--space-5) var(--space-5) var(--space-2); }
.dialog-head h3 { margin: 0; font-family: var(--font-headline); font-size: var(--typo-headline-sm); line-height: var(--typo-headline-sm-lh); font-weight: 600; }
.dialog-head p { margin: var(--space-2) 0 0; color: var(--on-surface-variant); font-size: var(--typo-body-md); }
.dialog-body { padding: var(--space-3) var(--space-5); overflow: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.dialog-body > p { margin: 0; }
/* A show/hide wrapper around several fields: they keep the dialog's own spacing. */
.dialog-body > .fields { display: contents; }
.dialog-foot { padding: var(--space-4) var(--space-5) var(--space-5); display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.dialog-foot .grow { flex: 1; min-width: 0; font-size: var(--typo-body-md); }
.dialog-foot.discarding { background: var(--error-container); color: var(--on-error-container); border-end-start-radius: var(--shape-xl); border-end-end-radius: var(--shape-xl); }
.dialog-foot.discarding .btn.ghost { color: var(--on-error-container); }

/* Drawer (ui.js openDrawer) */
.drawer {
    position: fixed; inset-block: 0; inset-inline-end: 0; width: min(460px, 100vw); z-index: 81;
    background: var(--surface-container-low); color: var(--on-surface); box-shadow: var(--elev-3); display: flex; flex-direction: column;
}
.drawer-head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--outline-variant); }
.drawer-head h3 { margin: 0; font-size: var(--typo-title-lg); line-height: var(--typo-title-lg-lh); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.drawer-body { overflow: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-5); }
.drawer-sec { display: flex; flex-direction: column; gap: var(--space-2); }
/* Small uppercase section label: drawer sections and settings cards. */
.drawer-sec h4, .card-label h3 { margin: 0; font-size: var(--typo-label-lg); color: var(--on-surface-variant); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
html[dir="rtl"] .drawer-sec h4, html[dir="rtl"] .card-label h3 { text-transform: none; letter-spacing: 0; }

/* Often a <fieldset>: drop the browser's grooved frame around the options. */
.radio-list { display: flex; flex-direction: column; gap: var(--space-2); border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.radio-opt { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-2); align-items: start; padding: var(--space-2) var(--space-3); border: 1px solid var(--outline-variant); border-radius: var(--shape-sm); cursor: pointer; }
.radio-opt:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.radio-opt input { margin-top: 3px; accent-color: var(--primary); }
.radio-opt .t { font-weight: 500; }
.radio-opt .d { font-size: var(--typo-body-sm); color: var(--on-surface-variant); }

.kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding-block: 10px; border-bottom: 1px solid var(--outline-variant); }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--on-surface-variant); font-size: var(--typo-body-md); }
.kv .v { font-weight: 500; font-size: var(--typo-body-md); overflow-wrap: anywhere; display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.kv .v.unset { color: var(--on-surface-variant); font-weight: 400; font-style: italic; }
@media (min-width: 768px) {
    .kv { grid-template-columns: minmax(140px, 40%) minmax(0, 1fr); gap: var(--space-3); align-items: center; }
}

.pick-list { max-height: 44vh; overflow: auto; border: 1px solid var(--outline-variant); border-radius: var(--shape-sm); }
.pick-list:empty { display: none; }   /* nothing chosen or found yet: no empty frame */
.pick-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; padding: 8px var(--space-3); border-bottom: 1px solid var(--outline-variant); cursor: pointer; font-size: var(--typo-body-md); }
.pick-row:last-child { border-bottom: 0; }
.pick-row input { accent-color: var(--primary); width: 16px; height: 16px; margin: 0; }
.pick-row .path { font-size: var(--typo-body-sm); color: var(--on-surface-variant); }

.field-error { color: var(--error); font-size: var(--typo-body-sm); font-weight: 500; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--error); }

/* Panels and label · value · action rows — the list shape Settings and Online
   store share (AdminUI.row in ui.js). One surface per group instead of a card
   per value. */
.panel { background: var(--card); border: 1px solid var(--outline-variant); border-radius: var(--shape-lg); padding: 0 var(--space-4); }
.panel + .panel, .panel-bar + .panel { margin-top: var(--space-3); }
.set-group-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-block: var(--space-3) var(--space-1); }
.set-group-head h3 { margin: 0; font-size: var(--typo-title-sm); font-weight: 600; }
.set-row {
    display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) auto; align-items: center;
    gap: var(--space-3); min-height: 52px; padding-block: var(--space-2); border-top: 1px solid var(--outline-variant);
}
.panel.rows > .set-row:first-child { border-top: 0; }
.set-k { color: var(--on-surface-variant); font-size: var(--typo-body-md); overflow-wrap: anywhere; }
.set-v { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-2); overflow-wrap: anywhere; }
.set-a { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }
.set-foot { border-top: 1px solid var(--outline-variant); padding-block: var(--space-3); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.pad-row { padding-block: var(--space-3); margin: 0; border-top: 1px solid var(--outline-variant); }
@media (max-width: 600px) {
    .set-row { grid-template-columns: minmax(0, 1fr) auto; }
    .set-k { grid-column: 1 / -1; font-size: var(--typo-body-sm); }
}

/* Page-level tabs (Online store). Links, so each tab has its own address.
   The rule under them is an inset shadow, not a border: a border the links
   overhang is vertical scroll, and Windows draws a scrollbar for it. */
.page-tabs { display: flex; gap: var(--space-1); box-shadow: inset 0 -1px 0 var(--outline-variant); margin-bottom: var(--space-4); overflow-x: auto; scrollbar-width: none; }
.page-tabs a {
    padding: 10px var(--space-3); color: var(--on-surface-variant); text-decoration: none; font-weight: 500; white-space: nowrap;
    border-bottom: 3px solid transparent;
}
.page-tabs a:hover { color: var(--on-surface); }
.page-tabs a[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); }
/* Orders' "Pending 3": a .chip (info on the open tab), sized for a tab. The
   side menu's count is the same chip at the item's far edge; the collapsed
   rail clips it with the label. */
.tab-count, .nav-badge { margin-inline-start: 4px; padding: 0 6px; min-width: 20px; justify-content: center; font-variant-numeric: tabular-nums; }
.nav-badge { margin-inline-start: auto; }

.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--space-3); }

/* AdminUI.field's suffix: the unit inside the box, "10 %", "50 EGP". */
.affix { display: flex; align-items: center; border: 1px solid var(--outline); border-radius: var(--shape-sm); background: var(--surface-container-lowest); }
.affix:focus-within { outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary); }
.field .affix input, .field .affix input:focus { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; }
.affix b { padding-inline-end: 12px; color: var(--on-surface-variant); font-weight: 500; }
.field.is-invalid .affix { border-color: var(--error); }

/* Discounts editor: the kind beside its value (labels on one line, both boxes
   one height whatever the font's line height), the code in capitals as the
   server stores it, and the optional rules folded under "More options". */
.disc-kind { display: grid; grid-template-columns: minmax(0, 1fr) 10rem; gap: var(--space-3); }
.disc-kind .field { height: 100%; }
.disc-kind .field > :last-child { flex: 1; }
.disc-kind:has([data-value][hidden]) { grid-template-columns: minmax(0, 1fr); }
.field input.code-input { text-transform: uppercase; letter-spacing: .04em; }
.disc-more { border-top: 1px solid var(--outline-variant); padding-top: var(--space-3); }
.disc-more > * + * { margin-top: var(--space-4); }
.disc-more summary { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-weight: 600; color: var(--primary); list-style: none; }
.disc-more summary::-webkit-details-marker { display: none; }
/* A disclosure chevron (i-chev) that turns when open: Catalog's tree rows, More options. */
:is(.tree-row .chev, .disc-more summary) svg { width: 16px; height: 16px; transition: transform var(--motion-base) var(--motion-ease); }
:is(.tree-row[aria-expanded="true"] .chev, .disc-more[open] summary) svg { transform: rotate(90deg); }
html[dir="rtl"] :is(.tree-row .chev, .disc-more summary) svg { transform: scaleX(-1); }
html[dir="rtl"] :is(.tree-row[aria-expanded="true"] .chev, .disc-more[open] summary) svg { transform: scaleX(-1) rotate(90deg); }
@media (max-width: 600px) {
    .disc-kind { grid-template-columns: minmax(0, 1fr); }
}