/* ============================================================================
   Malfaldi's — an old-money trattoria ledger.
   Oxblood & antique gold on parchment; Playfair Display + EB Garamond.
   Layered over Pico v2 via its CSS variables, with bespoke rules on top.
   Selector matches Pico's own `:root:not([data-theme=dark])` specificity so our
   palette wins; loaded after Pico, so equal specificity resolves in our favour.
   ============================================================================ */
:root:not([data-theme=dark]) {
  /* palette */
  --mal-oxblood:   #5e1622;
  --mal-oxblood-2: #45101a;
  --mal-wine:      #8a2231;
  --mal-wine-2:    #6c1a26;
  --mal-gold:      #b08d4c;
  --mal-gold-soft: #cca962;
  --mal-cream:     #f4ecd8;
  --mal-panel:     #fcf8ee;
  --mal-panel-2:   #fffdf7;
  --mal-ink:       #2b2018;
  --mal-muted:     #8a7960;
  --mal-border:    #e3d7ba;
  --mal-border-2:  #cdb88c;
  --mal-green:     #356148;
  --mal-red:       #9b2226;

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "EB Garamond", Georgia, "Times New Roman", serif;

  /* type scale (minor third ~1.2) */
  --fs-overline: .72rem; --fs-small: .85rem;
  --fs-h3: 1.3rem; --fs-h2: 1.85rem; --fs-display: 2.4rem;
  --lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.55;

  /* spacing + structure */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem;
  --container: 1100px; --mal-radius: 3px; --mal-rule-gold: 2px solid var(--mal-gold);

  /* Pico overrides */
  --pico-font-family: var(--font-body);
  --pico-font-size: 112%;
  --pico-line-height: 1.55;
  --pico-background-color: var(--mal-cream);
  --pico-color: var(--mal-ink);
  --pico-h1-color: var(--mal-oxblood);
  --pico-h2-color: var(--mal-oxblood);
  --pico-h3-color: var(--mal-oxblood);
  --pico-h4-color: var(--mal-oxblood);
  --pico-muted-color: var(--mal-muted);
  --pico-muted-border-color: var(--mal-border);
  --pico-primary: var(--mal-wine);
  --pico-primary-hover: var(--mal-wine-2);
  --pico-primary-background: var(--mal-oxblood);
  --pico-primary-hover-background: var(--mal-oxblood-2);
  --pico-primary-border: var(--mal-oxblood);
  --pico-primary-hover-border: var(--mal-oxblood-2);
  --pico-primary-inverse: #fbf3df;
  --pico-primary-focus: rgba(176, 141, 76, .4);
  --pico-card-background-color: var(--mal-panel);
  --pico-card-border-color: var(--mal-border);
  --pico-card-sectioning-background-color: var(--mal-panel);
  --pico-form-element-background-color: var(--mal-panel-2);
  --pico-form-element-border-color: var(--mal-border-2);
  --pico-form-element-active-border-color: var(--mal-gold);
  --pico-form-element-focus-color: var(--mal-gold);
  --pico-border-radius: 3px;
  --pico-table-border-color: var(--mal-border);
  --pico-table-row-stripped-background-color: rgba(176, 141, 76, .06);
}

body {
  background-color: var(--mal-cream);
  background-image:
    radial-gradient(120% 60% at 50% -10%, rgba(255, 252, 240, .7), transparent 60%),
    radial-gradient(80% 50% at 100% 100%, rgba(176, 141, 76, .05), transparent 60%);
  background-attachment: fixed;
}

/* ---- Masthead -------------------------------------------------------------- */
.masthead {
  background: linear-gradient(180deg, var(--mal-oxblood) 0%, var(--mal-oxblood-2) 100%);
  border-bottom: 2px solid var(--mal-gold);
  box-shadow: 0 3px 16px rgba(40, 8, 12, .28);
}
.masthead-inner {
  max-width: var(--container); margin: 0 auto;
  padding: .55rem var(--space-5);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap; min-height: 56px;
}
.brand { text-decoration: none; display: inline-flex; align-items: center; gap: .6rem; }
.brand-text { display: inline-flex; flex-direction: column; line-height: 1; }
.brand-mark {
  font-family: var(--font-display); font-weight: 700; font-size: 1.65rem; line-height: 1.05;
  color: #f6e6c2; letter-spacing: .01em; text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
.brand-sub {
  font-family: var(--font-body); font-variant: small-caps; font-style: normal;
  font-size: .72rem; letter-spacing: .22em; text-transform: none;
  color: var(--mal-gold-soft); white-space: nowrap; margin-top: .18rem;
  position: relative; padding-left: .85rem;
}
.brand-sub::before {           /* hairline gold rule, replaces the typed em-dashes */
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 1.05em; background: var(--mal-gold); opacity: .6;
}
.topnav { display: flex; align-items: center; gap: .1rem; flex-wrap: wrap; row-gap: .25rem; }
.topnav a {
  color: #e9d6ac; text-decoration: none;
  font-size: .76rem; text-transform: uppercase; letter-spacing: .13em;
  padding: .4rem .7rem; border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.topnav a:hover, .topnav a[aria-current="page"] {
  color: #fff7e6; border-bottom-color: var(--mal-gold); background: none;
}
.topnav a.logout {
  color: var(--mal-gold-soft); margin-left: .35rem; padding-left: .85rem;
  border-left: 1px solid rgba(176, 141, 76, .35);
}

/* ---- Layout & headings ----------------------------------------------------- */
main.container { max-width: var(--container); padding-top: var(--space-6); padding-bottom: var(--space-7); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.005em; }
main h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); margin-bottom: .9rem; color: var(--mal-oxblood); }
main h2::after {
  content: ""; display: block; width: 2.75rem; height: 2px;
  background: var(--mal-gold); margin-top: .45rem;
}
main h3 {
  font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--mal-wine-2);
  margin-top: var(--space-6); margin-bottom: .6rem;
  border-bottom: 1px solid var(--mal-border); padding-bottom: .3rem;
}

