/* Buffalo Website Designs dashboard. Brand-matched to the marketing site:
   Plus Jakarta Sans + Inter, warm amber accent on a light slate canvas. */
:root{
  --navy-900:#14171d; --navy-800:#1f242c;
  --amber-400:#ff9670; --amber-500:#f76e3f; --amber-600:#e85723; --amber-700:#bd4316;
  --accent-soft:#fff1ea; --accent-soft-2:#ffe0d2; --accent-soft-border:#ffc7b0;
  --ink:#1e293b; --muted:#5b6b81; --line:#e2e8f0; --bg:#f8fafc; --card:#ffffff; --heading:#1f242c;
  --green:#16a34a; --red:#dc2626;
  --font-head:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --radius:16px;
}
/* Dark mode (mirrors the marketing site palette) */
html[data-theme="dark"]{
  --ink:#e7ecf3; --muted:#9aa6b6; --heading:#f2f6fc;
  --bg:#0f131a; --card:#171d27; --line:#272f3c;
  --accent-soft:rgba(247,110,63,.16); --accent-soft-2:rgba(247,110,63,.08); --accent-soft-border:rgba(247,110,63,.34);
  color-scheme:dark;
}
html[data-theme="dark"] .pill{ background:#272f3c; color:var(--ink); }
html[data-theme="dark"] .pill-ok{ background:rgba(34,197,94,.18); color:#86efac; }
html[data-theme="dark"] .pill-bad{ background:rgba(220,38,38,.2); color:#fca5a5; }
html[data-theme="dark"] .notice-ok{ background:rgba(34,197,94,.12); color:#86efac; }
html[data-theme="dark"] .banner-error{ background:rgba(220,38,38,.14); color:#fca5a5; }
html[data-theme="dark"] .errors{ background:rgba(220,38,38,.12); color:#fca5a5; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:var(--font-body); font-size:15px; line-height:1.6; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ font-family:var(--font-head); color:var(--heading); letter-spacing:-.01em; }
h1{ font-weight:800; } h2,h3{ font-weight:700; }
a{ color:var(--amber-600); }
.muted{ color:var(--muted); } .small{ font-size:13px; }
.error{ color:var(--red); } .ok{ color:var(--green); } .warn{ color:var(--amber-700); }
.grow{ flex:1; } .inline{ display:inline; }

/* buttons */
button, .btn-primary{ font:700 .95rem var(--font-head); background:var(--amber-500); color:var(--navy-900); border:2px solid transparent; border-radius:12px; padding:.6rem 1.15rem; cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; }
button:hover, .btn-primary:hover{ background:var(--amber-400); transform:translateY(-2px); }
button:disabled{ opacity:.45; cursor:default; transform:none; }
.btn-block{ width:100%; }
.btn-ghost{ background:var(--card); color:var(--ink); border:2px solid var(--line); }
.btn-ghost:hover{ border-color:var(--accent-soft-border); background:var(--accent-soft); transform:translateY(-2px); }
button.link, .link{ background:none; border:0; color:var(--amber-600); padding:0; font:600 .92rem var(--font-body); cursor:pointer; text-decoration:none; }
button.link:hover, .link:hover{ text-decoration:underline; transform:none; }

/* inputs */
input, textarea{ width:100%; font:500 .95rem var(--font-body); color:var(--ink); background:var(--bg); border:1.5px solid var(--line); border-radius:10px; padding:.65rem .8rem; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
input:focus, textarea:focus{ outline:none; border-color:var(--amber-500); background:var(--card); box-shadow:0 0 0 3px var(--accent-soft); }
.theme-btn{ background:none; border:0; color:var(--muted); font-size:1.1rem; padding:0 2px; cursor:pointer; line-height:1; }
.theme-btn:hover{ color:var(--amber-600); background:none; transform:none; }
input.narrow{ max-width:90px; }

/* chrome */
.topbar{ display:flex; align-items:center; gap:14px; padding:13px 22px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.brand{ display:inline-flex; align-items:center; gap:.5rem; font:800 1rem var(--font-head); color:var(--heading); }
.brand-dot{ width:11px; height:11px; border-radius:50%; background:var(--amber-500); box-shadow:0 0 0 4px var(--accent-soft); }
.tag{ font:600 .72rem var(--font-head); text-transform:uppercase; letter-spacing:.05em; color:var(--amber-700); background:var(--accent-soft); border:1px solid var(--accent-soft-border); padding:.2rem .55rem; border-radius:999px; }
.ed-title{ font-family:var(--font-head); }

.wrap{ max-width:1000px; margin:26px auto; padding:0 22px; display:flex; flex-direction:column; gap:18px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; box-shadow:0 10px 30px -22px rgba(2,8,23,.4); }
.card h2{ margin:0 0 12px; font-size:1.15rem; }
.row{ display:flex; gap:8px; flex-wrap:wrap; } .row input{ flex:1; min-width:150px; }
.section-h{ margin:8px 2px -4px; font-size:1.05rem; }
.note-line{ margin:-6px 2px 0; }

/* sign in */
.auth{ max-width:380px; margin:12vh auto; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:34px 30px; display:flex; flex-direction:column; gap:12px; box-shadow:0 24px 60px -30px rgba(2,8,23,.45); }
.auth h1{ margin:.4rem 0 0; font-size:1.7rem; }
.auth .brand{ font-size:.95rem; }

/* hub heading */
.hub-head{ margin:4px 2px 0; }
.hub-head h1{ margin:0 0 4px; font-size:1.8rem; }

/* owner metrics */
.metric-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:760px){ .metric-grid{ grid-template-columns:repeat(2,1fr); } }
.metric{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; display:flex; flex-direction:column; gap:2px; box-shadow:0 10px 30px -24px rgba(2,8,23,.4); }
.metric-value{ font:800 1.7rem var(--font-head); color:var(--heading); }
.metric-label{ font-weight:600; font-size:.85rem; }
.metric-sub{ color:var(--muted); font-size:.78rem; }

/* client admin cards */
.client-card{ padding:18px 22px; }
.client-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.client-head h3{ margin:0 0 2px; font-size:1.15rem; }
.client-stats{ display:flex; gap:22px; text-align:right; }
.client-stats .stat-v{ display:block; font:700 1rem var(--font-head); color:var(--heading); }
.client-stats .stat-l{ display:block; font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.client-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.client-more{ margin-top:14px; border-top:1px solid var(--line); padding-top:10px; }
.client-more > summary{ cursor:pointer; font:600 .9rem var(--font-body); color:var(--amber-600); }
.client-more h4{ margin:14px 0 6px; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.manage-sections{ display:grid; grid-template-columns:1fr 1fr; gap:18px 26px; margin-top:12px; }
@media (max-width:720px){ .manage-sections{ grid-template-columns:1fr; } }
.ms h4{ margin:0 0 8px; }
.ms .stack, .ms .row{ margin:0; }
.stack{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.stack > *{ width:100%; }
.stack button, .row button{ width:auto; }
.addon{ display:inline-flex; align-items:center; color:var(--muted); font-size:.85rem; }
.copyfield{ font-size:12px; background:var(--bg); }
.ph-h{ margin:16px 0 8px; }
.paste{ margin-top:8px; } .paste textarea{ margin:8px 0; }

/* pills */
.pill{ display:inline-block; font:600 .72rem var(--font-head); padding:.16rem .55rem; border-radius:999px; background:var(--line); color:var(--ink); }
.pill-ok{ background:#dcfce7; color:#166534; } .pill-bad{ background:#fee2e2; color:#991b1b; } .pill-warn{ background:var(--accent-soft); color:var(--amber-700); }

/* client hub */
.hub-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:720px){ .hub-grid{ grid-template-columns:1fr; } }
.hub-card{ display:flex; flex-direction:column; gap:8px; }
.hub-card h2{ margin:0; }
.sub-line{ margin:2px 0; }
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; } .btn-row form{ margin:0; }
.notice{ font-size:14px; } .notice-ok{ border-color:var(--green); color:#166534; background:#f0fdf4; }

/* invoice table */
.invoices{ width:100%; border-collapse:collapse; font-size:14px; }
.invoices th, .invoices td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); }
.invoices th{ color:var(--muted); font:600 .72rem var(--font-head); text-transform:uppercase; letter-spacing:.04em; }

/* pageswitch */
.pageswitch{ display:flex; gap:4px; }
.pageswitch a{ padding:3px 10px; border-radius:8px; background:var(--bg); border:1px solid var(--line); text-decoration:none; font-size:13px; color:var(--ink); }
.pageswitch a.active{ background:var(--amber-500); color:var(--navy-900); border-color:transparent; }

/* banner */
.banner{ padding:10px 22px; font-size:14px; }
.banner a{ font-weight:700; }
.banner-error{ background:#fef2f2; border-bottom:1px solid var(--red); color:#991b1b; }

/* welcome / onboarding invite */
.welcome{ border-color:var(--accent-soft-border); }
.kv{ border-collapse:collapse; margin:6px 0 12px; font-size:14px; }
.kv td{ padding:4px 14px 4px 0; vertical-align:top; }
.kv td:first-child{ color:var(--muted); white-space:nowrap; }
.activity{ margin:8px 0 0; }

/* best-viewed-on-desktop note (only shows on narrow screens) */
.desktop-note{ display:none; padding:8px 18px; font-size:13px; background:var(--accent-soft); color:var(--amber-700); border-bottom:1px solid var(--accent-soft-border); }
@media (max-width:820px){ .desktop-note{ display:block; } }

/* editor: the page fills the viewport exactly so only the inner panes scroll
   (no stray little body scrollbar). */
body.app-editor{ height:100vh; overflow:hidden; display:flex; flex-direction:column; }
body.app-editor .topbar, body.app-editor .banner, body.app-editor .desktop-note{ flex:0 0 auto; }
body.app-editor .editor-layout{ flex:1 1 auto; min-height:0; height:auto; }
.editor-layout{ display:grid; grid-template-columns:1fr 330px; height:calc(100vh - 57px); }
#preview{ width:100%; height:100%; border:0; background:#fff; }
.sidebar{ border-left:1px solid var(--line); padding:18px; overflow:auto; background:var(--card); }
.hint ul{ padding-left:18px; margin:8px 0; } .hint li{ margin:5px 0; }
.sidebar h3{ font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:18px 0 8px; }
.errors{ background:#fef2f2; border:1px solid var(--red); border-radius:10px; padding:10px 12px; margin:12px 0; font-size:14px; color:#991b1b; }
.errors ul{ margin:6px 0 0; padding-left:18px; }
.versions{ list-style:none; padding:0; margin:0; }
.versions li{ display:flex; justify-content:space-between; gap:8px; padding:7px 0; border-bottom:1px solid var(--line); font-size:13px; }