/* ===========================================================
   Modal "Bibliothèque d'items" — version PRO
   Préfixe: wti-  (Wonder Takeoff Items)
   Scope: #modalDatabase
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

#modalDatabase{
  --ink:#0e1411; --line:#e8eae6; --line-2:#eef0ec; --muted:#6b7565; --soft:#f6f6f3; --paper:#ffffff;
  --green:#14543a; --green-d:#0d3d2a; --green-soft:#e7efe9; --accent:#1f2d27;
  --warn:#b45309; --warn-soft:#fef3c7; --danger:#9d2929; --danger-soft:#fde7e7;
  --blue:#1e3a8a; --blue-soft:#e0e7ff; --violet:#5b21b6; --violet-soft:#ede9fe;
  --teal:#0f766e; --teal-soft:#ccfbf1;
}

/* Override container du modal (en gardant .modal-overlay du système existant) */
#modalDatabase .wti-shell{
  width:96vw; max-width:1400px; height:95vh;
  background:var(--paper); border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  display:flex; flex-direction:column; overflow:hidden;
  font-family:'Inter', system-ui, sans-serif; color:var(--ink); font-size:14px;
}
#modalDatabase .wti-shell *{ box-sizing:border-box; }

/* Header */
#modalDatabase .wti-hd{ display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--line); flex-shrink:0; }
#modalDatabase .wti-hd .wti-title{ display:flex; align-items:center; gap:12px; }
#modalDatabase .wti-hd .wti-title .wti-ic{ width:38px; height:38px; border-radius:11px; background:var(--ink); color:#86efac; display:grid; place-items:center; }
#modalDatabase .wti-hd .wti-title h2{ margin:0; font:700 18px 'Inter'; letter-spacing:-0.01em; color:var(--ink); }
#modalDatabase .wti-hd .wti-title .wti-sub{ font:500 12px 'Inter'; color:var(--muted); margin-top:1px; }
#modalDatabase .wti-hd .wti-x{ width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--paper); display:grid; place-items:center; color:var(--muted); cursor:pointer; }
#modalDatabase .wti-hd .wti-x:hover{ background:var(--soft); color:var(--ink); }

/* Body 2 colonnes */
#modalDatabase .wti-bd{ flex:1; display:grid; grid-template-columns: 560px 1fr; min-height:0; }

/* ===== Form pane ===== */
#modalDatabase .wti-form{ border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; background:var(--soft); }
#modalDatabase .wti-form-scroll{ flex:1; overflow-y:auto; padding:20px 22px; }
#modalDatabase .wti-form-scroll::-webkit-scrollbar{ width:10px; }
#modalDatabase .wti-form-scroll::-webkit-scrollbar-thumb{ background:#d8dcd5; border-radius:99px; border:3px solid var(--soft); }

/* Tabs */
#modalDatabase .wti-tabs{ display:flex; gap:4px; padding:4px; background:var(--paper); border:1px solid var(--line); border-radius:11px; margin-bottom:18px; }
#modalDatabase .wti-tab{ flex:1; text-align:center; padding:9px; border-radius:8px; font:600 13px 'Inter'; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; user-select:none; }
#modalDatabase .wti-tab.on{ background:var(--ink); color:#fff; }
#modalDatabase .wti-tab.disabled{ opacity:.45; cursor:not-allowed; }

/* Live preview */
#modalDatabase .wti-preview{ background:var(--ink); color:#fff; border-radius:13px; padding:14px 16px; margin-bottom:16px; position:relative; overflow:hidden; }
#modalDatabase .wti-preview::after{ content:""; position:absolute; right:-30px; bottom:-30px; width:120px; height:120px; border:1px solid rgba(255,255,255,.08); border-radius:50%; }
#modalDatabase .wti-preview .wti-pl{ font:600 10px 'JetBrains Mono'; text-transform:uppercase; letter-spacing:.07em; color:#86efac; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
#modalDatabase .wti-preview .wti-pname{ font:700 15px 'Inter'; }
#modalDatabase .wti-preview .wti-pdesc{ font:500 12px 'Inter'; color:#cbd5d1; margin-top:3px; line-height:1.4; }
#modalDatabase .wti-preview .wti-pbottom{ display:flex; align-items:flex-end; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:1px dashed rgba(255,255,255,.15); }
#modalDatabase .wti-preview .wti-pmeta{ font:500 11px 'JetBrains Mono'; color:#a8b0a4; }
#modalDatabase .wti-preview .wti-pprice{ font:700 18px 'Inter'; letter-spacing:-0.01em; }
#modalDatabase .wti-preview .wti-pprice .wti-u{ font:500 11px 'JetBrains Mono'; color:#a8b0a4; }

