/* ════════════════════════════════════════════════════════════
   BakuDoors — Premium UI  v4.0
   Industrial precision meets Azerbaijani craftsmanship
   ════════════════════════════════════════════════════════════ */

/* ─── TOKENS ─── */
:root {
  --bg:        #f0f2f8;
  --bg2:       #e4e8f2;
  --surface:   #ffffff;
  --surface2:  #f5f7fc;
  --surface3:  #eaecf6;
  --border:    rgba(20,40,110,.08);
  --border2:   rgba(20,40,110,.16);
  --primary:   #1a3fb0;
  --primary2:  #1535a0;
  --primary-l: rgba(26,63,176,.1);
  --accent:    #0254a4;
  --accent2:   #0270c8;
  --success:   #047a52;
  --success2:  #0ea470;
  --warning:   #9a4508;
  --warning2:  #ea8b0a;
  --danger:    #b5112e;
  --gold:      #c4920a;
  --gold2:     #f0b429;
  --text:      #08162f;
  --text2:     #364a70;
  --text3:     #7a8fba;
  --radius:    14px;
  --radius-sm: 9px;
  --radius-xs: 6px;
  --shadow:    0 4px 28px rgba(15,30,90,.10);
  --shadow-sm: 0 2px 10px rgba(15,30,90,.06);
  --shadow-lg: 0 14px 60px rgba(15,30,90,.14);
  --trans:     all .2s cubic-bezier(.4,0,.2,1);
  --glow:      0 0 0 3px rgba(26,63,176,.16);
  --header-h:  60px;
}

[data-theme="dark"] {
  --bg:        #06090f;
  --bg2:       #0a0e1c;
  --surface:   #0d1224;
  --surface2:  #111829;
  --surface3:  #161f38;
  --border:    rgba(90,130,255,.07);
  --border2:   rgba(90,130,255,.15);
  --primary:   #4a78ff;
  --primary2:  #3860f0;
  --primary-l: rgba(74,120,255,.12);
  --accent:    #36b8f8;
  --accent2:   #0ca4ea;
  --success:   #0cce88;
  --success2:  #30d498;
  --warning:   #f5c200;
  --warning2:  #f5a623;
  --danger:    #fa7090;
  --gold:      #f0c040;
  --gold2:     #ffe080;
  --text:      #e6ecff;
  --text2:     #7a95cc;
  --text3:     #384e72;
  --shadow:    0 4px 28px rgba(0,0,0,.55);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.40);
  --shadow-lg: 0 14px 60px rgba(0,0,0,.65);
  --glow:      0 0 0 3px rgba(74,120,255,.22);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  line-height:1.55;
  background-image:
    radial-gradient(ellipse 80% 50% at 8% -8%,   rgba(26,63,176,.06) 0%,transparent 55%),
    radial-gradient(ellipse 50% 40% at 94% 22%,  rgba(2,84,164,.045) 0%,transparent 50%),
    radial-gradient(ellipse 35% 25% at 50% 108%, rgba(26,63,176,.03) 0%,transparent 55%);
}
[data-theme="dark"] body {
  background-image:
    radial-gradient(ellipse 80% 50% at 8% -8%,   rgba(74,120,255,.08) 0%,transparent 55%),
    radial-gradient(ellipse 50% 40% at 94% 22%,  rgba(54,184,248,.05) 0%,transparent 50%),
    radial-gradient(ellipse 35% 25% at 50% 108%, rgba(74,120,255,.04) 0%,transparent 55%);
}
input,select,textarea,button { font-family:inherit; }
a { color:var(--primary); text-decoration:none; }

