/* ==========================================================
   Folha de estilo base da marca (base do design-system)
   Usada por todas as telas do app. Requer o CSS do Quasar carregado antes.
   ========================================================== */

:root {
  /* ===== Identidade da marca ===== */
  --g-azul:    #0511F2;  /* azul elétrico — assinatura (preenchimentos) */
  --g-azul-2:  #1F74BF;  /* azul aço */
  --g-ouro:    #F2B807;  /* dourado — destaque */
  --g-laranja: #F27F1B;  /* laranja */
  --g-preto:   #0D0D0D;  /* preto base */

  /* ===== Semânticas Quasar (tons legíveis no dark p/ frente) ===== */
  --q-primary:   #4D82FF;
  --q-secondary: #2E90E0;
  --q-accent:    #F2B807;
  --q-warning:   #F27F1B;
  --q-info:      #3A9BE6;
  --q-positive:  #17B877;
  --q-negative:  #F2444E;
  --q-dark:      #1F2027;
  --q-dark-page: #0D0D0D;

  /* superfícies e apoio */
  --surface:     #1F2027;
  --surface-2:   #2A2B33;
  --borda:       rgba(255,255,255,.10);
  --borda-forte: rgba(31,116,191,.55);
  --texto-suave: rgba(255,255,255,.64);
}

html, body { background: var(--g-preto); }
body.body--dark { background: var(--g-preto); }

/* ====== SEM SOMBRAS (elimina o halo claro no dark) ====== */
.q-card, .q-btn, .q-btn-group, .q-menu, .q-banner, .q-header, .q-drawer, .q-footer,
.q-editor, .q-table, .q-table__card, .q-bar, .q-notification, .q-tooltip, .q-fab__actions,
.q-expansion-item, .q-expansion-item__container, .q-uploader, .q-time, .q-date, .q-color,
.q-field--filled .q-field__control, .q-field--filled .q-field__control:before,
.q-item, .q-chip, .q-avatar, .q-carousel, .q-dialog__inner > *, .q-card--bordered,
.shadow-1,.shadow-2,.shadow-3,.shadow-4,.shadow-5,.shadow-6,.shadow-7,.shadow-8,.shadow-9,.shadow-10 {
  box-shadow: none !important;
}
.q-menu, .q-tooltip, .q-date, .q-time, .q-color, .q-dialog__inner > .q-card,
.q-bottom-sheet, .q-notification { border: 1px solid var(--borda-forte); }

/* ====== Chrome de app (cabeçalho / menu lateral) ====== */
.q-header { background: var(--g-preto) !important; border-bottom: 1px solid var(--borda); position: relative; }
.q-header::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--g-ouro); }
.q-drawer { background: #17181D !important; border-right: 1px solid var(--borda) !important; }
.q-drawer .q-item__label--header { color: var(--g-ouro) !important; text-transform: uppercase; letter-spacing: 1.1px; font-size: 11px; font-weight: 800; }
.q-drawer .q-item { border-radius: 8px; margin: 1px 8px; min-height: 34px; }
.q-drawer .q-item:hover { background: rgba(46,144,224,.16); }

/* ====== Botões / chips ====== */
.q-btn.bg-accent { color: #0D0D0D !important; }
.q-btn:not(.q-btn--round):not(.q-btn--rounded):not(.q-btn--fab):not(.q-btn--fab-mini):not(.q-btn-group .q-btn):not(.q-btn-toggle .q-btn) { border-radius: 11px; }
.q-btn-group, .q-btn-toggle { border-radius: 11px; overflow: hidden; }
.q-chip { font-size: 12px; }
.q-chip__icon { font-size: 16px; }
.q-chip .q-avatar { font-size: 20px; }

/* Badges de notificação (contadores) — redondinhos */
.q-badge.badge-round { min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; line-height:1; }

/* ====== Cantos "um pouco rounded" ====== */
.q-card { border-radius: 12px; overflow: hidden; }
.q-toolbar.rounded-borders { border-radius: 12px; }
/* filled: só o topo arredondado (base reta p/ casar com a linha do active) */
.q-field--filled .q-field__control, .q-field--filled .q-field__control::before { border-radius: 10px 10px 0 0 !important; }
.q-field--outlined .q-field__control { border-radius: 10px !important; }

/* Fundo dos inputs filled: suave nos dois temas, foco com leve tom azul (nada de cinza escuro) */
.q-field--filled .q-field__control:before { background: rgba(128,138,157,.14) !important; border-bottom-color: var(--borda) !important; }
.q-field--filled .q-field__control:hover:before { background: rgba(128,138,157,.20) !important; }
.q-field--filled.q-field--focused .q-field__control:before { background: rgba(255,255,255,.10) !important; border-bottom-color: rgba(255,255,255,.35) !important; }

/* ===== NUNCA anel/borda AZUL de foco em NENHUM lugar do sistema (sem caixa também) ===== */
*:focus, *:focus-visible { outline: none !important; box-shadow: none !important; }
/* linha de foco dos inputs: branca, nunca azul */
.q-field--highlighted .q-field__control:after,
.q-field--focused .q-field__control:after { color: rgba(255,255,255,.6) !important; border-color: rgba(255,255,255,.6) !important; }

/* Campos numéricos: esconde o spinner nativo do navegador; usar .stepper (setinhas da marca) */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.stepper { display: flex; flex-direction: column; margin-right: -6px; }
.stepper .q-btn { min-height: 0; height: 17px; width: 26px; padding: 0; color: var(--texto-suave); }
.stepper .q-btn:hover { color: var(--q-primary); }
.stepper .q-btn .q-icon { font-size: 17px; }

/* Layout de formulário SEM gutters do Quasar (evita margens negativas que vazam do modal) */
.form-col { display: flex; flex-direction: column; gap: 16px; }
.form-lin { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.form-lin > * { min-width: 0; }

/* Abas ativas em ouro */
.q-tab--active { color: var(--g-ouro) !important; }
.q-tab__indicator { background: var(--g-ouro) !important; height: 3px; }

/* Scrollbar e seleção */
/* Scrollbar fina e discreta (translúcida, sem azul), funciona no claro e no escuro */
* { scrollbar-width: thin; scrollbar-color: rgba(128,138,157,.45) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(128,138,157,.45); border-radius: 8px; border: none; }
*::-webkit-scrollbar-thumb:hover { background: rgba(128,138,157,.7); }
::selection { background: rgba(242,184,7,.32); }

/* ====== Responsividade base ====== */
img, .q-video, .q-table, .q-editor, .q-carousel, .q-scroll-area, .q-virtual-scroll, .q-parallax { max-width: 100%; }

/* ====== Fundo padrão das telas de entrada (visual parallax da marca) ====== */
.auth-bg {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 28px 16px;
  background: var(--g-preto);
  background-image: radial-gradient(circle at 1px 1px, rgba(77,130,255,.16) 1px, transparent 0);
  background-size: 26px 26px;
}