/* Fields */
#modalDatabase .wti-field{ margin-bottom:16px; }
#modalDatabase .wti-field > label{ display:flex; align-items:center; gap:7px; font:600 12px 'Inter'; color:var(--ink); margin-bottom:7px; text-transform:none; letter-spacing:0; }
#modalDatabase .wti-field > label .wti-hint{ font:500 11px 'Inter'; color:var(--muted); font-weight:500; }
#modalDatabase .wti-field > label .wti-ic{ color:var(--green); }
#modalDatabase .wti-inp, #modalDatabase .wti-ta, #modalDatabase .wti-sel{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px;
  font:500 14px 'Inter'; color:var(--ink); background:var(--paper); outline:none;
  transition:border-color .12s, box-shadow .12s; margin:0;
}
#modalDatabase .wti-inp:focus, #modalDatabase .wti-ta:focus, #modalDatabase .wti-sel:focus{
  border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft);
}
#modalDatabase .wti-inp::placeholder, #modalDatabase .wti-ta::placeholder{ color:#b3bab0; }
#modalDatabase .wti-ta{ min-height:78px; resize:vertical; line-height:1.5; font-family:'Inter'; }
#modalDatabase .wti-sel{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7565' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:34px; cursor:pointer;
}
#modalDatabase .wti-helptext{ font:500 11px 'Inter'; color:var(--muted); margin-top:6px; display:flex; align-items:center; gap:6px; line-height:1.4; }
#modalDatabase .wti-helptext .wti-ic{ color:var(--warn); flex:none; }

/* Group card */
#modalDatabase .wti-group{ background:var(--paper); border:1px solid var(--line); border-radius:13px; padding:14px; margin-bottom:16px; }
#modalDatabase .wti-ghd{ font:600 11px 'JetBrains Mono'; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:12px; display:flex; align-items:center; gap:7px; }
#modalDatabase .wti-ghd .wti-ic{ color:var(--green); }

/* Pricing grid */
#modalDatabase .wti-price-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#modalDatabase .wti-price-grid .wti-sub{ font:600 10px 'JetBrains Mono'; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:5px; display:block; }
#modalDatabase .wti-affix{ position:relative; display:flex; align-items:center; }
#modalDatabase .wti-affix .wti-pre{ position:absolute; left:12px; font:600 13px 'JetBrains Mono'; color:var(--muted); pointer-events:none; }
#modalDatabase .wti-affix .wti-suf{ position:absolute; right:12px; font:600 12px 'JetBrains Mono'; color:var(--muted); pointer-events:none; }
#modalDatabase .wti-affix .wti-inp{ font-family:'JetBrains Mono'; font-weight:600; }
#modalDatabase .wti-affix.wti-pre-pad .wti-inp{ padding-left:26px; }
#modalDatabase .wti-affix.wti-suf-pad .wti-inp{ padding-right:42px; }

/* Allocation */
#modalDatabase .wti-alloc{ background:var(--warn-soft); border:1px solid #f5e4b8; border-radius:13px; padding:14px; margin-bottom:16px; }
#modalDatabase .wti-alloc .wti-ghd{ color:var(--warn); }
#modalDatabase .wti-alloc .wti-ghd .wti-ic{ color:var(--warn); }
#modalDatabase .wti-alloc .wti-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#modalDatabase .wti-alloc .wti-inp{ background:#fff; }
#modalDatabase .wti-alloc .wti-ex{ font:500 11px 'Inter'; color:#92660a; margin-top:9px; font-style:italic; }

#modalDatabase .wti-twocol{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* Form footer */
#modalDatabase .wti-form-ft{ padding:14px 22px; border-top:1px solid var(--line); background:var(--paper); display:flex; gap:10px; flex-shrink:0; }
#modalDatabase .wti-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:11px; font:600 14px 'Inter';
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  cursor:pointer; transition:background .12s; white-space:nowrap;
}
#modalDatabase .wti-btn:hover{ background:var(--soft); }
#modalDatabase .wti-btn.wti-green{ background:var(--green); color:#fff; border-color:var(--green); flex:1; }
#modalDatabase .wti-btn.wti-green:hover{ background:var(--green-d); }
#modalDatabase .wti-btn.wti-ghost{ border-color:transparent; color:var(--muted); }
#modalDatabase .wti-btn.wti-ghost:hover{ color:var(--ink); background:var(--soft); }
#modalDatabase .wti-btn.wti-primary{ background:var(--ink); color:#fff; border-color:var(--ink); }
#modalDatabase .wti-btn.wti-primary:hover{ background:#1d2823; }
#modalDatabase .wti-btn.wti-sm{ padding:10px 12px; font-size:13px; border-radius:10px; }

