/* --- CORE & PERFORMANCE BASE --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Rajdhani:wght@500;700&display=swap');

:root {
    --quest-color: #00f3ff;
    --task-list-max-height: 280px;
    --task-list-max-height-blank: 114px;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #050505;
    /* Removido qualquer background complexo ou gradiente */
    color: #e2e8f0;
    text-rendering: optimizeSpeed; /* Prioriza velocidade sobre legibilidade perfeita */
}

.font-mono {
    font-family: 'Roboto Mono', monospace;
}

/* --- OTIMIZAÇÃO DE INTERFACE (FLAT DESIGN) --- */

/* Removemos transições globais pesadas. Apenas opacity/transform são baratas. */
.theme-transition {
    transition: none; /* Desativado para performance máxima */
}

/* MODAIS: Adeus Blur. Usamos opacidade sólida. O Blur é o maior assassino de FPS. */
.modal-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(0, 0, 0, 0.9); 
}

.modal-content {
    background-color: #0a0f14;
    border: 1px solid #333;
    box-shadow: none !important; /* Sombras complexas removidas */
}

/* INPUTS: Simples e diretos */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* SCROLLBAR: Mantida, pois é leve (Webkit) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a0f14; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--quest-color); }
.overflow-y-auto::-webkit-scrollbar { display: none; } /* Esconde em containers específicos */

/* --- ANIMAÇÕES SIMPLIFICADAS (CPU/GPU FRIENDLY) --- */

/* Removemos animações contínuas de background-color que forçam repaints */
.animate-pulse-red-bar, 
.animate-pulse-green-bar,
.animate-pulse {
    animation: none !important;
    opacity: 1 !important;
}

/* Animação Blink simplificada (apenas Opacidade) */
@keyframes blinkSimple {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
.blink-mode .neon-unit { 
    animation: blinkSimple 2s infinite linear; 
    box-shadow: none !important;
}

/* Shake simplificado (apenas Transform) */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}
.alarm-state { animation: shake 0.5s infinite; }

/* --- QUESTS & NEON UNITS (O GARGALO) --- */

/* As unidades de neon eram o peso pesado. Agora são blocos sólidos. */
.neon-unit {
    transition: opacity 0.1s ease; /* Transição rápida */
    box-shadow: none !important; /* OOF! Removemos o glow. Isso salvará sua GPU. */
    border: 1px solid rgba(255,255,255,0.1); /* Borda leve para substituir o glow */
}

.neon-unit.animate-popIn {
    animation: none; /* Removemos animações de entrada para listas grandes */
    opacity: 1;
}

/* Containers de Quest - Flat */
.liquid-chamber {
    background: #0a0f14;
    border: 1px solid #333;
    backdrop-filter: none !important;
    box-shadow: none !important;
}
/* Removemos o pseudo-elemento ::after que criava reflexo de vidro */
.liquid-chamber::after { display: none; }

.capsule {
    box-shadow: none !important;
    border: 1px solid #333;
    background: #0a0f14 !important; /* Force background sólido */
}

/* Accordion: Mantemos apenas a transição de altura que é necessária UX */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 640px) {
    .modal-content {
        width: 100% !important;
        margin: 0;
        border: none;
        border-top: 1px solid #333;
    }
    input[type="time"], input[type="number"] { font-size: 1rem; }
}

/* Hardware Acceleration Fix - CORRIGIDO */
/* Removemos 'transform: translateZ(0)' daqui pois ele quebrava o toggle do Tailwind */
#side-navbar {
    will-change: transform; 
    /* O transform é controlado pelas classes do Tailwind (-translate-x-full) */
}

#app-wrapper {
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: flex-start;
}

#main-card {
    display: flex;
    flex-direction: column;
}

.gridisplay {
    display: flex;
    flex-direction: column;
}

#main-card > .gridisplay > .relative {
    display: flex;
    flex-direction: column;
}

#task-list-collapsible {
    flex-shrink: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: var(--task-list-max-height);
    transition: max-height 0.3s ease-in-out;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
}

#task-list {
    min-height: 0;
    /* overflow-y removido daqui */
}

#task-list .task-item {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

#session-history {
    overflow-y: auto;
    scroll-snap-type: y mandatory;
}

#session-history > div {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

#chamber-rack, .modal-content {
    will-change: transform;
    transform: translateZ(0); /* Aqui pode manter pois não conflita com lógica de toggle */
}

/* Adicione isso */
.task-item, .task-name, .task-details {
    user-select: none; /* Impede o navegador de selecionar o texto com double-click */
    -webkit-user-select: none;
}

/* O input DEVE permitir seleção, obviamente */
.task-edit-input {
    user-select: text !important;
    -webkit-user-select: text !important;
    color: #3e0202;
}




.format-editor-wrapper { position: relative; width: 100%; height: 750px; }
    .format-editor-underlay, .format-editor-textarea {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        padding: 1rem; font-family: 'Roboto Mono', monospace; font-size: 13px; line-height: 1.5;
        white-space: pre-wrap; word-wrap: break-word; overflow-y: auto; overflow-x: hidden;
        border-radius: 0.5rem; margin: 0;
    }
    .format-editor-underlay { color: #94a3b8; background: #0f172a; z-index: 1; border: 1px solid #334155; }
    .format-editor-textarea { color: transparent; caret-color: #e2e8f0; background: transparent; z-index: 2; resize: none; border: 1px solid transparent; outline: none; }
    .format-editor-textarea::selection { background: rgba(34, 211, 238, 0.3); color: transparent; }
    .highlight-var { color: #22d3ee; font-weight: bold; background: rgba(34, 211, 238, 0.1); border-radius: 2px; }


.focus-fixed-bg {
    background-color: rgb(34 197 94) !important;
}

.focus-fixed-text {
    color: rgb(74 222 128 / 400) !important;
}

.lapse-fixed-text {
    color: rgb(248 113 113 / 400)
}

/* Força a cor de fundo desejada nos campos preenchidos */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #ffffff !important; /* Cor do texto */
    background-color: #0d1117 !important; /* A cor do seu background escuro */
}

.modal-bg {
    background-color: #020726 !important;
}