/* ============================================================
   components.css — Botões, Avatares, Toasts, Overlay e Modal
   ============================================================ */

/* ======================= USER CHIP + AVATAR ======================= */
.user-chip{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.35rem .65rem .35rem .45rem;
  border-radius:999px;
  background: var(--card-bg);
  border:1px solid var(--divider);
  color: var(--text-color);
  transition: box-shadow .18s ease, transform .12s ease, border-color .18s ease;
}
.user-chip:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--bs-primary) 35%, transparent);
  box-shadow: 0 .35rem 1rem rgba(0,0,0,.06);
}

/* Texto do chip (se usado em outras telas) */
.user-chip .d-none.d-sm-inline{
  max-width: 22ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  font-weight: 600;
  letter-spacing:.2px;
}

/* Avatar “neo” com anel degradê (usa --avatar-h definido no JS) */
.avatar-neo{
  position: relative;
  width: 32px; height: 32px;
  display: inline-flex;            /* centraliza verticalmente com o texto */
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.avatar-neo.lg{ width: 44px; height: 44px; }

.avatar-neo .ring{
  position:absolute; inset:-2px; border-radius:50%;
  background: conic-gradient(from 180deg,
    hsl(var(--avatar-h, 220) 85% 56%),
    hsl(calc(var(--avatar-h, 220) + 60) 85% 56%),
    hsl(calc(var(--avatar-h, 220) + 120) 85% 56%),
    hsl(var(--avatar-h, 220) 85% 56%)
  );
  opacity:.9;
}
[data-bs-theme="dark"] .avatar-neo .ring{ opacity:.75; }

.avatar-neo .inner{
  position:absolute; inset:2px; border-radius:50%;
  background: var(--card-bg);
  border: 1px solid var(--divider);
  display:flex; align-items:center; justify-content:center;
}

.avatar-neo .initials{
  position: relative; z-index: 1;
  font-weight: 700;
  font-size: .9rem;
  line-height: 1;
  color: var(--text-color);
}
.avatar-neo.lg .initials{ font-size: 1.05rem; }

/* Chip minimalista da navbar (só as iniciais, sem seta) */
.navbar .user-chip.only-avatar{
  gap: 0;
  padding: .28rem .28rem;      /* alvo de clique confortável */
  border-radius: 999px;
}
.navbar .user-chip.only-avatar:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .35);
}

/* ============================ BOTÕES ============================== */
.btn-min { min-width: 140px; }
.btn-sm .bi { margin-right: .35rem; }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); }

.btn-soft-primary{
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), .12);
  border: 1px solid rgba(var(--bs-primary-rgb), .25);
}
.btn-soft-primary:hover{
  background: rgba(var(--bs-primary-rgb), .18);
  border-color: rgba(var(--bs-primary-rgb), .35);
}

.btn-soft-success{
  color: var(--bs-success);
  background: rgba(var(--bs-success-rgb), .14);
  border: 1px solid rgba(var(--bs-success-rgb), .28);
}
.btn-soft-success:hover{
  background: rgba(var(--bs-success-rgb), .2);
  border-color: rgba(var(--bs-success-rgb), .38);
}

.btn-soft-warning{
  color: var(--bs-warning);
  background: rgba(var(--bs-warning-rgb), .18);
  border: 1px solid rgba(var(--bs-warning-rgb), .35);
}
.btn-soft-warning:hover{
  background: rgba(var(--bs-warning-rgb), .24);
  border-color: rgba(var(--bs-warning-rgb), .45);
}

.btn-soft-danger{
  color: var(--bs-danger);
  background: rgba(var(--bs-danger-rgb), .14);
  border: 1px solid rgba(var(--bs-danger-rgb), .28);
}
.btn-soft-danger:hover{
  background: rgba(var(--bs-danger-rgb), .2);
  border-color: rgba(var(--bs-danger-rgb), .38);
}

/* ============================= TOASTS ============================= */
/* container fixo logo abaixo da navbar */
.toast-container-fixed{
  position: fixed;
  left: 50%;
  top: calc(var(--navbar-h, 64px) + .5rem);
  transform: translateX(-50%);
  z-index: 1080;
  max-width: 100vw;
  padding: 1rem;
  display: flex; flex-direction: column; gap: .5rem;
  pointer-events: none;
}
.toast-container-fixed .toast{ pointer-events: auto; }

/* Vars locais */
:root{
  --toast-max-width: 520px;
  --toast-font-size: 0.975rem;
  --toast-icon-size: 1.1rem;
  --toast-padding-y: .75rem;
  --toast-accent-w: 6px;
  --toast-radius: .75rem;
}