/* ===== Right pane (bank) ===== */
#modalDatabase .wti-bank{ display:flex; flex-direction:column; min-height:0; background:var(--paper); }
#modalDatabase .wti-bank-hd{ padding:18px 22px 14px; border-bottom:1px solid var(--line); flex-shrink:0; }
#modalDatabase .wti-bank-hd .wti-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
#modalDatabase .wti-bank-hd .wti-top h3{ margin:0; font:700 15px 'Inter'; display:flex; align-items:center; gap:8px; color:var(--ink); }
#modalDatabase .wti-bank-hd .wti-count{ font:600 11px 'JetBrains Mono'; color:var(--muted); }
#modalDatabase .wti-bank-tools{ display:flex; gap:8px; align-items:center; }
#modalDatabase .wti-search{ flex:1; display:flex; align-items:center; gap:9px; padding:10px 13px; background:var(--soft); border:1px solid var(--line); border-radius:10px; }
#modalDatabase .wti-search input{ flex:1; border:0; background:transparent; outline:none; font:500 13px 'Inter'; color:var(--ink); padding:0; margin:0; }
#modalDatabase .wti-search input::placeholder{ color:#b3bab0; }
#modalDatabase .wti-search svg{ color:var(--muted); }

/* Category chips */
#modalDatabase .wti-cat-row{ display:flex; gap:7px; padding:12px 22px; border-bottom:1px solid var(--line-2); overflow-x:auto; flex-wrap:wrap; flex-shrink:0; }
#modalDatabase .wti-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:99px; font:600 12px 'Inter'; cursor:pointer; white-space:nowrap; border:1px solid var(--line); background:var(--paper); color:var(--ink); }
#modalDatabase .wti-chip .wti-dot{ width:8px; height:8px; border-radius:99px; background:#0e1411; }
#modalDatabase .wti-chip .wti-n{ font:600 10px 'JetBrains Mono'; color:var(--muted); }
#modalDatabase .wti-chip.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
#modalDatabase .wti-chip.on .wti-n{ color:#a8b0a4; }

/* Sub tools */
#modalDatabase .wti-subtools{ display:flex; align-items:center; justify-content:space-between; padding:10px 22px; border-bottom:1px solid var(--line-2); background:#fafbf9; flex-shrink:0; }
#modalDatabase .wti-selall{ display:inline-flex; align-items:center; gap:9px; font:600 12px 'Inter'; color:var(--ink); cursor:pointer; user-select:none; }
#modalDatabase .wti-selall .wti-box{ width:18px; height:18px; border-radius:5px; border:1.5px solid var(--line); display:grid; place-items:center; background:#fff; color:#fff; }
#modalDatabase .wti-selall.on .wti-box{ background:var(--green); border-color:var(--green); }
#modalDatabase .wti-bulkbar{ display:flex; gap:6px; align-items:center; font:600 12px 'Inter'; color:var(--muted); }
#modalDatabase .wti-bulkbar .wti-bulk-del{ color:var(--danger); cursor:pointer; display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border:1px solid transparent; border-radius:8px; background:transparent; font:600 12px 'Inter'; }
#modalDatabase .wti-bulkbar .wti-bulk-del:hover{ background:var(--danger-soft); }

