/* =============================================================================
   utilities.css — shared layout + page-shell styles for landing, customer,
   dashboard, admin. Tenant-specific tweaks live in /<tenant>/css/brand.css.
   All colour tokens come from CSS custom properties set in views/partials/head.ejs.
   Defaults below kick in only when no tenant is in scope (e.g. the landing page).
   ============================================================================= */

:root {
  --color-primary:    #2A2522;
  --color-accent:     #C9A227;
  --color-bg:         #FBF7F0;
  --color-text:       #2A2522;
  --color-muted:      #6E6862;
  --color-line:       rgba(42, 37, 34, 0.12);
  --color-card:       #FFFFFF;
  --radius-sm:        6px;
  --radius-md:        12px;
  --radius-lg:        20px;
  --shadow-sm:        0 1px 3px rgba(42, 37, 34, 0.08);
  --shadow-md:        0 6px 24px rgba(42, 37, 34, 0.08), 0 2px 6px rgba(42, 37, 34, 0.04);
  --shadow-lg:        0 16px 48px rgba(42, 37, 34, 0.12);
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;
  --space-4: 16px; --space-5: 24px;  --space-6: 32px;
  --space-7: 48px; --space-8: 64px;  --space-9: 96px;
  --content-max: 1100px;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
}

/* -----------------------------------------------------------------------------
   Landing page
   ----------------------------------------------------------------------------- */
body.landing { background: var(--color-bg); }

.landing__main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
}
.landing__top { padding-bottom: var(--space-8); border-bottom: 1px solid var(--color-line); }
.landing__brand-name {
  font-family: var(--font-heading);
  font-size: clamp(28px, 5vw, 40px);
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.landing__brand-tagline {
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-size: 16px;
}

.landing__hero { padding: var(--space-8) 0; }
.landing__hero-title {
  font-family: var(--font-heading);
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.05;
  max-width: 760px;
}
.landing__hero-sub {
  margin-top: var(--space-5);
  font-size: 18px;
  color: var(--color-muted);
  max-width: 640px;
}

.landing__demos { padding-bottom: var(--space-9); }
.demo-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-top: var(--space-6);
}
.demo-card {
  background: var(--card-bg, var(--color-card));
  color: var(--color-text);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.demo-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.demo-card__header {
  padding: var(--space-6) var(--space-5);
  background: var(--card-primary, var(--color-primary));
  color: #fff;
  border-bottom: 4px solid var(--card-accent, var(--color-accent));
}
.demo-card__name {
  font-family: var(--font-heading);
  font-size: 24px;
  letter-spacing: -0.01em;
}
.demo-card__location {
  margin-top: var(--space-1);
  font-size: 14px;
  opacity: 0.85;
}
.demo-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}
.demo-card__tagline {
  color: var(--color-muted);
}
.demo-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: auto;
}
.demo-card__cta {
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.demo-card__cta:hover { background: var(--color-text); color: #fff; border-color: var(--color-text); }
.demo-card__cta--primary {
  background: var(--card-primary, var(--color-primary));
  color: #fff;
  border-color: var(--card-primary, var(--color-primary));
}
.demo-card__cta--primary:hover {
  background: var(--card-accent, var(--color-accent));
  border-color: var(--card-accent, var(--color-accent));
  color: #1A1612;
}

.landing__empty { color: var(--color-muted); padding: var(--space-6) 0; }
.landing__footer {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: 14px;
}
.landing__footer a { color: var(--color-primary); text-decoration: underline; }

/* -----------------------------------------------------------------------------
   Customer page
   ----------------------------------------------------------------------------- */
body.customer { background: var(--color-bg); }

.customer__main { max-width: var(--content-max); margin: 0 auto; padding: var(--space-7) var(--space-5); }
.customer__header { text-align: center; padding-bottom: var(--space-7); border-bottom: 1px solid var(--color-line); }
.customer__shop-name {
  font-family: var(--font-heading);
  font-size: clamp(36px, 6vw, 56px);
  color: var(--color-primary);
}
.customer__tagline {
  margin-top: var(--space-2);
  font-style: italic;
  color: var(--color-muted);
  font-size: 18px;
}

.customer__hero { padding: var(--space-8) 0; text-align: center; }
.customer__hero-inner { max-width: 720px; margin: 0 auto; }
.customer__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  color: var(--color-accent);
  font-weight: 600;
}
.customer__hero-title {
  margin-top: var(--space-3);
  font-family: var(--font-heading);
  font-size: clamp(28px, 4.5vw, 44px);
  line-height: 1.15;
  color: var(--color-text);
}
.customer__hero-sub {
  margin-top: var(--space-5);
  color: var(--color-muted);
  font-size: 17px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.customer__contact { padding: var(--space-7) 0; }
.customer__contact h3 {
  font-family: var(--font-heading);
  font-size: 24px;
  text-align: center;
  margin-bottom: var(--space-5);
}
.customer__contact-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.customer__contact-card {
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.customer__contact-label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  color: var(--color-accent);
  font-weight: 600;
}
.customer__contact-value {
  margin-top: var(--space-2);
  font-size: 16px;
  color: var(--color-text);
}
.customer__contact-value a { color: var(--color-primary); text-decoration: underline; }
.customer__footer {
  text-align: center;
  padding-top: var(--space-7);
  margin-top: var(--space-5);
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: 14px;
}

/* -----------------------------------------------------------------------------
   Dashboard page
   ----------------------------------------------------------------------------- */
body.dashboard { background: var(--color-bg); }

.dashboard__main { max-width: var(--content-max); margin: 0 auto; padding: var(--space-6) var(--space-5); }
.dashboard__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-line);
}
.dashboard__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  color: var(--color-accent);
  font-weight: 600;
}
.dashboard__title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 5vw, 40px);
  margin-top: var(--space-1);
}
.dashboard__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-card);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  font-size: 13px;
  font-weight: 500;
}
.dashboard__status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #C5C2BE; box-shadow: 0 0 0 4px rgba(197, 194, 190, 0.2);
}
.dashboard__status-dot.ws-status--connecting   { background: var(--color-accent); animation: pulse 1.2s ease-in-out infinite; }
.dashboard__status-dot.ws-status--connected    { background: #2E8B57; box-shadow: 0 0 0 4px rgba(46, 139, 87, 0.2); }
.dashboard__status-dot.ws-status--disconnected { background: #B43F3F; box-shadow: 0 0 0 4px rgba(180, 63, 63, 0.2); }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.dashboard__placeholder {
  margin-top: var(--space-6);
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-md);
}
.dashboard__placeholder h2 {
  font-family: var(--font-heading);
  font-size: 28px;
  color: var(--color-primary);
}
.dashboard__placeholder p {
  margin-top: var(--space-3);
  color: var(--color-muted);
  font-size: 16px;
  max-width: 640px;
}
.dashboard__placeholder-note {
  margin-top: var(--space-5);
  font-size: 14px;
  color: var(--color-muted);
}
.dashboard__placeholder-note code {
  background: rgba(42, 37, 34, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}
.dashboard__footer {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: 13px;
}

/* -----------------------------------------------------------------------------
   Admin page
   ----------------------------------------------------------------------------- */
body.admin { background: var(--color-bg); }

.admin__main { max-width: 880px; margin: 0 auto; padding: var(--space-6) var(--space-5); }
.admin__header { padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-line); }
.admin__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  color: var(--color-accent);
  font-weight: 600;
}
.admin__title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 5vw, 40px);
  margin-top: var(--space-1);
}

