/* =====================================================
   GLOBAL RESET
===================================================== */
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Tahoma, Arial, sans-serif;
  background: #eef2f7;
  color: #111;
}

/* =====================================================
   COMMON
===================================================== */
.hidden { display: none !important; }

label {
  font-size: 12.5px;
  font-weight: bold;
  white-space: nowrap;
}

input, select, textarea {
  width: 100%;
  font-size: 13px;
  padding: 5px 6px;
  border: 1px solid #9aa4b2;
  border-radius: 4px;
}

textarea {
  resize: none;
}

button {
  font-size: 13px;
  padding: 4px 10px;
  cursor: pointer;
}

/* =====================================================
   LOGIN
===================================================== */
.login-screen {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.login-box {
  width: 340px;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}

.login-box h2 {
  text-align: center;
  margin-bottom: 10px;
}

/* =====================================================
   TOP BAR
===================================================== */
.topbar {
  background: linear-gradient(90deg,#1e3a8a,#2563eb);
  color: #fff;
  padding: 10px 16px;
  font-size: 18px;
  font-weight: bold;
}

/* =====================================================
   MENU
===================================================== */
.top-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  background: #e5ecff;
  border-bottom: 1px solid #c7d2fe;
}

.top-menu button {
  background: #fff;
  border: 1px solid #c7d2fe;
  border-radius: 4px;
}

/* =====================================================
   CONTENT
===================================================== */
.container {
  padding: 10px;
}

.page { display: none; }
.page:not(.hidden) { display: block; }

/* =====================================================
   MEMO HEADER
===================================================== */
.memo-header .row {
  display: grid;
  grid-template-columns: 60px 1fr 60px 1fr;
  gap: 8px;
  margin-bottom: 6px;
}

/* =====================================================
   MEMO MAIN GRID (🔥 KEY FIX)
===================================================== */
.memo-container {
  display: grid;
  grid-template-columns: 320px 1fr 1fr; /* LEFT | OWNER | PARTY */
  gap: 10px;
  align-items: stretch;
}

/* =====================================================
   BOX
===================================================== */
.box {
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  padding: 8px;
  background: #f8fafc;
  height: 100%;               /* 🔥 FORCE SAME HEIGHT */
}

.box-title {
  font-weight: bold;
  background: #e0e7ff;
  padding: 4px 6px;
  margin: -8px -8px 8px -8px;
  border-bottom: 1px solid #c7d2fe;
}

/* =====================================================
   ROW GRID (🔥 SAME FOR OWNER & PARTY)
===================================================== */
.row {
  display: grid;
  grid-template-columns: 90px 1fr 90px 1fr;
  gap: 6px;
  align-items: center;
  margin-bottom: 5px;
}

/* =====================================================
   LEFT COLUMN (Consigner / Consignee)
===================================================== */
.memo-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* =====================================================
   OWNER & PARTY — EQUAL BEHAVIOUR
===================================================== */
.memo-middle,
.memo-right {
  display: flex;
  flex-direction: column;
}

.memo-middle .box,
.memo-right .box {
  flex: 1;                 /* 🔥 SAME HEIGHT */
}

/* =====================================================
   TEXTAREA NORMALIZATION
===================================================== */
.memo-middle textarea,
.memo-right textarea {
  height: 70px;
}

/* =====================================================
   YELLOW FIELDS
===================================================== */
.yellow {
  background: #fff3b0;
  font-weight: bold;
}

/* =====================================================
   LOOKUP BUTTON (...)
===================================================== */
.lookup-btn {
  width: 28px;
  padding: 0;
  font-weight: bold;
}

/* =====================================================
   ACTION BUTTONS
===================================================== */
.memo-actions {
  margin-top: 10px;
}

.memo-actions .action-row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

/* =====================================================
   TABLES
===================================================== */
table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

th, td {
  border: 1px solid #9aa4b2;
  padding: 6px;
  font-size: 13px;
}

th {
  background: #e0e7ff;
}

/* =====================================================
   FIX CONSIGNER / CONSIGNEE WIDTH ISSUE
===================================================== */

/* Left column rows must be 3-column grid */
.memo-left .row {
  display: grid;
  grid-template-columns: 90px 1fr 28px; /* label | field | ... */
  gap: 6px;
  align-items: center;
}

/* Ensure inputs & selects fill space */
.memo-left input,
.memo-left select {
  width: 100%;
}

/* Keep lookup button aligned */
.memo-left .lookup-btn {
  width: 28px;
  height: 26px;
  padding: 0;
}

/* =====================================================
   FIX FROM / TO ALIGNMENT (SAME ROW)
===================================================== */

.memo-header .row {
  display: grid;
  grid-template-columns: 70px 1fr 28px 50px 1fr 28px;
  gap: 6px;
  align-items: center;
}

/* Ensure selects fill space */
.memo-header select,
.memo-header input {
  width: 100%;
}

/* Lookup button size */
.memo-header .lookup-btn {
  width: 28px;
  height: 26px;
  padding: 0;
}

/* ===============================
   MEMO HEADER FIXES
================================ */

/* Default row (No / Date) */
.memo-header > .row:first-child {
  display: grid;
  grid-template-columns: 60px 1fr 60px 200px;
  gap: 8px;
  align-items: center;
}

/* From / To row ONLY */
.memo-header > .row:nth-child(2) {
  display: grid;
  grid-template-columns: 60px 1fr 28px 40px 1fr 28px;
  gap: 6px;
  align-items: center;
}

/* Inputs & selects full width */
.memo-header input,
.memo-header select {
  width: 100%;
}

/* Date input minimum width */
.memo-header input[type="date"] {
  min-width: 160px;
}

/* Lookup button */
.lookup-btn {
  width: 28px;
  height: 26px;
  padding: 0;
}

/* =====================================================
   MEMO HEADER – FINAL LIMRA STYLE
===================================================== */

.memo-header {
  margin-bottom: 12px;
}

/* ---------- COMMON ROW ---------- */
.memo-header .row {
  display: grid;
  align-items: center;
  column-gap: 10px;
  margin-bottom: 6px;
}

/* ---------- ROW 1 : No + Date ---------- */
.memo-header .row:first-child {
  grid-template-columns:
    50px   /* No label */
    200px  /* No input */
    60px   /* Date label */
    200px; /* Date input */
}

/* ---------- ROW 2 : From + To ---------- */
.memo-header .row:nth-child(2) {
  grid-template-columns:
    50px   /* From label */
    260px  /* From select */
    36px   /* From button */
    40px   /* To label */
    260px  /* To select */
    36px;  /* To button */
}

/* ---------- Inputs / Selects ---------- */
.memo-header input,
.memo-header select {
  width: 100%;
  height: 32px;
  padding: 4px 6px;
  font-size: 13px;
  box-sizing: border-box;
}

/* ---------- Date input fix ---------- */
.memo-header input[type="date"] {
  width: 100%;
}

/* ---------- Lookup (...) buttons ---------- */
.memo-header .lookup-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}

