/* ═══════════════════════════════════════════════════════════════
   IMAGINE: THE RUG STORE — POS Styles
   Palette: Cream / Charcoal / Antique Gold
   ═══════════════════════════════════════════════════════════════ */

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: #F0EBE3;
  color: #1C1C1C;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
  font-size: 14px;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
input, select, textarea, button { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
input, select, textarea {
  background: #fff;
  border: 1px solid #E5DDD2;
  border-radius: 8px;
  padding: 9px 12px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  border-color: #C9A84C;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
}
input[disabled], select[disabled] { background: #F5F0E8; color: #999; cursor: not-allowed; }

/* APP SHELL */
.app { min-height: 100vh; padding-bottom: 30px; }

/* HEADER */
.hd {
  background: #1C1C1C;
  color: #fff;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.hd-brand { display: flex; flex-direction: column; line-height: 1; }
.hd-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 4px;
  color: #C9A84C;
}
.hd-sub {
  font-size: 9px;
  letter-spacing: 2px;
  color: #888;
  text-transform: uppercase;
  margin-top: 2px;
}
.hd-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.nb {
  background: #2A2A2A;
  color: #E5DDD2;
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all 0.15s;
}
.nb:hover { background: #353535; }
.nb.on { background: #C9A84C; color: #1C1C1C; font-weight: 600; }
.nb-new { background: #C9A84C; color: #1C1C1C; font-weight: 600; margin-left: 4px; }
.nb-new:hover { background: #D4B765; }

/* VIEW CONTAINER */
.view { max-width: 1400px; margin: 0 auto; padding: 18px; }
.view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.view-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  color: #1C1C1C;
  margin: 0;
}
.header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* CARDS */
.card {
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(28,28,28,0.04);
  border: 1px solid #ECE5D8;
}
.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 12px;
}
.card-row:last-child { margin-bottom: 0; }
.card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: #1C1C1C;
  margin-bottom: 12px;
}
.card-desc { font-size: 13px; color: #555; margin-bottom: 14px; line-height: 1.5; }

/* INVOICE META */
.invoice-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  flex: 1;
}
.ino {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 36px;
  font-weight: 700;
  color: #C9A84C;
  letter-spacing: 2px;
  line-height: 1;
  min-width: 70px;
}

/* FIELDS */
.field { display: flex; flex-direction: column; flex: 1; min-width: 130px; }
.field label, .label {
  font-size: 10.5px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
}
.field-inline { display: flex; flex-direction: column; }
.field-inline label { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 3px; }
.field-inline input, .field-inline select { padding: 7px 10px; }
.field-end { display: flex; flex-direction: column; justify-content: flex-end; }
.field-span-2 { grid-column: span 2; }
.field-required input { border-color: #C9A84C; background: #FFFCF5; }

/* PAYMENT PILL */
.pay-pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: #F5F0E8;
  color: #555;
  border: 1px solid #E5DDD2;
  white-space: nowrap;
}
.pay-pill.cash { background: #E8F4EA; color: #1B5E35; border-color: #C5E0CB; }
.pay-pill.card { background: #E8EEF7; color: #1B3E76; border-color: #C5D3E0; }
.pay-pill.bank { background: #F7EFE5; color: #76401B; border-color: #E0CDC5; }

/* QTY STEPPER */
.qty-stepper { display: flex; align-items: center; border: 1px solid #E5DDD2; border-radius: 8px; overflow: hidden; }
.qty-stepper button {
  background: #F5F0E8;
  padding: 8px 13px;
  font-weight: 700;
  font-size: 14px;
  color: #1C1C1C;
}
.qty-stepper button:hover { background: #ECE5D8; }
.qty-stepper input { border: none; border-radius: 0; text-align: center; width: 50px; padding: 8px 0; font-weight: 700; }
.qty-stepper input:focus { box-shadow: none; }

/* LANDSCAPE TWO-COL LAYOUT */
.ls-cols { display: grid; grid-template-columns: 1fr 360px; gap: 14px; align-items: flex-start; }
.ls-left, .ls-right { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 900px) { .ls-cols { grid-template-columns: 1fr; } }

/* ADD ITEM GRID */
.item-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1.2fr 1fr 100px auto;
  gap: 10px;
  align-items: end;
}
.item-grid .field-span-2 { grid-column: span 2; }
@media (max-width: 1100px) {
  .item-grid { grid-template-columns: 1fr 1fr 1fr; }
  .item-grid .field-span-2 { grid-column: span 3; }
  .item-grid .field-end { grid-column: span 3; }
}

/* ITEMS TABLE */
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.it { width: 100%; border-collapse: collapse; font-size: 13px; }
.it th { text-align: left; padding: 9px 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.8px; color: #888; background: #FAF6F0; font-weight: 600; border-bottom: 1px solid #E5DDD2; }
.it td { padding: 11px 8px; border-bottom: 1px solid #F0EBE3; vertical-align: middle; }
.it tr:hover td { background: #FAF6F0; }
.it .tc { color: #BBB; font-weight: 500; }
.it .tk { font-family: 'Courier New', monospace; background: #F5F0E8; padding: 2px 7px; border-radius: 4px; font-size: 12px; color: #555; }
.it .tt { text-align: right; font-weight: 700; color: #1C1C1C; }
.it .strong { font-weight: 600; color: #1C1C1C; }
.it .hint { display: block; font-size: 11px; color: #999; font-weight: 400; margin-top: 2px; }
.it .small { font-size: 12px; color: #666; }
.muted { color: #BBB; }
.xbtn {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #FFF0F0; color: #CC4444;
  font-size: 12px; line-height: 1;
  transition: all 0.15s;
}
.xbtn:hover { background: #FFE0E0; transform: scale(1.1); }

/* TOTALS ROWS (right panel) */
.trow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #F0EBE3;
  font-size: 14px;
}
.trow:last-child { border-bottom: none; }
.trow-input { gap: 10px; }
.trow-applied { color: #888; font-size: 12.5px; padding: 4px 0; }
.trow-total {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 2px solid #1C1C1C;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: #1C1C1C;
}
.discount-input { display: flex; gap: 6px; }
.discount-input input { width: 90px; padding: 6px 8px; }
.discount-input select { width: 70px; padding: 6px 8px; }
.delivery-input { width: 110px; padding: 6px 10px; }

textarea { resize: vertical; min-height: 60px; font-family: inherit; }

/* ACTION STACK */
.action-stack { display: flex; flex-direction: column; gap: 9px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.3px;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-block { width: 100%; padding: 13px; }
.btn-add { background: #1C1C1C; color: #fff; }
.btn-add:hover { background: #333; }
.btn-print { background: #C9A84C; color: #1C1C1C; }
.btn-print:hover { background: #D4B765; }
.btn-wa { background: #25D366; color: #fff; }
.btn-wa:hover { background: #1FB855; }
.btn-save { background: #1B5E35; color: #fff; }
.btn-save:hover { background: #267E45; }
.btn-ghost { background: #F5F0E8; color: #555; border: 1px solid #E5DDD2; }
.btn-ghost:hover { background: #ECE5D8; }

/* SEARCH */
.search-input { min-width: 280px; padding: 9px 14px; }

/* SAVED INVOICES */
.invoice-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.invoice-card {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  border: 1px solid #ECE5D8;
  transition: all 0.15s;
}
.invoice-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-1px); }
.ic-top { display: flex; justify-content: space-between; margin-bottom: 10px; gap: 8px; }
.ic-no { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; font-weight: 700; color: #C9A84C; line-height: 1; letter-spacing: 1px; }
.ic-name { font-weight: 600; color: #1C1C1C; margin-top: 4px; }
.ic-phone { font-size: 12px; color: #888; }
.ic-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ic-total { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 700; color: #1B5E35; line-height: 1; }
.ic-date { font-size: 11px; color: #999; }
.ic-items { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; }
.chip {
  font-size: 11px;
  padding: 3px 9px;
  background: #F5F0E8;
  border-radius: 11px;
  color: #555;
  white-space: nowrap;
}
.ic-actions { display: flex; gap: 6px; margin-top: 8px; padding-top: 10px; border-top: 1px solid #F0EBE3; }
.bsm { flex: 1; padding: 7px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; transition: all 0.15s; }
.bs-edit { background: #F5F0E8; color: #555; }
.bs-edit:hover { background: #ECE5D8; }
.bs-wa { background: #25D366; color: #fff; }
.bs-pr { background: #C9A84C; color: #1C1C1C; }

/* STATUS BADGES */
.status-badge { font-size: 10px; padding: 3px 9px; border-radius: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.status-active { background: #FFF8E5; color: #B47700; }
.status-paid { background: #E8F4EA; color: #1B5E35; }
.status-advance-paid { background: #E8F0F7; color: #1B3E66; }
.status-returned { background: #FFF0F0; color: #CC4444; }
.status-exchanged { background: #F0E8F7; color: #5E1B76; }
.status-cancelled { background: #EEEEEE; color: #777; }

.empty { padding: 40px; text-align: center; color: #888; background: #fff; border-radius: 10px; }
.muted-italic { color: #BBB; font-style: italic; font-weight: 400; }

/* PRODUCTS */
.categories { display: flex; flex-direction: column; gap: 8px; }
.cat-card { background: #fff; border-radius: 10px; border: 1px solid #ECE5D8; overflow: hidden; }
.cat-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: #FDFAF7; border-bottom: 1px solid #F0EBE3;
  cursor: pointer; transition: background 0.15s;
}
.cat-header:hover { background: #FAF6F0; }
.cat-header.open { background: #FFF9F0; }
.cat-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; font-weight: 700; color: #1C1C1C; }
.cat-meta { margin-left: 12px; font-size: 12px; color: #AAA; }
.cat-header-right { display: flex; align-items: center; gap: 10px; }
.arrow { color: #C9A84C; font-size: 16px; }
.del-btn { background: #FFF0F0; color: #CC4444; border: 1px solid #FFBCBC; border-radius: 5px; padding: 5px 11px; font-size: 11px; font-weight: 700; }
.del-btn:hover { background: #FFE0E0; }
.cat-body { padding: 14px 16px; background: #fff; }
.empty-line { color: #999; font-style: italic; padding: 8px 0; }
.size-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.size-table th { text-align: left; padding: 8px 10px; font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.8px; background: #FAF6F0; }
.size-table td { padding: 10px; border-bottom: 1px solid #F0EBE3; }
.size-table td.right, .size-table th[style*="right"] { text-align: right; }
.size-table .strong { font-weight: 600; }
.price-edit { display: inline-flex; gap: 6px; align-items: center; }
.price-edit input { width: 110px; padding: 6px 10px; text-align: right; }
.save-mini { background: #1B5E35; color: #fff; border-radius: 5px; padding: 6px 11px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.save-mini:hover { background: #267E45; }
.add-size-box { padding: 12px; background: #FAF6F0; border-radius: 8px; border: 1px dashed #E5DDD2; }
.add-size-label { font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; }
.add-size-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.add-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }

/* EXPORT */
.export-summary { padding: 12px 14px; background: #E8F4EA; border-radius: 8px; color: #1B5E35; font-size: 13.5px; margin-top: 12px; }
.export-empty { padding: 12px 14px; background: #F5F0E8; border-radius: 8px; color: #888; font-size: 13px; margin-top: 12px; font-style: italic; }
.instruction-list { padding-left: 22px; line-height: 1.9; color: #444; font-size: 13.5px; }
.instruction-list li { margin-bottom: 3px; }
.suggestion-box { margin-top: 14px; padding: 12px; background: #FFF9F0; border-left: 3px solid #C9A84C; border-radius: 0 6px 6px 0; font-size: 12.5px; color: #555; }
.suggestion-box code { font-family: 'Courier New', monospace; background: #F5F0E8; padding: 2px 6px; border-radius: 4px; font-size: 11.5px; }

/* TOAST */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #1B5E35; color: #fff;
  padding: 12px 22px; border-radius: 24px;
  font-size: 13.5px; font-weight: 500;
  z-index: 1000;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  animation: toastIn 0.25s ease-out;
}
.toast-error { background: #CC4444; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* HIDE PRINT-ONLY ON SCREEN */
.print-only { display: none; }

/* PRINT STYLES — A5 LANDSCAPE INVOICE */
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  @page { size: A5 landscape; margin: 0; }
  html, body { margin: 0; padding: 0; background: #fff; }
  .app, .toast { display: none !important; }
  .print-only { display: block !important; background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; }

  .pi-page {
    position: relative;
    width: 210mm;
    height: 148mm;
    padding: 9mm 10mm 5mm;
    background: #fff;
    box-sizing: border-box;
    overflow: hidden;
  }
  .pi-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2mm; }
  .pi-logo { height: 16mm; width: auto; display: block; }
  .pi-store { text-align: right; font-size: 7.5pt; line-height: 1.5; color: #444; }
  .pi-store strong { font-size: 8.5pt; color: #000; }
  .pi-rule-thick { border: none; border-top: 1.4pt solid #000; margin: 0; }
  .pi-rule-thin { border: none; border-top: 0.25pt solid #BBB; margin: 1pt 0 0; }
  .pi-gap { height: 5pt; }

  .pi-meta { display: flex; justify-content: space-between; margin-bottom: 9pt; padding: 0 2pt; }
  .pi-meta > div { flex: 1; }
  .pi-lbl { font-size: 5.5pt; text-transform: uppercase; letter-spacing: .8pt; color: #BBB; margin-bottom: 1.5pt; }
  .pi-val { font-size: 9pt; font-weight: bold; color: #000; }

  .pi-billto { display: flex; background: #F5F5F5; border: 0.3pt solid #CCC; border-radius: 1.5pt; overflow: hidden; height: 9mm; margin-bottom: 13pt; }
  .pi-billto-accent { width: 2pt; background: #000; flex-shrink: 0; }
  .pi-billto-body { padding: 1.5mm 3mm; flex: 1; display: flex; flex-direction: column; justify-content: center; }
  .pi-billto-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1pt; }
  .pi-cust-name { font-size: 10pt; font-weight: bold; color: #000; }
  .pi-cust-ph { font-size: 8.5pt; color: #333; }

  .pi-tbl { width: 100%; border-collapse: collapse; margin-bottom: 11pt; font-size: 9pt; table-layout: fixed; }
  .pi-tbl thead tr { border-top: 1pt solid #000; border-bottom: 1pt solid #000; }
  .pi-tbl th { padding: 4pt 3pt; font-size: 6.5pt; font-weight: bold; text-transform: uppercase; letter-spacing: .5pt; color: #333; background: #F5F5F5; text-align: left; vertical-align: middle; }
  .pi-tbl td { padding: 5pt 3pt; border-bottom: 0.25pt solid #EBEBEB; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pi-tbl tbody tr:last-child td { border-bottom: 1pt solid #000; }
  .pi-rh-tall td { padding: 14pt 3pt; }
  .pi-rh-med td { padding: 10pt 3pt; }
  .pi-rh-short td { padding: 5pt 3pt; }
  .pi-alt td { background: #F9F9F9; }
  .pi-muted { color: #BBB; font-size: 7.5pt; }
  .pi-mono { font-family: 'Courier New', monospace; font-size: 7.5pt; color: #777; }
  .pi-strong { font-weight: bold; color: #000; font-size: 9pt; }

  .pi-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 10pt; margin-bottom: 5pt; }
  .pi-notes-area { flex: 1; max-width: 55%; }
  .pi-notes-text { font-size: 8pt; color: #333; line-height: 1.4; margin-top: 2pt; }
  .pi-totals-area { width: 60mm; flex-shrink: 0; margin-left: auto; }
  .pi-totals { margin-bottom: 8pt; }
  .pi-trow { display: flex; justify-content: space-between; padding: 1.5pt 2pt; border-bottom: 0.25pt solid #CCC; font-size: 8.5pt; }
  .pi-trow:last-child { border-bottom: none; }
  .pi-disc { color: #777; }
  .pi-grand { font-size: 11pt; font-weight: bold; border: 0.7pt solid #000; border-radius: 1.5pt; padding: 2.5mm 2pt; background: #F5F5F5; margin-top: 3pt; }

  .pi-sig { text-align: right; padding-top: 14pt; }
  .pi-sig-line { display: inline-block; width: 50mm; border-top: 0.5pt solid #000; margin-bottom: 2pt; }
  .pi-sig-label { font-size: 6.5pt; text-transform: uppercase; letter-spacing: .4pt; color: #888; }

  .pi-continued { text-align: right; font-style: italic; font-size: 8pt; color: #777; margin-top: 4pt; }

  .pi-footer { position: absolute; bottom: 5mm; left: 10mm; right: 10mm; text-align: center; }
  .pi-footer-rule { border: none; border-top: 0.5pt solid #000; margin-bottom: 3pt; }
  .pi-footer-main { font-size: 7pt; font-weight: bold; color: #000; margin-bottom: 1.5pt; }
  .pi-footer-hours { font-size: 6.5pt; color: #777; }
}