/* ToolFlight Invoice Maker -- isolated stylesheet.
   Reuses the shared design tokens (--ink, --card-border, --accent1, etc.)
   already defined in style.css for visual consistency, but every class
   name here is namespaced with "inv-" and doesn't exist anywhere else
   in the codebase, so nothing here can collide with or override any
   other tool's CSS. */

.inv-mode-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  margin:24px 0 40px;
}
@media (max-width:720px){ .inv-mode-grid{ grid-template-columns:1fr; } }

.inv-mode-card{
  background:var(--card); border:1px solid var(--card-border); border-radius:16px;
  padding:26px; text-align:center; display:flex; flex-direction:column; align-items:center;
}
.inv-mode-card--active{ border-color:var(--accent1); }
.inv-mode-card--soon{ opacity:0.85; }
.inv-mode-icon{ font-size:34px; margin-bottom:6px; }
.inv-mode-card h2{ font-size:18px; font-weight:800; margin:4px 0 2px; }
.inv-mode-sub{ font-size:12.5px; color:var(--accent1); font-weight:700; margin-bottom:10px; }
.inv-mode-desc{ font-size:13px; color:var(--ink-soft); line-height:1.6; margin-bottom:18px; flex:1; }

.inv-layout{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
@media (max-width:900px){ .inv-layout{ grid-template-columns:1fr; } }

.inv-form-col .pp-accordion{ margin-bottom:10px; }

.inv-field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px; }
@media (max-width:480px){ .inv-field-grid{ grid-template-columns:1fr; } }
.inv-field--wide{ grid-column:1 / -1; }
.inv-field label{ display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:4px; }
/* Input/select/textarea appearance is intentionally NOT redefined here --
   style.css already provides complete styling (including dark mode and
   focus states) for every input type used on this page. Redefining it
   here would only risk drifting out of sync with the site-wide look. */

