@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Alfa+Slab+One&family=Oswald:wght@400;500;600;700&display=swap');

/* Franks A Lot -- Kitchen Portal
   Design concept: the printed order ticket rail above a Tex-Mex line --
   torn-edge chits, a hand-stamped role tag, kraft-paper warmth. Built on
   the same char/masa/chili palette as the public site, extended for a
   working kitchen tool rather than a marketing page. */

:root {
  --char: #241b15;
  --char-soft: #4a3a2c;
  --masa: #f4ead2;
  --masa-deep: #e8d8ab;
  --paper: #fffbf1;
  --line: #d8c49a;
  --chili: #b8402a;
  --chili-deep: #8f2f1e;
  --amber: #c98a2e;
  --avocado: #5f7d44;
}

* { box-sizing: border-box; }

/* The reading face.
   Oswald is a condensed display face -- tall, narrow, made for headlines. It
   was the body font here, so every page's small print was being read in it,
   and each page that wanted to be legible had to opt out by hand. Most never
   did. Roboto reads at any size; Oswald stays where it belongs, named
   explicitly below: the logo line, the big figures, the recipe headings. */
body {
  margin: 0;
  font-family: 'Roboto', -apple-system, 'Segoe UI', Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: var(--masa);
  color: var(--char);
  background-image:
    radial-gradient(var(--masa-deep) 0.6px, transparent 0.6px);
  background-size: 14px 14px;
}

a { color: inherit; }

/* ---------- Ticket rail header ---------- */
.rail {
  background: var(--char);
  color: var(--masa);
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 3px dashed var(--chili);
  position: relative;
}
.rail::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 6px;
  background-image: radial-gradient(circle, var(--masa) 3px, transparent 3px);
  background-size: 16px 6px;
  background-repeat: repeat-x;
}
.rail .brand {
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 700;
  font-style: normal;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: .2px;
}
.rail .brand small {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
  color: var(--masa-deep);
  letter-spacing: 0.6px;
  margin-top: 3px;
}
.rail .who {
  display: flex;
  align-items: center;
  font-size: 16px;
}
.rail .who > * { margin-left: 14px; }
.rail .who > *:first-child { margin-left: 0; }
.rail .who a { text-decoration: underline; color: var(--masa); opacity: 0.85; }
.rail .who a:hover { opacity: 1; }
.rail nav { display: flex; gap: 4px; }
.rail nav a {
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--masa-deep);
}
.rail nav a:hover { background: rgba(255,255,255,0.08); color: var(--masa); }

/* Role stamp -- rotated ink-stamp badge, distinct per role */
.stamp {
  display: inline-block;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: 3px;
  border: 2px solid currentColor;
  transform: rotate(-3deg);
}
.stamp.owner { color: var(--chili); background: rgba(184,64,42,0.08); }
.stamp.kitchen { color: var(--avocado); background: rgba(95,125,68,0.1); }
.stamp.editor { color: var(--amber); background: rgba(201,138,46,0.1); }

/* ---------- Layout ---------- */
main { padding: 30px 28px; max-width: 1040px; margin: 0 auto; }
main.narrow { max-width: 440px; }
.greeting { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.greeting-sub { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 17px; color: var(--char-soft); margin-bottom: 22px; }
.link-group-heading {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--char);
  margin: 30px 0 12px;
}
.link-group-heading:first-of-type { margin-top: 0; }
.link-list a { display: flex !important; align-items: center; }
.link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--chili);
  color: var(--masa);
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin-right: 13px;
  flex-shrink: 0;
}

/* ---------- Ticket cards ---------- */
.ticket {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  position: relative;
  box-shadow: 0 2px 0 var(--line);
}
.ticket::before {
  content: "";
  position: absolute;
  top: -1px; left: 14px; right: 14px;
  height: 8px;
  background-image: radial-gradient(circle, var(--masa) 3.5px, transparent 3.5px);
  background-size: 14px 8px;
  background-position: top;
}

.stat-row { display: flex; gap: 18px; flex-wrap: wrap; margin: 24px 0 30px; }
.stat {
  padding: 20px 24px 16px;
  flex: 1;
  min-width: 160px;
}
.stat .num {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 34px;
  color: var(--chili);
  line-height: 1;
}
.stat .label { font-size: 13.5px; color: var(--char-soft); margin-top: 6px; }

