/* שאלון אפיון מרכזיה – orders.voiptech.co.il */

:root {
  --bg: #f4f6fb;
  --panel: #ffffff;
  --card: #f9fafc;
  --line: #d9dfeb;
  --text: #1d2433;
  --muted: #667089;
  --brand: #1f6fe5;
  --brand-ink: #ffffff;
  --brand-soft: #e6effd;
  --warn-bg: #fff4e5;
  --warn-line: #f0b264;
  --ok-bg: #e9f8ef;
  --ok-line: #6cc68f;
  --red: #c62828;
  --orange: #e46c0a;
  --input: #f3f5f9;
  --shadow: 0 1px 2px rgba(20, 30, 60, .06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12161f;
    --panel: #1a202c;
    --card: #1f2633;
    --line: #313a4b;
    --text: #e7ebf3;
    --muted: #9aa5ba;
    --brand: #4b8df0;
    --brand-soft: #22324d;
    --warn-bg: #3a2c17;
    --warn-line: #a8722f;
    --ok-bg: #173323;
    --ok-line: #3f8f5f;
    --red: #ff7a7a;
    --orange: #f5a25a;
    --input: #252d3b;
  }
}
:root[data-theme="dark"] {
  --bg: #12161f; --panel: #1a202c; --card: #1f2633; --line: #313a4b; --text: #e7ebf3; --muted: #9aa5ba;
  --brand: #4b8df0; --brand-soft: #22324d; --warn-bg: #3a2c17; --warn-line: #a8722f; --ok-bg: #173323;
  --ok-line: #3f8f5f; --red: #ff7a7a; --orange: #f5a25a; --input: #252d3b;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 "Heebo", "Segoe UI", Arial, sans-serif;
}
a { color: var(--brand); }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 19px; margin: 0 0 12px; }
h3 { font-size: 16px; margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
[dir="ltr"], .ltr { direction: ltr; text-align: right; unicode-bidi: plaintext; }

/* ── brand header ───────────────────────────── */
.brand { text-align: center; padding: 18px 16px 6px; }
.brand-logo { height: 54px; max-width: 80%; background: #fff; border-radius: 10px; padding: 6px 10px; border: 1px solid var(--line); }
.brand-slogan { font-weight: 700; margin-top: 8px; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 8px 16px 48px; }
.head { background: var(--panel); border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; padding: 16px 18px 12px; }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 0 0 12px 12px; padding: 18px; box-shadow: var(--shadow); }
.wrap > .panel:only-child, .panel.solo { border-radius: 12px; }
.step-title { font-size: 21px; }
h2.sub { font-size: 16px; margin: 22px 0 2px; }
h2.sub + .muted { margin-top: 0; }

/* ── step bar ───────────────────────────── */
.steps { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: thin; }
.stepb {
  white-space: nowrap; border: 1px solid var(--line); background: var(--panel); color: var(--text);
  padding: 5px 12px; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer;
}
.stepb.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

.savest { font-size: 13px; color: var(--muted); }
.savest.ok { color: #2e8b57; }
.savest.err { color: var(--red); font-weight: 700; }

/* ── cards & grid ───────────────────────────── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 12px 0; }
.card h3 { margin-bottom: 4px; }
.card-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.card-acts { display: flex; gap: 6px; flex-shrink: 0; }
.card.lock { background: var(--brand-soft); }
.card.lock div { margin: 2px 0; }
.card.drop { outline: 2px dashed var(--brand); }
.handle { cursor: grab; color: var(--muted); user-select: none; padding: 0 2px; }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.wide { grid-column: 1 / -1; }
.fld { min-width: 0; }
.lbl { font-size: 13px; color: var(--muted); margin-bottom: 3px; display: flex; align-items: center; gap: 4px; }
.subh { font-weight: 700; margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.queue .subh { color: var(--orange); }

input[type=text], input[type=email], input[type=password], input[type=time], input[type=number], select, textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--input);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-height: 40px;
}
textarea { resize: vertical; min-height: 70px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
input[readonly], .fld.ro input { color: var(--muted); }
input:disabled, select:disabled, textarea:disabled { opacity: .7; cursor: not-allowed; }
input[type=time] { width: auto; min-width: 120px; }

.fld.chk { display: flex; align-items: center; gap: 6px; background: var(--input); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.fld.chk label { display: flex; align-items: center; gap: 6px; cursor: pointer; flex: 1; }
input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--brand); margin: 0; }

/* help icon + bubble */
.hq {
  width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid var(--brand); background: var(--brand-soft);
  color: var(--brand); font: 700 12px/1 Arial, sans-serif; cursor: pointer; padding: 0; flex-shrink: 0;
}
.bubble {
  position: absolute; z-index: 50; max-width: 300px; background: var(--panel); color: var(--text);
  border: 1.5px solid var(--brand); border-radius: 10px; padding: 8px 12px; font-size: 13px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}

/* ── buttons ───────────────────────────── */
.btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 14px; color: var(--text); background: var(--panel); text-decoration: none;
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 14px; cursor: pointer; min-height: 38px;
}
.btn:hover { border-color: var(--brand); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.danger { color: var(--red); border-color: var(--red); }
.btn.sm { padding: 2px 10px; min-height: 28px; font-size: 13px; border-radius: 999px; }
.btn.x { border-radius: 8px; min-width: 34px; min-height: 40px; }
.btn:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.filebtn input { display: none; }
.linkbtn { background: none; border: 0; color: var(--brand); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }

.nav { display: flex; justify-content: space-between; margin-top: 22px; gap: 8px; }

/* ── notes, toast ───────────────────────────── */
.note { border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; margin: 10px 0; font-size: 14px; }
.note.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.note.ok { background: var(--ok-bg); border-color: var(--ok-line); }
.note.info { background: var(--brand-soft); border-color: var(--brand); }
.note.red { color: var(--red); border: 0; padding: 4px 0; }
.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 60;
  background: #24324a; color: #fff; padding: 10px 18px; border-radius: 10px; max-width: min(560px, 92vw);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25); font-size: 14px;
}
.toast.warn { background: #8a4b08; }

/* ── ring group picker ───────────────────────────── */
.picker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.plist { border: 1px solid var(--line); border-radius: 8px; min-height: 110px; max-height: 260px; overflow-y: auto; padding: 6px; background: var(--panel); display: flex; flex-direction: column; gap: 5px; }
.pitem { text-align: right; font: inherit; font-size: 14px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; cursor: pointer; }
.pitem.on { background: var(--brand-soft); border-color: transparent; }
.pitem:hover { border-color: var(--brand); }
.prow { display: flex; gap: 6px; margin-top: 6px; }

/* ── time profiles ───────────────────────────── */
.days { display: flex; flex-direction: column; }
.day { display: flex; align-items: center; gap: 14px; padding: 6px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.day:first-child { border-top: 0; }
.dn { width: 48px; font-weight: 500; }
.cl { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 14px; width: 70px; }
.tm { display: flex; align-items: center; gap: 6px; }

/* ── IVR ───────────────────────────── */
.krow { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1.6fr) auto; gap: 6px; margin: 6px 0; }
.flow { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 8px; }
.flow svg { display: block; margin-inline-start: auto; font-family: "Heebo", Arial, sans-serif; }
.fl-edge { fill: none; stroke: #6c7a96; stroke-width: 1.4; }
.fl-edge.dash { stroke-dasharray: 5 4; }
.fl-badge { fill: var(--brand); }
.fl-badge-t { fill: #fff; font-size: 11px; font-weight: 700; text-anchor: middle; }
.fl-menu { fill: var(--brand-soft); stroke: var(--brand); stroke-width: 1.4; }
.fl-dest { fill: var(--panel); stroke: var(--line); stroke-width: 1.4; }
.fl-ref { fill: var(--brand-soft); stroke: var(--brand); stroke-width: 1.4; stroke-dasharray: 5 4; }
.fl-title { font-size: 12px; font-weight: 700; text-anchor: middle; fill: var(--text); direction: rtl; }
.fl-line { font-size: 11px; text-anchor: middle; fill: var(--text); direction: rtl; }

/* ── queues ───────────────────────────── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.tab { font: inherit; font-size: 14px; background: var(--input); color: var(--text); border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; padding: 6px 14px; cursor: pointer; }
.tab.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.queue .fld select[data-agent] { margin-top: 6px; }

/* ── summary ───────────────────────────── */
.sumtxt { font-family: Consolas, "Courier New", monospace; font-size: 13px; min-height: 260px; }

/* ── admin ───────────────────────────── */
.admin-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { background: var(--brand-soft); font-weight: 700; white-space: nowrap; }
.badge { display: inline-block; font-size: 12px; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.badge.open { background: var(--brand-soft); border-color: var(--brand); }
.badge.submitted { background: var(--ok-bg); border-color: var(--ok-line); }
.badge.closed { background: var(--input); color: var(--muted); }
.badge.expired { background: var(--warn-bg); border-color: var(--warn-line); }
.linkbox { display: flex; gap: 6px; }
.linkbox input { direction: ltr; text-align: left; font-family: Consolas, monospace; font-size: 13px; }
.form-row { margin: 10px 0; }
.form-row label.lbl { display: block; }
.inline { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.login { max-width: 380px; margin: 40px auto; }
.err { color: var(--red); }

/* ── small screens ───────────────────────────── */
@media (max-width: 760px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .krow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .krow input[type=text]:first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .wrap { padding: 6px 10px 40px; }
  .panel, .head { padding: 14px 12px; }
  .grid, .grid2, .picker { grid-template-columns: minmax(0, 1fr); }
  .card-h { flex-wrap: wrap; }
  .day { gap: 8px; }
}