/* ---------- 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:var(--surface2);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:var(--surface);color:inherit;padding:8px 14px;font-size:.875rem}
button:hover,.file-button:hover{background:var(--hover)}
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:var(--tint);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:var(--surface);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:var(--surface);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:var(--surface2);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:var(--surface);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:var(--red-tint)}
.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:var(--surface2);border-color:var(--line);white-space:nowrap}
.edge-btn.on{color:var(--teal);background:var(--tint);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:var(--tint);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,var(--bg) 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:var(--surface);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:var(--surface2);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:var(--tint);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:var(--tint);padding:13px;border-radius:8px}
.stat b{display:block;font-size:1.5rem;color:var(--teal);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:var(--surface);border-color:#b9d8d3;color:var(--teal)}
.result-actions .export::before{content:'↓ ';}
.result-actions .export:hover{background:var(--hover)}
.note{padding:12px;background:var(--surface2);font-size:.8rem;border-radius:6px;margin:12px 0;color:#4f6570}
.warning{background:var(--amber-tint);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:var(--amber-tint);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:var(--tint);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:var(--teal-dark);font-size:1.2rem;direction:ltr;text-align:right}
.area-summary small{font-size:.85rem;font-weight:400}
.area-total{background:var(--tint);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:var(--surface2);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:var(--tint);border-radius:8px;padding:10px 12px}
.cost-grid span{display:block;font-size:.8rem;color:#536e78}
.cost-grid b{font-size:1.15rem;color:var(--teal-dark)}
.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:var(--surface)}
.work-mode button{border:0;border-radius:0;padding:12px;font-size:.95rem;color:var(--muted);background:var(--surface)}
.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:var(--surface);font:inherit;font-size:.85rem;color:var(--ink)}
.settings input:disabled{background:var(--surface2);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:var(--surface)}
.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:var(--surface2);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:var(--tint);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:var(--surface);display:flex;flex-direction:column;gap:3px;line-height:1.5}
.proposal:hover{background:var(--tint)}
.proposal[aria-pressed=true]{border:2px solid var(--teal);background:var(--tint);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:var(--tint);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:var(--surface);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:var(--surface);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:var(--tint);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:var(--surface2);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:var(--surface);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:var(--surface);text-align:start;transition:box-shadow .15s,transform .15s}
.slab-card:hover{background:var(--surface);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:var(--surface2);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-brand .bell{margin-inline-start:auto}
.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:var(--hover)}
.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:var(--surface)}
.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:var(--surface);font-weight:700}
.round-btn.del{color:#c0392b;border-color:#e3a59d}
.round-btn.del:hover{background:var(--red-tint)}
.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:var(--surface);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:var(--tint);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:var(--surface);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:var(--surface);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:var(--surface2);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:var(--surface);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:var(--tint);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:var(--surface);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:var(--surface);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 ---------- */
.session-lost{position:fixed;inset:0;z-index:200;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:var(--surface);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}
.auth-forgot{display:block;margin:2px 0 6px auto;margin-inline:0 auto;font-size:.85rem}
button.link.strong{text-decoration:underline;text-underline-offset:4px}
.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:var(--hover);color:var(--teal-dark)}
.kind-pick input:focus-visible+span{outline:3px solid #24bdb3}
/* Sign in / sign up: form column + photo panel, as in Miqas / Tadma (phones: the photo on top, fading out) */
.auth-screen{position:fixed;inset:0;z-index:200;background:var(--surface2);display:flex;gap:20px;padding:20px;overflow:auto}
.au-form{flex:1;display:flex;align-items:center;justify-content:center;padding:20px 8px}
.au-narrow{width:100%;max-width:400px}
.au-art{flex:1;position:sticky;top:0;min-height:calc(100vh - 40px);border-radius:24px;overflow:hidden;display:flex;align-items:flex-end;color:#fff;
  background:linear-gradient(180deg,transparent 45%,rgba(8,14,30,.88) 100%),url('img/login-photo.jpg') center 35%/cover no-repeat,#0b1426;
  background:linear-gradient(180deg,transparent 45%,rgba(8,14,30,.88) 100%),image-set(url('img/login-photo.webp') type('image/webp'),url('img/login-photo.jpg') type('image/jpeg')) center 60%/cover no-repeat,#0b1426}
.au-art-text{padding:48px}
.au-art h2{font-size:28px;font-weight:800;line-height:1.5;margin:0 0 10px;max-width:440px;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.au-art p{color:#fff;font-size:15px;line-height:1.8;opacity:.92;margin:0;max-width:420px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.au-top{display:flex;min-height:40px;margin-bottom:8px}
.au-back{width:40px;height:40px;border-radius:50%;border:0;background:var(--tint);color:var(--teal);display:grid;place-items:center;cursor:pointer}
.au-back:hover{background:var(--teal);color:#fff}
.au-hello{display:flex;align-items:center;gap:12px}
.au-hello img{width:44px;height:44px;object-fit:contain;flex-shrink:0}
.au-hello h1{font-size:28px;font-weight:800;margin:0;line-height:1.3}
.au-sub{color:var(--muted);font-size:14px;margin:6px 0 14px;line-height:1.8}
.au-label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin:14px 0 6px}
.au-input{position:relative}
.au-input input{width:100%;height:auto;font:inherit;font-size:15px;padding:15px 50px 15px 18px;border-radius:14px;border:1px solid var(--border-md);background:var(--surface);color:var(--ink);outline:none;text-align:start;min-width:0;max-width:none}
.au-input.has-eye input{padding-left:56px}
.au-input input::placeholder{color:#9aa8b1}
.au-input input:focus{border-color:var(--teal);box-shadow:0 0 0 3px #d9efec}
.au-icon{position:absolute;inset-inline-start:16px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;display:grid}
.au-eye{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;background:none;border-radius:10px;display:grid;place-items:center;color:var(--muted);cursor:pointer;padding:0}
.au-eye:hover{background:var(--hover);color:var(--ink)}
.au-icon svg,.au-eye svg{display:block}
.au-eye .eye-hide,.au-eye.on .eye-show{display:none}
.au-eye.on .eye-hide{display:block}
.au-link{background:none;border:0;padding:0;color:var(--teal);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.au-link:hover{text-decoration:underline}
.au-link.strong{font-size:15px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.au-link.muted{color:var(--muted);font-weight:500}
.au-forgot{display:block;margin:10px 0 4px;margin-inline-start:0}
.au-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;padding:15px;border-radius:999px;border:0;background:#111;color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:background .15s,transform .15s}
.au-btn:hover{background:#2b2b2b;transform:translateY(-1px)}
.au-btn:disabled{opacity:.6;transform:none}
.au-sep{display:flex;align-items:center;gap:10px;margin:16px 0;color:#8b9aa4;font-size:12px}
.au-sep::before,.au-sep::after{content:"";flex:1;height:1px;background:#d5dde2}
.au-google{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:13px;border-radius:999px;border:1px solid var(--border-md);background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.au-google:hover{background:var(--hover)}
.au-foot{text-align:center;margin-top:22px;color:var(--muted);font-size:14px}
.au-msg{font-size:13px;color:#b42318;margin-top:12px;text-align:center;line-height:1.7}
.au-msg:empty{display:none}
.au-msg.ok{color:var(--teal)}
.au-brand{text-align:center;font-size:11px;color:#8b9aa4;margin:24px 0 0;line-height:1.9}
.au-brand a{color:inherit}
#authView .kind-pick{margin:6px 0 2px}
#authView .kind-pick span{padding:11px 4px;border-radius:12px}
.au-row[hidden]{display:none}
@media (max-width:900px){
  .auth-screen{flex-direction:column;padding:0;display:block}
  .au-art{position:absolute;top:0;inset-inline:0;height:30vh;min-height:0;border-radius:0;display:block;
    -webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
  .au-art-text{display:none}
  .au-art{background-position:center 85%}
  .au-art{pointer-events:none;z-index:0}
  .au-form{position:relative;z-index:1;align-items:flex-start;padding:calc(30vh - 50px) 20px 28px}
  .au-hello h1{font-size:25px}
}
.sb-expiry{margin:8px 14px;padding:8px 10px;border-radius:10px;background:var(--hover);color:var(--teal-dark);font-size:.8rem;font-weight:600;cursor:pointer;text-align:center}
.sb-expiry.over{background:var(--red-tint);color:#b3261e}
.list-table{width:100%;border-collapse:collapse;background:var(--surface);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:var(--surface2)}
.list-table tr[data-quote]{cursor:pointer}
.list-table tr[data-quote]:hover td{background:var(--tint)}
.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:var(--surface);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}
}

/* ---------- 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:var(--hover)}
.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:var(--surface)}
.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:var(--surface);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:var(--amber-tint);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}

/* Sign out: the full-width red pill at the end of «حسابي», as in Miqas / Tadma */
.acc-logout{width:100%;height:52px;margin-top:16px;border:none;border-radius:999px;background:var(--red-tint);color:#b42318;font-family:inherit;font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.acc-logout:hover{background:var(--red-tint)}

/* Home greeting + bell (as in Miqas) */
.home-head{align-items:flex-start}
.home-head h1{font-size:32px;font-weight:800}
.home-sub{color:var(--txt2);font-size:15px;margin-top:4px}
.home-section{font-size:17px;font-weight:700;margin:6px 0 12px}
#homeRefresh.spin svg{animation:spin .5s linear}
@keyframes spin{to{transform:rotate(360deg)}}
.bell{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border:0;border-radius:12px;background:transparent;color:var(--txt2);cursor:pointer;padding:0;flex-shrink:0}
.bell:hover{background:var(--hover);color:var(--ink)}
.bell-badge{position:absolute;top:2px;inset-inline-end:0;min-width:20px;height:18px;padding:0 5px;border-radius:9px;background:#e5484d;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;direction:ltr}
.topbar .bell{margin-inline-start:auto}
.bell-panel{position:fixed;z-index:120;width:320px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(17,38,51,.16);padding:8px}
.bell-head{font-weight:700;padding:8px 10px 6px}
.bell-item{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:start;border:0;background:none;border-radius:10px;padding:10px;font:inherit;font-size:14px;color:var(--ink);cursor:pointer;line-height:1.6}
.bell-item:hover{background:var(--hover)}
.bell-dot{width:8px;height:8px;border-radius:50%;margin-top:8px;flex-shrink:0;background:var(--teal)}
.bell-item.red .bell-dot{background:#e5484d}
.bell-item.amber .bell-dot{background:#d89614}
.bell-empty{color:var(--muted);font-size:14px;padding:14px 10px}
@media (max-width:720px){.home-head h1{font-size:26px}}

/* Super admin (as in Miqas) */
.adm-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:4px 0 18px;overflow-x:auto}
.adm-tab{border:0;background:none;font:inherit;font-weight:700;color:var(--muted);padding:10px 14px;border-bottom:2.5px solid transparent;cursor:pointer;white-space:nowrap}
.adm-tab.active{color:var(--teal);border-bottom-color:var(--teal)}
.adm-money{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
.adm-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px}
.adm-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:18px;padding:18px 20px;font:inherit;text-align:start;color:var(--ink);min-width:0}
.adm-card b{font-size:30px;font-weight:800;line-height:1.2}
.adm-money .adm-card b{font-size:26px}
.adm-card span{color:var(--muted);font-size:14px}
.adm-card.stat{cursor:pointer}
.adm-card.stat:hover{border-color:#b9cbd3}
.adm-card.stat.on{border-color:var(--teal);box-shadow:0 0 0 2px #d4ecea}
.adm-card .green,.adm-badge.green{color:#12a150}
.adm-card .blue{color:#2563eb}
.adm-card .amber{color:#d89614}
.adm-card .red{color:#e5484d}
.adm-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 14px}
.adm-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface,#fff);border-radius:999px;padding:7px 14px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.adm-chip i{font-style:normal;background:#111;color:#fff;border-radius:999px;min-width:22px;height:22px;display:inline-grid;place-items:center;font-size:12px;padding:0 6px}
.adm-chip.on{border-color:var(--teal);background:var(--tint);color:var(--teal-dark)}
.adm-table td{vertical-align:middle}
.adm-table td small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.adm-table td small.warn{color:#d89614;font-weight:600}
.adm-badge{display:inline-block;padding:3px 12px;border-radius:999px;font-size:13px;font-weight:700;background:var(--tint)}
.adm-badge.blue{background:#e8f0fe;color:#2563eb}
.adm-badge.red{background:var(--red-tint);color:#e5484d}
.adm-btn{border:1px solid var(--line);background:var(--surface,#fff);color:var(--ink);border-radius:999px;padding:6px 14px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.adm-btn.dark{background:#111;border-color:#111;color:#fff}
.adm-btn.red{color:#e5484d;border-color:#f3c4c5}
.adm-empty{text-align:center;color:var(--muted);padding:24px!important}
.pay-for{color:var(--muted);font-size:14px;margin:-8px 0 14px}
.cd-grid select{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-color:var(--surface)}
@media (max-width:900px){.adm-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.adm-money{grid-template-columns:1fr}}
@media (max-width:520px){.adm-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.adm-card{padding:14px 16px}.adm-card b{font-size:24px}}
.adm-table .row-btns{display:flex;flex-wrap:nowrap;gap:6px;justify-content:flex-start}
.adm-table td small{white-space:nowrap}
.adm-table td:first-child b{color:var(--ink)}
@media (max-width:720px){
  .adm-table{overflow:visible;border:0;background:none;box-shadow:none}
  .adm-table .list-table{background:none;border:0}
  .adm-table .list-table thead{display:none}
  .adm-table .list-table tbody,.adm-table .list-table tr{display:block;width:100%}
  .adm-table .list-table tr{background:var(--surface,#fff);border:1px solid var(--line);border-radius:16px;padding:10px 14px;margin-bottom:10px}
  .adm-table .list-table td,.adm-table .list-table td:nth-child(5){display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:10px;align-items:center;padding:6px 0;border:0;text-align:start}
  .adm-table .list-table td::before{grid-row:1 / span 3;color:var(--muted);font-size:13px}
  .adm-table .list-table td > *{grid-column:2}
  .adm-table .list-table td:first-child{display:block;font-size:16px;padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:4px}
  #adminList td:nth-child(2)::before{content:'المالك'}
  #adminList td:nth-child(3)::before{content:'الباقة'}
  #adminList td:nth-child(4)::before{content:'المستخدمون'}
  #adminList td:nth-child(5)::before{content:'المشاريع'}
  #adminList td:nth-child(6)::before{content:'الحالة'}
  #adminList td:nth-child(7)::before{content:'الانتهاء'}
  #adminList td:nth-child(8)::before{content:'المدفوع'}
  #adminList td:nth-child(9){display:block;padding-top:10px}
  #adminPayList td:nth-child(1)::before{content:'التاريخ'}
  #adminPayList td:nth-child(2)::before{content:'الحساب'}
  #adminPayList td:nth-child(3)::before{content:'الباقة'}
  #adminPayList td:nth-child(4)::before{content:'المدة'}
  #adminPayList td:nth-child(5)::before{content:'المبلغ'}
  #adminPayList td:nth-child(6)::before{content:'ملاحظة'}
  #adminPayList td:first-child{display:grid;font-size:inherit;border:0;margin:0;padding:6px 0}
  .adm-table .adm-badge{justify-self:start}
}
.adm-table .list-table th,.adm-table .list-table td{padding:12px 10px}
.adm-table td:nth-child(8){white-space:nowrap}
.adm-btn{padding:6px 12px}
@media (max-width:720px){.adm-table .list-table td > *{justify-self:start;text-align:start}}
.adm-table .row-btns{flex-wrap:wrap;max-width:150px}
@media (max-width:720px){.adm-table .row-btns{max-width:none}}

/* ---------- Dark mode (html[data-theme=dark], set before paint from localStorage or the system) ---------- */
:root{--hover:#eaf4f3;--tint:#e7f5f2;--on-primary:#fff;--red-tint:#fdecea;--amber-tint:#fff3df}
html[data-theme=dark]{color-scheme:dark;
  --bg:#111315;--surface:#1a1d20;--surface2:#16181b;--surface3:#23272b;--border:#2b3034;--border-md:#3a4045;
  --txt1:#e9ecee;--txt2:#a2abb2;--txt3:#79838a;--primary:#eceff1;--primary-h:#ffffff;--on-primary:#111;
  --line:#2b3034;--ink:#e9ecee;--muted:#a2abb2;--navy:#0c0f11;--teal:#3cc2b8;--teal-dark:#62d4cb;
  --hover:#23292c;--tint:#17302e;--red-tint:#3a1a1b;--amber-tint:#33290f}
html[data-theme=dark] body{background:var(--bg);color:var(--txt1)}
html[data-theme=dark] .btn-primary,html[data-theme=dark] .au-btn,html[data-theme=dark] .adm-btn.dark,html[data-theme=dark] .fab,html[data-theme=dark] .primary{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
html[data-theme=dark] .btn-primary:hover,html[data-theme=dark] .au-btn:hover{background:var(--primary-h)}
html[data-theme=dark] .adm-chip i,html[data-theme=dark] .toast{background:#eceff1;color:#111}
html[data-theme=dark] input,html[data-theme=dark] textarea,html[data-theme=dark] select{color:var(--txt1);background-color:var(--surface)}
html[data-theme=dark] input::placeholder,html[data-theme=dark] textarea::placeholder{color:var(--txt3)}
html[data-theme=dark] .auth-screen{background:var(--bg)}
html[data-theme=dark] .adm-badge.green{background:#173323}
html[data-theme=dark] .adm-badge.blue{background:#172540;color:#7aa7ff}
html[data-theme=dark] .adm-badge.red,html[data-theme=dark] .warning{background:#3a1a1b}
html[data-theme=dark] .adm-card .blue{color:#7aa7ff}
html[data-theme=dark] .adm-chip.on{background:var(--tint);color:var(--teal-dark)}
html[data-theme=dark] .adm-btn.red{border-color:#5a2a2c}
html[data-theme=dark] .au-back{background:var(--tint)}
html[data-theme=dark] .bell-panel,html[data-theme=dark] dialog{background:var(--surface);color:var(--txt1)}
html[data-theme=dark] dialog::backdrop{background:rgba(0,0,0,.6)}
html[data-theme=dark] .sb-logo,html[data-theme=dark] .tb-logo,html[data-theme=dark] .au-hello img{filter:brightness(1.35)}
html[data-theme=dark] .list-table th{background:var(--surface2);color:var(--txt2)}
html[data-theme=dark] .list-table td{border-color:var(--border)}
/* drawings stay on white paper so their colours read as on print */
html[data-theme=dark] .board-svg,html[data-theme=dark] .slab-card svg,html[data-theme=dark] .room-editor svg{background:#fff;border-radius:6px}
.theme-btn .moon{display:block}.theme-btn .sun{display:none}
html[data-theme=dark] .theme-btn .moon{display:none}
html[data-theme=dark] .theme-btn .sun{display:block}
html[data-theme=dark] .area-summary,html[data-theme=dark] .stat,html[data-theme=dark] .cost-grid > div{color:var(--txt1)}

/* Super admin: full screen, no sidebar (same as Miqas) */
body.admin-mode .sidebar,body.admin-mode .topbar,body.admin-mode .fab,body.admin-mode .sidebar-backdrop{display:none!important}
.adm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.adm-brand{display:flex;align-items:center;gap:12px;min-width:0}
.adm-logo{width:46px;height:46px;border-radius:12px;flex-shrink:0}
.adm-head h1{font-size:1.35rem;margin:0}
.adm-head .bell{position:relative}
@media (max-width:600px){.adm-head h1{font-size:1.1rem}.adm-open{padding:6px 10px;font-size:.8rem}}

/* Home board: quick calculation, continue, quotes waiting, offcuts */
.home-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin:4px 0 22px}
.hb-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:0}
.hb-title{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:700;margin-bottom:8px}
.hb-title .btn-outline{padding:5px 14px}
.hb-count{font-style:normal;background:var(--tint);color:var(--teal);border-radius:20px;padding:1px 9px;font-size:.8rem}
.hb-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;width:100%;text-align:start;border:0;background:transparent;padding:8px 2px;border-radius:8px}
.hb-row:hover{background:var(--tint)}
.hb-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-row small{grid-column:1;color:var(--muted)}
.hb-go{grid-row:1/3;grid-column:2;color:var(--teal);font-weight:600;font-size:.85rem}
.hb-quote{display:flex;align-items:center;gap:6px;border-top:1px solid var(--line)}
.hb-quote:first-of-type{border-top:0}
.hb-quote .hb-row{flex:1;min-width:0;grid-template-columns:1fr}
.hb-yes,.hb-no{width:34px;height:34px;padding:0;border-radius:50%;font-weight:700;flex-shrink:0}
.hb-yes{color:var(--teal)}.hb-yes:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.hb-no{color:#b54a3c}.hb-no:hover{background:#b54a3c;color:#fff;border-color:#b54a3c}
.hb-late{color:var(--amber);font-weight:600}
.hb-offcuts{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.hb-offcut{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border-radius:10px;min-width:0}
.hb-offcut:hover{border-color:var(--teal)}
.hb-offcut small{color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-offcut .hb-go{font-size:.75rem}
.hb-shape{width:56px;max-height:44px;background:repeating-linear-gradient(135deg,var(--tint) 0 6px,transparent 6px 10px);border:1.5px solid var(--teal);border-radius:3px}
.hb-quick-form{display:grid;gap:10px}
.hb-quick-form label{display:grid;gap:5px;font-size:.85rem;color:var(--muted)}
.hb-size{display:flex;align-items:center;gap:8px}
.hb-size input{flex:1;min-width:0}
.hb-quick-form input,.hb-quick-form textarea{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;background:var(--surface);color:inherit}
.hb-actions{display:flex;gap:8px}
@media (max-width:600px){.home-board{grid-template-columns:1fr}}

/* Lastra stock box in the results */
.lastra-box{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:16px 0;display:grid;gap:10px;justify-items:start}
.lastra-box h3{margin:0;font-size:1rem}
.lastra-box p{margin:0;font-size:.85rem;color:var(--muted);line-height:1.8}