/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, 'Segoe UI', Arial, sans-serif; background: #f4f5f7; color: #1a1a2e; font-size: 15px; }

/* ── Navbar ── */
.navbar { background: #0a0a14; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; height: 60px; }
.navbar-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: 17px; }
.navbar-brand em { color: #cc0000; font-style: normal; }

/* ── Container ── */
.container { max-width: 1100px; margin: 32px auto; padding: 0 24px; }

/* ── Buttons ── */
.btn { display: inline-block; padding: 8px 18px; border-radius: 6px; border: none; cursor: pointer; font-size: 14px; font-weight: 600; text-decoration: none; transition: opacity .15s; }
.btn:hover { opacity: .85; }
.btn-primary { background: #cc0000; color: #fff; }
.btn-sm { padding: 5px 12px; font-size: 13px; background: #eee; color: #333; }
.btn-lg { padding: 12px 28px; font-size: 16px; }
.btn-danger { background: #dc3545; color: #fff; }

/* ── Alert ── */
.alert { padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; background: #fff3cd; border: 1px solid #ffc107; }
.alert-error { background: #f8d7da; border-color: #dc3545; }

/* ── Page header ── */
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.page-header h1 { font-size: 26px; font-weight: 700; }
.header-actions { display: flex; gap: 10px; }
.back-link { font-size: 13px; color: #666; text-decoration: none; display: block; margin-bottom: 4px; }
.back-link:hover { color: #cc0000; }

/* ── Card ── */
.card { background: #fff; border-radius: 10px; padding: 28px; margin-bottom: 24px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.card h2 { font-size: 17px; margin-bottom: 18px; color: #0a0a14; }
.card h3 { font-size: 14px; font-weight: 700; margin: 20px 0 12px; color: #444; text-transform: uppercase; letter-spacing: .5px; }

/* ── Forms ── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 8px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label, label { font-size: 13px; font-weight: 600; color: #555; }
input[type=text], input[type=url], input[type=number], textarea {
  border: 1px solid #ddd; border-radius: 6px; padding: 8px 12px; font-size: 14px; width: 100%; outline: none;
  transition: border-color .15s;
}
input:focus, textarea:focus { border-color: #cc0000; }
.input-wide { width: 100%; max-width: 600px; }
.form-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.hint { font-size: 13px; color: #888; }

/* ── Items ── */
.item-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.item-name  { flex: 3; }
.item-qty   { flex: .6; }
.item-price { flex: 1.2; }
.item-total { flex: 1; font-weight: 600; text-align: right; color: #0a0a14; }
.btn-remove { background: none; border: none; color: #aaa; cursor: pointer; font-size: 16px; padding: 0 4px; }
.btn-remove:hover { color: #cc0000; }
.total-display { text-align: right; font-size: 20px; margin: 16px 0; padding: 12px; background: #f8f8f8; border-radius: 6px; }

/* ── Table ── */
.table-wrap { background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.08); overflow: hidden; }
.inv-table { width: 100%; border-collapse: collapse; }
.inv-table th { background: #0a0a14; color: #fff; padding: 12px 16px; text-align: left; font-size: 13px; }
.inv-table td { padding: 12px 16px; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
.inv-table tr:hover td { background: #fafafa; }
.inv-link { color: #cc0000; font-weight: 600; text-decoration: none; }
.inv-link:hover { text-decoration: underline; }
.amount { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Badges ── */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.badge-paid { background: #d4edda; color: #155724; }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 60px 20px; color: #888; }
.empty-state p { margin-bottom: 20px; }

/* ── INVOICE PAGE ─────────────────────────────────────────────────── */
.invoice-page {
  background: #fff;
  border-radius: 10px;
  padding: 48px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  max-width: 860px;
  margin: 0 auto;
}

/* Header */
.inv-header { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.inv-sender { display: flex; gap: 16px; align-items: flex-start; flex: 1; }
.inv-sender img { flex-shrink: 0; }
.inv-sender-text { font-size: 13px; line-height: 1.65; color: #444; }
.inv-brand { font-size: 16px; font-weight: 800; color: #0a0a14; margin-bottom: 2px; }
.inv-legal { font-size: 12px; color: #888; margin-bottom: 6px; }
.inv-uid { font-size: 12px; color: #999; margin-top: 4px; }

.inv-meta { text-align: right; flex-shrink: 0; }
.inv-title-block { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-bottom: 14px; }
.inv-title-block h2 { font-size: 28px; font-weight: 900; letter-spacing: 1px; color: #0a0a14; }
.badge-paid-big {
  background: #cc0000; color: #fff; font-size: 13px; font-weight: 800;
  padding: 5px 14px; border-radius: 20px; letter-spacing: .5px;
}
.inv-meta-table { font-size: 13px; border-collapse: collapse; margin-left: auto; }
.inv-meta-table th { color: #888; font-weight: 600; text-align: right; padding: 3px 8px 3px 0; white-space: nowrap; }
.inv-meta-table td { color: #1a1a2e; font-weight: 500; text-align: left; padding: 3px 0; }

/* Customer */
.inv-customer { margin-bottom: 32px; padding: 16px 20px; background: #f8f8f8; border-radius: 6px; }
.inv-customer-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #aaa; margin-bottom: 6px; }
.inv-customer-data { font-size: 14px; line-height: 1.7; }

/* Items table */
.inv-items { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.inv-items thead th { background: #0a0a14; color: #fff; padding: 10px 14px; font-size: 13px; font-weight: 600; }
.inv-items tbody td { padding: 12px 14px; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
.inv-items tfoot td { padding: 14px; font-size: 16px; border-top: 2px solid #0a0a14; }
.inv-total-row td:last-child strong { font-size: 20px; color: #cc0000; }
.inv-tax-row td { padding: 7px 14px; font-size: 13px; color: #555; border-bottom: 1px solid #f0f0f0; }
.col-pos   { width: 40px; text-align: center; }
.col-qty   { width: 70px; text-align: center; }
.col-price, .col-total { width: 110px; text-align: right; }
.col-desc  { text-align: left; }

/* Paid block */
.inv-paid-block {
  display: flex; align-items: center; gap: 16px;
  background: #d4edda; border: 1px solid #c3e6cb; border-radius: 8px;
  padding: 16px 20px; margin-bottom: 40px;
}
.inv-paid-check { font-size: 28px; color: #155724; font-weight: 900; }
.inv-paid-block strong { display: block; color: #155724; font-size: 15px; }
.inv-paid-block div { font-size: 13px; color: #388d52; margin-top: 2px; }

/* Footer */
.inv-footer { border-top: 1px solid #eee; padding-top: 20px; font-size: 12px; color: #888; line-height: 1.7; text-align: center; }
.inv-footer-disclaimer { font-size: 11px; color: #666; margin-bottom: 8px; line-height: 1.6; }
.inv-footer-contact { margin-top: 6px; font-size: 11px; }

/* ── Print ─────────────────────────────────────────────────────────── */
@media print {
  body { background: #fff; font-size: 13px; }
  .navbar, .no-print { display: none !important; }
  .container { margin: 0; padding: 0; max-width: none; }
  .invoice-page { box-shadow: none; border-radius: 0; padding: 20px; max-width: none; }
  .btn { display: none; }
  @page { margin: 15mm; size: A4; }
}

/* ── New invoice layout ── */
.new-grid { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .new-grid { grid-template-columns: 1fr; } }
.new-main { min-width: 0; }
.new-sidebar { position: sticky; top: 20px; }
.optional { font-size: 12px; font-weight: 400; color: #aaa; }

/* ── Article picker ── */
.article-picker { padding: 20px; }
.article-picker h2 { margin-bottom: 14px; }
.picker-search input { width: 100%; margin-bottom: 10px; }
.picker-filters { display: flex; gap: 8px; margin-bottom: 12px; }
.picker-filters select { flex: 1; border: 1px solid #ddd; border-radius: 6px; padding: 7px 10px; font-size: 13px; }
.picker-results { max-height: 480px; overflow-y: auto; border-top: 1px solid #f0f0f0; padding-top: 8px; }
.picker-hint { color: #aaa; font-size: 13px; text-align: center; padding: 20px 0; }
.picker-item { padding: 10px 12px; border-radius: 6px; cursor: pointer; border-bottom: 1px solid #f5f5f5; transition: background .1s; }
.picker-item:hover { background: #fff5f5; }
.pi-name { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.pi-name strong { font-size: 13px; }
.pi-stage { background: #cc0000; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; }
.pi-addon { background: #555; }
.pi-engine { font-size: 12px; color: #666; }
.pi-stats { font-size: 12px; color: #888; }
.pi-price { font-size: 14px; font-weight: 700; color: #cc0000; margin-top: 3px; }

/* ── Discount ── */
.discount-row { display: flex; align-items: center; gap: 10px; margin: 14px 0; flex-wrap: wrap; }
.discount-row label { font-size: 13px; font-weight: 600; color: #555; }
.discount-row select { border: 1px solid #ddd; border-radius: 6px; padding: 7px 10px; font-size: 13px; }
.disc-preview { font-weight: 700; color: #cc0000; }

/* ── Sync button ── */
.btn-sync { background: #f0f0f0; color: #333; display: flex; flex-direction: column; align-items: center; line-height: 1.2; padding: 6px 14px; }
.sync-info { font-size: 11px; color: #888; font-weight: 400; }
.btn-paid { background: #28a745; color: #fff; }
.badge-open { background: #fff3cd; color: #856404; }

/* ── Stripe banner ── */
.stripe-banner { background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stripe-link { color: #0066cc; word-break: break-all; }

/* ── Invoice subtotal/discount rows ── */
.inv-subtotal-row td { padding: 8px 14px; font-size: 13px; color: #888; border-top: 1px solid #eee; }
.inv-discount-row td { padding: 8px 14px; font-size: 13px; color: #cc0000; font-weight: 600; }
.inv-open-block { background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; padding: 16px 20px; margin-bottom: 40px; }
.badge-open-big { background: #ffc107; color: #333; font-size: 13px; font-weight: 800; padding: 5px 14px; border-radius: 20px; }

/* ── Login ── */
.login-body { background: #0a0a14; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-wrap { background: #fff; border-radius: 12px; padding: 40px; width: 100%; max-width: 380px; box-shadow: 0 8px 40px rgba(0,0,0,.4); }
.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo h1 { font-size: 20px; font-weight: 700; margin-top: 12px; color: #0a0a14; }
.login-logo em { color: #cc0000; font-style: normal; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.btn-logout { font-size: 13px; color: #aaa; text-decoration: none; }
.btn-logout:hover { color: #fff; }