:root {
  --bg: #0b0f14;
  --panel: #121822;
  --panel-2: #0f1520;
  --text: #e6edf3;
  --muted: #9aa7b3;
  --primary: #4da3ff;
  --accent: #7ee787;
  --danger: #ff6b6b;
  --border: #223041;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: linear-gradient(180deg, var(--bg), #0d1420 50%, var(--bg));
  color: var(--text);
}

.app-header, .app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(18,24,34,0.8);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.app-footer { border-top: 1px solid var(--border); border-bottom: none; justify-content: center; }
.brand { display: flex; gap: 10px; align-items: center; }
.logo-circle { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #001225; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.app-header h1 { margin: 0; font-size: 18px; }

.container {
  max-width: none;
  margin: 20px auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.panel {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

h2, h3 { margin: 8px 0 12px; }
label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 10px; }
input, textarea, select {
  width: 100%;
  background: #0b111a;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 6px;
}
input[type="date"] { padding: 8px 10px; }

.grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.mt { margin-top: 12px; }

.btn { border-radius: 8px; border: 1px solid var(--border); padding: 8px 12px; cursor: pointer; color: var(--text); background: #0f1520; }
.btn:hover { filter: brightness(1.05); }
.btn-primary { background: var(--primary); color: #001225; border-color: #2b6bbf; font-weight: 700; }
.btn-secondary { background: #0f1520; }
.btn-outline { background: transparent; border-style: dashed; }
.btn-danger { background: #201014; border-color: #4a1e27; color: #ffd7d7; }

.actions { display: flex; gap: 8px; }

.table { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.table-head, .table-row {
  display: grid; grid-template-columns: 40px 2fr 80px 120px 120px 120px; gap: 8px; align-items: center;
}
.table-row { align-items: start; }
.table-head { background: #0d1420; padding: 10px; color: var(--muted); font-size: 13px; border-bottom: 1px solid var(--border); }
.table-body { display: grid; gap: 8px; padding: 10px; }
.table-row { background: #0b111a; border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.table-row input { margin: 0; }
.table-row textarea.desc { margin: 0; min-height: 64px; resize: vertical; }
/* Drag & drop affordances */
.table-row.dragging { opacity: 0.6; }
.table-row.placeholder { border: 2px dashed var(--border); background: rgba(34, 48, 65, 0.35); min-height: 48px; }
.drag-ghost { box-shadow: 0 8px 24px rgba(0,0,0,0.45); border: 1px solid var(--border); background: #0b111a; opacity: 0.9; padding: 8px; border-radius: 8px; }

/* Actions cell */
.row-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.drag-handle {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #0f1520;
  color: var(--muted);
  cursor: grab;
}
.drag-handle:active { cursor: grabbing; }
.drag-handle:focus { outline: none; }
.row-actions input[type="checkbox"] { transform: translateY(1px); }

/* Group rows in editor */
.table-row.group .group-title,
.table-row.group .group-desc { grid-column: 2 / span 4; }
.table-row.group .group-title { font-weight: 600; background: #0b111a; border: 1px dashed var(--border); border-radius: 6px; padding: 8px 10px; }
.table-row.group .group-desc { background: #0b111a; border: 1px dashed var(--border); border-radius: 6px; padding: 6px 10px; color: var(--muted); }
.table-row.group .row-actions { grid-column: 6; grid-row: 1 / span 2; align-self: start; }

.items-body .items-row.group-title { display: grid; grid-template-columns: 1fr; background: #0d1420; font-weight: 700; padding: 8px 10px; color: var(--text); border-left: 3px solid var(--accent); text-align: left; }
.items-body .items-row.group-title div { justify-content: flex-start; }
.items-body .items-row.group-description { display: grid; grid-template-columns: 1fr; padding: 8px 10px; color: var(--muted); background: transparent; }
.items-body .items-row.group-description div { justify-content: flex-start; }
.items-body .items-row.group-subtotal { display: grid; grid-template-columns: 1fr auto; padding: 8px 10px; border-top: 1px dashed var(--border); }
.row-total { text-align: right; padding-right: 6px; color: var(--text); }

/* Preview styles */
.quote-header { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--border); padding-bottom: 12px; margin-bottom: 12px; }
.company { display: flex; gap: 12px; align-items: flex-start; }
.logo { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; border: 1px solid var(--border); background: #0b111a; }
.company-name { font-weight: 700; font-size: 18px; }
.company-address, .company-contact, .company-legal { color: var(--muted); font-size: 13px; }
.company-contact.stack { display: grid; gap: 4px; }

.quote-title { font-size: 22px; font-weight: 800; color: var(--accent); letter-spacing: 1px; }
.quote-meta { text-align: right; display: grid; gap: 4px; justify-items: end; }

.client-block { background: #0b111a; border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 12px; }
.client-name { font-weight: 600; }
.client-address, .client-contact { color: var(--muted); font-size: 13px; }
.client-contact.stack { display: grid; gap: 4px; }

.items { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.items-head, .items-row { display: grid; grid-template-columns: 2fr 80px 120px 120px; gap: 8px; }
.items-head { background: #0d1420; color: var(--muted); padding: 10px; font-size: 13px; border-bottom: 1px solid var(--border); }
.items-body .items-row { padding: 10px; border-bottom: 1px dashed var(--border); }
.items-body .items-row:last-child { border-bottom: none; }
.items-row div { display: flex; align-items: center; min-width: 0; }
.items-row div:last-child { justify-content: flex-end; }

/* Ensure long description wraps and doesn't overflow horizontally */
.items-row div:first-child {
  white-space: pre-wrap;            /* preserve newlines, allow wrapping */
  overflow-wrap: anywhere;          /* break long words/URLs if needed */
  word-break: break-word;           /* extra safety for legacy engines */
}

/* Prevent grid inputs from forcing overflow in the editor table */
.table-row input { min-width: 0; }

.totals { margin-top: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #0b111a; max-width: 420px; margin-left: auto; }
.totals .row { display: flex; justify-content: space-between; padding: 6px 0; }
.totals .grand { font-size: 18px; font-weight: 800; color: var(--accent); border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 8px; }

.notes { margin-top: 12px; color: var(--muted); }

/* Icon rows */
.icon-text { display: inline-flex; align-items: center; gap: 8px; }
.icon-text.right { justify-content: flex-end; }
.ico { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; filter: grayscale(0.3); opacity: 0.9; }

/* Print pagination scaffolding */
.print-pages { display: none; }
.print-page { margin-top: 12px; }
.page-footer { color: var(--muted); font-size: 12px; text-align: right; margin-top: 8px; }

@media (max-width: 980px) {
  .container { grid-template-columns: 1fr; }
}

/* Print styles */
@media print {
  @page { margin: 12mm; }
  /* Neutral, pro palette for print */
  :root {
    --bg: #ffffff;
    --panel: #ffffff;
    --panel-2: #ffffff;
    --text: #000000;
    --muted: #333333;
    --primary: #000000;
    --accent: #000000;
    --danger: #000000;
    --border: #222222;
  }

  body { background: #fff !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .app-header, .form-panel, .app-footer, #resetBtn, #addItemBtn { display: none !important; }
  .container { margin: 0; padding: 0; max-width: none; }
  .preview-panel { border: none !important; background: #fff !important; }
  .panel, .client-block, .items, .totals { box-shadow: none !important; background: #fff !important; border-color: #222 !important; }
  .company-address, .company-contact, .company-legal, .client-address, .client-contact { color: #000 !important; }
  .quote-title { color: #000 !important; }

  /* Basculer vers une table par page */
  .items.original { display: none !important; }
  .print-pages { display: block !important; }
  .print-page { margin-top: 0 !important; page-break-after: always; break-after: page; }
  .print-page:last-child { page-break-after: auto; break-after: auto; }
  .items-body .items-row { break-inside: avoid-page; page-break-inside: avoid; }
  /* Hide original totals/notes; they are re-inserted into last printed page */
  .preview-panel > .totals, .preview-panel > .notes { display: none !important; }
  .totals, .notes { break-inside: avoid-page; page-break-inside: avoid; }

  /* Table look */
  .items { border-color: #222 !important; }
  .items-head { background: #f2f2f2 !important; color: #000 !important; border-bottom: 1px solid #222 !important; }
  .items-body .items-row { border-bottom: 1px solid #e0e0e0; }
  .items-body .items-row:last-child { border-bottom: none; }
  .row-total { color: #000 !important; }

  /* Group blocks: left accent in black and left-aligned titles */
  .items-body .items-row.group-title { background: #fff !important; border-left: 3px solid #000 !important; color: #000 !important; }
  .items-body .items-row.group-description { color: #000 !important; }
  .items-body .items-row.group-subtotal { border-top: 1px solid #222 !important; font-weight: 600; }
  .page-footer { color: #000 !important; }
}

/* ===== Templates d'impression ===== */
/* Pro Minimal: lignes fines, pas de cadres, look très sobre */
body[data-template="pro-minimal"] .preview-panel .items,
body[data-template="pro-minimal"] .print-page .items { border: none; }
body[data-template="pro-minimal"] .preview-panel .items-head,
body[data-template="pro-minimal"] .print-page .items-head { background: transparent; color: var(--text); border-bottom: 2px solid var(--border); }
body[data-template="pro-minimal"] .preview-panel .items-body .items-row,
body[data-template="pro-minimal"] .print-page .items-body .items-row { border-bottom: 1px solid var(--border); background: transparent; }
body[data-template="pro-minimal"] .preview-panel .client-block { background: transparent; border-style: solid; }
body[data-template="pro-minimal"] .preview-panel .totals { background: transparent; }
@media print {
  body[data-template="pro-minimal"] .items { border: none !important; }
  body[data-template="pro-minimal"] .items-head { background: transparent !important; color: #000 !important; border-bottom: 2px solid #000 !important; }
  body[data-template="pro-minimal"] .items-body .items-row { background: transparent !important; border-bottom: 1px solid #e0e0e0 !important; }
  body[data-template="pro-minimal"] .client-block, body[data-template="pro-minimal"] .totals { background: transparent !important; }
}

/* Pro Bordures: cadres nets et totaux accentués */
body[data-template="pro-borders"] .preview-panel .client-block,
body[data-template="pro-borders"] .preview-panel .items,
body[data-template="pro-borders"] .preview-panel .totals,
body[data-template="pro-borders"] .print-page .items,
body[data-template="pro-borders"] .print-page .totals { border-width: 2px; border-style: solid; border-color: var(--border); background: #0b111a; }
body[data-template="pro-borders"] .preview-panel .items-head,
body[data-template="pro-borders"] .print-page .items-head { background: #0d1420; border-bottom: 2px solid var(--border); }
body[data-template="pro-borders"] .items-body .items-row { border-bottom: 1px solid var(--border); }
body[data-template="pro-borders"] .items-body .items-row:last-child { border-bottom: none; }
body[data-template="pro-borders"] .items-body .items-row.group-title { border-left: 4px solid var(--accent); background: #0d1420; }
body[data-template="pro-borders"] .items-body .items-row.group-subtotal { background: #0f1520; border-top: 2px solid var(--border); font-weight: 700; }
@media print {
  body[data-template="pro-borders"] .client-block,
  body[data-template="pro-borders"] .items,
  body[data-template="pro-borders"] .totals { border-color: #000 !important; background: #fff !important; }
  body[data-template="pro-borders"] .items-head { background: #f2f2f2 !important; border-bottom-color: #000 !important; }
  body[data-template="pro-borders"] .items-body .items-row { border-bottom: 1px solid #e0e0e0 !important; }
  body[data-template="pro-borders"] .items-body .items-row.group-title { border-left: 4px solid #000 !important; background: #fff !important; }
  body[data-template="pro-borders"] .items-body .items-row.group-subtotal { background: #fff !important; border-top: 2px solid #000 !important; }
}

/* Bandeau Latéral: bande verticale d'accent à gauche */
body[data-template="sidebar-accent"] .preview-panel,
body[data-template="sidebar-accent"] .print-page { position: relative; padding-left: 14px; }
body[data-template="sidebar-accent"] .preview-panel::before,
body[data-template="sidebar-accent"] .print-page::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accent); opacity: 0.9;
}
body[data-template="sidebar-accent"] .items-body .items-row.group-title { border-left: 0; background: transparent; font-weight: 800; }
@media print {
  body[data-template="sidebar-accent"] .print-page::before { background: #000 !important; }
}

/* Minimal Centré: entête centré, table légère */
body[data-template="centered-minimal"] .quote-header { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
body[data-template="centered-minimal"] .quote-meta { text-align: center; justify-items: center; }
body[data-template="centered-minimal"] .icon-text.right { justify-content: center; }
body[data-template="centered-minimal"] .ico { display: none; }
body[data-template="centered-minimal"] .preview-panel .items,
body[data-template="centered-minimal"] .print-page .items { border: none; }
body[data-template="centered-minimal"] .preview-panel .items-head,
body[data-template="centered-minimal"] .print-page .items-head { background: transparent; border-bottom: 2px solid var(--border); }
body[data-template="centered-minimal"] .items-body .items-row { background: transparent; border-bottom: 1px dashed var(--border); }
@media print {
  body[data-template="centered-minimal"] .items-head { border-bottom-color: #000 !important; }
  body[data-template="centered-minimal"] .items-body .items-row { border-bottom: 1px solid #e0e0e0 !important; }
}
/* Pro Bandes: alternance de bandes sur les lignes */
body[data-template="pro-striped"] .preview-panel .items-body .items-row:nth-child(even),
body[data-template="pro-striped"] .print-page .items-body .items-row:nth-child(even) { background: rgba(255,255,255,0.035); }
@media print {
  body[data-template="pro-striped"] .items-body .items-row:nth-child(even) { background: #f7f7f7 !important; }
}

/* Compact: paddings et tailles réduites pour tenir plus */
body[data-template="compact"] .preview-panel .items-head,
body[data-template="compact"] .preview-panel .items-body .items-row,
body[data-template="compact"] .print-page .items-head,
body[data-template="compact"] .print-page .items-body .items-row { padding: 6px 8px; }
body[data-template="compact"] .preview-panel,
body[data-template="compact"] .print-page { font-size: 13px; }
@media print {
  body[data-template="compact"] .items-head,
  body[data-template="compact"] .items-body .items-row { padding: 6px 8px !important; }
}

/* Autocomplete */
.ac-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  background: #0b111a;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  max-height: 220px;
  overflow: auto;
  display: none;
}
.ac-item { padding: 8px 10px; cursor: pointer; font-size: 14px; }
.ac-item + .ac-item { border-top: 1px dashed var(--border); }
.ac-item:hover, .ac-item.active { background: #0d1420; }

/* Modal (bibliothèque de devis) */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 100; }
.modal[aria-hidden="false"] { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); }
.modal-content { position: relative; width: min(760px, 96vw); max-height: 86vh; overflow: auto; background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--border); border-radius: 12px; padding: 12px; box-shadow: 0 16px 48px rgba(0,0,0,0.45); }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 6px 12px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.modal-body { padding: 6px; }
.library-list { display: grid; gap: 8px; }
.library-item { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; background: #0b111a; border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.library-item .meta { color: var(--muted); font-size: 12px; }
.library-item .title { font-weight: 600; }
.library-item .btn { padding: 6px 10px; }