:root {
  color-scheme: light dark;

  /* Core */
  --bg: #0b0b0b;
  --fg: #eaeaea;
  --muted: #9aa0a6;

  /* Accent system (match dashboard vibe) */
  --accent: #f97316;        /* orange */
  --accent-2: #3b82f6;      /* blue */
  --ok: #22c55e;            /* green */
  --bad: #ef4444;           /* red */

  /* Surfaces */
  --panel: rgba(255,255,255,.06);
  --panel-border: rgba(255,255,255,.14);

  /* Heading / brand */
  --heading: var(--accent);
}


* { box-sizing: border-box; }

html, body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(900px 500px at 85% 10%, rgba(249,115,22,.18), transparent 60%),
    var(--bg);
  color: var(--fg);
}


a { color: inherit; text-decoration: none; opacity: .92; }
a:hover { opacity: 1; text-decoration: underline; }

.wrap {
  max-width: 980px;
  margin: 24px auto;
  padding: 0 16px;
}

/* ===== Header ===== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(11,11,11,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 auto;     /* override .wrap’s vertical margin inside header */
  padding: 4px 16px;  /* tighter top/bottom, same side gutters */
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

.site-header .brand img {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 6px; /* optional */
}

.site-nav {
  margin-left: auto;
  display: flex;
  gap: 12px;
}

.site-nav a {
  padding: 10px 6px;  /* comfy tap targets */
}


/* ===== Utilities ===== */
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  background: rgba(127,127,127,.08);
  padding: 2px 6px;
  border-radius: 6px;
}

/* ===== Home / panels ===== */
.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 24px;
  margin: 24px 0;
}

.hero.center { text-align: center; }
.brand { color: var(--heading); }

.cta-row { display: inline-flex; gap: 12px; margin-top: 18px; }
.btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(127,127,127,.35);
  background: transparent;
  color: inherit;
  text-decoration: none;
}
.btn:hover { background: rgba(127,127,127,.12); }
.btn-green{ background: linear-gradient(135deg, rgba(249,115,22,.95), rgba(251,146,60,.90)); color:#111; border-color: transparent; box-shadow: 0 10px 22px rgba(249,115,22,.22); }
.btn-green:hover{ filter: brightness(0.98); }

.why { padding-left: 18px; }
.site-footer { color: var(--muted); margin-bottom: 32px; }
@media (max-width: 420px) {
  .site-header .wrap { gap: 10px; padding: 4px 12px; }
  .site-nav { gap: 10px; }
}
:root { --header-h: 44px; }  /* tweak if needed */
body { padding-top: var(--header-h); }

/* === Readability fixes for Modules page === */

/* Make card text dark on a light card so it pops against the dark panel */
#catalog .card{
  background:#ffffff;
  color:#1f2937;            /* slate-800 */
  border-color:rgba(0,0,0,.14);
}

/* Headings/labels/links inside cards */
#catalog .card strong,
#catalog .card label{ color:#1f2937; }   /* force dark text */
#catalog .card p,
#catalog .card .muted{
  color:#374151;            /* slate-700 */
  opacity:1 !important;     /* override any global .muted low-opacity */
}
#catalog .card a{ color:inherit; text-decoration:none; }

/* When a module is OFF, don’t fade everything; just soften background/text a bit */
#catalog .card:has(.m-toggle:not(:checked)){
  background:#f8fafc;       /* very light slate */
  border-color:rgba(0,0,0,.10);
}
#catalog .card:has(.m-toggle:not(:checked)) strong{ color:#475569; } /* slate-600 */
#catalog .card:has(.m-toggle:not(:checked)) p{ color:#64748b; }       /* slate-500 */

/* Panel + category accent (keeps the MPI-style look) */
.panel{
  background:#131313;
  border-color:rgba(234,234,234,.12);
}
.cat .card{ border-left:6px solid var(--cat); }
.cat h2{ color:var(--cat); }

/* Category colors (already added earlier; keep here for completeness) */
.cat-allergen-recall-complaints { --cat:#f59e0b; }  /* amber */
.cat-cleaning-maintenance       { --cat:#2aa198; }  /* teal */
.cat-cooking-production         { --cat:#e76f51; }  /* orange */
.cat-receiving-storage          { --cat:#3b82f6; }  /* blue */
.cat-serving-display            { --cat:#a855f7; }  /* purple */
.cat-starting-hygiene           { --cat:#22c55e; }  /* green */
.cat-temperature-control        { --cat:#ef4444; }  /* red */
.cat-training                   { --cat:#f59e0b; }  /* amber */

/* ===== Profile page ===== */

.profile-main {
  margin-top: 24px;
}

.profile-grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 720px) {
  .profile-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  margin-bottom: 12px;
}

.field label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="tel"] {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(127,127,127,.4);
  background: #000;
  color: inherit;
}

.small {
  font-size: 13px;
}

.small.error {
  color: #ef4444;
}

.small.success {
  color: #22c55e;
}

.hint {
  color: var(--muted);
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox input {
  margin: 0;
}

.actions {
  margin-top: 12px;
}

.actions .btn {
  min-width: 140px;
  text-align: center;
}

/* === Modules page (aligned with profile/panels) === */

.msg-bar {
  margin: 8px 0;
}

.hidden {
  display: none;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.row.row-end {
  justify-content: flex-end;
  margin-top: 16px;
}

/* Catalog layout */

#catalog {
  margin-top: 12px;
}

.module-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 720px) {
  .module-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

/* Individual module cards use the same visual language as .panel */

.module-card {
  background: rgba(127,127,127,.08);
  border: 1px solid rgba(127,127,127,.2);
  border-radius: 16px;
  padding: 16px 18px;
  margin: 8px 0;
}

/* Header row: checkbox + title */

.module-header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  cursor: pointer;
}

.module-title {
  font-weight: 600;
}

.module-desc {
  min-height: 2.5em;
  margin: 0 0 6px;
}

.m-toggle {
  width: 18px;
  height: 18px;
}

/* Settings block inside the card */

.m-settings {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed rgba(154,160,166,.6); /* based on --muted */
}

/* Reuse .field styles for the inputs */
.m-settings .field {
  margin-bottom: 8px;
}

/* Ensure controls stretch full width inside card */
.m-settings select,
.m-settings input[type="text"],
.m-settings input[type="time"] {
  width: 100%;
}

/* module blocks */
.module-block {
  margin-top: 12px;
}

.module-options {
  margin: 4px 0 8px 32px;
  padding-left: 8px;
  border-left: 2px solid #e5e7eb;
}

/* Container for the day chips */
.dow-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 6px;
}

/* Base pill appearance */
.dow-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #4b5563;   /* outline */
  background-color: #111827;    /* pill bg (dark) */
  font-size: 0.8rem;
  color: #e5e7eb;               /* text colour (light) */
  cursor: pointer;
}

/* Hide the native checkbox box, still clickable via label */
.dow-pill input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* When checked: higher contrast colours */
.dow-pill:has(input:checked) {
  background-color: #f97316;    /* orange bg */
  border-color: #f97316;
  color: #111827;               /* dark text on orange */
}