/* ============================================================================
   K3 HVAC SYSTEM — styles
   Industrial / utilitarian: deep navy, teal, amber accent. RTL-first.
   ============================================================================ */
:root{
  --navy:#0f1c2e; --navy-2:#16263b; --panel:#1b2c43; --line:#26405d;
  --ink:#eaf1f8; --muted:#9fb3c8; --teal:#1fb6b0; --teal-d:#159b96;
  --amber:#f2b134; --green:#27ae60; --red:#e2574c; --blue:#3d8bfd;
  --bg:#f4f6f9; --card:#ffffff; --card-line:#e4e9f0; --txt:#1b2733; --txt-2:#5b6b7c;
  --radius:12px; --radius-sm:8px; --shadow:0 1px 2px rgba(15,28,46,.06),0 6px 24px rgba(15,28,46,.06);
  --ar:'IBM Plex Sans Arabic',system-ui,sans-serif; --disp:'Sora',var(--ar); --mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--ar);background:var(--bg);color:var(--txt);font-size:14px;line-height:1.5}
.hidden{display:none !important}
a{color:var(--teal-d);text-decoration:none}
h1,h2,h3,b,strong{font-family:var(--disp)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#cdd6e2;border-radius:8px}

/* ---- Login ---- */
.auth{min-height:100vh;display:grid;place-items:center;
  background:radial-gradient(1200px 600px at 80% -10%,#1c3350,transparent),var(--navy)}
.auth-card{width:360px;max-width:92vw;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.4);color:var(--ink)}
.auth-brand{display:flex;gap:12px;align-items:center;margin-bottom:22px}
.auth-brand small{display:block;color:var(--muted);font-size:11px}
.mark{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;font-family:var(--disp);
  font-weight:700;color:var(--navy);background:linear-gradient(135deg,var(--teal),var(--amber));font-size:16px}
.auth-field{margin-bottom:14px}
.auth-field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.auth-field input{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);
  background:#13233a;color:var(--ink);font-family:var(--ar)}
.auth-field input:focus{outline:2px solid var(--teal)}
.btn-block{width:100%;justify-content:center;margin-top:6px}
.auth-msg{min-height:18px;font-size:12.5px;margin-top:10px;color:var(--amber)}
.hint{color:var(--muted);font-size:11px;margin-top:14px;text-align:center}

/* ---- App layout ---- */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sidebar{background:var(--navy);color:var(--ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-brand{display:flex;gap:11px;align-items:center;padding:18px 16px;border-bottom:1px solid var(--line)}
.side-brand small{display:block;color:var(--muted);font-size:10.5px}
.nav{flex:1;overflow:auto;padding:10px 8px;display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;gap:10px;align-items:center;width:100%;text-align:start;background:transparent;
  border:0;color:#c7d4e2;padding:10px 12px;border-radius:9px;cursor:pointer;font-family:var(--ar);font-size:13.5px}
.nav button .ico{width:18px;text-align:center;opacity:.9}
.nav button:hover{background:#13233a;color:#fff}
.nav button.active{background:linear-gradient(90deg,rgba(31,182,176,.18),transparent);color:#fff;
  box-shadow:inset 3px 0 0 var(--teal)}
.side-foot{padding:12px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px}
.who{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:14px;padding:14px 22px;background:var(--card);
  border-bottom:1px solid var(--card-line);position:sticky;top:0;z-index:20}
.topbar h1{font-size:18px;flex:1}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}
.icon-btn{display:none;background:none;border:1px solid var(--card-line);border-radius:8px;width:36px;height:34px;cursor:pointer}
.view{padding:22px;max-width:1500px;width:100%}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--card-line);background:var(--card);
  color:var(--txt);padding:9px 14px;border-radius:10px;cursor:pointer;font-family:var(--ar);font-size:13px;
  font-weight:500;transition:.15s;white-space:nowrap}
.btn:hover{border-color:#c3cfdd;box-shadow:var(--shadow)}
.btn-primary{background:var(--teal);border-color:var(--teal);color:#04201f;font-weight:600}
.btn-primary:hover{background:var(--teal-d)}
.btn-amber{background:var(--amber);border-color:var(--amber);color:#3a2a00;font-weight:600}
.btn-dark{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-ghost{background:transparent}
.btn-danger{color:var(--red);border-color:#f0c8c4}
.btn-sm{padding:6px 10px;font-size:12px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---- Cards / panels ---- */
.card{background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-pad{padding:18px}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 14px}
.section-title h2{font-size:15px}
.grid{display:grid;gap:14px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.kpi .lbl{font-size:11.5px;color:var(--txt-2);font-weight:500}
.kpi .val{font-family:var(--disp);font-size:21px;font-weight:700;margin-top:6px}
.kpi .val small{font-size:12px;color:var(--txt-2);font-weight:500}
.kpi.teal{border-top:3px solid var(--teal)} .kpi.amber{border-top:3px solid var(--amber)}
.kpi.green{border-top:3px solid var(--green)} .kpi.blue{border-top:3px solid var(--blue)}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px;margin-top:14px}
.chart-box{background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.chart-box h3{font-size:13px;color:var(--txt-2);margin-bottom:10px}
.chart-box .cv{position:relative;height:240px}

/* ---- Forms ---- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 16px}
.fld label{display:block;font-size:12px;color:var(--txt-2);margin-bottom:5px;font-weight:500}
.fld input,.fld select,.fld textarea{width:100%;padding:9px 11px;border:1px solid var(--card-line);
  border-radius:9px;font-family:var(--ar);font-size:13px;background:#fff;color:var(--txt)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--teal);border-color:var(--teal)}
.fld textarea{min-height:70px;resize:vertical}
.fld .ro{background:#f1f4f8;color:var(--txt-2)}
.row-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ---- Filter bar ---- */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;background:var(--card);
  border:1px solid var(--card-line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);margin-bottom:14px}
.filters .fld{min-width:140px}
.filters .fld.sm{min-width:110px}
.chip-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--txt-2);
  border:1px solid var(--card-line);padding:8px 11px;border-radius:9px;cursor:pointer;background:#fff;user-select:none}
.chip-toggle.on{background:var(--teal);color:#04201f;border-color:var(--teal);font-weight:600}

/* ---- Tables ---- */
.tbl-wrap{overflow:auto;border:1px solid var(--card-line);border-radius:var(--radius);background:var(--card)}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
table.tbl th,table.tbl td{padding:9px 11px;border-bottom:1px solid var(--card-line);text-align:start;white-space:nowrap}
table.tbl thead th{background:#f7f9fc;color:var(--txt-2);font-weight:600;position:sticky;top:0;cursor:pointer;user-select:none}
table.tbl thead th.no-sort{cursor:default}
table.tbl tbody tr:hover{background:#f5fbfb}
table.tbl tfoot td{background:#f7f9fc;font-weight:700;border-top:2px solid var(--card-line)}
table.tbl .num{text-align:end;font-variant-numeric:tabular-nums}
.grp-row td{background:#eef4f4;font-weight:700;color:var(--navy)}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;color:#fff}
.linkish{color:var(--teal-d);cursor:pointer;font-weight:600}
.latest-yes{color:var(--green);font-weight:700}.latest-no{color:var(--muted)}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:10px}
.muted{color:var(--txt-2)} .tiny{font-size:11px} .right{text-align:end} .center{text-align:center}
.empty{padding:40px;text-align:center;color:var(--txt-2)}

/* editable grids (quotation lines) */
.lines{width:100%;border-collapse:collapse;font-size:12.5px}
.lines th,.lines td{border:1px solid var(--card-line);padding:4px}
.lines th{background:#f7f9fc;color:var(--txt-2);font-weight:600;font-size:11.5px;padding:7px 6px}
.lines input,.lines select{width:100%;border:0;background:transparent;padding:6px 5px;font-family:var(--ar);font-size:12.5px}
.lines input:focus,.lines select:focus{outline:2px solid var(--teal);border-radius:5px}
.lines td.num input{text-align:end}
.lines .del{color:var(--red);cursor:pointer;border:0;background:none;font-size:15px}
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--card-line);
  border:1px solid var(--card-line);border-radius:var(--radius);overflow:hidden}
.summary .s{background:#fff;padding:11px 13px}
.summary .s .l{font-size:11px;color:var(--txt-2)} .summary .s .v{font-family:var(--disp);font-weight:700;font-size:16px}
.summary .s.hl{background:#0f1c2e;color:#fff}.summary .s.hl .l{color:#9fb3c8}
.summary .s.profit{background:#0d2b27;color:#eafffb}.summary .s.profit .l{color:#7fd8cf}

/* column manager */
.colmgr{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.colmgr .c{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--card-line);background:#fff;
  border-radius:8px;padding:5px 9px;font-size:12px;cursor:grab}
.colmgr .c.off{opacity:.4}.colmgr .c.drag{outline:2px dashed var(--teal)}

/* ---- Modal ---- */
.modal-bg{position:fixed;inset:0;background:rgba(8,16,28,.55);display:grid;place-items:center;z-index:60;padding:20px}
.modal{background:#fff;border-radius:16px;width:min(720px,96vw);max-height:90vh;overflow:auto;box-shadow:0 40px 100px rgba(0,0,0,.4)}
.modal.lg{width:min(960px,96vw)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--card-line);position:sticky;top:0;background:#fff;z-index:2}
.modal-head h3{font-size:16px}.modal-body{padding:20px}.modal-foot{padding:14px 20px;border-top:1px solid var(--card-line);display:flex;gap:8px;justify-content:flex-end;position:sticky;bottom:0;background:#fff}
.x{border:0;background:none;font-size:22px;cursor:pointer;color:var(--txt-2);line-height:1}

/* ---- Toast ---- */
.toast{position:fixed;inset-inline-end:20px;bottom:20px;background:var(--navy);color:#fff;padding:12px 18px;
  border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.35);z-index:80;font-size:13px;max-width:340px}
.toast.ok{background:#0d2b27;box-shadow:0 0 0 1px #1fb6b0 inset,0 18px 50px rgba(0,0,0,.35)}
.toast.err{background:#3a1714;box-shadow:0 0 0 1px #e2574c inset,0 18px 50px rgba(0,0,0,.35)}

/* loading */
.load{display:grid;place-items:center;padding:60px;color:var(--txt-2)}
.spin{width:30px;height:30px;border:3px solid #d9e2ec;border-top-color:var(--teal);border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* template editor */
.tmpl-edit textarea{min-height:120px;font-family:var(--ar);width:100%;border:1px solid var(--card-line);border-radius:9px;padding:10px;font-size:13px}
.vars{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.vars code{background:#0f1c2e;color:#9fe9e3;border-radius:6px;padding:3px 7px;font-family:var(--mono);font-size:11px;cursor:pointer}

@media (max-width:920px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;inset-inline-start:0;top:0;width:248px;z-index:50;transform:translateX(100%);transition:.25s}
  html[dir=rtl] .sidebar{transform:translateX(100%)} .sidebar.open{transform:translateX(0)!important}
  .icon-btn{display:block}
  .view{padding:14px}
  .topbar{padding:11px 14px;gap:10px}
  .topbar h1{font-size:16px}
  .grid{grid-template-columns:1fr!important}
  .form-grid{grid-template-columns:1fr 1fr!important}
  .charts{grid-template-columns:1fr!important}
  .kpis{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:560px){
  .view{padding:10px}
  .form-grid{grid-template-columns:1fr!important}
  .kpis{grid-template-columns:1fr 1fr!important}
  .filters{flex-direction:column;align-items:stretch}
  .filters .fld{width:100%}
  .row-actions{flex-wrap:wrap}
  .row-actions .btn{flex:1 1 auto}
  .top-actions{flex-wrap:wrap;justify-content:flex-end}
  .pay-tbl input{min-width:60px}
}

/* =================== PRINT / PDF (A4 quotation) =================== */
.print-doc{display:none}
@media print{
  body *{visibility:hidden}
  #printArea,#printArea *{visibility:visible}
  #printArea{position:absolute;inset:0;display:block;padding:0;margin:0}
  @page{size:A4;margin:14mm}
}
#printArea{font-family:var(--ar);color:#111}
.pa-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px double #0f1c2e;padding-bottom:10px;margin-bottom:12px}
.pa-head .co{font-family:var(--disp);font-weight:700;font-size:18px}
.pa-meta{font-size:12px;text-align:start}
.pa-title{text-align:center;font-weight:700;font-size:16px;margin:10px 0}
#printArea table{width:100%;border-collapse:collapse;font-size:12px;margin:8px 0}
#printArea table th,#printArea table td{border:1px solid #444;padding:6px 7px;text-align:start}
#printArea table th{background:#eef2f6}
#printArea h4{margin:12px 0 5px;font-size:13px}
.pa-foot{margin-top:24px;text-align:center;font-weight:600}

/* ============================================================================
   V2 ENHANCEMENTS
   ============================================================================ */

/* ---- Sidebar branding + collapse ---- */
.side-brand img.brand-logo{width:40px;height:40px;border-radius:9px;object-fit:contain;background:#fff;padding:3px}
.side-foot .who-wrap{display:flex;flex-direction:column;line-height:1.2;overflow:hidden}
.side-foot .who-role{font-size:10px;color:var(--teal)}
.app.collapsed{grid-template-columns:64px 1fr}
.app.collapsed .sidebar .label,
.app.collapsed .side-brand small,
.app.collapsed .side-brand b,
.app.collapsed .side-foot .who-wrap,
.app.collapsed .nav button span:not(.ico){display:none}
.app.collapsed .nav button{justify-content:center}
.app.collapsed .side-brand{justify-content:center;padding:16px 0}
.collapse-btn{position:absolute;top:14px;inset-inline-end:-12px;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--line);background:var(--navy-2);color:#cbd6e3;cursor:pointer;z-index:60;display:grid;place-items:center;font-size:12px}
@media (min-width:921px){
  .app{height:100vh;overflow:hidden}
  .main{height:100vh;overflow-y:auto}
  .sidebar{position:sticky;top:0;height:100vh;align-self:start}
  .topbar{position:sticky;top:0;z-index:5}
}
.rm-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.rm-filters{display:flex;gap:12px;flex-wrap:wrap}
.rm-actions{flex-wrap:wrap;justify-content:flex-end}
.nav button .badge{margin-inline-start:auto;background:var(--red);color:#fff;border-radius:999px;font-size:10px;padding:1px 6px;font-weight:700}
.app.collapsed .nav button .badge{position:absolute;inset-inline-end:8px;top:6px;margin:0}

/* ---- Compact CRM-style tables ---- */
table.tbl.compact th,table.tbl.compact td{padding:6px 10px;font-size:12.5px}
table.tbl.compact tbody tr:nth-child(odd){background:#fafcfe}
table.tbl.compact tbody tr:hover{background:#eef9f8}
.table-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.table-toolbar input.search{padding:8px 11px;border:1px solid var(--card-line);border-radius:9px;min-width:200px}
.qfilter{display:inline-flex;gap:6px;flex-wrap:wrap}
.qfilter .qf{font-size:12px;border:1px solid var(--card-line);background:#fff;border-radius:999px;padding:5px 11px;cursor:pointer}
.qfilter .qf.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.cellname{font-weight:600;color:var(--navy)}
.icon-link{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:7px;border:1px solid var(--card-line);
  background:#fff;cursor:pointer;text-decoration:none;color:var(--txt-2);font-size:13px}
.icon-link:hover{border-color:var(--teal);color:var(--teal-d)}
.icon-link.wa:hover{color:#25d366;border-color:#25d366}
.act-col{display:inline-flex;gap:5px}

/* ---- Tabs (settings, contract editor, template editor) ---- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--card-line);margin-bottom:16px;flex-wrap:wrap}
.tabs button{border:0;background:transparent;padding:10px 16px;cursor:pointer;font-family:var(--ar);font-size:13.5px;
  color:var(--txt-2);border-bottom:2px solid transparent;font-weight:500}
.tabs button.active{color:var(--teal-d);border-bottom-color:var(--teal)}
.tabpane{display:none}.tabpane.active{display:block}

/* ---- Report Center: report-type picker ---- */
.report-types{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:14px}
.rt-card{border:1px solid var(--card-line);border-radius:10px;padding:12px 14px;cursor:pointer;background:#fff;transition:.15s}
.rt-card:hover{border-color:var(--teal);box-shadow:var(--shadow)}
.rt-card.on{border-color:var(--teal);box-shadow:0 0 0 2px rgba(31,182,176,.25)}
.rt-card .t{font-weight:600;font-size:13px}.rt-card .d{font-size:11px;color:var(--txt-2);margin-top:3px}
.rt-group{font-family:var(--disp);font-size:12px;color:var(--txt-2);text-transform:uppercase;letter-spacing:.5px;margin:14px 0 6px}

/* ---- Full-page document editor (contracts + quotations) ---- */
.doc-editor{display:grid;grid-template-columns:1fr;gap:14px}
.doc-toolbar{position:sticky;top:64px;z-index:15;background:var(--card);border:1px solid var(--card-line);
  border-radius:12px;padding:10px 14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;box-shadow:var(--shadow)}
.doc-section{background:var(--card);border:1px solid var(--card-line);border-radius:12px;overflow:hidden}
.doc-section>.h{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#f7f9fc;
  border-bottom:1px solid var(--card-line);cursor:grab}
.doc-section>.h .t{font-weight:600;font-size:13px;color:var(--navy)}
.doc-section>.b{padding:14px}
.doc-section.dragging{opacity:.5;outline:2px dashed var(--teal)}
.drag-handle{color:var(--muted);cursor:grab;font-size:15px}

/* ---- Visual template designer (A4 canvas) ---- */
.tpl-wrap{display:flex;flex-direction:column;gap:16px;align-items:stretch}
.tpl-blocks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;align-items:start;margin-top:10px}
.tpl-canvas-wrap{background:transparent;border:1px solid var(--card-line);border-radius:8px;padding:0;overflow:auto;max-height:560px;margin-top:10px}
.tpl-canvas-wrap .a4{box-shadow:none;margin:0 auto}
@media (max-width:680px){ .tpl-blocks-grid{grid-template-columns:1fr} }
.a4{background:#fff;width:794px;min-height:1123px;margin:0 auto;box-shadow:0 10px 40px rgba(0,0,0,.35);
  padding:14mm;font-family:'IBM Plex Sans Arabic',sans-serif;color:#111}
.a4 [contenteditable]{outline:0}
.a4 [contenteditable]:focus{box-shadow:0 0 0 2px rgba(31,182,176,.4);border-radius:3px}
.a4 .blk{margin-bottom:10px;position:relative;border:1px dashed transparent;padding:4px}
.a4 .blk:hover{border-color:#cfd8e3}
.a4 .blk.sel{border-color:var(--teal)}
.a4 table{width:100%;border-collapse:collapse;font-size:12px;margin:6px 0}
.a4 table th,.a4 table td{border:1px solid #555;padding:5px 7px;position:relative}
.a4 table th{background:#eef2f6}
.a4 .col-resize{position:absolute;top:0;inset-inline-end:-3px;width:6px;height:100%;cursor:col-resize}
.a4 .lh{border-bottom:3px double #1fb6b0;padding-bottom:8px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.a4 .lh img{height:48px}
.tpl-tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center;background:var(--card);border:1px solid var(--card-line);
  border-radius:10px;padding:8px;margin-bottom:10px;position:sticky;top:64px;z-index:14}
.tpl-tools select,.tpl-tools input{padding:5px 7px;border:1px solid var(--card-line);border-radius:7px;font-size:12px}
.tpl-tools .sep{width:1px;height:22px;background:var(--card-line)}

/* logo previews */
.logo-prev{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.logo-prev img{max-height:80px;max-width:160px;border:1px solid var(--card-line);border-radius:8px;background:#fff;padding:6px;object-fit:contain}
.lh-prev img{max-height:160px;border:1px solid var(--card-line);border-radius:8px}

/* dashboard brand strip */
.brandbar{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.brandbar img{height:46px}
.brandbar .nm{font-family:var(--disp);font-weight:700;font-size:18px;color:var(--navy)}
.brandbar .sub{font-size:12px;color:var(--txt-2)}

/* ============================================================================
   SMART PRINT ENGINE  (paged A4, repeating headers, no orphan rows)
   ============================================================================ */
#printArea .page{position:relative}
@media screen{
  #printArea{background:#5b6b7c;padding:20px}
  #printArea .sheet{background:#fff;width:794px;margin:0 auto 18px;padding:14mm;box-shadow:0 10px 40px rgba(0,0,0,.3);min-height:1123px}
}
@media print{
  .sheet{page-break-after:always}
  .sheet:last-child{page-break-after:auto}
  table{page-break-inside:auto}
  tr{page-break-inside:avoid;page-break-after:auto}
  thead{display:table-header-group}
  tfoot{display:table-footer-group}
  .keep-together{page-break-inside:avoid}
  h3,h4{page-break-after:avoid}
}

/* Internal-only pricing banner (in-app; never printed to customer) */
.int-banner{margin-top:14px;background:#fff4e5;border:1px solid #f0c98a;color:#92500a;border-radius:10px 10px 0 0;padding:8px 12px;font-size:12px;font-weight:600}
.int-banner + .summary{border-top-left-radius:0;border-top-right-radius:0}
.totals-cust th{background:#eef2f6}

/* Collapsible editor sections (Project Information / Document Fields) */
details.card-pad > summary, details.doc-section > summary{list-style:none;user-select:none}
details.card-pad > summary::-webkit-details-marker, details.doc-section > summary::-webkit-details-marker{display:none}
details.card-pad > summary::before, details.doc-section > summary::before{content:'▸';display:inline-block;margin-inline-end:8px;color:var(--teal);transition:transform .15s}
details[open].card-pad > summary::before, details[open].doc-section > summary::before{transform:rotate(90deg)}
details.doc-section > summary{padding:10px 12px;background:#f6f8fa;font-weight:600}

/* ===== Reports Center (rebuilt) ===== */
.rc-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;border-bottom:2px solid var(--card-line);padding-bottom:0}
.rc-nav button{appearance:none;border:none;background:transparent;padding:11px 18px;font-size:14px;font-weight:600;color:#5b6b7e;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;border-radius:8px 8px 0 0}
.rc-nav button:hover{background:#f1f5f9;color:var(--navy)}
.rc-nav button.active{color:var(--teal);border-bottom-color:var(--teal)}
.rc-pane.hidden{display:none}
.kpis-exec{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.rc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.rc-card{display:flex;align-items:center;gap:12px;text-align:start;background:var(--card,#fff);border:1px solid var(--card-line);border-radius:14px;padding:16px 16px;cursor:pointer;transition:.15s;font:inherit}
.rc-card:hover{border-color:var(--teal);box-shadow:0 6px 18px rgba(16,28,46,.08);transform:translateY(-2px)}
.rc-card.active{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal) inset}
.rc-card .ic{font-size:24px;line-height:1}
.rc-card .lb{font-weight:600;color:var(--navy)}
@media (max-width:560px){ .rc-nav button{flex:1 1 auto;padding:10px 8px;font-size:12.5px} }

/* ===== Reports Center V2 ===== */
.lib-bar{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.lib-search{flex:1 1 240px;min-width:200px;padding:10px 13px;border:1px solid var(--card-line);border-radius:10px;font:inherit}
.lib-cats{display:flex;gap:6px;flex-wrap:wrap}
.lib-cat{appearance:none;border:1px solid var(--card-line);background:#fff;color:#5b6b7e;padding:7px 14px;border-radius:999px;cursor:pointer;font:inherit;font-size:13px;font-weight:600}
.lib-cat:hover{border-color:var(--teal);color:var(--teal)}
.lib-cat.active{background:var(--teal);border-color:var(--teal);color:#fff}
.rc-card .cardbody{display:flex;flex-direction:column;gap:3px;text-align:start}
.rc-card .ds{font-size:12px;color:#7a8794;font-weight:400}
.alerts .alert-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.alerts .alert-list li{padding:11px 14px;border-radius:10px;font-weight:600;font-size:13.5px;border-inline-start:4px solid #cbd5e1;background:#f8fafc}
.alerts .alert-list li.bad{border-inline-start-color:#e2574c;background:#fdf0ef;color:#a02b22}
.alerts .alert-list li.warn{border-inline-start-color:#f2b134;background:#fef8ec;color:#8a6206}
.alerts .alert-list li.ok{border-inline-start-color:#27ae60;background:#eefaf933;color:#1c7a44}
.bld-cols{margin-top:12px}
.colmgr{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}
.colmgr .c{padding:6px 12px;border:1px solid var(--teal);background:var(--teal);color:#fff;border-radius:999px;font-size:12.5px;cursor:pointer;user-select:none}
.colmgr .c.off{background:#fff;color:#7a8794;border-color:var(--card-line)}
.colmgr .c.drag{opacity:.45}
.kpis-exec{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

/* ===== Template Engine V2 — section blocks ===== */
.tpl-block{background:#fff;border:1px solid var(--card-line);border-radius:10px;margin-bottom:8px;padding:8px 10px}
.tpl-block.off{opacity:.5}
.tpl-block.dragging{opacity:.4;border-style:dashed}
.tb-row{display:flex;align-items:center;gap:8px}
.tb-row .drag-handle{cursor:grab;color:#9aa6b2;font-size:13px}
.tb-label{flex:1;font-weight:600;font-size:13px;display:flex;flex-direction:column;line-height:1.25}
.tb-label em{font-style:normal;font-weight:400;font-size:10.5px;color:#9aa6b2}
.tb-ctrls{display:flex;align-items:center;gap:3px}
.tb-ctrls button{appearance:none;border:1px solid var(--card-line);background:#f8fafc;border-radius:6px;width:24px;height:24px;cursor:pointer;font-size:11px;padding:0;color:#5b6b7e}
.tb-ctrls button:hover{border-color:var(--teal);color:var(--teal)}
.tb-vis{font-size:11px;padding:3px 4px;border:1px solid var(--card-line);border-radius:6px;max-width:104px}
.tb-edit{margin-top:8px}
.tb-edit input,.tb-edit textarea{width:100%;padding:6px 8px;border:1px solid var(--card-line);border-radius:7px;font:inherit;font-size:12px}
.cust-grid{width:100%;border-collapse:collapse;font-size:11px}
.cust-grid th,.cust-grid td{border:1px solid var(--card-line);padding:2px}
.cust-grid th input,.cust-grid td input{border:none;background:transparent;padding:4px;font-size:11px;min-width:60px}
.cust-grid th{background:#f1f5f9}
.cust-grid th button,.cust-grid td button{border:none;background:transparent;color:#c0392b;cursor:pointer;font-size:10px;padding:0 2px}
.cust-edit{margin-top:6px}

/* Settings ▸ Modules cards (moved from sidebar) */
.mod-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.mod-card{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--card-line);border-radius:12px;background:var(--card);text-decoration:none;color:var(--text);transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.mod-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.10)}
.mod-card .mc-ico{font-size:24px;line-height:1}
.mod-card .mc-lbl{font-weight:700;flex:1}
.mod-card .mc-go{opacity:.5;font-size:18px}

/* Variation Orders (VO) editor */
.vo-item{border:1px solid var(--card-line);border-radius:12px;padding:14px;margin-bottom:14px;background:var(--card)}
.vo-item-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.vo-dyn{margin-top:10px;padding-top:10px;border-top:1px dashed var(--card-line)}
.vo-sub{font-weight:700;margin:8px 0 4px;color:var(--accent)}
.vo-replace{display:block}
.vo-replace>div{margin-bottom:14px}
@media(max-width:820px){.vo-replace{grid-template-columns:1fr}}

/* VO mode toggle + compare line */
.seg{display:inline-flex;border:1px solid var(--card-line);border-radius:10px;overflow:hidden}
.seg-btn{padding:7px 14px;background:var(--card);border:none;cursor:pointer;font:inherit;color:var(--text)}
.seg-btn.on{background:var(--accent);color:#fff;font-weight:700}
.vo-compare{margin-top:8px;padding:8px 10px;background:var(--bg);border-radius:8px}

/* System language switch button (top bar) */
.lang-btn{ white-space:nowrap; font-weight:600; border:1px solid var(--line,#d7dee7); background:var(--card,#fff); }
.lang-btn:hover{ background:var(--bg2,#f2f6fb); }

/* ===== Template Document Builder (two-panel) ===== */
.dbx-wrap{ display:flex; gap:14px; align-items:flex-start; margin-top:12px; }
.dbx-nav{ flex:0 0 320px; max-width:320px; padding:10px; display:flex; flex-direction:column; max-height:calc(100vh - 170px); }
.dbx-nav-head{ font-weight:700; padding:4px 6px 10px; display:flex; justify-content:space-between; align-items:center; }
.dbx-list{ overflow:auto; flex:1; display:flex; flex-direction:column; gap:8px; padding:2px; }
.dbx-add{ padding-top:10px; }
.dbx-add select{ width:100%; }
.dbx-card{ display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line,#e1e7ef); border-radius:10px; padding:9px 10px; background:var(--card,#fff); cursor:pointer; transition:border-color .12s, box-shadow .12s; }
.dbx-card:hover{ border-color:#b9c6d6; }
.dbx-card.sel{ border-color:#0ea5a4; box-shadow:0 0 0 2px rgba(14,165,164,.18); }
.dbx-card.off{ opacity:.55; }
.dbx-card.dragging{ opacity:.4; }
.dbx-num{ font-weight:800; font-size:15px; color:#0ea5a4; min-width:24px; }
.dbx-main{ flex:1; min-width:0; }
.dbx-type{ font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dbx-meta{ display:flex; gap:5px; flex-wrap:wrap; margin-top:5px; }
.dbx-badge{ font-size:10px; padding:1px 7px; border-radius:20px; background:#eef2f6; color:#475569; white-space:nowrap; }
.dbx-badge.edit{ background:#e7f6ec; color:#16794a; }
.dbx-badge.sys{ background:#eef2ff; color:#4453c4; }
.dbx-badge.st-on{ background:#e7f6ec; color:#16794a; }
.dbx-badge.st-off{ background:#fdeaea; color:#c0392b; }
.dbx-ctrls{ display:flex; flex-direction:column; gap:2px; }
.dbx-ctrls button{ border:0; background:transparent; cursor:pointer; font-size:12px; line-height:1; padding:2px 4px; border-radius:5px; color:#64748b; }
.dbx-ctrls button:hover{ background:#eef2f6; color:#0f1c2e; }
.dbx-editor{ flex:1; min-height:420px; padding:16px 18px; }
.dbx-empty{ color:#94a3b8; text-align:center; padding:60px 0; }
.dbx-ed-head{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--line,#e1e7ef); padding-bottom:12px; margin-bottom:14px; flex-wrap:wrap; gap:10px; }
.dbx-ed-num{ font-size:11px; font-weight:800; letter-spacing:.08em; color:#0ea5a4; }
.dbx-ed-type{ font-size:18px; font-weight:700; }
.dbx-ed-opts{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.dbx-biling{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.dbx-col{ display:flex; flex-direction:column; }
.dbx-col label{ font-size:11px; font-weight:600; color:#64748b; margin-bottom:4px; }
.dbx-col input, .dbx-col textarea{ border:1px solid var(--line,#d7dee7); border-radius:8px; padding:7px 9px; font-family:inherit; }
.dbx-col textarea{ resize:vertical; line-height:1.7; }
.dbx-sys{ display:flex; gap:14px; align-items:center; background:#f7f9fc; border:1px dashed #cdd7e3; border-radius:10px; padding:18px; }
.dbx-sys-ic{ font-size:28px; }
@media(max-width:880px){ .dbx-wrap{ flex-direction:column; } .dbx-nav{ flex:1 1 auto; max-width:none; width:100%; max-height:none; } .dbx-biling{ grid-template-columns:1fr; } }



/* ===== Dashboard quick-access tiles (engineering ERP, no charts) ===== */
.dash-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:14px; }
.dash-tile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:104px; border:1px solid var(--line,#e1e7ef); border-radius:14px; background:var(--card,#fff); text-decoration:none; color:inherit; transition:border-color .12s, box-shadow .12s, transform .06s; }
.dash-tile:hover{ border-color:#0ea5a4; box-shadow:0 4px 16px rgba(15,28,46,.08); transform:translateY(-1px); }
.dash-tile .dt-ico{ font-size:30px; }
.dash-tile .dt-lbl{ font-weight:600; font-size:14px; }
@media(max-width:780px){ .dash-tiles{ grid-template-columns:repeat(2,1fr); } }

/* Read-only revision banner */
.rev-lock-banner{ background:#fff7e6; border:1px solid #f2c879; color:#7a5800; border-radius:10px; padding:9px 13px; margin-bottom:12px; font-size:13px; font-weight:500; }

/* ===== Zoning multi-page (floor) navigation bar ===== */
.zn-pagebar{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:6px 10px; border-bottom:1px solid var(--card-line,#e1e7ef); }
.zn-pagetab{ display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line,#cdd6e0); border-bottom:3px solid transparent; border-radius:8px 8px 0 0; padding:3px 6px; background:#eef2f7; cursor:pointer; }
.zn-pagetab.active{ background:#fff; border-bottom-color:#0ea5a4; }
.zn-pagetab .zn-floorname{ border:none; background:transparent; font-size:12px; font-weight:600; width:96px; cursor:text; color:inherit; }
.zn-pagetab.active .zn-floorname{ color:#0c6e6c; }
.zn-pagedel{ color:#c0392b; font-size:11px; cursor:pointer; padding:0 2px; }

/* ===== WhatsApp Messaging Center ===== */
.wa-head{ background:#f0fbf4; border:1px solid #bfe7cc; border-radius:10px; padding:9px 12px; }
.wa-sugg{ display:flex; flex-wrap:wrap; gap:8px; }
.wa-sugg-btn{ border:1px solid #25D366; background:#fff; color:#0c6b32; border-radius:20px; padding:5px 12px; font-size:13px; font-weight:600; cursor:pointer; }
.wa-sugg-btn:hover{ background:#eafaf0; }

/* WA suggestion cards with reason */
.wa-sugg-btn{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:start; }
.wa-sugg-btn .ws-name{ font-weight:700; }
.wa-sugg-btn .ws-reason{ font-size:11px; font-weight:400; color:#0c6b32; opacity:.85; }

/* Skeleton loading placeholders */
.skel{ display:inline-block; width:100%; height:12px; border-radius:6px; background:linear-gradient(90deg,#e9eef4 25%,#f3f6fa 37%,#e9eef4 63%); background-size:400% 100%; animation:skelShimmer 1.3s ease infinite; }
@keyframes skelShimmer{ 0%{background-position:100% 0} 100%{background-position:0 0} }

/* Zoning layer-toggle active state */
#znTglZones.on, #znTglNotes.on{ background:#0ea5a4; color:#fff; border-color:#0ea5a4; }

/* Settings section grouping */
.set-group{ margin-bottom:18px; }
.set-group-title{ font-weight:700; font-size:14px; color:var(--accent,#0ea5a4); border-bottom:1px solid var(--card-line,#e5e9f0); padding-bottom:5px; margin-bottom:10px; }

/* Contract document — page break + financial-claim page module (Phase E/G) */
.doc-page-break{ break-before:page; page-break-before:always; height:0; }
.doc-sheet-page{ padding-top:8px; }
@media print { .doc-page-break{ break-before:page; page-break-before:always; } }

/* ===== Visual Grid Designer (Word-like) ===== */
.vg-wrap .vg-toolbar{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.vg-cellbar{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; background:var(--panel,#f6f8fb); border:1px solid #d8e0ea; border-radius:8px; padding:6px 8px; margin-bottom:10px; }
.vg-cellbar .btn.on{ background:#0ea5a4; color:#fff; }
.vg-scroll{ overflow:auto; border:1px solid #d8e0ea; border-radius:8px; }
.vg-table{ border-collapse:collapse; width:100%; table-layout:fixed; }
.vg-table thead .vg-colhdr th{ background:#eef3f9; border:1px solid #c7d2e0; height:22px; font-size:11px; color:#567; cursor:grab; position:relative; user-select:none; text-align:center; }
.vg-table thead .vg-colhdr th.vg-corner{ width:34px; background:transparent; border:0; cursor:default; }
.vg-cresize{ position:absolute; top:0; bottom:0; inset-inline-start:-3px; width:6px; cursor:col-resize; }
.vg-table td.vg-cell{ border:1px solid #c7d2e0; padding:0; vertical-align:top; position:relative; }
.vg-table td.vg-cell .vg-in{ min-height:26px; padding:5px 7px; font-size:12px; outline:none; }
.vg-table td.vg-cell.vg-sel{ outline:2px solid #0ea5a4; outline-offset:-2px; }
.vg-chip{ display:inline-block; background:#dff3f3; color:#0a7d7c; border:1px solid #9fdedd; border-radius:5px; padding:1px 6px; font-size:11px; font-family:monospace; }
.vg-rresize{ position:absolute; inset-inline:0; bottom:-3px; height:6px; cursor:row-resize; }
.vg-table td.vg-rowdel{ border:0; width:34px; text-align:center; }
.vg-table td.vg-rowdel .btn{ padding:2px 6px; }
@media print{ .vg-cresize,.vg-rresize{ display:none; } }

/* Financial-claim attachment must ALWAYS start on a fresh page */
.doc-sheet-page{ break-before:page; page-break-before:always; }

/* ===== Dedicated K3 contract layout (matches the company Word template) ===== */
.k3c{ direction:rtl; font-family:'Tahoma','Segoe UI',sans-serif; color:#000; font-size:11px; }
.k3c-notb, .k3c-notb td{ border:0 !important; }
.k3c-title{ font-size:18px; font-weight:700; }
.k3c-date{ font-size:12px; font-weight:700; margin-top:2px; }
.k3c-numbox{ display:inline-block; border:1px solid #000; padding:3px 10px; font-weight:700; font-size:12px; white-space:nowrap; }
.k3c table.k3t{ width:100%; border-collapse:collapse; margin:3px 0; }
.k3c table.k3t th, .k3c table.k3t td{ border:1px solid #000; padding:3px 5px; font-size:11px; text-align:center; vertical-align:middle; -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact; }
.k3c table.k3t th{ background:#c6d9f1; font-weight:700; }
.k3c .k3-lbl{ background:#b8cce4 !important; font-weight:700; text-align:right; }
.k3c .k3-yel{ background:#ffff00 !important; font-weight:700; }
.k3c .k3-total{ color:#c00000; font-weight:700; }
.k3c .k3-val{ font-weight:700; }
.k3c .k3c-sec{ background:#dbe5f1; font-weight:700; padding:3px 6px; margin:8px 0 2px; border-right:3px solid #1f4e79; text-align:right; -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact; }
.k3c .k3c-sub{ font-weight:700; margin:6px 0 2px; text-align:right; }
.k3c .clause-h{ font-weight:700; margin:7px 0 2px; text-align:right; }
.k3c .clause-ol{ margin:2px 20px 2px 0; padding:0; }
@media print{ .k3c{ font-size:10.5px; -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact; } }