/* LAYOUT — nav, pages, header, cards, stats */
/* Auto-split from index.html */

/* ══ HEADER ══ */
.app-bar{
  background:#ffffff;
  flex-shrink:0;
  border-bottom:2.5px solid var(--green);
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  position:sticky;top:0;z-index:100;
}
.app-bar-top{display:flex;align-items:center;gap:10px;padding:8px 14px;flex-wrap:nowrap;}
.app-brand{display:flex;align-items:center;gap:10px;}
.app-brand-icon{
  width:52px;height:36px;border-radius:6px;overflow:hidden;flex-shrink:0;
  background:var(--green-light);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.app-brand-text{display:flex;flex-direction:column;gap:2px;}
.app-title{font-size:15px;font-weight:800;color:var(--green-dark);letter-spacing:0.2px;line-height:1.1;}
.app-logo{font-size:8.5px;color:var(--text3);letter-spacing:.5px;font-weight:600;}

/* Sync bar (right side) */
.sync-bar{display:flex;flex-direction:column;align-items:center;gap:3px;margin-left:auto;flex-shrink:0;}
.sync-btn{
  background:var(--green);border:none;border-radius:6px;padding:5px 11px;
  font-size:10.5px;color:#fff;cursor:pointer;font-weight:700;
  font-family:'Inter',sans-serif;white-space:nowrap;
  box-shadow:0 2px 6px rgba(42,122,42,0.25);
  display:flex;align-items:center;gap:5px;
  transition:all .2s;
}
.sync-btn:hover{background:var(--green-dark);}
.sync-label{font-size:8px;color:var(--text3);font-weight:600;letter-spacing:.4px;text-align:center;}
.sync-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;display:inline-block;transition:all .3s;}
.sync-dot.syncing{background:var(--green);animation:pulse-sync .8s ease-in-out infinite;}
@keyframes pulse-sync{0%,100%{opacity:1}50%{opacity:.3}}
#userLabel{font-size:10px;color:var(--text3);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ══ BOTTOM NAV (ClockWise exact style — white bar, SVG icons, green top line) ══ */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;max-width:430px;margin:0 auto;
  height:62px;background:#ffffff;border-top:1px solid var(--border);
  display:flex;align-items:stretch;box-shadow:0 -2px 12px rgba(0,0,0,0.08);z-index:100;
}
.nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;border:none;background:transparent;cursor:pointer;color:var(--text3);
  font-family:'Inter',sans-serif;transition:color .2s;padding:6px 2px;
  position:relative;
}
.nav-item svg{width:22px;height:22px;stroke:currentColor;flex-shrink:0;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.nav-item span{font-size:9px;font-weight:600;letter-spacing:.2px;line-height:1;}
.nav-item.active{color:var(--green);}
.nav-item.active::before{
  content:'';position:absolute;top:0;left:20%;right:20%;
  height:3px;background:var(--green);border-radius:0 0 3px 3px;
}
.nav-item:active{background:var(--green-light);}

/* ══ PAGES ══ */
.page{display:none;min-height:calc(100vh - 105px);padding-bottom:72px;background:var(--bg);}
.page.active{display:block;}

/* ══ SECTION HEADER ══ */
.section-header{
  background:var(--green);color:#fff;font-size:13px;font-weight:700;
  padding:11px 14px;border-radius:8px 8px 0 0;
  display:flex;align-items:center;gap:8px;letter-spacing:.1px;
  margin:10px 10px 0;
}
.section-body{
  background:#fff;border:1px solid var(--border);border-top:none;
  border-radius:0 0 8px 8px;padding:14px;margin:0 10px 12px;
}
.section-header-right{font-size:11px;font-weight:500;opacity:.85;margin-left:auto;}

/* Flat section (no rounded card, edge to edge) */
.flat-header{
  background:var(--green);color:#fff;font-size:12px;font-weight:700;
  padding:9px 14px;display:flex;align-items:center;gap:8px;letter-spacing:.5px;
  text-transform:uppercase;
}

/* ══ CARDS ══ */
.card{
  background:var(--card);border-radius:12px;padding:16px;
  margin:10px 10px 0;border:1px solid var(--border);box-shadow:var(--shadow-sm);
}
.card-title{
  font-size:11px;font-weight:700;margin-bottom:12px;color:var(--green);
  letter-spacing:.8px;text-transform:uppercase;
  display:flex;align-items:center;gap:6px;
  padding-bottom:10px;border-bottom:1px solid var(--border);
}

/* ══ STATS ══ */
.stat-row{display:flex;gap:8px;margin:10px 10px 0;}
.stat-card{
  background:#fff;border-radius:10px;padding:14px 10px;text-align:center;
  flex:1;min-width:78px;border:1px solid var(--border);box-shadow:var(--shadow-sm);
}
.stat-val,.sv{font-size:16px;font-weight:800;color:var(--green);margin-bottom:3px;}
.stat-lbl,.sl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;font-weight:600;}