/* ---------- Prevent shrinking ---------- */
#memo_no,
#memo_date,
#from_location,
#to_location {
  min-width: 0;
}


/* ===============================
   LEDGER – HARD FIX (FINAL)
================================ */

/* Stop global width behavior */
#ledger input,
#ledger select {
  width: 220px;
  height: 32px;
  padding: 4px 6px;
}

/* Ledger rows */
#ledger .ledger-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

/* Labels fixed width */
#ledger label {
  width: 90px;
  font-weight: bold;
  font-size: 13px;
}

/* Buttons row */
#ledger .ledger-buttons {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

/* Buttons same height */
#ledger .ledger-buttons button {
  height: 32px;
  padding: 0 14px;
}

/* ===============================
   SCREEN + PRINT BASE
================================ */

#invoicePrintArea {
  width: 100%;
}

/* Main invoice page */
.print-page {
  width: 190mm;
  margin: 0;
  padding: 0 10mm 10mm 10mm;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #000;
  box-sizing: border-box;

  /* VERY IMPORTANT */
  page-break-inside: avoid;
  break-inside: avoid;
}

/* ===============================
   HEADER
================================ */

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.invoice-label {
  color: #1e40af;
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 6px;

  line-height: 1.5;     /* ✅ FIX */
  padding-top: 2px;     /* ✅ FIX */
}

.company-name {
  font-size: 20px;
  font-weight: bold;
}

.company-address {
  font-size: 12px;
  margin-top: 4px;
}

.header-right {
  font-size: 11px;
  font-weight: bold;
  text-align: right;
}

/* ===============================
   META INFO
================================ */

.meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 14px;
  gap: 10px;
}

/* ===============================
   CUSTOMER
================================ */

.customer {
  margin-top: 12px;
  font-weight: bold;

  line-height: 1.6;     /* ✅ FIX */
  padding-top: 2px;     /* ✅ FIX */
}

/* ===============================
   MEMO TABLE
================================ */