/* Bank list */
#modalDatabase .wti-bank-list{ flex:1; overflow-y:auto; padding:10px 16px 16px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; align-content:start; }
#modalDatabase .wti-bank-list::-webkit-scrollbar{ width:10px; }
#modalDatabase .wti-bank-list::-webkit-scrollbar-thumb{ background:#d8dcd5; border-radius:99px; border:3px solid #fff; }
@media (max-width:1100px){ #modalDatabase .wti-bank-list{ grid-template-columns:1fr 1fr; } }

#modalDatabase .wti-item{
  display:grid; grid-template-columns:22px 1fr auto; gap:12px; align-items:center;
  padding:11px 12px; border-radius:11px; cursor:pointer; border:1px solid transparent;
  background:transparent;
}
#modalDatabase .wti-item:hover{ background:var(--soft); }
#modalDatabase .wti-item.sel{ background:var(--green-soft); }
#modalDatabase .wti-item.editing{ border-color:var(--green); background:#fff; box-shadow:0 0 0 3px var(--green-soft); }
#modalDatabase .wti-item .wti-box{ width:18px; height:18px; border-radius:5px; border:1.5px solid var(--line); display:grid; place-items:center; background:#fff; color:#fff; }
#modalDatabase .wti-item.sel .wti-box{ background:var(--green); border-color:var(--green); }
#modalDatabase .wti-item .wti-mid .wti-nm{ font:600 13px 'Inter'; color:var(--ink); line-height:1.2; word-break:break-word; }
#modalDatabase .wti-item .wti-mid .wti-meta{ display:flex; align-items:center; gap:8px; margin-top:4px; flex-wrap:wrap; }
#modalDatabase .wti-item .wti-cat-badge{ display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:6px; font:600 10px 'JetBrains Mono'; letter-spacing:.03em; background:var(--green-soft); color:var(--green); }
#modalDatabase .wti-item .wti-cat-badge .wti-dot{ width:6px; height:6px; border-radius:99px; display:inline-block; }
#modalDatabase .wti-item .wti-cov{ font:500 11px 'JetBrains Mono'; color:var(--muted); }
#modalDatabase .wti-item .wti-right{ text-align:right; }
#modalDatabase .wti-item .wti-price{ font:700 13px 'Inter'; color:var(--green); white-space:nowrap; font-variant-numeric:tabular-nums; }
#modalDatabase .wti-item .wti-unit{ font:500 10px 'JetBrains Mono'; color:var(--muted); }

/* Empty state */
#modalDatabase .wti-empty{ padding:50px 20px; text-align:center; color:var(--muted); grid-column:1 / -1; }
#modalDatabase .wti-empty .wti-ic{ width:56px; height:56px; border-radius:50%; background:var(--soft); display:grid; place-items:center; margin:0 auto 12px; color:#b3bab0; }
#modalDatabase .wti-empty .wti-t{ font:600 14px 'Inter'; color:var(--ink); }
#modalDatabase .wti-empty .wti-s{ font:500 12px 'Inter'; margin-top:4px; }

/* Modal footer */
#modalDatabase .wti-ft{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; border-top:1px solid var(--line); background:#fafbf9; flex-shrink:0; }
#modalDatabase .wti-ft .wti-info{ font:500 12px 'Inter'; color:var(--muted); display:flex; align-items:center; gap:8px; }
#modalDatabase .wti-ft .wti-actions{ display:flex; gap:8px; }

/* Logic section legacy (cachée par défaut) */
#modalDatabase #logicSection{ background:#fff; border:1px solid var(--line); border-radius:13px; padding:14px; margin-bottom:16px; }

/* ===== Popup création catégorie ===== */
.wti-catpop-overlay{
  position:fixed; inset:0; background:rgba(8,11,9,.45);
  display:none; align-items:center; justify-content:center; z-index:10005;
  font-family:'Inter', system-ui, sans-serif;
}
.wti-catpop-overlay.on{ display:flex; }
.wti-catpop{
  background:#fff; border-radius:14px; padding:20px 22px; width:380px; max-width:92vw;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.wti-catpop h4{ margin:0 0 14px; font:700 15px 'Inter'; color:#0e1411; }
.wti-catpop label{ display:block; font:600 11px 'JetBrains Mono'; text-transform:uppercase; letter-spacing:.06em; color:#6b7565; margin-bottom:6px; }
.wti-catpop input[type=text]{
  width:100%; padding:10px 12px; border:1px solid #e8eae6; border-radius:9px;
  font:500 14px 'Inter'; outline:none; margin-bottom:14px;
}
.wti-catpop input[type=text]:focus{ border-color:#14543a; box-shadow:0 0 0 3px #e7efe9; }
.wti-catpop .wti-palette{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.wti-catpop .wti-swatch{
  width:30px; height:30px; border-radius:8px; cursor:pointer; border:2px solid transparent;
  transition:transform .1s;
}
.wti-catpop .wti-swatch:hover{ transform:scale(1.1); }
.wti-catpop .wti-swatch.on{ border-color:#0e1411; box-shadow:0 0 0 2px #fff inset; }
.wti-catpop .wti-popft{ display:flex; gap:8px; justify-content:flex-end; }
.wti-catpop .wti-pop-btn{
  padding:9px 14px; border-radius:9px; font:600 13px 'Inter'; cursor:pointer;
  border:1px solid #e8eae6; background:#fff; color:#0e1411;
}
.wti-catpop .wti-pop-btn.primary{ background:#14543a; color:#fff; border-color:#14543a; }
.wti-catpop .wti-pop-btn.primary:hover{ background:#0d3d2a; }
.wti-catpop .wti-pop-btn:hover{ background:#f6f6f3; }