/* ====================================================================
   KALYMNOS — DESIGN TOKENS + TEMA "VERDE KALYMNOS"
   Fonte da verdade visual do sistema (feature 01 — Remodelagem UX).
   Paleta congelada em 14/07/2026 — ver paleta.md na pasta da feature:
   .docs/Retomada-Jul-2026-Features/01-remodelagem-ux-e-identidade-visual/
   Nenhuma cor nova pode ser usada em páginas: apenas tokens --k-*.
   Contraste validado por contrast-check.mjs (WCAG 2.1 AA, 0 falhas).
   ==================================================================== */

/* ============================ TOKENS ============================ */
:root {
  /* --- Cor de marca --- */
  --k-primary: #0F766E;            /* teal profundo — botões, links, marca */
  --k-primary-hover: #115E59;
  --k-primary-active: #134E4A;
  --k-primary-subtle: #CCFBF1;     /* fundos suaves da marca (hover de item, seleção) */
  --k-on-primary: #FFFFFF;

  /* --- Tinta / navbar --- */
  --k-ink: #1E293B;                /* navbar, superfícies escuras fixas */
  --k-ink-hover: #334155;
  --k-on-ink: #FFFFFF;

  /* --- Superfícies e fundo --- */
  --k-bg: #F1F5F9;                 /* fundo da página */
  --k-surface: #FFFFFF;            /* cards, tabelas, formulários */
  --k-surface-2: #F8FAFC;          /* headers de card, zebra, filtros */
  --k-border: #E2E8F0;             /* bordas decorativas (isentas de 1.4.11) */
  --k-border-input: #64748B;       /* bordas de inputs — 3:1 sobre surface */

  /* --- Texto --- */
  --k-text-1: #0F172A;             /* principal */
  --k-text-2: #334155;             /* secundário */
  --k-text-3: #5B6B80;             /* muted — 4.5:1 garantido sobre bg e surface */
  --k-link: #0F766E;
  --k-link-hover: #115E59;

  /* --- Semânticas --- */
  --k-success: #15803D;  --k-success-bg: #DCFCE7;  --k-success-text: #14532D;
  --k-danger:  #B91C1C;  --k-danger-bg:  #FEE2E2;  --k-danger-text:  #7F1D1D;
  --k-warning: #B45309;  --k-warning-bg: #FEF3C7;  --k-warning-text: #78350F;
  --k-info:    #0369A1;  --k-info-bg:    #E0F2FE;  --k-info-text:    #0C4A6E;
  --k-on-semantic: #FFFFFF;

  /* --- Badges de perfil (escala teal → neutro) --- */
  --k-badge-admin-bg: #134E4A;        --k-badge-admin-text: #FFFFFF;
  --k-badge-sindico-bg: #0F766E;      --k-badge-sindico-text: #FFFFFF;
  --k-badge-secretaria-bg: #475569;   --k-badge-secretaria-text: #FFFFFF;
  --k-badge-porteiro-bg: #CBD5E1;     --k-badge-porteiro-text: #1E293B;
  --k-badge-proprietario-bg: #E2E8F0; --k-badge-proprietario-text: #1E293B;

  /* --- Tipografia (D5 — Inter com fallback de sistema) --- */
  --k-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --k-font-size-sm: 0.875rem;
  --k-font-size-base: 1rem;
  --k-font-size-lg: 1.125rem;
  --k-weight-regular: 400;
  --k-weight-medium: 500;
  --k-weight-semibold: 600;
  --k-weight-bold: 700;

  /* --- Escala de espaçamento (4px) --- */
  --k-space-1: 0.25rem;  --k-space-2: 0.5rem;  --k-space-3: 0.75rem;
  --k-space-4: 1rem;     --k-space-5: 1.5rem;  --k-space-6: 2rem;
  --k-space-7: 3rem;     --k-space-8: 4rem;

  /* --- Raios e sombras --- */
  --k-radius-sm: 0.375rem;
  --k-radius-md: 0.5rem;
  --k-radius-lg: 0.75rem;
  --k-shadow-1: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
  --k-shadow-2: 0 4px 10px rgba(15, 23, 42, 0.10), 0 2px 4px rgba(15, 23, 42, 0.06);
  --k-shadow-3: 0 12px 28px rgba(15, 23, 42, 0.16);

  /* --- Foco --- */
  --k-focus-ring: 0 0 0 0.2rem rgba(15, 118, 110, 0.30);
  --k-focus-outline: #0F766E;

  /* --- Gradientes da marca --- */
  --k-gradient-brand: linear-gradient(135deg, #134E4A 0%, #0F766E 100%);
  --k-gradient-ink: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);

  /* --- Navbar (estados) --- */
  --k-nav-item-rest: rgba(255, 255, 255, 0.06);
  --k-nav-item-hover: #334155;
  --k-nav-active-indicator: #5EEAD4;

  color-scheme: light;

  /* --- Ponte Bootstrap: os utilitários bg-*/text-* do Bootstrap 5.1 resolvem
     rgba(var(--bs-*-rgb), opacity); redefinir os RGB aqui recolore os
     utilitários com a paleta Kalymnos SEM precisar de !important. --- */
  --bs-primary-rgb: 15, 118, 110;
  --bs-success-rgb: 21, 128, 61;
  --bs-danger-rgb: 185, 28, 28;
  --bs-warning-rgb: 180, 83, 9;
  --bs-info-rgb: 3, 105, 161;
  --bs-secondary-rgb: 71, 85, 105;
}

