/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Light scrollbar — client portal sidebar + main column (WebKit + Firefox) */
.portal-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.05) transparent;
}
.portal-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.portal-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.portal-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
}
.portal-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* Client portal — completion screen animations */
.success-circle {
  stroke: #22c55e;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: circle-draw 0.6s ease-out 0.2s forwards;
}

.success-check {
  stroke: #22c55e;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: check-draw 0.4s ease-out 0.7s forwards;
}

@keyframes circle-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}

.confetti-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  top: 50%;
  left: 50%;
  animation: confetti-burst 1.8s ease-out 0.9s forwards;
  opacity: 0;
}

@keyframes confetti-burst {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(var(--confetti-x), var(--confetti-y)) rotate(720deg) scale(0); }
}

.confetti-piece-0  { --confetti-x: -60px; --confetti-y: -80px; background: #22c55e; }
.confetti-piece-1  { --confetti-x: 50px;  --confetti-y: -70px; background: #3b82f6; }
.confetti-piece-2  { --confetti-x: -40px; --confetti-y: -90px; background: #f59e0b; }
.confetti-piece-3  { --confetti-x: 70px;  --confetti-y: -50px; background: #ef4444; }
.confetti-piece-4  { --confetti-x: -80px; --confetti-y: -30px; background: #8b5cf6; }
.confetti-piece-5  { --confetti-x: 30px;  --confetti-y: -95px; background: #22c55e; }
.confetti-piece-6  { --confetti-x: -55px; --confetti-y: -65px; background: #3b82f6; }
.confetti-piece-7  { --confetti-x: 65px;  --confetti-y: -85px; background: #f59e0b; }
.confetti-piece-8  { --confetti-x: -30px; --confetti-y: -75px; background: #ef4444; }
.confetti-piece-9  { --confetti-x: 45px;  --confetti-y: -60px; background: #8b5cf6; }
.confetti-piece-10 { --confetti-x: -70px; --confetti-y: -55px; background: #22c55e; }
.confetti-piece-11 { --confetti-x: 80px;  --confetti-y: -40px; background: #3b82f6; }

@media (prefers-reduced-motion: reduce) {
  .success-circle,
  .success-check {
    animation: none;
    stroke-dashoffset: 0;
  }
  .confetti-piece {
    display: none;
  }
}

/* Client portal — upload shimmer progress */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.portal-shimmer {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--wl-primary-soft, #e0e7ff) 25%,
    var(--wl-primary, #1E40AF) 50%,
    var(--wl-primary-soft, #e0e7ff) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Client portal — white-label background patterns */
body[data-portal-bg="dots"] {
  background-image: radial-gradient(circle, var(--portal-border-light, #e2e8f0) 1px, transparent 1px);
  background-size: 20px 20px;
}

body[data-portal-bg="gradient"] {
  background: linear-gradient(135deg, var(--wl-primary-soft, #e0e7ff) 0%, var(--portal-bg, #f8fafc) 50%, #fff 100%);
}

/* Client portal — os overrides responsivos dos tokens vivem no <style> do
   layouts/client_portal.html.erb (precisam vir DEPOIS do :root inline na cascata). */

/* Client portal — chips de opção (OR-group). O input radio fica sr-only;
   o selecionado é estilizado via :has(input:checked) no soft do accent white-label. */
.portal-chip {
  border-color: var(--color-qx-borda);
  background-color: #fff;
  font-size: var(--portal-body-size, 16px);
}
.portal-chip__label { font-weight: 400; }
.portal-chip:hover { border-color: var(--color-qx-cinza-medio); }
.portal-chip:has(input:checked) {
  border-color: var(--wl-primary, var(--portal-accent));
  background-color: var(--wl-primary-soft, #eef2ff);
}
.portal-chip:has(input:checked) .portal-chip__label { font-weight: 500; }
.portal-chip:has(input:focus-visible) {
  outline: 2px solid var(--wl-focus-ring, var(--portal-accent));
  outline-offset: 2px;
}

/* Botão "Próximo" do portal — ênfase dinâmica (document-navigator#syncNextEmphasis):
   secundário (outline) enquanto o nó ativo está incompleto; primário (accent)
   quando completo. Garante um único primário por vez na tela. */
.portal-next {
  border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.portal-next[data-emphasis="secondary"] {
  background-color: #fff;
  color: var(--portal-text-dark, var(--color-qx-preto));
  border-color: var(--color-qx-borda);
}
.portal-next[data-emphasis="primary"] {
  background-color: var(--portal-accent);
  color: #fff;
  border-color: transparent;
}

/* Conteúdo rolável do nó. overflow-x: hidden evita o "samba" lateral (o
   overflow-y: auto faz o eixo X computar auto e qualquer sub-pixel vira scroll).
   O respiro no fim só existe quando há scroll de verdade — o controller
   overflow-padding marca data-has-overflow, então o padding aparece apenas aí
   (não como vão fixo). Vale pra todas as telas que usam esta área. */
.portal-main-scroll-area { overflow-x: hidden; }
.portal-main-scroll-area[data-has-overflow="true"] {
  padding-bottom: var(--portal-scroll-safe-bottom);
}

/* Drawer mobile: backdrop em fade + painel em slide (controlado por .drawer-open
   no portal_drawer_controller). Durações casadas com o timeout de 220ms do JS. */
[data-portal-drawer-target="drawer"] > div:first-child {
  opacity: 0;
  transition: opacity 0.2s ease;
}
[data-portal-drawer-target="drawer"] nav {
  transform: translateX(-100%);
  transition: transform 0.22s ease;
}
[data-portal-drawer-target="drawer"].drawer-open > div:first-child { opacity: 1; }
[data-portal-drawer-target="drawer"].drawer-open nav { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  [data-portal-drawer-target="drawer"] > div:first-child,
  [data-portal-drawer-target="drawer"] nav { transition: none; }
}


/* Client portal — lista de docs: sem gap; faixas encostam (coluna contínua) */
.portal-sidebar-group__children {
  gap: 0;
}

/* Respiro só antes de um subgrupo (ex.: outro sócio), não entre docs da mesma lista */
.portal-sidebar-group__children > li + li:has(> div[data-controller~="sidebar-group"]) {
  margin-top: 12px;
}

/* Eyebrow: label discreto para separar seções e sub-blocos (Sócios admin / Sócios) */
.portal-sidebar-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--portal-text-muted, #90a1b9);
}

/* Section eyebrow carrega o título interpolado pelo operador; quando o mesmo
   prefixo se repete por operação (ex.: mesmo fornecedor), o valor que
   diferencia (contrato/valor) só aparece se permitir wrap. */
.portal-sidebar-eyebrow--section {
  align-items: flex-start;
  line-height: 1.4;
}

/* Sob a eyebrow: descrição em case normal pra carregar a parte da expressão
   interpolada que não couber num label (datas, valores, contrato, etc.). */
.portal-sidebar-section-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.portal-sidebar-section-description {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--portal-text-secondary, #62748e);
  overflow-wrap: anywhere;
}

.portal-sidebar-eyebrow__count {
  display: inline-flex;
  align-items: center;
  height: 14px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--portal-border-light, #e2e8f0);
  color: var(--portal-text-secondary, #62748e);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Separador fino entre seções múltiplas no menu */
.portal-sidebar-section + .portal-sidebar-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--portal-border-light, #e2e8f0);
}

/* Sidebar: idle = cinza, selecionado = accent */
.portal-sidebar-node__rail {
  flex: 0 0 var(--portal-sidebar-rail-width, 2px);
  width: var(--portal-sidebar-rail-width, 2px);
  align-self: stretch;
  min-height: 18px;
  border-radius: 1px;
  background: var(--portal-sidebar-rail-idle, #d1d5db);
  opacity: 1;
  transition: background-color 0.12s ease, opacity 0.12s ease;
}

.portal-sidebar-node[data-active="true"] .portal-sidebar-node__rail {
  background: var(--portal-accent, #f27122);
}

.portal-sidebar-node:hover .portal-sidebar-node__rail {
  background: var(--portal-sidebar-rail-idle-hover, #b8c0cc);
}

.portal-sidebar-node[data-active="true"]:hover .portal-sidebar-node__rail {
  background: var(--portal-accent, #f27122);
}

/* Folha: hover só no bloco texto+check — não cobre a faixa; tom bem leve */
.portal-sidebar-node {
  font-size: var(--portal-sidebar-leaf-font-size, 13px);
  outline: none;
}

.portal-sidebar-node__body {
  border-radius: 6px;
  padding: 2px 2px 2px 4px;
  min-width: 0;
  transition: background-color 0.14s ease;
}

.portal-sidebar-node__label {
  font-weight: 400;
  color: var(--portal-text-dark, #1d293d);
  transition: color 0.14s ease, font-weight 0.14s ease;
}

.portal-sidebar-node[data-active="true"] .portal-sidebar-node__label {
  font-weight: 600;
}

.portal-sidebar-node:hover:not([data-active="true"]) .portal-sidebar-node__body {
  background: color-mix(in srgb, var(--portal-text-dark, #1d293d) 2.2%, transparent);
}

.portal-sidebar-node:hover:not([data-active="true"]) .portal-sidebar-node__label {
  color: var(--portal-text-medium, #314158);
  font-weight: 500;
}

.portal-sidebar-node[data-active="true"]:hover .portal-sidebar-node__body {
  background: color-mix(in srgb, var(--portal-accent, #f27122) 3%, transparent);
}

/* Cabeçalhos Empresa / Sócio / Operação */
.portal-sidebar-toggle {
  border-radius: 6px;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.portal-sidebar-toggle:hover {
  background: color-mix(in srgb, var(--portal-text-dark, #1d293d) 2.5%, transparent);
}

.portal-sidebar-toggle:hover .font-semibold {
  color: var(--portal-text-medium, #314158);
}

/* Doc / group “done” check — verde (Figma) */
.portal-sidebar-node__check {
  color: var(--portal-sidebar-check, #16a34a);
}

.portal-sidebar-node:focus,
.portal-sidebar-node:focus-visible {
  outline: none;
}

.portal-sidebar-node:focus-visible .portal-sidebar-node__body {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--portal-accent, #1d4ed8) 18%, transparent);
}

.portal-sidebar-toggle:focus,
.portal-sidebar-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--portal-accent, #1d4ed8) 18%, transparent);
  border-radius: 6px;
}

/* Client portal — the OCR validation_row rendered inside a document panel sits
   right next to that document's own upload form, so its "Reenviar" button (which
   only navigates to this same node) leads nowhere. It's meaningful only in the
   validation summary, which renders the row outside this wrapper. Scope it out of
   the panel — and keep it hidden even after a live :ocr_status broadcast/poll
   patches the row back in with the button attached. */
.portal-validation-inline [data-document-node-key] {
  display: none;
}

/* Links inside document type descriptions (client portal) */
.portal-description a {
  color: var(--portal-accent, #2563EB);
  text-decoration: underline;
}

/* Guided tour — highlight target sidebar link */
.tour-highlight {
  position: relative;
  z-index: 45;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5), 0 0 12px rgba(99, 102, 241, 0.2);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}