/* Minimal clean style */
:root{ --ink:#1f2937; --muted:#6b7280; --bg:#ffffff; --card:#f8fafc; --pri:#0b5fff; }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
a{color:var(--pri);text-decoration:none}
.wrap{max-width:1000px;margin:1rem auto;padding:1rem}
.container{max-width:1100px;margin:0 auto;display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:0.75rem 1rem}
.site-header{background:#0b1020;color:#fff}
.site-header a{color:#fff;margin-right:1rem}
.brand{font-weight:700}
.card{background:var(--card);padding:1rem;border-radius:14px;box-shadow:0 2px 12px rgba(0,0,0,.05);margin-bottom:1rem}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
label{display:block;font-weight:600;margin-top:0.5rem}
input,select,textarea{width:100%;padding:0.6rem;border:1px solid #e5e7eb;border-radius:10px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #e5e7eb;padding:0.5rem;text-align:left}
.btn{display:inline-block;padding:0.6rem 1rem;border-radius:10px;border:1px solid #d1d5db;background:#fff}
.btn.primary{background:var(--pri);color:#fff;border-color:transparent}
.actions{display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:0.75rem}
.site-footer{border-top:1px solid #eee;margin-top:2rem;padding:1rem 0;color:var(--muted)}
@media(max-width:820px){ .grid{grid-template-columns:1fr} }
.print-area{background:#fff;padding:1rem;border-radius:12px}
@media print { header,nav,.actions,.site-footer{display:none} body{background:#fff} .wrap{max-width:900px} }
.print-area h2 { margin: 0 0 .5rem 0; }
.print-area img { max-height: 60px; }
.print-area .card { background: #fff; }
@media print {
  .print-area { padding: 0; }
  .card { box-shadow: none !important; border: none !important; }
}
.print-doc { display:none; }
.print-doc .doc-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:14px; }
.print-doc .doc-meta h1{ margin:0 0 6px 0; }
.print-doc .cols{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:12px 0 16px; }
.print-doc .doc-table{ width:100%; border-collapse:collapse; margin:10px 0; }
.print-doc .doc-table th, .print-doc .doc-table td{ border:1px solid #e5e7eb; padding:8px; vertical-align:top; }
.print-doc .totals{ margin-top:12px; text-align:right; }
.print-doc .totals .grand{ font-size:1.1rem; margin-top:6px; }
.print-doc .notes{ margin-top:12px; }

@media print {
  body *{ visibility:hidden !important; }
  #printDoc, #printDoc *{ visibility:visible !important; }
  #printDoc{ display:block !important; position:static !important; inset:auto !important; background:#fff; color:#000; }
}
/* Mobile layout for Add Item section: stack fields + show labels correctly */
@media (max-width: 700px) {
  /* Hide original header row */
  .items-table thead {
    display: none;
  }

  .items-table tbody tr {
    display: block;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
  }

  .items-table tbody tr td {
    display: block;
    width: 100%;
    padding: 0.35rem 0;
  }

  .items-table tbody tr td textarea,
  .items-table tbody tr td input {
    width: 100%;
  }

  /* Column mapping with # as first column:
     1: # (no label)
     2: Description
     3: Qty
     4: Unit Price
     5: Remove button (no label)
  */

  /* Default: no label */
  .items-table tbody tr td::before {
    display: block;
    font-size: 0.75rem;
    color: var(--muted);
    margin-bottom: 0.15rem;
    content: "";
  }

  /* # column: keep as a small line, no label text */
  .items-table tbody tr td:nth-child(1) {
    font-weight: 600;
    max-width: 60px;
  }

  /* ✅ Correct labels */
  .items-table tbody tr td:nth-child(2)::before {
    content: "Description";
  }

  .items-table tbody tr td:nth-child(3)::before {
    content: "Qty";
  }

  .items-table tbody tr td:nth-child(4)::before {
    content: "Unit Price";
  }

  /* Last column = remove button: right aligned, no label */
  .items-table tbody tr td:last-child {
    text-align: right;
    padding-top: 0.5rem;
  }
  .items-table tbody tr td:last-child::before {
    content: "";
  }
}
/* Mobile: stack Add Item button + currency under the rows */
@media (max-width: 700px) {
  .items-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .items-actions label {
    margin-left: 0 !important;
    width: 100%;
  }

  .items-actions input[name="currency"] {
    width: 100%;
    max-width: none !important;
  }
}
/* Mobile friendliness fixes for header nav */
.site-header nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.site-header nav a{
  display:inline-block;
  padding:10px 12px;     /* improves tap target size */
  margin-right:0;        /* spacing handled by gap */
  line-height:1.2;
  border-radius:10px;
}

/* Mobile header: wrap + better tap targets (AdSense + usability) */
@media (max-width: 820px){
  .site-header .container{
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    padding:0.75rem;
  }

  .site-header .brand{
    width:100%;
    justify-content:center;
  }

  .site-header nav{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px 16px;
  }

  .site-header nav a{
    min-width:44px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 14px;
    margin-right:0;
    border-radius:10px;
  }
}
@media print {
    body * { visibility: hidden; }
    #printDoc, #printDoc * { visibility: visible; }
    #printDoc {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    /* Business Professional Specific Print Styling */
    .template-business_pro {
        font-family: Arial, sans-serif;
        padding: 20px;
    }

    .template-business_pro .doc-header {
        display: flex;
        justify-content: space-between;
        border-bottom: 2px solid #0056b3;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .template-business_pro .doc-type-title h1 {
        color: #0056b3;
        font-size: 28pt;
        margin: 0;
    }

    .template-business_pro .info-grid {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        margin-bottom: 30px;
    }

    .template-business_pro .items-table th {
        background-color: #f0f4f8 !important; /* Ensure color prints */
        color: #0056b3;
        border-bottom: 2px solid #0056b3;
    }
}