/* --------- Tema escuro (D2): entregue por último; tokens prontos ---------
   O atributo data-theme é aplicado pelo script inline do _Host.cshtml antes
   do primeiro paint (localStorage 'kalymnos-theme' > prefers-color-scheme). */
:root[data-theme="dark"] {
  --k-primary: #0F766E;
  --k-primary-hover: #14897F;
  --k-primary-active: #115E59;
  --k-primary-subtle: #113B37;

  --k-ink: #0B1220;
  --k-ink-hover: #1E293B;

  --k-bg: #0F172A;
  --k-surface: #1E293B;
  --k-surface-2: #233044;
  --k-border: #334155;
  --k-border-input: #94A3B8;

  --k-text-1: #F1F5F9;
  --k-text-2: #CBD5E1;
  --k-text-3: #94A3B8;
  --k-link: #5EEAD4;
  --k-link-hover: #99F6E4;

  --k-success-bg: #0E3B21;  --k-success-text: #A7F3D0;
  --k-danger-bg:  #450A0A;  --k-danger-text:  #FECACA;
  --k-warning-bg: #422006;  --k-warning-text: #FDE68A;
  --k-info-bg:    #082F49;  --k-info-text:    #BAE6FD;

  --k-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4);
  --k-shadow-2: 0 4px 10px rgba(0, 0, 0, 0.5);
  --k-shadow-3: 0 12px 28px rgba(0, 0, 0, 0.6);

  --k-focus-ring: 0 0 0 0.2rem rgba(94, 234, 212, 0.35);
  --k-focus-outline: #5EEAD4;

  --k-gradient-brand: linear-gradient(135deg, #115E59 0%, #0F766E 100%);

  color-scheme: dark;
}

/* ============================ BASE ============================ */

body,
.page,
main {
  font-family: var(--k-font-family);
  color: var(--k-text-1);
  background-color: var(--k-bg);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--k-text-1);
  font-weight: var(--k-weight-semibold);
}

/* Links */
a {
  color: var(--k-link);
  transition: color 0.15s ease;
}

a:hover {
  color: var(--k-link-hover);
  text-decoration: none;
}

.text-muted {
  /* !important: Bootstrap (CDN) define .text-muted com !important próprio */
  color: var(--k-text-3) !important;
}

/* Focus visível — apenas elementos interativos */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--k-focus-outline);
  outline-offset: 2px;
}

/* Skip link (E1) */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--k-ink);
  color: var(--k-on-ink);
  padding: var(--k-space-2) var(--k-space-3);
  text-decoration: none;
  border-radius: var(--k-radius-sm);
  z-index: 1000;
}

.skip-link:focus {
  top: 6px;
  color: var(--k-on-ink);
}

/* ==================== BOTÕES (re-skin Bootstrap) ==================== */