/* ─── HEADER ─── */
.site-header {
  position:sticky; top:0; z-index:300;
  background:rgba(240,242,248,.94);
  backdrop-filter:blur(22px) saturate(1.4);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 0 var(--border),var(--shadow-sm);
}
[data-theme="dark"] .site-header {
  background:rgba(6,9,15,.93);
  border-bottom-color:rgba(90,130,255,.1);
}
.header-inner {
  max-width:1600px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h);
}
.logo { display:flex; align-items:center; gap:11px; cursor:pointer; user-select:none; }
.logo-icon {
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(145deg,var(--primary),var(--accent));
  display:flex; align-items:center; justify-content:center;
  font-size:17px; color:#fff; flex-shrink:0;
  box-shadow:0 3px 16px rgba(26,63,176,.38),inset 0 1px 0 rgba(255,255,255,.2);
}
.logo-name {
  font-weight:900; font-size:18px; letter-spacing:-.8px;
  line-height:1; color:var(--text);
  background:linear-gradient(135deg,var(--text),var(--primary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
[data-theme="dark"] .logo-name {
  background:linear-gradient(135deg,#fff,var(--primary));
  -webkit-background-clip:text; background-clip:text;
}
.logo-sub  { font-size:9.5px; color:var(--text3); margin-top:3px; letter-spacing:.6px; font-weight:600; text-transform:uppercase; }
.header-nav { display:flex; align-items:center; gap:7px; }
.btn-admin {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--surface2); border:1px solid var(--border2);
  color:var(--text2); padding:6px 15px; border-radius:8px;
  font-size:11.5px; font-weight:700; transition:var(--trans); letter-spacing:.2px;
}
.btn-admin:hover { background:var(--primary-l); color:var(--primary); border-color:rgba(26,63,176,.3); }
.btn-theme-toggle {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface2); border:1px solid var(--border2);
  color:var(--text2); padding:6px 13px; border-radius:8px;
  font-size:11.5px; font-weight:700; cursor:pointer; transition:var(--trans);
}
.btn-theme-toggle:hover { background:var(--surface3); color:var(--text); border-color:var(--border2); }
.btn-theme-toggle .fa-sun  { color:#f0b429; }
.btn-theme-toggle .fa-moon { color:#7c3aed; }

/* ─── LAYOUT ─── */
.main-layout {
  max-width:1600px; margin:0 auto; padding:20px 24px;
  display:grid; grid-template-columns:1fr 430px; gap:22px; align-items:start;
}
@media(max-width:1180px) {
  .main-layout { grid-template-columns:1fr; }
  .result-panel { order:-1; }
}

/* ─── CARDS ─── */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); margin-bottom:16px; overflow:hidden;
  box-shadow:var(--shadow-sm); transition:box-shadow .25s, border-color .25s;
}
.card:hover { border-color:var(--border2); box-shadow:var(--shadow); }
.card-header {
  display:flex; align-items:center; gap:12px;
  padding:14px 20px 13px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,rgba(26,63,176,.03),transparent);
}
.card-icon {
  width:34px; height:34px; border-radius:8px;
  background:linear-gradient(145deg,rgba(26,63,176,.14),rgba(2,84,164,.08));
  border:1px solid rgba(26,63,176,.16);
  display:flex; align-items:center; justify-content:center;
  color:var(--primary); font-size:13.5px; flex-shrink:0;
  box-shadow:0 1px 4px rgba(26,63,176,.1);
}
.card-header h2 { font-size:13px; font-weight:800; margin-bottom:2px; letter-spacing:-.1px; }
.card-header p  { font-size:10.5px; color:var(--text3); font-weight:500; }
.card-body { padding:18px 20px; }

/* ─── FORMS ─── */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
@media(max-width:600px) { .form-row { grid-template-columns:1fr; } }
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:15px; }
.form-group:last-child { margin-bottom:0; }
label { font-size:10.5px; font-weight:800; color:var(--text2); text-transform:uppercase; letter-spacing:.7px; }
.req { color:var(--danger); margin-left:1px; }

