/**
 * =====================================================================
 * CSS Principal - PPEduc
 * =====================================================================
 * 
 * Estilos customizados que complementam o Tailwind CSS
 * Mantém a padronização visual com o protótipo
 * 
 * @author Time PPEduc
 * @version 1.0
 */

:root {
    --color-brand: #1a2b4a;
    --color-brand-dark: #0f1e35;
    --color-brand-mid: #243d5e;
    --color-accent: #c8962a;
    --color-accent-light: #f0c85a;
    --color-line: #d7e1e8;
    --color-soft: #f4f8fb;
    --color-panel: #ffffff;
    --color-ink: #1a2b4a;
    
    --shadow-card: 0 12px 30px rgba(15, 36, 54, 0.08);
    --shadow-modal: 0 24px 80px rgba(15, 36, 54, 0.22);
    
    --transition-smooth: all 0.3s ease;
}

/* ===================================================================
   GLOBAIS
   =================================================================== */

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

/* ===================================================================
   TIPOGRAFIA
   =================================================================== */

h1, h2, h3, h4, h5, h6 {
    color: var(--color-ink);
    font-weight: 600;
}

a {
    transition: var(--transition-smooth);
}

/* ===================================================================
   FORMULÁRIOS
   =================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    border-color: var(--color-line);
    transition: var(--transition-smooth);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(200, 150, 42, 0.1);
    outline: none;
}

/* ===================================================================
   BOTÕES
   =================================================================== */

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-smooth);
    border: none;
}

.btn-primary {
    background-color: var(--color-brand);
    color: white;
}

.btn-primary:hover {
    background-color: var(--color-brand-dark);
    opacity: 0.9;
}

.btn-secondary {
    background-color: var(--color-soft);
    color: var(--color-ink);
    border: 1px solid var(--color-line);
}

.btn-secondary:hover {
    background-color: var(--color-line);
}

.btn-accent {
    background-color: var(--color-accent);
    color: white;
}

.btn-accent:hover {
    background-color: #b8862a;
}

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

.card {
    background-color: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: 1.75rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
}

.card:hover {
    box-shadow: 0 16px 40px rgba(15, 36, 54, 0.12);
}

/* ===================================================================
   BADGES
   =================================================================== */

.badge {
    display: inline-block;
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: var(--color-soft);
    color: var(--color-ink);
}

.badge-primary {
    background-color: #e9f0fa;
    color: #1a5f9a;
}

.badge-success {
    background-color: #ecfdf5;
    color: #065f46;
}

.badge-warning {
    background-color: #fef3c7;
    color: #92400e;
}

.badge-danger {
    background-color: #fee2e2;
    color: #991b1b;
}

/* ===================================================================
   ALERTAS
   =================================================================== */

.alert {
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid;
    margin-bottom: 1rem;
}

.alert-success {
    background-color: #ecfdf5;
    border-color: #86efac;
    color: #065f46;
}

.alert-info {
    background-color: #eff6ff;
    border-color: #93c5fd;
    color: #1e40af;
}

.alert-warning {
    background-color: #fef3c7;
    border-color: #fcd34d;
    color: #92400e;
}

.alert-danger {
    background-color: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

/* ===================================================================
   UTILITÁRIOS
   =================================================================== */

.loading {
    opacity: 0.6;
    pointer-events: none;
}

.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===================================================================
   SCROLLBAR CUSTOMIZADO
   =================================================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(200, 150, 42, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(200, 150, 42, 0.5);
}

/* ===================================================================
   RESPONSIVIDADE
   =================================================================== */

@media (max-width: 768px) {
    body {
        font-size: 0.95rem;
    }
    
    h1 {
        font-size: 1.75rem;
    }
    
    .card {
        padding: 1rem;
    }
}