/* ══ REPORTS ROWS ══ */
.report-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 14px;border-bottom:1px solid var(--border);
  font-size:13px;background:#fff;
}
.report-row:last-child{border:none;}

/* ══ BADGE ══ */
.badge{
  display:inline-block;padding:2px 9px;border-radius:20px;
  font-size:10px;font-weight:700;background:var(--green-light);color:var(--green-dark);
}

/* ══ TABS ══ */
.tab-bar{display:flex;background:#fff;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;}
.tab-bar::-webkit-scrollbar{display:none;}
.tab{
  flex:1;padding:10px 6px;text-align:center;cursor:pointer;
  font-size:11px;font-weight:700;color:var(--text3);white-space:nowrap;
  border-bottom:3px solid transparent;transition:all .12s;
  text-transform:uppercase;letter-spacing:.5px;
}
.tab.active{color:var(--green);border-bottom-color:var(--green);}

/* ══ HOME TXN LIST ══ */
.txn-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border);background:#fff;cursor:pointer;transition:background .15s;}
.txn-row:hover{background:#f0f7f0;}
.txn-row:active{background:#e0f0e0;}
.txn-badge{background:var(--green);color:#fff;border-radius:6px;padding:4px 8px;font-size:10px;font-weight:800;min-width:30px;text-align:center;flex-shrink:0;}
.txn-info{flex:1;min-width:0;}
.txn-num{font-weight:500;font-size:11px;color:var(--text3);}
.txn-customer{font-weight:800;font-size:13px;color:var(--text);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.txn-meta{font-size:11px;color:var(--text3);margin-top:1px;}
.txn-amt{font-weight:800;color:var(--green);font-size:13px;text-align:right;}
.txn-scan-btn{
  background:none;border:1.5px solid var(--border);border-radius:6px;
  padding:5px 6px;cursor:pointer;color:var(--text3);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .12s,color .12s,border-color .12s;
}
.txn-scan-btn:hover{background:var(--green-light);color:var(--green);border-color:var(--green);}
.txn-scan-btn.signed{background:var(--green-light);color:var(--green);border-color:var(--green);}
.home-filter{display:flex;gap:8px;padding:10px 14px;background:#fff;border-bottom:1px solid var(--border);}
.home-filter select,.home-filter input{flex:1;font-size:12px;padding:8px 10px;}

/* ══ HARVEST ══ */
.harvest-stat{background:var(--green);color:#fff;padding:18px 14px;margin:10px 10px 0;border-radius:12px;box-shadow:var(--shadow);}
.harvest-stat-val{font-size:32px;font-weight:800;letter-spacing:-.5px;}
.harvest-stat-lbl{font-size:11px;opacity:.8;margin-top:3px;text-transform:uppercase;letter-spacing:.5px;}
.harvest-item-row{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border);font-size:13px;background:#fff;}

/* ══ UPLOAD STRIP ══ */
.upload-strip{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border-bottom:1px solid var(--border);margin:0 0 2px;}
.upload-strip-title{font-size:13px;font-weight:700;color:var(--green);}
.upload-strip-sub{font-size:11px;color:var(--text3);}

/* ══ INV NUM STATUS ══ */
#invNumMsg{font-size:11px;margin-top:3px;min-height:14px;}

/* ══ SCROLLBAR ══ */
::-webkit-scrollbar{width:3px;height:3px;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}

/* ══ BALBAR (green summary bar) ══ */
.balbar{background:var(--green);border-radius:10px;padding:14px 16px;margin:10px 10px 0;display:flex;align-items:center;justify-content:space-between;color:#fff;box-shadow:var(--shadow);}
.balbar .sv{color:#fff;font-size:17px;}
.balbar .sl{color:rgba(255,255,255,.75);}

@keyframes fi{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* ══ INVENTORY ══ */
.inv-balance-row{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-bottom:1px solid var(--border);background:#fff;font-size:13px;}
.inv-balance-row:last-child{border:none;}
.inv-bal-neg{color:var(--danger);font-weight:800;}
.inv-bal-pos{color:var(--success);font-weight:800;}
.inv-bal-zero{color:var(--text3);font-weight:700;}
.harvest-form-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:14px;margin:10px 10px 0;box-shadow:var(--shadow-sm);}
.uom-conv-row{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--border);background:#fff;font-size:12px;}
.uom-conv-row:last-child{border:none;}
.row-add-btn{
  background:none;border:1.5px solid var(--green);border-radius:50%;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--green);padding:0;transition:background .12s;flex-shrink:0;
}
.row-add-btn:hover{background:var(--green-light);}
.view-mode .row-add-btn{ display:none !important; }
.qty-deduct-hint{font-size:10px;color:var(--text3);margin-top:3px;font-style:italic;}
.fi{animation:fi .25s ease;}

/* ══ INVOICE MODE HEADER ══ */
.inv-mode-header{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px 6px;font-size:13px;font-weight:700;
  border-bottom:1px solid var(--border);background:#fff;
}
.inv-mode-badge{
  padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;
  letter-spacing:.3px;text-transform:uppercase;
}
.inv-mode-badge.new{background:var(--green-light);color:var(--green-dark);}
.inv-mode-badge.viewing{background:#e8f0fe;color:#1a56db;}
.inv-mode-badge.editing{background:#fff3e0;color:#e07800;}
.inv-mode-title{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ══ VIEW MODE — lock form inputs ══ */
.view-mode input,
.view-mode select,
.view-mode .custom-select-display,
.view-mode .gcs-display{
  pointer-events:none !important;
  background:var(--card2) !important;
  color:var(--text2) !important;
  cursor:default !important;
  user-select:none;
}
.view-mode .custom-select-display::after,
.view-mode .gcs-display::after{ display:none !important; }
.view-mode .del-btn{ display:none !important; }
.view-mode .upload-strip{ display:none !important; }
.view-mode #addRowBtn{ display:none !important; }
.view-mode .inv-edit-btns{ display:none !important; }
.view-mode .inv-share-btns{ display:flex !important; }
.inv-edit-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;align-items:stretch;}
.inv-share-btns{display:none;gap:6px;flex-wrap:wrap;margin-top:14px;align-items:stretch;}
.inv-edit-btn-edit{
  width:100%;justify-content:center;
}
.txn-del-btn{
  background:none;border:none;cursor:pointer;padding:6px;border-radius:6px;
  color:var(--text3);display:flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s;flex-shrink:0;
}
.txn-del-btn:hover,.txn-del-btn:active{background:#fff0f0;color:var(--danger);}
/* ══ PRINT — show only the invoice preview, nothing else ══ */
@media print {
  @page {
    size: A4 portrait;
    margin: 10mm 12mm 10mm 12mm;
  }

  /* Hide absolutely everything by default */
  body > *                          { display: none !important; }

  /* Un-hide only the chain down to the invoice preview */
  body > #mainApp                   { display: block !important; }
  #mainApp > *                      { display: none !important; }
  #page-invoice                     { display: block !important; }
  #page-invoice > *                 { display: none !important; }
  #invoicePreviewSection            { display: block !important; }
  #invoicePreviewSection > *        { display: none !important; }
  #printPreviewPanel                { display: block !important; }
  #printPreviewPanel > *            { display: none !important; }
  .inv-preview-wrap                 { display: block !important; overflow: visible !important; background: none !important; padding: 0 !important; }
  .inv-preview                      { display: flex !important; width: 100% !important; min-height: 0 !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; font-size: 10px !important; }

  /* The inv-preview itself must show all its children */
  .inv-preview *                    { display: revert !important; }

  /* Table colours */
  .prev-table thead th,
  .prev-table tfoot td:nth-child(2) {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .prev-table thead { display: table-header-group; }
  .prev-table tfoot,
  .inv-footer,
  .inv-bottom-logo { page-break-inside: avoid; }
}