/* ==========================================================================
   MetriFit — Painel Gestão (AdminJS)
   Identidade: dark navy + cyan (#00D1FF) + roxo (#7C4DFF), tipografia Montserrat.
   As cores estruturais vêm do branding.theme; aqui ficam os refinos que o
   tema não alcança (gradiente de fundo, fonte, scrollbars, foco, logo, login).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  --mf-bg: #070d1a;
  --mf-bg-alt: #0b1220;
  --mf-surface: #0f1b2d;
  --mf-cyan: #00d1ff;
  --mf-cyan-dark: #009fcc;
  --mf-purple: #7c4dff;
  --mf-border: #243550;
  --mf-text: #ffffff;
  --mf-text-muted: #8ba8c4;
}

html,
body {
  background: radial-gradient(1200px 600px at 75% -10%, #0b1a30 0%, var(--mf-bg) 60%) fixed,
    var(--mf-bg);
  color: var(--mf-text);
  font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Tipografia consistente em toda a aplicação */
button,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

/* Logo: mantém proporção e respiro no topo da sidebar */
img[src*='metrifit-logo'] {
  max-height: 30px;
  width: auto;
}

/* Links e foco na cor da marca */
a {
  color: var(--mf-cyan);
}
a:hover {
  color: #4ddeff;
}
*:focus-visible {
  outline: 2px solid var(--mf-cyan);
  outline-offset: 1px;
}

/* Botão primário: leve glow cyan→roxo, coerente com o app */
button[class*='Button'][color='primary'],
[data-css] button[type='submit'] {
  background-image: linear-gradient(135deg, var(--mf-cyan) 0%, #1565c0 100%);
  border: none;
  box-shadow: 0 4px 14px rgba(0, 209, 255, 0.25);
}
button[class*='Button'][color='primary']:hover {
  filter: brightness(1.06);
}

/* Tabela: cabeçalho com leve destaque e linhas com hover cyan translúcido */
table thead th {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  color: var(--mf-text-muted) !important;
}
table tbody tr:hover {
  background: rgba(0, 209, 255, 0.06) !important;
}

/* Inputs: borda discreta que acende em cyan no foco */
input,
select,
textarea {
  background: var(--mf-bg-alt) !important;
  color: var(--mf-text) !important;
  border-color: var(--mf-border) !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--mf-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 209, 255, 0.18) !important;
}

/* Tela de login: caixa navy elevada sobre o gradiente, com filete cyan no topo */
section[class*='Login'],
[data-css='login'] {
  background: transparent !important;
}
section[class*='Login'] form,
[data-css='login'] form,
section[class*='Login'] > div > div {
  background: var(--mf-surface) !important;
  border: 1px solid var(--mf-border);
  border-top: 3px solid var(--mf-cyan);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* Scrollbars na paleta da marca */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--mf-border) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: var(--mf-border);
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--mf-cyan-dark);
}

/* ==========================================================================
   Refinos por tela — para ficar coerente em todo o painel
   ========================================================================== */

/* Sidebar: respiro, grupos em maiúsculas discretas e item ativo com filete cyan */
nav a[href],
[class*='Navigation'] a {
  border-radius: 8px;
}
[class*='Navigation'] a:hover {
  background: rgba(0, 209, 255, 0.08) !important;
}
[class*='Navigation'] a[class*='isSelected'],
nav a[aria-current='page'] {
  background: rgba(0, 209, 255, 0.12) !important;
  box-shadow: inset 3px 0 0 var(--mf-cyan);
}
/* Rótulos de grupo da navegação */
[class*='Navigation'] [class*='Label'] {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  color: var(--mf-text-muted) !important;
}

/* Top bar / breadcrumb: fundo translúcido e separador sutil */
header,
[class*='TopBar'] {
  background: rgba(11, 18, 32, 0.7) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--mf-border);
}
[class*='Breadcrumb'] a {
  color: var(--mf-text-muted);
}
[class*='Breadcrumb'] a:hover {
  color: var(--mf-cyan);
}

/* Cards / boxes / drawer de criar-editar: superfície navy com borda da marca */
section[class*='Box'],
[class*='Card'],
[class*='Drawer'] {
  background: var(--mf-surface) !important;
  border-color: var(--mf-border) !important;
}
[class*='Drawer'] {
  border-left: 1px solid var(--mf-border);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5);
}

/* Rótulos das propriedades em show/edit */
[class*='PropertyLabel'],
label {
  color: var(--mf-text-muted) !important;
  font-weight: 600;
}

/* Botões secundários (contorno) e ação de perigo (delete) */
button[color='primary'][variant='outlined'],
a[class*='Button'][variant='text'] {
  border-color: var(--mf-border);
  color: var(--mf-cyan);
}
button[class*='Button'][color='danger'],
a[href*='/delete'] {
  color: #ff6b6b !important;
}
button[class*='Button'][color='danger']:hover {
  background: rgba(255, 68, 68, 0.12) !important;
}

/* Badges / chips de status e valores booleanos */
[class*='Badge'],
[class*='Chip'] {
  border-radius: 9999px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Dropdowns / selects (react-select) coerentes com o tema */
[class*='__menu'],
[class*='-menu'] {
  background: var(--mf-surface) !important;
  border: 1px solid var(--mf-border) !important;
}
[class*='__option--is-focused'],
[class*='-option']:hover {
  background: rgba(0, 209, 255, 0.1) !important;
}
[class*='__control'] {
  background: var(--mf-bg-alt) !important;
  border-color: var(--mf-border) !important;
}

/* Paginação: página atual em cyan */
[class*='Pagination'] a[class*='isCurrent'],
[class*='Pagination'] [aria-current='true'] {
  background: var(--mf-cyan) !important;
  color: var(--mf-bg) !important;
  border-color: var(--mf-cyan) !important;
}

/* Drawer de filtros: mesma superfície navy */
[class*='Filter'] {
  background: var(--mf-bg-alt) !important;
}

/* Login: logo maior e centralizado sobre a caixa */
section[class*='Login'] img[src*='metrifit-logo'],
[data-css='login'] img[src*='metrifit-logo'] {
  max-height: 44px;
  margin: 0 auto 8px;
  display: block;
}

/* Notices / alertas de validação */
[class*='Notice'] {
  border-radius: 10px;
  border: 1px solid var(--mf-border);
}

/* Loader na cor da marca */
[class*='Loader'] svg circle {
  stroke: var(--mf-cyan) !important;
}