@font-face{
  font-family: "UAESymbol";
  src: url("/assets/fonts/uae-symbol.woff2") format("woff2"),
       url("/assets/fonts/uae-symbol.woff") format("woff"),
       url("/assets/fonts/uae-symbol.ttf") format("truetype");
  font-display: swap;
}

.dirham-symbol{
  font-family: "UAESymbol", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 1em;
  line-height: 1;
  vertical-align: baseline;
}
.price .dirham-symbol { margin-right: .25ch; }

/* Reusable symbol class */
.dirham-symbol {
  font-family: "UAESymbol", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1;
  display: inline-block;
  /* keep the symbol same height as text */
  font-size: 1em;
  vertical-align: baseline;
}

/* Optional spacing so the symbol doesn’t stick to the number */
.price .dirham-symbol { margin-right: .25ch; }
/* =========================
   Global variables
   ========================= */
:root{
  /* Default theme (updated by JS) */
  --theme:#7E22CE;
  /* Back-compat alias if any old rule reads --main-color */
  --main-color: var(--theme);
}

/* =========================
   Base / neutral styles
   (theme overrides come at the bottom)
   ========================= */

/* Global body */
body {
  font-family: 'Inter', sans-serif;
  background-color: #f3f4f6;
}

html { scroll-behavior: smooth; }

/* Header tweaks (your site chrome) */
header#mainHeader { background-color: #793dee; }
#mainHeader { backdrop-filter: blur(8px); }
.h-7 { height: 10.75rem !important; }
.hidden.md\:flex.items-center.bg-\[\#1a1a1a\].px-6.py-2.rounded-full.shadow-inner.space-x-4.text-sm.font-medium.tracking-tight { color: white; }
.shadow-inner {
  --tw-shadow: inset 0 2px 4px 0 #fff !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #fff), var(--tw-ring-shadow, 0 0 #fff), var(--tw-shadow);
}

/* Form controls */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="tel"],
select,
textarea {
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  width: 100%;
  font-size: 0.875rem;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 1px #6366f1;
}
.form-input { margin-bottom: 0.5rem; }
.form-select { background-color: #fff; }
.form-textarea { resize: none; }

/* Color swatches */
.color-circle {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  border: 2px solid #e5e7eb;
  cursor: pointer;
  outline: none;
  transition: transform 0.2s ease;
}
.color-circle:hover { transform: scale(1.1); }

/* Invoice builder: items grid */
.invoice-item-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 1rem;
  margin-top: 0.5rem;
}

/* Preview shell */
#invoicePreview {
  background: #ffffff;
  padding: 2rem;
  border-radius: 1rem;
  font-family: 'Inter', sans-serif;
  width: 100%;
  max-width: 100%;
  margin: auto;
  border: 1px solid #e5e7eb;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

/* Table baseline (neutral) */
#invoicePreview table {
  width: 100%;
  table-layout: auto;            /* ensure flexibility */
  border-collapse: collapse;
  word-wrap: break-word;
}
#invoicePreview th,
#invoicePreview td {
  border: 1px solid #e5e7eb;
  padding: 0.5rem;
  font-size: 0.875rem;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
#invoicePreview th {
  background-color: #f9fafb;
  font-weight: 600;
}

/* Invoice PDF block defaults */
.pdf-invoice {
  max-width: 700px;
  width: 100%;
  margin: auto;
  padding: 24px;
  overflow: visible;
  word-break: break-word;
  font-family: 'Inter', sans-serif;
}
.pdf-invoice h1, .pdf-invoice h2 { font-weight: 700; }
.pdf-invoice p { margin: 0; padding: 0; }
.pdf-invoice table th,
.pdf-invoice table td { border: 1px solid #ddd; padding: 6px 10px; font-size: 13px; word-wrap: break-word; }
.pdf-invoice img { max-width: 60%; height: auto; object-fit: contain; }

#invoicePDFWrapper { width: 100%; overflow-x: auto; padding: 0 1rem; }

/* Logo in preview */
#previewLogo img {
  max-height: 64px;
  margin: 0 auto 1rem auto;
  display: block;
  object-fit: contain;
}

/* Misc UI */
#invoicePreview .notes { padding-top: 1rem; font-style: italic; color: #6b7280; font-size: 0.875rem; }
#invoicePreview .text-green-600 { color: #059669; }

button { transition: all 0.3s ease; }
button:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4); }

/* Footer gradient (site chrome) */
.footer-gradient {
  background: linear-gradient(135deg, #3B82F6, #6366F1, #9333EA);
  background-size: 180% 180%;
  animation: gradientShift 6s ease infinite;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
footer p, footer li { color: #fff; }
.h-10 { height: 10.5rem !important; }

input:hover, select:hover, textarea:hover {
  box-shadow: 0 0 0 2px rgba(99,102,241,0.3);
}

@media (min-width: 1024px) {
  .sticky-preview { position: sticky; top: 6rem; z-index: 40; }
}

/* Print-friendly tweaks */
@media print {
  body { background: white; }
  body {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    letter-spacing: 0.01em;
    background: #f6f7f9;
  }
  #invoicePreview {
    box-shadow: none !important;
    background: white !important;
    color: black !important;
  }
  input, button, select, textarea, .no-print { display: none !important; }
}

/* =========================
   THEME OVERRIDES
   (keep at the very end)
   ========================= */

/* Elements that take the theme color */
#invoicePDF #invoiceTitle,
#invoicePDF #invoiceNumberPDF,
#invoicePreview #totalDuePDF {
  color: var(--theme);
}

/* Notes accent */
#notesPDF { border-left: 4px solid var(--theme) !important; }

/* Table header: themed background + white text */
#invoicePreview.invoice-theme thead th {
  background: var(--theme) !important;
  color: #fff !important;
  border-color: var(--theme) !important;
}

/* Table body borders tinted to theme (20% opacity) */
#invoicePreview.invoice-theme td {
  border-color: color-mix(in srgb, var(--theme) 30%, #e5e7eb) !important;
  /* If you need wider support than color-mix, use: border-color: rgba(0,0,0,0.12) and update via inline style from JS */
}

/* Swatch selected ring */
.color-circle.selected {
  border-color: var(--theme);
  box-shadow: 0 0 0 3px #00000010;
}
/* Logo height controlled by a CSS variable */
#logoPreviewPDF img { max-height: var(--logo-height, 150px); object-fit: contain; }