/* Copied from the Spera (src/app/globals.css) by scripts/copy_spera_css.py; do not edit here. Copied as is. */

/*
 * MIQ design system: tokens, base elements and the few shared patterns. Components keep their own CSS modules.
 * The neutrals are MIQ's; the three colors are Espaço Zaya's (petróleo, tangerina, sol), since 20/10/2026.
 */

:root {
  --moonlight: #f0eeeb;
  --polar: #ccd5da;
  --petroleo: #06373a;
  --tangerina: #ff7a3d;
  --sol: #fbb83b;
  --neverything: #13181b;

  --surface: var(--moonlight);
  --surface-raised: #f8f7f5;
  --surface-muted: var(--polar);
  --ink: var(--neverything);
  --ink-muted: #4f5b64;
  --line: var(--polar);
  --control-border: #4f5b64;
  --brand: var(--petroleo);
  --on-brand: var(--moonlight);
  --accent: var(--tangerina);
  --on-accent: var(--neverything);
  --signal: var(--sol);
  --link: var(--petroleo);
  --focus: var(--petroleo);
  /* Brasa: reserved for each screen's main action. */
  --brasa: linear-gradient(135deg, var(--tangerina) 0%, var(--sol) 100%);
  /* Sunset: the palette's gradient, only in thin strokes (rules, rings) and as the glow at the foot of the navigation. */
  --sunset: linear-gradient(180deg, var(--petroleo) 0%, var(--tangerina) 62%, var(--sol) 100%);
  --sunset-h: linear-gradient(90deg, var(--petroleo) 0%, var(--tangerina) 58%, var(--sol) 100%);
  --nav-glow:
    radial-gradient(130% 50% at 55% 108%, rgb(255 122 61 / 0.42) 0%, rgb(251 184 59 / 0.22) 40%, transparent 74%),
    radial-gradient(85% 38% at -5% 104%, rgb(6 55 58 / 0.26) 0%, transparent 70%);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-10: 40px;
  --space-16: 64px;

  --font-display: var(--font-sora), "Inter", system-ui, sans-serif;
  --font-sans: var(--font-inter), system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: var(--font-jetbrains), ui-monospace, "SF Mono", Menlo, monospace;

  /* Light unless the person chose the dark theme on this device (see src/platform/theme.ts). */
  color-scheme: light;
}

/*
 * Dark theme: the same palette on the darkest ink. Only the roles change; anything painted with a role
 * (surface, ink, line, brand, link) follows, and the filled chips keep their own pair of colours.
 */
:root[data-theme="dark"] {
  --surface: var(--neverything);
  --surface-raised: #1c2327;
  --surface-muted: #2c373d;
  --ink: var(--moonlight);
  --ink-muted: #9aa7af;
  --line: #2b353b;
  --control-border: #7f8c94;
  /* Petróleo itself all but disappears on a dark surface: fills take a lighter step of the same green-blue. */
  --brand: #12595d;
  --link: #9ad3cb;
  --focus: var(--sol);
  --nav-glow:
    radial-gradient(130% 50% at 55% 108%, rgb(255 122 61 / 0.3) 0%, rgb(251 184 59 / 0.1) 40%, transparent 74%),
    radial-gradient(85% 38% at -5% 104%, rgb(18 89 93 / 0.38) 0%, transparent 70%);

  color-scheme: dark;
}

