/* Medora theme for the design-system showcase.
   Scoped to `.medora` so no existing page changes. It only re-points shadcn's semantic variables at
   Medora's primitives from tokens.generated.css (--mdr-*). Palette: medora-design-system/02-brand/color-palette.md.
   Flat, light, no dark mode. */

.medora {
  color-scheme: light;

  /* globals.css still defines the old --color-muted (a text grey). Re-point it here so bg-muted/50 on tables,
     skeletons and example bars uses the light surface; scoped, so other pages keep the old value. */
  --color-muted: var(--muted);
  /* Same collision for primary, card and sidebar: globals.css keeps the old teal/green values, which would
     otherwise win over @theme inline for bg-primary, bg-card and bg-sidebar. */
  --color-primary: var(--primary);
  --color-card: var(--card);
  --color-sidebar: var(--sidebar);
  --color-sidebar-border: var(--sidebar-border);

  /* Cards, forms, dialogs, menus and popovers are white; the workspace behind them is gray-50 (below). */
  --background: var(--mdr-white);
  --foreground: var(--mdr-ink);
  --card: var(--mdr-white);
  --card-foreground: var(--mdr-ink);
  --popover: var(--mdr-white);
  --popover-foreground: var(--mdr-ink);

  --primary: var(--mdr-teal-700);
  --primary-foreground: var(--mdr-white);
  --secondary: var(--mdr-gray-100);
  --secondary-foreground: var(--mdr-ink);
  --muted: var(--mdr-gray-100);
  /* Labels and descriptions */
  --muted-foreground: var(--mdr-gray-700);
  /* Hover and selected fill for menus, list items and ghost buttons */
  --accent: var(--mdr-teal-100);
  --accent-foreground: var(--mdr-teal-800);
  --destructive: var(--mdr-red-700);

  /* Cards and dividers stay soft; input outlines need 3:1 against white (mist-600 is 3.24) */
  --border: var(--mdr-mist-200);
  --input: var(--mdr-mist-600);
  --ring: var(--mdr-teal-600);

  /* shadcn chart slots follow the Medora chart tokens: four series derived from the brand teal, then the lime highlight */
  --chart-1: var(--color-chart-series-1);
  --chart-2: var(--color-chart-series-2);
  --chart-3: var(--color-chart-series-3);
  --chart-4: var(--color-chart-series-4);
  --chart-5: var(--color-chart-highlight);

  /* Small radii: controls 6px, cards and popovers about 8px (rounded-xl = 1.4 x radius) */
  --radius: 0.375rem;

  /* Sidebar, light tone (default): white, dark items, grey UPPERCASE group labels (5.74:1),
     grey hover, and a mint active pill with primary-teal text (9.61:1). The brand tone is below. */
  --sidebar: var(--mdr-white);
  --sidebar-foreground: var(--mdr-ink);
  --sidebar-muted: var(--mdr-gray-600);
  --sidebar-primary: var(--mdr-teal-700);
  --sidebar-primary-foreground: var(--mdr-white);
  --sidebar-accent: var(--mdr-gray-100);
  --sidebar-accent-foreground: var(--mdr-ink);
  --sidebar-active: var(--mdr-teal-100);
  --sidebar-active-foreground: var(--mdr-teal-700);
  --sidebar-border: var(--mdr-mist-200);
  --sidebar-ring: var(--mdr-teal-600);

  /* Elevation: nothing rests on a shadow. Only floating layers (popover, dialog) carry one. */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: 0px 4px 12px -2px #0011101F, 0px 2px 4px -2px #0011100F;
  --shadow-lg: 0px 4px 12px -2px #0011101F, 0px 2px 4px -2px #0011100F;
  --shadow-xl: 0px 16px 32px -8px #00111029, 0px 4px 8px -4px #00111014;

  /* Type sizes. shadcn components use Tailwind's text-xs / text-sm rather than the Medora text-*
     styles, so re-point them here to match the token scale: xs = 13px floor (label-xs, caption),
     sm = 14px (tables, buttons, inputs, labels, menus), base = 16px (long-form, login). Body is 15px.
     Scoped, so other pages keep Tailwind's 12px text-xs. */
  --text-xs: 0.8125rem;
  --text-xs--line-height: 1.125rem;
  --text-sm: 0.875rem;
  --text-sm--line-height: 1.25rem;
  --text-base: 1rem;
  --text-base--line-height: 1.5rem;

  background: var(--mdr-gray-50);
  color: var(--foreground);
  font-family: var(--font-geist), ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Body text size. Not set on .medora itself: MedoraScope also puts that class on <html>, and a font-size
   there changes the root size every rem is measured from, shrinking the whole scale (0.875rem here once
   rendered everything at 87.5%). */
.medora:not(html),
html.medora body {
  font-size: 0.9375rem;
  line-height: 1.375rem;
}

/* Sidebar, brand tone (<Sidebar tone="brand">): primary teal with white items (10.88:1), white/70 labels
   (6.17:1), darker-teal hover, and the same mint active pill with the darkest teal text (12.84:1). */
.medora [data-sidebar-tone="brand"],
html[data-sidebar-tone="brand"] .medora [data-sidebar-tone="auto"] {
  --sidebar: var(--mdr-teal-700);
  --sidebar-foreground: var(--mdr-white);
  --sidebar-muted: rgb(255 255 255 / 0.7);
  --sidebar-primary: var(--mdr-teal-100);
  --sidebar-primary-foreground: var(--mdr-teal-900);
  --sidebar-accent: var(--mdr-teal-800);
  --sidebar-accent-foreground: var(--mdr-white);
  --sidebar-active: var(--mdr-teal-100);
  --sidebar-active-foreground: var(--mdr-teal-900);
  --sidebar-border: var(--mdr-teal-800);
  --sidebar-ring: var(--mdr-white);
  /* bg-sidebar and border-sidebar-border read these two, which resolve where they are declared,
     so they must be restated here or they keep the light values from the root. */
  --color-sidebar: var(--sidebar);
  --color-sidebar-border: var(--sidebar-border);
}

/* Money, counts and dates align in columns */
.medora table,
.medora [data-slot="table"],
.medora .tnum {
  font-variant-numeric: tabular-nums;
}

/* Display font is for page and section headings only */
.medora .font-display {
  font-family: var(--font-bricolage), var(--font-geist), ui-sans-serif, system-ui, sans-serif;
}

.medora ::selection {
  background: var(--mdr-teal-100);
}

/* ---------------------------------------------------------------------------------
   Print (C77). printElement() copies one document into #medora-print-root and sets
   html[data-printing]; everything else is hidden so the app shell never prints.
   Paper sizes are working defaults until D10 decides them.
   --------------------------------------------------------------------------------- */
#medora-print-root {
  display: none;
}

