/* ========================================
   DARK MODE - ReICO Mobile
   Sistema de temas com variáveis CSS
   ======================================== */

/* Variáveis de cores - Light Mode (padrão) */
:root {
    /* Cores principais */
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --bg-tertiary: #fafafa;
    
    /* Texto */
    --text-primary: #1C1D22;
    --text-secondary: #666666;
    --text-tertiary: #999999;
    
    /* Bordas */
    --border-color: #e0e0e0;
    --border-color-hover: #d0d0d0;
    
    /* Cards e containers */
    --card-bg: #ffffff;
    --card-shadow: rgba(0, 0, 0, 0.1);
    --card-shadow-hover: rgba(0, 0, 0, 0.15);
    
    /* Header */
    --header-bg: #1C1D22;
    --header-text: #FFDB84;
    
    /* Inputs */
    --input-bg: #ffffff;
    --input-border: #e0e0e0;
    --input-text: #333333;
    --input-placeholder: #999999;
    
    /* Badges e tags */
    --badge-bg: #f8f9fa;
    --badge-border: #d0d7f7;
    --badge-text: #1C1D22;
    
    /* Estados */
    --success-bg: #e8f5e9;
    --success-border: #4CAF50;
    --success-text: #2e7d32;
    
    --info-bg: #e3f2fd;
    --info-border: #2196F3;
    --info-text: #1565C0;
    
    --warning-bg: #fff3e0;
    --warning-border: #FF9800;
    --warning-text: #e65100;
    
    --danger-bg: #ffebee;
    --danger-border: #f44336;
    --danger-text: #c62828;
    
    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.5);
}

/* Dark Mode - Ativado manualmente ou por preferência do sistema */
[data-theme="dark"],
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Cores principais */
        --bg-primary: #121212;
        --bg-secondary: #1e1e1e;
        --bg-tertiary: #2a2a2a;
        
        /* Texto */
        --text-primary: #e0e0e0;
        --text-secondary: #b0b0b0;
        --text-tertiary: #808080;
        
        /* Bordas */
        --border-color: #333333;
        --border-color-hover: #444444;
        
        /* Cards e containers */
        --card-bg: #1e1e1e;
        --card-shadow: rgba(0, 0, 0, 0.3);
        --card-shadow-hover: rgba(0, 0, 0, 0.5);
        
        /* Header mantém identidade visual */
        --header-bg: #0a0a0a;
        --header-text: #FFDB84;
        
        /* Inputs */
        --input-bg: #2a2a2a;
        --input-border: #404040;
        --input-text: #e0e0e0;
        --input-placeholder: #707070;
        
        /* Badges e tags */
        --badge-bg: #2a2a2a;
        --badge-border: #404040;
        --badge-text: #e0e0e0;
        
        /* Estados - cores ajustadas para dark mode */
        --success-bg: #1b5e20;
        --success-border: #4CAF50;
        --success-text: #a5d6a7;
        
        --info-bg: #0d47a1;
        --info-border: #2196F3;
        --info-text: #90caf9;
        
        --warning-bg: #e65100;
        --warning-border: #FF9800;
        --warning-text: #ffcc80;
        
        --danger-bg: #b71c1c;
        --danger-border: #f44336;
        --danger-text: #ef9a9a;
        
        /* Overlay */
        --overlay-bg: rgba(0, 0, 0, 0.7);
    }
}

/* Aplicação das variáveis em elementos globais */
body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* Cards */
.mobile-card,
.mobile-section-card,
.mobile-form-card,
.mobile-music-card,
.mobile-setlist-card,
.mobile-grupo-card,
.mobile-escala-card {
    background: var(--card-bg);
    box-shadow: 0 2px 8px var(--card-shadow);
}

.mobile-card:hover,
.mobile-setlist-card:active,
.mobile-grupo-card:active {
    box-shadow: 0 4px 12px var(--card-shadow-hover);
}

