/* =====================================================================
   invoice-layouts.css — invoice form layout picker + the 3 layouts
   ---------------------------------------------------------------------
   Scoped to the picker (.il-section) and to modals that opt in via
   .il-fast / .il-doc / .il-catalog, so the Classic layout and every
   other screen are untouched. RTL-aware via logical properties.

   Reversible: delete this file + its <link>.
   ===================================================================== */

.il-section, .modal-content[class*="il-"]{
  --il-accent:#6D5EF6; --il-accent-ink:#4736C9; --il-accent-soft:rgba(109,94,246,.10);
  --il-good:#0F9F6E; --il-warn:#E8940C; --il-crit:#E23B4E;
  --il-surface:#FFFFFF; --il-surface2:#F6F7FB; --il-border:#E4E6F1;
  --il-text:#15172B; --il-text2:#565A76; --il-text3:#8A8DA8;
  --il-mono:ui-monospace,"SF Mono","Cascadia Code","Segoe UI Mono",Consolas,monospace;
}
body.dark-theme .il-section, body.dark-theme .modal-content[class*="il-"]{
  --il-accent:#8B7CF9; --il-accent-ink:#C7BEFF; --il-accent-soft:rgba(139,124,249,.14);
  --il-good:#26C08A; --il-warn:#F1A73A; --il-crit:#F16173;
  --il-surface:#141724; --il-surface2:#1B1F30; --il-border:#262B41;
  --il-text:#ECEEF9; --il-text2:#A4A8C6; --il-text3:#6E7391;
}

/* ---------- picker cards --------------------------------------------- */
.il-card{
  height:100%; padding:.85rem .75rem; border:1px solid var(--il-border); border-radius:12px;
  background:var(--il-surface); cursor:pointer; text-align:center;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.il-card:hover{ transform:translateY(-2px); border-color:var(--il-accent); box-shadow:0 10px 24px -14px rgba(20,22,43,.4); }
.il-card.selected{ border-color:var(--il-accent); box-shadow:0 0 0 3px var(--il-accent-soft); }
.il-thumb{
  width:100%; height:52px; border-radius:9px; margin-bottom:.5rem;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--il-accent) 12%, transparent);
  color:var(--il-accent); font-size:1.4rem;
}
.il-card .il-name{ font-size:.9rem; font-weight:700; color:var(--il-text); }
.il-card .il-desc{ font-size:.74rem; color:var(--il-text3); line-height:1.35; margin-top:.2rem; min-height:2.6em; }
.il-card .il-badge{
  margin-top:.5rem; font-size:.75rem; font-weight:600; color:var(--il-text3);
}
.il-card.selected .il-badge{ color:var(--il-accent-ink); }

/* ---------- shared bits ---------------------------------------------- */
.il-stock{
  display:inline-block; min-width:2.2rem; text-align:center; padding:.05rem .35rem; border-radius:5px;
  font-family:var(--il-mono); font-size:.75rem; font-weight:700;
}
.il-stock.ok{ background:rgba(15,159,110,.12); color:var(--il-good); }
.il-stock.low{ background:rgba(232,148,12,.14); color:var(--il-warn); }
.il-stock.out{ background:rgba(226,59,78,.12); color:var(--il-crit); }

/* A newly added line flashes so you can see the scan landed. */
tr.il-flash > td{ animation:ilFlash .6s ease; }
@keyframes ilFlash{ from{ background:var(--il-accent-soft); } to{ background:transparent; } }
@media (prefers-reduced-motion:reduce){ tr.il-flash > td{ animation:none; } }

