/* public/css/components.css */

/* --- CARDS --- */
.card {
    background: var(--surface);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

/* Card Hover effect (apenas desktop) */
@media(min-width: 992px) {
    .card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--background);
    padding: 1.25rem 1.5rem;
    font-weight: 600;
    color: var(--text-main);
}

.card-body {
    padding: 1.5rem;
}

/* Card Summary (Dashboard) */
.card-summary {
    position: relative;
    overflow: hidden;
    color: white !important;
    border: none;
}
.card-summary::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
    pointer-events: none;
}
.card-summary h6 { font-weight: 500; opacity: 0.9; font-size: 0.9rem; letter-spacing: 0.5px; text-transform: uppercase; }
.card-summary h3 { font-weight: 700; margin-top: 0.5rem; font-size: 2rem; }

/* Variantes de Card */
.bg-primary { background: linear-gradient(135deg, var(--primary), #6366f1) !important; }
.bg-success { background: linear-gradient(135deg, var(--secondary), #34d399) !important; }
.bg-danger { background: linear-gradient(135deg, var(--danger), #f87171) !important; }
.bg-warning { background: linear-gradient(135deg, var(--warning), #fbbf24) !important; color: #fff !important; }

/* --- BUTTONS --- */
.btn {
    border-radius: var(--radius-md);
    padding: 0.5rem 1.2rem;
    font-weight: 500;
    transition: all 0.2s;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3); }

.btn-outline-secondary {
    background: white; border: 1px solid #e2e8f0; color: var(--text-main);
}
.btn-outline-secondary:hover { background: #f1f5f9; color: var(--primary); border-color: var(--primary); }

/* --- INPUTS --- */
.form-control, .form-select {
    background-color: var(--surface-alt);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    color: var(--text-main);
    transition: all 0.2s;
}
.form-control:focus, .form-select:focus {
    background-color: var(--surface);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}
.input-group-text {
    background-color: var(--surface-alt);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-muted);
}

/* --- TABLES --- */
.table {
    --bs-table-bg: transparent;
}
.table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 2px solid var(--background);
    padding: 1rem;
}
.table tbody td {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--background);
    color: var(--text-main);
    font-size: 0.95rem;
}
.table-hover tbody tr:hover {
    background-color: var(--surface-alt);
}

/* --- MODALS --- */
.modal-content {
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--background);
    padding: 1.5rem;
}
.modal-footer {
    border-top: none;
    background: var(--surface-alt);
    padding: 1.5rem;
    border-bottom-left-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
}

/* --- OVERLAY --- */
#loadingOverlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}

#cloudStatus {
    position: fixed; bottom: 80px; right: 20px; 
    z-index: 9990; font-size: 0.75rem;
    background: rgba(0,0,0,0.7); color: white;
    padding: 5px 12px; border-radius: 20px;
    backdrop-filter: blur(4px);
    pointer-events: none;
}
@media(min-width: 992px) { #cloudStatus { bottom: 20px; } }

/* Toast Customizado */
.custom-toast {
    background: rgba(16, 185, 129, 0.9); /* Greenish default */
    backdrop-filter: blur(10px);
}

/* TUTORIAL SYSTEM v3.12 */
.tutorial-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9998; /* Abaixo do target */
    pointer-events: none; /* Permite clicar no elemento destacado se configurado corretamente, mas aqui bloqueamos tudo exceto o target */
}

.tutorial-target {
    position: relative;
    z-index: 9999 !important;
    box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--primary);
    pointer-events: auto;
    animation: pulseBorder 2s infinite;
    background-color: white; /* Garante visibilidade */
}

.tutorial-tooltip {
    position: fixed;
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    z-index: 10000;
    width: 250px;
    font-size: 0.9rem;
    display: none;
    border-left: 4px solid var(--primary);
}

.tutorial-tooltip b { color: var(--primary); }

@keyframes pulseBorder {
    0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
    100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}