/* Snowy Salon -- hand-written CSS, no build step. Dark mode via prefers-color-scheme. */

/* --- Custom Properties (Light Mode) --- */
:root {
  --color-bg: #ffffff;
  --color-surface: #f9fafb;
  --color-text: #111827;
  --color-text-muted: #6b7280;
  --color-border: #d1d5db;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-danger: #dc2626;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --radius: 10px;
  --maxw: 1080px;
}

/* --- Dark Mode Overrides --- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #111827;
    --color-surface: #1f2937;
    --color-text: #f9fafb;
    --color-text-muted: #9ca3af;
    --color-border: #374151;
    --color-primary: #3b82f6;
    --color-primary-hover: #60a5fa;
    --color-danger: #ef4444;
    --color-success: #22c55e;
    --color-warning: #f59e0b;
  }
}

/* --- Base Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-main { flex: 1; }
.muted { color: var(--color-text-muted); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 2rem 1.25rem; }
.container.narrow { max-width: 560px; }

h1 { font-size: 2rem; margin-bottom: 0.5rem; }
h3 { margin-bottom: 0.35rem; }
p { margin-bottom: 0.75rem; }

/* --- Nav --- */
.site-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--color-text); }
.nav-links { display: flex; align-items: center; gap: 1rem; }

/* --- Buttons --- */
.btn {
  display: inline-block; padding: 0.55rem 1.1rem; border-radius: var(--radius);
  border: 1px solid transparent; font-weight: 600; cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); color: #fff; }
.btn-ghost { border-color: var(--color-border); color: var(--color-text); background: transparent; }

/* --- Hero / features --- */
.hero { text-align: center; padding-top: 3.5rem; }
.lede { font-size: 1.15rem; color: var(--color-text-muted); max-width: 640px; margin: 0.5rem auto 1.5rem; }
.cta-row { display: flex; gap: 0.75rem; justify-content: center; }

.features, .card-grid, .pricing-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.feature, .card, .plan {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 1.25rem;
}
.card { color: var(--color-text); }
.card:hover { border-color: var(--color-primary); text-decoration: none; }

.plan .price { font-size: 1.75rem; font-weight: 700; }
.plan .price span { font-size: 1rem; color: var(--color-text-muted); }
.plan ul { list-style: none; margin: 0.75rem 0; }
.plan li { padding: 0.2rem 0; }

