/* ---------- Fonts: IBM Plex Sans Arabic (OFL) ---------- */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:700;src:url(fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:700;src:url(fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Base ---------- */
:root{--ink:#182d3c;--navy:#112633;--teal:#087e79;--teal-dark:#066c68;--line:#dce4e9;--muted:#5c707c;--amber:#9a6b1f;font-family:'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif;color:var(--ink);background:#f2f5f7;font-size:16px;line-height:1.6}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
button,input,textarea{font:inherit}
button,.file-button{cursor:pointer;border:1px solid var(--line);border-radius:7px;background:#fff;color:inherit;padding:8px 14px;font-size:.875rem}
button:hover,.file-button:hover{background:#eaf4f3}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,input:focus-visible,textarea:focus-visible,.file-button:focus-within{outline:3px solid #24bdb3;outline-offset:2px}
input{color:var(--ink)}
input[type=number],input[data-num]{direction:ltr}
p{margin:8px 0;color:var(--muted)}
h1{font-size:1.9rem;line-height:1.4;margin:6px 0;font-weight:700}
h2{font-size:1.05rem;margin:0;font-weight:700}
h2 span{color:var(--teal);font-size:.8rem;margin-left:9px;background:#e7f5f2;padding:4px 7px;border-radius:4px;font-weight:600}

/* ---------- Header ---------- */
header{background:var(--navy);color:#fff;padding:16px 4%;display:flex;align-items:center;gap:24px}
.brand{display:flex;gap:12px;align-items:center}
.brand .mark{width:38px;height:38px;flex-shrink:0}
.brand b{font-size:1.2rem;letter-spacing:.5px;font-weight:700}
.brand small{display:block;color:#b5c8d1;font-size:.8rem;line-height:1.3}
.direction{font-size:.875rem;border-right:1px solid #3c5362;padding-right:24px;color:#aedfd8}
#reset{margin-inline-start:auto;background:transparent;color:#fff;border-color:#49606d}
#reset:hover{background:#1c3a4b}

/* ---------- Layout ---------- */
main{max-width:1600px;margin:auto;padding:30px 4%}
.intro{margin-bottom:24px}
.intro p{max-width:62ch}
.workspace{display:grid;grid-template-columns:minmax(420px,.95fr) minmax(420px,1.05fr);gap:26px;align-items:start}
article,.output{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}
article{margin-bottom:18px}
.workspace>*,.material-panel>*,.inputs>article{min-width:0}
html,body{overflow-x:hidden}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hint{font-size:.8rem;margin:12px 0;color:#6a7a84}
.subtle{border:0;color:var(--teal);padding:5px 8px;background:transparent}

/* ---------- Material panel ---------- */
.material-panel{display:grid;grid-template-columns:1fr 1.35fr .95fr;gap:24px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;margin-bottom:24px;align-items:start}
.material-name label,.field-title{display:block;font-size:.95rem;font-weight:700;margin-bottom:9px}
.material-name input{font-size:1rem;width:100%;padding:11px;border:1px solid var(--line);border-radius:6px}
.material-panel small{font-size:.8rem;display:block;color:#6b7d86;line-height:1.7;margin-top:6px}
.material-photo-controls{display:flex;align-items:center;gap:12px}
.material-photo-controls img{width:86px;height:60px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.photo-secondary{display:flex;gap:8px;margin-top:3px}
.photo-secondary button{font-size:.8rem;padding:2px 7px}
#photoMessage{font-size:.8rem;margin:5px 0 0;color:var(--teal)}

/* Bookmatch: plain row, no frame */
.switches{display:flex;flex-direction:column;gap:6px}
.bookmatch-setting{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px}
.bookmatch-setting label{font-size:.95rem;cursor:pointer}
.bookmatch-setting [lang=en]{font-weight:400;color:#597a80;font-size:.8rem}
.toggle{flex-shrink:0;width:50px;height:28px;border:0;border-radius:20px;background:#a6b6be;padding:3px;direction:ltr;margin-top:2px}
.toggle span{display:block;width:22px;height:22px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #173e4c44;transition:transform .15s}
.toggle:hover{background:#8fa3ac}
.toggle[aria-checked=true]{background:var(--teal)}
.toggle[aria-checked=true]:hover{background:var(--teal-dark)}
.toggle[aria-checked=true] span{transform:translateX(22px)}

/* ---------- Input tables ---------- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.875rem;text-align:right}
th{color:#6c7c86;background:#f5f8fa;padding:10px 6px;font-weight:400;white-space:nowrap}
td{padding:7px 4px;border-bottom:1px solid #edf1f4}
td input{width:100%;min-width:64px;border:1px solid var(--line);border-radius:5px;padding:7px 6px;background:#fff;text-align:center;font-size:.875rem}
td input[data-key=label]{min-width:120px;text-align:start}
td:first-child{white-space:nowrap;color:#56707b;font-size:.8rem}
td .remove{border:0;padding:4px 6px;color:#92737b;background:transparent}
td .remove:hover{color:#b3261e;background:#fbeeee}
.check-cell{text-align:center}
.check-cell input[type=checkbox]{width:18px;height:18px;min-width:0;accent-color:var(--teal);cursor:pointer;vertical-align:middle}
.edge-btn{padding:4px 8px;font-size:.78rem;color:#7a8b94;background:#f5f8fa;border-color:var(--line);white-space:nowrap}
.edge-btn.on{color:var(--teal);background:#e7f5f2;border-color:#b9d8d3;font-weight:600}
.part-table{max-height:340px}
.part-table thead{position:sticky;top:0;z-index:1}
.add-row-footer{border-top:1px solid #e5edef;margin-top:8px;padding-top:10px}
.add-row-footer button{border:1px solid #c4dcd7;padding:5px 12px;font-size:.875rem}
.import-bar{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}
.file-button{background:#f0f8f7;color:var(--teal);border-color:#c3ded9}
.count{font-size:.8rem;color:var(--teal);padding-top:12px}
.settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:17px}
.settings label{font-size:.85rem;line-height:1.4}
.settings input{display:block;width:100%;border:1px solid var(--line);border-radius:6px;padding:10px;margin-top:7px}
.primary{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:700}
.primary:hover{background:var(--teal-dark)}
.primary span{float:left}
#calculate{width:100%;padding:13px}
.calc-box{position:sticky;bottom:0;background:linear-gradient(transparent,#f2f5f7 30%);padding:14px 0 6px;margin-top:-6px;z-index:2}
.settings.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.inline-check{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;margin-top:14px;cursor:pointer;color:var(--ink)}
.inline-check input,.check-setting input{width:18px;height:18px;accent-color:var(--teal);margin:0}
.check-setting{display:flex!important;flex-direction:column;justify-content:space-between}
.check-setting input{margin-top:auto!important;margin-bottom:12px!important;display:block}
.segmented{display:inline-flex;margin-top:14px;border:1px solid #c4dcd7;border-radius:8px;overflow:hidden}
.segmented button{border:0;border-radius:0;background:#fff;color:var(--muted);padding:7px 14px}
.segmented button[aria-pressed=true]{background:var(--teal);color:#fff;font-weight:600}
#skirtLengths{margin-top:12px}
#status{font-size:.875rem;margin-top:10px;color:#a44237;white-space:pre-line}

/* ---------- Output ---------- */
.badge{font-size:.75rem;background:#edf3f6;border-radius:20px;padding:4px 10px;color:#647b87}
.empty{text-align:center;padding:65px 26px 80px}
.empty p{max-width:320px;margin:10px auto;font-size:.95rem}
.empty small{color:#7a8b94;font-size:.8rem}
.slab-symbol{direction:ltr;width:190px;height:135px;margin:0 auto 24px;border:1px solid #96b9bc;background:repeating-linear-gradient(135deg,#f6fafa,#f6fafa 6px,#eaf2f3 6px,#eaf2f3 7px);padding:8px;display:grid;grid-template-columns:1.3fr 1fr;gap:6px;transform:rotate(-3deg)}
.slab-symbol i{background:#d9eeeb;border:1px solid #83b8b1}
.slab-symbol i:first-child{grid-row:span 2}
.result-material{margin-top:16px;font-size:.95rem;color:#55717e}
.result-material b{color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.stat{background:#eff6f6;padding:13px;border-radius:8px}
.stat b{display:block;font-size:1.5rem;color:#0c7771;direction:ltr;text-align:right}
.stat small{font-size:.8rem;color:#607784}
.result-actions{display:flex;gap:10px;margin:0 0 14px}
.result-actions .export{flex:1;padding:11px 14px;font-weight:600;background:#fff;border-color:#b9d8d3;color:var(--teal)}
.result-actions .export::before{content:'↓ ';}
.result-actions .export:hover{background:#eaf4f3}
.note{padding:12px;background:#f4f7fa;font-size:.8rem;border-radius:6px;margin:12px 0;color:#4f6570}
.warning{background:#fff3df;color:#8b5a1d}
.warning p{color:#8b5a1d}
.board{border:1px solid var(--line);border-radius:9px;padding:16px;margin:18px 0;break-inside:avoid}
.board h3{margin:0;font-size:1rem}
.board-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px}
.board-head small{color:#718691}
.board svg{width:100%;height:auto;display:block;max-height:410px}
.board table{font-size:.8rem;margin-top:14px}
.board th{padding:6px}
.board .direction-caption{font-size:.75rem;color:var(--teal);text-align:center}
.rot-mark{color:var(--teal);font-weight:700}
.remnants{margin-top:14px}
.remnants h4{margin:0;font-size:.85rem;color:var(--amber)}
.remnants th{background:#fbf3e3;color:#7d5a1d}
.remnants table{margin-top:6px}
.area-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:15px 0 10px;padding:14px;background:#f1f7f7;border:1px solid #d8e9e7;border-radius:8px}
.area-summary>div{min-width:0}
.area-summary span{display:block;color:#536e78;font-size:.875rem}
.area-summary b{display:block;color:#175a58;font-size:1.2rem;direction:ltr;text-align:right}
.area-summary small{font-size:.85rem;font-weight:400}
.area-total{background:#e6f2ef;border-color:#bad8d1}
.totals-panel{margin-top:24px;border-top:2px solid var(--teal);padding-top:16px;break-inside:avoid}
.totals-panel h3{margin:0;font-size:1.05rem}
.totals-panel p{font-size:.8rem;line-height:1.8}
.remnant-total{color:#7d5a1d!important;font-size:.875rem!important}
.skirt-row td{background:#f7f3fb}
.cost-panel{margin-top:22px;border:1px solid #d8e9e7;border-radius:10px;padding:16px;background:#fbfdfd;break-inside:avoid}
.cost-panel h3{margin:0 0 10px;font-size:1.05rem}
.cost-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.cost-grid>div{background:#f1f7f7;border-radius:8px;padding:10px 12px}
.cost-grid span{display:block;font-size:.8rem;color:#536e78}
.cost-grid b{font-size:1.15rem;color:#175a58}
.cost-grid small{font-size:.8rem;font-weight:400}
.cost-grid .cost-total{background:var(--teal)}
.cost-grid .cost-total span,.cost-grid .cost-total b{color:#fff}
.edge-dialog{max-width:420px}
#edgePreview{width:100%;max-width:300px;display:block;margin:14px auto}
.edge-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.edge-grid label{display:flex;align-items:center;gap:8px;font-size:.9rem;cursor:pointer}
.edge-grid input{width:18px;height:18px;accent-color:var(--teal)}
footer{color:#70818b;font-size:.8rem;margin-top:15px}

/* ---------- Dialog ---------- */
dialog{border:1px solid var(--line);border-radius:14px;max-width:650px;width:90%;padding:25px}
dialog::backdrop{background:#12263388}
dialog p{font-size:.875rem}
textarea{width:100%;border:1px solid var(--line);border-radius:6px;padding:12px;font-size:.95rem;line-height:1.8}
.dialog-actions{display:flex;gap:10px;margin-top:15px}
#importInfo{font-size:.875rem;color:#8b5a1d;white-space:pre-wrap}

/* ---------- Work mode: free pieces / floors ---------- */
body[data-work=floor] .parts-only{display:none!important}
body:not([data-work=floor]) .floor-only{display:none!important}
.header-actions{margin-inline-start:auto;display:flex;gap:8px}
.header-actions button{background:transparent;color:#fff;border-color:#49606d}
.header-actions button:hover{background:#1c3a4b}
#reset{margin-inline-start:0}
.work-mode{display:grid;grid-template-columns:1fr 1fr;border:1px solid #c4dcd7;border-radius:10px;overflow:hidden;margin-bottom:18px;background:#fff}
.work-mode button{border:0;border-radius:0;padding:12px;font-size:.95rem;color:var(--muted);background:#fff}
.work-mode button[aria-pressed=true]{background:var(--teal);color:#fff;font-weight:700}
.settings select,.quote-dialog select{display:block;width:100%;border:1px solid var(--line);border-radius:6px;padding:9px;margin-top:7px;background:#fff;font:inherit;font-size:.85rem;color:var(--ink)}
.settings input:disabled{background:#f3f6f8;color:#8a9aa3}
.sub-title{font-size:.95rem;margin:20px 0 0}
.room-table{max-height:360px}
.room-table thead{position:sticky;top:0;z-index:1}
.room-table td input{min-width:58px}
.room-table td input[data-key=name]{min-width:96px;text-align:start}
.quote-dialog{max-width:700px}
.block-label{display:block;font-size:.85rem;margin-top:14px}
.block-label textarea{margin-top:7px}
.logo-row{display:flex;align-items:center;gap:10px;margin-top:12px}
.logo-row img{height:42px;max-width:120px;object-fit:contain;border:1px solid var(--line);border-radius:6px;background:#fff}
#quoteInfo,#projInfo{font-size:.85rem;color:#8b5a1d;margin-top:8px}
.project-save{display:flex;gap:8px;margin-top:10px}
.project-save input{flex:1;min-width:0;border:1px solid var(--line);border-radius:6px;padding:9px}
.project-list{margin-top:14px;max-height:320px;overflow:auto;border-top:1px solid #edf1f4}
.project-list .project{display:flex;align-items:center;gap:8px;padding:9px 2px;border-bottom:1px solid #edf1f4}
.project-list .project span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-list .project small{color:var(--muted);font-size:.75rem;white-space:nowrap}
.project-list .empty-list{color:var(--muted);font-size:.85rem;padding:12px 0}
.dialog-actions .file-button{display:inline-flex;align-items:center}

.room-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.room-actions .file-button{padding:5px 12px;font-size:.875rem}
.dxf-dialog{max-width:1100px;width:96%;padding:18px}
.dxf-tools{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin-top:8px}
.dxf-tools .segmented{margin-top:0}
.dxf-tools label{font-size:.8rem}
.dxf-tools input,.dxf-tools select{display:block;width:120px;border:1px solid var(--line);border-radius:6px;padding:6px;margin-top:4px;font:inherit;font-size:.85rem;background:#fff}
.dxf-zoom{display:flex;gap:6px}
.dxf-zoom button{padding:6px 11px}
.dxf-layers{margin-top:8px;font-size:.82rem}
.dxf-layers summary{cursor:pointer;color:var(--teal)}
#dxfLayers{display:flex;flex-wrap:wrap;gap:6px 14px;padding:8px 0}
#dxfLayers label{display:inline-flex;gap:5px;align-items:center}
.dxf-view{margin-top:8px;height:min(62vh,640px);border:1px solid var(--line);border-radius:8px;background:#fbfcfd;overflow:hidden;touch-action:none;cursor:crosshair}
.dxf-view svg{width:100%;height:100%;display:block}
.dxf-status{font-size:.85rem;color:#8b5a1d;min-height:1.4em;margin-top:6px}
.dxf-rooms{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.dxf-room{display:flex;align-items:center;gap:6px;border:1px solid #c4dcd7;background:#f0f8f7;border-radius:8px;padding:4px 6px;font-size:.82rem}
.dxf-room input{width:110px;border:1px solid var(--line);border-radius:5px;padding:4px 6px;font:inherit;font-size:.82rem}
.dxf-room button{border:0;padding:2px 6px;background:transparent;color:#92737b}

/* ---------- Floor results ---------- */
.floor-results{margin-bottom:22px}
.floor-results h3{font-size:1.05rem;margin:0 0 10px}
.proposals{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:18px}
.proposal{text-align:start;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;gap:3px;line-height:1.5}
.proposal:hover{background:#f3faf9}
.proposal[aria-pressed=true]{border:2px solid var(--teal);background:#effaf8;padding:11px 13px}
.proposal b{font-size:.95rem;color:var(--navy)}
.proposal .tile{font-size:1.15rem;font-weight:700;color:var(--teal)}
.proposal small{color:var(--muted);font-size:.78rem}
.proposal .best{align-self:flex-start;font-size:.7rem;background:var(--teal);color:#fff;border-radius:20px;padding:1px 8px}
.floor-plan svg{width:100%;display:block;border:1px solid #e3eaed;border-radius:8px;background:#fff}
.floor-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:.78rem;color:var(--muted);margin:8px 0 14px}
.floor-legend i{display:inline-block;width:12px;height:12px;border:1px solid #9aaab2;border-radius:2px;vertical-align:-2px;margin-inline-end:5px}
.split-select{font:inherit;font-size:.8rem;border:1px solid #b9d8d3;border-radius:6px;padding:4px 6px;background:#f3faf9;color:var(--ink);max-width:100%}
.floor-note{font-size:.82rem;color:var(--muted);margin:6px 0 12px}

/* ---------- Responsive ---------- */
@media (min-width:1400px){.area-summary{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1050px){.workspace{grid-template-columns:minmax(0,1fr)}.output{min-height:450px}.direction{display:none}}
@media (max-width:850px){.material-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.material-panel .bookmatch-setting{grid-column:1/-1}}
@media (max-width:550px){
  header{padding:12px 14px;gap:8px}
  .brand .mark{width:30px;height:30px}
  .brand b{font-size:1rem}
  #reset,#projectsBtn{font-size:.75rem;padding:6px 10px}
  .work-mode button{padding:10px 6px;font-size:.85rem}
  .proposals{grid-template-columns:1fr 1fr}
  main{padding:22px 12px}
  h1{font-size:1.5rem}
  .intro p{font-size:.875rem}
  article,.output{padding:15px}
  .material-panel{grid-template-columns:minmax(0,1fr);gap:16px;padding:16px}
  .section-title{gap:4px}
  h2{font-size:.95rem}
  .settings{grid-template-columns:1fr 1fr;gap:9px}
  .settings label:last-child{grid-column:1/-1}
  .settings.four{grid-template-columns:1fr 1fr}
  .settings.four label:last-child{grid-column:auto}
  .stats{gap:5px}
  .stat{padding:8px}
  .stat b{font-size:1.2rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- Print ---------- */
@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff;font-size:12px}
  header{color:#172f3c;background:#fff;border-bottom:1px solid #ccc;padding:0 0 12px}
  .brand small{color:#555}
  #reset,.header-actions,.inputs,.intro,.material-panel,.result-actions,.badge,#empty,.calc-box{display:none!important}
  main{padding:12px 0}
  .workspace{display:block}
  .output{border:0;padding:0}
  .board{break-inside:avoid;page-break-inside:avoid}
  .board svg{max-height:340px}
  .board table{font-size:12px}
  .direction{display:block;color:#333}
  .area-summary{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:8px;padding:10px}
  .area-summary span{font-size:12px}
  .area-summary b{font-size:16px}
  .result-material{font-size:14px}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ================= Layout v2: four full-width panels ================= */
main{max-width:1500px;padding:22px 3%}
.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:18px;min-width:0}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.panel-caption{font-size:.85rem;color:#8a9ba4;font-weight:600}
svg[aria-hidden]{flex-shrink:0}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border-radius:9px}
.icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.icon-btn.small{width:30px;height:30px;border-radius:8px;color:#5f7680}
.icon-btn.small svg{width:16px;height:16px}

/* header + project bar */
header{gap:16px;flex-wrap:wrap}
.project-bar{margin-inline-start:auto;display:flex;align-items:center;gap:6px;min-width:0}
.project-bar input{background:#1c3a4b;border:1px solid #2c4a5a;color:#fff;border-radius:9px;padding:8px 12px;width:min(320px,48vw);font-size:.9rem}
.project-bar input::placeholder{color:#8fa9b5}
.project-bar .icon-btn{background:transparent;color:#d6e6ec;border-color:#3a5666}
.project-bar .icon-btn:hover{background:#1c3a4b}
.save-state{font-size:.75rem;color:#8fd8cf;white-space:nowrap}
.save-state.dirty{color:#f0c27a}

/* fields: light label inside the box */
.fields{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin-top:12px}
.field{display:flex;flex-direction:column;justify-content:center;border:1px solid var(--line);border-radius:10px;padding:5px 10px 4px;background:#fff;min-width:120px;flex:1 1 140px;cursor:text}
.field:focus-within{border-color:#58bdb5;box-shadow:0 0 0 3px #29c7bd22}
.field>span{font-size:.7rem;color:#93a3ab;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field input,.field select{border:0;padding:2px 0;margin:0;font-size:.95rem;background:transparent;width:100%;min-width:0;color:var(--ink);outline:none}
.field input[type=number],.field input[data-num]{text-align:start}
.fields .inline-check{margin:0;align-self:center;white-space:nowrap}
.tiny-msg{font-size:.78rem;color:var(--teal);margin:4px 0 0;min-height:0}
.tiny-msg:empty{display:none}

/* panel 1: material, slabs, cut settings */
.mat-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ghost-input{flex:1 1 220px;min-width:0;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:1.05rem;font-weight:600}
.ghost-input::placeholder{color:#a8b5bc;font-weight:400}
.photo-tools{display:flex;align-items:center;gap:5px}
.photo-btn{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 12px;border-radius:10px;color:var(--teal);background:#f0f8f7;border-color:#c3ded9;overflow:hidden}
.photo-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.photo-btn #photoChooseText{display:inline-flex;align-items:center;gap:6px}
.photo-btn img{height:40px;width:64px;object-fit:cover;margin:0 -12px;border-radius:9px}
.switch-row{display:flex;gap:18px;margin-inline-start:auto}
.switch{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;cursor:pointer}
.slab-rows{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.slab-row{display:flex;align-items:stretch;gap:8px}
.slab-row .slab-id{align-self:center;min-width:28px;color:#7b8f98;font-size:.8rem}
.slab-row .field{flex:1 1 110px}
.slab-row .remove{border:0;background:transparent;color:#92737b;padding:0 8px}
.row-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}
.row-actions .subtle{border:1px solid #c4dcd7;padding:5px 12px}
.row-actions .inline-check{margin:0}
.cut-fields{border-top:1px solid #edf1f4;padding-top:12px}

/* panel 2: modern switch */
.mode-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;max-width:420px;margin:0 auto 16px;padding:4px;border-radius:999px;background:#eef3f5;border:1px solid #e1e9ec}
.mode-switch .thumb{position:absolute;top:4px;bottom:4px;inset-inline-start:4px;width:calc(50% - 4px);border-radius:999px;background:#fff;box-shadow:0 2px 8px #12263322,0 0 0 1px #d7e5e8;transition:transform .25s cubic-bezier(.3,.7,.2,1)}
body[data-work=floor] .mode-switch .thumb{transform:translateX(-100%)}
.mode-switch button{position:relative;z-index:1;border:0;background:transparent;border-radius:999px;padding:9px 10px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:.95rem;color:#6d808a;font-weight:600}
.mode-switch button:hover{background:transparent;color:var(--ink)}
.mode-switch button[aria-pressed=true]{color:var(--teal)}
.mode-switch svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.import-bar{margin:0 0 10px;align-items:center}
.skirt-block{border-top:1px solid #edf1f4;margin-top:14px}
.calc-box{position:static;background:none;padding:14px 0 0;margin:0}
#calculate{max-width:420px;display:block;margin:0 auto;border-radius:999px}
#status{text-align:center}

/* panel 3: slab cards */
.slab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.slab-card{display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:10px;border:1px solid var(--line);background:#fff;text-align:start;transition:box-shadow .15s,transform .15s}
.slab-card:hover{background:#fff;box-shadow:0 4px 14px #12263318;transform:translateY(-1px)}
.slab-card svg{width:100%;height:auto;display:block;pointer-events:none}
.slab-card .slab-num{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.slab-card .slab-num b{font-size:1.05rem;color:var(--navy)}
.slab-card small{color:var(--muted);font-size:.72rem}
.board-dialog{max-width:1000px;width:94%}
.board-nav{display:flex;gap:6px}
.board-nav button{padding:4px 12px}
#boardBody .board{border:0;padding:0;margin:0}
.result-actions{display:flex;gap:8px;flex-wrap:wrap}

/* panel 4: quote */
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.quote-part{border:1px solid #e3ecee;border-radius:12px;padding:12px 14px;background:#fbfdfd;min-width:0}
.quote-part h3{margin:0;font-size:.95rem;color:var(--teal)}
.quote-part .fields{margin-top:8px}
.part-total{margin-top:10px;font-size:.85rem;color:var(--muted)}
.part-total b{color:var(--ink);font-size:1rem}
.quote-common{margin-top:14px}
.quote-summary{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:14px;padding-top:14px;border-top:1px solid #edf1f4}
.quote-summary .q-item{font-size:.85rem;color:var(--muted)}
.quote-summary .q-item b{color:var(--ink);font-size:1rem}
.quote-summary .q-total{background:var(--teal);color:#fff;border-radius:10px;padding:8px 14px;font-weight:700}
.quote-summary .q-total b{color:#fff;font-size:1.15rem}
.quote-summary .primary{margin-inline-start:auto;border-radius:999px;padding:10px 20px}
.quote-summary .muted{color:var(--muted);font-size:.85rem}

@media (max-width:700px){
  .panel{padding:14px 12px;border-radius:12px}
  .switch-row{margin-inline-start:0;width:100%;justify-content:flex-start}
  .quote-grid{grid-template-columns:1fr}
  .slab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project-bar{width:100%;margin:0}
  .project-bar input{flex:1;width:auto}
  .field{flex-basis:130px}
}
@media print{.project-bar,.input-panel,#quotePanel .fields,.quote-summary .primary{display:none!important}}
.slab-row .field{min-width:0;flex:1 1 0}
.field input,.field select{text-align:right}
@media (max-width:700px){.slab-row{gap:5px}.slab-row .field{padding:5px 7px 4px}.slab-row .slab-id{min-width:22px}}
.project-bar input{min-width:0}
.project-bar .icon-btn{flex-shrink:0;padding:0}
@media (max-width:700px){.project-bar{flex-wrap:nowrap}.project-bar input{flex:1 1 auto;width:0}.save-state{font-size:.7rem}}

/* ================= Shell v3: same look as Miqas / Tadma (sidebar, page titles, pill buttons) ================= */
:root{
  --bg:#f2f1ee;--surface:#fff;--surface2:#f7f6f3;--surface3:#eceae5;--border:#e6e4df;--border-md:#d9d6cf;
  --txt1:#141414;--txt2:#66645f;--txt3:#8e8b84;--primary:#111;--primary-h:#2b2b2b;--sidebar-w:248px;
  --line:#e6e4df;--ink:#141414;background:var(--bg)
}
body{background:var(--bg);color:var(--txt1)}
.ico{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;display:block}
.app-shell{display:flex;min-height:100vh;align-items:stretch}
.sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--surface2);border-inline-end:1px solid var(--border);position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;z-index:60}
.sb-brand{display:flex;align-items:center;gap:10px;padding:22px 18px 6px}
.sb-logo{width:40px;height:40px;flex-shrink:0}
.sb-brand-text{flex:1;min-width:0}
.sb-app{font-size:21px;font-weight:700;line-height:1.2;text-align:start}
.sb-org{font-size:12.5px;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-new-wrap{margin:16px 16px 8px}
.btn-primary{background:var(--primary);border:0;color:#fff;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.btn-primary:hover{background:var(--primary-h);box-shadow:0 6px 16px rgba(17,17,17,.18)}
.sb-new{width:100%;height:40px;border-radius:999px;font-size:14px}
.pill{border-radius:999px;height:40px;padding:0 18px;font-size:14px}
.sidebar-nav{padding:8px 0;flex:1}
.nav-item{display:flex;align-items:center;gap:12px;margin:2px 12px;width:calc(100% - 24px);padding:12px 14px;border-radius:14px;font-size:15px;font-weight:500;color:var(--txt1);background:transparent;border:1px solid transparent;text-align:start}
.nav-item .ico{color:var(--txt2)}
.nav-item:not(.active):hover{background:var(--surface3)}
.nav-item.active{background:var(--surface);border-color:var(--border);box-shadow:0 1px 2px rgba(20,20,20,.06);font-weight:700}
.nav-item.active .ico{color:var(--teal)}
.sb-tagline{padding:16px;text-align:center;font-size:11.5px;color:var(--txt2)}
.main{flex:1;min-width:0}
.page{padding:28px 32px 40px;max-width:none;margin:0}
.page>*{max-width:1180px;margin-inline:auto}
.page-head{margin-bottom:20px}
.page-head h1{font-size:28px;font-weight:700;line-height:1.3;margin:0}
.page-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.page-head-actions{display:flex;gap:8px}
.btn-outline{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;border:1.5px solid var(--border-md);background:var(--surface);color:var(--txt1);font-weight:600;font-size:14px;cursor:pointer}
.btn-outline:hover{border-color:var(--teal);background:#eef7f6}
.btn-icon{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;border:0;background:transparent;color:var(--txt2);padding:0;cursor:pointer}
.btn-icon:hover{background:var(--surface3);color:var(--teal)}
.panel{border-color:var(--border);border-radius:18px}
.panel-caption{color:var(--txt3)}

/* editor head: project name as the page title */
.project-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.title-input{flex:1 1 260px;min-width:0;font-size:28px;font-weight:700;border:1px solid transparent;border-radius:12px;padding:2px 8px;margin-inline-start:-8px;background:transparent;color:var(--txt1)}
.title-input:hover{border-color:var(--border)}
.title-input:focus{border-color:var(--border-md);background:var(--surface);outline:none}
.title-input::placeholder{color:#b5b2ab}
.save-state{font-size:.8rem;color:var(--teal);white-space:nowrap}
.save-state.dirty{color:#b7791f}

/* projects page */
.search-box{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:0 14px;height:44px;margin-bottom:14px;color:var(--txt3)}
.search-box input{border:0;outline:none;flex:1;background:transparent;font-size:15px;min-width:0}
.project-list{display:flex;flex-direction:column;gap:8px;border:0;max-height:none;overflow:visible;margin:0}
.project-card{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:6px 10px 6px 6px}
.project-card.current{border-color:#9fd3cd}
.project-open{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:0;background:transparent;padding:10px 12px;text-align:start;border-radius:12px}
.project-open:hover{background:var(--surface2)}
.project-open b{font-size:15.5px}
.project-open small{color:var(--txt2);font-size:12.5px}
.project-date{color:var(--txt3);font-size:12px}
.empty-list{color:var(--txt2);padding:30px 0;text-align:center}

/* settings page */
.logo-box{width:96px;height:96px;border-radius:18px;border:1.5px dashed var(--border-md);background:var(--surface2);display:grid;place-items:center;overflow:hidden;padding:0;color:var(--txt3);font-size:13px}
.logo-box img{width:100%;height:100%;object-fit:contain;background:#fff}
.logo-box img:not([hidden])+span{display:none}

/* quote table */
.quote-table td,.quote-table th{padding:8px 10px;text-align:start}
.quote-table th:nth-child(n+2),.quote-table td:nth-child(n+2){text-align:center;width:16%}
.quote-table .q-group td{background:var(--surface2);font-weight:700;color:var(--teal);padding:7px 10px}
.quote-table .q-sub td{font-weight:700;color:var(--txt2);border-bottom:2px solid var(--border)}
.quote-table .q-sub td:last-child{color:var(--txt1)}
.quote-table .q-sum{font-weight:700}
.price-input{width:100%;max-width:130px;min-width:80px;border:1px solid var(--border);border-radius:10px;padding:7px 8px;text-align:center;font-size:.95rem;background:#fff}
.price-input:focus{border-color:#58bdb5;outline:none;box-shadow:0 0 0 3px #29c7bd22}
.basis-select{margin-inline-start:6px;border:1px solid var(--border);border-radius:8px;padding:3px 6px;font:inherit;font-size:.8rem;background:var(--surface2);color:var(--txt2)}
.quote-summary .btn-primary{margin-inline-start:auto}
.quote-summary .q-total{background:var(--primary)}

/* mobile: topbar + drawer + floating button */
.topbar,.fab,.sidebar-backdrop{display:none}
@media (max-width:900px){
  .sidebar{position:fixed;top:0;bottom:0;inset-inline-start:0;height:auto;transform:translateX(100%);transition:transform .25s;box-shadow:0 0 40px rgba(0,0,0,.18)}
  body.sb-open .sidebar{transform:none}
  body.sb-open .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(17,17,17,.35);z-index:55}
  .topbar{display:flex;align-items:center;gap:8px;height:58px;padding:0 10px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40}
  .tb-logo{width:30px;height:30px}
  .topbar-title{flex:1;font-size:17px;font-weight:700}
  .fab{display:grid;place-items:center;position:fixed;inset-inline-end:18px;bottom:22px;z-index:45;width:58px;height:58px;border-radius:50%;border:0;background:var(--primary);color:#fff;box-shadow:0 8px 24px rgba(17,17,17,.28)}
  .page{padding:16px 12px 96px}
  .page-head h1,.title-input{font-size:23px}
}
@media print{.sidebar,.topbar,.fab,.project-head .btn-primary,.project-head .btn-icon{display:none!important}.page{padding:0}}
.primary{background:var(--primary);border-color:var(--primary);color:#fff;border-radius:999px}
.primary:hover{background:var(--primary-h)}
.mode-switch button[aria-pressed=true],.nav-item.active{color:var(--txt1)}

/* ---- compact fields: label and value on one line, label light and vertically centred ---- */
.sb-app{text-align:start}
.ghost-input{flex:0 0 auto;width:min(300px,100%);height:34px;padding:4px 10px;font-size:.95rem}
.field.compact{flex:0 0 auto;width:150px;min-width:0;height:34px;flex-direction:row;align-items:center;gap:6px;padding:0 10px;border-radius:9px}
.field.compact>span{font-size:.72rem;color:#a29f98;line-height:1;flex-shrink:0}
.field.compact input{text-align:left;font-size:.92rem;padding:0;height:100%}
.field.compact input[type=number]{-moz-appearance:textfield;appearance:textfield}
.field.compact input::-webkit-outer-spin-button,.field.compact input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.slab-rows{gap:6px}
.slab-row{align-items:center;gap:6px}
.slab-row .field.compact{flex:0 0 auto;width:150px;padding:0 10px}
.slab-end{display:flex;align-items:center;gap:6px;margin-inline-start:auto}
.slab-end .slab-id{min-width:0;color:#8e8b84;font-size:.8rem}
.round-btn{width:24px;height:24px;border-radius:50%;padding:0;display:grid;place-items:center;font-size:15px;line-height:1;border:1.5px solid;background:#fff;font-weight:700}
.round-btn.del{color:#c0392b;border-color:#e3a59d}
.round-btn.del:hover{background:#fdecea}
.round-btn.add{color:#fff;background:#1f9d55;border-color:#1f9d55;font-size:17px}
.round-btn.add:hover{background:#178246}
.cut-fields{gap:8px}
.cut-fields .field.compact{width:190px}
.compact-row{gap:8px}
@media (max-width:700px){
  .slab-row .field.compact{width:auto;flex:1 1 0;padding:0 7px}
  .field.compact>span{font-size:.66rem}
  .ghost-input{width:100%}
}
.photo-btn{height:30px;padding:0 10px;border-radius:8px;font-size:.85rem}
.photo-btn svg{width:16px;height:16px}
.photo-btn img{height:28px;width:48px;margin:0 -10px;border-radius:7px}
.slab-end{margin-inline-start:0;gap:8px}
.slab-end .icon-btn.small{flex-shrink:0}
.slab-end .slab-id{min-width:20px;text-align:center}
.icon-btn.small:disabled{opacity:.35}
.field.compact.wide{width:230px}
.rot-toggle{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 11px;border-radius:9px;border:1.5px solid var(--border-md);background:#fff;color:var(--txt2);font-size:.82rem;font-weight:600}
.rot-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rot-toggle[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:#fff}
.rot-toggle:hover{border-color:var(--teal)}
.piece-rows .slab-row{flex-wrap:wrap}
@media (max-width:700px){.field.compact.wide{flex:1 1 100%;width:auto}}
/* piece and slab rows stay on one line on desktop; boxes shrink instead of wrapping */
@media (min-width:701px){
  .piece-rows .slab-row{flex-wrap:nowrap}
  .slab-row .field.compact{flex:0 1 150px;min-width:70px}
  .piece-rows .field.compact.wide{flex:1 1 230px;width:auto;min-width:90px}
  .slab-row .rot-toggle,.slab-row .slab-end{flex-shrink:0}
}
/* rows line up: the note box has a fixed width (free space stays on the left) and every row keeps a slot for ＋ */
.icon-slot{width:30px;height:30px;flex-shrink:0}
@media (min-width:701px){.piece-rows .field.compact.wide{flex:0 1 220px}}
/* one size for all secondary buttons: same as «اختيار صورة» */
.file-button,.import-bar .subtle,.rot-toggle,.photo-btn,.result-actions .export,.btn-outline,.row-actions .subtle,.segmented button,.room-actions .file-button{
  height:30px;min-height:0;padding:0 10px;border-radius:8px;font-size:.85rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.file-button,.import-bar .subtle{background:#f0f8f7;color:var(--teal);border:1px solid #c3ded9}
.rot-toggle{border-width:1px}
.result-actions .export{flex:0 0 auto}
.import-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* the uniform trim box fades while per-side trims are used */
.field:has(input:disabled){opacity:.45;background:var(--surface2);cursor:not-allowed}
.stat b,.area-summary b{direction:rtl;text-align:right}
/* slab dialog: pieces and waste tables share the same four columns */
#boardBody table{table-layout:fixed;width:100%}
#boardBody th,#boardBody td{width:25%;text-align:right;padding-inline:10px}

/* ---- quote panel v2: lines with + / ✕ like the slabs, vertical totals per section ---- */
.q-section{border-top:1px solid #edf1f4;padding-top:12px;margin-top:12px}
.q-section:first-of-type{border-top:0;margin-top:0;padding-top:0}
.q-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.q-head h3{margin:0;font-size:.98rem;color:var(--teal)}
.q-lines{display:flex;flex-direction:column;gap:6px}
.q-row .field.compact.q-desc{flex:0 1 200px;width:200px}
.q-row .field.compact.q-note{flex:0 1 200px;width:200px}
.q-note-slot{flex:0 1 200px;width:200px}
.q-row .field.compact.q-small{flex:0 1 110px;width:110px}
.q-row .field.compact select{border:0;background:transparent;font:inherit;font-size:.85rem;min-width:0;flex:1;color:var(--ink);outline:none}
.q-row input[readonly]{color:var(--txt2)}
.q-sum{flex:0 0 90px;text-align:left;font-size:.95rem}
.q-totals{width:min(330px,100%);margin:12px 0 0;margin-inline-start:auto;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.q-trow{display:flex;align-items:center;gap:10px;padding:7px 12px;border-bottom:1px solid #f0efeb;font-size:.9rem}
.q-trow:last-child{border-bottom:0}
.q-trow span{flex:1;color:var(--txt2)}
.q-trow b{min-width:80px;text-align:left}
.q-trow .price-input{width:110px;height:30px;text-align:left}
.q-trow .toggle{transform:scale(.8)}
.q-trow.q-grand{background:var(--surface2)}
.q-trow.q-grand span{color:var(--txt1);font-weight:700}
.q-trow.q-grand b{font-size:1.05rem}
@media (max-width:700px){
  .q-row{flex-wrap:wrap}
  .q-row .field.compact.q-desc,.q-row .field.compact.q-note{flex:1 1 100%;width:auto}
  .q-note-slot{display:none}
  .q-row .field.compact.q-small{flex:1 1 0;width:auto}
}
@media (max-width:700px){
  .q-row .field.compact.q-small{flex:1 1 calc(33% - 6px);width:auto}
  .q-row .q-sum{flex:1 1 auto;text-align:right}
}

/* ---- quote table with headers ---- */
.q-table{width:100%;border-collapse:collapse;font-size:.9rem}
.q-table th{background:var(--surface2);color:var(--txt2);font-weight:600;padding:9px 10px;text-align:start;white-space:nowrap}
.q-table td{padding:6px 8px;border-bottom:1px solid #f0efeb;vertical-align:middle}
.q-table th:nth-child(1),.q-table td:nth-child(1){width:auto}
.q-table th:nth-child(2),.q-table td:nth-child(2){width:90px}
.q-table th:nth-child(3),.q-table td:nth-child(3),.q-table th:nth-child(4),.q-table td:nth-child(4){width:110px}
.q-table th:nth-child(5),.q-table td:nth-child(5){width:100px}
.q-table th:nth-child(6),.q-table td:nth-child(6){width:72px}
.q-in{width:100%;height:32px;border:1px solid var(--border);border-radius:8px;padding:0 9px;background:#fff;font:inherit;font-size:.9rem;color:var(--ink);min-width:60px}
.q-in.num{text-align:left}
.q-in:focus{border-color:#58bdb5;outline:none;box-shadow:0 0 0 3px #29c7bd22}
.q-table .q-sum{font-weight:700;text-align:left}
.q-act{white-space:nowrap}
.q-act>*{display:inline-grid;vertical-align:middle;margin-inline-start:4px}
.q-fixed td{color:var(--txt1)}
.q-select{margin-inline-start:6px}

/* ---- no spinner arrows on any number box ---- */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---- every dropdown: one chevron instead of the two arrows ---- */
select{-webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2366645f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 8px center;background-size:12px;padding-left:26px!important}
select:not(.field select){border:1px solid var(--border);border-radius:8px;height:30px;padding-right:9px;background-color:#fff;font:inherit;font-size:.85rem;color:var(--ink)}
select,.field select,.settings select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2366645f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:left 8px center!important;background-size:12px!important;-webkit-appearance:none!important;appearance:none!important}
.q-table .q-in{text-align:right}
.q-table .q-in.num{text-align:left}
/* quote table: every cell is a framed box; headers and values share the same (right) alignment */
.q-table th,.q-table td{text-align:right}
.q-table .q-in,.q-table .q-in.num{text-align:right}
.q-box{display:flex;align-items:center;justify-content:flex-start;background:var(--surface2);color:var(--txt2);font-weight:600}
.q-box[data-qsum]{color:var(--txt1)}
.q-table .q-select{height:32px;border-radius:8px}
.q-fixed td:first-child{white-space:nowrap}
.q-actions{display:flex;gap:6px;margin-inline-start:auto}
.q-actions .ico{width:16px;height:16px}
.q-fixed-label{display:flex;align-items:center;justify-content:space-between;gap:8px}
.q-fixed-label .q-select{margin:0}
#quoteSummary:empty{display:none}
.q-all{width:min(330px,100%);margin-inline-start:auto;border:1px solid var(--border);border-radius:12px;background:var(--primary)!important}
.q-all span,.q-all b{color:#fff!important}
.quote-summary{border-top:0;padding-top:0;margin-top:10px}

/* ---- one height for every input box; compact boxes sized to their label + value ---- */
.field{height:34px!important;flex-direction:row!important;align-items:center!important;gap:6px;padding:0 10px!important;border-radius:9px;min-width:0}
.field>span{font-size:.72rem!important;color:#a29f98!important;line-height:1;flex-shrink:0;white-space:nowrap;overflow:visible!important}
.field input,.field select{height:100%;padding:0!important;margin:0!important;font-size:.92rem;flex:1 1 auto;min-width:0}
.field.compact,.slab-row .field.compact,.cut-fields .field.compact{width:auto!important;flex:0 0 auto!important}
.field.compact input{width:76px;flex:0 0 76px}
.field.compact.wide input{width:200px;flex:0 0 200px}
.q-in,.q-box,.price-input,.ghost-input,.q-select,.title-input+*{height:34px!important}
.q-trow .price-input{height:34px}
@media (max-width:700px){
  .slab-row{flex-wrap:wrap}
  .slab-row .field.compact{flex:1 1 calc(33% - 6px)!important;padding:0 7px!important;gap:4px}
  .slab-row .field.compact input{width:auto;flex:1 1 0}
  .field.compact.wide{flex:1 1 100%!important}
  .field.compact.wide input{width:auto;flex:1 1 0}
  .field>span{font-size:.64rem!important}
}
.share-choices{display:inline-flex;gap:8px;flex-wrap:wrap}
/* dropdowns inside fields: room for the chevron and never narrower than their text */
.field select{padding-left:22px!important;min-width:auto!important;flex:1 0 auto;background-position:left 4px center!important}
.field:has(select){flex:1 1 auto}
/* every field box is as wide as its label + value, rows wrap instead of squeezing */
.fields .field{flex:0 0 auto!important;min-width:max-content}
.fields .field input[type=number],.fields .field input[data-num]{width:76px;flex:0 0 76px}
.fields .field input[type=text]:not([data-num]){width:200px;flex:0 0 200px}
.fields .field select{flex:0 0 auto}
@media (max-width:700px){.fields .field{flex:1 1 auto!important}.fields .field input[type=text]:not([data-num]){width:auto;flex:1 1 0}}
.field select{width:auto!important;display:inline-block!important;margin-top:0!important;border:0!important}
@media (max-width:700px){.fields .field{min-width:0;flex:1 1 100%!important}.fields .field input[type=number],.fields .field input[data-num]{flex:1 1 0;width:auto}}
/* plain stone: every piece may turn anyway, so the per-piece direction toggle is hidden */
body.plain-stone .rot-toggle{display:none}
.rot-toggle{min-width:104px;justify-content:center}
.photo-dialog{max-width:980px;width:94%}
.photo-stage{position:relative;margin-top:10px;background:#111;border-radius:10px;overflow:hidden;line-height:0}
.photo-stage canvas{width:100%;height:auto;display:block}
.photo-stage svg{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.photo-stage circle{cursor:grab}
@media (max-width:700px){.photo-dialog .dialog-actions{flex-wrap:wrap;gap:6px}.photo-dialog .dialog-actions button{white-space:nowrap;padding:7px 12px;font-size:.85rem}}
.photo-switch{font-size:.82rem;font-weight:600;margin-inline-end:8px}
.photo-switch .toggle{transform:scale(.8)}
#planPanel .panel-head .photo-switch{margin-inline-start:auto}
.board-nav{align-items:center}
/* the nav buttons' padding must not reach the switch inside .board-nav */
.board-nav .toggle,.photo-switch .toggle{padding:3px!important;width:50px;height:28px;border-radius:20px}

/* ---- one size for every on/off switch (the size of «صورة الرخام») ---- */
.toggle,.board-nav .toggle,.photo-switch .toggle,.q-trow .toggle{width:40px!important;height:22px!important;padding:2px!important;border-radius:20px;transform:none!important;margin:0}
.toggle span{width:18px!important;height:18px!important}
.toggle[aria-checked=true] span{transform:translateX(18px)!important}
.switch,.photo-switch{font-size:.85rem!important;font-weight:600}

/* Room editor: drag rooms by their grips, light grid, doors on walls */
.room-editor{margin-top:12px}
.re-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.re-tools .segmented{margin-top:0}
.re-tools .segmented button{display:inline-flex;align-items:center;gap:6px}
.re-tools .segmented svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.re-canvas{position:relative;min-width:0}
.re-svg{display:block;width:100%;background:#fbfdfd;border:1px solid #e3eaed;border-radius:8px;touch-action:none;user-select:none;-webkit-user-select:none;outline:none}
.re-svg:focus-visible{border-color:var(--teal)}
.re-svg text{font-family:Arial,sans-serif;pointer-events:none}
.re-pop{position:absolute;display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px 6px;box-shadow:0 4px 14px #173e4c22;z-index:2}
.re-pop .field{margin:0}

/* Equal pieces: one option with smaller / bigger steps */
.size-bar{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;border:2px solid var(--teal);background:#effaf8;border-radius:10px;padding:10px 14px;margin-bottom:18px}
.size-bar b{color:var(--navy);font-size:.95rem}
.size-step{display:flex;align-items:center;gap:8px}
.size-step .tile{font-size:1.15rem;font-weight:700;color:var(--teal);min-width:110px;text-align:center}
.size-step .icon-btn{width:34px;height:34px}
.size-step .icon-btn:disabled{opacity:.35;cursor:default}
.size-stats{color:var(--muted);font-size:.85rem}

/* Pen bar (room drawn wall by wall) */
.re-penbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.re-penbar .field{margin:0}
.free-shape{text-align:center;color:var(--teal);font-weight:600;font-size:.9rem}
#autoQtyInfo.warn{color:#a44237;font-weight:600}
.project-badge{flex-shrink:0;font-size:.72rem;font-weight:600;color:#fff;background:var(--teal);border-radius:20px;padding:2px 10px}


/* Room editor: icon tools (undo, plan under the rooms, scale) and the scale bar */
.re-icons{display:flex;gap:6px;align-items:center}
.re-icons .icon-btn:disabled{opacity:.35;cursor:default}
.re-icons label.icon-btn{cursor:pointer}
.re-scalebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.re-scalebar .field{margin:0}
.re-scale-msg{font-size:.85rem;color:var(--teal);font-weight:600}

.warn-text{color:#a44237;font-weight:600}
.room-dir{border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-size:.82rem;height:34px;padding:0 26px 0 8px;width:auto}

.photo-ratio{color:#a44237;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sb-logo,.tb-logo{object-fit:contain;display:block}

/* Phones: slab rows on one line (short labels, smaller ✕ / code / ＋) */
.l-short{display:none}
@media (max-width:700px){
  .l-long{display:none}
  .l-short{display:inline}
  #slabs .slab-row{flex-wrap:nowrap!important;gap:5px}
  #slabs .slab-row .field.compact{flex:1 1 0!important;min-width:0;padding:0 6px!important}
  #slabs .slab-row .field.compact input{width:100%;min-width:0}
  #slabs .slab-end{gap:4px;flex-shrink:0}
  #slabs .slab-end .icon-btn.small,#slabs .icon-slot{width:28px;height:28px}
  #slabs .slab-end .slab-id{min-width:0;font-size:.72rem}
}

/* Room editor on phones: full screen with the tools at the bottom, direction buttons for the pen */
.re-dirs{display:inline-flex;gap:4px}
.re-dirs .icon-btn{font-size:1rem;font-weight:700}
.re-dirs .icon-btn[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:#fff}
.room-editor.re-full{position:fixed;inset:0;z-index:1000;background:#fff;margin:0;padding:8px 8px calc(8px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px}
.re-full .re-canvas{order:1;flex:1;min-height:0}
.re-full .re-penbar,.re-full .re-scalebar{order:2;margin:0}
.re-full .re-tools{order:3;margin:0;justify-content:center}
.re-full .re-svg{height:100%}
body.re-full-open{overflow:hidden}
@media (max-width:700px){
  .re-tools{gap:8px}
  .re-tools .segmented button{padding:7px 9px}
}

/* ---------- Accounts ---------- */
.auth-screen,.session-lost{position:fixed;inset:0;z-index:200;background:var(--bg,#f2f5f7);display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:48px 16px}
.session-lost{background:rgba(17,38,51,.55)}
body.auth-open{overflow:hidden}
.auth-card{width:100%;max-width:400px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 24px;box-shadow:0 10px 30px rgba(17,38,51,.08)}
.auth-logo{display:block;width:64px;height:64px;margin:0 auto 4px;object-fit:contain}
.auth-app{text-align:center;font-weight:700;font-size:1.2rem;margin-bottom:12px}
.auth-card h1{font-size:1.35rem;text-align:center;margin:4px 0 16px}
.auth-card .block-label{display:block;font-size:.85rem;color:var(--muted);margin:10px 0}
.auth-card .block-label input{display:block;width:100%;margin-top:4px;height:42px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font-size:1rem}
.auth-main{width:100%;height:44px;border-radius:999px;margin-top:12px;font-size:1rem}
.auth-switch,.auth-links{text-align:center;margin-top:14px;font-size:.85rem;color:var(--muted)}
.auth-links a{color:var(--muted)}
button.link{border:0;background:none;color:var(--teal);padding:0;font-weight:600}
.kind-pick{display:flex;gap:6px;margin-bottom:6px}
.kind-pick label{flex:1}
.kind-pick input{position:absolute;opacity:0;pointer-events:none}
.kind-pick span{display:block;text-align:center;border:1.5px solid var(--line);border-radius:10px;padding:8px 4px;font-size:.85rem;font-weight:600;cursor:pointer}
.kind-pick input:checked+span{border-color:var(--teal);background:#eef7f6;color:var(--teal-dark)}
.kind-pick input:focus-visible+span{outline:3px solid #24bdb3}
.sb-expiry{margin:8px 14px;padding:8px 10px;border-radius:10px;background:#eef7f6;color:var(--teal-dark);font-size:.8rem;font-weight:600;cursor:pointer;text-align:center}
.sb-expiry.over{background:#fdecea;color:#b3261e}
.list-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.list-table th,.list-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:start;font-size:.9rem;vertical-align:middle}
.list-table th{color:var(--muted);font-weight:600;background:#f7f9fa}
.list-table tr[data-quote]{cursor:pointer}
.list-table tr[data-quote]:hover td{background:#f2f8f7}
.list-table .bad{color:#b3261e;font-weight:600}
.row-btns{display:flex;gap:6px;flex-wrap:wrap}
.row-btns .btn-outline{height:32px;padding:0 12px;font-size:.8rem}
.project-badge.muted{background:#8a9aa4}
.team-code{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.team-code b,.bundle-code b{font-size:1.4rem;letter-spacing:3px;color:var(--teal-dark)}
.bundle-code{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}
.bundle-code small{flex-basis:100%;color:var(--muted)}
.plan-now{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline}
.plan-now b{font-size:1.2rem}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:16px 0}
.plan-card{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:6px;min-width:0}
.plan-card.star{border-color:var(--teal)}
.plan-card.current{box-shadow:0 0 0 3px #cdeae6}
.plan-card h3{margin:0;font-size:1.05rem}
.plan-price b{font-size:1.8rem}
.plan-year{font-size:.8rem;color:var(--muted)}
.plan-card ul{margin:6px 0 10px;padding-inline-start:18px;font-size:.88rem;color:var(--muted)}
.plan-card .btn-primary{margin-top:auto;height:40px;border-radius:999px;text-decoration:none}
.account-actions{margin:10px 0}
.lastra-slabs{max-height:320px;overflow:auto;display:grid;gap:6px;margin:10px 0}
.lastra-slab{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:.88rem}
.lastra-slab small{color:var(--muted)}
#lastraType{width:100%;height:40px;margin-top:4px}
@media (max-width:720px){
  .list-table th:nth-child(5),.list-table td:nth-child(5){display:none}
  .auth-screen{padding:20px 16px}
}

/* ---------- Client dialog ---------- */
.client-dialog{max-width:560px;width:calc(100% - 32px);padding:0;border-radius:18px}
.client-dialog form{padding:22px 24px 20px}
.cd-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cd-head h2{font-size:1.25rem}
.cd-head .btn-icon{border:0;background:transparent;width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:50%;color:var(--muted)}
.cd-head .btn-icon:hover{background:#eef2f4}
.cd-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 14px}
.cd-grid label{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:.82rem;color:var(--muted);font-weight:600}
.cd-grid .cd-wide{grid-column:1/-1}
.cd-grid input,.cd-grid textarea{width:100%;height:42px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit;font-size:.95rem;font-weight:400;color:var(--ink);background:#fff}
.cd-grid textarea{height:auto;padding:10px 12px;resize:vertical;min-height:80px}
.cd-grid input:focus,.cd-grid textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px #d4ecea}
.cd-actions{display:flex;gap:10px;margin-top:20px}
.cd-actions .btn-primary,.cd-actions .btn-outline{height:42px!important;padding:0 26px!important;font-size:.95rem!important;border-radius:999px}
.client-dialog #clientMsg{margin-top:8px;color:#b3261e}
@media (max-width:520px){.cd-grid{grid-template-columns:1fr}}

/* ---------- Toast + saved state ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);background:#111;color:#fff;padding:10px 20px;border-radius:999px;font-size:.9rem;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:300;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:#b3261e}
.project-head .save-state{line-height:1;display:inline-flex;align-items:center;align-self:center}
.date-chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font-size:.85rem;cursor:pointer}
.date-chip input{border:0;background:transparent;font:inherit;color:var(--ink);padding:0;height:30px;direction:ltr;width:auto}
.date-chip input:focus{outline:none}
.date-chip:focus-within{border-color:var(--teal)}
/* rooms table: every heading and value starts on the right, numbers included */
.room-table th,.room-table td.free-shape{text-align:start}
.room-table td input[data-num]{text-align:right!important}

/* ---------- Plan after a change: dimmed until «أعد الحساب» ---------- */
.stale-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:6px 0 14px;padding:10px 14px;border-radius:12px;background:#fff6e5;color:#7d5a1d;font-weight:600;font-size:.9rem}
.stale-bar .btn-primary{height:38px;padding:0 20px}
#results.stale{opacity:.35;filter:grayscale(.4);pointer-events:none;user-select:none}
.size-step .step-waste{font-size:.72rem;color:var(--muted);white-space:nowrap}
.size-step .step-waste.high{color:#b3261e;font-weight:600}