/* Planning status colors, shared by the calendar, the kanban and badges. */
[data-status] {
  --status-bg: var(--surface-raised);
  --status-fg: var(--ink);
  --status-border: 1px solid var(--control-border);
}
[data-status="confirmado"] { --status-bg: var(--polar); --status-fg: var(--petroleo); --status-border: 1px solid var(--polar); }
/* A light color of its own, asked for by the clinic: clearly apart from the grey of "confirmado" and the solid petróleo of "atendido". */
[data-status="compareceu"] { --status-bg: #c5e6d1; --status-fg: var(--petroleo); --status-border: 1px solid #c5e6d1; }
[data-status="nao_compareceu"] { --status-bg: transparent; --status-fg: var(--ink); --status-border: 2px dashed var(--tangerina); }
[data-status="atendido"] { --status-bg: var(--brand); --status-fg: var(--on-brand); --status-border: 1px solid var(--brand); }
[data-status="virou_paciente"] { --status-bg: var(--tangerina); --status-fg: var(--neverything); --status-border: 1px solid var(--tangerina); }
[data-status="reagendar"] { --status-bg: var(--sol); --status-fg: var(--neverything); --status-border: 2px solid var(--neverything); }
[data-status="reagendado"] { --status-bg: var(--surface-raised); --status-fg: var(--ink-muted); --status-border: 1px dashed var(--ink-muted); }
[data-status="cancelou"] { --status-bg: transparent; --status-fg: var(--ink-muted); --status-border: 1px solid var(--line); }
[data-status="nao_quer_remarcar"] { --status-bg: var(--ink); --status-fg: var(--surface); --status-border: 1px solid var(--ink); }

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
}

h1 {
  font-size: 28px;
  line-height: 34px;
  font-weight: 300;
  letter-spacing: -0.03em;
}

@media (min-width: 860px) {
  h1 {
    font-size: 48px;
    line-height: 52px;
  }
}

h2 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}

p {
  margin: 0;
}

a {
  color: var(--link);
}

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

/* Text helpers */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.muted {
  color: var(--ink-muted);
}
.small {
  font-size: 14px;
  line-height: 20px;
}
.mono {
  font-family: var(--font-mono);
  font-size: 14px;
}
.number {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Form controls */
.control {
  width: 100%;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
textarea.control {
  min-height: 160px;
  line-height: 24px;
  resize: vertical;
}
.control[aria-invalid="true"] {
  border: 2px solid var(--tangerina);
}
input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--brand);
}

/* Data tables */
.table-scroll {
  overflow-x: auto;
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 20px;
}
table.data th {
  padding: 10px 8px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
/* On a phone a table scrolls sideways inside its card; cells stay on one line so rows keep their height. */
table.data td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  white-space: nowrap;
}

@media (min-width: 860px) {
  table.data td {
    white-space: normal;
  }
}
table.data .num {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 13px;
  white-space: nowrap;
}

/*
 * A table marked "stack" reads as a list of cards on a phone: each row is a small grid and each cell carries
 * the name of its column (data-label). "wide" makes a cell take the whole row; "pair" lays the cells two by two,
 * for rows of inputs. From tablet width up it is a table again.
 */
table.data.stack,
table.data.stack tbody {
  display: block;
}
table.data.stack thead {
  display: none;
}
table.data.stack tr {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
table.data.stack.pair tr {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
table.data.stack td {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 0;
  border: 0;
  white-space: normal;
  text-align: left;
  overflow-wrap: anywhere;
}
table.data.stack td.wide {
  grid-column: 1 / -1;
}
table.data.stack td[data-label]::before {
  content: attr(data-label);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
@media (min-width: 860px) {
  table.data.stack {
    display: table;
  }
  table.data.stack thead {
    display: table-header-group;
  }
  table.data.stack tbody {
    display: table-row-group;
  }
  table.data.stack tr,
  table.data.stack.pair tr {
    display: table-row;
    padding: 0;
    border-bottom: 0;
  }
  table.data.stack td {
    display: table-cell;
    padding: 12px 8px;
    border-bottom: 1px solid var(--line);
    overflow-wrap: normal;
  }
  table.data.stack td[data-label]::before {
    content: none;
  }
  table.data.stack td.num {
    text-align: right;
  }
}

/* Full-page message outside the app shell: app/not-found.tsx and app/global-error.tsx. */
.standalone-message {
  max-width: 560px;
  margin: 15vh auto 0;
  padding: 0 var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
/* global-error.tsx renders without the app's components, so it carries its own button. */
.global-error-button {
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--brasa);
  color: var(--neverything);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}