/*
  Quinta da Baroneza — visual skin override for the Daumzap/Whaticket build.
  Applied on top of the compiled bundle (no source available in this checkout —
  see ONBOARDING notes). Targets MUI's stable `Mui*` class names, which stay
  the same across @material-ui/core v4 and @mui/material v5.
  ponytail: overriding compiled CSS-in-JS output needs !important almost
  everywhere since JSS injects its own <style> tags at runtime, after this
  file loads, with equal or higher specificity. Upgrade path: once the real
  frontend source is available, move these rules into the MUI theme
  (createTheme palette/typography/shape/shadows) and delete this file.
*/

@font-face {
  font-family: "Mansory";
  src: url("/fonts/mansory-regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Mansory";
  src: url("/fonts/mansory-bold.otf") format("opentype");
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: "Apparat";
  src: url("/fonts/apparat-regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Apparat";
  src: url("/fonts/apparat-bold.otf") format("opentype");
  font-weight: 600 700;
  font-display: swap;
}

:root {
  --qb-green-600: #003713;
  --qb-green-500: #004518;
  --qb-green-400: #336A46;
  --qb-green-100: #CCDAD1;

  --qb-neutral-100: #FCFBF9;
  --qb-neutral-200: #F9F6F3;
  --qb-neutral-300: #F6F2EC;
  --qb-neutral-400: #F3EDE6;
  --qb-neutral-500: #F0E9E0;
  --qb-neutral-600: #C0BAB3;
  --qb-neutral-700: #908C86;
  --qb-neutral-800: #605D5A;
  --qb-neutral-900: #302F2D;

  --qb-success: #458C64;
  --qb-alert: #EA821B;
  --qb-error: #FF383C;

  --qb-font-display: "Mansory", "Playfair Display", Georgia, serif;
  --qb-font-body: "Apparat", "Roboto", system-ui, -apple-system, sans-serif;

  --qb-radius-card: 16px;
  --qb-radius-input: 12px;
  --qb-radius-chip: 8px;
  --qb-radius-pill: 999px;

  --qb-shadow-sm: 0 1px 2px rgba(48, 47, 45, 0.08);
  --qb-shadow-card: 0 4px 16px rgba(48, 47, 45, 0.12);
  --qb-shadow-raised: 0 6px 20px rgba(0, 69, 24, 0.28);
}

/* ponytail: no forced text `color` here on purpose — same reasoning as the
   Card background rule below. The app already computes a correct per-theme
   text color in JS (dark text on light mode, light text on dark mode).
   Forcing neutral-900 (near-black) unconditionally used to win over that via
   !important on every page except Login, pairing dark-mode's light card
   background with dark-mode-forced dark text and making numbers/labels on
   the Dashboard (and anywhere else using h1-h6 variants) unreadable. */
html, body {
  background-color: var(--qb-neutral-200) !important;
  font-family: var(--qb-font-body) !important;
}

body, .MuiTypography-root, .MuiButton-root, .MuiInputBase-root, .MuiMenuItem-root,
.MuiTab-root, .MuiChip-root, .MuiTableCell-root, .MuiListItemText-primary,
.MuiListItemText-secondary, input, textarea {
  font-family: var(--qb-font-body) !important;
}

.MuiTypography-h1, .MuiTypography-h2, .MuiTypography-h3,
.MuiTypography-h4, .MuiTypography-h5, .MuiTypography-h6 {
  font-family: var(--qb-font-display) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
}

/* Top app bar */
.MuiAppBar-root {
  background-color: var(--qb-green-500) !important;
  background-image: none !important;
  box-shadow: var(--qb-shadow-sm) !important;
  color: var(--qb-neutral-100) !important;
}
.MuiAppBar-root .MuiIconButton-root,
.MuiAppBar-root .MuiTypography-root {
  color: var(--qb-neutral-100) !important;
}

/* Side drawer / navigation */
.MuiDrawer-paper {
  border-right: 1px solid var(--qb-neutral-500) !important;
}
.MuiDrawer-paper .MuiListItem-root.Mui-selected,
.MuiDrawer-paper .MuiListItem-button.Mui-selected {
  background-color: var(--qb-green-100) !important;
}
.MuiDrawer-paper .MuiListItem-root.Mui-selected .MuiListItemIcon-root,
.MuiDrawer-paper .MuiListItem-root.Mui-selected .MuiListItemText-primary {
  color: var(--qb-green-500) !important;
}

/* Buttons — the pill is the signature brand shape */
.MuiButton-root {
  border-radius: var(--qb-radius-pill) !important;
  text-transform: none !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.MuiButton-containedPrimary {
  background-color: var(--qb-green-500) !important;
  color: var(--qb-neutral-100) !important;
}
.MuiButton-containedPrimary:hover {
  background-color: var(--qb-green-600) !important;
}
.MuiButton-outlinedPrimary {
  border-color: var(--qb-green-500) !important;
  color: var(--qb-green-500) !important;
}
.MuiButton-textPrimary {
  color: var(--qb-green-500) !important;
}
.MuiFab-primary {
  background-color: var(--qb-green-500) !important;
  box-shadow: var(--qb-shadow-raised) !important;
}
.MuiFab-primary:hover {
  background-color: var(--qb-green-600) !important;
}

/* Cards / raised surfaces */
/* ponytail: no background-color here on purpose — the app already computes
   a correct per-theme Paper background in JS (light "#fff" / dark
   "rgba(30, 41, 59, 0.9)"). Forcing a light color here with !important used
   to beat that and paired dark-mode white text with a near-white card,
   making it unreadable. Ceiling: any Card/Paper that DOESN'T set its own
   background in JS now falls back to MUI's stock theme.palette.background.paper
   instead of the branded cream tone — acceptable, but revisit if a future
   report says a specific plain Paper looks "off-brand" in light mode. */
.MuiCard-root, .MuiPaper-rounded {
  border-radius: var(--qb-radius-card) !important;
  box-shadow: var(--qb-shadow-card) !important;
}
.MuiPaper-elevation1, .MuiPaper-elevation2, .MuiPaper-elevation3 {
  box-shadow: var(--qb-shadow-sm) !important;
}

/* Inputs */
.MuiOutlinedInput-root {
  border-radius: var(--qb-radius-input) !important;
}
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--qb-green-500) !important;
}
.MuiInputLabel-root.Mui-focused {
  color: var(--qb-green-500) !important;
}
/* Login screen: fixed brand look, always light, regardless of the app's
   own dark/light toggle. index.html stamps <html data-qb-page="login">
   for the /login route via an inline script read at load time.
   ponytail: green-500 is a near-black green, picked for a light card —
   forcing it while the JS-computed Paper/text colors were still following
   the dark toggle made the focused label and "Redefinir senha" unreadable.
   Fix: pin the whole login card to the light palette instead of trying to
   track the toggle. Ceiling: a client-side route change to /login without
   a full reload won't get this attribute — not a real path here since
   /login is always reached via full navigation (expired session, direct
   visit, logout redirect). */
html[data-qb-page="login"] .MuiCard-root,
html[data-qb-page="login"] .MuiPaper-rounded {
  background-color: var(--qb-neutral-100) !important;
  color: var(--qb-neutral-900) !important;
}
html[data-qb-page="login"] .MuiTypography-root,
html[data-qb-page="login"] .MuiInputBase-input,
html[data-qb-page="login"] .MuiInputLabel-root,
html[data-qb-page="login"] .MuiIconButton-root {
  color: var(--qb-neutral-900) !important;
}
html[data-qb-page="login"] .MuiOutlinedInput-notchedOutline {
  border-color: var(--qb-neutral-600) !important;
}
html[data-qb-page="login"] .MuiInputLabel-root.Mui-focused,
html[data-qb-page="login"] .MuiButton-textPrimary,
html[data-qb-page="login"] .MuiLink-root,
html[data-qb-page="login"] .MuiTypography-colorPrimary {
  color: var(--qb-green-500) !important;
}

/* Chips / tags */
.MuiChip-root {
  border-radius: var(--qb-radius-chip) !important;
}
.MuiChip-colorPrimary {
  background-color: var(--qb-green-100) !important;
  color: var(--qb-green-600) !important;
}

/* Switches */
.MuiSwitch-colorPrimary.Mui-checked {
  color: var(--qb-green-500) !important;
}
.MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track {
  background-color: var(--qb-green-400) !important;
}

/* Tabs */
.MuiTab-root.Mui-selected {
  color: var(--qb-green-500) !important;
}
.MuiTabs-indicator {
  background-color: var(--qb-green-500) !important;
}
/* ponytail: some tab bars (e.g. Dashboard's pill tabs) already paint their
   own selected background + white text via inline component styles. The
   blanket rule above forces green text on top of that green background,
   making it invisible. Default (inherit) textColor tabs win back their own
   white text here; ceiling: if another inherit-textColor tab bar exists
   without its own background, its selected text goes white too — watch for
   that if a new invisible-tab report shows up elsewhere. */
.MuiTab-textColorInherit.Mui-selected {
  color: #fff !important;
}

/* Links */
a {
  color: var(--qb-green-500);
}

/* Scrollbars, warm neutral instead of default gray */
::-webkit-scrollbar-thumb {
  background-color: var(--qb-neutral-600) !important;
}