/* ============================================================
   Catalog Portal — refined editorial admin UI
   ============================================================ */
:root{
  --ink:#1c1a17;
  --paper:#f6f1e7;
  --card:#fffdf8;
  --line:#e3dccb;
  --muted:#8a8276;
  --accent:#1f6f5c;      /* deep green */
  --accent-2:#b5471f;    /* clay */
  --excel:#1d6f42;
  --pdf:#b03522;
  --shadow:0 1px 2px rgba(28,26,23,.06),0 12px 30px -18px rgba(28,26,23,.35);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Spline Sans',system-ui,sans-serif;
  background:
    radial-gradient(1200px 600px at 100% -10%, #efe7d6 0%, transparent 60%),
    var(--paper);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Topbar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.6rem;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fffdf8, #fbf6ec);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:.85rem}
.brand .mark{
  font-size:1.4rem;width:42px;height:42px;display:grid;place-items:center;
  background:var(--ink);color:var(--paper);border-radius:11px;
}
.brand h1{font-family:'Fraunces',serif;font-weight:600;font-size:1.35rem;margin:0;letter-spacing:-.01em}
.brand p{margin:0;font-size:.78rem;color:var(--muted);letter-spacing:.02em}
.actions{display:flex;gap:.6rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.4rem;
  font:inherit;font-weight:600;font-size:.9rem;
  padding:.6rem 1rem;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);cursor:pointer;text-decoration:none;
  transition:transform .08s ease, box-shadow .15s ease, background .15s;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-excel{background:var(--excel);color:#fff;border-color:var(--excel)}
.btn-pdf{background:var(--pdf);color:#fff;border-color:var(--pdf)}
.btn-preview{background:#2d2a26;color:#fff;border-color:#2d2a26}
.btn-ghost{background:transparent;border-style:dashed}
.btn-sm{padding:.38rem .7rem;font-size:.82rem}
.btn-danger{color:var(--pdf);border-color:#e7c3bb}
.btn-danger:hover{background:#fbeee9}

/* ---------- Flash ---------- */
.flash{margin:1rem 1.6rem -.4rem;padding:.7rem 1rem;border-radius:10px;font-weight:600;font-size:.9rem}
.flash.ok{background:#e4f3ec;color:#155f44;border:1px solid #b9e0cd}
.flash.warn{background:#fbeee2;color:#8a4a16;border:1px solid #efd3b3}

/* ---------- Layout ---------- */
.layout{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:1.3rem;padding:1.6rem;max-width:1380px;margin:0 auto;
}
@media(max-width:980px){.layout{grid-template-columns:1fr}}

.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:1.3rem;
}
.card-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1rem}
.card-head h2{font-family:'Fraunces',serif;font-weight:600;font-size:1.2rem;margin:0}
.count{background:var(--ink);color:var(--paper);border-radius:99px;font-size:.72rem;padding:.1rem .55rem;margin-left:.4rem;font-family:'Spline Sans'}
.link{color:var(--accent);font-weight:600;font-size:.85rem;text-decoration:none}
.link:hover{text-decoration:underline}

/* ---------- Form ---------- */
.fld{display:block;margin-bottom:1.1rem}
.fld>span{display:block;font-weight:600;font-size:.88rem;margin-bottom:.35rem}
.fld small,.block-head small{color:var(--muted);font-weight:400;font-size:.78rem}
textarea,input[type=text],input:not([type]),.var-row input{
  width:100%;font:inherit;padding:.6rem .7rem;border:1px solid var(--line);
  border-radius:9px;background:#fffefb;color:var(--ink);
}
textarea:focus,input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,111,92,.12)}

.block{border-top:1px dashed var(--line);padding-top:1rem;margin-top:.4rem}
.block-head h3{font-size:.98rem;margin:0 0 .6rem;font-weight:700}

/* images */
.existing-imgs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:.7rem}
.ex-img{position:relative;display:block;border:1px solid var(--line);border-radius:10px;padding:.4rem;background:#fff;width:96px}
.ex-img img{width:100%;height:72px;object-fit:contain;display:block}
.ex-img .del{display:flex;align-items:center;gap:.25rem;font-size:.72rem;margin-top:.3rem;color:var(--pdf)}
.img-inputs{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.6rem}
.img-row{display:flex;gap:.5rem;align-items:center}
.img-row input[type=file]{flex:1;font-size:.85rem}
.img-row .thumb{width:48px;height:48px;object-fit:cover;border:1px solid var(--line);border-radius:8px;background:#fff}

/* variant rows */
.var-table{border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-bottom:.7rem}
.var-head,.var-row{display:grid;grid-template-columns:1.2fr 1.3fr 1.3fr .8fr .8fr .8fr 34px;gap:.4rem;align-items:center}
.var-head{background:#f1ead9;padding:.5rem .55rem;font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#6c6456}
#varRows{padding:.5rem .55rem;display:flex;flex-direction:column;gap:.45rem}
.var-row input{padding:.45rem .5rem;font-size:.85rem}
.x{width:30px;height:30px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;color:var(--pdf);font-size:.8rem}
.x:hover{background:#fbeee9}

.form-foot{display:flex;gap:.6rem;margin-top:1.2rem;border-top:1px solid var(--line);padding-top:1rem}

/* ---------- List ---------- */
.empty{color:var(--muted);padding:2rem 1rem;text-align:center;border:1px dashed var(--line);border-radius:12px}
.plist{display:flex;flex-direction:column;gap:.8rem}
.prow{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;
  border:1px solid var(--line);border-radius:12px;padding:.8rem;background:#fffefb}
.prow:hover{box-shadow:var(--shadow)}
.thumbs{display:flex;gap:.3rem}
.thumbs img{width:46px;height:46px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:#fff}
.noimg{font-size:.72rem;color:var(--muted);width:90px;text-align:center}
.pdesc{margin:0 0 .35rem;font-weight:600;font-size:.92rem}
.vchips{display:flex;flex-wrap:wrap;gap:.3rem}
.chip{font-size:.72rem;background:#f1ead9;color:#5f5848;border-radius:7px;padding:.12rem .45rem}
.prow-actions{display:flex;gap:.4rem}

/* ============================================================
   Inline Live Preview + Catalog table (template-exact) + print
   ============================================================ */
.preview-section{
  max-width:1180px; margin:8px auto 60px; padding:0 22px;
}
.preview-head{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:10px 0 14px;
}
.preview-head h2{
  font-family:'Fraunces',serif; font-size:22px; margin:0 auto 0 0; color:var(--ink);
}
.preview-head small{ font-family:'Spline Sans',sans-serif; font-size:13px; color:var(--muted); font-weight:400; }
.preview-scroll{ overflow-x:auto; }

table.catalog-table{
  width:100%; border-collapse:collapse; table-layout:fixed; background:#fff;
  font-family:Arial, Helvetica, sans-serif; min-width:900px;
}
table.catalog-table col.c-pic { width:23%; }
table.catalog-table col.c-size{ width:9%; }
table.catalog-table col.c-sku { width:12%; }
table.catalog-table col.c-upc { width:12%; }
table.catalog-table col.c-desc{ width:21%; }
table.catalog-table col.c-cost{ width:8%; }
table.catalog-table col.c-case{ width:7.5%; }
table.catalog-table col.c-avl { width:7.5%; }
table.catalog-table th, table.catalog-table td{
  border:1px solid #000; text-align:center; vertical-align:middle;
  padding:6px 5px; word-wrap:break-word; overflow-wrap:anywhere;
}
table.catalog-table th{ font-weight:700; font-style:italic; font-size:14px; }
table.catalog-table td{ font-size:13px; }
table.catalog-table td.desc{ line-height:1.3; }
table.catalog-table .pic-cell{ padding:6px; }
table.catalog-table .pic-wrap{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  justify-content:center; min-height:120px;
}
table.catalog-table .pic-wrap img{ max-height:160px; object-fit:contain; }
table.catalog-table .pic-wrap.n1 img{ max-width:90%; }
table.catalog-table .pic-wrap.n2 img{ max-width:46%; }
table.catalog-table .pic-wrap.n3 img{ max-width:31%; }
table.catalog-table .np{ color:#999; font-style:italic; }

/* ---------- PRINT / SAVE AS PDF ----------
   Everything that should not print is marked .noprint (display:none),
   leaving only the catalog table on both index.php and preview.php. */
@media print{
  @page{ size:A4 landscape; margin:10mm; }
  body{ background:#fff; }
  .noprint{ display:none !important; }
  .preview-section{ margin:0; max-width:none; padding:0; }
  .pwrap{ margin:0 !important; max-width:none !important; padding:0 !important; }
  table.catalog-table th{ font-size:12px; }
  table.catalog-table td{ font-size:11px; }
  table.catalog-table .pic-wrap img{ max-height:120px; }
  table.catalog-table tr{ page-break-inside:avoid; }
}