/* Surveys app (back office): list, survey page (builder / settings / share / results), answering inside the app. Tokens from admin.css only, logical properties only
   (works in Arabic RTL), light + dark through the tokens, phone first at 375 px with 44 px tap targets. The PUBLIC page has its own file: css/survey.css. */

/* ------------------------------------------------------------ list */
.svy-main { display: grid; gap: 4px; min-inline-size: 0; overflow-wrap: anywhere; }
.svy-kind { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.svy-phone-line { display: none; align-items: center; gap: 8px; flex-wrap: wrap; }
.svy-row-actions { display: inline-flex; align-items: center; gap: 4px; }
.svy-c-act { inline-size: 1%; white-space: nowrap; }
@media (max-width: 720px) { .svy-phone-line { display: flex; } }

/* ------------------------------------------------------------ tabs + shared bits */
.svy-tabs { display: flex; gap: 4px; overflow-x: auto; border-block-end: 1px solid var(--line); margin-block-end: 16px; }
.svy-tabs .tab { flex: 0 0 auto; min-block-size: 44px; padding-inline: 16px; background: transparent; border: 0; border-block-end: 3px solid transparent; margin-block-end: -1px; font: inherit; font-weight: 700; color: var(--muted); white-space: nowrap; cursor: pointer; }
.svy-tabs .tab:hover { color: var(--ink); }
.svy-tabs .tab.on { color: var(--brand); border-block-end-color: var(--brand); }
.svy-tabs .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-sm); }
@media (max-width: 720px) { .svy-tabs { gap: 0; } .svy-tabs .tab { padding-inline: 10px; font-size: 14px; } }
.svy-bar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 12px; }
.svy-banner { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; margin-block-end: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--info-soft); color: var(--info-ink); }
.svy-banner > div { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
.svy-banner.ok { background: var(--ok-soft); color: var(--ok-ink); }
.svy-banner.warn { background: var(--warn-soft); color: var(--warn-ink); }
.svy-warn { color: var(--danger-ink); }
.svy-live { color: var(--ok-ink); font-weight: 650; }
.svy-in { inline-size: 100%; min-block-size: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); font: inherit; }
.svy-in:disabled { background: var(--panel-2); color: var(--muted); }
.svy-len { inline-size: 120px; }
.svy-sub { margin-block: 20px 8px; }
.svy-card { padding: 16px; margin-block-end: 16px; }
.svy-card h3 { margin-block: 0 8px; }
.svy-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.svy-empty { padding: 24px; text-align: center; }

/* ------------------------------------------------------------ builder */
.svy-sections { display: grid; gap: 16px; }
.svy-section { padding: 14px; display: grid; gap: 12px; }
.svy-sec-head { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.svy-sec-n { font-weight: 700; color: var(--accent-d); white-space: nowrap; }
.svy-qtools { display: inline-flex; gap: 2px; flex: none; }
.svy-qcard { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); padding: 10px; display: grid; gap: 10px; }
.svy-qhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.svy-qhead .svy-qtools { margin-inline-start: auto; }
.svy-qnum { display: inline-flex; align-items: center; gap: 4px; min-inline-size: 36px; justify-content: center; padding: 4px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-d); font-weight: 700; font-variant-numeric: tabular-nums; }
.svy-type { min-block-size: 44px; max-inline-size: 100%; padding-inline: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); font: inherit; }
.svy-req { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; cursor: pointer; }
.svy-req input { inline-size: 20px; block-size: 20px; }
.svy-qbody { display: grid; gap: 8px; }
.svy-options { display: grid; gap: 8px; padding-inline-start: 12px; border-inline-start: 3px solid var(--line); }
.svy-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.svy-opt-mark { color: var(--muted); }
.svy-opt-tools { display: inline-flex; }
.svy-add-opt { justify-self: start; }
.svy-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.svy-addbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.svy-add { min-block-size: 44px; display: inline-flex; align-items: center; gap: 6px; padding-inline: 14px; cursor: pointer; }
.svy-add:hover { border-color: var(--accent); background: var(--accent-soft); }
.svy-add-section { justify-self: start; min-block-size: 44px; }
.svy-empty-sec { margin: 0; text-align: center; }
@media (max-width: 720px) {
  .svy-sec-head { grid-template-columns: minmax(0, 1fr) auto; }
  .svy-sec-head .svy-sec-n { grid-column: 1 / -1; }
  .svy-sec-head .svy-in { grid-column: 1; }
  .svy-sec-head .svy-qtools { grid-column: 2; grid-row: 2 / span 2; }
  .svy-opt { grid-template-columns: minmax(0, 1fr); }
  .svy-opt .svy-opt-mark { display: none; }
  .svy-opt .svy-opt-tools { justify-self: end; }
}

