/**
 * KADOSH — Component Library (vanilla CSS, design-tokens-driven)
 * Prefixo .kds-* para evitar colisões com classes legacy do app.html.
 * Substituível por React/RN sem perder semântica (cada classe = 1 componente).
 */

/* ═════════════════════════════════════════════════════════════
   RESET base — só dentro de .kds-scope para não quebrar legacy
   ═════════════════════════════════════════════════════════════ */
.kds-scope, .kds-scope *, .kds-scope *::before, .kds-scope *::after {
  box-sizing: border-box;
}
.kds-scope {
  font-family: var(--kds-font-sans);
  color: var(--kds-fg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═════════════════════════════════════════════════════════════
   BUTTON
   Variantes: primary | secondary | ghost | danger | success
   Sizes:    sm | md | lg
   States:   :hover :active :disabled [data-loading]
   ═════════════════════════════════════════════════════════════ */
.kds-btn {
  --_bg:      var(--kds-bg-surface-2);
  --_bg-hov:  var(--kds-bg-surface-3);
  --_fg:      var(--kds-fg-primary);
  --_bd:      var(--kds-border-default);
  --_glow:    transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kds-space-2);

  min-height: var(--kds-touch-min);
  padding: 0 var(--kds-space-4);
  border-radius: var(--kds-radius-lg);
  border: 1px solid var(--_bd);
  background: var(--_bg);
  color: var(--_fg);

  font-family: inherit;
  font-size: var(--kds-text-md);
  font-weight: var(--kds-weight-semibold);
  line-height: 1;
  letter-spacing: var(--kds-tracking-normal);
  white-space: nowrap;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition:
    background var(--kds-dur-fast) var(--kds-ease-out),
    border-color var(--kds-dur-fast) var(--kds-ease-out),
    transform var(--kds-dur-instant) var(--kds-ease-out),
    box-shadow var(--kds-dur-fast) var(--kds-ease-out);
}
.kds-btn:hover     { background: var(--_bg-hov); }
.kds-btn:active    { transform: translateY(1px); }
.kds-btn:focus-visible {
  outline: none;
  box-shadow: var(--_glow, var(--kds-shadow-glow-primary));
}
.kds-btn:disabled,
.kds-btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* — variantes — */
.kds-btn--primary {
  --_bg:      var(--kds-brand-primary);
  --_bg-hov:  var(--kds-brand-primary-hover);
  --_fg:      var(--kds-brand-primary-fg);
  --_bd:      transparent;
  --_glow:    var(--kds-shadow-glow-primary);
  box-shadow: var(--kds-shadow-sm);
}
.kds-btn--secondary {
  --_bg:      var(--kds-brand-primary-soft);
  --_bg-hov:  rgba(37,99,235,.20);
  --_fg:      var(--kds-brand-primary);
  --_bd:      rgba(37,99,235,.24);
}
.kds-btn--ghost {
  --_bg:      transparent;
  --_bg-hov:  var(--kds-bg-surface-2);
  --_bd:      transparent;
}
.kds-btn--danger {
  --_bg:      var(--kds-danger);
  --_bg-hov:  #DC2626;
  --_fg:      #FFFFFF;
  --_bd:      transparent;
  --_glow:    var(--kds-shadow-glow-danger);
}
.kds-btn--success {
  --_bg:      var(--kds-success);
  --_bg-hov:  #16A34A;
  --_fg:      #FFFFFF;
  --_bd:      transparent;
}

/* — tamanhos — */
.kds-btn--sm { min-height: 36px; padding: 0 var(--kds-space-3); font-size: var(--kds-text-sm); border-radius: var(--kds-radius-md); }
.kds-btn--lg { min-height: 52px; padding: 0 var(--kds-space-6); font-size: var(--kds-text-lg); border-radius: var(--kds-radius-xl); }

/* — full width — */
.kds-btn--block { width: 100%; }

/* — loading — */
.kds-btn[data-loading="true"] {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
.kds-btn[data-loading="true"]::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border-radius: var(--kds-radius-full);
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--_fg);
  animation: kds-spin .7s linear infinite;
}
@keyframes kds-spin { to { transform: rotate(360deg); } }

