/*
|--------------------------------------------------------------------------
| CHEFFIN - COMPONENTES
|--------------------------------------------------------------------------
|
| Este arquivo define estilos de componentes usando variáveis de colors.css.
|
| REGRAS:
|   - Apenas USA variáveis, nunca define cores hardcoded
|   - SEM lógica de temas (body.white-mode, body.dark-mode, etc)
|   - SEM sobrescritas desnecessárias
|   - !important APENAS quando necessário para vencer Tailwind CDN
|
*/

/* ========================================================================
   BODY
   ======================================================================== */

html {
    min-height: 100vh;
}

body {
    background: var(--bg-gradient) !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* App content precisa ser flex para o footer ficar no fim da tela */
#app-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Container principal que cresce para preencher o espaço */
body > .w-full.max-w-screen-xl {
    flex: 1 0 auto;
}

#app-content > .w-full.max-w-screen-xl {
    flex: 1 0 auto;
}

/* Footer sempre no final */
footer {
    flex-shrink: 0;
    margin-top: auto;
}


/* ========================================================================
   GLASS CARDS
   ======================================================================== */

.glass-card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--blur-md)) saturate(180%) !important;
    -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%) !important;
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    transition: all var(--transition-normal) !important;
}

.glass-card:hover {
    background: var(--glass-bg-hover) !important;
    transform: translateY(-1px) scale(1.005) !important;
    box-shadow: var(--glass-shadow-hover) !important;
}

.glass-card-dark {
    background: var(--glass-bg-light) !important;
    backdrop-filter: blur(var(--blur-md)) saturate(180%) !important;
    -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%) !important;
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow-light) !important;
    transition: all var(--transition-normal) !important;
}

.glass-card-dark:hover {
    background: var(--glass-bg) !important;
    transform: translateY(-1px) scale(1.005) !important;
    box-shadow: var(--glass-shadow) !important;
}


/* ========================================================================
   GLASS BUTTONS
   ======================================================================== */

.glass-btn {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--blur-md)) saturate(180%) !important;
    -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%) !important;
    border-radius: var(--radius-lg) !important;
    border: 2px solid transparent !important;
    color: var(--color-gray) !important;
    box-shadow: var(--glass-shadow-card) !important;
    outline: 2px solid var(--color-gray-border) !important;
    outline-offset: -2px !important;
    transition: all var(--transition-normal) !important;
    cursor: pointer !important;
}

.glass-btn:hover {
    background: var(--color-gray-bg) !important;
    color: var(--text-on-brand) !important;
    outline: none !important;
    box-shadow: var(--glass-shadow-hover) !important;
}

.glass-btn:active {
    background: var(--color-gray-bg) !important;
    color: var(--text-on-brand) !important;
    outline: none !important;
    box-shadow: var(--glass-shadow-card) !important;
}

.glass-btn-primary {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--blur-md)) saturate(180%) !important;
    -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%) !important;
    border-radius: var(--radius-lg) !important;
    border: 2px solid transparent !important;
    transition: all var(--transition-normal) !important;
    cursor: pointer !important;
    box-shadow: var(--glass-shadow-card) !important;
}

.glass-btn-delete {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--blur-md)) saturate(180%) !important;
    -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%) !important;
    border-radius: var(--radius-lg) !important;
    border: 2px solid transparent !important;
    color: var(--error) !important;
    outline: 2px solid var(--color-error-border) !important;
    outline-offset: -2px !important;
    box-shadow: var(--color-error-shadow) !important;
    transition: all var(--transition-normal) !important;
    cursor: pointer !important;
}

.glass-btn-delete:hover {
    background: var(--error) !important;
    color: var(--text-on-brand) !important;
    outline: none !important;
    box-shadow: var(--color-error-shadow) !important;
}

.glass-btn-delete:active {
    background: var(--error) !important;
    color: var(--text-on-brand) !important;
    outline: none !important;
    box-shadow: var(--glass-shadow-card) !important;
}

.delete-icon {
    color: var(--error) !important;
    transition: all var(--transition-normal) !important;
}

.glass-btn-delete:hover .delete-icon,
.glass-btn-delete:active .delete-icon {
    color: var(--text-on-brand) !important;
}


/* ========================================================================
   BOTTOM BAR
   ======================================================================== */

.bottom-bar {
    position: fixed;
    bottom: max(20px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--blur-md)) saturate(180%) !important;
    -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%) !important;
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    padding: 8px 12px;
    z-index: 1000;
}


/* ========================================================================
   SOBRESCREVER TAILWIND CLASSES (apenas quando necessário)
   ======================================================================== */

/* Texto cinza -> usa texto secundário do tema */
.text-gray-300,
.text-gray-400 {
    color: var(--text-secondary) !important;
}

/* Backgrounds com opacidade do Tailwind -> usar glass do tema */
[class*="bg-white/5"],
[class*="bg-white/10"] {
    background-color: var(--glass-bg) !important;
}

/* Bordas com opacidade do Tailwind -> usar borda do tema */
[class*="border-white/10"],
[class*="border-white/20"] {
    border-color: var(--border-primary) !important;
}

/* Hover backgrounds do Tailwind */
[class*="hover:bg-white/5"]:hover,
[class*="hover:bg-white/10"]:hover {
    background-color: var(--glass-bg-hover) !important;
}

/* Border focus do Tailwind */
[class*="focus:border-white/30"]:focus {
    border-color: var(--border-primary) !important;
}

/* Backdrop blur do Tailwind */
[class*="backdrop-blur"] {
    backdrop-filter: blur(var(--blur-md)) !important;
    -webkit-backdrop-filter: blur(var(--blur-md)) !important;
}


/* ========================================================================
   REQUIRED FIELD VALIDATION
   ======================================================================== */

.field-error-message {
    display: none;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--error);
}

.field-error-message.is-visible {
    display: flex;
}

.field-has-error {
    border-color: var(--error) !important;
    background-color: rgba(239, 68, 68, 0.08) !important;
}

/* When .relative wrapper gets the error border, inner input/select is transparent */
.field-has-error-inner {
    border-color: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}