input[type=text], input[type=tel],
input[type=number], select, textarea {
  background:var(--surface2); border:1.5px solid var(--border);
  border-radius:var(--radius-sm); color:var(--text);
  padding:9px 13px; font-size:13.5px; transition:var(--trans);
  width:100%; appearance:none; -webkit-appearance:none;
}
[data-theme="dark"] input[type=text],[data-theme="dark"] input[type=tel],
[data-theme="dark"] input[type=number],[data-theme="dark"] select,
[data-theme="dark"] textarea { background:rgba(255,255,255,.04); }
input::placeholder, textarea::placeholder { color:var(--text3); }
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--primary);
  background:rgba(26,63,176,.05);
  box-shadow:var(--glow);
}
select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234a5568'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  padding-right:32px; cursor:pointer;
}
select option { background:var(--surface); color:var(--text); }
[data-theme="dark"] select option { background:#111829; }
textarea { resize:vertical; min-height:62px; }

.input-with-unit { position:relative; }
.input-with-unit input { padding-right:36px; }
.unit {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:11px; font-weight:900; color:var(--primary); pointer-events:none;
}

/* ─── DIMENSION INFO BOX (etek/boru izahat) ─── */
.dim-info-box {
  display:grid; grid-template-columns:1fr 1fr;
  gap:8px; margin-top:14px; margin-bottom:0;
}
.dib-cell {
  background:var(--surface2); border:1.5px solid var(--border);
  border-radius:var(--radius-sm); padding:10px 12px;
  display:flex; align-items:center; gap:10px;
  transition:var(--trans);
}
.dib-cell.active {
  border-color:rgba(26,63,176,.28);
  background:linear-gradient(135deg,rgba(26,63,176,.07),rgba(2,84,164,.03));
}
.dib-icon {
  width:30px; height:30px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; flex-shrink:0;
}
.dib-cell:nth-child(1) .dib-icon { background:rgba(26,63,176,.12); color:var(--primary); }
.dib-cell:nth-child(2) .dib-icon { background:rgba(196,146,10,.12); color:var(--gold); }
.dib-cell:nth-child(3) .dib-icon { background:rgba(4,122,82,.12); color:var(--success); }
.dib-cell:nth-child(4) .dib-icon { background:rgba(107,70,193,.12); color:#7c3aed; }
.dib-label { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; color:var(--text3); margin-bottom:3px; }
.dib-value { font-size:14px; font-weight:900; color:var(--text); font-variant-numeric:tabular-nums; line-height:1; }
.dib-unit  { font-size:10px; color:var(--text3); font-weight:600; margin-top:2px; }

/* ─── KASSA SELECTOR ─── */
.kassa-options { display:flex; gap:9px; }
.kassa-label {
  flex:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:3px;
  padding:12px 10px;
  background:var(--surface2); border:2px solid var(--border);
  border-radius:var(--radius-sm); transition:var(--trans); user-select:none; text-align:center;
  position:relative; overflow:hidden;
}
.kassa-label::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(26,63,176,.0),rgba(26,63,176,.0));
  transition:var(--trans);
}
.kassa-label input { display:none; }
.kassa-label .kn { font-size:21px; font-weight:900; line-height:1; color:var(--text); font-variant-numeric:tabular-nums; transition:var(--trans); }
.kassa-label .kl { font-size:9.5px; color:var(--text3); font-weight:700; letter-spacing:.4px; }
.kassa-label.selected {
  border-color:var(--primary);
  background:linear-gradient(145deg,rgba(26,63,176,.12),rgba(2,84,164,.05));
  box-shadow:0 0 0 3px rgba(26,63,176,.12),var(--shadow-sm);
}
.kassa-label.selected .kn { color:var(--primary); }
.kassa-label.selected .kl { color:rgba(26,63,176,.7); }
.kassa-label:hover:not(.selected) { border-color:rgba(26,63,176,.28); background:var(--surface3); }

