/* ============================================================
   Supply Calculator — modern theme + shared enhancement styles
   Loaded on every page (after each page's inline <style>), so the
   rules here restyle the whole site without editing each page.
   ============================================================ */
:root{
  --bg:#eef2f6; --card:#ffffff; --ink:#0f172a; --muted:#475569;
  --line:#cbd5e1; --brand:#0891b2; --brand-d:#0e7490; --brand-l:#cffafe;
  --amber:#f59e0b; --radius:14px; --shadow:0 2px 14px rgba(15,23,42,.07);
}

/* ---- base ---- */
body{
  background:var(--bg)!important; color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  margin:0; line-height:1.5; -webkit-text-size-adjust:100%;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.8rem; line-height:1.2; margin:.2em 0 .4em}
h2{font-size:1.15rem}
h3{font-size:1.02rem}

/* ---- header ---- */
#header{
  background:linear-gradient(135deg,var(--brand-d),var(--brand))!important;
  color:#fff!important; width:100%!important; height:auto!important;
  padding:14px 18px!important; box-sizing:border-box; float:none!important;
  box-shadow:0 2px 10px rgba(8,145,178,.25);
}
#header h2{margin:0!important; font-size:1.35rem; font-weight:700; letter-spacing:.2px}
#header h3{margin:0!important; font-size:.92rem; font-weight:400; opacity:.92}
#header a{color:#fff!important}

/* hide the old empty side columns / nav bars */
#lcol,#rcol,#nav{display:none!important}

/* ---- breadcrumb ---- */
.breadcrumb{
  max-width:880px; margin:14px auto 0!important; padding:0 18px!important;
  color:var(--muted); font-size:.85rem; float:none!important; width:auto!important;
}
.breadcrumb a{color:var(--muted)}

/* ---- main column becomes a centered page container ---- */
#mcol{
  max-width:880px!important; width:auto!important; margin:18px auto 40px!important;
  float:none!important; padding:0 16px!important; box-sizing:border-box; display:block;
}

/* ---- the calculator hero becomes a clean white card ---- */
.showcase{
  background:var(--card)!important; color:var(--ink)!important;
  border:1px solid var(--line)!important; border-top:4px solid var(--brand)!important;
  border-radius:var(--radius)!important; box-shadow:var(--shadow);
  width:auto!important; float:none!important; text-align:left!important;
  font-size:1rem!important; padding:22px 22px 26px!important; margin:0 0 22px!important;
  box-sizing:border-box;
}
.showcase h1{text-align:left}
.showcase>p{color:var(--muted); padding:0!important; margin:.2em 0 1em}

/* result headings stand out */
.showcase h2{margin:18px 0 8px; padding-top:14px; border-top:1px solid var(--line)}
.showcase h2 span[id]{color:var(--brand-d); font-weight:800}
.showcase h2:first-of-type{border-top:none; padding-top:0}

/* ---- tables (calculator rows) ---- */
table{border:none!important; border-collapse:separate!important; border-spacing:0; width:100%}
#areaparts{margin:6px 0 4px; border:1px solid var(--line)!important; border-radius:10px; overflow:hidden}
th{
  background:var(--brand-d)!important; color:#fff!important;
  font-size:.8rem; text-transform:uppercase; letter-spacing:.03em;
  border-bottom:1px solid var(--brand-d)!important; padding:9px 4px!important;
}
td{border-bottom:1px solid var(--line)!important; padding:6px 4px!important; text-align:center}
tr:last-child td{border-bottom:none!important}

/* ---- inputs & selects ---- */
input,select{
  font-family:inherit; color:var(--ink); background:#fff;
  border:1px solid #94a3b8; border-radius:8px; padding:7px 8px; box-sizing:border-box;
  transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(8,145,178,.18)}
