:root{
  --steel: #5b84a8;
  --steel-dark: #3f6786;
  --border: #d3d7dc;
  --bg-panel: #f4f6f8;
  --text: #222;
  --muted: #757575;
  --danger: #b23a3a;
  --page-w: 210mm;
  --page-h: 297mm;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: "Segoe UI","Arial",sans-serif;
  background:#e7e9ec;
  color:var(--text);
  direction:rtl;
}

#app[hidden], .auth-gate[hidden]{display:none;}
.btn[hidden]{display:none;}
.auth-gate{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.auth-card{
  width:min(100%, 420px);
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
  padding:28px;
}
.auth-card h1{margin:0 0 10px;color:var(--steel-dark);font-size:23px;}
.auth-card p{margin:0 0 22px;line-height:1.5;color:#555;}
#apiSection{display:flex;flex-direction:column;gap:12px;}
.auth-card .api-status{margin-top:12px;}
.session-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
  font-size:12px;
}
.session-bar span{
  min-width:0;
  direction:ltr;
  unicode-bidi:plaintext;
  text-align:left;
  overflow-wrap:anywhere;
}
.session-actions{display:flex;gap:6px;flex-shrink:0;}
.guide-backdrop[hidden]{display:none;}
.guide-backdrop{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(17,24,39,.58);
}
.guide-card{
  position:relative;width:min(100%,440px);padding:30px 26px 24px;background:#fff;
  border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.24);
}
.guide-close{
  position:absolute;top:10px;left:12px;width:34px;height:34px;border:0;border-radius:50%;
  background:#eef2f5;color:var(--steel-dark);font-size:24px;line-height:1;cursor:pointer;
}
.guide-step-label{font-size:12px;color:var(--steel-dark);font-weight:bold;margin-bottom:12px;}
.guide-card h2{font-size:21px;color:var(--steel-dark);margin:0 0 12px;}
.guide-card p{line-height:1.7;color:#444;margin:0 0 24px;}
.guide-share-visual[hidden]{display:none;}
.guide-share-visual{
  display:flex;align-items:center;gap:14px;padding:14px;margin:-8px 0 24px;
  border:1px solid #c9dff2;border-radius:10px;background:#f0f7fd;
  color:var(--steel-dark);font-weight:bold;
}
.guide-share-visual svg{
  width:46px;height:46px;flex:none;fill:none;stroke:#1677c8;
  stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
}
.guide-actions{display:flex;gap:8px;}
.guide-actions .btn{flex:1;}

#app{
  display:flex;
  min-height:100vh;
}

.mobile-tabs{
  display:none;
}

/* ---------- EDITOR ---------- */
#editor{
  width:420px;
  flex:0 0 420px;
  background:var(--bg-panel);
  border-left:1px solid var(--border);
  padding:16px;
  overflow-y:auto;
  height:100vh;
  position:sticky;
  top:0;
}

.app-title{
  font-size:20px;
  margin:0 0 12px;
  color:var(--steel-dark);
}

.toolbar{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:16px;
  padding-bottom:16px;
  border-bottom:2px solid var(--border);
}
.toolbar-row{display:flex; gap:8px;}
.toolbar-row .btn{flex:1;}