.memo-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.memo-table th {
  border-top: 2px solid #2563eb;
  border-bottom: 2px solid #2563eb;
  padding: 6px;
}

.memo-table td {
  border-bottom: 1px solid #ccc;
  padding: 6px;
}

.memo-table th,
.memo-table td {
  text-align: center;
  font-size: 12px;
}

.right {
  text-align: right;
}

/* ===============================
   TOTALS
================================ */

.totals {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-weight: bold;
}

.grand-total {
  font-size: 16px;
}

/* ===============================
   AMOUNT IN WORDS
================================ */

.amount-words {
  margin-top: 12px;
  padding-top: 8px;
  padding-bottom: 12mm;     /* 🔥 CREATES SPACE BEFORE FOOTER */
  border-top: 2px solid #2563eb;
  font-weight: normal;
}

/* ===============================
   FOOTER (BANK + SIGNATURE)
   SAME GAP – SAME LEVEL
================================ */

.footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 18mm;          /* 🔥 ONE SOURCE OF GAP */
  page-break-inside: avoid;
  break-inside: avoid;
}

.bank {
  width: 60%;
  font-size: 12px;
  line-height: 1.5;
}

.sign {
  width: 35%;
  text-align: right;
  font-size: 12px;
  font-weight: bold;
}


/* ===============================
   PRINT – SINGLE PAGE FIX
================================ */
@media print {

  /* Hide everything */
  body * {
    visibility: hidden !important;
  }

  /* Show only invoice */
  #invoicePrintArea,
  #invoicePrintArea * {
    visibility: visible !important;
  }

  /* Force invoice to start at top */
  #invoicePrintArea {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }

  /* Kill unwanted breaks */
  .print-page {
    page-break-before: auto !important;
    page-break-after: auto !important;
    page-break-inside: avoid !important;
    break-before: auto !important;
    break-after: auto !important;
    break-inside: avoid !important;
  }

  /* Remove browser default margins */
  @page {
    margin: 10mm;
  }
}


  /* REMOVE browser header/footer */
  @page {
    size: A4 portrait;
    margin: 12mm;
  }
}

/* ===============================
   PRINT FIX (CRITICAL)
================================ */

/* Hide print area on screen */
@media screen {
  #invoicePrintArea {
    display: none;
  }
}

/* Print only invoice */
@media print {

  /* Hide everything */
  body * {
    visibility: hidden !important;
  }

  /* Show only invoice */
  #invoicePrintArea,
  #invoicePrintArea * {
    visibility: visible !important;
  }

  /* Position invoice correctly */
  #invoicePrintArea {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;          /* ✅ ADD */
    padding: 0;         /* ✅ ADD */
  }
}

<style>
  .dash-cards {
    display: flex;
    gap: 20px;
    margin: 20px 0;
  }

  .dash-card {
    background: #ffffff;
    padding: 20px;
    width: 250px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
  }

  .dash-card h4 {
    margin: 0;
    font-size: 16px;
    color: #555;
  }

  .dash-card h2 {
    margin-top: 10px;
    font-size: 26px;
  }

  .clickable:hover {
    background: #f1f5ff;
  }

  .modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  .modal-box {
    background: #fff;
    padding: 20px;
    width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 8px;
  }

  .hidden {
    display: none;
  }
</style>

/* ===============================
   MEMO LIST MODAL SCROLL FIX
================================ */

.memo-modal-box {
  width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.memo-table-wrapper {
  flex: 1;
  overflow-y: auto;     /* 🔥 Enable vertical scroll */
  margin-top: 10px;
  border: 1px solid #9aa4b2;
}

/* ===============================
   MEMO LIST MODAL ONLY
================================ */

#memoListModal .login-box {
  width: 650px;
  height: 75vh;
  display: flex;
  flex-direction: column;
}

#memoListModal .memo-table-wrapper {
  flex: 1;
  overflow-y: auto;
  margin-top: 10px;
  border: 1px solid #9aa4b2;
}

/* ===============================
   OWNER MEMO PRINT DESIGN
================================ */
.memo-book {
  width: 190mm;
  margin: 0 auto;
  padding: 10mm;
  font-family: Arial;
  font-size: 14px;
  color: #000;
}

.memo-title {
  text-align: center;
  font-weight: bold;
  letter-spacing: 2px;
}

.memo-company {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
}

.memo-address {
  text-align: center;
  font-size: 12px;
  margin-bottom: 10px;
}

.memo-row-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.memo-route-line {
  margin-bottom: 6px;
}

.memo-box-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 15px;
}