.plan.is-recommended {
  position: relative;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.plan-flag {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  background: var(--color-primary);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
}

.list { list-style: none; }
.list li { padding: 0.4rem 0; border-bottom: 1px solid var(--color-border); }

/* --- Forms --- */
form p { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.85rem; }
label { font-weight: 600; }
input, textarea, select {
  padding: 0.5rem 0.65rem; border: 1px solid var(--color-border);
  border-radius: var(--radius); background: var(--color-bg); color: var(--color-text);
  font: inherit; width: 100%;
}
textarea { min-height: 120px; }

/* --- Notices / toasts --- */
.notice { border-radius: var(--radius); padding: 0.85rem 1rem; margin: 1rem 0; border: 1px solid var(--color-border); }
.notice-success { border-color: var(--color-success); }
.notice-warning { border-color: var(--color-warning); }
.notice-alert { border-color: var(--color-danger); border-left-width: 4px; }
.notice-alert strong { color: var(--color-danger); }

.toasts { list-style: none; max-width: var(--maxw); margin: 1rem auto 0; padding: 0 1.25rem; }
.toast { padding: 0.65rem 1rem; border-radius: var(--radius); margin-bottom: 0.5rem; border: 1px solid var(--color-border); background: var(--color-surface); }
.toast-success { border-color: var(--color-success); }
.toast-error { border-color: var(--color-danger); }
.toast-warning { border-color: var(--color-warning); }

/* --- Booking widget --- */
[x-cloak] { display: none !important; }

.booking-services { list-style: none; display: grid; gap: 0.6rem; margin: 1rem 0; }
.service-card, .provider-card {
  display: flex; flex-direction: column; gap: 0.15rem; width: 100%; text-align: left;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 0.85rem 1rem; cursor: pointer; color: var(--color-text);
}
.service-card:hover, .provider-card:hover, .slot-time:hover { border-color: var(--color-primary); }
.service-name { font-weight: 600; }
.service-meta { color: var(--color-text-muted); font-size: 0.9rem; }

.provider-list { display: grid; gap: 0.6rem; margin-top: 0.5rem; }

/* --- Branded booking page (Pro) --- */
.booking-brand { display: flex; flex-direction: column; gap: 0.25rem; }
.booking-brand-logo {
  max-height: 64px; max-width: 220px; width: auto; object-fit: contain;
  align-self: flex-start; margin-bottom: 0.5rem;
}
.booking-brand-tagline { margin-top: -0.1rem; }

.booking-substep { margin-top: 1.5rem; }
.slot-days { display: grid; gap: 1rem; }
.slot-day h4 { margin-bottom: 0.4rem; }
.slot-times { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.slot-time {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 0.45rem 0.8rem; cursor: pointer; color: var(--color-text);
}
.hold-countdown { color: var(--color-text-muted); }

/* --- Staff portal --- */
.salon-subnav {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-bottom: 1.5rem;
  padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border);
}
.salon-subnav a { color: var(--color-text-muted); font-weight: 600; font-size: 0.95rem; }
.salon-subnav a:hover { color: var(--color-primary); text-decoration: none; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.btn-danger { color: var(--color-danger); border-color: var(--color-danger); }
.btn-danger:hover { background: var(--color-danger); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* Tables */
.data-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.data-table th, .data-table td {
  text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.data-table th { font-size: 0.85rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.data-table tr.is-inactive td, .data-table tr.is-blackout td { color: var(--color-text-muted); }
.row-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.row-actions form { margin: 0; }
.inline-form { margin: 0; }
.inline-form select { width: auto; }

.color-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--color-border); }
.color-bar { display: inline-block; width: 5px; align-self: stretch; border-radius: 3px; }

/* Status badges */
.status-badge {
  display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; border: 1px solid var(--color-border);
  white-space: nowrap;
}
.status-booked { border-color: var(--color-primary); color: var(--color-primary); }
.status-confirmed { border-color: var(--color-success); color: var(--color-success); }
.status-completed { border-color: var(--color-text-muted); color: var(--color-text-muted); }
.status-no_show { border-color: var(--color-warning); color: var(--color-warning); }
.status-cancelled { border-color: var(--color-danger); color: var(--color-danger); }

/* Forms */
.form-card { margin: 1.25rem 0; }
.field-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.field-row > p { flex: 1; min-width: 140px; }
.field-hint { font-size: 0.85rem; font-weight: 400; }

/* --- Client CRM --- */
.client-search { max-width: 22rem; }
.pill {
  display: inline-block; padding: 0.05rem 0.5rem; border-radius: 9999px;
  font-size: 0.7rem; font-weight: 600; vertical-align: middle;
  border: 1px solid var(--color-border); color: var(--color-text-muted);
}
.pill-vip { border-color: var(--color-primary); color: var(--color-primary); }
.pill-alert { border-color: var(--color-danger); color: var(--color-danger); }
.pill-lapsed { border-color: var(--color-warning); color: var(--color-warning); }
.pill-active { border-color: var(--color-success); color: var(--color-success); }

.client-stats, .report-stats {
  display: grid; gap: 0.75rem; margin: 1rem 0 0.35rem;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.client-stat, .report-stat {
  display: flex; flex-direction: column; gap: 0.1rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 0.75rem 1rem;
}
.client-stat-value, .report-stat-value { font-size: 1.4rem; font-weight: 700; }
.client-stat-label, .report-stat-label { font-size: 0.8rem; color: var(--color-text-muted); }
.checkbox-row { flex-direction: row !important; align-items: center; gap: 0.5rem !important; }
.checkbox-row input { width: auto; }
.checkbox-group { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.85rem 1rem; margin-bottom: 0.85rem; }
.checkbox-group legend { font-weight: 600; padding: 0 0.4rem; }
.checkbox-group label { font-weight: 400; }
.checkbox-group ul { list-style: none; }
.checkbox-group li { display: flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0; }
.checkbox-group li input { width: auto; }

/* Availability editor */
.avail-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .avail-grid { grid-template-columns: 2fr 1fr; } }

/* Calendar / agenda */
.day-nav { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; }
.day-label { font-weight: 600; margin-left: auto; }
.agenda { list-style: none; display: grid; gap: 0.6rem; margin-top: 1rem; }
.agenda-item {
  display: flex; align-items: stretch; gap: 0.75rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 0.6rem 0.85rem;
}
.agenda-link { flex: 1; display: grid; gap: 0.1rem; color: var(--color-text); align-self: center; }
.agenda-link:hover { text-decoration: none; }
.agenda-time { font-weight: 600; }
.agenda-meta { font-size: 0.9rem; }
.agenda-item .status-badge { align-self: center; }

/* Reports */
.report-range { max-width: 34rem; margin-top: 1rem; }
.report-range .field-row > p { min-width: 10rem; }
.report-range-go { justify-content: flex-end; flex: 0 0 auto !important; }
.report-period { margin-top: 0.5rem; }
.report-note { font-size: 0.9rem; max-width: 60ch; }
/* The export link and the line saying what it contains, side by side on a wide
   screen and stacked when there is no room for both. */
.report-export {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  margin: 0.75rem 0;
}
.report-export .muted { font-size: 0.9rem; }

/* The verdict: the page's answer in one sentence, above the tiles. Tinted the
   same way the tiles are -- the tone is the news, so revenue falling is red --
   and left in the muted text color when there is no direction to claim. */
.report-verdict {
  font-size: 1.05rem; font-weight: 600; max-width: 60ch;
  margin: 1rem 0 0.25rem;
}
.report-verdict-good { color: var(--color-success); }
.report-verdict-bad { color: var(--color-danger); }
.report-verdict-flat, .report-verdict-none {
  color: var(--color-text-muted); font-weight: 400;
}
/* The same sentence on the dashboard, where the whole line is the way in to
   the report it summarizes. Block so the shared vertical margins apply to an
   anchor; the tone classes out-specify the plain `a` color, so the tint holds
   and the hover underline is the only thing that says it is a link. */
.report-verdict-link { display: block; }

/* The change against the previous period, on each stat tile. The tone is the
   direction read as news rather than the sign of the number: revenue falling
   and a no-show rate climbing are both red. */
.report-change { font-size: 0.8rem; font-weight: 600; }
.report-change-good { color: var(--color-success); }
.report-change-bad { color: var(--color-danger); }
.report-change-flat, .report-change-none, .report-change-new {
  color: var(--color-text-muted); font-weight: 400;
}
/* A service or provider that booked in the earlier window and not in this one
   is carried through at zero rather than dropped, so it can be read as having
   gone quiet. The row is dimmed; the red change on it is not. */
.report-row-lost td { color: var(--color-text-muted); }
#report h2 { font-size: 1.25rem; margin-top: 1.75rem; }

/* The biggest movers, named above the tables so an owner reads a few lines
   instead of thirty percentages. The ranking is the dollar swing, so the tint
   is the direction of the money: earned more is green, earned less is red. */
.report-movers {
  list-style: none; display: grid; gap: 0.4rem; margin: 0.75rem 0 1rem;
}
.report-mover {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left-width: 4px; border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
}
.report-mover-good { border-left-color: var(--color-success); }
.report-mover-bad { border-left-color: var(--color-danger); }
.report-mover-name { font-weight: 600; }
.report-mover-swing { font-weight: 600; }
.report-mover-good .report-mover-swing { color: var(--color-success); }
.report-mover-bad .report-mover-swing { color: var(--color-danger); }
.report-mover-meta {
  font-size: 0.85rem; color: var(--color-text-muted); margin-left: auto;
}

/* By-day revenue strip: one bar per day, height set inline by the view. No
   charting library and no JavaScript -- the bars are plain divs, and the date
   and dollar figure ride along in title/aria-label so the strip reads without
   a pointer. */
.day-chart {
  display: flex; align-items: flex-end; gap: 2px;
  height: 90px; margin: 0.75rem 0 1rem; padding: 0.4rem 0.5rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.day-chart-col {
  flex: 1 1 0; min-width: 3px; height: 100%;
  display: flex; align-items: flex-end;
}
.day-chart-bar {
  width: 100%; min-height: 2px; border-radius: 2px 2px 0 0;
  background: var(--color-primary);
}
.day-chart-col:hover .day-chart-bar { background: var(--color-primary-hover); }

/* Detail */
.detail-card { margin: 1rem 0; }
.detail-list { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; }
.detail-list dt { color: var(--color-text-muted); }
.detail-list dd { margin: 0; }

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--color-border); padding: 1.5rem 1.25rem;
  text-align: center; color: var(--color-text-muted); background: var(--color-surface);
}

.app-version { font-size: 0.75rem; color: var(--color-text-muted); }