/* ==========================================================================
   FreeProTools — Shared tool-builder layout
   Used by: lettre-motivation, facture, devis (form + live preview pattern).
   Kept separate from cv-tool.css on purpose so the CV generator is untouched.
   ========================================================================== */

.tool-shell{ padding: 20px 0 clamp(48px, 6vw, 88px); }
.tool-shell .wrap{ max-width: 1400px; }

.tool-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom: 20px;
}
.tool-topbar .breadcrumb{ font-size:.86rem; color: var(--text-faint); }
.tool-topbar .breadcrumb a{ color: var(--text-muted); }
.tool-topbar .breadcrumb a:hover{ color: var(--text); }
.tool-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.tool-hint{ color:var(--text-faint); font-size:.88rem; max-width:70ch; margin:-8px 0 20px; }

/* Mobile tab switcher */
.builder-tabs{ display:none; gap:8px; margin-bottom:16px; }
.builder-tabs button{
  flex:1; padding:12px; border-radius: 10px; border:1px solid var(--line);
  background: var(--surface); color: var(--text-muted); font-weight:600; cursor:pointer;
  min-height:44px;
}
.builder-tabs button[aria-selected="true"]{ background: var(--gold); color:#1A1305; border-color: var(--gold); }

.builder-shell{
  display:grid; grid-template-columns: 420px 1fr; gap: 24px; align-items:start;
}
@media (max-width: 980px){
  .builder-shell{ grid-template-columns: 1fr; }
  .builder-tabs{ display:flex; }
  .builder-pane[data-pane="form"], .builder-pane[data-pane="preview"]{ display:none; }
  .builder-pane[data-pane="form"].active, .builder-pane[data-pane="preview"].active{ display:block; }
}

/* ---------- Form panel ---------- */
.tool-form{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-l);
  padding: clamp(18px, 2.5vw, 26px);
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  position: sticky; top: 88px;
}
@media (max-width: 980px){ .tool-form{ position:static; max-height:none; } }

.form-section{ border-top: 1px solid var(--line-soft); padding-top: 18px; margin-top: 18px; }
.form-section:first-child{ border-top:none; padding-top:0; margin-top:0; }
.form-section h2{ font-size: 1rem; margin-bottom: 14px; display:flex; align-items:center; gap:8px; }
.form-section h2 svg{ width:18px; height:18px; color: var(--gold); }

.field{ margin-bottom: 14px; }
.field label{ display:block; font-size:.82rem; font-weight:600; color: var(--text-muted); margin-bottom:6px; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-row.cols-3{ grid-template-columns: 1fr 1fr 1fr; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="month"], input[type="date"], input[type="number"], textarea, select{
  width:100%; background: var(--bg-alt); border:1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 10px 12px; font-family: var(--font-body); font-size: .92rem;
  transition: border-color .15s ease;
}
input:focus, textarea:focus, select:focus{ outline:none; border-color: var(--gold); }
textarea{ resize: vertical; min-height: 78px; line-height:1.5; }
::placeholder{ color: var(--text-faint); }

select{ appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A0B4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 10px center; background-size:16px; padding-right: 34px; }

.radio-group{ display:flex; gap:8px; flex-wrap:wrap; }
.radio-chip{ position:relative; }
.radio-chip input{ position:absolute; opacity:0; width:100%; height:100%; cursor:pointer; margin:0; }
.radio-chip span{
  display:block; padding: 9px 14px; border-radius:999px; border:1px solid var(--line);
  color: var(--text-muted); font-size:.86rem; font-weight:600; transition: all .15s ease;
}
.radio-chip input:checked + span{ background: var(--gold); border-color: var(--gold); color:#1A1305; }
.radio-chip input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; }

.repeat-item{
  background: var(--bg-alt); border:1px solid var(--line-soft); border-radius: 12px;
  padding: 14px; margin-bottom: 12px; position:relative;
}
.repeat-item .remove-item{
  position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%;
  background: var(--surface-2); border:1px solid var(--line); color: var(--text-muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.9rem;
}
.repeat-item .remove-item:hover{ color: var(--danger); border-color: var(--danger); }

.add-item-btn{
  width:100%; padding: 10px; border-radius:10px; border:1px dashed var(--line);
  background:transparent; color: var(--text-muted); font-weight:600; font-size:.88rem; cursor:pointer;
  transition: border-color .15s, color .15s;
}
.add-item-btn:hover{ border-color: var(--gold); color: var(--gold-soft); }

/* ---------- Preview panel (shared canvas wrapper) ---------- */
.preview-scroll{ overflow-x: auto; padding-bottom: 8px; }
.doc-page{
  width: 794px; min-height: 1123px; background:#ffffff; color:#1c2530;
  margin:0 auto; box-shadow: 0 30px 70px -30px rgba(0,0,0,0.55);
  position:relative; font-family:"Inter","Segoe UI",sans-serif;
}

@media print{
  body *{ visibility:hidden; }
  .doc-page, .doc-page *{ visibility:visible; }
  .doc-page{ position:absolute; top:0; left:0; box-shadow:none; margin:0; }
  @page{ size: A4; margin:0; }
}