/* — ícone-only — */
.kds-btn--icon {
  width: var(--kds-touch-min);
  padding: 0;
  aspect-ratio: 1;
}

/* ═════════════════════════════════════════════════════════════
   CARD
   ═════════════════════════════════════════════════════════════ */
.kds-card {
  background: var(--kds-bg-surface);
  border: 1px solid var(--kds-border-subtle);
  border-radius: var(--kds-radius-xl);
  padding: var(--kds-space-5);
  transition: border-color var(--kds-dur-fast) var(--kds-ease-out),
              transform var(--kds-dur-fast) var(--kds-ease-out);
}
.kds-card--interactive { cursor: pointer; }
.kds-card--interactive:hover {
  border-color: var(--kds-border-default);
  transform: translateY(-1px);
}
.kds-card__title {
  font-size: var(--kds-text-lg);
  font-weight: var(--kds-weight-semibold);
  margin: 0 0 var(--kds-space-1);
}
.kds-card__sub {
  font-size: var(--kds-text-sm);
  color: var(--kds-fg-tertiary);
  margin: 0;
}

/* ═════════════════════════════════════════════════════════════
   INPUT / FIELD
   ═════════════════════════════════════════════════════════════ */
.kds-field { display: flex; flex-direction: column; gap: var(--kds-space-2); }
.kds-field__label {
  font-size: var(--kds-text-sm);
  font-weight: var(--kds-weight-semibold);
  color: var(--kds-fg-secondary);
}
.kds-input,
.kds-select,
.kds-textarea {
  width: 100%;
  min-height: var(--kds-touch-min);
  padding: 0 var(--kds-space-4);
  background: var(--kds-bg-surface-2);
  border: 1px solid var(--kds-border-default);
  border-radius: var(--kds-radius-lg);
  color: var(--kds-fg-primary);
  font-family: inherit;
  font-size: var(--kds-text-md);
  transition: border-color var(--kds-dur-fast) var(--kds-ease-out),
              box-shadow var(--kds-dur-fast) var(--kds-ease-out);
}
.kds-textarea { padding: var(--kds-space-3) var(--kds-space-4); min-height: 96px; resize: vertical; }
.kds-input::placeholder,
.kds-textarea::placeholder { color: var(--kds-fg-muted); }
.kds-input:focus,
.kds-select:focus,
.kds-textarea:focus {
  outline: none;
  border-color: var(--kds-border-focus);
  box-shadow: var(--kds-shadow-glow-primary);
}
.kds-field__hint {
  font-size: var(--kds-text-xs);
  color: var(--kds-fg-tertiary);
}
.kds-field__error {
  font-size: var(--kds-text-xs);
  color: var(--kds-danger);
}
.kds-field--invalid .kds-input,
.kds-field--invalid .kds-select,
.kds-field--invalid .kds-textarea {
  border-color: var(--kds-danger);
}

/* ═════════════════════════════════════════════════════════════
   BADGE
   ═════════════════════════════════════════════════════════════ */
.kds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--kds-space-1);
  padding: 2px var(--kds-space-2);
  border-radius: var(--kds-radius-full);
  font-size: var(--kds-text-xs);
  font-weight: var(--kds-weight-semibold);
  letter-spacing: var(--kds-tracking-wide);
  text-transform: uppercase;
  background: var(--kds-bg-surface-3);
  color: var(--kds-fg-secondary);
  border: 1px solid var(--kds-border-default);
}
.kds-badge--primary { background: var(--kds-brand-primary-soft); color: var(--kds-brand-primary); border-color: transparent; }
.kds-badge--success { background: var(--kds-success-soft); color: var(--kds-success); border-color: transparent; }
.kds-badge--warning { background: var(--kds-warning-soft); color: var(--kds-warning); border-color: transparent; }
.kds-badge--danger  { background: var(--kds-danger-soft);  color: var(--kds-danger);  border-color: transparent; }
.kds-badge--info    { background: var(--kds-info-soft);    color: var(--kds-info);    border-color: transparent; }

