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

:root {
    color-scheme: dark;
    --bg-color-1: #09090b; 
    --bg-secondary: #18181b; 
    --input-bg: #131316; 
    --card: rgba(20, 20, 24, 0.4);
    --border: #27272a; 
    --text: #fafafa;
    --text-muted: #a1a1aa;
    --primary: #ffffff; 
    --drop-shadow: 0 10px 40px rgba(0,0,0,0.8);
}

html.light-mode {
    color-scheme: light;
    --bg-color-1: #f4f4f5; 
    --bg-secondary: #ffffff; 
    --input-bg: #ffffff; 
    --card: rgba(255, 255, 255, 0.8);
    --border: #e4e4e7; 
    --text: #18181b; 
    --text-muted: #71717a;
    --primary: #000000; 
    --drop-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--bg-color-1);
    color: var(--text);
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.fade-in { animation: fadeIn 0.3s ease-out forwards; }
.fade-up { animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.card-panel { background-color: var(--bg-secondary); border: 1px solid var(--border); border-radius: 1.5rem; }
.card-stat { background-color: var(--input-bg); border: 1px solid var(--border); border-radius: 1rem; transition: border-color 0.2s ease; }

@media (hover: hover) { .card-stat:hover { border-color: var(--text-muted); } }

/* CAMPOS NATIVOS COM ALTURA FIXA */
.input-field { 
    background-color: var(--input-bg); border: 1px solid var(--border); color: var(--text); 
    border-radius: 0.75rem; padding: 0.75rem 1rem; width: 100%; outline: none; 
    transition: border-color 0.2s ease; font-size: 0.875rem; font-weight: 500; 
    height: 42px; display: flex; align-items: center;
}
.input-field:focus { border-color: var(--text-muted); }
.input-field::placeholder { color: var(--text-muted); opacity: 0.5; font-weight: 500; }
textarea.input-field { height: auto; align-items: flex-start; }

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; }

/* =========================================
   BOTÕES - Alinhamento Perfeito 42px
========================================= */
.btn-primary, .btn-secondary, .btn-sm {
    height: 42px; 
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.75rem; transition: all 0.2s ease; cursor: pointer;
}

