*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --red:       #C62828;
  --red-dark:  #B71C1C;
  --red-light: #FFCDD2;
  --red-pale:  #FFF5F5;
  --g900: #1A1A1A;
  --g800: #2E2E2E;
  --g700: #424242;
  --g600: #616161;
  --g400: #BDBDBD;
  --g200: #EEEEEE;
  --g100: #F5F5F5;
  --g50:  #FAFAFA;
  --white:#FFFFFF;
  --shadow: 0 2px 12px rgba(0,0,0,.10);
  --shadow-lg: 0 4px 24px rgba(0,0,0,.14);
}

body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--g100);color:var(--g900);min-height:100vh}

/* ── Header ── */
.header{background:linear-gradient(135deg,var(--g900) 0%,var(--g800) 60%,#3a0000 100%);color:#fff;padding:0;box-shadow:0 3px 20px rgba(0,0,0,.35)}
.header-inner{max-width:1280px;margin:0 auto;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:14px}
.brand-img{height:34px;width:auto;display:block}
.brand .brand-sub{padding-left:14px;border-left:1px solid rgba(255,255,255,.2)}
.brand-logo{width:42px;height:42px;background:var(--red);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;color:#fff;letter-spacing:-1px;flex-shrink:0}
.brand-name{font-size:20px;font-weight:900;letter-spacing:.5px}
.brand-sub{font-size:11px;color:rgba(255,255,255,.5);margin-top:2px;text-transform:uppercase;letter-spacing:1px}
.header-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer;border:1.5px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;transition:all .18s}
.header-btn:hover{background:rgba(255,255,255,.16)}

/* ── Page ── */
.page{max-width:1280px;margin:0 auto;padding:24px 20px}

/* ── Three-block layout ── */
.block-section{margin-bottom:28px}
.block-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.block-num{width:30px;height:30px;background:var(--g900);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;flex-shrink:0;line-height:1}
.block-title{font-size:15px;font-weight:800;color:var(--g800);letter-spacing:.3px}

/* ── Крок 1: дані клієнта ── */
.client-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:720px}
@media(max-width:640px){.client-grid{grid-template-columns:1fr}}

/* ── Крок 2: каталог зліва, кошторис справа ── */
.ns-grid{display:grid;grid-template-columns:530px 1fr;gap:20px;align-items:start}
@media(max-width:1000px){.ns-grid{grid-template-columns:1fr}}

.cat-top{display:flex;gap:10px;margin-bottom:10px}
.cat-top .ar-input{flex:1}
.cat-sort{display:flex;border:1.5px solid var(--g200);border-radius:8px;overflow:hidden;flex-shrink:0}
.cs-btn{padding:0 14px;border:none;background:var(--white);font-size:12px;font-weight:700;color:var(--g600);cursor:pointer;transition:all .15s;border-right:1.5px solid var(--g200)}
.cs-btn:last-child{border-right:none}
.cs-btn.active{background:var(--g900);color:#fff}
.cs-btn:hover:not(.active){background:var(--red-pale);color:var(--red)}

.prod-catalog{
  border:1.5px solid var(--g200);border-radius:10px;max-height:300px;overflow-y:auto;background:var(--white)
}
.cat-item{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 13px;cursor:pointer;border-bottom:1px solid var(--g100);transition:background .12s
}
.cat-item:last-child{border-bottom:none}
.cat-item:hover{background:var(--red-pale)}
.cat-item.selected{background:var(--red);color:#fff}
.cat-item.selected .ci-price{color:rgba(255,255,255,.75)}
.ci-name{font-size:13px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.ci-price{font-size:11px;color:var(--g400);white-space:nowrap;flex-shrink:0}

/* тригер каталогу — лише на телефоні */
.cat-trigger{display:none}
.cat-sheet-head{display:none}
.cat-group{
  padding:6px 13px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  color:var(--g600);background:var(--g100);position:sticky;top:0;border-bottom:1px solid var(--g200);z-index:2
}
.cat-empty{padding:18px;text-align:center;font-size:13px;color:var(--g400);font-style:italic}

.entry-panel{margin-top:14px;border-top:1.5px solid var(--g200);padding-top:14px}
.ep-selected{font-size:13px;color:var(--g400);margin-bottom:12px}
.ep-selected.has-sel{color:var(--g900)}
.ep-selected strong{color:var(--red)}

/* ── Візард: один крок на екран ── */
.wiz-step{display:none}
.wiz-step.active{display:block;animation:wizIn .25s ease}
@keyframes wizIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.wiz-steps{display:flex;align-items:center;gap:8px;margin-bottom:26px;flex-wrap:wrap}
.wiz-chip{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:24px;
  border:1.5px solid var(--g200);background:var(--white);font-size:13px;font-weight:700;
  color:var(--g600);cursor:pointer;transition:all .18s;white-space:nowrap
}
.wiz-chip .wc-num{
  width:22px;height:22px;border-radius:50%;background:var(--g200);color:var(--g700);
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;flex-shrink:0
}
.wiz-chip:hover:not(.active){border-color:var(--red);color:var(--red)}
.wiz-chip.active{background:var(--g900);border-color:var(--g900);color:#fff}
.wiz-chip.active .wc-num{background:var(--red);color:#fff}
.wiz-chip.done{border-color:var(--g400);color:var(--g800)}
.wiz-chip.done .wc-num{background:#2E7D32;color:#fff}
.wc-badge{font-size:11px;background:var(--red);color:#fff;border-radius:10px;padding:1px 8px}
.wiz-sep{flex:0 0 18px;height:1.5px;background:var(--g200)}
@media(max-width:760px){.wiz-sep{display:none}}

/* дії з прорахунком */
.quote-actions{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap}
.qa-btn{
  padding:8px 13px;border:1.5px solid var(--g200);background:var(--white);border-radius:8px;
  font-size:12px;font-weight:700;color:var(--g700);cursor:pointer;transition:all .15s;white-space:nowrap
}
.qa-btn:hover{border-color:var(--red);color:var(--red)}

/* модалка «Мої прорахунки» */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:20px
}
.modal{background:var(--white);border-radius:14px;box-shadow:var(--shadow-lg);width:100%;max-width:640px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--g200);font-weight:800;font-size:15px}
.modal-close{background:none;border:none;font-size:18px;color:var(--g400);cursor:pointer;padding:4px 8px;border-radius:6px}
.modal-close:hover{color:var(--red);background:var(--red-pale)}
.modal-body{overflow-y:auto;padding:8px 0}
.mq-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 20px;border-bottom:1px solid var(--g100)}
.mq-row:last-child{border-bottom:none}
.mq-row:hover{background:var(--g50)}
.mq-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.mq-info strong{font-size:14px}
.mq-sub{font-size:11px;color:var(--g400)}
.mq-actions{display:flex;gap:6px;flex-shrink:0}
.mq-status{font-size:10px;font-weight:800;border-radius:10px;padding:2px 9px;white-space:nowrap;width:fit-content}
.st-draft{background:#FFF3E0;color:#E65100;border:1px solid #FFCC80}
.st-done{background:#E8F5E9;color:#2E7D32;border:1px solid #A5D6A7}

.wiz-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px}
.wiz-back{
  padding:13px 26px;border:1.5px solid var(--g200);background:var(--white);border-radius:10px;
  font-size:14px;font-weight:700;color:var(--g700);cursor:pointer;transition:all .18s
}
.wiz-back:hover{border-color:var(--g400)}
.wiz-back.is-hidden{display:none}
.wiz-next{
  padding:13px 34px;background:var(--red);color:#fff;border:none;border-radius:10px;
  font-size:14px;font-weight:800;cursor:pointer;transition:all .18s;letter-spacing:.3px;
  margin-left:auto
}
.wiz-next:hover{background:var(--red-dark);transform:translateY(-1px);box-shadow:0 4px 16px rgba(198,40,40,.35)}

/* Block 2: delivery fields inline */
.b2-fields{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px}
.b2-fields>.fg{flex:1;min-width:190px;margin-bottom:0}
.b2-bottom{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:16px;border-top:1px solid var(--g200);margin-top:16px}
@media(max-width:600px){.b2-bottom{grid-template-columns:1fr}}

/* Block 3: hero left, breakdown right */
.b3-grid{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}
@media(max-width:860px){.b3-grid{grid-template-columns:1fr}}

/* ── Cards ── */
.card{background:var(--white);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.card-head{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--g200);font-weight:800;font-size:14px;color:var(--g800)}
.card-head .ch-icon{font-size:16px}
.card-body{padding:20px}

/* ── Form elements ── */
.fg{margin-bottom:16px}
.fg:last-child{margin-bottom:0}
.fg>label{display:block;font-size:11px;font-weight:700;color:var(--g600);text-transform:uppercase;letter-spacing:.6px;margin-bottom:7px}
.fg select,.fg input[type=number],.fg input[type=text]{
  width:100%;border:1.5px solid var(--g200);border-radius:8px;padding:10px 14px;
  font-size:14px;color:var(--g900);background:var(--g50);outline:none;transition:border-color .18s;
  -moz-appearance:textfield;appearance:textfield
}
.fg input::-webkit-outer-spin-button,.fg input::-webkit-inner-spin-button{-webkit-appearance:none}
.fg select:focus,.fg input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(198,40,40,.12)}
.hint,.fg .hint{font-size:11px;font-weight:400;color:var(--g400);margin-top:4px;line-height:1.5}

/* ── Add row (інвойс-стиль) ── */
.card-overflow{overflow:visible}
.entry-hint{font-size:12px;color:var(--g600);background:var(--g100);border-radius:7px;padding:8px 12px;margin-bottom:14px}
.add-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.ar-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ar-field>label{font-size:11px;font-weight:700;color:var(--g600);text-transform:uppercase;letter-spacing:.6px}
.ar-prod{flex:1 1 200px}
.ar-color{flex:1 1 150px}
.ar-qty{flex:0 0 auto}
.ar-input{
  width:100%;border:1.5px solid var(--g200);border-radius:8px;padding:10px 12px;
  font-size:14px;color:var(--g900);background:var(--g50);outline:none;transition:border-color .18s;height:42px
}
.ar-input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(198,40,40,.12)}
.ar-input:disabled{background:var(--g100);color:var(--g400)}
.add-row .ar-add{flex:0 0 auto;width:auto;height:42px;padding:0 18px;white-space:nowrap}

/* кольоровий кружечок біля назви кольору в кошторисі */
.cm-dot{width:15px;height:15px;border-radius:50%;flex-shrink:0;display:inline-block}
.row-dot{width:10px;height:10px;margin-right:5px;vertical-align:middle}

/* кількість зі степерами */
.qty-box{display:flex;align-items:stretch;border:2px solid var(--g200);border-radius:8px;overflow:hidden;height:42px;transition:border-color .18s}
.qty-box:focus-within{border-color:var(--red);box-shadow:0 0 0 3px rgba(198,40,40,.12)}
.qty-box input{width:78px;border:none;outline:none;text-align:center;font-size:16px;font-weight:800;color:var(--g900);background:transparent;-moz-appearance:textfield;appearance:textfield}
.qty-box input::-webkit-outer-spin-button,.qty-box input::-webkit-inner-spin-button{-webkit-appearance:none}
.qty-box input:disabled{color:var(--g400)}
.qty-unit{display:flex;align-items:center;padding:0 10px;font-size:12px;font-weight:700;color:var(--g600);background:var(--g100);border-left:1.5px solid var(--g200)}

/* мета-рядок: режим + живий підрахунок */
.add-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.live-calc{flex:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--g700);justify-content:flex-end}
.lc-hint{color:var(--g400);font-style:italic}
.lc-main{font-size:16px;color:var(--g900)}
.lc-main b{color:var(--red)}
.lc-chip{background:var(--g100);border:1px solid var(--g200);border-radius:6px;padding:3px 9px;font-weight:600;font-size:12px}
.lc-sub{color:var(--g400);font-size:11px}

/* ── Color chips ── */
.color-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.chip{padding:6px 13px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid var(--g200);background:var(--g50);color:var(--g700);transition:all .15s;white-space:nowrap;user-select:none}
.chip:hover{border-color:var(--red);color:var(--red);background:var(--red-pale)}
.chip.selected{background:var(--red);border-color:var(--red-dark);color:#fff}
.chip.chip-colormix{border-style:dashed}
.chip-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}

/* ── Big area input ── */
.area-step{
  flex-shrink:0;width:48px;border:none;background:var(--g100);color:var(--g700);
  font-size:24px;font-weight:700;cursor:pointer;line-height:1;transition:background .15s;user-select:none
}
.area-step:hover{background:var(--red-pale);color:var(--red)}
.area-step:first-child{border-right:1.5px solid var(--g200)}
.area-step:last-child{border-left:1.5px solid var(--g200)}
.area-wrap{display:flex;align-items:stretch;border:2px solid var(--g200);border-radius:10px;overflow:hidden;transition:border-color .18s}
.area-wrap:focus-within{border-color:var(--red);box-shadow:0 0 0 3px rgba(198,40,40,.12)}
.area-wrap input{flex:1;border:none;outline:none;padding:13px 16px;font-size:26px;font-weight:800;color:var(--g900);background:transparent;min-width:0}
.area-wrap input::placeholder{font-weight:400;color:var(--g400);font-size:20px}
.area-wrap .unit{padding:13px 16px;font-size:13px;font-weight:700;color:var(--g600);background:var(--g100);border-left:1.5px solid var(--g200)}

/* ── Product info bar ── */
.prod-info{background:var(--g100);border-radius:8px;padding:12px 14px;font-size:12px;color:var(--g700);margin-top:12px}
.prod-info strong{color:var(--g900)}
.prod-info-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:4px}
.pir{display:flex;align-items:center;gap:5px}
.pir-icon{font-size:13px}

/* ── Add button ── */
.btn-add{width:100%;padding:13px;background:var(--red);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:800;cursor:pointer;transition:all .18s;letter-spacing:.3px}
.btn-add:hover{background:var(--red-dark);transform:translateY(-1px);box-shadow:0 4px 16px rgba(198,40,40,.35)}
.btn-add:disabled{background:var(--g400);cursor:not-allowed;transform:none;box-shadow:none}

/* ── Estimate table ── */
.est-table{width:100%;border-collapse:collapse;font-size:13px}
.est-table th{background:var(--g900);color:#fff;padding:10px 14px;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.est-table th:last-child{text-align:right}
.est-table td{padding:11px 14px;border-bottom:1px solid var(--g200);vertical-align:top}
.est-table td:last-child{text-align:right;font-weight:700;color:var(--g900)}
.est-table tr:hover td{background:var(--red-pale)}
.est-table .td-sub{font-size:11px;color:var(--g400);margin-top:2px}
.est-table tfoot td{font-weight:800;border-top:2px solid var(--g900);padding:12px 14px;background:var(--g100)}
.est-table tfoot td:last-child{text-align:right;color:var(--red);font-size:16px}
.est-del{background:none;border:none;cursor:pointer;color:var(--g400);font-size:16px;padding:2px 6px;border-radius:4px;transition:all .15s}
.est-del:hover{color:var(--red);background:var(--red-pale)}

/* ── Inline-editable estimate cells ── */
.row-qty{
  width:74px;border:1.5px solid var(--g200);border-radius:6px;padding:5px 8px;
  font-size:13px;font-weight:700;color:var(--g900);background:var(--g50);outline:none;
  -moz-appearance:textfield;appearance:textfield
}
.row-qty::-webkit-outer-spin-button,.row-qty::-webkit-inner-spin-button{-webkit-appearance:none}
.row-qty:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(198,40,40,.12)}
.row-color{
  border:1.5px solid var(--g200);border-radius:6px;padding:3px 6px;
  font-size:11px;font-weight:600;color:var(--g700);background:var(--g50);outline:none;cursor:pointer;max-width:140px
}
.row-color:focus{border-color:var(--red)}
.qty-print,.color-print{display:none}

/* авто-рядок піддонів у кошторисі */
.est-pallets td{background:var(--g50);border-top:2px solid var(--g200)}
.est-pallets:hover td{background:var(--g100)}

/* колонка знижки в кошторисі */
.est-table th.th-disc{text-align:right;width:100px}
.est-table td.dcell{text-align:right;white-space:nowrap;width:100px;vertical-align:top}
.dc-wrap{display:inline-flex;align-items:center;gap:3px}
.row-disc{
  width:56px;border:1.5px solid var(--red-light);border-radius:6px;padding:5px 7px;text-align:right;
  font-size:13px;font-weight:700;color:var(--red-dark);background:var(--white);outline:none;
  -moz-appearance:textfield;appearance:textfield
}
.row-disc::-webkit-outer-spin-button,.row-disc::-webkit-inner-spin-button{-webkit-appearance:none}
.row-disc:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(198,40,40,.12)}
.dc-pct{font-size:12px;font-weight:700;color:var(--g600)}
.dc-amt{font-size:11px;font-weight:700;color:var(--red-dark);margin-top:3px}
.dn-zero{font-size:11px;color:var(--g400);font-style:italic}
.dn-cap{color:var(--g400);font-weight:400;font-size:10px;margin-top:2px}

/* рядок знижки в кошторисі */
.est-discount td{background:var(--red-pale)}
.est-discount td.neg{color:var(--red);font-weight:800}
.est-discount:hover td{background:var(--red-pale)}

/* поле знижки під таблицею кошторису */
.est-foot{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1.5px solid var(--g200);background:var(--g50)}
.est-foot label{font-size:11px;font-weight:700;color:var(--g600);text-transform:uppercase;letter-spacing:.6px}
.disc-box{display:flex;align-items:stretch;border:1.5px solid var(--g200);border-radius:8px;overflow:hidden;background:var(--white)}
.disc-box:focus-within{border-color:var(--red);box-shadow:0 0 0 3px rgba(198,40,40,.12)}
.disc-box input{width:64px;border:none;outline:none;text-align:center;font-size:14px;font-weight:800;color:var(--g900);padding:7px 4px;-moz-appearance:textfield;appearance:textfield}
.disc-box input::-webkit-outer-spin-button,.disc-box input::-webkit-inner-spin-button{-webkit-appearance:none}
.disc-unit{display:flex;align-items:center;padding:0 9px;font-size:12px;font-weight:700;color:var(--g600);background:var(--g100);border-left:1.5px solid var(--g200)}

.empty-est{text-align:center;padding:40px 20px;color:var(--g400)}
.empty-est .ei{font-size:40px;margin-bottom:8px}
.empty-est p{font-size:13px}

/* ── Delivery ── */
.seg-ctrl{display:flex;border:2px solid var(--g200);border-radius:10px;overflow:hidden}
.seg-btn{flex:1;padding:11px 6px;background:var(--white);border:none;cursor:pointer;font-size:13px;font-weight:700;color:var(--g600);transition:all .18s;text-align:center;border-right:1.5px solid var(--g200)}
.seg-btn:last-child{border-right:none}
.seg-btn.active{background:var(--red);color:#fff}
.seg-btn:hover:not(.active){background:var(--red-pale);color:var(--red)}

.toggle-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1.5px solid var(--g200);border-radius:8px;background:var(--g50);cursor:pointer;user-select:none}
.toggle-row input[type=checkbox]{width:17px;height:17px;accent-color:var(--red);cursor:pointer}
.toggle-row span{font-size:14px;font-weight:600;color:var(--g900)}
.toggle-row .tprice{margin-left:auto;font-size:12px;color:var(--g600);font-weight:600}

.sec-hidden{display:none}

/* ── Locality search (truck distance) ── */
.loc-search{position:relative}
.loc-search>input{
  width:100%;border:1.5px solid var(--g200);border-radius:8px;padding:10px 14px;
  font-size:14px;color:var(--g900);background:var(--g50);outline:none;transition:border-color .18s
}
.loc-search>input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(198,40,40,.12)}
.loc-suggest{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;
  background:var(--white);border:1.5px solid var(--g200);border-radius:8px;
  box-shadow:var(--shadow-lg);overflow:hidden;display:none;max-height:260px;overflow-y:auto
}
.loc-item{padding:10px 14px;font-size:13px;color:var(--g800);cursor:pointer;border-bottom:1px solid var(--g100)}
.loc-item:last-child{border-bottom:none}
.loc-item:hover{background:var(--red-pale);color:var(--red-dark)}
.loc-item-note{cursor:default;color:var(--g400);font-style:italic}
.loc-item-note:hover{background:none;color:var(--g400)}
.loc-status{font-size:12px;margin-top:7px;font-weight:600;min-height:1px}
.loc-status.ok{color:#2E7D32}
.loc-status.err{color:var(--red)}

/* ── Pallets (read-only) ── */
.pallets-readonly{
  border:1.5px solid var(--g200);border-radius:8px;padding:10px 14px;
  font-size:15px;font-weight:800;color:var(--g900);background:var(--g100)
}

/* ── Summary (block 3) ── */
.summ-hero{background:linear-gradient(135deg,var(--g900) 0%,#2a0000 50%,var(--red-dark) 100%);color:#fff;border-radius:14px;padding:26px 28px;box-shadow:var(--shadow-lg)}
.sh-label{font-size:11px;text-transform:uppercase;letter-spacing:.8px;opacity:.6;margin-bottom:6px}
.sh-amount{font-size:44px;font-weight:900;letter-spacing:-1px;line-height:1}
.sh-sub{font-size:13px;opacity:.55;margin-top:8px}

.trucks-badge{display:flex;align-items:center;gap:8px;background:var(--red-pale);border:1.5px solid var(--red-light);border-radius:8px;padding:9px 14px;font-size:12px;color:var(--red-dark);font-weight:700;margin-top:12px}

.summ-breakdown{background:var(--white);border:1.5px solid var(--g200);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.sb-row{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid var(--g200)}
.sb-row:last-child{border-bottom:none}
.sb-row.sb-total{background:var(--g100);font-weight:800}
.sb-row.sb-disc{color:var(--red)}
.sb-label{font-size:13px;color:var(--g900)}
.sb-sub{font-size:11px;color:var(--g400);margin-top:2px}
.sb-amount{font-size:14px;font-weight:700;color:var(--g900);white-space:nowrap}
.sb-amount.neg{color:var(--red)}
.sb-section-head{padding:8px 18px;background:var(--g100);border-bottom:1px solid var(--g200)}
.sb-section-head span{font-size:10px;font-weight:700;color:var(--g600);text-transform:uppercase;letter-spacing:.5px}

/* ── Placeholder ── */
.result-placeholder{text-align:center;padding:40px 20px;color:var(--g400);background:var(--white);border-radius:14px;box-shadow:var(--shadow)}
.result-placeholder .rpi{font-size:44px;margin-bottom:10px}
.result-placeholder p{font-size:13px}

/* ── Toast ── */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:var(--g900);color:#fff;padding:12px 20px;border-radius:10px;
  font-size:13px;font-weight:700;box-shadow:var(--shadow-lg);z-index:100;
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;max-width:90vw
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Header actions / user ── */
.header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.user-badge{font-size:13px;font-weight:700;color:rgba(255,255,255,.85);white-space:nowrap}

/* ── Login page ── */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,var(--g900) 0%,var(--g800) 60%,#3a0000 100%)}
.login-card{background:var(--white);border-radius:16px;box-shadow:var(--shadow-lg);padding:36px 32px;width:100%;max-width:380px;margin:20px}
.login-logo{display:block;height:44px;width:auto;margin:0 auto 8px}
.login-title{text-align:center;font-size:13px;font-weight:700;color:var(--g600);text-transform:uppercase;letter-spacing:1px;margin-bottom:26px}
.login-card .fg input{width:100%;border:1.5px solid var(--g200);border-radius:8px;padding:11px 14px;font-size:14px;background:var(--g50);outline:none}
.login-card .fg input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(198,40,40,.12)}
.login-error{color:var(--red);font-size:13px;font-weight:600;min-height:20px;margin-bottom:8px}

/* ── Admin panel ── */
.admin-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.adm-tab{padding:11px 20px;border:1.5px solid var(--g200);background:var(--white);border-radius:9px;font-size:13px;font-weight:700;color:var(--g600);cursor:pointer;transition:all .15s}
.adm-tab:hover:not(.active){border-color:var(--red);color:var(--red)}
.adm-tab.active{background:var(--g900);border-color:var(--g900);color:#fff}
.adm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.adm-subhead{font-size:12px;font-weight:800;color:var(--g800);text-transform:uppercase;letter-spacing:.5px;margin:22px 0 12px;padding-top:16px;border-top:1px solid var(--g200)}
.adm-save{width:auto;padding:12px 28px;margin-top:20px}
.adm-mini{padding:5px 10px;border:1.5px solid var(--g200);background:var(--g50);border-radius:6px;font-size:11px;font-weight:700;color:var(--g700);cursor:pointer;margin-left:4px}
.adm-mini:hover{border-color:var(--red);color:var(--red)}
.user-off td{opacity:.45}
.user-disc{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--g600)}
.user-disc input{
  width:58px;border:1.5px solid var(--g200);border-radius:6px;padding:5px 7px;text-align:right;
  font-size:13px;font-weight:700;color:var(--g900);background:var(--g50);outline:none;
  -moz-appearance:textfield;appearance:textfield
}
.user-disc input::-webkit-outer-spin-button,.user-disc input::-webkit-inner-spin-button{-webkit-appearance:none}
.user-disc input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(198,40,40,.12)}

/* прорахунки користувачів */
.q-row{cursor:pointer}
.q-detail td{background:var(--g50)!important;padding:14px 18px}
.qd-wrap{display:flex;flex-direction:column;gap:10px}
.qd-items{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--g200);border-radius:8px;overflow:hidden}
.qd-items th{background:var(--g200);color:var(--g700);padding:6px 10px;font-size:10px;text-transform:uppercase;letter-spacing:.4px;text-align:left}
.qd-items td{padding:6px 10px;font-size:12px;border-bottom:1px solid var(--g100)}
.qd-items tr:last-child td{border-bottom:none}
.qd-meta{font-size:12px;color:var(--g700);line-height:1.7}

/* ціни продукції */
.price-group{border:1.5px solid var(--g200);border-radius:10px;margin-bottom:10px;overflow:hidden}
.price-group summary{padding:12px 16px;font-size:13px;font-weight:800;color:var(--g800);cursor:pointer;background:var(--g100);user-select:none}
.pg-count{font-size:11px;background:var(--g200);border-radius:10px;padding:1px 8px;margin-left:6px;color:var(--g600)}
.price-prod{padding:12px 16px;border-top:1px solid var(--g100)}
.pp-name{font-size:13px;font-weight:800;margin-bottom:8px}
.pp-colors{display:flex;flex-wrap:wrap;gap:8px}
.pp-color{display:flex;align-items:center;gap:6px;border:1.5px solid var(--g200);border-radius:7px;padding:5px 8px;background:var(--g50)}
.pp-color span{font-size:11px;font-weight:600;color:var(--g700);white-space:nowrap}
.pp-color input{width:70px;border:none;background:transparent;font-size:13px;font-weight:700;text-align:right;outline:none;-moz-appearance:textfield;appearance:textfield}
.pp-color input::-webkit-outer-spin-button,.pp-color input::-webkit-inner-spin-button{-webkit-appearance:none}
.pp-color .pp-md{width:52px;border-left:1.5px solid var(--g200);padding-left:6px;color:var(--red);font-size:12px}
.pp-color .pp-md::placeholder{color:var(--g400);font-weight:400}

/* ═══════════════════════════════════════════════════════════
   МОБІЛЬНА ВЕРСІЯ
   ═══════════════════════════════════════════════════════════ */

/* Планшети та вужче */
@media(max-width:900px){
  .page{padding:16px 16px 96px}          /* місце під липку навігацію */
  .page-admin{padding-bottom:24px}       /* в адмінці липкої навігації немає */
  .header-inner{padding:12px 16px;gap:10px;flex-wrap:wrap}
  .brand-img{height:28px}
  .brand .brand-sub{padding-left:10px;font-size:10px}
  .header-actions{gap:7px}
  .header-btn{padding:7px 11px;font-size:11px}

  .card{border-radius:12px}
  .card-body{padding:14px}
  .card-head{padding:12px 14px;font-size:13px}

  .block-header{margin-bottom:11px}
  .block-num{width:26px;height:26px;font-size:13px}
  .block-title{font-size:14px}
}

/* Телефони */
@media(max-width:640px){

  /* сторінка ніколи не їде вбік */
  html{overflow-x:hidden}
  body{overflow-x:hidden;position:relative}
  /* запобіжник: жоден блок не ширший за екран */
  .page,.card,.card-body,.add-row,.cat-top,.est-foot,.wiz-steps,.quote-actions{max-width:100%}
  .qty-box,.cat-trigger,.ar-input,.btn-add{max-width:100%}
  .toast{left:16px;right:16px}


  /* ── Шапка: усе в один компактний ряд ── */
  .header-inner{padding:10px 16px;flex-wrap:nowrap;gap:8px}
  .brand{flex:0 0 auto;gap:0}
  .brand-img{height:24px}
  .brand .brand-sub{display:none}
  .user-badge{display:none}          /* імʼя видно на десктопі; на телефоні економимо місце */
  .header-actions{flex:1;justify-content:flex-end;gap:6px;flex-wrap:nowrap}
  .header-btn{padding:8px 11px;font-size:11px;min-height:36px;flex:0 0 auto}

  /* ── Кроки: активний із назвою, решта — номерами ── */
  .wiz-steps{gap:6px;margin-bottom:16px;flex-wrap:wrap;justify-content:flex-start}
  .wiz-chip{padding:8px 12px;font-size:12px;flex:0 1 auto;min-width:0;overflow:hidden}
  .wiz-chip .wc-num{width:20px;height:20px;font-size:11px}
  .wiz-chip .wc-txt{display:none}                    /* ховаємо назви… */
  .wiz-chip.active .wc-txt{display:inline;white-space:nowrap}  /* …крім активного кроку */
  .wiz-chip.active{flex:1 1 auto}

  /* дії з прорахунком — сітка 2×2 під кроками */
  .quote-actions{
    order:2;flex:1 1 100%;margin:10px 0 0;display:grid;
    grid-template-columns:1fr 1fr;gap:7px
  }
  .qa-btn{padding:11px 8px;font-size:12px;text-align:center;min-height:42px}

  /* ── Форми: 16px проти автозуму iOS ── */
  .ar-input,
  .fg input[type=text],.fg input[type=number],.fg input[type=password],.fg input[type=tel],.fg select,
  .loc-search>input,.qty-box input,.row-qty,.row-disc,.disc-box input,
  .login-card .fg input,.pp-color input,.user-disc input{font-size:16px!important}

  /* ── Сторінка входу ── */
  .login-body{align-items:flex-start;padding:0}
  .login-card{
    margin:0;padding:28px 20px calc(28px + env(safe-area-inset-bottom));
    border-radius:0;min-height:100vh;max-width:none;
    display:flex;flex-direction:column;justify-content:center;box-shadow:none
  }
  .login-logo{height:38px;margin-bottom:6px}
  .login-title{margin-bottom:22px}
  .login-card .fg input{padding:13px 14px;min-height:48px}
  .login-card .btn-add{min-height:50px;font-size:15px}

  .client-grid{gap:12px}
  .ar-input{height:46px;padding:11px 12px}

  /* ── Каталог: тригер + повноекранний аркуш ── */
  .cat-trigger{
    display:flex;align-items:center;gap:10px;width:100%;min-height:50px;
    padding:12px 14px;border:1.5px solid var(--g200);border-radius:10px;
    background:var(--g50);cursor:pointer;text-align:left;font:inherit
  }
  .cat-trigger:active{background:var(--red-pale);border-color:var(--red)}
  .cgt-icon{font-size:16px;flex-shrink:0}
  .cgt-txt{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--g400);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cgt-txt.has-sel{color:var(--g900)}
  .cgt-arrow{color:var(--g400);font-size:12px;flex-shrink:0}

  /* аркуш */
  .cat-panel{
    position:fixed;inset:0;z-index:210;background:var(--white);
    display:none;flex-direction:column
  }
  .cat-panel.open{display:flex;animation:sheetUp .22s ease}
  @keyframes sheetUp{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}
  body.sheet-open{overflow:hidden}

  .cat-sheet-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 16px calc(14px);border-bottom:1px solid var(--g200);
    font-size:16px;font-weight:800;flex-shrink:0;
    padding-top:calc(14px + env(safe-area-inset-top))
  }
  .cat-panel .cat-top{flex-wrap:wrap;gap:8px;margin:0;padding:12px 14px;flex-shrink:0}
  .cat-panel .cat-top .ar-input{flex:1 1 100%;height:48px}
  .cat-sort{width:100%}
  .cs-btn{flex:1;padding:12px 8px;font-size:14px;min-height:44px}

  /* список на всю висоту аркуша */
  .cat-panel .prod-catalog{
    flex:1;max-height:none;border:none;border-radius:0;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:env(safe-area-inset-bottom)
  }
  .cat-item{padding:15px 16px;min-height:56px;border-bottom:1px solid var(--g100)}
  .ci-name{font-size:15px}
  .ci-price{font-size:13px;font-weight:600}
  .cat-group{padding:9px 16px;font-size:11px}
  .cat-item.selected{background:var(--red);color:#fff}

  /* ── Рядок додавання: колонкою ── */
  .ep-selected{display:none}   /* назву товару вже показано на тригері каталогу */
  .entry-panel{margin-top:12px;padding-top:12px}
  .add-row{gap:10px}
  .ar-field{flex:1 1 100%!important}
  .ar-qty{flex:1 1 100%!important}
  .qty-box{height:50px;width:100%}
  .qty-box input{flex:1;width:auto;font-size:18px!important}
  .area-step{width:56px;font-size:26px}
  .qty-unit{padding:0 14px;font-size:13px}
  .add-row .ar-add{width:100%;height:50px;font-size:15px}
  .add-meta{margin-top:12px}
  .live-calc{justify-content:flex-start;font-size:14px}

  /* кольори — більші чипси */
  .color-chips{gap:8px}
  .chip{padding:9px 14px;font-size:13px;min-height:40px;display:inline-flex;align-items:center}
  .chip-dot{width:10px;height:10px}

  /* ── Кошторис: таблиця → картки ── */
  /* width:auto — інакше 100% + зовнішні відступи дають горизонтальне переповнення */
  .est-table,.est-table tbody,.est-table tfoot,.est-table tr,.est-table td{display:block;width:auto}
  .est-table thead{display:none}

  .est-table tr.est-item{
    border:1.5px solid var(--g200);border-radius:10px;margin:10px 14px;
    padding:11px 13px;background:var(--white);position:relative
  }
  .est-table tr.est-item:hover td{background:none}
  .est-table tr.est-item td{border:none;padding:5px 0;text-align:left!important}

  .est-table td.td-name{padding-right:34px;border-bottom:1px solid var(--g100)!important;padding-bottom:8px}
  .est-table td.td-name strong{font-size:15px}
  .mob-del{
    position:absolute;top:8px;right:8px;font-size:18px;
    width:32px;height:32px;display:flex;align-items:center;justify-content:center
  }
  .desk-del{display:none}

  /* підпис колонки перед значенням */
  .est-table td[data-label]{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px
  }
  .est-table td[data-label]::before{
    content:attr(data-label);font-size:11px;font-weight:700;color:var(--g600);
    text-transform:uppercase;letter-spacing:.5px;flex-shrink:0
  }
  .est-table td[data-label] .td-sub{width:100%;text-align:right;margin-top:0}
  .est-table td.dcell{width:auto;text-align:right!important}
  .row-qty{width:86px;padding:10px;text-align:center}
  .row-disc{width:74px;padding:10px}
  .dc-wrap{gap:4px}
  .dc-amt{margin:0 0 0 auto}
  .dn-cap{width:100%;text-align:right;margin-top:0}

  /* підсумкові рядки */
  .est-table tr.est-discount,.est-table tr.est-pallets,.est-table tfoot tr{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:11px 14px;border-top:1px solid var(--g200)
  }
  .est-table tr.est-discount td,.est-table tr.est-pallets td,.est-table tfoot td{
    border:none;padding:0;width:auto;display:block
  }
  .est-table tfoot tr{background:var(--g100);font-size:15px}
  .est-table tfoot td:last-child{font-size:18px}
  .est-foot{flex-wrap:wrap;gap:8px 10px;padding:12px 14px}
  .est-foot label{width:100%}
  .est-foot .hint:last-child{width:100%;margin-left:0!important}

  /* ── Логістика ── */
  .b2-fields{gap:12px}
  .b2-fields>.fg{flex:1 1 100%;min-width:0}
  .seg-ctrl{flex-direction:column}
  .seg-btn{border-right:none;border-bottom:1.5px solid var(--g200);padding:14px 8px;font-size:14px}
  .seg-btn:last-child{border-bottom:none}
  .loc-suggest{max-height:200px;z-index:95}   /* вище липкої навігації (90), інакше ховається під нею */
  .loc-item{padding:13px 14px;font-size:14px;min-height:46px;display:flex;align-items:center}
  .toggle-row{padding:13px 14px;min-height:48px}

  /* ── Підсумок ── */
  .summ-hero{padding:20px}
  .sh-amount{font-size:34px}
  .sb-row{padding:11px 14px}
  .sb-label{font-size:12px}
  .sb-amount{font-size:13px}

  /* ── Липка навігація візарда ── */
  .wiz-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:90;margin:0;gap:10px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.97);border-top:1.5px solid var(--g200);
    box-shadow:0 -3px 16px rgba(0,0,0,.08);backdrop-filter:blur(6px)
  }
  .wiz-back{flex:0 0 auto;min-width:0;padding:14px 16px;font-size:14px}
  .wiz-next{flex:1;min-width:0;padding:14px 16px;font-size:15px;margin-left:0}

  /* ── Модалка «Мої прорахунки» на весь екран ── */
  .modal-overlay{padding:0;align-items:flex-end}
  .modal{max-width:100%;max-height:92vh;border-radius:14px 14px 0 0}
  .modal-head{padding:14px 16px}
  .modal-close{font-size:24px;padding:6px 10px}
  .mq-row{flex-direction:column;align-items:stretch;gap:9px;padding:13px 16px}
  .mq-actions{width:100%}
  .mq-actions .adm-mini{flex:1;padding:11px;font-size:13px;margin:0}

  .toast{
    left:16px;right:16px;max-width:none;text-align:center;transform:translateY(20px);
    bottom:calc(88px + env(safe-area-inset-bottom))   /* над липкою навігацією */
  }
  .toast.show{transform:translateY(0)}
}