.memo-box {
  border: 2px solid #000;
  padding: 10px;
  min-height: 320px;
}

.memo-box p {
  margin: 6px 0;
}

.bold {
  font-weight: bold;
}

.remarks-box {
  border-top: 1px solid #000;
  margin-top: 10px;
  min-height: 60px;
}

.memo-note {
  margin-top: 20px;
  font-size: 12px;
}

.memo-sign {
  margin-top: 30px;
  text-align: right;
  font-weight: bold;
}

@media screen {
  #ownerPrintArea {
    display: none;
  }
}

@media print {

  body.print-owner * {
    visibility: hidden !important;
  }

  body.print-owner #ownerPrintArea,
  body.print-owner #ownerPrintArea * {
    visibility: visible !important;
  }

  body.print-owner #ownerPrintArea {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}

/* ===============================
   PARTY PRINT
================================ */
@media print {

  body.print-party * {
    visibility: hidden !important;
  }

  body.print-party .memo-right,
  body.print-party .memo-right * {
    visibility: visible !important;
  }

  body.print-party .memo-right {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }

  body.print-party .memo-actions,
  body.print-party .topbar,
  body.print-party .top-menu {
    display: none !important;
  }

}

/* Hide owner print area on screen */
@media screen {
  #ownerPrintArea {
    display: none;
  }
}

.totals-table table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 5px;
}

/* REMOVE borders so it looks outside table */
.totals-table td {
  border: none;
  padding: 3px 6px;
  font-size: 13px;
}

/* align text */
.totals-table td:first-child {
  text-align: right;
}

/* amount column */
.totals-table td.right {
  text-align: right;
  width: 120px; /* same as Balance column */
}

/* net balance highlight */
.totals-table .net td {
  font-weight: bold;
  border-top: 2px solid #2563eb;
}

/* ===============================
   PROFESSIONAL INVOICE STYLE
================================ */

.totals-box {
  width: 300px;
  margin-left: auto;
  margin-top: 10px;
}

.totals-box table {
  width: 100%;
  border-collapse: collapse;
}

.totals-box td {
  padding: 4px 6px;
  font-size: 12px;
}

.totals-box .right {
  text-align: right;
}

.totals-box .net td {
  font-weight: bold;
  border-top: 2px solid #000;
}

/* ===============================
   PRINT PERFECT FIT
================================ */
@media print {

  @page {
    size: A4 portrait;
    margin: 4mm;
  }

  .print-page {
    width: 100%;
    padding: 0 4mm;
  }

  .memo-table {
    table-layout: fixed;
  }

  .memo-table th,
  .memo-table td {
    font-size: 9px;
    padding: 2px;
  }

}

@media print {

  body {
    margin: 0;
    padding: 0;
  }

  .page {
    height: auto !important;
    min-height: auto !important;
  }

  /* REMOVE EXTRA SPACE */
  * {
    page-break-after: auto !important;
    page-break-before: auto !important;
  }

  /* PREVENT BLANK PAGE */
  html, body {
    height: auto !important;
    overflow: hidden !important;
  }

}


.login-screen{
  position:fixed;
  inset:0;
  z-index:99999;

  display:flex;
  justify-content:center;
  align-items:center;

  overflow:hidden;
}

.login-bg{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
}

.login-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
}

.login-box{
  position:relative;
  z-index:2;

  background:white;
  padding:30px;
  border-radius:10px;

  width:320px;
}

.modal{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.45);

    display:flex;
    justify-content:center;
    align-items:center;

    padding:20px;

    overflow-y:auto;        /* IMPORTANT */

    z-index:99999;

}

.modal.hidden{
    display:none;
}

.modal-box{

    width:520px;
    max-width:95%;

    max-height:90vh;        /* IMPORTANT */

    background:#fff;

    border-radius:10px;

    box-shadow:0 10px 30px rgba(0,0,0,.35);

    display:flex;
    flex-direction:column;

}

.modal-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:15px 20px;

    background:#0b5ed7;
    color:#fff;

    flex-shrink:0;

}

.modal-header h2{
    margin:0;
}

.modal-header button{

    border:none;
    background:none;

    color:#fff;
    font-size:22px;
    cursor:pointer;

}

.modal-body{

    padding:20px;

    overflow-y:auto;      /* IMPORTANT */
    flex:1;

}

.modal-body input,
.modal-body select{

    width:100%;
    box-sizing:border-box;

}

.modal-footer{

    padding:15px 20px;

    border-top:1px solid #ddd;

    text-align:right;

    flex-shrink:0;

}