.btn-primary { background-color: var(--primary); color: var(--bg-color-1); font-weight: 700; padding: 0 1.5rem; font-size: 0.8125rem; border: 1px solid transparent; }
.btn-primary:active:not(:disabled) { opacity: 0.8; transform: translateY(1px); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary { background-color: transparent; color: var(--text); font-weight: 600; padding: 0 1.5rem; font-size: 0.8125rem; border: 1px solid var(--border); }
@media (hover: hover) { .btn-secondary:hover:not(:disabled) { border-color: var(--text-muted); } }
.btn-secondary:active:not(:disabled) { opacity: 0.7; transform: translateY(1px); }
.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-sm { padding: 0 1rem !important; font-size: 0.75rem !important; border-radius: 0.6rem !important; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }

.btn-icon { background-color: transparent !important; color: var(--text-muted); border: none !important; border-radius: 0.75rem; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; transition: color 0.2s ease; cursor: pointer; padding: 0; box-shadow: none !important; }
@media (hover: hover) { .btn-icon:hover:not(:disabled) { color: var(--text); } .btn-icon.danger:hover:not(:disabled) { color: #ef4444; } }
.btn-icon:active:not(:disabled) { opacity: 0.6; transform: scale(0.95); }

.tab-btn { color: var(--text-muted); font-weight: 600; font-size: 0.875rem; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: all 0.2s; cursor: pointer; }
.tab-btn.active { background-color: var(--primary); color: var(--bg-color-1); border: 1px solid var(--primary); }

/* DROPDOWN CUSTOMIZADO INFALÍVEL */
.custom-drop-btn { cursor: pointer; user-select: none; }
.custom-drop-btn.active { border-color: var(--text-muted); }
.custom-drop-menu { box-shadow: var(--drop-shadow); background-color: var(--bg-secondary); border: 1px solid var(--border); border-radius: 0.75rem; position: absolute; left: 0; right: 0; z-index: 99999; max-height: 250px; overflow-y: auto; display: none; padding: 0.5rem 0; margin-top: 4px; top: calc(100% + 4px) !important; bottom: auto !important; }
.custom-drop-item { padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 500; color: var(--text); cursor: pointer; border-bottom: 1px solid var(--border); }
.custom-drop-item:last-child { border-bottom: none; }
@media (hover: hover) { .custom-drop-item:hover { background-color: var(--input-bg); } }
#toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 999999; display: flex; flex-direction: column; gap: 0.5rem; }

/* =========================================
   FLATPICKR (Sem Balão e Mês Visível Limpo)
========================================= */
.flatpickr-calendar { background: var(--bg-secondary) !important; border: 1px solid var(--border) !important; box-shadow: var(--drop-shadow) !important; font-family: 'Montserrat', sans-serif !important; margin-top: 4px !important; }
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after, .flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after { display: none !important; }

.flatpickr-months { display: flex !important; align-items: center !important; justify-content: center !important; padding: 1rem 1rem 0.5rem 1rem !important; background: transparent !important; position: relative !important; }
.flatpickr-month { background: transparent !important; color: var(--text) !important; height: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 1 !important; overflow: hidden !important; }

.flatpickr-current-month { font-size: 0.875rem !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; position: static !important; width: auto !important; height: auto !important; left: auto !important; cursor: default !important; pointer-events: none !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months { background: transparent !important; color: var(--text) !important; font-size: 0.875rem !important; font-weight: 700 !important; outline: none !important; padding: 0 !important; margin: 0 !important; appearance: none; -webkit-appearance: none; border: none !important; cursor: default !important; pointer-events: none !important;}
.flatpickr-current-month input.cur-year { font-weight: 700 !important; color: var(--text) !important; font-size: 0.875rem !important; background: transparent !important; padding: 0 !important; margin-left: 0.25rem !important; border: none !important; box-shadow: none !important; cursor: default !important; pointer-events: none !important;}
.numInputWrapper span.arrowUp, .numInputWrapper span.arrowDown { display: none !important; }

.flatpickr-weekdays { display: flex !important; background: transparent !important; border: none !important; margin-bottom: 0.5rem !important; box-shadow: none !important; }
.flatpickr-weekdaycontainer { display: flex !important; flex: 1 !important; }
span.flatpickr-weekday { color: var(--text-muted) !important; font-weight: 600 !important; font-size: 0.75rem !important; background: transparent !important; border: none !important; box-shadow: none !important; flex: 1 !important; text-align: center !important; margin: 0 !important; padding: 0 !important;}

.flatpickr-innerContainer { border: none !important; background: transparent !important; box-shadow: none !important;}
.flatpickr-days { border: none !important; background: transparent !important; width: 100% !important; }
.dayContainer { border: none !important; background: transparent !important; box-shadow: none !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important;}

.flatpickr-day { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 40px !important; height: 38px !important; margin: 0 auto !important; color: var(--text) !important; border-radius: 0.5rem !important; border: 1px solid transparent !important; background: transparent !important; box-shadow: none !important; font-size: 14px !important; font-weight: 500 !important; transition: border-color 0.2s ease !important; flex-basis: auto !important; cursor: pointer !important; }
.flatpickr-day.today { border-color: var(--border) !important; color: var(--text) !important; }
.flatpickr-day.selected { background: var(--text) !important; border-color: var(--text) !important; color: var(--bg-color-1) !important; font-weight: 800 !important; }

/* Remove a 6ª linha caso ela seja inteiramente do mês seguinte */
.flatpickr-day:nth-child(36).nextMonthDay,
.flatpickr-day:nth-child(36).nextMonthDay ~ .flatpickr-day { display: none !important; }

/* Dias de outros meses levemente apagados para não confundir */
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.flatpickr-disabled { color: var(--text-muted) !important; cursor: default !important; opacity: 0.3 !important; border: none !important; }

.flatpickr-prev-month, .flatpickr-next-month { display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 1rem !important; background: transparent !important; cursor: pointer !important; height: auto !important; border-radius: 0 !important; top: 1rem !important; }
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: var(--text-muted) !important; transition: fill 0.2s ease !important; width: 14px !important; height: 14px !important; }

@media (hover: hover) {
    .flatpickr-day:not(.selected):not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):hover { border-color: var(--text-muted) !important; background: transparent !important; }
    .flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: var(--text) !important; }
}