/* Where's My Toaster — admin console. Always light, warm brand look. */
:root {
  --red: #E63946;
  --red-deep: #BE1E2D;
  --coral: #EF7079;
  --gold: #C9A227;
  --bg: #FBF7F2;
  --surface: #ffffff;
  --surface-2: #FAF5EF;
  --border: rgba(35,31,32,.10);
  --text: #231F20;
  --muted: #7a7076;
  --shadow: 0 18px 40px -24px rgba(35,31,32,.26);
  --shadow-sm: 0 8px 20px -14px rgba(35,31,32,.28);
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: "Montserrat", system-ui, sans-serif; color: var(--text); line-height: 1.5;
  min-height: 100vh;
  background:
    radial-gradient(1100px 520px at 100% -8%, rgba(230,57,70,.07), transparent),
    linear-gradient(180deg, #FBF7F2 0%, #FFF6ED 100%);
  background-attachment: fixed;
}

.wordmark { font-family: "Bebas Neue", sans-serif; font-size: 1.55rem; letter-spacing: .04em; display: inline-flex; align-items: center; gap: .3rem; color: var(--text); }
.wm-chip { background: var(--red); color: #fff; border-radius: 8px 8px 11px 11px; padding: 0 .35rem; }

.btn-primary { display: inline-flex; align-items: center; gap: .4rem; background: var(--red); color: #fff; border: none; cursor: pointer; font: inherit; font-weight: 700; padding: .7rem 1.35rem; border-radius: 999px; text-decoration: none; box-shadow: 0 12px 24px -14px rgba(230,57,70,.75); transition: transform .12s ease, background .15s ease; }
.btn-primary:hover { transform: translateY(-1px); background: var(--red-deep); }
.btn-ghost { background: #fff; color: var(--muted); border: 1px solid var(--border); cursor: pointer; font: inherit; font-weight: 600; padding: .55rem 1.15rem; border-radius: 999px; transition: color .15s ease, border-color .15s ease; }
.btn-ghost:hover { color: var(--text); border-color: rgba(35,31,32,.28); }

/* login */
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(1200px 600px at 50% -10%, rgba(230,57,70,.12), transparent), linear-gradient(180deg, #ffffff 0%, #FFF2E6 100%); }
.login-card { background: #ffffff; border: 1px solid rgba(35,31,32,.10); border-radius: 22px; box-shadow: 0 24px 50px -24px rgba(35,31,32,.4); padding: 2.5rem 2.2rem; width: min(100%, 400px); text-align: center; }
.login-logo { height: 92px; width: auto; margin: 0 auto 1rem; }
.login-card h1 { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 2rem; letter-spacing: .02em; margin: 0; color: #231F20; }
.login-sub { color: #6b6367; margin: .25rem 0 1.5rem; font-size: .95rem; }
.login-form { display: grid; gap: 1rem; text-align: left; }
.login-form label { display: grid; gap: .35rem; font-size: .82rem; font-weight: 600; color: #6b6367; text-transform: uppercase; letter-spacing: .04em; }
.login-form input { padding: .8rem .95rem; border-radius: 12px; border: 1px solid rgba(35,31,32,.18); background: #faf8f6; color: #231F20; font: inherit; }
.login-form input:focus { outline: 2px solid var(--red); border-color: var(--red); }
.login-form .btn-primary { justify-content: center; margin-top: .5rem; }
.form-error { background: rgba(230,57,70,.10); color: var(--red-deep); border: 1px solid rgba(230,57,70,.3); padding: .7rem; border-radius: 10px; font-weight: 600; font-size: .9rem; margin: 0 0 1rem; }

/* dashboard */
.admin-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem clamp(1rem,4vw,2.5rem);
  background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.admin-brand { display: flex; align-items: center; gap: .75rem; }
.admin-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #fff; background: linear-gradient(135deg, var(--gold), #B8901E); padding: .22rem .55rem; border-radius: 6px; box-shadow: 0 4px 10px -6px rgba(201,162,39,.8); }
/* shell: content + right-hand section nav */
.admin-shell { max-width: 1180px; margin: 0 auto; padding: clamp(1.5rem,4vw,2.75rem); display: grid; grid-template-columns: 236px minmax(0,1fr); gap: clamp(1.25rem,3vw,2rem); align-items: start; }
.admin-main { min-width: 0; }

.admin-nav { order: -1; position: sticky; top: 84px; display: flex; flex-direction: column; gap: .25rem; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: .75rem; }
.nav-eyebrow { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: .5rem .75rem .35rem; }
.nav-item { display: flex; align-items: center; gap: .7rem; padding: .68rem .8rem; border-radius: 12px; font-weight: 600; font-size: .95rem; color: var(--text); text-decoration: none; transition: background .12s ease, color .12s ease; }
.nav-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.nav-label { flex: 1; }
.nav-item.is-active { background: rgba(230,57,70,.10); color: var(--red-deep); font-weight: 700; }
.nav-item.is-active .nav-ico { color: var(--red); }
.nav-item.is-active::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; }
.nav-item.is-disabled { color: #a49da1; cursor: not-allowed; }
.nav-item.is-disabled .nav-ico { color: #c3bcc0; }
.nav-soon { flex: none; font-style: normal; font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); padding: .15rem .42rem; border-radius: 999px; }

.section-eyebrow { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--red); margin-bottom: .3rem; }
.admin-titlebar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.admin-titlebar h1 { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: clamp(1.9rem,4vw,2.6rem); letter-spacing: .02em; margin: 0; }
.admin-sub { color: var(--muted); margin: .2rem 0 0; }

@media (max-width: 860px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-nav { position: static; flex-direction: row; overflow-x: auto; order: -1; gap: .3rem; }
  .nav-eyebrow { display: none; }
  .nav-item { white-space: nowrap; padding: .55rem .8rem; }
  .nav-label { flex: none; }
  .nav-soon { display: none; }
  .nav-item.is-active::after { display: none; }
}

.stat-row { display: grid; grid-template-columns: minmax(190px,240px) minmax(0,1fr); gap: 1rem; margin: 1.6rem 0; align-items: stretch; }
.stat-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 1.35rem 1.6rem; box-shadow: var(--shadow); display: grid; gap: .15rem; align-content: center; }
.stat-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--red), var(--coral)); }
.stat-num { font-family: "Bebas Neue", sans-serif; font-size: 3rem; line-height: 1; color: var(--red); }
.stat-label { color: var(--muted); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }

/* subscribers-over-time sparkline */
.chart-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.2rem 1.5rem 1rem; align-content: normal; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.chart-range { color: var(--muted); font-weight: 600; font-size: .78rem; white-space: nowrap; }
.spark { width: 100%; height: 92px; display: block; margin-top: auto; }
.spark-area { fill: url(#sparkGrad); }
.spark-line { fill: none; stroke: var(--red); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.chart-empty { color: var(--muted); font-size: .9rem; margin: auto 0; }

@media (max-width: 620px) { .stat-row { grid-template-columns: 1fr; } }

.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
.data-table { width: 100%; border-collapse: collapse; min-width: 420px; }
.data-table thead th { background: var(--surface-2); }
.data-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: .95rem 1.3rem; border-bottom: 1px solid var(--border); }
.data-table td { padding: .9rem 1.3rem; border-bottom: 1px solid var(--border); color: var(--text); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background .12s ease; }
.data-table tbody tr:hover { background: var(--surface-2); }
.cell-email { font-weight: 600; }

/* ===== visitor analytics ===== */
.section-head { margin: 2.75rem 0 0; }
.section-head h2 { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: clamp(1.5rem,3vw,2rem); letter-spacing: .02em; margin: 0; }
.section-head .admin-sub { margin-top: .15rem; }

.stat-row-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.viz-wide { margin: 1.6rem 0; }
.spark-area.alt { fill: url(#sparkGrad2); }

.viz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.viz-card { display: flex; flex-direction: column; gap: .95rem; align-content: normal; }

.bar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .72rem; }
.bar-row { display: grid; grid-template-columns: minmax(72px,42%) 1fr auto; align-items: center; gap: .6rem; }
.bar-label { font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--coral), var(--red)); }
.bar-count { font-size: .82rem; font-weight: 700; color: var(--muted); min-width: 1.5ch; text-align: right; }

.donut-wrap { position: relative; width: 132px; height: 132px; margin: .1rem auto; }
.donut { width: 132px; height: 132px; }
.donut circle { fill: none; stroke-width: 3.4; }
.donut-bg { stroke: var(--surface-2); }
.donut-arc { stroke: var(--red); stroke-linecap: round; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-num { font-family: "Bebas Neue", sans-serif; font-size: 1.8rem; line-height: 1; color: var(--text); }
.donut-cap { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.legend { display: flex; justify-content: center; gap: 1.1rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted); font-weight: 600; }
.legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot-mobile { background: var(--red); }
.dot-desktop { background: var(--surface-2); border: 1px solid var(--border); }

@media (max-width: 620px) { .stat-row-3 { grid-template-columns: 1fr; } }

.empty-state { text-align: center; padding: 3.5rem 1rem; background: var(--surface); border: 1px dashed rgba(35,31,32,.18); border-radius: 18px; margin-top: 1.6rem; box-shadow: var(--shadow-sm); }
.empty-state p { margin: .2rem 0; font-weight: 600; }
.empty-sub { color: var(--muted); font-weight: 400 !important; }