/* cartão do toast (usa --accent do HTML) */
.toast.accent{
  position: relative; display: flex !important; overflow: hidden !important;
  width: min(100vw - 2rem, var(--toast-max-width)) !important;
  font-size: var(--toast-font-size);
  --bs-toast-padding-x: .75rem;
  padding-left: calc(var(--bs-toast-padding-x) + var(--toast-accent-w));
  border-radius: var(--toast-radius) !important;
  background-clip: padding-box;

  /* fundo tingido pela accent */
  background:
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--accent) 10%, transparent),
      color-mix(in srgb, var(--accent) 10%, transparent)
    ),
    var(--card-bg) !important;
  color: var(--text-color) !important;

  /* borda levemente colorida */
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent) !important;
}
[data-bs-theme="dark"] .toast.accent{
  background:
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--accent) 14%, transparent),
      color-mix(in srgb, var(--accent) 14%, transparent)
    ),
    var(--card-bg) !important;
  border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important;
}

/* faixa colorida à esquerda */
.toast.accent::before{
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: var(--toast-accent-w);
  background: var(--accent);
  opacity: .95;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
  transform: translateZ(0);
}

/* conteúdo */
.toast .toast-body{
  flex: 1 1 auto; min-width: 0;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.35;
  padding-top: var(--toast-padding-y) !important;
  padding-bottom: var(--toast-padding-y) !important;
  padding-left: 0 !important; padding-right: 0 !important;
  margin-left: .5rem;
}

/* badge do ícone */
.toast-badge{
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin: .35rem .25rem; flex: 0 0 26px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
}
.toast-badge i{ font-size: var(--toast-icon-size) !important; }

/* barra de progresso */
.toast .toast-progress{
  height: 3px; opacity: .35;
  border-bottom-left-radius: calc(var(--toast-radius) - 2px);
  border-bottom-right-radius: calc(var(--toast-radius) - 2px);
  animation: toastProgress var(--toast-delay, 4000ms) linear forwards;
  background: color-mix(in srgb, var(--accent) 85%, white 15%);
}
[data-bs-theme="dark"] .toast .toast-progress{
  background: color-mix(in srgb, var(--accent) 85%, black 15%);
}
@keyframes toastProgress { from { width: 100%; } to { width: 0%; } }
@media (prefers-reduced-motion: reduce){ .toast .toast-progress { animation: none; width: 0; } }

/* close visível nos dois temas */
.toast .btn-close{ opacity: .55; filter: none; }
[data-bs-theme="dark"] .toast .btn-close{ opacity: .65; filter: invert(1) grayscale(1); }
.toast .btn-close:hover{ opacity: .9; }

/* =========================== OVERLAY ============================= */
/* Sol + Terra (sólido, sem rastro) */
:root{
  --overlay-bg: rgba(255,255,255,.86);
  --overlay-text: var(--text-color);
  --overlay-orbit: rgba(var(--bs-primary-rgb), .35);
  --sun: #FFC107;
  --sun-soft: #FFE082;
  --earth: #2E86FF;
}
[data-bs-theme="dark"]{
  --overlay-bg: rgba(0,0,0,.88);
  --overlay-orbit: rgba(255,255,255,.22);
}

.loading-overlay{
  display:none; position:fixed; inset:0; z-index:9999;
  background: var(--overlay-bg);
  align-items:center; justify-content:center; flex-direction:column;
  text-align:center; padding: 2rem;
}
.overlay-title{
  margin-top: 1.25rem;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 700;
  color: var(--overlay-text);
}
.overlay-sub{
  margin-top:.25rem;
  font-size:.95rem;
  color: var(--muted-color);
}

.orbita-container{ position: relative; width: 200px; height: 200px; }
.nucleo{
  position:absolute; top:50%; left:50%;
  width:46px; height:46px; border-radius:50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 30% 30%, var(--sun-soft), var(--sun));
  box-shadow: 0 0 14px var(--sun), 0 0 28px var(--sun);
}
.orbit{
  position:absolute; top:50%; left:50%;
  width:150px; height:150px; border-radius:50%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--overlay-orbit);
  animation: overlaySpin 6s linear infinite;
  will-change: transform;
}
.orbit::before{ /* Terra */
  content:""; position:absolute; top:50%; left:100%;
  width:16px; height:16px; border-radius:50%;
  transform: translate(-50%, -50%);
  background: var(--earth);
  box-shadow: 0 0 6px var(--earth), 0 0 12px var(--earth);
  z-index: 1;
}
/* garante que nenhum rastro antigo apareça */
.orbit::after{ content: none !important; }