/* ─── COLOR SWATCHES ─── */
.swatch-group { margin-bottom:14px; }
.swatch-group:last-child { margin-bottom:0; }
.swatch-group-label {
  font-size:9px; font-weight:800; text-transform:uppercase;
  letter-spacing:1.1px; color:var(--text3); margin-bottom:9px;
  display:flex; align-items:center; gap:6px;
}
.swatch-group-label::after { content:''; flex:1; height:1px; background:var(--border); }
.swatches-row { display:flex; flex-wrap:wrap; gap:10px; }
.swatch-item { cursor:pointer; text-align:center; }
.swatch-item input { display:none; }
.swatch-circle {
  width:36px; height:36px; border-radius:50%;
  border:3px solid transparent; margin:0 auto 4px;
  transition:var(--trans); box-shadow:0 2px 8px rgba(0,0,0,.35); position:relative;
}
.swatch-item.selected .swatch-circle {
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(26,63,176,.24),0 2px 8px rgba(0,0,0,.35);
  transform:scale(1.14);
}
.swatch-item:hover .swatch-circle { transform:scale(1.09); }
.swatch-check {
  position:absolute; inset:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(26,63,176,.5); font-size:11.5px; color:#fff;
}
.swatch-name { font-size:9px; color:var(--text2); max-width:46px; line-height:1.2; font-weight:700; }

/* ─── MODULES ─── */
.modules-grid { display:flex; flex-direction:column; gap:7px; }
.module-card {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 13px; background:var(--surface2); border:1.5px solid var(--border);
  border-radius:var(--radius-sm); transition:var(--trans); border-left:3px solid transparent;
}
.module-card.active {
  border-left-color:var(--primary);
  background:linear-gradient(90deg,rgba(26,63,176,.07),rgba(26,63,176,.02));
  border-color:rgba(26,63,176,.18);
}
.module-info h4 { font-size:12px; font-weight:700; margin-bottom:2px; }
.module-info p  { font-size:10.5px; color:var(--text2); }
.module-price   { font-size:10.5px; font-weight:800; color:var(--success); margin-top:3px; display:block; }

/* ─── TOGGLE ─── */
.toggle { position:relative; width:42px; height:22px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; position:absolute; }
.toggle-slider {
  position:absolute; inset:0;
  background:rgba(0,0,0,.15); border-radius:22px; cursor:pointer; transition:var(--trans);
}
[data-theme="dark"] .toggle-slider { background:rgba(255,255,255,.1); }
.toggle-slider::before {
  content:''; position:absolute; width:16px; height:16px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:var(--trans); box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.toggle input:checked + .toggle-slider { background:var(--primary); }
.toggle input:checked + .toggle-slider::before { transform:translateX(20px); }

/* ════════════════════════════════════════════════════════════
   RESULT PANEL
   ════════════════════════════════════════════════════════════ */
.result-panel { position:sticky; top:calc(var(--header-h) + 12px); }

.result-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden; margin-bottom:16px;
  box-shadow:var(--shadow);
}

/* Locked */
.result-locked { padding:44px 24px; text-align:center; }
.lock-icon {
  width:60px; height:60px; border-radius:50%;
  background:var(--surface2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:var(--text3); margin:0 auto 14px;
}
.result-locked h3 { font-size:14px; margin-bottom:6px; color:var(--text2); font-weight:700; }
.result-locked p  { font-size:12px; color:var(--text3); line-height:1.7; }

/* Result header */
.result-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px 12px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,rgba(26,63,176,.055),rgba(2,84,164,.02));
}
.result-header h2 { font-size:13px; font-weight:800; display:flex; align-items:center; gap:7px; }
.result-header h2 i { color:var(--primary); }
.dim-badge {
  background:rgba(26,63,176,.1); border:1px solid rgba(26,63,176,.2);
  color:var(--primary); padding:4px 11px; border-radius:20px;
  font-size:10.5px; font-weight:800; font-variant-numeric:tabular-nums;
}

