/* styles.css - OmniInvoice Pro Stylesheet */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');

:root {
  --brand-color: #0284c7;
  --brand-light: #e0f2fe;
}

/* Touch friendly optimizations */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Custom Cursive Signature */
.font-signature {
  font-family: 'Caveat', cursive, sans-serif;
}

/* Sheet Scaler Wrapper for Seamless Mobile Fit */
#sheetScaleWrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  transition: width 0.15s ease-out, height 0.15s ease-out;
  margin: 0 auto;
}

/* A4 Sheet Proportions (Standard 210mm x 297mm, approx 794px width on 96dpi screens) */
.invoice-a4 {
  width: 794px;
  min-height: 1123px;
  background-color: #ffffff;
  position: relative;
  box-sizing: border-box;
  transform-origin: top center;
  transition: transform 0.15s ease-out;
  flex-shrink: 0;
}

/* Mobile viewport adjustments */
@media (max-width: 640px) {
  #canvasViewport {
    padding: 12px 6px !important;
    min-height: calc(100vh - 180px) !important;
  }
  
  /* Ensure form inputs are readable and do not trigger auto-zoom on mobile */
  input, select, textarea {
    font-size: 14px !important;
  }
}

/* Scrollbar styles for cleaner UI */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Tab active state */
.tab-btn.active-tab {
  background-color: #0284c7;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 1px 3px 0 rgba(2, 132, 199, 0.3);
}

/* Country pills */
.country-pill {
  border-color: #e2e8f0;
  background-color: #ffffff;
  color: #334155;
}
.country-pill:hover {
  border-color: #cbd5e1;
  background-color: #f8fafc;
}
.country-pill.active {
  border-color: #0284c7;
  background-color: #f0f9ff;
  color: #0369a1;
  font-weight: 700;
  box-shadow: 0 1px 2px 0 rgba(2, 132, 199, 0.15);
}

/* Template picker cards */
.template-card {
  border-color: #e2e8f0;
  background-color: #ffffff;
}
.template-card.active {
  border-color: #0284c7;
  background-color: #f0f9ff;
  box-shadow: 0 0 0 1px #0284c7;
}

/* Watermark Stamp Overlay */
.stamp-badge {
  position: absolute;
  top: 15%;
  right: 12%;
  transform: rotate(-18deg);
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 0.15em;
  padding: 6px 24px;
  border: 4px dashed;
  border-radius: 12px;
  opacity: 0.28;
  pointer-events: none;
  user-select: none;
  z-index: 10;
}
.stamp-badge.stamp-paid {
  color: #16a34a;
  border-color: #16a34a;
}
.stamp-badge.stamp-pending {
  color: #ca8a04;
  border-color: #ca8a04;
}
.stamp-badge.stamp-overdue {
  color: #dc2626;
  border-color: #dc2626;
}
.stamp-badge.stamp-draft {
  color: #64748b;
  border-color: #64748b;
}

/* Brand Text & Color Variables */
.text-brand {
  color: var(--brand-color);
}
.bg-brand {
  background-color: var(--brand-color);
}
.border-brand {
  border-color: var(--brand-color);
}

/* ========================================================
   TEMPLATE LAYOUT MODES
======================================================== */

/* 1. Modern Clean (Default) */
.template-modern {
  border-top: 6px solid var(--brand-color);
}
.template-modern .table-header-row {
  background-color: #f8fafc;
  color: #475569;
}

/* 2. Executive Corporate Banner */
.template-corporate #headerBand {
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 24px 32px;
  margin: -40px -40px 24px -40px;
  border-bottom: none;
}
.template-corporate #headerBand h2,
.template-corporate #headerBand #invDocTitle,
.template-corporate #headerBand .text-slate-800,
.template-corporate #headerBand .text-slate-900 {
  color: #ffffff !important;
}
.template-corporate #headerBand p,
.template-corporate #headerBand span,
.template-corporate #headerBand strong {
  color: rgba(255, 255, 255, 0.9) !important;
}
.template-corporate #headerBand .bg-slate-100 {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}
.template-corporate .table-header-row {
  background-color: #1e293b;
  color: #ffffff;
}

/* 3. Creative Studio */
.template-creative {
  border-left: 8px solid var(--brand-color);
}
.template-creative .table-header-row {
  background-color: var(--brand-light);
  color: var(--brand-color);
  font-weight: 800;
}
.template-creative #invGrandTotal {
  color: var(--brand-color);
}

/* 4. Official Tax Grid (Borders on every cell) */
.template-tax_official table {
  border: 1px solid #cbd5e1;
}
.template-tax_official th,
.template-tax_official td {
  border: 1px solid #e2e8f0;
  padding: 8px 10px;
}
.template-tax_official .table-header-row {
  background-color: #f1f5f9;
  border-bottom: 2px solid #94a3b8;
}

/* 5. Minimalist Clean */
.template-minimal {
  border: none;
  box-shadow: none;
}
.template-minimal .table-header-row {
  background-color: transparent;
  border-bottom: 1px solid #0f172a;
}
.template-minimal #invDocTitle {
  color: #0f172a !important;
}

/* 6. Midnight Luxury */
.template-midnight #headerBand {
  background-color: #0f172a;
  color: #f8fafc;
  padding: 24px 32px;
  margin: -40px -40px 24px -40px;
}
.template-midnight #headerBand h2,
.template-midnight #headerBand #invDocTitle,
.template-midnight #headerBand .text-slate-900,
.template-midnight #headerBand .text-slate-800 {
  color: #ffffff !important;
}
.template-midnight #headerBand span,
.template-midnight #headerBand p {
  color: #cbd5e1 !important;
}
.template-midnight .table-header-row {
  background-color: #0f172a;
  color: #ffffff;
}

/* Editable in-place visual outline */
[contenteditable="true"]:hover {
  outline: 1px dashed #38bdf8;
  cursor: text;
}
[contenteditable="true"]:focus {
  outline: 2px solid #0284c7;
  background-color: #f0f9ff;
  border-radius: 3px;
}

/* ========================================================
   PRINT STYLES - FLAWLESS A4 PRINTING & EXPORT
======================================================== */
@media print {
  @page {
    size: A4 portrait;
    margin: 0;
  }

  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    width: 210mm !important;
    height: 297mm !important;
    color: #000000 !important;
  }

  /* Hide app chrome */
  header,
  #editorPanel,
  #draftsModal,
  #mobileBottomNav,
  .print\:hidden {
    display: none !important;
  }

  #previewPanel {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  #canvasViewport {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
  }

  #sheetScaleWrapper {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
  }

  #invoiceSheet {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    page-break-inside: avoid;
  }

  /* Force print background colors & graphics */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
}