/**
 * ClyoNutri — Tokens do Design System (Clinical Botanical é a paleta oficial)
 * Versão 2.0.0 (NI2-25)
 *
 * Fonte única dos tokens da web. A referência escrita está em
 * docs/design-system/tokens.md e o espelho do app em
 * mobile/src/theme/clinicalBotanical.ts — mudou aqui, muda lá
 * (tests/ni2_25_design_tokens_test.php confere os três).
 */

:root {
  /* Paleta oficial: Clinical Botanical (NI2-25). Forest e Clyo Green são a marca,
     Sage e Cream são superfícies, cobre é só acento e verde-azulado (teal) é o sucesso. */
  --botanical-forest-950: #0A2A10; /* borda/fundo mais fundo do menu e do rodapé */
  --botanical-forest-900: #0F3E17; /* Forest: menu, títulos, superfícies escuras */
  --botanical-forest-800: #1B5226; /* Forest → Clyo Green (degradê, hover em superfície escura) */
  --botanical-green-700: #2F6140;  /* hover do botão primário */
  --botanical-green-600: #39734A;  /* Clyo Green: ação primária (branco sobre ele: 5,64:1) */
  --botanical-sage-300: #BFD8C2;
  --botanical-sage-200: #D3E5D5;   /* texto secundário no menu Forest e bordas suaves */
  --botanical-sage-100: #E5F0E5;
  --botanical-cream-50: #FAF9F4;   /* fundo de página */
  --botanical-copper-400: #F4A06A; /* hover do cobre 500 sobre Forest (5,86:1) */
  --botanical-copper-500: #EF8F4F; /* acento sobre Forest (5,06:1) e detalhes decorativos */
  --botanical-copper-600: #B04A1B; /* acento sobre claro: links, eyebrow, ênfase (5,19:1 no Cream) */
  --botanical-copper-700: #8F3D14; /* hover do botão de destaque */
  --botanical-copper-100: #FBEADF; /* fundo de selo de destaque */

  /* Nomes legados do DS Premium (PX-21): DEPRECADOS. Continuam existindo para não
     quebrar as telas que ainda usam var(--brand-*), mas apontam para a paleta Botanical.
     Código novo usa --botanical-*. Valores antigos (Navy/Cobre) em docs/design-system/tokens.md. */
  --brand-navy-900: var(--botanical-forest-900);
  --brand-navy-reference: var(--botanical-forest-900);
  --brand-copper-500: var(--botanical-copper-500);
  --brand-copper-600: var(--botanical-copper-600);
  --brand-copper-reference: var(--botanical-copper-500);
  --brand-green-500: var(--botanical-green-600);
  --brand-green-200: var(--botanical-sage-300);

  /* Neutral Tokens */
  --neutral-warm-50: var(--botanical-cream-50); /* legado: o fundo quente agora é o Cream */
  --neutral-white: #FFFFFF;
  --neutral-gray-100: #F4F5F6;
  --neutral-gray-200: #E5E7EB;
  --neutral-gray-300: #D1D5DB;
  --neutral-gray-500: #667085;
  --neutral-ink-900: #1F2937;

  /* Semantic Tokens */
  --semantic-success: #0A7075; /* teal: distinto do Clyo Green, para "deu certo" não se confundir com a marca */
  --semantic-success-light: #E3F4F2;
  --semantic-success-text: #0A5F63; /* texto de selo/alerta sobre o fundo claro (6,53:1) */
  --semantic-success-on-dark: #4FC3B8; /* sucesso sobre Forest (5,71:1); o teal 700 some ali (2,08:1) */
  --semantic-warning: #946200;
  --semantic-warning-light: #FEF3C7;
  --semantic-error: #B42318;
  --semantic-error-light: #FEE2E2;
  --semantic-info: #175CD3;
  --semantic-info-light: #EFF6FF;

  /* Typography */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-editorial: 'Playfair Display', Georgia, serif;

  /* Component Dimensions & Radii */
  --radius-input: 8px;
  --radius-button: 10px;
  --radius-card: 12px;
  --radius-modal: 16px;
  --radius-pill: 9999px;

  --border-default: 1px solid var(--neutral-gray-200);
  --border-input: #828B9B; /* WCAG 1.4.11: >= 3:1 sobre branco (3,43), fundo da página #F4F5F6 (3,15) e #F8FAFC (3,28) */

  /* Spacing Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Shadows (Discretas) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  /* Superfícies derivadas (tintas translúcidas dos tokens de marca — substituem rgba() hardcoded) */
  --surface-copper-tint: color-mix(in srgb, var(--botanical-copper-500) 8%, transparent);
  --surface-navy-tint: color-mix(in srgb, var(--botanical-forest-900) 5%, transparent); /* legado: tinta Forest */
  --border-copper-soft: color-mix(in srgb, var(--botanical-copper-500) 35%, transparent);
  --surface-subtle: var(--neutral-gray-100);
  --text-on-dark-muted: color-mix(in srgb, var(--neutral-white) 72%, var(--botanical-forest-900));
  --touch-target-min: 44px;

  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.2);

  /* Espaçamento grande (seções e landing) */
  --space-20: 80px;
  --space-24: 96px;

  /* Escala tipográfica (valores já usados na interface, agora nomeados) */
  --font-size-caption: 0.75rem;   /* 12px */
  --font-size-compact: 0.875rem;  /* 14px */
  --font-size-body: 1rem;         /* 16px */
  --font-size-card-title: 1.125rem; /* 18px */
  --font-size-h3: 1.25rem;        /* 20px */
  --font-size-h2: 1.5rem;         /* 24px */
  --font-size-h1: 2rem;           /* 32px */
  --font-size-display: 2.5rem;    /* 40px — títulos de landing no celular */
  --font-size-hero: 4rem;         /* 64px — hero da landing no desktop */

  --line-height-tight: 1.25;
  --line-height-body: 1.55;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/* Base Reset & Typography */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--neutral-ink-900);
  background-color: var(--neutral-gray-100);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--botanical-forest-900);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