/* ─── PRICE SUMMARY BAR ─── */
.price-summary-bar {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  border-bottom:1px solid var(--border);
}
.psb-cell {
  padding:10px 13px; text-align:center;
  border-right:1px solid var(--border);
  transition:var(--trans);
}
.psb-cell:last-child { border-right:none; }
.psb-label { font-size:8.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--text3); font-weight:800; margin-bottom:3px; }
.psb-value { font-size:15px; font-weight:900; color:var(--text); font-variant-numeric:tabular-nums; }
.psb-value.green  { color:var(--success); }
.psb-value.blue   { color:var(--primary); }
.psb-value.orange { color:var(--warning2); }

/* ─── DONUT CHART ─── */
.cost-donut-wrap {
  padding:13px 18px 10px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:16px;
}
.donut-svg-container { position:relative; flex-shrink:0; }
.donut-center-label {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  pointer-events:none;
}
.donut-center-pct   { font-size:14px; font-weight:900; color:var(--text); line-height:1; }
.donut-center-sub   { font-size:8.5px; color:var(--text3); margin-top:2px; font-weight:700; }
.donut-legend { flex:1; display:flex; flex-direction:column; gap:5px; }
.dl-item { display:flex; align-items:center; gap:7px; font-size:10.5px; }
.dl-dot  { width:8px; height:8px; border-radius:3px; flex-shrink:0; }
.dl-name { color:var(--text2); flex:1; font-weight:500; }
.dl-pct  { font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; }

/* ─── RESULT LINES ─── */
.result-lines { padding:6px 18px 2px; display:flex; flex-direction:column; }
.result-line {
  display:flex; justify-content:space-between; align-items:baseline;
  padding:6px 0; border-bottom:1px solid var(--border); font-size:11.5px;
}
.result-line:last-child { border-bottom:none; }
.rl-label { color:var(--text2); flex:1; padding-right:8px; }
.rl-value { font-weight:800; font-variant-numeric:tabular-nums; color:var(--text); white-space:nowrap; }
.rl-section {
  font-size:9px; text-transform:uppercase; letter-spacing:1.1px;
  color:var(--text3); padding:9px 0 2px; border-bottom:none; font-weight:900;
}

/* Progress bar per line */
.result-line-bar {
  width:100%; height:3px; background:var(--border);
  border-radius:2px; margin-top:2px; overflow:hidden;
}
.result-line-bar-fill {
  height:100%; border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--accent2));
  transition:width .65s cubic-bezier(.4,0,.2,1);
}

/* ─── DISCOUNT ─── */
.discount-section { padding:7px 18px 2px; }
.discount-controls {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px 11px;
  background:rgba(4,122,82,.05); border:1px solid rgba(4,122,82,.16);
  border-radius:var(--radius-sm); margin-bottom:5px;
}
.discount-label-text { font-size:10.5px; font-weight:800; color:var(--success); white-space:nowrap; }
.discount-select, .discount-input {
  flex:1; min-width:80px; padding:6px 10px;
  background:var(--surface2); border:1px solid var(--border2);
  border-radius:var(--radius-xs); color:var(--text); font-size:11.5px;
}
.discount-input { max-width:88px; }
.discount-line .rl-value { color:var(--success) !important; }

/* ─── TOTAL ─── */
.result-total {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px;
  background:linear-gradient(145deg,rgba(26,63,176,.16),rgba(2,84,164,.07));
  border-top:1px solid rgba(26,63,176,.16);
}
.result-total span:first-child { font-size:11px; color:var(--text2); font-weight:700; }
#totalAmount {
  font-size:28px; font-weight:900; color:var(--text);
  font-variant-numeric:tabular-nums; letter-spacing:-.5px;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
[data-theme="dark"] #totalAmount { color:#fff; text-shadow:0 0 28px rgba(74,120,255,.4); }