/* Дуже вузькі екрани */
@media(max-width:380px){
  .qa-btn{font-size:11px;padding:10px 5px}
  .header-btn{font-size:10px;padding:8px 5px}
  .sh-amount{font-size:29px}
  .est-table tr.est-item{margin:8px}
}

/* ── Адмінка на мобільному ── */
@media(max-width:900px){
  .admin-tabs{
    gap:6px;margin:0 -12px 16px;padding:0 12px 6px;
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none
  }
  .admin-tabs::-webkit-scrollbar{display:none}
  .adm-tab{flex-shrink:0;padding:10px 14px;font-size:12px}

  /* широкі таблиці — горизонтальна прокрутка замість зламаної верстки */
  #quotesBody,#usersBody{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #quotesBody .est-table,#usersBody .est-table{min-width:700px}

  .adm-grid{grid-template-columns:1fr 1fr;gap:12px}
  .adm-save{width:100%}
  .pp-colors{gap:7px}
  .pp-color{flex:1 1 calc(50% - 4px)}
  .adm-mini{padding:8px 11px;font-size:12px}
  .qd-items{min-width:560px}
  .q-detail td{padding:12px}
  .qd-wrap{overflow-x:auto}
}
@media(max-width:520px){
  .adm-grid{grid-template-columns:1fr}
  .admin-tabs{margin-bottom:14px}
  .pp-color{flex:1 1 100%}
  .admin-page-pad{padding-bottom:20px}
}

/* Друк документа A4 виконується в ізольованому iframe (див. buildPrintHTML у app.js),
   тож окремих @media print стилів тут не потрібно. */


/* ── Позначки розбіжності в адмінці (сервер перерахував інакше) ── */
.q-warn{color:#E65100;font-weight:900;cursor:help}
.qd-warn{margin-top:10px;padding:8px 10px;border-radius:8px;background:#FFF3E0;
  border:1px solid #FFCC02;color:#8a4b00;font-size:11px;line-height:1.5}

/* ── Незаповнене обовʼязкове поле ── */
.field-error{border-color:#C62828 !important;background:#FFF5F5 !important;
  box-shadow:0 0 0 3px rgba(198,40,40,.12) !important}
.field-error::placeholder{color:#C62828;opacity:.55}