@media print {
  html[data-printing] body > *:not(#medora-print-root) {
    display: none !important;
  }
  html[data-printing],
  html[data-printing] body {
    background: #fff !important;
  }
  html[data-printing] #medora-print-root {
    display: block;
    color: #000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #medora-print-root[data-paper="a4"] { page: medora-a4; }
  #medora-print-root[data-paper="receipt-80"] { page: medora-receipt-80; }
  #medora-print-root[data-paper="receipt-58"] { page: medora-receipt-58; }
  #medora-print-root[data-paper="sheet-21"] { page: medora-sheet-21; }
  #medora-print-root[data-paper="label-38x25"] { page: medora-label-38x25; }
  #medora-print-root[data-paper="label-70x40"] { page: medora-label-70x40; }
  /* Receipts print at the paper's width, not the preview's. */
  #medora-print-root[data-paper^="receipt"] > * {
    width: auto !important;
    border: 0 !important;
    padding: 0 2mm !important;
  }
}

@page medora-a4 {
  size: A4;
  margin: 12mm 12mm 16mm;
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    font: 8pt ui-sans-serif, system-ui, sans-serif;
  }
  @bottom-left {
    content: "Medora";
    font: 8pt ui-sans-serif, system-ui, sans-serif;
  }
}
/* Thermal rolls have no fixed length; the driver cuts after the content. */
@page medora-receipt-80 {
  size: 80mm 297mm;
  margin: 3mm 0;
}
@page medora-receipt-58 {
  size: 58mm 297mm;
  margin: 3mm 0;
}
@page medora-sheet-21 {
  size: A4;
  margin: 0;
}
@page medora-label-38x25 {
  size: 38mm 25mm;
  margin: 0;
}
@page medora-label-70x40 {
  size: 70mm 40mm;
  margin: 0;
}

/* Indeterminate progress (background jobs whose size isn't known). Still under reduced motion. */
@keyframes medora-indeterminate {
  from { left: -33%; }
  to { left: 100%; }
}