p { margin-bottom: var(--space-3); }

/* Accessible Focus States */
:focus-visible {
  outline: 3px solid var(--botanical-copper-600);
  outline-offset: 2px;
}

/* No menu lateral (fundo Forest) o cobre 600 dá só 2,23:1; o cobre 500 claro dá 5,06:1. */
.app-sidebar :focus-visible {
  outline-color: var(--botanical-copper-500);
}

/* Layout Shell */
.app-container {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  width: 256px;
  background-color: var(--botanical-forest-900);
  color: var(--neutral-white);
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-4);
  flex-shrink: 0;
}

.app-sidebar__logo {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--neutral-white);
  padding: 0 var(--space-2);
  margin-bottom: var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.app-sidebar__logo img {
  display: block;
  width: 100%;
  max-width: 208px;
  height: auto;
  aspect-ratio: 260 / 64;
  object-fit: contain;
  object-position: left center;
}

.app-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex-grow: 1;
}

.app-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  color: var(--botanical-sage-200); /* 9,26:1 sobre Forest */
  text-decoration: none;
  font-size: 0.925rem;
  font-weight: 500;
  border-radius: var(--radius-input);
  transition: all 150ms ease;
}

.app-nav__item:hover {
  background-color: color-mix(in srgb, var(--botanical-sage-100) 10%, transparent);
  color: var(--neutral-white);
}

.app-nav__item.active {
  background-color: color-mix(in srgb, var(--botanical-sage-100) 16%, transparent);
  color: var(--neutral-white);
  font-weight: 600;
}

.app-main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-header {
  height: 64px;
  background-color: var(--neutral-white);
  border-bottom: var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-8);
}

.app-header__tenant {
  font-weight: 600;
  color: var(--botanical-forest-900);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.app-header__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.9rem;
  color: var(--neutral-gray-500);
}

.app-content {
  padding: var(--space-8);
  flex-grow: 1;
  max-width: 1440px;
  width: 100%;
}

/* UI Components */
.card {
  background-color: var(--neutral-white);
  border: var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-6);
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-default);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-5);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-button);
  cursor: pointer;
  text-decoration: none;
  transition: all 150ms ease;
  border: 1px solid transparent;
}

.btn-primary {
  background-color: var(--botanical-green-600);
  color: var(--neutral-white);
}

.btn-primary:hover {
  background-color: var(--botanical-green-700);
}

/* Em superfície Forest o Clyo Green some (2,16:1): o botão vira cobre claro com texto Forest (5,06:1). */
.app-sidebar .btn-primary,
.on-forest .btn-primary {
  background-color: var(--botanical-copper-500);
  color: var(--botanical-forest-900);
}

.app-sidebar .btn-primary:hover,
.on-forest .btn-primary:hover {
  background-color: var(--botanical-copper-400);
}

.btn-accent {
  background-color: var(--botanical-copper-600);
  color: var(--neutral-white);
}

.btn-accent:hover {
  background-color: var(--botanical-copper-700);
}