/* ---------- layout: fast entry --------------------------------------- */
.il-scanbar{
  position:relative; display:flex; align-items:center; gap:.5rem; margin-bottom:.65rem;
  padding:.5rem .75rem; border:2px solid var(--il-accent); border-radius:11px;
  background:var(--il-surface);
}
.il-scanbar > i{ color:var(--il-accent); font-size:1.1rem; }
.il-scanbar input{
  flex:1; border:0; outline:none; background:transparent; color:var(--il-text);
  font-size:.95rem; min-width:0; padding:.25rem 0;
}
.il-scanhint{
  font-size:.68rem; font-weight:700; color:var(--il-text3);
  border:1px solid var(--il-border); border-radius:5px; padding:.1rem .4rem;
}
.il-scanresults{
  position:absolute; z-index:1080; inset-inline:0; top:calc(100% + 4px);
  background:var(--il-surface); border:1px solid var(--il-border); border-radius:10px;
  box-shadow:0 16px 36px -18px rgba(20,22,43,.55); overflow:hidden; max-height:260px; overflow-y:auto;
}
.il-scanresults[hidden]{ display:none; }
.il-hit{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; width:100%;
  padding:.5rem .75rem; border:0; border-bottom:1px solid var(--il-border);
  background:transparent; color:var(--il-text); font-size:.85rem; text-align:start;
}
.il-hit:last-child{ border-bottom:0; }
.il-hit:hover{ background:var(--il-accent-soft); }
.il-hit-meta{ color:var(--il-text3); font-size:.75rem; white-space:nowrap; }

/* ---------- layout: document view (summary rail) --------------------- */
@media (min-width:1200px){
  .il-doc #invoiceForm{ position:relative; padding-inline-end:250px; }
  .il-doc .il-rail{
    position:absolute; top:0; inset-inline-end:0; width:230px;
    display:flex; flex-direction:column; gap:.5rem;
  }
  .il-doc .il-rail-inner{ position:sticky; top:.5rem; }
}
.il-rail{
  margin-top:1rem; display:flex; flex-direction:column; gap:.5rem;
  padding:.85rem; border:1px solid var(--il-border); border-radius:12px;
  background:var(--il-surface2);
}
.il-rail-block{ padding-bottom:.5rem; border-bottom:1px solid var(--il-border); }
.il-rail-label{
  display:block; font-size:.66rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; color:var(--il-text3);
}
.il-rail-total{
  display:block; font-family:var(--il-mono); font-size:1.35rem; font-weight:700; color:var(--il-text);
}
.il-rail-line{
  display:flex; align-items:center; justify-content:space-between;
  font-size:.8rem; color:var(--il-text2);
}
.il-rail-line b{ font-family:var(--il-mono); color:var(--il-text); }
.il-rail-owed b{ color:var(--il-warn); }

/* ---------- layout: catalog split ------------------------------------ */
.il-catalog{
  border:1px solid var(--il-border); border-radius:12px; background:var(--il-surface);
  margin-bottom:.75rem; overflow:hidden;
}
.il-catalog-head{
  display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem;
  border-bottom:1px solid var(--il-border); background:var(--il-surface2);
}
.il-catalog-head > i{ color:var(--il-accent); }
.il-catalog-head input{
  flex:1; border:0; outline:none; background:transparent; color:var(--il-text); font-size:.88rem; min-width:0;
}
.il-catalog-list{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:.4rem; padding:.6rem; max-height:220px; overflow-y:auto;
}
.il-cat-item{
  display:flex; align-items:center; justify-content:space-between; gap:.4rem;
  padding:.45rem .6rem; border:1px solid var(--il-border); border-radius:9px;
  background:var(--il-surface); color:var(--il-text); font-size:.82rem; text-align:start;
}
.il-cat-item:hover{ border-color:var(--il-accent); background:var(--il-accent-soft); }
.il-cat-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.il-cat-empty{ grid-column:1/-1; text-align:center; color:var(--il-text3); font-size:.85rem; padding:1rem; }

@media (max-width:768px){
  .il-catalog-list{ grid-template-columns:1fr 1fr; max-height:180px; }
  .il-thumb{ height:42px; font-size:1.15rem; }
  .il-card .il-desc{ min-height:auto; }
}