/* ═════════════════════════════════════════════════════════════
   MODAL / DIALOG
   ═════════════════════════════════════════════════════════════ */
.kds-modal {
  position: fixed; inset: 0;
  z-index: var(--kds-z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--kds-space-4);
  background: var(--kds-bg-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: kds-fade-in var(--kds-dur-base) var(--kds-ease-out);
}
.kds-modal[hidden] { display: none; }
.kds-modal__panel {
  width: 100%;
  max-width: 480px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--kds-bg-surface);
  border: 1px solid var(--kds-border-default);
  border-radius: var(--kds-radius-2xl);
  box-shadow: var(--kds-shadow-xl);
  animation: kds-pop-in var(--kds-dur-base) var(--kds-ease-spring);
}
.kds-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--kds-space-5) var(--kds-space-6);
  border-bottom: 1px solid var(--kds-border-subtle);
}
.kds-modal__title {
  margin: 0;
  font-size: var(--kds-text-lg);
  font-weight: var(--kds-weight-semibold);
}
.kds-modal__body   { padding: var(--kds-space-5) var(--kds-space-6); display: flex; flex-direction: column; gap: var(--kds-space-4); }
.kds-modal__footer { padding: var(--kds-space-4) var(--kds-space-6); display: flex; justify-content: flex-end; gap: var(--kds-space-2); border-top: 1px solid var(--kds-border-subtle); }
.kds-modal__close {
  width: 32px; height: 32px;
  border-radius: var(--kds-radius-md);
  background: transparent; border: 0;
  color: var(--kds-fg-tertiary); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.kds-modal__close:hover { background: var(--kds-bg-surface-2); color: var(--kds-fg-primary); }

@keyframes kds-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kds-pop-in  { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ═════════════════════════════════════════════════════════════
   TOAST
   ═════════════════════════════════════════════════════════════ */
.kds-toast-region {
  position: fixed;
  bottom: calc(var(--kds-bottomnav-h) + var(--kds-space-4));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--kds-z-toast);
  display: flex; flex-direction: column; gap: var(--kds-space-2);
  pointer-events: none;
}
.kds-toast {
  display: inline-flex; align-items: center; gap: var(--kds-space-2);
  padding: var(--kds-space-3) var(--kds-space-4);
  background: var(--kds-bg-surface);
  border: 1px solid var(--kds-border-default);
  border-radius: var(--kds-radius-full);
  box-shadow: var(--kds-shadow-lg);
  font-size: var(--kds-text-sm);
  font-weight: var(--kds-weight-medium);
  pointer-events: auto;
  animation: kds-slide-up var(--kds-dur-base) var(--kds-ease-spring);
}
.kds-toast--success { border-color: var(--kds-success); }
.kds-toast--danger  { border-color: var(--kds-danger);  }
@keyframes kds-slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ═════════════════════════════════════════════════════════════
   TAB
   ═════════════════════════════════════════════════════════════ */
.kds-tabs {
  display: flex; gap: var(--kds-space-1);
  padding: var(--kds-space-1);
  background: var(--kds-bg-surface-2);
  border-radius: var(--kds-radius-lg);
}
.kds-tab {
  flex: 1;
  min-height: 36px;
  padding: 0 var(--kds-space-3);
  background: transparent;
  border: 0;
  border-radius: var(--kds-radius-md);
  color: var(--kds-fg-tertiary);
  font: inherit;
  font-size: var(--kds-text-sm);
  font-weight: var(--kds-weight-semibold);
  cursor: pointer;
  transition: background var(--kds-dur-fast) var(--kds-ease-out), color var(--kds-dur-fast) var(--kds-ease-out);
}
.kds-tab:hover { color: var(--kds-fg-primary); }
.kds-tab[aria-selected="true"] {
  background: var(--kds-bg-surface);
  color: var(--kds-fg-primary);
  box-shadow: var(--kds-shadow-xs);
}

/* ═════════════════════════════════════════════════════════════
   AVATAR
   ═════════════════════════════════════════════════════════════ */
.kds-avatar {
  width: 32px; height: 32px;
  border-radius: var(--kds-radius-full);
  background: var(--kds-brand-primary-soft);
  color: var(--kds-brand-primary);
  font-size: var(--kds-text-sm);
  font-weight: var(--kds-weight-bold);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kds-avatar--sm { width: 24px; height: 24px; font-size: var(--kds-text-xs); }
.kds-avatar--lg { width: 48px; height: 48px; font-size: var(--kds-text-md); }
.kds-avatar--xl { width: 72px; height: 72px; font-size: var(--kds-text-xl); }

/* ═════════════════════════════════════════════════════════════
   ICON helper (Lucide)
   ═════════════════════════════════════════════════════════════ */
.kds-icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kds-icon--sm { width: 16px; height: 16px; }
.kds-icon--lg { width: 24px; height: 24px; }
.kds-icon--xl { width: 32px; height: 32px; }

/* ═════════════════════════════════════════════════════════════
   HEADER (KADOSH ▸ Role)
   ═════════════════════════════════════════════════════════════ */
.kds-header {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--kds-header-h);
  padding: 0 var(--kds-space-4);
  background: var(--kds-bg-surface);
  border-bottom: 1px solid var(--kds-border-subtle);
  position: sticky; top: 0; z-index: var(--kds-z-sticky);
}
.kds-header__brand {
  display: flex; align-items: center; gap: var(--kds-space-3);
  min-width: 0;
}
.kds-header__logo {
  width: 32px; height: 32px;
  border-radius: var(--kds-radius-md);
  flex-shrink: 0;
}
.kds-header__title-stack {
  display: flex; flex-direction: column; min-width: 0;
}
.kds-header__title {
  font-family: var(--kds-font-display);
  font-size: var(--kds-text-xl);
  font-weight: var(--kds-weight-black);
  letter-spacing: var(--kds-tracking-wider);
  text-transform: uppercase;
  line-height: 1;
  color: var(--kds-fg-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60vw;
}
.kds-header__role {
  font-size: var(--kds-text-2xs);
  font-weight: var(--kds-weight-bold);
  letter-spacing: var(--kds-tracking-wider);
  text-transform: uppercase;
  color: var(--kds-fg-tertiary);
  margin-top: 2px;
}
.kds-header__actions {
  display: flex; align-items: center; gap: var(--kds-space-1);
}

/* ═════════════════════════════════════════════════════════════
   BOTTOM NAV
   ═════════════════════════════════════════════════════════════ */
.kds-bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--kds-bottomnav-h);
  padding: var(--kds-space-2) var(--kds-space-2) calc(var(--kds-space-2) + env(safe-area-inset-bottom));
  background: rgba(20,20,28,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--kds-border-subtle);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  z-index: var(--kds-z-sticky);
}
.kds-bottomnav__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  background: transparent;
  border: 0;
  color: var(--kds-fg-tertiary);
  font-size: var(--kds-text-2xs);
  font-weight: var(--kds-weight-semibold);
  letter-spacing: var(--kds-tracking-wide);
  cursor: pointer;
  border-radius: var(--kds-radius-md);
  transition: color var(--kds-dur-fast) var(--kds-ease-out), background var(--kds-dur-fast) var(--kds-ease-out);
  -webkit-tap-highlight-color: transparent;
}
.kds-bottomnav__item:hover { color: var(--kds-fg-primary); }
.kds-bottomnav__item[aria-selected="true"] {
  color: var(--kds-brand-primary);
  background: var(--kds-brand-primary-soft);
}

/* ═════════════════════════════════════════════════════════════
   UTILITIES (mínimas — só o que falta repetir muito)
   ═════════════════════════════════════════════════════════════ */
.kds-stack    { display: flex; flex-direction: column; gap: var(--kds-space-3); }
.kds-row      { display: flex; align-items: center; gap: var(--kds-space-2); }
.kds-row--end { justify-content: flex-end; }
.kds-spacer   { flex: 1; }
.kds-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;
}