.btn-secondary {
  background-color: var(--neutral-white);
  color: var(--botanical-forest-900);
  border-color: var(--neutral-gray-300);
}

.btn-secondary:hover {
  background-color: var(--neutral-gray-100);
}

.btn-danger {
  background-color: var(--semantic-error);
  color: var(--neutral-white);
}

.btn-danger:hover {
  background-color: #991B1B;
}

.btn-outline {
  background-color: transparent;
  color: var(--botanical-forest-900);
  border: 1px solid var(--neutral-gray-300);
}

.btn-outline:hover {
  background-color: var(--neutral-gray-100);
  border-color: var(--botanical-forest-900);
  color: var(--botanical-forest-900);
}

/* Inputs & Form Groups */
.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--botanical-forest-900);
  margin-bottom: var(--space-2);
}

.form-control,
input.form-control,
select.form-control,
textarea.form-control {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  font-family: inherit;
  font-size: 0.95rem;
  border: 1px solid var(--border-input, #828B9B);
  border-radius: var(--radius-input);
  background-color: var(--neutral-white);
  color: var(--neutral-ink-900);
}

.form-control:focus,
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
  border-color: var(--botanical-forest-900);
  outline: 2px solid var(--botanical-forest-900);
  outline-offset: 1px;
}

textarea.form-control {
  padding: var(--space-3);
  min-height: 100px;
}

/* ==========================================================================
   Acessibilidade WCAG 2.2: Alvos de toque (2.5.8) e Skip Link (2.4.1)
   ========================================================================== */
.tap-target {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

@media (pointer: coarse), (max-width: 768px) {
  .tap-target {
    min-width: var(--touch-target-min, 44px);
    min-height: var(--touch-target-min, 44px);
  }
}

input[type="checkbox"],
input[type="radio"] {
  min-width: 20px;
  min-height: 20px;
  cursor: pointer;
}

.skip-link,
.skip-clinical-content,
.skip-admin-content {
  position: absolute;
  top: -9999px;
  left: 1rem;
  z-index: 9999;
  background: var(--botanical-copper-600, #B04A1B);
  color: var(--neutral-white, #FFFFFF);
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-input, 8px);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: top 0.15s ease-in-out;
}

.skip-link:focus,
.skip-link:focus-visible,
.skip-clinical-content:focus,
.skip-clinical-content:focus-visible,
.skip-admin-content:focus,
.skip-admin-content:focus-visible {
  top: 1rem;
  outline: 3px solid var(--botanical-forest-900, #0F3E17); /* 2,4:1 com copper-500; forest-900 >= 11:1 sobre o fundo */
  outline-offset: 2px;
}

/* Tables */
.table-responsive {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.table th, .table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-default);
}

.table th {
  background-color: var(--neutral-gray-100);
  color: var(--neutral-gray-500);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.table tr:hover td {
  background-color: #F8FAFC;
}

/* Badges & Pills */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 0.775rem;
  font-weight: 600;
}

.badge-success { background-color: var(--semantic-success-light); color: var(--semantic-success); }
.badge-warning { background-color: var(--semantic-warning-light); color: var(--semantic-warning); }
.badge-error,
.badge-danger { background-color: var(--semantic-error-light); color: var(--semantic-error); }
/* "Info" em selo é rótulo neutro (BMI, sugerido, plano): Sage com texto Forest (10,4:1). O azul --semantic-info fica para alertas de informação. */
.badge-info { background-color: var(--botanical-sage-100); color: var(--botanical-forest-900); }

/* Tabular Numbers */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Modal Dialog (Design System Premium) */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: color-mix(in srgb, var(--botanical-forest-950) 55%, transparent);
  backdrop-filter: blur(4px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal-overlay.active {
  display: flex;
}

.modal-dialog {
  background: var(--neutral-white);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-lg);
  border: var(--border-default);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-default);
}

.modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--botanical-forest-900);
}

.modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--neutral-gray-500);
  padding: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-button);
}

.modal-close:hover {
  color: var(--neutral-ink-900);
  background-color: var(--neutral-gray-100);
}

.modal-body {
  padding: var(--space-6);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  background-color: var(--neutral-warm-50);
  border-top: var(--border-default);
  border-bottom-left-radius: var(--radius-modal);
  border-bottom-right-radius: var(--radius-modal);
}

/* ==========================================================================
   Responsividade Multi-Dispositivo (NI2-187 / NI2-83)
   Breakpoints: 390px (Mobile), 768px (Tablet), 1280px (Laptop), 1440px (Desktop)
   ========================================================================== */

