/* ================================
   StoneHedge UI – shs.css (unified)
   Sections: Variables • Reset • Base • Layout • Components • Forms • Tables • Utilities • Estimate • Nav • Print
   ================================ */

/* Variables (dark theme) */
:root{
  --bg:#0e1217;
  --card:#151a21;
  --line:#232a34;
  --text:#e9eef5;
  --muted:#9fb0c3;
  --accent:#4ea1ff;           /* 4ea1ff on #0e1217 has good contrast */
  --ink:#e9eef5;              /* unify text color */
  --accent-contrast:#09111a;  /* text on accent */
  --tag-bg:#e7f7ee;
  --tag-ink:#0a6430;
  --white: #ffebeb;
}

/* Reset / base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font:14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-align:center; /* you were centering main; keeps look */
}
a{ color:var(--accent); text-decoration:none; }
img{ max-width:100%; height:auto; }

/* Layout */
.container{ max-width:1100px; margin:0 auto; padding:16px; }
main.container{ padding-top:2%; padding-bottom:5%; }
.row{ display:flex; gap:18px; align-items:flex-start; }
.col{ flex:1; }

/* Components: card, table, buttons, tag, text helpers */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  text-align:left;
}
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ border-bottom:1px solid var(--line); padding:8px; text-align:left; }
.right{ text-align:right; }
.muted{ color:var(--muted); }

.btn{
  background:var(--accent);
  color:var(--white);
  border:0;
  padding:.5rem .9rem;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
}
.btn-outline{
  background:transparent;
  color:var(--text);
  border:1px solid var(--line);
  padding:.5rem .9rem;
  border-radius:10px;
}
.btn + .btn{ margin-left:8px; }
.link{ background:transparent; border:0; color:var(--accent); cursor:pointer; }

.tag{
  display:inline-block;
  margin-top:6px;
  background:var(--tag-bg);
  color:var(--tag-ink);
  padding:4px 8px;
  border-radius:6px;
  font-size:12px;
}

/* Forms */
form{ justify-items:start; }
label{ display:grid; align-items:center; gap:16px; grid-template-columns:160px auto; text-align:left; }
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
textarea{
  width:100%;
  padding:8px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#0f141a;
  color:var(--text);
}
.form-actions{ margin-left:calc(160px + 16px); }

.form-grid{ /* centerable two-column label+input grid */
  margin:0 auto;
  display:grid;
  grid-template-columns:160px 250px;
  gap:12px 16px;
  width:max-content;
}
.addBTN{ width:250px; background-color:#1B7CFF; border-radius:36px; color:#fff; }

/* Flexible form rows (replaces .form-label / estimate grid variants) */
.field{ display:flex; align-items:center; gap:12px; margin-top:6px; }
.field .lbl{ font-weight:700; min-width:140px; white-space:nowrap; }
@media (max-width:640px){
  label{ grid-template-columns:1fr; }
  .form-actions{ margin-left:0; }
  .form-grid{ grid-template-columns:1fr; width:100%; }
  .field{ flex-direction:column; align-items:stretch; }
  .field .lbl{ min-width:auto; }
}

/* Tables – numeric alignment helper */
.num{ text-align:right; }

/* Utilities (small, deliberate set) */
.maxw-980{ max-width:980px; }
.maxw-380{ max-width:380px; }
.overflow-auto{ overflow:auto; }
.mt-10{ margin-top:10px; }
.mt-12{ margin-top:12px; }
.mb-12{ margin-bottom:12px; }
.p-10{ padding:10px; }
.p-12{ padding:12px; }
.w-32{ width:32px; }
.w-110{ width:110px; }

/* Estimate-specific (scoped so it won’t affect the rest) */
.estimate .header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.estimate .logo{ width:160px; height:auto; object-fit:contain; }
.estimate .meta{
  display:flex; gap:20px; justify-content:space-between; margin:10px 0 20px;
}
.estimate .meta-table{ border-collapse:collapse; }
.estimate .meta-table td{ padding:6px 10px; border:1px solid var(--line); }

.estimate .items{ width:100%; border-collapse:collapse; margin-top:10px; }
.estimate .items th,.estimate .items td{ border:1px solid var(--line); padding:8px; }
.estimate .notes{ margin-top:16px; }
.estimate .totals{ margin-top:14px; }

/* Nav */
.navbar{
  border-bottom:1px solid var(--line);
  background:var(--card);
  position:sticky; top:0; z-index:10; width:100%;
}
.navbar .container{ display:flex; align-items:center; gap:16px; }
.brand a{ display:inline-block; padding:12px 0; font-weight:700; letter-spacing:.2px; }
.nav-links{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.nav-link{ padding:10px 12px; border-radius:10px; color:var(--muted); }
.nav-link:hover{ background:rgba(255,255,255,.04); color:var(--text); }
.nav-link.active{
  background:rgba(78,161,255,.15);
  color:#fff;
  border:1px solid rgba(78,161,255,.35);
}

/* Print (for estimates/invoices) */
@media print{
  .btn, form[action$="/email"], .navbar{ display:none !important; }
  body{ background:#fff; color:#222; margin:0; text-align:left; }
  .container{ max-width:none; padding:0 12mm; }
  .card{ background:#fff; border-color:#ddd; }
  .table th,.table td,
  .estimate .items th,.estimate .items td,
  .estimate .meta-table td{ border-color:#ddd; }
}