/* ─── ACTIONS ─── */
.result-actions {
  display:grid; grid-template-columns:2fr 1fr 1fr;
  gap:8px; padding:13px 18px;
  border-top:1px solid var(--border);
}
.result-actions button {
  padding:10px 6px; border:none; border-radius:var(--radius-sm);
  font-size:11.5px; font-weight:800; cursor:pointer; transition:var(--trans);
  display:flex; align-items:center; justify-content:center; gap:6px;
  letter-spacing:.2px;
}
.btn-save {
  background:linear-gradient(145deg,var(--primary),var(--accent));
  color:#fff; box-shadow:0 3px 14px rgba(26,63,176,.35);
}
.btn-save:hover { box-shadow:0 5px 20px rgba(26,63,176,.5); transform:translateY(-1px); }
.btn-pdf {
  background:rgba(244,63,94,.09); border:1px solid rgba(244,63,94,.22); color:#f43f5e;
}
.btn-pdf:hover { background:rgba(244,63,94,.18); transform:translateY(-1px); }
.btn-wa {
  background:rgba(37,211,102,.09); border:1px solid rgba(37,211,102,.22); color:#22c55e;
}
.btn-wa:hover { background:rgba(37,211,102,.18); transform:translateY(-1px); }

/* ─── MATERIAL ANALYSIS ─── */
.material-analysis {
  padding:13px 18px;
  border-top:1px solid var(--border);
  background:var(--surface2);
}
.ma-header {
  display:flex; align-items:center; gap:7px;
  font-size:9.5px; font-weight:900; text-transform:uppercase;
  letter-spacing:.8px; color:var(--text3); margin-bottom:11px;
}
.ma-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:5px 0; border-bottom:1px solid var(--border); font-size:11px;
}
.ma-row:last-child { border-bottom:none; }
.ma-label { color:var(--text2); font-weight:500; }
.ma-value          { font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; }
.ma-value.warn     { color:var(--warning2); }
.ma-value.good     { color:var(--success);  }
.ma-value.info     { color:var(--primary);  }