.btn{
  cursor:pointer;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  padding:8px 12px;
  border-radius:6px;
  font-size:14px;
}
.btn:hover{background:#eef2f5;}
.btn.primary{
  background:var(--steel);
  color:#fff;
  border-color:var(--steel-dark);
  font-weight:bold;
  padding:10px 12px;
}
.btn.primary:hover{background:var(--steel-dark);}
.btn.danger{
  color:var(--danger);
  border-color:var(--danger);
  background:#fff;
}
.btn.danger:hover{background:#fbeaea;}
.btn.small{
  padding:4px 8px;
  font-size:12px;
}
.btn.icon{
  padding:4px 8px;
  font-size:13px;
  line-height:1;
}

details.section{
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
  margin-bottom:12px;
  overflow:hidden;
}
details.section summary{
  cursor:pointer;
  padding:10px 12px;
  font-weight:bold;
  background:#eef2f5;
  color:var(--steel-dark);
  list-style:none;
}
details.section summary::-webkit-details-marker{display:none;}
details.section summary::before{
  content:"▸ ";
}
details.section[open] summary::before{
  content:"▾ ";
}
.section-body{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

label{
  font-size:12px;
  color:var(--muted);
  display:block;
  margin-bottom:3px;
}
input[type=text],input[type=date],input[type=email],textarea{
  width:100%;
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:5px;
  font-family:inherit;
  font-size:14px;
}
textarea{resize:vertical;}

.field{display:flex; flex-direction:column;}
.field-row{display:flex; gap:8px;}
.field-row .field{flex:1;}

.list-row{
  display:flex;
  gap:6px;
  align-items:center;
}
.list-row input{flex:1;}

.hint{
  font-size:11px;
  color:var(--muted);
  line-height:1.5;
}

/* ---------- API / AUTH PANEL ---------- */
.api-msg{
  font-size:13px;
  color:var(--text);
}
.api-status{
  font-size:12.5px;
  min-height:1.4em;
  line-height:1.5;
}
.api-status.info{ color:var(--muted); }
.api-status.success{ color:#16a34a; }
.api-status.error{ color:var(--danger); }
.api-status a{
  color:var(--steel-dark);
  text-decoration:underline;
  margin-inline-start:4px;
}

.logo-preview{
  display:flex;
  align-items:center;
  gap:10px;
}
.logo-preview img, .logo-preview svg{
  width:48px;
  height:48px;
  object-fit:contain;
  border:1px solid var(--border);
  border-radius:6px;
  background:#fff;
}

/* ---------- ITEM CARD (editor) ---------- */
.item-card{
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px;
  background:#fbfcfd;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.item-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.item-card-head .item-num{
  font-weight:bold;
  color:var(--steel-dark);
}
.item-card-actions{display:flex; gap:4px;}

.annot-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  background:#eef2f5;
  padding:6px;
  border-radius:6px;
}
.annot-toolbar .tool-btn{
  padding:4px 8px;
  font-size:12px;
  border-radius:5px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
}
.annot-toolbar .tool-btn.active{
  background:var(--steel);
  color:#fff;
  border-color:var(--steel-dark);
}
.annot-toolbar .color-dot{
  width:20px;height:20px;border-radius:50%;
  border:2px solid #fff;
  outline:1px solid var(--border);
  cursor:pointer;
}
.annot-toolbar .color-dot.active{
  outline:2px solid #000;
}

.canvas-wrap{
  border:1px dashed var(--border);
  border-radius:6px;
  background:repeating-conic-gradient(#f0f0f0 0% 25%, #fff 0% 50%) 50% / 16px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
  overflow:hidden;
}
.canvas-wrap canvas{
  max-width:100%;
  cursor:crosshair;
  display:block;
  touch-action:none;
}

.photo-actions{
  display:flex;
  gap:8px;
}
.photo-actions .btn{
  flex:1;
  text-align:center;
}
.photo-actions input[type=file]{
  display:none;
}
.canvas-empty{
  color:var(--muted);
  font-size:13px;
  padding:20px;
  text-align:center;
}

.bullets-list{
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* ============================================================ */
/* ---------------------- REPORT PREVIEW ----------------------- */
/* ============================================================ */
#previewWrap{
  flex:1;
  overflow-y:auto;
  height:100vh;
  padding:24px;
  display:flex;
  justify-content:center;
}

#report{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
}

.page{
  width:var(--page-w);
  max-width:100%;
  min-height:var(--page-h);
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  padding:14mm 16mm;
  display:flex;
  flex-direction:column;
}

.page-header{
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  border-bottom:2px solid var(--steel);
  padding-bottom:6px;
  margin-bottom:10px;
}
.page-header .logo-block{
  display:flex;
  align-items:center;
  gap:8px;
}
.page-header .logo-block img, .page-header .logo-block svg{
  width:38px;
  height:38px;
  object-fit:contain;
}
.page-header .logo-text .company-name{
  font-weight:bold;
  font-size:14px;
  color:var(--steel-dark);
}

.page-footer{
  border-top:1px solid var(--border);
  padding-top:6px;
  margin-top:10px;
  text-align:center;
  font-size:10px;
  color:#555;
  line-height:1.5;
}

.page-body{
  flex:1;
  display:flex;
  flex-direction:column;
}

/* Cover page */
.cover-body{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-top:40px;
  text-align:center;
}
.cover-date{
  align-self:stretch;
  text-align:right;
  font-size:13px;
  color:#333;
  margin-bottom:32px;
}
.cover-date .label{
  color:var(--muted);
  margin-inline-end:4px;
}
.cover-title{
  font-size:28px;
  font-weight:bold;
  color:#1c1c1c;
  margin-bottom:14px;
  max-width:80%;
}
.cover-location{
  font-size:17px;
  font-weight:bold;
  color:#1c1c1c;
  margin-bottom:22px;
}
.cover-recorder{
  font-size:14px;
  color:#333;
  margin-bottom:28px;
}
.cover-recorder .label{
  font-weight:bold;
  margin-inline-end:4px;
}
.cover-list-block{
  margin-top:22px;
  text-align:center;
}
.cover-list-block .cover-section-label{
  font-size:13px;
  color:#555;
  margin-bottom:6px;
}
.cover-list-block ol{
  display:inline-block;
  text-align:right;
  padding-inline-start:20px;
  margin:0;
}
.cover-list-block li{
  color:var(--steel-dark);
  font-size:14px;
  margin-bottom:2px;
}
.cover-notes{
  margin-top:28px;
}
.cover-notes .cover-section-label{
  font-size:13px;
  color:#555;
  margin-bottom:8px;
}
.cover-notes .note-line{
  font-size:14px;
  margin-bottom:4px;
}

/* Items table pages */
.items-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.items-table th{
  background:var(--steel);
  color:#fff;
  font-size:13px;
  padding:6px;
  border:1px solid var(--steel-dark);
}
.items-table th.col-image{width:45%;}
.items-table td{
  border:1px solid var(--border);
  vertical-align:middle;
  padding:8px;
  min-height:55mm;
}
.items-table td.cell-image{
  text-align:center;
  vertical-align:middle;
}
.items-table td.cell-image img{
  max-width:100%;
  max-height:90mm;
  object-fit:contain;
}
.items-table td.cell-desc{
  vertical-align:top;
  font-size:12.5px;
}
.items-table td.cell-desc .item-title{
  font-weight:bold;
  margin-bottom:6px;
}
.items-table td.cell-desc ul{
  margin:0;
  padding-inline-start:18px;
}
.items-table td.cell-desc li{
  margin-bottom:4px;
  line-height:1.4;
}
.empty-cell{
  background:#fafafa;
}

.no-items-msg{
  color:var(--muted);
  text-align:center;
  padding:60px 20px;
  font-size:14px;
}

/* ============================================================ */
/* ------------------------ PRINT MODE ------------------------- */
/* ============================================================ */
/* ============================================================ */
/* ------------------------ MOBILE LAYOUT ----------------------- */
/* ============================================================ */
@media screen and (max-width:900px){
  html,body{
    width:100%;
    overflow-x:hidden;
  }
  #app{
    flex-direction:column;
  }
  .mobile-tabs{
    display:flex;
    position:sticky;
    top:0;
    z-index:20;
    width:100%;
    flex:0 0 auto;
    background:#fff;
    border-bottom:1px solid var(--border);
  }
  .mobile-tabs .tab-btn{
    flex:1;
    padding:14px 8px;
    border:none;
    background:#fff;
    font-size:15px;
    font-weight:bold;
    color:var(--muted);
    cursor:pointer;
  }
  .mobile-tabs .tab-btn.active{
    color:var(--steel-dark);
    box-shadow:inset 0 -3px 0 var(--steel);
  }
  #editor{
    width:100%;
    flex:none;
    height:auto;
    position:static;
    border-left:none;
    border-bottom:none;
  }
  #previewWrap{
    width:100%;
    min-width:0;
    height:auto;
    padding:12px;
    overflow-y:visible;
    overflow-x:hidden;
  }
  #report{
    width:100%;
    min-width:0;
  }
  #report .page{
    width:100%;
    min-width:0;
    padding:8mm 7mm;
  }
  .page{
    max-width:100%;
  }
  #editor.mobile-hidden,
  #previewWrap.mobile-hidden{
    display:none;
  }
  .btn{
    padding:10px 12px;
    font-size:15px;
  }
  .btn.icon{
    padding:8px 10px;
    font-size:16px;
  }
  .session-bar{flex-wrap:wrap;}
  .session-bar span{flex:1 0 100%;white-space:nowrap;}
  .session-actions{gap:4px;}
  .session-actions .btn{padding:7px 8px;font-size:12px;}
}

