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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --color-primary: #FFE600;          /* amarelo principal */
  --color-primary-dark: #D4C400;     /* amarelo mais escuro/dourado */
  --color-primary-dark-hover: #B8AA00; /* hover mais profundo */
  --color-primary-light: #FFF48A;    /* amarelo claro suave */
  --color-secondary: #6B7280;        /* cinza quente p/ combinar com amarelo */
  --color-accent: #FF9800;           /* laranja forte e coerente com amarelo */

  --color-bg: #F5F5F5;
  --color-bg-secondary: #f1f5f9;
  --color-text: #000000;
  --color-text-light: #64748b;
  --color-text-muted: #94a3b8;

  --color-sidebar-bg: #FFFFFF;
  --color-sidebar-hover: #FFE6E6;
  --color-border: #E0E0E0;
  --color-border-focus: #cbd5e1;
  --color-white: #FFFFFF;
  --color-hover: #EBEBEB;

  --color-success-text: #059669;
  --color-success-bg: #d1fae5;
  --color-error-text: #dc2626;
  --color-error-bg: #fee2e2;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sidebar-width: 240px;
  --navbar-height: 56px;
  --navbar-height-margin: 70px;
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  --color-primary-rgb: 255, 49, 49;
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.12);
  --gradient-separator: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
  --gradient-card: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9));

  /* Spacing */
  --spacing-xss: 0.10rem;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f0f0f;
    --color-bg-secondary: #1a1a1a;
    --color-sidebar-bg: #141414;
    --color-sidebar-hover: #1f1f1f;

    --color-text: #f5f5f5;
    --color-text-light: #b5b5b5;
    --color-text-muted: #8a8a8a;

    --color-border: #2a2a2a;
    --color-border-focus: #3a3a3a;

    --color-hover: #272727;

    /* Cores de feedback */
    --color-success-text: #4ade80;
    --color-success-bg: #064e3b;
    --color-error-text: #f87171;
    --color-error-bg: #4c1d1d;

    /* Sombras mais suaves para o dark */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.35);

    --gradient-card: linear-gradient(135deg, rgba(30, 30, 30, 0.9), rgba(20, 20, 20, 0.9));
    --gradient-separator: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  }

  body {
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  .layout {
    background-color: var(--color-bg-secondary);
  }

  .login-page {
    background: #000000;
  }

  .login-container {
    background: #151515;
    border-color: #2e2e2e;
  }

  .form-input,
  input,
  textarea,
  select {
    background: #1f1f1f;
    border-color: #333333;
    color: #ffffff;
  }

  input:focus,
  textarea:focus,
  select:focus {
    border-color: var(--color-primary);
    background: #262626;
  }

  .input-valid {
    background-color: rgba(5, 150, 105, 0.1);
    border-color: #10b981;
    color: var(--color-text);
  }

  .input-invalid {
    background-color: rgba(220, 38, 38, 0.1);
    border-color: #ef4444;
    color: var(--color-text);
  }

  /* Scrollbar Dark */
  ::-webkit-scrollbar-track {
    background-color: #1a1a1a;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #555;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #999;
  }
}

body{
    font-family: var(--font-family);
    background-color: #ffffff;
    overflow-x: hidden;
    
    display: flex;
}
.layout {
  position: relative;
  width: 100%;
}
input:focus,
textarea:focus {
    border-color: var(--color-primary);
    outline: none;
}
select:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 0.5px rgba(255, 49, 49, 1) /* cor primária suavizada */
}

/* Remove o highlight azul em elementos clicáveis no mobile */
* {
  -webkit-tap-highlight-color: transparent;
  /*-webkit-user-select: none;  Impede seleção de texto em mobile Safari */
  user-select: none;
  touch-action: manipulation; /* Evita delays e bugs ao clicar */
}

::selection {
  background-color: var(--color-primary); /* Cor de fundo da seleção */
  color: var(--color-white); /* Cor do texto selecionado */
}
::-webkit-scrollbar {
  width: 6px; /* Largura da barra de rolagem */
  height: 6px; /* Altura da barra de rolagem */
}
::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Cor de fundo da trilha da barra de rolagem */
}
::-webkit-scrollbar-thumb {
  background-color: #888; /* Cor do controle deslizante da barra de rolagem */
  border-radius: 6px; /* Borda arredondada do controle deslizante */
}
::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Cor do controle deslizante ao passar o mouse */
}

/*===== UTILS =====*/
.hidden {
    display: none !important;
}
.disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}
.select-readonly {
  pointer-events: none;
  background-color: #f5f5f5;
  color: #555;
  opacity: 0.7;
}
.input-valid {
  border: 1px solid var(--color-success-text);
  background-color: var(--color-success-bg);
  color: var(--color-text);
}
.input-invalid {
  border: 1px solid var(--color-error-text);
  background-color: var(--color-error-bg);
  color: var(--color-text);
}