.num{width:54px; text-align:center}
.name{width:120px}
.costing{width:96px; text-align:center}
.unit{padding:5px 2px; border-radius:6px; font-size:.85rem; background:#f8fafc}
#matpreset,#bagpreset,#preset,#shape,#pitch{padding:7px 9px; max-width:260px}

/* cost / setup rows */
.costinginput{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  max-width:420px; margin:8px 0!important; padding:6px 0; border-bottom:1px dashed var(--line);
}
.costinginput label{color:var(--muted); font-size:.92rem}

/* ---- buttons ---- */
.shapebutton{
  font-size:.98rem!important; font-weight:600; cursor:pointer;
  background:var(--brand); color:#fff; border:1px solid var(--brand);
  border-radius:9px; padding:9px 16px!important; margin:8px 6px 8px 0!important;
  transition:background .15s,transform .05s;
}
.shapebutton:hover{background:var(--brand-d); border-color:var(--brand-d)}
.shapebutton:active{transform:translateY(1px)}
.shapebutton:nth-of-type(2){background:#fff; color:var(--brand-d)} /* Reset = outline */
.shapebutton:nth-of-type(2):hover{background:var(--brand-l)}

/* ---- explanatory content + related list ---- */
#mcol h3,#mcol>h3{margin:24px 4px 8px; color:var(--ink)}
#mcol>div[style]{float:none!important; width:auto!important; clear:both!important; padding:0 4px!important}
[style*="clear:left"]{float:none!important; width:100%!important; clear:both!important}
.explaination,#mcol>div>p{color:#475569}
#mcol h4{margin:18px 4px 8px}
#mcol ul{list-style:none; padding:0; margin:8px 0; display:flex; flex-wrap:wrap; gap:8px}
#mcol ul li{margin:0}
#mcol ul li a{
  display:inline-block; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:7px 14px; font-size:.9rem; color:var(--brand-d);
}
#mcol ul li a:hover{background:var(--brand-l); text-decoration:none; border-color:var(--brand)}

/* ---- page-specific project guidance ---- */
.sc-guide{
  clear:both; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:18px 20px; margin:24px 0 18px; box-shadow:var(--shadow);
  color:var(--muted);
}
.sc-guide h3{margin:0 0 8px!important; color:var(--ink)}
.sc-guide h4{margin:16px 0 6px!important; color:var(--ink); font-size:1rem}
.sc-guide p{margin:8px 0}
#mcol .sc-guide ul{display:block; list-style:disc; padding-left:22px; margin:8px 0 10px}
#mcol .sc-guide li{margin:5px 0}

/* ---- homepage hub (index) ---- */
.calclist{display:flex!important; flex-wrap:wrap; gap:10px 14px; list-style:none; padding:0}
.calclist li{min-width:220px}
.calclist li a{
  display:block; background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:11px 14px; color:var(--ink); box-shadow:var(--shadow);
}
.calclist li a:hover{border-color:var(--brand); color:var(--brand-d); text-decoration:none; transform:translateY(-1px)}

/* ---- can-liner (legacy form) pages ---- */
.calcinput{border:1px solid #cbd5e1; border-radius:8px; padding:7px 8px}
.calcsub{background:var(--brand); color:#fff; border:none; border-radius:9px; padding:10px 18px; cursor:pointer; font-weight:600}
.calcsub:hover{background:var(--brand-d)}

/* ============================================================
   Enhancement toolbar / widgets
   ============================================================ */
.sc-toolbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto 16px;max-width:880px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.sc-toolbar button{font-size:.9rem;font-weight:600;padding:8px 12px;cursor:pointer;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);transition:background .15s,border-color .15s}
.sc-toolbar button:hover{background:var(--brand-l);border-color:var(--brand)}
.sc-toolbar select{font-size:.9rem;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fff;max-width:180px}
.sc-note{font-size:.85rem;color:var(--brand-d);text-align:center;margin:0 auto 8px;max-width:880px;font-weight:600}
.sc-share-box{margin:0 auto 14px;max-width:880px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:var(--shadow)}
.sc-share-box textarea{width:100%;box-sizing:border-box;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;height:60px;border:1px solid var(--line);border-radius:8px;padding:8px}
.sc-share-box button{background:var(--brand);color:#fff;border:none;border-radius:8px;padding:7px 16px;cursor:pointer;font-weight:600}
.sc-helpful{clear:both;width:100%;text-align:center;margin:26px 0 8px;font-size:1.02rem;color:var(--muted)}
.sc-helpful button{font-size:1rem;padding:8px 18px;margin:0 6px;cursor:pointer;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink)}
.sc-helpful button:hover{background:var(--brand-l);border-color:var(--brand)}
.sc-eeat{clear:both;width:100%;box-sizing:border-box;font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);margin-top:26px;padding:14px 4px}

/* ============================================================
   Mobile responsive
   ============================================================ */
@media (max-width:640px){
  h1{font-size:1.45rem}
  #mcol{padding:0 10px!important; margin:12px auto 28px!important}
  .showcase{padding:16px 14px 20px!important; border-radius:12px}
  /* let the wide input tables scroll instead of squashing */
  #areaparts{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap}
  .num{width:46px}.name{width:96px}.costing{width:84px}
  .costinginput{max-width:none; flex-wrap:wrap; gap:6px}
  .shapebutton{padding:11px 16px!important; flex:1 1 auto}
  .sc-toolbar button{flex:1 1 auto}
  .calclist li{min-width:100%}
}
@media (min-width:900px){ #mcol{margin-top:22px!important} }

/* ============================================================
   Dark mode
   ============================================================ */
body.sc-dark{--bg:#0f172a;--card:#1e293b;--ink:#e2e8f0;--muted:#94a3b8;--line:#334155;--brand-l:#0b3a44;background:var(--bg)!important;color:var(--ink)}
body.sc-dark .showcase{background:var(--card)!important;color:var(--ink)!important;border-color:var(--line)!important}
body.sc-dark input,body.sc-dark select{background:#0f172a;color:var(--ink);border-color:var(--line)}
body.sc-dark th{background:#0b3a44!important;color:#67e8f9!important}
body.sc-dark .sc-toolbar,body.sc-dark .sc-share-box{background:var(--card);border-color:var(--line)}
body.sc-dark .sc-toolbar button,body.sc-dark .sc-helpful button{background:#0f172a;color:var(--ink);border-color:var(--line)}
body.sc-dark #mcol ul li a,body.sc-dark .calclist li a{background:var(--card);border-color:var(--line);color:#67e8f9}
body.sc-dark .unit{background:#0f172a}

/* ============================================================
   Embed mode — strip chrome so the calculator can be iframed
   ============================================================ */
body.sc-embed #header,body.sc-embed .breadcrumb,body.sc-embed .sc-eeat,
body.sc-embed #mcol>h3,body.sc-embed #mcol>h4,body.sc-embed .explaination,
body.sc-embed [style*="clear:left"]{display:none!important}
body.sc-embed{background:#fff}
body.sc-embed #mcol{margin-top:8px!important}

/* ============================================================
   Print — show the estimate, hide chrome
   ============================================================ */
@media print{
  #header,.breadcrumb,.sc-toolbar,.sc-helpful,.sc-share-box,.sc-eeat,
  #mcol>h3,#mcol>h4,.explaination,#mcol ul{display:none!important}
  .showcase{box-shadow:none!important;border:1px solid #ccc!important}
  body{background:#fff!important;color:#000!important}
}