/* app.css — Custom overrides for PixelHive Studio
   Tailwind CSS CDN handles the majority of styling.
   This file contains only project-specific additions. */

/* ─── Brand / theme ─────────────────────────────────────────────── */
:root {
  --brand: #2563eb;      /* matches Tailwind blue-600 */
  --brand-dark: #1d4ed8; /* blue-700 */
  --brand-light: #dbeafe;/* blue-100 */
  --surface: #ffffff;
  --surface-muted: #f8fafc;
  --text-main: #0f172a;
  --text-muted: #475569;
  --border: #cbd5e1;
}

body {
  color: var(--text-main);
}

input,
textarea,
select {
  color: var(--text-main);
}

input::placeholder,
textarea::placeholder {
  color: #94a3b8;
}

.form-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
}

.form-input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--text-main);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.form-input:hover {
  border-color: #94a3b8;
}

.form-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.form-input:disabled,
.form-input[readonly] {
  background: var(--surface-muted);
  color: var(--text-muted);
}

select.form-input {
  padding-right: 2.5rem;
}

/* ─── Sidebar active item ───────────────────────────────────────── */
.sidebar-item-active {
  background-color: var(--brand-light);
  color: var(--brand);
  font-weight: 600;
}

/* ─── Data tables ───────────────────────────────────────────────── */
.table-hover tbody tr:hover {
  background-color: #f9fafb;
}

/* ─── Print helpers ─────────────────────────────────────────────── */
@media print {
  .no-print { display: none !important; }
  .print-only { display: block !important; }
  body { font-size: 10pt; }
}

/* ─── Invoice builder drag handle ──────────────────────────────── */
.drag-handle { cursor: grab; }
.drag-handle:active { cursor: grabbing; }

/* ─── Status badges ─────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.025em; }
.badge-draft   { background: #f3f4f6; color: #374151; }
.badge-sent    { background: #dbeafe; color: #1d4ed8; }
.badge-paid    { background: #d1fae5; color: #065f46; }
.badge-overdue { background: #fee2e2; color: #991b1b; }
.badge-void    { background: #f3f4f6; color: #9ca3af; }
.badge-pending { background: #fef3c7; color: #92400e; }
.badge-accepted{ background: #d1fae5; color: #065f46; }
.badge-declined{ background: #fee2e2; color: #991b1b; }

/* ─── Custom scrollbar (webkit) ──────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ─── ApexCharts override ────────────────────────────────────────── */
.apexcharts-tooltip { font-family: inherit !important; }