/* 1440px+ (Desktop Amplo) */
@media (min-width: 1440px) {
  .app-main {
    max-width: 1600px;
  }
}

/* 1280px a 1439px (Laptop Padrão) */
@media (min-width: 1280px) and (max-width: 1439px) {
  .app-sidebar {
    width: 256px;
  }
}

/* <= 768px (Tablet / Mobile Amplo) */
@media (max-width: 768px) {
  .app-container {
    flex-direction: column;
  }
  .app-sidebar {
    width: 100%;
    padding: var(--space-4);
  }
  .app-sidebar__logo {
    margin-bottom: var(--space-3);
  }
  .app-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .app-nav__item {
    padding: var(--space-2) var(--space-3);
    font-size: 0.85rem;
  }
  .app-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }
  .app-content {
    padding: var(--space-4);
  }
  .consultation-room-layout {
    grid-template-columns: 1fr !important;
  }
}

/* <= 390px (Mobile Compacto / iPhone 12/13/14/15) */
@media (max-width: 390px) {
  .app-sidebar {
    padding: var(--space-3);
  }
  .app-nav {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .app-nav__item {
    flex: 0 0 auto;
    font-size: 0.75rem;
    padding: 6px 10px;
  }
  .app-content {
    padding: var(--space-3);
  }
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .btn {
    min-height: 44px; /* WCAG 2.5.5 Target Size */
  }
  .agenda-controls-layout {
    flex-direction: column;
    align-items: stretch !important;
  }
}

/* Acessibilidade WCAG 2.1 — Oculto visualmente, perceptível para leitores de tela */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Food search and portion dialogs */
[hidden] { display: none !important; }
.food-dialog-overlay { padding: 16px; }
.food-dialog-panel { background: #fff; border-radius: 16px; width: 100%; max-width: 640px; padding: 24px; max-height: calc(100dvh - 32px); overflow-y: auto; box-shadow: var(--shadow-modal); }
.food-search-results { display: grid; gap: 6px; max-height: 220px; overflow-y: auto; margin: 12px 0; }
.food-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 12px; border: 1px solid var(--neutral-gray-300, #cbd5e1); border-radius: 8px; background: #fff; cursor: pointer; color: var(--botanical-forest-900); }
.food-result span { font-size: .8rem; color: var(--neutral-gray-500); flex-shrink: 0; }
.food-result:hover, .food-result[aria-pressed="true"] { background: var(--botanical-sage-100); border-color: var(--botanical-forest-900); }
.food-result:focus-visible { outline: 2px solid var(--botanical-copper-600); outline-offset: 2px; }
.food-selection { padding: 10px 12px; background: var(--semantic-success-light); border-radius: 8px; color: var(--semantic-success-text); font-weight: 600; }
[data-food-picker] [role="status"] { font-size: .85rem; color: var(--neutral-gray-500); margin-top: 8px; }
@media (max-width: 480px) { .food-dialog-panel { padding: 18px; } .food-result { align-items: flex-start; flex-direction: column; gap: 4px; } }

/* ==========================================================================
   Utilitários e componentes do Dashboard (correções da revisão do /dashboard)
   ========================================================================== */
.text-right { text-align: right; }
.icon-inline { flex-shrink: 0; vertical-align: middle; }
.icon-success { color: var(--semantic-success); }
.badge-neutral { background: var(--neutral-gray-100); color: var(--neutral-gray-500); border: 1px solid var(--neutral-gray-300); }
.btn-touch { min-height: var(--touch-target-min); padding: 0 var(--space-4); font-size: 0.85rem; }
.btn-touch--compact { padding: 0 var(--space-3); font-size: 0.8rem; }
.section-title { font-size: 1.25rem; } /* h2 semântico com o tamanho visual anterior do h3 */

.app-sidebar__version { font-size: 0.8rem; color: var(--text-on-dark-muted); margin-top: auto; display: flex; align-items: center; gap: 6px; }
.app-sidebar__status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: var(--semantic-success-on-dark); }
.logout-form { display: inline-flex; margin: 0 0 0 1rem; }
.app-header__logout { display: inline-flex; align-items: center; gap: 4px; min-height: var(--touch-target-min); padding: 0 var(--space-2); background: none; border: 0; color: var(--semantic-error); font: inherit; font-size: 0.85rem; cursor: pointer; }
.app-header__logout:hover { text-decoration: underline; }
.logout-confirm { max-width: 420px; margin: var(--space-16) auto; padding: var(--space-8); background: var(--neutral-white); border: var(--border-default); border-radius: var(--radius-card); }
.logout-confirm__title { font-size: 1.5rem; margin-bottom: var(--space-3); }
.logout-confirm__text { color: var(--neutral-gray-500); }

.dashboard-intro { margin-bottom: var(--space-6); }
.dashboard-intro__subtitle { color: var(--neutral-gray-500); }
.dashboard-banner { margin-bottom: var(--space-6); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.dashboard-banner--success { background: var(--semantic-success-light); border: 1px solid var(--semantic-success); color: var(--semantic-success); }
.dashboard-banner--onboarding { background: linear-gradient(135deg, var(--surface-copper-tint) 0%, var(--surface-navy-tint) 100%); border: 1px solid var(--border-copper-soft); justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.dashboard-banner__body { display: flex; align-items: center; gap: var(--space-3); }
.dashboard-banner__step { width: 44px; height: 44px; border-radius: 50%; background: var(--botanical-copper-500); color: var(--botanical-forest-900); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; font-size: 1rem; box-shadow: var(--shadow-sm); }
.dashboard-banner__title { font-weight: 700; color: var(--botanical-forest-900); font-size: 1rem; }
.dashboard-banner--success .dashboard-banner__title, .dashboard-banner--success .dashboard-banner__text { color: var(--semantic-success); }
.dashboard-banner__text { font-size: 0.875rem; color: var(--neutral-gray-500); margin-top: 2px; }
.dashboard-banner__cta { white-space: nowrap; }

.dashboard-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-6); margin-bottom: var(--space-8); }
.metric-card { margin-bottom: 0; }
.metric-card__label { font-size: 0.875rem; color: var(--neutral-gray-500); font-weight: 600; }
.metric-card__value { font-size: 2rem; font-weight: 700; color: var(--botanical-forest-900); margin: var(--space-2) 0; }
.metric-card__value--accent { color: var(--botanical-copper-600); }
.metric-card__note { font-size: 0.75rem; color: var(--neutral-gray-500); margin-top: 6px; }
.metric-card__note a, .metric-card__link { color: var(--botanical-copper-600); font-weight: 600; }
.metric-card__link { display: inline-flex; align-items: center; min-height: var(--touch-target-min); font-size: 0.85rem; }

.attention-panel { margin-bottom: var(--space-8); border-left: 4px solid var(--botanical-copper-500); }
.attention-panel__count { font-size: 0.85rem; color: var(--neutral-gray-500); }
.attention-panel__empty { padding: var(--space-4) 0; color: var(--neutral-gray-500); display: flex; align-items: center; gap: var(--space-2); }
.attention-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-3); }
.attention-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--surface-subtle); border-radius: 6px; border: var(--border-default); flex-wrap: wrap; gap: var(--space-2); }
.attention-item__badge { margin-right: 6px; font-size: 0.75rem; }
.attention-item__description { font-size: 0.875rem; color: var(--neutral-ink-900); font-weight: 500; }
.attention-panel__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); font-size: 0.85rem; color: var(--neutral-gray-500); }