/* ---- Cards ----------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: var(--space-4); }
.cards-6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .cards-6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cards-6 { grid-template-columns: 1fr; } }
.card {
  background: var(--mal-panel); border: 1px solid var(--mal-border);
  border-top: var(--mal-rule-gold); border-radius: var(--mal-radius);
  padding: var(--space-4) var(--space-5);
  box-shadow: 0 1px 2px rgba(70, 40, 20, .05);
}
.card .muted, .card .big + small {
  font-variant: small-caps; text-transform: none; letter-spacing: .06em;
  font-size: var(--fs-overline); color: var(--mal-muted);
}
.card .big {
  font-family: var(--font-display); font-weight: 600; font-size: 1.55rem;
  color: var(--mal-oxblood); margin-top: .15rem;
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1;
}

article { border-top: 1px solid var(--mal-border); }
.panel article, article article { border-top: 0; }
article > header { font-family: var(--font-display); }

/* ---- Tables (the ledger) --------------------------------------------------- */
table { font-size: .95rem; }
thead th {
  font-family: var(--font-body); font-weight: 600;
  color: var(--mal-oxblood); border-bottom: 3px double var(--mal-oxblood);
  text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; padding-bottom: .35rem;
}
tbody td, tbody th { border-bottom: 1px solid var(--mal-border); }
tbody tr:hover { background: rgba(176, 141, 76, .08); }
tfoot th, tfoot td {
  border-top: 3px double var(--mal-border-2); font-weight: 600;
  font-family: var(--font-body); color: var(--mal-oxblood);
}
.num, .chart-val, .card .big, tfoot th, tfoot td {
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1;
}
.num { text-align: right; }

/* ---- Forms ----------------------------------------------------------------- */
details.formbox {
  border: 1px solid var(--mal-border); border-top: var(--mal-rule-gold);
  background: var(--mal-panel); border-radius: var(--mal-radius);
  padding: .6rem 1.1rem; margin-bottom: 1rem;
}
details.formbox summary { font-family: var(--font-body); font-weight: 600; color: var(--mal-wine-2); cursor: pointer; }
details.formbox[open] summary { margin-bottom: .6rem; border-bottom: 1px solid var(--mal-border); padding-bottom: .4rem; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; align-items: end; }
label { font-size: .92rem; }
input, select, textarea { font-family: var(--font-body); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(176, 141, 76, .25); }

/* ---- Buttons --------------------------------------------------------------- */
button, [role="button"], input[type="submit"] {
  font-family: var(--font-body); letter-spacing: .04em; font-weight: 500; border-radius: var(--mal-radius);
}
button.outline:hover, [role="button"].outline:hover, .secondary:hover { box-shadow: inset 0 0 0 1px var(--mal-gold-soft); }
button:not(.outline):hover, [role="button"]:not(.outline):hover { filter: brightness(1.06); box-shadow: none; }