/* Inputs */
.mobile-input,
.mobile-select,
.mobile-form-input,
.mobile-search-box,
.ui-inputfield {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

.mobile-input::placeholder,
.mobile-search-box::placeholder {
    color: var(--input-placeholder);
}

.mobile-input:focus,
.mobile-select:focus {
    border-color: var(--header-text);
}

/* Texto */
.mobile-text-primary {
    color: var(--text-primary);
}

.mobile-text-secondary {
    color: var(--text-secondary);
}

.mobile-music-item-name,
.mobile-setlist-card-title,
.mobile-grupo-card-title {
    color: var(--text-primary);
}

.mobile-music-item-artist,
.mobile-setlist-stat,
.mobile-grupo-stat {
    color: var(--text-secondary);
}

/* Badges */
.mobile-setlist-team-badge,
.mobile-badge {
    background: var(--badge-bg);
    border-color: var(--badge-border);
    color: var(--badge-text);
}

/* Estados */
.mobile-success-badge,
.mobile-grupo-next-escala {
    background: var(--success-bg);
    border-color: var(--success-border);
}

.mobile-grupo-next-escala-title {
    color: var(--success-text);
}

.mobile-info-badge {
    background: var(--info-bg);
    border-color: var(--info-border);
}

.mobile-info-badge,
.mobile-info-badge span {
    color: var(--info-text);
}

/* Bordas */
.mobile-grupo-members,
.mobile-setlist-actions,
.mobile-grupo-actions {
    border-color: var(--border-color);
}

/* PrimeFaces Overrides para Dark Mode */
[data-theme="dark"] .ui-datatable {
    background: var(--card-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .ui-datatable .ui-datatable-header,
[data-theme="dark"] .ui-datatable .ui-datatable-data tr {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .ui-datatable .ui-datatable-data tr:nth-child(even) {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .ui-selectonemenu,
[data-theme="dark"] .ui-selectonemenu-panel {
    background: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-border);
}

[data-theme="dark"] .ui-selectonemenu-item {
    color: var(--text-primary);
}

[data-theme="dark"] .ui-selectonemenu-item:hover {
    background: var(--bg-tertiary);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ui-datatable {
        background: var(--card-bg);
        color: var(--text-primary);
    }
    
    :root:not([data-theme="light"]) .ui-datatable .ui-datatable-header,
    :root:not([data-theme="light"]) .ui-datatable .ui-datatable-data tr {
        background: var(--card-bg);
        border-color: var(--border-color);
    }
    
    :root:not([data-theme="light"]) .ui-datatable .ui-datatable-data tr:nth-child(even) {
        background: var(--bg-tertiary);
    }
    
    :root:not([data-theme="light"]) .ui-selectonemenu,
    :root:not([data-theme="light"]) .ui-selectonemenu-panel {
        background: var(--input-bg);
        color: var(--input-text);
        border-color: var(--input-border);
    }
    
    :root:not([data-theme="light"]) .ui-selectonemenu-item {
        color: var(--text-primary);
    }
    
    :root:not([data-theme="light"]) .ui-selectonemenu-item:hover {
        background: var(--bg-tertiary);
    }
}

/* Transições suaves ao alternar tema */
* {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease;
}

/* Exceções - elementos que não devem ter transição */
.mobile-header-btn,
.mobile-touchable,
button,
a {
    transition: background-color 0.2s ease, 
                transform 0.2s ease,
                box-shadow 0.2s ease;
}

/* ========================================
   TOGGLE DE TEMA (Botão)
   ======================================== */

.theme-toggle-btn {
    background: transparent;
    border: none;
    color: var(--header-text);
    font-size: 1.25rem;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s, transform 0.2s;
    min-width: 40px;
    min-height: 40px;
}

.theme-toggle-btn:active {
    background: rgba(255, 219, 132, 0.1);
    transform: rotate(180deg);
}

.theme-toggle-btn i {
    font-size: 1.25rem;
}

/* Ícones de sol/lua */
[data-theme="dark"] .theme-icon-light,
.theme-icon-dark {
    display: none;
}

[data-theme="dark"] .theme-icon-dark {
    display: inline-block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-icon-light {
        display: none;
    }
    
    :root:not([data-theme="light"]) .theme-icon-dark {
        display: inline-block;
    }
}