/*
 * Tres Marias design tokens as CSS custom properties (design system:
 * tokens/colors.css + tokens/typography.css). MUI components read the JS mirror
 * in tokens.js; plain CSS and inline styles can use these.
 *
 * The values below are the dark (navy) scheme, used until theme/colorMode.js
 * writes the chosen scheme onto <html>. From then on <html> wins, so body,
 * scrollbars and everything styled with var(--tm-...) follow the mode switch.
 */
:root {
  --tm-bg-base: #0b0f19;
  --tm-bg-deep: #080c14;
  --tm-bg-panel: #0f1626;
  --tm-header-bg: #0f172a;

  --tm-gold: #c5a059;
  --tm-gold-light: #dfba73;
  --tm-gold-dark: #9d7c38;
  --tm-gold-glow: rgba(197, 160, 89, 0.3);
  --tm-on-gold: #0b0f19;

  --tm-card-light: #ffffff;
  --tm-card-light-border: #e2e8f0;
  --tm-card-dark: #101828;
  --tm-card-dark-border: rgba(197, 160, 89, 0.18);

  --tm-text-primary: #0f172a;
  --tm-text-secondary: #475569;
  --tm-text-muted: #64748b;
  --tm-text-light: #f8fafc;
  --tm-text-on-dark-soft: #b6c0d0;
  --tm-text-on-dark-muted: #7d8798;

  --tm-green: #10b981;
  --tm-amber: #f59e0b;
  --tm-blue: #3b82f6;
  --tm-red: #ef4444;

  --tm-radius-sm: 8px;
  --tm-radius-md: 10px;
  --tm-radius-lg: 16px;
  --tm-radius-pill: 999px;

  --tm-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--tm-font-sans);
  background: var(--tm-bg-base);
  color: var(--tm-text-light);
}

img {
  max-width: 100%;
}

::selection {
  background: rgba(197, 160, 89, 0.35);
}

:focus-visible {
  outline: 2px solid var(--tm-gold);
  outline-offset: 2px;
}

/*
 * Switching dark / light mode (theme/colorMode.jsx).
 *
 * The browser photographs the page before and after the swap. Turning off the
 * default cross-fade and stacking the new photograph on top lets colorMode.jsx
 * clip it to a circle that opens from the toggle button, so the new theme washes
 * over the old one instead of both fading at once.
 */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) {
  z-index: 0;
}
::view-transition-new(root) {
  z-index: 1;
}

/*
 * Fallback for browsers without view transitions: colorMode.jsx puts this class
 * on <html> for the length of the switch so the colours fade instead of jumping.
 * It is removed straight after, so normal hovers and scrolling keep their own timing.
 */
.tm-theming,
.tm-theming *,
.tm-theming *::before,
.tm-theming *::after {
  transition:
    background-color 350ms ease,
    border-color 350ms ease,
    color 350ms ease,
    fill 350ms ease,
    box-shadow 350ms ease !important;
}

/* Thin, on-brand scrollbars inside panels */
.tm-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.tm-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 999px;
}

/* A page laid out for paper (the Reports sheet, the reservations list) waits off screen, at the A4
   content width that utils/savePdf.js lays a PDF out at, until it is printed or saved as a PDF:
   680 px for a portrait page, 1009 px for a landscape one (tm-print-landscape) */
.tm-print-sheet {
  position: fixed;
  top: 0;
  left: -10000px;
  width: 680px;
  pointer-events: none;
}
.tm-print-sheet.tm-print-landscape {
  width: 1009px;
}

/* A landscape sheet prints on landscape A4 pages */
@page tm-landscape {
  size: A4 landscape;
}

/* Printing a document dialog or a print sheet prints only that; printing a page drops the portal chrome */
@media print {
  main {
    padding: 0 !important;
  }

  body {
    background: #fff !important;
  }
  body:has(.tm-print-root) > *:not(.tm-print-root) {
    display: none !important;
  }
  .tm-print-root {
    position: static !important;
  }
  .tm-print-sheet {
    width: auto !important;
  }
  .tm-print-landscape {
    page: tm-landscape;
  }
  /* Print the colours a document or sheet is drawn with: the report's chart bars, shaded table heads and
     figure boxes, the receipt's box. Browsers leave background colours out of a printout unless the
     print window's "Background graphics" is ticked; this keeps them in, as Save PDF does */
  .tm-print-root,
  .tm-print-root * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .tm-print-root .MuiBackdrop-root,
  .tm-no-print {
    display: none !important;
  }
  .tm-print-root .MuiDialog-container {
    display: block !important;
    height: auto !important;
  }
  /* The height and overflow lines matter on phones, where the dialog is full-screen and scrolls
     inside itself: without them only the first screenful of the document would print */
  .tm-print-root .MuiDialog-paper {
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* The * rule above does not reach the view-transition pseudo-elements */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}