/* ─── DİMENSION DETAIL ROWS (etek/boru) ─── */
.dim-detail-wrap {
  margin:10px 0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.dim-detail-header {
  padding:7px 12px; background:rgba(26,63,176,.06);
  font-size:9.5px; font-weight:900; text-transform:uppercase;
  letter-spacing:.8px; color:var(--primary); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:6px;
}
.dim-detail-row {
  display:grid; grid-template-columns:1fr auto auto auto;
  align-items:center; gap:8px;
  padding:7px 12px; border-bottom:1px solid var(--border);
  font-size:11px;
}
.dim-detail-row:last-child { border-bottom:none; }
.ddr-name { font-weight:700; color:var(--text); }
.ddr-formula { color:var(--text3); font-size:10px; font-family:'Inter',monospace; }
.ddr-result { font-weight:900; color:var(--primary); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ddr-badge {
  font-size:8.5px; font-weight:800; padding:2px 7px; border-radius:10px;
  background:rgba(26,63,176,.1); color:var(--primary); white-space:nowrap;
}
.ddr-badge.gold   { background:rgba(196,146,10,.1); color:var(--gold); }
.ddr-badge.green  { background:rgba(4,122,82,.1); color:var(--success); }
.ddr-badge.purple { background:rgba(124,58,237,.1); color:#7c3aed; }

/* ─── CUTTING PLAN ─── */
.cutting-plan {
  margin-top:10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.cp-header {
  padding:8px 12px; background:rgba(26,63,176,.07);
  font-size:9.5px; font-weight:900; text-transform:uppercase;
  letter-spacing:.8px; color:var(--primary); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:6px;
}
.cp-item {
  padding:8px 12px; border-bottom:1px solid var(--border);
}
.cp-item:last-child { border-bottom:none; }
.cp-item-label {
  display:flex; justify-content:space-between; margin-bottom:5px;
  font-size:10.5px;
}
.cp-item-name  { font-weight:800; color:var(--text); }
.cp-item-strat {
  font-size:9px; font-weight:800; padding:1px 7px; border-radius:10px;
}
.strat-exact    { background:rgba(4,122,82,.12);   color:var(--success); }
.strat-minimal  { background:rgba(4,122,82,.12);   color:var(--success); }
.strat-optimal  { background:rgba(234,139,10,.12); color:var(--warning2); }
.strat-multi    { background:rgba(239,68,68,.12);  color:var(--danger); }
.strat-nodata   { background:rgba(100,116,139,.1); color:var(--text3); }
.cp-bar-track {
  height:8px; background:var(--border); border-radius:4px; overflow:hidden; position:relative;
}
.cp-bar-used {
  height:100%; border-radius:4px;
  background:linear-gradient(90deg,var(--primary),var(--accent2));
  display:flex; align-items:center; justify-content:flex-end; padding-right:3px;
  font-size:7px; color:#fff; font-weight:900;
  transition:width .7s cubic-bezier(.4,0,.2,1);
}
.cp-bar-waste {
  height:100%; position:absolute; top:0;
  background:rgba(234,139,10,.38); border-radius:0 4px 4px 0;
}
.cp-meta { display:flex; gap:10px; margin-top:5px; font-size:9.5px; color:var(--text3); flex-wrap:wrap; }
.cp-meta span { display:flex; align-items:center; gap:3px; font-weight:500; }
.cp-meta .good { color:var(--success); font-weight:700; }
.cp-meta .warn { color:var(--warning2); font-weight:700; }

/* ─── OPTIMAL SUGGESTION ─── */
.optimal-bar {
  display:flex; align-items:flex-start; gap:9px;
  background:rgba(4,122,82,.06); border:1px solid rgba(4,122,82,.18);
  border-radius:var(--radius-sm); padding:10px 13px; margin-top:9px; font-size:11px;
}
.optimal-bar.same {
  background:rgba(26,63,176,.06); border-color:rgba(26,63,176,.18);
}
.optimal-icon { font-size:15px; flex-shrink:0; margin-top:1px; }
.optimal-text strong { display:block; font-weight:800; color:var(--text); font-size:11.5px; margin-bottom:2px; }
.optimal-text span   { color:var(--text2); line-height:1.5; }
.optimal-save        { font-weight:900; color:var(--success); }

/* ─── EFFICIENCY GAUGE ─── */
.efficiency-row {
  display:flex; align-items:center; gap:8px; margin-top:4px;
}
.eff-bar-track {
  flex:1; height:5px; background:var(--border); border-radius:3px; overflow:hidden;
}
.eff-bar-fill {
  height:100%; border-radius:3px;
  transition:width .65s cubic-bezier(.4,0,.2,1);
}
.eff-good  { background:linear-gradient(90deg,var(--success),var(--success2)); }
.eff-mid   { background:linear-gradient(90deg,var(--warning2),#fcd34d); }
.eff-low   { background:linear-gradient(90deg,var(--danger),#fb7185); }
.eff-label { font-size:10px; font-weight:900; min-width:32px; text-align:right; font-variant-numeric:tabular-nums; }
.eff-good-text { color:var(--success); }
.eff-mid-text  { color:var(--warning2); }
.eff-low-text  { color:var(--danger); }

/* ─── RECENT ORDERS ─── */
.recent-card {}
.order-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 4px; border-bottom:1px solid var(--border); font-size:11.5px; cursor:pointer;
  transition:var(--trans); border-radius:var(--radius-xs);
}
.order-item:last-child { border-bottom:none; }
.order-item:hover { background:var(--surface2); padding-left:8px; }
.order-name  { font-weight:700; margin-bottom:2px; font-size:12px; }
.order-meta  { color:var(--text2); font-size:10.5px; }
.order-total { font-weight:900; color:var(--success); white-space:nowrap; font-size:13px; }

/* ─── TOAST ─── */
.toast {
  position:fixed; bottom:22px; right:22px; z-index:9999;
  padding:11px 17px; border-radius:10px; font-size:12px; font-weight:700;
  background:var(--surface); border:1px solid var(--border2);
  box-shadow:var(--shadow-lg);
  transform:translateY(80px) scale(.95); opacity:0;
  transition:all .4s cubic-bezier(.34,1.56,.64,1); pointer-events:none;
  display:flex; align-items:center; gap:8px; max-width:320px;
}
.toast.show { transform:translateY(0) scale(1); opacity:1; }
.toast.success { border-color:var(--success); color:var(--success); }
.toast.error   { border-color:var(--danger);  color:var(--danger);  }
.toast.info    { border-color:var(--primary); color:var(--primary); }

/* ─── ADD DOOR ─── */
.btn-add-door {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:11px 18px; margin:0 0 14px;
  background:rgba(26,63,176,.06); border:1.5px dashed rgba(26,63,176,.28);
  color:var(--primary); border-radius:var(--radius); font-size:12.5px; font-weight:700;
  cursor:pointer; transition:var(--trans);
}
.btn-add-door:hover { background:rgba(26,63,176,.12); border-color:var(--primary); }
.door-extra-card  { border-left:3px solid var(--primary); }
.door-extra-card .card-header { justify-content:space-between; }
.btn-remove-door {
  background:rgba(244,63,94,.09); border:1px solid rgba(244,63,94,.2);
  color:#f43f5e; padding:5px 9px; border-radius:var(--radius-xs);
  cursor:pointer; font-size:11.5px; transition:var(--trans); flex-shrink:0;
}
.btn-remove-door:hover { background:rgba(244,63,94,.2); }
.door-select {
  width:100%; padding:9px 13px; background:var(--surface2);
  border:1.5px solid var(--border2); border-radius:var(--radius-sm);
  color:var(--text); font-size:13px; cursor:pointer; transition:var(--trans);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234a5568'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:32px;
}
.door-select:focus { outline:none; border-color:var(--primary); box-shadow:var(--glow); }

/* ─── PRICE ANIMATION ─── */
@keyframes priceFlash {
  0%   { opacity:.4; transform:scale(.97); }
  50%  { opacity:1;  transform:scale(1.04); }
  100% { opacity:1;  transform:scale(1); }
}
.price-updated { animation:priceFlash .45s ease-out; }

/* ─── INSTALL STATUS ─── */
.install-status-row {
  display:flex; align-items:center; gap:6px;
  font-size:10.5px; padding:7px 0 2px;
  border-top:1px solid var(--border); margin-top:4px; font-weight:700;
}
.install-on  { color:var(--success); }
.install-off { color:var(--text3); }

/* ─── MISC ─── */
.empty-note { padding:20px; text-align:center; color:var(--text3); font-size:12px; }
.status-quick { display:flex; gap:5px; flex-wrap:wrap; }
.status-btn {
  padding:3px 9px; border-radius:5px; font-size:10px; font-weight:800;
  cursor:pointer; border:none; opacity:.75; transition:opacity .15s;
}
.status-btn:hover { opacity:1; }
.status-btn.new         { background:rgba(59,130,246,.2);  color:#3b82f6; }
.status-btn.contacted   { background:rgba(245,158,11,.2);  color:#f59e0b; }
.status-btn.production  { background:rgba(139,92,246,.2);  color:#a78bfa; }
.status-btn.completed   { background:rgba(14,164,112,.2);  color:var(--success); }
.status-btn.cancelled   { background:rgba(244,63,94,.2);   color:#f43f5e; }
.btn-wa-notify {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 9px; border-radius:5px; font-size:10.5px; font-weight:700;
  background:rgba(37,211,102,.14); border:1px solid rgba(37,211,102,.28);
  color:#22c55e; cursor:pointer; text-decoration:none; transition:var(--trans);
}
.btn-wa-notify:hover { background:rgba(37,211,102,.28); color:#22c55e; }

@media(max-width:768px) {
  .main-layout { padding:12px; gap:12px; }
  .card-header, .card-body { padding:12px 14px; }
  .result-panel { position:static; }
  .result-actions { grid-template-columns:2fr 1fr 1fr; }
  #totalAmount { font-size:24px; }
  .dim-info-box { grid-template-columns:1fr 1fr; }
}