.dashboard-main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-6); }
.dashboard-main-grid > .card { min-width: 0; }
.dashboard-empty { color: var(--neutral-gray-500); padding: var(--space-4) 0; }
.dashboard-table__time { font-weight: 600; }
.dashboard-table__patient { font-weight: 600; color: var(--botanical-forest-900); }
.dashboard-table__patient a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: var(--touch-target-min); }
.quick-actions { display: flex; flex-direction: column; gap: var(--space-3); }
.quick-actions__item { justify-content: flex-start; }

.plan-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.plan-filters__item { display: inline-flex; align-items: center; min-height: var(--touch-target-min); padding: 0 var(--space-4); border-radius: var(--radius-pill); border: var(--border-default); background: var(--neutral-white); color: var(--neutral-ink-900); text-decoration: none; font-size: 0.875rem; }
.plan-filters__item.is-active { background: var(--botanical-forest-900); border-color: var(--botanical-forest-900); color: var(--neutral-white); }
.plan-filters__note { font-size: 0.85rem; color: var(--neutral-gray-500); }

@media (max-width: 768px) {
  .dashboard-main-grid { grid-template-columns: 1fr; }
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .card__header { flex-wrap: wrap; gap: var(--space-2); }
}
@media (max-width: 480px) {
  .dashboard-metrics { grid-template-columns: 1fr; }
  .attention-item .btn-touch { width: 100%; justify-content: center; }
}