/* DGenny Custom Branding CSS */
/* Cores: Laranja #ffbf48, Azul #07325b, Branco #e1e1e1, Preto #030303, Amarelo #f6f6e9 */

/* Import Saira font first */
@import url('https://fonts.googleapis.com/css2?family=Saira:wght@300;400;500;600;700&display=swap');

/* ============================================
   DIRECT CLASS OVERRIDES - Override Tailwind compiled classes
   These have hardcoded #2781f6 that we need to replace with #ffbf48
   ============================================ */

/* Primary brand background - buttons, etc */
.bg-n-brand {
  background-color: #ffbf48 !important;
}

.bg-n-brand\/10 {
  background-color: rgba(255, 191, 72, 0.1) !important;
}

.bg-n-brand\/5 {
  background-color: rgba(255, 191, 72, 0.05) !important;
}

.bg-n-brand\/20 {
  background-color: rgba(255, 191, 72, 0.2) !important;
}

/* Text colors */
.text-n-blue-text {
  color: #ffbf48 !important;
}

/* Outline/border colors */
.outline-n-brand {
  outline-color: #ffbf48 !important;
}

.border-n-brand {
  border-color: #ffbf48 !important;
}

/* Focus states */
.focus\:outline-n-brand:focus,
.dark\:focus\:outline-n-brand:focus {
  outline-color: #ffbf48 !important;
}

/* ============================================
   PRIMARY BUTTONS - All solid buttons
   ============================================ */

/* NextButton solid blue (default) - Login button, primary actions */
.bg-n-brand,
[class*="bg-n-brand"] {
  background-color: #ffbf48 !important;
}

/* Button hover states */
.hover\:enabled\:brightness-110:hover:enabled {
  filter: brightness(1.1) !important;
}

/* Faded button backgrounds */
.bg-n-brand\/10,
[class*="bg-n-brand/10"] {
  background-color: rgba(255, 191, 72, 0.1) !important;
}

.bg-n-brand\/20,
[class*="bg-n-brand/20"] {
  background-color: rgba(255, 191, 72, 0.2) !important;
}

/* Text colors for blue/brand elements */
.text-n-blue-text,
[class*="text-n-blue-text"] {
  color: #ffbf48 !important;
}

/* Outline colors */
.outline-n-brand,
[class*="outline-n-brand"] {
  outline-color: #ffbf48 !important;
}

/* ============================================
   TEAL/GREEN BUTTONS - Send button, success actions
   ============================================ */

.bg-n-teal-9,
[class*="bg-n-teal-9"],
.bg-n-teal-10,
[class*="bg-n-teal-10"] {
  background-color: #ffbf48 !important;
}

.text-n-teal-11,
[class*="text-n-teal-11"] {
  color: #07325b !important;
}

/* ============================================
   LINKS AND TEXT ACCENTS
   ============================================ */

/* Links in content areas */
a[class*="text-n-blue"],
.text-n-iris-11,
[class*="text-n-iris"] {
  color: #ffbf48 !important;
}

a[class*="text-n-blue"]:hover,
.text-n-iris-11:hover {
  color: #e6aa3c !important;
}

/* ============================================
   SIDEBAR AND NAVIGATION
   ============================================ */

/* Active/selected menu items */
.bg-n-alpha-2,
[class*="bg-n-alpha-2"] {
  background-color: rgba(255, 191, 72, 0.15) !important;
}

/* Selected conversation/item indicator */
.border-l-n-brand,
[class*="border-l-n-brand"] {
  border-left-color: #ffbf48 !important;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

/* Input focus states */
input:focus,
textarea:focus,
select:focus {
  outline-color: #ffbf48 !important;
  border-color: #ffbf48 !important;
}

/* Checkbox and toggle when checked */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: #ffbf48 !important;
  border-color: #ffbf48 !important;
}

/* ============================================
   BADGES AND TAGS
   ============================================ */

.bg-n-iris-9\/10,
[class*="bg-n-iris-9/10"] {
  background-color: rgba(255, 191, 72, 0.1) !important;
}

/* ============================================
   LOGIN PAGE - Dark background (same as interior)
   ============================================ */

/* Force dark background on ALL login page elements */
.bg-n-brand\/5 {
  background-color: #191919 !important;
}

/* Target the specific login page wrapper */
main.flex.flex-col.w-full.min-h-screen.py-20 {
  background-color: #191919 !important;
}

/* Override any bg-n-brand with opacity */
[class*="bg-n-brand/5"],
[class*="bg-n-brand/10"],
[class*="bg-n-brand\/5"],
[class*="bg-n-brand\/10"] {
  background-color: #191919 !important;
}

/* Target by style attribute if Tailwind inlines it */
main[class*="bg-n-brand"] {
  background-color: #191919 !important;
}

/* Dark mode - same dark background */
.dark main,
.dark .bg-n-brand\/5,
html.dark main {
  background-color: #191919 !important;
}

/* Ensure the body and html also have dark background for login */
body:has(main.py-20) {
  background-color: #191919 !important;
}

/* ============================================
   SPECIFIC COMPONENT OVERRIDES
   ============================================ */

/* Login page button */
button[type="submit"],
button[data-testid="submit_button"] {
  background-color: #ffbf48 !important;
  color: #07325b !important;
}

button[type="submit"]:hover,
button[data-testid="submit_button"]:hover {
  background-color: #e6aa3c !important;
}

/* "Adicionar Caixa de Entrada" and similar primary action buttons */
button.bg-n-brand,
a.bg-n-brand {
  background-color: #ffbf48 !important;
  color: #07325b !important;
}

/* Send message button (green/teal) */
button[class*="bg-n-teal"],
button[class*="teal"] {
  background-color: #ffbf48 !important;
  color: #07325b !important;
}

/* Conversation list - active conversation */
.conversation--active,
[class*="conversation"][class*="active"] {
  background-color: rgba(255, 191, 72, 0.1) !important;
  border-left: 3px solid #ffbf48 !important;
}

/* Notification/unread badges */
.badge,
[class*="badge"] {
  background-color: #ffbf48 !important;
  color: #07325b !important;
}

/* Progress indicators */
.progress,
[class*="progress"] {
  background-color: #ffbf48 !important;
}

/* ============================================
   FONT FAMILY
   ============================================ */

body,
html,
* {
  font-family: 'Saira', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* ============================================
   THEME COLOR META (for browser chrome)
   ============================================ */

/* This is handled in the HTML head, but reinforcing here */
:root {
  color-scheme: light dark;
}