/* ============================================================
   Design system compartilhado (extraído do padrão visual criado
   originalmente na listagem de Agendamentos). Usa as variáveis de
   cor globais (--primary, --primary-100, ...) já definidas em
   color_overlap.css / templates/components/color_overlap.html.

   Convenção de prefixo: "ds-" (design system). Novas telas devem
   preferir estas classes a criar variantes locais equivalentes.

   Carregado GLOBALMENTE por base.html, antes do CSS de cada tela. Por isso
   este arquivo só pode conter seletores com prefixo "ds-": uma classe sem
   prefixo aqui afetaria telas legadas que usam o mesmo nome. Regras antigas
   sem prefixo (.chip, .btn-ghost, .modal-elegant) ficam em
   design_system_legacy.css, linkado só nas telas que já o usavam.
   ============================================================ */

/* ---- Header de página (ícone + título + subtítulo) ---- */
.ds-header-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width:42px; height:42px;
  border-radius:12px;
  background: var(--primary-100);
  color: var(--primary);
  font-size: 1.1rem;
  flex: 0 0 auto;
}
.ds-header-title{ font-weight: 900; line-height: 1.1; margin: 0; }
.ds-header-subtitle{ margin-top: 6px; font-size: 14px; color: #6b7280; }

/* ---- Página padrão de módulo (wrapper + cabeçalho + toolbar) ----
   Ver athenas/templates/PAGE_HEADER.md. O wrapper .ds-page define o
   espaçamento único de todas as telas de módulo (listas, criar, editar) e
   deixa botões/campos dentro dela com cantos arredondados, nunca em pílula. */
.ds-page{
  padding: var(--space-8, 32px) var(--space-10, 40px) var(--space-12, 48px);
}
.ds-page-header{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 16px);
  margin-bottom: var(--space-6, 24px);
}
.ds-page-header__main{ min-width: 0; flex: 1 1 320px; }
.ds-page-header__row{ display: flex; align-items: center; gap: var(--space-3, 12px); min-width: 0; }
.ds-page-header .ds-header-title{ font-size: 1.75rem; color: var(--neutral-800, #1f2937); overflow-wrap: anywhere; }
.ds-page-header .ds-header-subtitle{ margin: var(--space-2, 8px) 0 0; }
.ds-page-header__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px); }

.ds-page .ds-btn{ border-radius: var(--radius-lg, 12px); }