@keyframes overlaySpin{
  0% { transform: translate(-50%, -50%) rotate(0); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (max-width: 480px){
  .orbita-container{ width: 160px; height: 160px; }
  .orbit{ width: 120px; height: 120px; }
  .nucleo{ width: 38px; height: 38px; }
}

/* ============================ MODAL ============================== */
.modal-content{
  background: var(--card-bg);
  color: var(--text-color);
  border: 1px solid var(--divider);
}
.modal-header{ border-bottom: 1px solid var(--divider); }
.modal-footer{ border-top: 1px solid var(--divider); }

/* === Modal: correção de cabeçalhos "subtle" no dark === */
[data-bs-theme="dark"] .modal .bg-warning-subtle{
  /* fundo = card + leve tinta do warning */
  background:
    linear-gradient(0deg,
      color-mix(in srgb, var(--bs-warning) 16%, transparent),
      color-mix(in srgb, var(--bs-warning) 16%, transparent)
    ),
    var(--card-bg) !important;
  border-bottom-color: color-mix(in srgb, var(--bs-warning) 28%, var(--divider)) !important;
}
[data-bs-theme="dark"] .modal .bg-danger-subtle{
  background:
    linear-gradient(0deg,
      color-mix(in srgb, var(--bs-danger) 14%, transparent),
      color-mix(in srgb, var(--bs-danger) 14%, transparent)
    ),
    var(--card-bg) !important;
  border-bottom-color: color-mix(in srgb, var(--bs-danger) 28%, var(--divider)) !important;
}
[data-bs-theme="dark"] .modal .bg-info-subtle{
  background:
    linear-gradient(0deg,
      color-mix(in srgb, var(--bs-info) 14%, transparent),
      color-mix(in srgb, var(--bs-info) 14%, transparent)
    ),
    var(--card-bg) !important;
  border-bottom-color: color-mix(in srgb, var(--bs-info) 28%, var(--divider)) !important;
}
[data-bs-theme="dark"] .modal .bg-success-subtle{
  background:
    linear-gradient(0deg,
      color-mix(in srgb, var(--bs-success) 14%, transparent),
      color-mix(in srgb, var(--bs-success) 14%, transparent)
    ),
    var(--card-bg) !important;
  border-bottom-color: color-mix(in srgb, var(--bs-success) 28%, var(--divider)) !important;
}

/* Título/ícone/fechar com contraste no dark */
[data-bs-theme="dark"] .modal .text-warning-emphasis,
[data-bs-theme="dark"] .modal .text-danger-emphasis,
[data-bs-theme="dark"] .modal .text-info-emphasis,
[data-bs-theme="dark"] .modal .text-success-emphasis{
  color: var(--text-color) !important;
  opacity: .95;
}
[data-bs-theme="dark"] .modal .btn-close{
  filter: invert(1) grayscale(1);
  opacity: .8;
}

/* Marca (logo) ✨ */
.brand-logo{
  display:inline-block;
  width:56px; height:56px;
  border-radius: 10px;
  background: var(--card-bg);
  box-shadow:
    0 1px 0 rgba(0,0,0,.04),
    0 6px 18px rgba(0,0,0,.08);
  padding: 6px;               /* “respiro” interno ao redor do ícone */
  object-fit: contain;        /* garante proporção */
  vertical-align: middle;     /* alinha com o título */
  border: 1px solid var(--divider);
}
@media (max-width: 480px){
  .brand-logo{ width:48px; height:48px; padding:5px; }
}

/* header com logo + título */
.page-title-lockup{
  display:flex; align-items:center; gap:.6rem;
}
.page-title-lockup h2{ margin:0; line-height:1.15; }

/* Marca (logo) ✨ */
.brand-logo-index{
  display:inline-block;
  width:70px; height:70px;
  border-radius: 10px;
  background: var(--card-bg);
  box-shadow:
    0 1px 0 rgba(0,0,0,.04),
    0 6px 18px rgba(0,0,0,.08);
  padding: 6px;               /* “respiro” interno ao redor do ícone */
  object-fit: contain;        /* garante proporção */
  vertical-align: middle;     /* alinha com o título */
  border: 1px solid var(--divider);
}
@media (max-width: 480px){
  .brand-logo-index{ width:48px; height:48px; padding:5px; }
}

/* Alternador de tema (ícone) */
.navbar .theme-toggle{
  line-height: 1;
  border-radius: .5rem;
}
.navbar .theme-toggle i{
  font-size: 1.15rem;
  vertical-align: middle;
}
.navbar .theme-toggle:hover{
  background: rgba(var(--bs-primary-rgb), .08);
  color: var(--bs-primary);
}
.navbar .theme-toggle:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .35);
}