/* ---- Flash messages -------------------------------------------------------- */
.flash { border-radius: var(--mal-radius); padding: .7rem 1rem; font-size: .95rem; border: 1px solid var(--mal-border); border-left: 3px solid; }
.flash-ok  { background: #eef4ea; border-left-color: var(--mal-green); color: #2c4a38; }
.flash-err { background: #f7ece9; border-left-color: var(--mal-red);   color: #7a2620; }
.flash ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.flash ul li { margin: .15rem 0; }

/* ---- Bits ------------------------------------------------------------------ */
.muted { color: var(--mal-muted); }
.pos { color: var(--mal-green); }
.neg { color: var(--mal-red); }
code { background: rgba(176, 141, 76, .14); color: var(--mal-wine-2); border-radius: 2px; }
main a:not([role="button"]) { text-decoration: none; border-bottom: 1px solid rgba(138, 34, 49, .3); }
main a:not([role="button"]):hover { border-bottom-color: var(--mal-wine); }
.reports a, .sitefoot a { border-bottom: 0; }
.sitefoot {
  margin-top: 3.5rem; padding-top: 1.1rem; border-top: 1px solid var(--mal-border);
  color: var(--mal-muted); font-size: .8rem; text-align: center; letter-spacing: .05em;
}
.sitefoot code { background: none; color: var(--mal-muted); }

/* ---- Auth pages ------------------------------------------------------------ */
.auth-body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--mal-oxblood-2), var(--mal-oxblood));
}
.auth-wrap { width: 100%; max-width: 380px; padding: 1.5rem; }
.auth-card {
  background: var(--mal-panel); border: 1px solid var(--mal-border);
  border-top: var(--mal-rule-gold); border-radius: 4px;
  padding: 2rem 1.75rem; box-shadow: 0 26px 60px -30px rgba(0, 0, 0, .75);
}
.auth-brand {
  font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; line-height: 1;
  color: var(--mal-oxblood); text-align: center;
}
.auth-sub {
  font-family: var(--font-body); font-style: italic; color: var(--mal-gold);
  text-align: center; margin: .2rem 0 1.4rem; letter-spacing: 0;
}
.auth-card label { font-size: .95rem; }
.auth-card button { width: 100%; margin-top: .5rem; }

/* ---- Crest monogram (paint is on SVG attrs; CSS is cosmetic only) ---------- */
.crest { width: 40px; height: 40px; flex: none; display: block; }
.brand:hover .crest circle { stroke: var(--mal-gold-soft); }

/* ---- Dashboard hero -------------------------------------------------------- */
.hero { text-align: center; margin-bottom: var(--space-6); }
.hero h2 { font-size: var(--fs-display); line-height: var(--lh-tight); margin-bottom: .15rem; }
.hero h2::after { margin-left: auto; margin-right: auto; }
.hero-sub { font-style: italic; letter-spacing: 0; font-size: 1.05rem; color: var(--mal-muted); }

/* ---- Panels & charts ------------------------------------------------------- */
.panel {
  background: var(--mal-panel); border: 1px solid var(--mal-border);
  border-top: var(--mal-rule-gold); border-radius: var(--mal-radius); padding: var(--space-4) var(--space-5);
  box-shadow: 0 1px 2px rgba(70, 40, 20, .05);
}
.panel-title {
  font-family: var(--font-body); font-weight: 600; color: var(--mal-oxblood);
  font-variant: small-caps; text-transform: none; font-size: .92rem; letter-spacing: .08em;
  margin-bottom: .6rem; padding-bottom: .35rem; border-bottom: 1px solid var(--mal-border);
}
table.mini { margin: 0; }
table.mini td { border: none; padding: .25rem .25rem; }
table.mini tr:hover { background: none; }

.chart { width: 100%; height: auto; display: block; margin: .2rem 0; }
.chart .chart-label { font-family: var(--font-body); font-size: 12.5px; fill: #2b2018; }
.chart .chart-val   { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; fill: #6c1a26;
  font-variant-numeric: lining-nums tabular-nums; }
.chart .chart-bar       { fill: #5e1622; }
.chart .chart-bar:hover { fill: #8a2231; }
.chart .chart-axis      { stroke: #b08d4c; stroke-width: 1; opacity: .5; }
.chart .chart-xlabel    { font-family: var(--font-body); font-size: 11px; fill: #8a7960; }
.chart-empty { font-family: var(--font-body); font-style: italic; color: var(--mal-muted); font-size: .88rem; margin: .4rem 0; }

/* ---- Two-column panels ----------------------------------------------------- */
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); }

/* ---- Responsive / mobile --------------------------------------------------- */
@media (max-width: 760px) {
  .masthead-inner { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
  .crest { width: 34px; height: 34px; }
  .brand-mark { font-size: 1.5rem; }
  .brand-sub { font-size: .68rem; padding-left: 0; }
  .brand-sub::before { display: none; }
  .topnav { width: 100%; gap: .1rem .2rem; padding-top: var(--space-2); border-top: 1px solid rgba(176, 141, 76, .25); }
  .topnav a { padding: .5rem .6rem; font-size: .7rem; letter-spacing: .1em; }
  .topnav a.logout { margin-left: 0; padding-left: .6rem; border-left: 0; }
  main.container { padding-top: 1.1rem; }
  main h2 { font-size: 1.5rem; } main h3 { font-size: 1.1rem; }
  table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  table.mini { display: table; white-space: normal; }
  .card .big { font-size: 1.4rem; }
}