.btn {
  border-radius: var(--k-radius-sm);
  font-weight: var(--k-weight-medium);
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary {
  color: var(--k-on-primary);
  background-color: var(--k-primary);
  border-color: var(--k-primary);
}

.btn-primary:hover {
  color: var(--k-on-primary);
  background-color: var(--k-primary-hover);
  border-color: var(--k-primary-hover);
  box-shadow: var(--k-shadow-1);
}

.btn-primary:focus,
.btn-primary.focus {
  color: var(--k-on-primary);
  background-color: var(--k-primary-hover);
  border-color: var(--k-primary-hover);
  box-shadow: var(--k-focus-ring);
}

.btn-primary:active,
.btn-primary.active {
  color: var(--k-on-primary);
  background-color: var(--k-primary-active);
  border-color: var(--k-primary-active);
}

.btn-primary:disabled,
.btn-primary.disabled {
  color: var(--k-on-primary);
  background-color: var(--k-primary);
  border-color: var(--k-primary);
  opacity: 0.55;
}

.btn-success {
  color: var(--k-on-semantic);
  background-color: var(--k-success);
  border-color: var(--k-success);
}

.btn-success:hover,
.btn-success:focus,
.btn-success.focus {
  color: var(--k-on-semantic);
  background-color: #166534;
  border-color: #166534;
}

.btn-success:focus,
.btn-success.focus {
  box-shadow: 0 0 0 0.2rem rgba(21, 128, 61, 0.35);
}

.btn-danger {
  color: var(--k-on-semantic);
  background-color: var(--k-danger);
  border-color: var(--k-danger);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus {
  color: var(--k-on-semantic);
  background-color: #991B1B;
  border-color: #991B1B;
}

.btn-danger:focus,
.btn-danger.focus {
  box-shadow: 0 0 0 0.2rem rgba(185, 28, 28, 0.35);
}

.btn-warning {
  color: var(--k-on-semantic);
  background-color: var(--k-warning);
  border-color: var(--k-warning);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus {
  color: var(--k-on-semantic);
  background-color: #92400E;
  border-color: #92400E;
}

.btn-warning:focus,
.btn-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(180, 83, 9, 0.35);
}

.btn-secondary {
  color: var(--k-text-1);
  background-color: var(--k-surface);
  border-color: var(--k-border-input);
}

.btn-secondary:hover,
.btn-secondary:focus {
  color: var(--k-text-1);
  background-color: var(--k-surface-2);
  border-color: var(--k-text-3);
}

.btn-outline-primary {
  color: var(--k-primary);
  border-color: var(--k-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: var(--k-on-primary);
  background-color: var(--k-primary);
  border-color: var(--k-primary);
}

.btn-outline-secondary {
  color: var(--k-text-2);
  border-color: var(--k-border-input);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  color: var(--k-text-1);
  background-color: var(--k-surface-2);
  border-color: var(--k-text-3);
}

.btn-outline-info {
  color: var(--k-info);
  border-color: var(--k-info);
}

.btn-outline-info:hover,
.btn-outline-info:focus {
  color: var(--k-on-semantic);
  background-color: var(--k-info);
  border-color: var(--k-info);
}

.btn-outline-warning {
  color: var(--k-warning);
  border-color: var(--k-warning);
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
  color: var(--k-on-semantic);
  background-color: var(--k-warning);
  border-color: var(--k-warning);
}

.btn-outline-danger {
  color: var(--k-danger);
  border-color: var(--k-danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
  color: var(--k-on-semantic);
  background-color: var(--k-danger);
  border-color: var(--k-danger);
}

/* ============================ NAVBAR ============================ */

.navbar {
  background-color: var(--k-ink);
  box-shadow: var(--k-shadow-2);
}

.navbar .container-fluid,
.navbar .container {
  background-color: transparent;
}

.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus {
  color: var(--k-on-ink);
  font-weight: var(--k-weight-bold);
  font-size: 1.375rem;
}

.navbar-nav .nav-link {
  color: var(--k-on-ink);
  font-weight: var(--k-weight-medium);
  padding: var(--k-space-2) var(--k-space-4);
  background-color: var(--k-nav-item-rest);
  border-bottom: 2px solid transparent;
  border-radius: var(--k-radius-sm);
  transition: background-color 0.15s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--k-on-ink);
  background-color: var(--k-nav-item-hover);
}

.navbar-nav .nav-link:focus-visible {
  outline: 2px solid var(--k-nav-active-indicator);
  outline-offset: 2px;
}

.navbar-nav .nav-link.active {
  color: var(--k-on-ink);
  background-color: var(--k-nav-item-hover);
  font-weight: var(--k-weight-semibold);
  border-bottom: 2px solid var(--k-nav-active-indicator);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.navbar-nav .nav-link i {
  color: var(--k-nav-active-indicator);
}

.navbar-nav .dropdown-toggle,
.navbar-nav .dropdown-toggle:hover,
.navbar-nav .dropdown-toggle:focus {
  color: var(--k-on-ink);
}

.navbar-nav .dropdown-toggle:hover,
.navbar-nav .dropdown-toggle:focus {
  background-color: var(--k-nav-item-hover);
  border-radius: var(--k-radius-sm);
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5);
  padding: var(--k-space-1) var(--k-space-2);
}

.navbar-toggler:hover,
.navbar-toggler:focus {
  background-color: var(--k-nav-item-hover);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 991.98px) {
  .navbar-collapse {
    background-color: var(--k-ink);
    margin-top: var(--k-space-2);
    border-radius: var(--k-radius-md);
    padding: var(--k-space-4);
  }

  .navbar-nav .nav-link {
    padding: var(--k-space-3) var(--k-space-4);
    margin: var(--k-space-1) 0;
  }
}

/* ============================ DROPDOWN ============================ */

.dropdown-menu {
  background-color: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-md);
  box-shadow: var(--k-shadow-2);
}

.dropdown-item {
  color: var(--k-text-1);
  padding: var(--k-space-2) var(--k-space-4);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--k-primary-subtle);
  color: var(--k-text-1);
}

/* Item ativo do dropdown (rota atual) — sobrepõe o azul default do Bootstrap */
.dropdown-item.active,
.dropdown-item.active:hover,
.dropdown-item.active:focus {
  background-color: var(--k-primary);
  color: var(--k-on-primary, #fff);
  font-weight: var(--k-weight-semibold);
}

.dropdown-item.active i {
  color: var(--k-on-primary, #fff);
}

.dropdown-item i {
  color: var(--k-text-2);
  margin-right: var(--k-space-2);
}

.dropdown-divider {
  border-top-color: var(--k-border);
}

/* Submenu aninhado (Bootstrap 5 não suporta nativamente) — abre ao lado no
   desktop via hover/foco; no colapso mobile abre inline, abaixo do item. */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  margin-top: calc(-1 * var(--k-space-2));
  margin-left: 0;
}

.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:focus-within > .dropdown-menu {
  display: block;
}

.submenu-caret {
  float: right;
  margin-top: 4px;
  font-size: 0.7em;
  color: var(--k-text-2);
}

@media (max-width: 991.98px) {
  /* Navbar colapsada: sem espaço lateral — o submenu abre inline */
  .dropdown-submenu > .dropdown-menu {
    position: static;
    margin-top: 0;
    margin-left: var(--k-space-4);
    border: none;
    box-shadow: none;
  }
}

/* ============================ CARDS ============================ */

.card {
  background-color: var(--k-surface);
  color: var(--k-text-1);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-md);
  box-shadow: var(--k-shadow-1);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.card:hover {
  box-shadow: var(--k-shadow-2);
}

/* Card sem elevação — filtros e formulários */
.card-static:hover {
  transform: none;
  box-shadow: var(--k-shadow-1);
}

.card-header {
  background-color: var(--k-surface-2);
  border-bottom: 1px solid var(--k-border);
  font-weight: var(--k-weight-medium);
  color: var(--k-text-1);
}

.card.text-white,
.card.text-white .card-title,
.card.text-white h3,
.card.text-white i {
  color: #FFFFFF;
}

/* ============================ ALERTS ============================ */

.alert-success {
  color: var(--k-success-text);
  background-color: var(--k-success-bg);
  border-color: var(--k-success);
  border-left: 4px solid var(--k-success);
}

.alert-danger {
  color: var(--k-danger-text);
  background-color: var(--k-danger-bg);
  border-color: var(--k-danger);
  border-left: 4px solid var(--k-danger);
}

.alert-warning {
  color: var(--k-warning-text);
  background-color: var(--k-warning-bg);
  border-color: var(--k-warning);
  border-left: 4px solid var(--k-warning);
}

.alert-info {
  color: var(--k-info-text);
  background-color: var(--k-info-bg);
  border-color: var(--k-info);
  border-left: 4px solid var(--k-info);
}

/* ============================ FORMS ============================ */

.form-label {
  color: var(--k-text-2);
  font-weight: var(--k-weight-medium);
}

.form-control,
.form-select {
  background-color: var(--k-surface);
  color: var(--k-text-1);
  border: 1px solid var(--k-border-input);
  border-radius: var(--k-radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--k-surface);
  color: var(--k-text-1);
  border-color: var(--k-primary);
  box-shadow: var(--k-focus-ring);
}

.form-control::placeholder {
  color: var(--k-text-3);
}

.input-group-text {
  background-color: var(--k-surface-2);
  color: var(--k-text-2);
  border: 1px solid var(--k-border-input);
}

/* Validação (Blazor + Bootstrap) */
.valid.modified:not([type=checkbox]) {
  outline: 1px solid var(--k-success);
  box-shadow: 0 0 0 0.2rem rgba(21, 128, 61, 0.25);
}

.invalid {
  outline: 1px solid var(--k-danger);
  box-shadow: 0 0 0 0.2rem rgba(185, 28, 28, 0.25);
}

.validation-message {
  color: var(--k-danger-text);
  font-size: var(--k-font-size-sm);
  margin-top: var(--k-space-1);
  font-weight: var(--k-weight-medium);
}

.form-control.is-invalid {
  border-color: var(--k-danger);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23B91C1C' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='M6 3v3M6 9v.01'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-valid {
  border-color: var(--k-success);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='%2315803D' viewBox='0 0 8 8'%3e%3cpath d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* ============================ BADGES ============================ */

.badge {
  font-weight: var(--k-weight-medium);
}

/* Os utilitários bg-success/bg-danger/etc. já resolvem para a paleta via
   ponte --bs-*-rgb (tokens). Aqui só garantimos texto legível nos badges. */
.badge[class*="bg-"] {
  color: var(--k-on-semantic);
}

.badge-primary {
  background-color: var(--k-primary);
  color: var(--k-on-primary);
}

.badge-success {
  background-color: var(--k-success);
  color: var(--k-on-semantic);
}

/* --- Badges de perfil --- */
.badge-role-admin        { background-color: var(--k-badge-admin-bg); color: var(--k-badge-admin-text); }
.badge-role-sindico      { background-color: var(--k-badge-sindico-bg); color: var(--k-badge-sindico-text); }
.badge-role-secretaria   { background-color: var(--k-badge-secretaria-bg); color: var(--k-badge-secretaria-text); }
.badge-role-porteiro     { background-color: var(--k-badge-porteiro-bg); color: var(--k-badge-porteiro-text); }
.badge-role-proprietario { background-color: var(--k-badge-proprietario-bg); color: var(--k-badge-proprietario-text); }
.badge-role-default      { background-color: var(--k-badge-proprietario-bg); color: var(--k-badge-proprietario-text); border: 1px solid var(--k-border-input); }

/* --- Badges de status financeiro --- */
.badge-status-open      { background-color: var(--k-badge-proprietario-bg); color: var(--k-badge-proprietario-text); }
.badge-status-paid      { background-color: var(--k-success); color: var(--k-on-semantic); }
.badge-status-overdue   { background-color: var(--k-danger); color: var(--k-on-semantic); }
.badge-status-cancelled { background-color: var(--k-badge-secretaria-bg); color: var(--k-badge-secretaria-text); }
.badge-type-receivable  { background-color: var(--k-success); color: var(--k-on-semantic); }
.badge-type-payable     { background-color: var(--k-danger); color: var(--k-on-semantic); }

/* --- Badges de tipo de morador --- */
.badge-resident-owner     { background-color: var(--k-primary); color: var(--k-on-primary); }
.badge-resident-tenant    { background-color: var(--k-badge-secretaria-bg); color: var(--k-badge-secretaria-text); }
.badge-resident-dependent { background-color: var(--k-badge-porteiro-bg); color: var(--k-badge-porteiro-text); }

/* ==================== COMPONENTES DO DASHBOARD ==================== */

.status-card {
  border-radius: var(--k-radius-md);
  box-shadow: var(--k-shadow-1);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  overflow: hidden;
  color: #FFFFFF;
}

.status-card:hover {
  box-shadow: var(--k-shadow-2);
  transform: translateY(-2px);
}

.status-card.success  { background-color: var(--k-success); border-left: 4px solid #14532D; }
.status-card.primary  { background-color: var(--k-primary); border-left: 4px solid var(--k-primary-active); }
.status-card.info     { background-color: var(--k-info); border-left: 4px solid var(--k-info-text); }

.status-card .card-body,
.status-card .card-title,
.status-card h3,
.status-card i {
  color: #FFFFFF;
}

.bg-warning {
  /* fundo vem da ponte --bs-warning-rgb; aqui só o texto branco AA */
  color: #FFFFFF;
}

.bg-warning .card-title,
.bg-warning h3,
.bg-warning h5,
.bg-warning i {
  color: #FFFFFF;
}

/* ==================== LOGIN / TELAS PÚBLICAS ==================== */

.login-container {
  background: var(--k-bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  background: var(--k-surface);
  border-radius: var(--k-radius-lg);
  box-shadow: var(--k-shadow-3);
  padding: var(--k-space-6);
  max-width: 400px;
  width: 100%;
  border: 1px solid var(--k-border);
}

.login-header {
  text-align: center;
  margin-bottom: var(--k-space-6);
  color: var(--k-text-1);
}

.login-header h2 {
  color: var(--k-text-1);
  font-weight: var(--k-weight-bold);
  margin-bottom: var(--k-space-2);
}

.login-header p {
  color: var(--k-text-3);
  margin-bottom: 0;
}

/* ============================ TABELAS ============================ */

.table {
  --bs-table-bg: var(--k-surface);
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: var(--k-text-1);
  --bs-table-striped-bg: var(--k-surface-2);
  --bs-table-active-color: var(--k-text-1);
  --bs-table-active-bg: var(--k-primary-subtle);
  --bs-table-hover-color: var(--k-text-1);
  --bs-table-hover-bg: var(--k-primary-subtle);
  border-color: var(--k-border);
  color: var(--k-text-1);
  margin-bottom: 0;
}

.table > :not(caption) > * > * {
  padding: var(--k-space-3);
  border-bottom-color: var(--k-border);
  color: var(--k-text-1);
}

.table thead th {
  background-color: var(--k-surface-2);
  color: var(--k-text-2);
  border-bottom: 2px solid var(--k-border);
  font-weight: var(--k-weight-semibold);
}

.table-bordered > :not(caption) > * {
  border-width: 1px 0;
}

.table-bordered > :not(caption) > * > * {
  border-width: 0 1px;
  border-color: var(--k-border);
}

.table .badge {
  font-weight: var(--k-weight-semibold);
}

.table tbody tr:focus-within {
  outline: 2px solid var(--k-focus-outline);
  outline-offset: -2px;
}

/* ============================ FOOTER ============================ */

footer {
  background-color: var(--k-surface-2);
  border-top: 1px solid var(--k-border);
  color: var(--k-text-2);
}

/* ============================ UTILITÁRIOS ============================ */

/* .text-warning do Bootstrap já resolve para o laranja AA via ponte --bs-warning-rgb */

.text-amber {
  color: var(--k-warning);
}

.spinner-border-primary {
  color: var(--k-primary);
}

/* Toast para erros de JS puro (app.js/kToast — fora do circuito Blazor) */
#k-js-toasts {
  position: fixed;
  bottom: var(--k-space-4);
  right: var(--k-space-4);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--k-space-2);
}

.k-js-toast {
  background-color: var(--k-danger-bg);
  color: var(--k-danger-text);
  border-left: 4px solid var(--k-danger);
  border-radius: var(--k-radius-sm);
  box-shadow: var(--k-shadow-2);
  padding: var(--k-space-3) var(--k-space-4);
  max-width: 360px;
}

/* ============================ ANIMAÇÕES ============================ */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
  animation: fadeInUp 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; /* !important: acessibilidade — vence qualquer animação */
    transition-duration: 0.01ms !important;
  }
}

/* ============================ RESPONSIVO ============================ */

@media (max-width: 768px) {
  .navbar-brand { font-size: 1.2rem; }
  .card { margin-bottom: var(--k-space-4); }
  .login-card { margin: var(--k-space-4); padding: var(--k-space-5); }
}