@media print{
  @page{
    size:A4;
    margin:0;
  }
  body{background:#fff;}
  #editor{display:none;}
  #previewWrap{
    padding:0;
    height:auto;
    overflow:visible;
    display:block;
  }
  #report{
    gap:0;
  }
  .page{
    box-shadow:none;
    margin:0;
    page-break-after:always;
    width:auto;
    min-height:100vh;
  }
  .page:last-child{
    page-break-after:auto;
  }
}

/* ---------- POLISHED FIELD EDITOR ---------- */
:root{
  --steel:#286b68;
  --steel-dark:#174d4b;
  --border:#d9e2df;
  --bg-panel:#f5f8f6;
  --text:#1e2d2b;
  --muted:#71817d;
  --danger:#b84e45;
}
body{background:#e9efec;color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif;}
#editor{padding:24px 22px;background:#f7faf8;border-left:1px solid #d8e3df;box-shadow:-8px 0 28px rgba(28,57,51,.04);}
.app-title{font-size:23px;letter-spacing:-.45px;color:#173b39;margin-bottom:16px;}
.session-bar{padding:11px 12px;background:#edf4f1;border:1px solid #dfe9e5;border-radius:10px;color:#49635e;margin-bottom:18px;}
.session-actions .btn.small{
  min-height:32px;
  padding:5px 9px;
  border:1px solid #cbdcd6;
  border-radius:8px;
  background:linear-gradient(180deg,#fff 0%,#f7fbf9 100%);
  color:#28524c;
  font-size:12px;
  font-weight:600;
  box-shadow:0 2px 4px rgba(25,64,56,.08),inset 0 1px 0 rgba(255,255,255,.9);
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease,color .16s ease;
}
.session-actions .btn.small:hover{
  transform:translateY(-1px);
  border-color:#8eb8aa;
  background:#fff;
  color:#174d4b;
  box-shadow:0 4px 9px rgba(25,64,56,.13),inset 0 1px 0 #fff;
}
.session-actions .btn.small:active{
  transform:translateY(0);
  background:#e5f0eb;
  box-shadow:inset 0 2px 4px rgba(25,64,56,.12);
}
.session-actions .btn.small:focus-visible{
  outline:3px solid rgba(40,107,104,.28);
  outline-offset:2px;
}
#apiLogoutBtn.btn.small{
  border-color:#e7c9c4;
  background:linear-gradient(180deg,#fff 0%,#fff8f7 100%);
  color:#9f433c;
  box-shadow:0 2px 4px rgba(127,47,40,.07),inset 0 1px 0 #fff;
}
#apiLogoutBtn.btn.small:hover{
  border-color:#d9a49d;
  background:#fff0ed;
  color:#85352f;
  box-shadow:0 4px 9px rgba(127,47,40,.12),inset 0 1px 0 #fff;
}
#apiLogoutBtn.btn.small:active{background:#f9e4e0;box-shadow:inset 0 2px 4px rgba(127,47,40,.12);}
.toolbar{gap:9px;margin-bottom:18px;padding:14px;background:#fff;border:1px solid #e0e8e5;border-radius:14px;box-shadow:0 4px 14px rgba(26,57,51,.04);}
.btn{border-color:#d7e1dd;border-radius:9px;color:#344744;transition:background .16s ease,transform .16s ease,box-shadow .16s ease;}
.btn:hover{background:#eff5f2;}
.btn:active{transform:translateY(1px);}
.btn.primary{background:#286b68;border-color:#286b68;box-shadow:0 3px 8px rgba(40,107,104,.16);}
.btn.primary:hover{background:#1d5b58;}
.btn.danger{border-color:#f0d8d4;color:#a5433c;background:#fff9f8;}
details.section{border:1px solid #dfe8e4;border-radius:12px;margin-bottom:10px;box-shadow:0 2px 8px rgba(28,57,51,.025);}
details.section summary{background:#fff;color:#294743;padding:14px 15px;font-size:14px;}
details.section[open] summary{border-bottom:1px solid #edf1ef;background:#fbfdfc;}
details.section summary::before{color:#39827d;display:inline-block;margin-left:6px;}
.section-body{padding:15px;gap:12px;}
label{font-size:12px;font-weight:600;color:#62736f;margin-bottom:5px;}
input[type=text],input[type=date],input[type=email],textarea{padding:10px 11px;border:1px solid #d8e2de;border-radius:8px;background:#fff;color:#233431;transition:border-color .15s,box-shadow .15s;}
input[type=text]:focus,input[type=date]:focus,input[type=email]:focus,textarea:focus{outline:none;border-color:#5b9b95;box-shadow:0 0 0 3px rgba(40,107,104,.11);}
.hint{padding:5px 3px;color:#73837f;font-size:12px;}
.item-card{border-color:#dce7e2;border-radius:11px;background:#fbfdfc;padding:12px;}
.item-card-head .item-num{color:#276b67;}
.annot-toolbar{background:#f0f5f3;border:1px solid #e2ebe7;border-radius:9px;}
#previewWrap{background:#e9efec;padding:34px 40px;}
#report{gap:28px;}
.page{box-shadow:0 10px 32px rgba(23,47,43,.15);border:1px solid #e1e5e2;}
.page-header{border-bottom-color:#286b68;}
.items-table th{background:#286b68;border-color:#174d4b;}
.page-footer{color:#72807c;}
.mobile-tabs{box-shadow:0 4px 12px rgba(27,55,50,.06);}
@media screen and (max-width:900px){
  #editor{padding:18px 15px 28px;}
  .mobile-tabs{border-bottom:1px solid #dce5e1;}
  .mobile-tabs .tab-btn{padding:15px 8px;font-size:14px;}
  .mobile-tabs .tab-btn.active{color:#1e615d;box-shadow:inset 0 -3px 0 #39827d;}
  #previewWrap{background:#e9efec;padding:16px 10px 28px;}
  .page{box-shadow:0 6px 22px rgba(23,47,43,.14);}
}
@media print{
  body{background:#fff;}
  #previewWrap{background:#fff;}
  .page{box-shadow:none;border:0;}
}