/* ===============================
   BASE (your original styles)
   =============================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f5f5f5;
}

/* Navbar */
.navbar { background: #2c3e50; color: white; padding: 1rem 0; }
.nav-container {
  max-width: 1200px; margin: 0 auto; display: flex;
  justify-content: space-between; align-items: center; padding: 0 1rem;
}
.nav-logo { font-size: 1.5rem; font-weight: bold; color: white; text-decoration: none; }
.nav-menu a { color: white; text-decoration: none; margin-left: 1.5rem; }

/* Main + Footer */
.main-content { min-height: calc(100vh - 120px); padding: 2rem 1rem; }
.footer { background: #34495e; color: white; text-align: center; padding: 1.5rem; }

/* Forms */
.form-container {
  max-width: 600px; margin: 2rem auto; padding: 2rem; background: white;
  border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.form-field { margin: 1.5rem 0; }
.form-field label { display: block; margin-bottom: 0.5rem; font-weight: 500; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem;
}

/* Buttons */
.btn {
  display: inline-block; padding: 0.75rem 1.5rem; border: none; border-radius: 4px;
  cursor: pointer; text-decoration: none; font-size: 1rem;
}
.btn-primary { background: #3498db; color: white; }
.btn-secondary { background: #95a5a6; color: white; }

/* Dashboard */
.dashboard-container { max-width: 1200px; margin: 0 auto; }
.dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.forms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.form-card {
  background: white; padding: 1.5rem; border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.form-stats { display: flex; justify-content: space-between; margin: 1rem 0; font-size: 0.9rem; color: #666; }
.form-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Auth */
.auth-container {
  max-width: 400px; margin: 2rem auto; padding: 2rem; background: white;
  border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.auth-form .form-field { margin: 1rem 0; }
.auth-form button { width: 100%; margin-top: 1rem; }

/* Alerts */
.alert { padding: 1rem; border-radius: 4px; margin-bottom: 1rem; }
.alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* ===============================
   FORM BUILDER (builder.php)
   =============================== */
.builder-container { max-width: 1400px; margin: 20px auto; padding: 20px; }
.builder-container h1 { margin-bottom: 12px; }

.builder-layout {
  display: grid; grid-template-columns: 250px 1fr 300px; gap: 20px;
}

/* Panels */
.fields-panel, .field-settings-panel, .form-preview {
  background: #fff; padding: 15px; border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.fields-panel h3, .field-settings-panel h3, .form-preview h3 { margin-bottom: 10px; }

/* Available field items (draggable) */
.field-item {
  padding: 10px; margin: 6px 0; background: #f8f9fa; border: 2px dashed #dee2e6;
  border-radius: 6px; cursor: grab; transition: background .15s ease, border-color .15s ease;
}
.field-item:active { cursor: grabbing; }
.field-item:hover { background: #f1f3f5; border-color: #cfd4da; }

/* Preview canvas */
.fields-container {
  min-height: 220px; padding: 12px; border: 2px dashed #e5e7eb; border-radius: 8px;
  display: grid; gap: 12px; background: #fafafa;
}
.fields-container.drag-over { border-color: #3498db; background: #eef6ff; }

.empty-message { color: #777; font-size: 0.95rem; padding: 8px 4px; }

/* Selected/hover states for fields already dropped */
.form-field.preview {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px;
}
.form-field.preview.is-active { outline: 2px solid #3498db; outline-offset: 2px; }

/* Form settings block in preview */
.form-preview .form-settings {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px;
}

/* Right pane: field settings */
#field-settings .setting-group {
  margin: 10px 0; padding: 10px; border: 1px solid #eef2f7; border-radius: 6px; background: #fafcff;
}
#field-settings label { display: block; font-size: 0.9rem; margin-bottom: 6px; color: #444; }
#field-settings input[type="text"],
#field-settings input[type="number"],
#field-settings textarea,
#field-settings select {
  width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.95rem;
}

/* Save bar in preview */
.form-actions { margin-top: 14px; display: flex; gap: 10px; }
#save-form.btn { min-width: 140px; }

/* Helper for hidden drag image ghost */
.drag-ghost { opacity: 0.5; }

/* ===============================
   INVOICE (view-only)
   =============================== */
.page-wrap { display: flex; align-items: center; justify-content: center; padding: 2rem; }

.invoice {
  width: 100%;
  max-width: 900px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 2.5rem;
  position: relative;
}
.invoice::after {
  content: "INVOICE";
  position: absolute;
  top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg);
  font-size: 120px; letter-spacing: 10px; color: rgba(0,0,0,.03);
  pointer-events: none; user-select: none;
}

.inv-header { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 1.75rem; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand-logo {
  width: 56px; height: 56px; border-radius: 12px; background: #2c3e50;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700;
}
.brand-meta h1 { font-size: 20px; color: #111827; }
.brand-meta p { font-size: 12px; color: #6b7280; }
.inv-title { text-align: right; }
.inv-title h2 { font-size: 28px; color: #111827; letter-spacing: .5px; }
.badge { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #eaf6ff; color: #2563eb; font-size: 12px; font-weight: 600; margin-top: 6px; }
hr.sep { border: none; border-top: 1px solid #e5e7eb; margin: 18px 0 22px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.card { border: 1px solid #eef2f7; border-radius: 8px; padding: 14px 16px; background: #fafafa; }
.card h3 { font-size: 12px; letter-spacing: .08em; color: #6b7280; text-transform: uppercase; margin-bottom: 8px; }
.card p, .card a { font-size: 14px; color: #374151; }

.meta { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.kv { border: 1px dashed #e5e7eb; border-radius: 8px; padding: 10px 12px; background: #fff; }
.kv .k { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .08em; }
.kv .v { font-size: 14px; color: #111827; font-weight: 600; }

.table-wrap { margin-top: 22px; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
thead th {
  background: #f9fafb; font-size: 12px; color: #6b7280; text-transform: uppercase;
  letter-spacing: .06em; text-align: left; padding: 12px; border-bottom: 1px solid #e5e7eb;
}
tbody td { padding: 12px; border-bottom: 1px solid #f1f5f9; font-size: 14px; color: #111827; vertical-align: top; }
tfoot td { padding: 10px 12px; font-size: 14px; }

.right { text-align: right; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

.totals { width: 100%; margin-top: 8px; }
.totals tr td { border: none; }
.totals .label { color: #6b7280; }
.totals .amount { color: #111827; font-weight: 700; }

.notes { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-top: 18px; }
.notes .blk { border: 1px solid #eef2f7; border-radius: 8px; padding: 12px; }
.notes h4 { font-size: 12px; color: #6b7280; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.notes p, .notes li { font-size: 13px; color: #374151; }
.notes ul { padding-left: 18px; }

.inv-footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 24px; color: #6b7280; font-size: 12px;
}

/* ===============================
   PRINT + RESPONSIVE
   =============================== */
@media print {
  body { background: #fff; }
  .main-content, .page-wrap { padding: 0; }
  .invoice { box-shadow: none; border: none; border-radius: 0; padding: 28mm 18mm; max-width: 100%; }
  .invoice::after { display: none; }
  .navbar, .footer { display: none !important; }
  @page { size: A4; margin: 10mm 10mm 14mm; }
  .card { background: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #9ca3af; }
}

@media (max-width: 720px) {
  .builder-layout { grid-template-columns: 1fr; }
  .inv-header { flex-direction: column; align-items: flex-start; }
  .inv-title { text-align: left; }
  .grid-2, .notes { grid-template-columns: 1fr; }
  .meta { grid-template-columns: 1fr 1fr; }
}