/* Design System - Componentes UI */

/* ===== VARIÁVEIS ===== */
:root {
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-rgb: 37, 99, 235;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --text-muted: #aaaaaa;
    --background-primary: #ffffff;
    --background-secondary: #f8f9fa;
    --background-tertiary: #f1f3f5;
    --card-bg: #ffffff;
    --border-color: #e5e7eb;
    --border-subtle: #f0f0f0;
}

/* ===== TOOLTIP ===== */
.tooltip { position: relative; display: inline-block; }
.tooltip .tooltip-text {
    visibility: hidden; opacity: 0; position: absolute; z-index: 1000;
    background: var(--text-primary); color: white; padding: 0.5rem 1rem;
    border-radius: 6px; font-size: 0.875rem; white-space: nowrap;
    transition: all 0.2s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.tooltip:hover .tooltip-text { visibility: visible; opacity: 1; }
.tooltip-top .tooltip-text { bottom: 125%; left: 50%; transform: translateX(-50%); }
.tooltip-bottom .tooltip-text { top: 125%; left: 50%; transform: translateX(-50%); }
.tooltip-left .tooltip-text { top: -5px; right: 128%; }
.tooltip-right .tooltip-text { top: -5px; left: 128%; }

/* ===== MODAL ===== */
.modal-backdrop {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 1000;
    opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
.modal-backdrop.show { opacity: 1; visibility: visible; }
.modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--background-primary); border-radius: 16px; width: 90%; max-width: 600px;
    box-shadow: 0 20px 25px rgba(0,0,0,0.1); z-index: 1001; max-height: 90vh; overflow: hidden;
}
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-bottom: 2px solid var(--border-subtle); }
.modal-title { font-size: 1.25rem; font-weight: 600; margin: 0; }
.modal-close { width: 2rem; height: 2rem; border-radius: 50%; background: var(--background-secondary); border: none; cursor: pointer; }
.modal-body { padding: 1.5rem; overflow-y: auto; }
.modal-footer { padding: 1.5rem; border-top: 2px solid var(--border-subtle); display: flex; gap: 1rem; justify-content: flex-end; }

/* ===== DROPDOWN ===== */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
    position: absolute; top: 100%; left: 0; background: var(--background-primary);
    border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    min-width: 200px; z-index: 100; opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: all 0.2s ease;
}
.dropdown.show .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-item { display: block; padding: 0.75rem 1rem; color: var(--text-primary); text-decoration: none; transition: background 0.2s; }
.dropdown-item:hover { background: var(--background-secondary); }

/* ===== TABS ===== */
.tabs { border-bottom: 2px solid var(--border-color); }
.tab-nav { display: flex; gap: 1rem; }
.tab-button {
    padding: 1rem 1.5rem; border: none; background: none; color: var(--text-secondary);
    cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s;
}
.tab-button.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.tab-content { padding: 1.5rem 0; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ===== ACCORDION ===== */
.accordion-item { border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 0.5rem; }
.accordion-header { padding: 1rem 1.5rem; background: var(--background-secondary); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.accordion-content { padding: 1.5rem; display: none; }
.accordion-item.active .accordion-content { display: block; }
.accordion-icon { transition: transform 0.2s; }
.accordion-item.active .accordion-icon { transform: rotate(180deg); }

/* ===== TOAST ===== */
.toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 1050; }
.toast {
    background: var(--background-primary); border: 1px solid var(--border-color);
    border-radius: 8px; padding: 1rem; margin-bottom: 0.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transform: translateX(100%); transition: transform 0.3s ease;
}
.toast.show { transform: translateX(0); }
.toast-success { border-left: 4px solid var(--success-color); }
.toast-warning { border-left: 4px solid var(--warning-color); }
.toast-danger { border-left: 4px solid var(--danger-color); }

/* ===== LOADING ===== */
.loading { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--border-color); border-radius: 50%; border-top-color: var(--primary-color); animation: spin 1s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== PROGRESS ===== */
.progress { width: 100%; height: 8px; background: var(--background-secondary); border-radius: 4px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--primary-color); transition: width 0.3s ease; }

/* ===== CARD ===== */
.card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.card-header { padding: 1.5rem; border-bottom: 1px solid var(--border-color); }
.card-body { padding: 1.5rem; }
.card-footer { padding: 1.5rem; border-top: 1px solid var(--border-color); }

/* ===== ALERT ===== */
.alert { padding: 1rem 1.5rem; border-radius: 8px; margin-bottom: 1rem; }
.alert-success { background: rgba(16, 185, 129, 0.1); color: var(--success-color); border: 1px solid rgba(16, 185, 129, 0.2); }
.alert-warning { background: rgba(245, 158, 11, 0.1); color: var(--warning-color); border: 1px solid rgba(245, 158, 11, 0.2); }
.alert-danger { background: rgba(239, 68, 68, 0.1); color: var(--danger-color); border: 1px solid rgba(239, 68, 68, 0.2); }

/* ===== RESPONSIVIDADE ===== */
@media (max-width: 768px) {
    .modal { width: 95%; }
    .dropdown-menu { min-width: 150px; }
    .tab-nav { flex-wrap: wrap; }
    .toast-container { left: 1rem; right: 1rem; }
}