.link-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.link-list a {
  display: block;
  padding: 17px 20px;
  text-decoration: none;
  color: var(--char);
  font-weight: 500;
  font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 17.5px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.link-list a:hover { transform: translateX(3px); box-shadow: 0 3px 0 var(--line); }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card { width: 340px; padding: 30px 30px 26px; }
.login-card .brand-block {
  font-family: 'Roboto Slab', Georgia, serif; font-weight: 600;
  font-weight: 400;
  font-style: normal;
  font-size: 26px;
  color: var(--char);
  margin-bottom: 2px;
}
.login-card .brand-sub {
  font-size: 14px;
  color: var(--char-soft);
  margin-bottom: 22px;
}

/* ---------- Forms ---------- */
label { display: block; font-size: 13px; font-weight: 700; margin: 14px 0 5px; color: var(--char-soft); }
label:first-of-type { margin-top: 0; }
input[type=text], input[type=password], input[type=number], select, textarea {
  width: 100%;
  padding: 9px 11px;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-size: 15px;
  font-family: inherit;
  color: var(--char);
}
button, .btn {
  display: inline-block;
  background: var(--chili);
  color: var(--masa);
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease;
}
button:hover, .btn:hover { background: var(--chili-deep); }

.msg { padding: 10px 13px; border-radius: 6px; font-size: 14.5px; margin-bottom: 10px; }
.msg.error { background: #f3ded9; color: var(--chili-deep); }
.msg.success { background: #e6ecdd; color: var(--avocado); }

/* ---------- Recipe list ---------- */
.search-bar {
  width: 100%; padding: 11px 14px; margin-bottom: 18px;
  border-radius: 6px; border: 1.5px solid var(--line); background: var(--paper);
  font-size: 15px;
}
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 14px; font-size: 15px; border-bottom: 1px solid var(--masa-deep); }
th { font-size: 12.5px; font-weight: 700; color: var(--char-soft); letter-spacing: 0.3px; text-transform: none; }
tr:hover td { background: rgba(184,64,42,0.04); }
.rowlink { color: var(--char); text-decoration: none; font-weight: 700; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--line); }
.dot.yes { background: var(--avocado); }

/* ---------- Recipe view ---------- */
.recipe-head { margin-bottom: 6px; }
.recipe-head h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 26px;
  margin: 0 0 4px;
}
.recipe-meta { font-size: 14px; color: var(--char-soft); margin-bottom: 20px; }
.section { padding: 18px 22px; margin-bottom: 16px; }
.section h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 800;
  color: var(--char-soft);
  letter-spacing: 0.4px;
}
.section table td { border-bottom: 1px dashed var(--masa-deep); padding: 6px 0; }

.cost-ticket {
  background: var(--char);
  color: var(--masa);
  border: none;
  box-shadow: none;
}
.cost-ticket::before { background-image: radial-gradient(circle, var(--masa) 3.5px, transparent 3.5px); }
.cost-ticket h3 { color: var(--amber); }
.cost-grid { display: flex; flex-wrap: wrap; }
.cost-grid > div { margin-right: 26px; margin-bottom: 10px; }
.cost-grid .val { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 19px; color: var(--amber); }
.cost-grid .lbl { font-size: 11px; opacity: 0.8; margin-top: 2px; }

@media (max-width: 640px) {
  main { padding: 20px 16px; }
  .rail { padding: 14px 18px; }
}

/* ---------- Print ---------- */
.print-btn {
  background: none;
  border: 1.5px solid var(--char);
  color: var(--char);
  padding: 7px 16px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.print-btn:hover { background: var(--char); color: var(--masa); }

@media print {
  body { background: #fff !important; background-image: none !important; }
  .rail, .print-btn, form button, .add-line-btn, nav { display: none !important; }
  main { max-width: 100% !important; padding: 0 !important; }
  .ticket {
    background: #fff !important;
    border: 1px solid #999 !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  .ticket::before { display: none !important; }
  .cost-ticket, .cost-ticket * { background: #fff !important; color: #000 !important; }
  .cost-ticket h3 { color: #000 !important; }
  .recipe-head h1 { color: #000; }
  a { color: #000 !important; text-decoration: none !important; }
}

/* ---------- Scrollable table hint (mobile) ---------- */
.scroll-hint {
  display: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--chili);
  text-align: center;
  padding: 6px 0;
}
.scroll-wrap {
  overflow-x: auto;
  position: relative;
}
@media (max-width: 640px) {
  .scroll-hint { display: block; }
}

/* ---------- Shared "considered" touches for data pages ---------- */
.cat-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--masa-deep);
  color: var(--char-soft);
  white-space: nowrap;
}
.price-fig {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  color: var(--chili-deep);
}
.price-cell { white-space: nowrap; }
.margin-badge {
  display: inline-block;
  font-weight: 800;
  font-size: 12.5px;
  padding: 3px 10px;
  border-radius: 999px;
}
.margin-badge.good { background: rgba(95,125,68,0.14); color: var(--avocado); }
.margin-badge.low { background: rgba(201,138,46,0.14); color: var(--amber); }
.margin-badge.neg { background: rgba(184,64,42,0.14); color: var(--chili-deep); }
.margin-badge.none { background: var(--masa-deep); color: var(--char-soft); font-weight: 600; }
.reorder-badge {
  display: inline-block;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.4px;
  padding: 3px 10px;
  border-radius: 3px;
  border: 2px solid var(--chili-deep);
  color: var(--chili-deep);
  background: rgba(184,64,42,0.06);
  transform: rotate(-2deg);
}
.form-accent {
  border-left: 3px solid var(--chili);
  padding-left: 16px;
}
.section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--chili);
  color: var(--masa);
  font-size: 15px;
  font-weight: 800;
  margin-right: 10px;
  flex-shrink: 0;
}
.section-heading {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}

/* ---------- Page trail ("← Dashboard · Purchases & expenses") ----------
   Added 22 Sep 2026, when Oswald was still the body font and the trail was
   hard to read. The body is Roboto now, so this only holds the size; the
   !important stays because the pages set 15px inline. */
main div:has(> a[href="/dashboard.php"]) {
  font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.5;
}
main a[href="/dashboard.php"],
main a[href="/dashboard.php"] ~ a {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 500;
}

/* Role stamps for the two newer roles, which showed without a colour */
.stamp.accounts { color: #2f5d8a; background: rgba(47,93,138,0.10); }
.stamp.chef     { color: #7a4f2a; background: rgba(122,79,42,0.10); }