.admin__panel {
  margin-top: var(--space-5);
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.admin__panel-title { font-family: var(--font-heading); font-size: 22px; }
.admin__panel-sub { margin-top: var(--space-2); color: var(--color-muted); font-size: 14px; }
.admin__actions { margin-top: var(--space-4); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.admin__btn {
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 14px;
  border: 1px solid var(--color-line);
  background: var(--color-card);
  color: var(--color-text);
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.admin__btn:hover { background: var(--color-text); color: #fff; border-color: var(--color-text); }
.admin__btn--danger { background: #B43F3F; color: #fff; border-color: #B43F3F; }
.admin__btn--danger:hover { background: #8B2F2F; border-color: #8B2F2F; }

.admin__result {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: rgba(42, 37, 34, 0.04);
}
.admin__result[data-kind="ok"]    { background: rgba(46, 139, 87, 0.1);  color: #1E5E37; }
.admin__result[data-kind="error"] { background: rgba(180, 63, 63, 0.1);  color: #7A1F2B; }

.admin__stats {
  margin-top: var(--space-3);
  background: #1F1B19;
  color: #F2EEDC;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.admin__tenant-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.admin__tenant-row {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.admin__tenant-meta { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: baseline; }
.admin__tenant-slug code { background: rgba(42, 37, 34, 0.06); padding: 2px 6px; border-radius: 4px; font-size: 12px; }
.admin__tenant-location { color: var(--color-muted); font-size: 13px; }
.admin__tenant-links { display: flex; gap: var(--space-3); font-size: 13px; }
.admin__tenant-links a { color: var(--color-primary); text-decoration: underline; }
.admin__roadmap { margin-top: var(--space-3); padding-left: var(--space-5); list-style: disc; color: var(--color-muted); font-size: 14px; }
.admin__roadmap li { margin-bottom: var(--space-2); }
.admin__footer {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: 13px;
}
.admin__footer a { color: var(--color-primary); text-decoration: underline; }
.admin__footer code { background: rgba(42, 37, 34, 0.06); padding: 2px 6px; border-radius: 4px; font-size: 12px; }