.inv-items-table{ width:100%; border-collapse:collapse; margin-top:12px; font-size:13px; }
.inv-items-table th{ text-align:left; font-size:11px; color:var(--ink-soft); font-weight:700; padding:0 6px 6px; }
.inv-items-table td{ padding:4px 6px; vertical-align:middle; }
.inv-items-table input{ width:100%; padding:7px 8px; border-radius:7px; border:1px solid var(--card-border); background:transparent; color:var(--ink); font-size:13px; }
.inv-item-total{ font-weight:700; white-space:nowrap; }
.inv-item-remove{
  background:transparent; border:none; color:var(--ink-soft); font-size:18px; cursor:pointer; line-height:1;
  width:26px; height:26px; border-radius:6px;
}
.inv-item-remove:hover{ background:rgba(220,38,38,0.1); color:#dc2626; }

/* ---- Preview sheet: styled to look like an actual printable invoice ---- */
.inv-preview-col{ position:sticky; top:80px; }
.inv-preview-sheet{
  background:#ffffff; color:#1a1a2e; border-radius:12px; padding:32px;
  box-shadow:0 4px 24px rgba(0,0,0,0.12); font-size:13px; min-height:400px;
}
.inv-preview-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; gap:16px; }
.inv-preview-logo{ max-height:48px; max-width:180px; display:block; margin-bottom:8px; object-fit:contain; }
.inv-preview-biz-name{ font-size:17px; font-weight:800; margin-bottom:4px; }
.inv-preview-muted{ color:#6b6b7d; font-size:12.5px; line-height:1.5; }
.inv-preview-title{ text-align:right; }
.inv-preview-invoice-label{ font-size:20px; font-weight:800; letter-spacing:1px; color:#6d5ef5; margin-bottom:4px; }
.inv-preview-billto{ margin-bottom:20px; padding-top:16px; border-top:1px solid #eee; }
.inv-preview-label{ font-size:10.5px; font-weight:700; letter-spacing:0.5px; color:#9a9aab; margin-bottom:6px; text-transform:uppercase; }
.inv-preview-table{ width:100%; border-collapse:collapse; margin-bottom:18px; }
.inv-preview-table th{ text-align:left; font-size:11px; color:#9a9aab; font-weight:700; padding:0 4px 8px; border-bottom:2px solid #eee; }
.inv-preview-table td{ padding:9px 4px; border-bottom:1px solid #f0f0f3; }
.inv-preview-totals{ margin-left:auto; width:220px; }
.inv-preview-totals-row{ display:flex; justify-content:space-between; padding:5px 0; font-size:13px; color:#4a4a5a; }
.inv-preview-totals-final{ font-size:16px; font-weight:800; color:#1a1a2e; border-top:2px solid #1a1a2e; margin-top:6px; padding-top:10px; }
.inv-preview-notes{ margin-top:22px; padding-top:16px; border-top:1px solid #eee; }

@media print{
  @page{ size: A4; margin: 14mm; }
  body > *{ display:none !important; }
  #invPrintOnly{ display:block !important; }
  /* The shared, site-wide style.css has its own body-wide
     visibility:hidden print rules for other tools (resume preview,
     passport print sheet) that would otherwise cascade onto this
     content too, since visibility is inherited by descendants and
     display:block alone doesn't override an inherited visibility:hidden. */
  #invPrintOnly, #invPrintOnly *{ visibility:visible !important; }
  #invPrintOnly .inv-preview-sheet{
    box-shadow:none !important; border-radius:0 !important; padding:0 !important;
    /* Print output stays consistently light/white regardless of the
       site's own light/dark theme -- paper doesn't have a dark mode,
       and the existing hardcoded #fff/#1a1a2e colors on .inv-preview-sheet
       already ensure this; explicit here so it can't be accidentally
       overridden by a future site-wide dark-mode rule. */
    background:#ffffff !important; color:#1a1a2e !important;
  }
  #invPrintOnly .inv-preview-table tr{ page-break-inside: avoid; }
  #invPrintOnly .inv-preview-totals{ page-break-inside: avoid; }
}

/* ---- Phase 3: My Business (tabs + customer/product lists) ---- */
.inv-business-tabs{ display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
.inv-business-tabs .inv-business-tab{ flex:0 0 auto; white-space:nowrap; }
.inv-business-tab{
  background:transparent; border:1px solid var(--card-border); border-radius:9px;
  padding:8px 14px; font-size:13px; font-weight:600; color:var(--ink-soft); cursor:pointer;
}
.inv-business-tab--active{ background:var(--accent1); color:#fff; border-color:var(--accent1); }
.inv-business-panel{ max-width:720px; }

.inv-record-list{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.inv-record-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--card-border); border-radius:11px; padding:12px 14px;
}
.inv-record-name{ font-weight:700; font-size:13.5px; }
.inv-record-sub{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
.inv-record-actions{ display:flex; gap:6px; flex:0 0 auto; }

/* ---- Phase 2: account bar + auth modal ---- */
.inv-account-bar{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  background:var(--card); border:1px solid var(--card-border); border-radius:12px;
  padding:14px 18px; margin:20px 0; font-size:13.5px; font-weight:600;
}
.inv-account-bar-actions{ display:flex; gap:8px; }
.inv-mode-signin-link{ font-size:12.5px; color:var(--ink-soft); margin-top:10px; }
.inv-mode-signin-link a{ color:var(--accent1); font-weight:700; text-decoration:none; }
.inv-mode-signin-link a:hover{ text-decoration:underline; }

.inv-auth-box{ max-width:400px; }
.inv-auth-panel h2{ font-size:19px; font-weight:800; margin-bottom:4px; }
.inv-auth-error{ font-size:12.5px; color:var(--err); min-height:16px; margin-top:8px; }
.inv-auth-success{ font-size:12.5px; color:var(--ok); min-height:16px; margin-top:8px; }
.inv-auth-switch{ font-size:12.5px; color:var(--ink-soft); text-align:center; margin-top:14px; }
.inv-auth-switch a{ color:var(--accent1); font-weight:700; text-decoration:none; }
.inv-auth-switch a:hover{ text-decoration:underline; }
.inv-field-hint{ font-size:11px; color:var(--ink-soft); margin-top:4px; }

/* ---- Phase 6: Team Members ---- */
.inv-role-legend{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:600px){ .inv-role-legend{ grid-template-columns:1fr; } }
.inv-role-card{
  background:var(--card); border:1px solid var(--card-border); border-radius:11px; padding:14px;
}
.inv-role-name{ font-weight:800; font-size:13.5px; margin-bottom:4px; }
.inv-role-desc{ font-size:12px; color:var(--ink-soft); line-height:1.5; }
.inv-perm-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin-top:10px;
  font-size:12.5px;
}
@media (max-width:480px){ .inv-perm-grid{ grid-template-columns:1fr; } }
.inv-perm-grid label{ display:flex; align-items:center; gap:6px; }