/* Toolbar (busca, selects e botões de filtro) logo abaixo do cabeçalho */
.ds-toolbar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-6, 24px);
}
.ds-search{ position: relative; flex: 0 1 320px; min-width: 200px; }
.ds-search > i{
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--neutral-400, #9ca3af); font-size: .85rem; pointer-events: none;
}
.ds-search .ds-input{ padding-left: 2.4rem; }
.ds-select.ds-select--auto{ width: auto; min-width: 180px; }
.ds-icon-btn{
  width: 42px; height: 42px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  background: #fff;
  color: var(--neutral-600, #4b5563);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.ds-icon-btn:hover{ border-color: var(--neutral-400, #9ca3af); background: var(--neutral-50, #f9fafb); color: var(--primary); }
.ds-icon-btn.is-active, .ds-icon-btn[aria-pressed="true"]{ border-color: var(--primary); color: var(--primary); background: var(--primary-100); }

@media (max-width: 767.98px){
  .ds-page{ padding: var(--space-5, 20px) var(--space-4, 16px) var(--space-10, 40px); }
  .ds-page-header{ flex-direction: column; align-items: stretch; }
  .ds-page-header__main{ flex-basis: auto; }
  .ds-page-header .ds-header-title{ font-size: 1.5rem; }
  .ds-page-header__actions > *{ flex: 1 1 auto; }
  .ds-search{ flex: 1 1 100%; }
  .ds-select.ds-select--auto{ flex: 1 1 0; min-width: 0; }
}

/* ---- Cards de seção ---- */
.ds-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:24px;
}
.ds-card-title{
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#9ca3af;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:8px;
}
.ds-card-title i{ color: var(--primary); font-size: 13px; }

/* ---- Botões ----
   Componente oficial de botão (Fase 1 do design system). Renderize via
   {% include 'components/button.html' %} — ver athenas/templates/BUTTON.md.
   Substitui .ds-pill-btn (mantido como alias abaixo só para não quebrar
   a única tela que já usava o nome antigo). */

.ds-btn, .ds-pill-btn{
  height: 42px;
  border: 1px solid var(--neutral-200, #e5e7eb);
  background: #fff;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-family-sans-serif);
  font-size: var(--text-sm, .875rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--primary);
  padding: 0 var(--space-5, 20px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.ds-btn:hover, .ds-pill-btn:hover{
  border-color: var(--neutral-400, #9ca3af);
  background: var(--neutral-50, #f9fafb);
  color: var(--primary);
  text-decoration: none; /* <a class="ds-btn">: vence o a:hover do Bootstrap */
}
.ds-btn:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
.ds-btn:disabled, .ds-btn.is-disabled{ opacity: .5; cursor: not-allowed; pointer-events: none; }

/* tamanhos */
.ds-btn--sm{ height: 34px; padding: 0 var(--space-4, 16px); font-size: var(--text-xs, .75rem); }
.ds-btn--lg{ height: 48px; padding: 0 var(--space-6, 24px); font-size: var(--text-base, 1rem); }

/* variantes */
.ds-btn--primary, .ds-pill-btn--solid{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.ds-btn--primary:hover, .ds-pill-btn--solid:hover{
  filter: brightness(.92);
  background: var(--primary);
  color: #fff;
}

.ds-btn--secondary{ background: #fff; border-color: var(--neutral-200, #e5e7eb); color: var(--primary); }

.ds-btn--ghost{ background: transparent; border-color: transparent; color: var(--neutral-600, #6b7280); }
.ds-btn--ghost:hover{ background: var(--neutral-100, #f3f4f6); border-color: transparent; color: var(--neutral-600, #6b7280); }

.ds-btn--danger{ background: var(--danger, #e74a3b); border-color: var(--danger, #e74a3b); color: #fff; }
.ds-btn--danger:hover{ filter: brightness(.92); background: var(--danger, #e74a3b); color: #fff; }

.ds-btn i{ font-size: .95em; line-height: 1; }

/* ---- Inputs/selects/textarea ----
   Componente oficial de Input (Fase 1). Renderize via
   {% include 'components/input.html' %} — ver athenas/templates/INPUT.md.
   .ds-select ajustado para os tokens da Fase 0 (raio 14px -> --radius-lg,
   foco azul genérico -> tenant via --primary/--primary-100) — mesma
   família visual do .ds-input novo. */
.ds-input, .ds-select{
  height: 42px;
  width: 100%;
  padding: .25rem .9rem;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--neutral-200, #e5e7eb);
  background: #fff;
  font-family: var(--font-family-sans-serif);
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--text-sm, .875rem);
  color: var(--neutral-900, #111827);
  box-shadow: 0 1px 0 rgba(16,24,40,.04);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ds-select{ padding-right: 2.4rem; } /* espaço pra seta nativa do <select> */
.ds-input:focus, .ds-select:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-100, #dbeafe);
}
.ds-input::placeholder{ color: var(--neutral-400, #9ca3af); font-weight: var(--font-weight-regular, 400); }
.ds-input--textarea{ height: auto; min-height: 90px; padding-top: .6rem; resize: vertical; }
.ds-input.is-invalid, .ds-select.is-invalid{ border-color: var(--danger, #e74a3b); }

.ds-input-group{ display: flex; flex-direction: column; gap: 6px; }
.ds-input-label{ font-family: var(--font-family-sans-serif); font-size: var(--text-sm, .875rem); font-weight: var(--font-weight-bold, 700); color: var(--neutral-800, #1f2937); }
.ds-input-error{ font-size: var(--text-xs, .75rem); color: var(--danger, #e74a3b); font-weight: var(--font-weight-regular, 400); }
.ds-input-help{ font-size: var(--text-xs, .75rem); color: var(--neutral-500, #6b7280); font-weight: var(--font-weight-regular, 400); }

.ds-messages{ display: flex; flex-direction: column; gap: var(--space-3, 12px); margin-bottom: var(--space-4, 16px); }
/* Mensagens globais (base.html): fixas no canto, só as que a tela não exibiu. */
.ds-messages--flutuante{
  position: fixed;
  top: var(--space-4, 16px);
  right: var(--space-4, 16px);
  z-index: var(--z-app-toast, 2100);
  width: min(420px, calc(100vw - 2 * var(--space-4, 16px)));
  margin-bottom: 0;
  pointer-events: none;
}
.ds-messages--flutuante .ds-alert{ pointer-events: auto; }
@media (max-width: 767.98px){
  .ds-messages--flutuante{ left: var(--space-4, 16px); width: auto; }
}
.ds-form-errors{ display: flex; flex-direction: column; gap: var(--space-3, 12px); margin-bottom: var(--space-4, 16px); }

/* ---- Badge ----
   Componente oficial de Badge (Fase 1). Renderize via
   {% include 'components/badge.html' %} — ver athenas/templates/BADGE.md.
   Cores de status idênticas às hoje duplicadas em .chip-* (acima) e em
   .ag-dc-chip-* (athenas/agendamentos/templates/agendamentos_list/
   gestor_drawer_panel.html) — mesmo sistema, um só lugar daqui pra frente. */
.ds-badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-family-sans-serif);
  font-size: var(--text-xs, .75rem);
  font-weight: var(--font-weight-bold, 700);
  white-space: nowrap;
  line-height: 1;
}
.ds-badge i{ font-size: .95em; }

.ds-badge--danger,  .ds-badge--cancelado  { background: #fef2f2; color: #b91c1c; }
.ds-badge--warning, .ds-badge--pendente   { background: #fffbeb; color: #92400e; }
.ds-badge--info,    .ds-badge--analise    { background: #eff6ff; color: #1e40af; }
.ds-badge--neutral, .ds-badge--noshow, .ds-badge--noshow_mentor, .ds-badge--noshow_mentorado { background: #f4f4f5; color: #4b5563; }
.ds-badge--neutral-alt, .ds-badge--finalizado { background: #f3f4f6; color: #374151; }
.ds-badge--success, .ds-badge--aprovado   { background: #ecfdf5; color: #065f46; }
.ds-badge--primary { background: var(--primary-100); color: var(--primary-900); }

/* ---- Alert ----
   Componente oficial de Alert (Fase 1). Renderize via
   {% include 'components/alert.html' %} — ver athenas/templates/ALERT.md.
   Generaliza o .custom-alert hoje só usado (e só na variante de erro) em
   athenas/templates/account/password_reset.html. */
.ds-alert{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-radius: var(--radius-md, 8px);
  border: 1px solid transparent;
  border-left-width: 4px;
  font-family: var(--font-family-sans-serif);
  font-size: var(--text-sm, .875rem);
  line-height: 1.4;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
  animation: ds-alert-in .3s ease;
}
.ds-alert-icon{ font-size: 1.1em; margin-top: 1px; flex: 0 0 auto; }
.ds-alert-text{ flex: 1 1 auto; }
.ds-alert-close{ background: none; border: 0; padding: 0; margin-left: auto; opacity: .6; cursor: pointer; flex: 0 0 auto; }
.ds-alert-close:hover{ opacity: 1; }

@keyframes ds-alert-in{
  from{ opacity: 0; transform: translateY(-8px); }
  to{ opacity: 1; transform: translateY(0); }
}

.ds-alert--danger { background: #fef2f2; border-color: #fecaca; border-left-color: var(--danger, #e74a3b); color: #b91c1c; }
.ds-alert--success{ background: #ecfdf5; border-color: #a7e8cf; border-left-color: var(--success, #1cc88a); color: #065f46; }
.ds-alert--warning{ background: #fffbeb; border-color: #f5e1a4; border-left-color: var(--warning, #f6c23e); color: #92400e; }
.ds-alert--info   { background: #eff6ff; border-color: #bcd4f5; border-left-color: var(--info, #36b9cc); color: #1e40af; }

/* ---- Tabela ----
   Componente oficial de Tabela (Fase 2). Renderize via
   {% include 'components/table.html' %} — ver athenas/templates/TABLE.md.
   Reaproveita components/pagination.html para a paginação. */
.ds-table-wrap{ display: flex; flex-direction: column; gap: var(--space-4, 16px); }

.ds-table-search{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  height: 42px;
  padding: 0 var(--space-4, 16px);
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-radius: var(--radius-pill, 999px);
  background: #fff;
  max-width: 22rem;
}
.ds-table-search i{ color: var(--neutral-400, #9ca3af); font-size: .85em; }
.ds-table-search input{
  border: 0; outline: none; background: none; width: 100%;
  font-family: var(--font-family-sans-serif); font-size: var(--text-sm, .875rem);
  color: var(--neutral-900, #111827);
}

.ds-table-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--neutral-200, #e5e7eb); border-radius: var(--radius-lg, 12px); }
.ds-table{ width: 100%; min-width: 560px; border-collapse: collapse; font-family: var(--font-family-sans-serif); font-size: var(--text-sm, .875rem); }
.ds-table thead th{
  text-align: left;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--neutral-50, #f9fafb);
  border-bottom: 1px solid var(--neutral-200, #e5e7eb);
  font-size: var(--text-xs, .75rem);
  font-weight: var(--font-weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--neutral-500, #6b7280);
  white-space: nowrap;
}
.ds-table tbody td{
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-bottom: 1px solid var(--neutral-100, #f3f4f6);
  vertical-align: middle;
}
.ds-table tbody tr:last-child td{ border-bottom: 0; }
.ds-table tbody tr:hover td{ background: var(--neutral-50, #f9fafb); }

.ds-table-align-right, .ds-table thead th.ds-table-align-right{ text-align: right; }
.ds-table-align-center, .ds-table thead th.ds-table-align-center{ text-align: center; }

.ds-table-sort{
  display: inline-flex; align-items: center; gap: 5px;
  color: inherit; text-decoration: none; cursor: pointer;
}
.ds-table-sort:hover{ color: var(--primary); }
.ds-table-sort-icon{ opacity: .35; }

.ds-table-empty-row td{ border-bottom: 0; }
.ds-table-empty{
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3, 12px);
  padding: var(--space-10, 40px) var(--space-4, 16px);
  color: var(--neutral-400, #9ca3af);
  text-align: center;
}
.ds-table-empty i{ font-size: 1.8rem; }