/* ==========================================================================
   med27 — componentes globais (botões, cards, forms, tabelas, sidebar, header)
   Depende de med27-tokens.css. Carregar DEPOIS do Bootstrap e de style.css.
   ========================================================================== */

/* ——— Base ——— */
body {
  background: var(--med27-background);
  background-image: none;
  color: var(--med27-text-primary);
}

a:focus-visible,
button:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--med27-primary-500);
  outline-offset: 2px;
}

/* ——— Botões ——— */
.btn-primary,
.btn.btn-primary {
  background: var(--med27-primary);
  border-color: var(--med27-primary);
  color: var(--med27-text-on-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover {
  background: var(--med27-primary-800);
  border-color: var(--med27-primary-800);
  color: var(--med27-text-on-primary);
}

.btn-primary:disabled,
.btn-primary.disabled {
  background: var(--med27-gray-400);
  border-color: var(--med27-gray-400);
  color: var(--med27-white);
  opacity: 0.7;
}

.btn-secondary,
.btn.btn-secondary {
  background: var(--med27-accent-100);
  border-color: var(--med27-accent-200);
  color: var(--med27-primary-800);
}

.btn-secondary:hover,
.btn.btn-secondary:hover {
  background: var(--med27-accent-200);
  border-color: var(--med27-accent-300);
  color: var(--med27-primary-800);
}

.btn-outline-primary,
.btn.btn-outline-primary {
  background: transparent;
  border: 1px solid var(--med27-gray-300);
  color: var(--med27-gray-700);
}

.btn-outline-primary:hover {
  background: var(--med27-gray-50);
  border-color: var(--med27-gray-400);
  color: var(--med27-gray-800);
}

.btn-outline-secondary {
  background: transparent;
  border: 1px solid var(--med27-gray-300);
  color: var(--med27-gray-700);
}

/* ——— Cards ——— */
.card {
  background: var(--med27-surface);
  border: 1px solid var(--med27-gray-200);
  border-radius: var(--med27-radius);
  box-shadow: var(--med27-shadow);
}

.card-header {
  background: var(--med27-surface-soft);
  border-bottom: 1px solid var(--med27-gray-200);
  color: var(--med27-gray-700);
}

/* ——— Formulários ——— */
.form-control,
.form-select,
.login-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea.form-control {
  background: var(--med27-white);
  border: 1px solid var(--med27-gray-300);
  color: var(--med27-text-primary);
}

.form-control:focus,
.form-select:focus,
.login-input:focus {
  border-color: var(--med27-primary-500);
  box-shadow: var(--med27-focus-ring);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--med27-danger);
}

.form-control.is-invalid:focus {
  border-color: var(--med27-danger);
  box-shadow: 0 0 0 3px rgba(201, 75, 75, 0.12);
}

/* ——— Tabelas ——— */
.table thead th,
.table thead.table-light th,
.table thead.table-dark th,
.table-light,
.table-light > th,
.table-light > td {
  background: var(--med27-surface-soft) !important;
  color: var(--med27-gray-700) !important;
  border-color: var(--med27-gray-200);
}

.table td,
.table th {
  border-color: var(--med27-gray-200);
}

.table-hover tbody tr:hover,
.table tbody tr:hover {
  background: var(--med27-gray-50);
}

/* ——— Sidebar ——— */
.sidebar {
  background: var(--med27-sidebar-bg) !important;
  color: var(--med27-text-on-primary);
  border-right: 0;
}

.sidebar .brand {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.sidebar .brand::before {
  background: var(--med27-accent);
  opacity: 1;
}

.sidebar .brand:hover {
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.sidebar .brand .logo-ring {
  background: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.sidebar .brand .brand-name,
.sidebar .brand .brand-text .brand-name {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.sidebar .brand .brand-subtitle {
  color: rgba(255, 255, 255, 0.62);
}

.sidebar .brand .logo-ring .logo {
  background: var(--med27-accent-100);
  color: var(--med27-primary);
  border-color: transparent;
}

.sidebar .nav-link {
  color: rgba(255, 255, 255, 0.82);
}

.sidebar .nav-link i {
  color: rgba(255, 255, 255, 0.78);
}

.sidebar .nav-link:hover {
  background: var(--med27-sidebar-hover);
  color: var(--med27-text-on-primary);
}

.sidebar .nav-link:hover i {
  color: var(--med27-accent-300);
}

.sidebar .nav-link.active {
  background: var(--med27-sidebar-active);
  color: var(--med27-text-on-primary);
  font-weight: 500;
}

.sidebar .nav-link.active i {
  color: var(--med27-accent-400);
}

.sidebar .nav-link.active::before {
  background: var(--med27-accent);
  opacity: 1;
}

.sidebar .nav-link.text-danger {
  color: rgba(255, 255, 255, 0.7);
}

.sidebar .nav-link.text-danger:hover {
  background: rgba(201, 75, 75, 0.18);
  color: #f3c1c1;
}

.sidebar .section-title,
.sidebar .sidebar-section-label,
.sidebar .nav-heading {
  color: rgba(255, 255, 255, 0.45);
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
}

/* ——— Header / topbar ——— */
.topbar {
  background: var(--med27-header-bg);
  border: 1px solid var(--med27-header-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--med27-shadow-sm);
}

.topbar::before {
  display: none;
}

.topbar-user-cluster {
  --topbar-user-accent: var(--med27-primary);
}

.page-kicker-sigla {
  color: var(--med27-primary);
}

/* ——— KPI: identidade só como acento ——— */
.kpi-card.kpi-primary .kpi-icon {
  background: var(--med27-accent-100);
  color: var(--med27-primary);
}

/* ——— Splash ——— */
.zymed-splash {
  --zymed-splash-accent: var(--med27-primary);
  --zymed-splash-accent-light: var(--med27-accent);
}

/* ——— Chat interno: cores, classes técnicas preservadas ——— */
.zymed-chat-fab,
.chat-fab {
  background: var(--med27-primary);
  color: var(--med27-text-on-primary);
}

html[data-theme="dark"] .sidebar {
  background: var(--med27-sidebar-bg) !important;
}

html[data-theme="dark"] .topbar {
  background: var(--med27-surface);
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .card {
  background: var(--med27-surface);
  border-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 575.98px) {
  .sidebar {
    background: var(--med27-sidebar-bg) !important;
  }
}