/* preview */
.svy-preview { display: grid; gap: 20px; max-inline-size: 640px; }
.svy-pv-section h3 { margin-block: 0 8px; color: var(--accent-d); }
.svy-pv-q { padding-block: 10px; border-block-end: 1px solid var(--line); }
.svy-pv-text-q { font-weight: 700; margin-block-end: 6px; }
.svy-req-star { color: var(--danger); }
.svy-pv-choice { display: flex; align-items: center; gap: 10px; min-block-size: 44px; }
.svy-pv-mark { inline-size: 18px; block-size: 18px; border: 2px solid var(--muted); border-radius: 50%; flex: none; }
.svy-pv-mark.multiple { border-radius: 4px; }
.svy-pv-stars { font-size: 28px; color: var(--warn); letter-spacing: 2px; }
.svy-pv-nps { display: flex; flex-wrap: wrap; gap: 6px; }
.svy-pv-n { min-inline-size: 36px; padding: 6px 0; text-align: center; border: 1px solid var(--line); border-radius: var(--r-sm); }
.svy-pv-text { padding: 12px; border: 1px dashed var(--line); border-radius: var(--r-sm); color: var(--muted); }

/* ------------------------------------------------------------ share */
.svy-linkrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-block: 8px; }
.svy-link { flex: 1 1 260px; min-inline-size: 0; direction: ltr; text-align: start; }
.svy-order { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-block: 10px; border-block-start: 1px solid var(--line); }
.svy-order-main { display: grid; gap: 2px; min-inline-size: 0; overflow-wrap: anywhere; }
.svy-order-act { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.svy-wa { color: var(--ok-ink); }
.svy-bulk-out { display: grid; gap: 6px; margin-block-start: 8px; }
.svy-bulk-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); }
.svy-bulk-row code { min-inline-size: 0; overflow-wrap: anywhere; font-size: 12px; }

/* ------------------------------------------------------------ results */
.svy-filters { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-block-end: 12px; }
.svy-date { display: grid; gap: 2px; font-size: 12px; color: var(--muted); }
.svy-date .date-in { min-block-size: 44px; }
.svy-rcards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); margin-block-start: 12px; }
.svy-rq { padding: 16px; display: grid; gap: 10px; align-content: start; min-inline-size: 0; }
.svy-rq-head { display: grid; gap: 2px; }
.svy-rq-head h4 { margin: 0; overflow-wrap: anywhere; }
.svy-bars { display: grid; gap: 8px; }
.svy-bar { display: grid; grid-template-columns: minmax(70px, 30%) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.svy-bar-label { overflow-wrap: anywhere; font-size: 14px; }
.svy-track { display: block; block-size: 14px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; }
.svy-fill { display: block; block-size: 100%; background: var(--accent); border-radius: 999px; }
.svy-bar.bad .svy-fill { background: var(--danger); }
.svy-bar.mid .svy-fill { background: var(--warn); }
.svy-bar.good .svy-fill { background: var(--ok); }
.svy-bar-n { font-variant-numeric: tabular-nums; font-weight: 700; text-align: end; white-space: nowrap; }
.svy-bar-n small { margin-inline-start: 6px; color: var(--muted); font-weight: 400; }
.svy-avg { display: flex; align-items: baseline; gap: 6px; }
.svy-score { font-size: 40px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.svy-score.good { color: var(--ok-ink); }
.svy-score.mid { color: var(--warn-ink); }
.svy-score.bad { color: var(--danger-ink); }
.svy-nps { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.svy-nps-side { flex: 1 1 200px; min-inline-size: 0; display: grid; gap: 6px; }
.svy-nps-split { display: flex; block-size: 14px; border-radius: 999px; overflow: hidden; background: var(--panel-2); }
.svy-seg.d { background: var(--danger); }
.svy-seg.p { background: var(--warn); }
.svy-seg.g { background: var(--ok); }
.svy-nps-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.svy-nps-legend .d { color: var(--danger-ink); }
.svy-nps-legend .p { color: var(--warn-ink); }
.svy-nps-legend .g { color: var(--ok-ink); }
.svy-texts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-block-size: 360px; overflow-y: auto; }
.svy-texts li { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); }
.svy-text-a { overflow-wrap: anywhere; white-space: pre-wrap; }
.svy-responses { display: grid; gap: 10px; }
.svy-resp { padding: 12px; }
.svy-resp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-block-end: 8px; }
.svy-qa { display: grid; gap: 4px; margin: 0; }
.svy-qa dt { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.svy-qa dd { margin: 0 0 6px; overflow-wrap: anywhere; white-space: pre-wrap; }

/* ------------------------------------------------------------ answering inside the app */
.svy-ask { padding: 16px; margin-block-end: 12px; display: grid; gap: 8px; }
.svy-ask h4 { margin: 0; overflow-wrap: anywhere; }
.svy-picks { display: grid; gap: 6px; }
.svy-pick { display: flex; align-items: center; gap: 10px; min-block-size: 44px; padding-inline: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.svy-pick input { inline-size: 20px; block-size: 20px; }
.svy-scale-in { display: flex; flex-wrap: wrap; gap: 6px; }
.svy-num { min-inline-size: 44px; min-block-size: 44px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.svy-num.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.svy-scale-in.rating .svy-num { font-size: 22px; }
.svy-scale-in.rating .svy-num.on { background: var(--warn-soft); border-color: var(--warn); color: var(--warn-ink); }
.svy-err { color: var(--danger-ink); font-weight: 650; font-size: 14px; }
.svy-err:empty { display: none; }
@media (max-width: 720px) { .svy-bar { grid-template-columns: minmax(0, 1fr) auto; } .svy-bar .svy-track { grid-column: 1 / -1; grid-row: 2; } }