/* =====================================================
   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 auto;
  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;
}

.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;
}

/* ===============================
   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: 10px;
  padding-top: 8px;
  border-top: 2px solid #2563eb;
  font-weight: normal;
}

/* ===============================
   FOOTER (BANK + SIGNATURE)
   ✔ CLEAN GAP
   ✔ NO BLANK PAGE
================================ */

..footer {
  margin-top: 6mm;
  page-break-inside: avoid;
}
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  page-break-inside: avoid;
  break-inside: avoid;
}

.bank {
  font-size: 12px;
  line-height: 1.4;
}

.sign {
  text-align: right;
  font-size: 12px;
  font-weight: bold;
  padding-top: 30px;
}

/* ===============================
   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%;
  }
}