/**
 * ZillesG EAD - Frontend Styles
 * CSS principal do LMS
 */

/* ==========================================
   CSS Variables (Design Tokens)
   ========================================== */
:root {
    /* Colors - Primary (Azul) */
    --ead-primary: #1e56a0;
    --ead-primary-dark: #163d72;
    --ead-primary-light: #3b7dd8;
    --ead-primary-50: #e8f1fc;
    --ead-primary-100: #c5daf5;

    /* Colors - Accent (Laranja) */
    --ead-accent: #f97316;
    --ead-accent-dark: #ea580c;
    --ead-accent-light: #fb923c;
    --ead-accent-50: #fff7ed;
    --ead-accent-100: #ffedd5;

    /* Colors - Neutral */
    --ead-white: #ffffff;
    --ead-gray-50: #f8fafc;
    --ead-gray-100: #f1f5f9;
    --ead-gray-200: #e2e8f0;
    --ead-gray-300: #cbd5e1;
    --ead-gray-400: #94a3b8;
    --ead-gray-500: #64748b;
    --ead-gray-600: #475569;
    --ead-gray-700: #334155;
    --ead-gray-800: #1e293b;
    --ead-gray-900: #0f172a;

    /* Colors - Status */
    --ead-success: #10b981;
    --ead-success-light: #d1fae5;
    --ead-warning: #f59e0b;
    --ead-warning-light: #fef3c7;
    --ead-error: #ef4444;
    --ead-error-light: #fee2e2;
    --ead-info: #3b82f6;
    --ead-info-light: #dbeafe;

    /* Typography */
    --ead-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ead-font-size-xs: 0.75rem;
    --ead-font-size-sm: 0.875rem;
    --ead-font-size-base: 1rem;
    --ead-font-size-lg: 1.125rem;
    --ead-font-size-xl: 1.25rem;
    --ead-font-size-2xl: 1.5rem;
    --ead-font-size-3xl: 1.875rem;
    --ead-font-size-4xl: 2.25rem;

    /* Spacing */
    --ead-spacing-xs: 0.25rem;
    --ead-spacing-sm: 0.5rem;
    --ead-spacing-md: 1rem;
    --ead-spacing-lg: 1.5rem;
    --ead-spacing-xl: 2rem;
    --ead-spacing-2xl: 3rem;

    /* Border Radius */
    --ead-radius-sm: 0.25rem;
    --ead-radius-md: 0.375rem;
    --ead-radius-lg: 0.5rem;
    --ead-radius-xl: 0.75rem;
    --ead-radius-full: 9999px;

    /* Shadows */
    --ead-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --ead-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --ead-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --ead-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Transitions */
    --ead-transition-fast: 150ms ease;
    --ead-transition: 200ms ease;
    --ead-transition-slow: 300ms ease;

    /* Layout */
    --ead-sidebar-width: 280px;
    --ead-header-height: 64px;
    --ead-content-max-width: 1200px;
}

/* ==========================================
   Reset & Base
   ========================================== */
.ead-app {
    font-family: var(--ead-font-family) !important;
    font-size: var(--ead-font-size-base) !important;
    line-height: 1.5 !important;
    color: var(--ead-gray-800) !important;
    background-color: var(--ead-gray-50) !important;
    min-height: 100vh !important;
}

.ead-app *,
.ead-app *::before,
.ead-app *::after {
    box-sizing: border-box !important;
}

.ead-app a {
    color: var(--ead-primary) !important;
    text-decoration: none !important;
    transition: color var(--ead-transition-fast) !important;
}

.ead-app a:hover {
    color: var(--ead-primary-dark) !important;
}

/* ==========================================
   Layout
   ========================================== */
.ead-layout {
    display: flex !important;
    min-height: 100vh !important;
}

.ead-layout--with-sidebar .ead-main {
    margin-left: var(--ead-sidebar-width) !important;
}

.ead-layout--full .ead-main {
    margin-left: 0 !important;
}

/* Header */
.ead-header {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: var(--ead-sidebar-width) !important;
    height: var(--ead-header-height) !important;
    background: #fff !important;
    border-bottom: 1px solid var(--ead-gray-200) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 var(--ead-spacing-lg) !important;
    z-index: 100 !important;
}

.ead-layout--full .ead-header {
    left: 0 !important;
}

.ead-header__title {
    font-size: var(--ead-font-size-lg) !important;
    font-weight: 600 !important;
    color: var(--ead-gray-900) !important;
    margin: 0 !important;
}

.ead-header__actions {
    display: flex !important;
    align-items: center !important;
    gap: var(--ead-spacing-md) !important;
}

/* Sidebar */
.ead-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--ead-sidebar-width) !important;
    background: var(--ead-white) !important;
    border-right: 1px solid var(--ead-gray-200) !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 200 !important;
}

.ead-sidebar__logo {
    padding: var(--ead-spacing-lg) !important;
    text-align: center !important;
    border-bottom: 1px solid var(--ead-gray-100) !important;
}

.ead-sidebar__logo img {
    max-width: 160px !important;
    height: auto !important;
}

.ead-sidebar__logo h1 {
    font-size: var(--ead-font-size-xl) !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: var(--ead-primary) !important;
}

.ead-sidebar__nav {
    flex: 1 !important;
    padding: var(--ead-spacing-md) 0 !important;
    overflow-y: auto !important;
}

.ead-sidebar__menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ead-sidebar__menu-item {
    margin: 2px 8px !important;
}

.ead-sidebar__menu-link {
    display: flex !important;
    align-items: center !important;
    gap: var(--ead-spacing-md) !important;
    padding: 12px 16px !important;
    color: var(--ead-gray-600) !important;
    border-radius: var(--ead-radius-lg) !important;
    font-weight: 500 !important;
    transition: all var(--ead-transition-fast) !important;
}

.ead-sidebar__menu-link:hover {
    background: var(--ead-gray-50) !important;
    color: var(--ead-gray-900) !important;
}

.ead-sidebar__menu-link--active {
    background: var(--ead-primary-50) !important;
    color: var(--ead-primary) !important;
}

.ead-sidebar__menu-link--active:hover {
    background: var(--ead-primary-100) !important;
    color: var(--ead-primary-dark) !important;
}

.ead-sidebar__menu-link--active .ead-sidebar__menu-icon {
    color: var(--ead-accent) !important;
}

.ead-sidebar__menu-icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    color: var(--ead-gray-400) !important;
    transition: color var(--ead-transition-fast) !important;
}

.ead-sidebar__menu-link:hover .ead-sidebar__menu-icon {
    color: var(--ead-primary) !important;
}

.ead-sidebar__divider {
    height: 1px !important;
    background: var(--ead-gray-200) !important;
    margin: var(--ead-spacing-md) var(--ead-spacing-lg) !important;
}

.ead-sidebar__section-title {
    padding: var(--ead-spacing-md) var(--ead-spacing-lg) var(--ead-spacing-sm) !important;
    font-size: var(--ead-font-size-xs) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--ead-gray-400) !important;
    font-weight: 600 !important;
}

.ead-sidebar__user {
    padding: var(--ead-spacing-md) var(--ead-spacing-lg) !important;
    border-top: 1px solid var(--ead-gray-200) !important;
    background: var(--ead-gray-50) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--ead-spacing-md) !important;
}

.ead-sidebar__user-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: var(--ead-primary-100) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.ead-sidebar__user-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.ead-sidebar__user-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.ead-sidebar__user-name {
    font-weight: 600 !important;
    color: var(--ead-gray-900) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.ead-sidebar__user-role {
    font-size: var(--ead-font-size-xs) !important;
    color: var(--ead-gray-500) !important;
}

.ead-sidebar__logout {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--ead-gray-400) !important;
    border-radius: var(--ead-radius-md) !important;
    transition: all var(--ead-transition-fast) !important;
}

.ead-sidebar__logout:hover {
    background: var(--ead-error-light) !important;
    color: var(--ead-error) !important;
}

/* Main Content */
.ead-main {
    flex: 1 !important;
    padding-top: var(--ead-header-height) !important;
    min-height: 100vh !important;
}

.ead-content {
    padding: var(--ead-spacing-xl) !important;
    max-width: var(--ead-content-max-width) !important;
    margin: 0 auto !important;
}

/* ==========================================
   Components - Buttons
   ========================================== */
.zillesg-ead-frontend .ead-btn,
.ead-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--ead-spacing-sm) !important;
    padding: var(--ead-spacing-sm) var(--ead-spacing-lg) !important;
    font-family: inherit !important;
    font-size: var(--ead-font-size-sm) !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    border-radius: var(--ead-radius-md) !important;
    cursor: pointer !important;
    transition: all var(--ead-transition-fast) !important;
}

.zillesg-ead-frontend .ead-btn:hover,
.ead-btn:hover {
    text-decoration: none !important;
}

.zillesg-ead-frontend .ead-btn:disabled,
.ead-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.zillesg-ead-frontend .ead-btn--primary,
.ead-btn--primary {
    background: var(--ead-primary) !important;
    color: #fff !important;
}

.zillesg-ead-frontend .ead-btn--primary:hover:not(:disabled),
.ead-btn--primary:hover:not(:disabled) {
    background: var(--ead-primary-dark) !important;
    color: #fff !important;
}

.zillesg-ead-frontend .ead-btn--secondary,
.ead-btn--secondary {
    background: var(--ead-gray-100) !important;
    color: var(--ead-gray-700) !important;
    border-color: var(--ead-gray-300) !important;
}

.zillesg-ead-frontend .ead-btn--secondary:hover:not(:disabled),
.ead-btn--secondary:hover:not(:disabled) {
    background: var(--ead-gray-200) !important;
    color: var(--ead-gray-700) !important;
}

.zillesg-ead-frontend .ead-btn--success,
.ead-btn--success {
    background: var(--ead-success) !important;
    color: #fff !important;
}

.zillesg-ead-frontend .ead-btn--success:hover:not(:disabled),
.ead-btn--success:hover:not(:disabled) {
    background: #059669 !important;
    color: #fff !important;
}

.zillesg-ead-frontend .ead-btn--danger,
.ead-btn--danger {
    background: var(--ead-error) !important;
    color: #fff !important;
}

.zillesg-ead-frontend .ead-btn--danger:hover:not(:disabled),
.ead-btn--danger:hover:not(:disabled) {
    background: #b91c1c !important;
    color: #fff !important;
}

.zillesg-ead-frontend .ead-btn--sm,
.ead-btn--sm {
    padding: var(--ead-spacing-xs) var(--ead-spacing-md) !important;
    font-size: var(--ead-font-size-xs) !important;
}

.zillesg-ead-frontend .ead-btn--lg,
.ead-btn--lg {
    padding: var(--ead-spacing-md) var(--ead-spacing-xl) !important;
    font-size: var(--ead-font-size-base) !important;
}

.zillesg-ead-frontend .ead-btn--block,
.ead-btn--block {
    width: 100% !important;
}

.zillesg-ead-frontend .ead-btn__icon,
.ead-btn__icon {
    width: 16px !important;
    height: 16px !important;
}

.zillesg-ead-frontend .ead-btn svg {
    width: 16px !important;
    height: 16px !important;
}

/* ==========================================
   Components - Cards
   ========================================== */
.ead-card {
    background: #fff !important;
    border-radius: var(--ead-radius-lg) !important;
    box-shadow: var(--ead-shadow) !important;
    overflow: hidden !important;
}

.ead-card__header {
    padding: var(--ead-spacing-lg) !important;
    border-bottom: 1px solid var(--ead-gray-200) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.ead-card__title {
    font-size: var(--ead-font-size-lg) !important;
    font-weight: 600 !important;
    color: var(--ead-gray-900) !important;
    margin: 0 !important;
}

.ead-card__body {
    padding: var(--ead-spacing-lg) !important;
}

.ead-card__footer {
    padding: var(--ead-spacing-md) var(--ead-spacing-lg) !important;
    border-top: 1px solid var(--ead-gray-200) !important;
    background: var(--ead-gray-50) !important;
}

/* ==========================================
   Components - Forms
   ========================================== */
.ead-form-group {
    margin-bottom: var(--ead-spacing-lg) !important;
}

.ead-form-label {
    display: block !important;
    margin-bottom: var(--ead-spacing-sm) !important;
    font-size: var(--ead-font-size-sm) !important;
    font-weight: 500 !important;
    color: var(--ead-gray-700) !important;
}

.ead-form-label--required::after {
    content: ' *' !important;
    color: var(--ead-error) !important;
}

.ead-form-input,
.ead-form-select,
.ead-form-textarea {
    width: 100% !important;
    padding: var(--ead-spacing-sm) var(--ead-spacing-md) !important;
    font-family: inherit !important;
    font-size: var(--ead-font-size-base) !important;
    line-height: 1.5 !important;
    color: var(--ead-gray-900) !important;
    background: #fff !important;
    border: 1px solid var(--ead-gray-300) !important;
    border-radius: var(--ead-radius-md) !important;
    transition: border-color var(--ead-transition-fast), box-shadow var(--ead-transition-fast) !important;
}

.ead-form-input:focus,
.ead-form-select:focus,
.ead-form-textarea:focus {
    outline: none !important;
    border-color: var(--ead-primary) !important;
    box-shadow: 0 0 0 3px var(--ead-primary-50) !important;
}

.ead-form-input--error,
.ead-form-select--error,
.ead-form-textarea--error {
    border-color: var(--ead-error) !important;
}

.ead-form-error {
    margin-top: var(--ead-spacing-xs) !important;
    font-size: var(--ead-font-size-sm) !important;
    color: var(--ead-error) !important;
}

.ead-form-help {
    margin-top: var(--ead-spacing-xs) !important;
    font-size: var(--ead-font-size-sm) !important;
    color: var(--ead-gray-500) !important;
}

/* ==========================================
   Components - Alerts
   ========================================== */
.ead-alert {
    padding: var(--ead-spacing-md) var(--ead-spacing-lg) !important;
    border-radius: var(--ead-radius-md) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--ead-spacing-md) !important;
}

.ead-alert--success {
    background: var(--ead-success-light) !important;
    color: #065f46 !important;
}

.ead-alert--warning {
    background: var(--ead-warning-light) !important;
    color: #92400e !important;
}

.ead-alert--error {
    background: var(--ead-error-light) !important;
    color: #991b1b !important;
}

.ead-alert--info {
    background: var(--ead-info-light) !important;
    color: #1e40af !important;
}

.ead-alert__icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

.ead-alert__content {
    flex: 1 !important;
}

.ead-alert__title {
    font-weight: 600 !important;
    margin: 0 0 var(--ead-spacing-xs) !important;
}

.ead-alert__message {
    margin: 0 !important;
}

/* ==========================================
   Components - Badges
   ========================================== */
.ead-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: var(--ead-spacing-xs) var(--ead-spacing-sm) !important;
    font-size: var(--ead-font-size-xs) !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    border-radius: var(--ead-radius-full) !important;
}

.ead-badge--primary {
    background: var(--ead-primary-light) !important;
    color: var(--ead-primary-dark) !important;
}

.ead-badge--success {
    background: var(--ead-success-light) !important;
    color: #065f46 !important;
}

.ead-badge--warning {
    background: var(--ead-warning-light) !important;
    color: #92400e !important;
}

.ead-badge--error {
    background: var(--ead-error-light) !important;
    color: #991b1b !important;
}

.ead-badge--gray {
    background: var(--ead-gray-200) !important;
    color: var(--ead-gray-700) !important;
}

/* ==========================================
   Components - Avatar
   ========================================== */
.ead-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: var(--ead-gray-200) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    color: var(--ead-gray-600) !important;
    overflow: hidden !important;
}

.ead-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.ead-avatar--sm {
    width: 32px !important;
    height: 32px !important;
    font-size: var(--ead-font-size-sm) !important;
}

.ead-avatar--lg {
    width: 56px !important;
    height: 56px !important;
    font-size: var(--ead-font-size-lg) !important;
}

/* ==========================================
   Components - Loading
   ========================================== */
.ead-loading {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--ead-spacing-xl) !important;
}

.ead-spinner {
    width: 32px !important;
    height: 32px !important;
    border: 3px solid var(--ead-gray-200) !important;
    border-top-color: var(--ead-primary) !important;
    border-radius: 50% !important;
    animation: ead-spin 0.8s linear infinite !important;
}

@keyframes ead-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================
   Utilities
   ========================================== */
.ead-text-center { text-align: center !important; }
.ead-text-right { text-align: right !important; }
.ead-text-muted { color: var(--ead-gray-500) !important; }

.ead-mt-0 { margin-top: 0 !important; }
.ead-mt-1 { margin-top: var(--ead-spacing-sm) !important; }
.ead-mt-2 { margin-top: var(--ead-spacing-md) !important; }
.ead-mt-3 { margin-top: var(--ead-spacing-lg) !important; }
.ead-mt-4 { margin-top: var(--ead-spacing-xl) !important; }

.ead-mb-0 { margin-bottom: 0 !important; }
.ead-mb-1 { margin-bottom: var(--ead-spacing-sm) !important; }
.ead-mb-2 { margin-bottom: var(--ead-spacing-md) !important; }
.ead-mb-3 { margin-bottom: var(--ead-spacing-lg) !important; }
.ead-mb-4 { margin-bottom: var(--ead-spacing-xl) !important; }

.ead-d-flex { display: flex !important; }
.ead-d-none { display: none !important; }
.ead-align-center { align-items: center !important; }
.ead-justify-between { justify-content: space-between !important; }
.ead-gap-1 { gap: var(--ead-spacing-sm) !important; }
.ead-gap-2 { gap: var(--ead-spacing-md) !important; }
.ead-gap-3 { gap: var(--ead-spacing-lg) !important; }

/* ==========================================
   Responsive
   ========================================== */
@media (max-width: 1024px) {
    :root {
        --ead-sidebar-width: 240px;
    }
}

@media (max-width: 768px) {
    .ead-sidebar {
        transform: translateX(-100%) !important;
        transition: transform var(--ead-transition) !important;
    }

    .ead-sidebar--open {
        transform: translateX(0) !important;
    }

    .ead-layout--with-sidebar .ead-main {
        margin-left: 0 !important;
    }

    .ead-header {
        left: 0 !important;
    }

    .ead-content {
        padding: var(--ead-spacing-md) !important;
    }
}

/* ==========================================
   Components - Toast Notifications
   ========================================== */
.ead-toast-container {
    position: fixed !important;
    bottom: var(--ead-spacing-lg) !important;
    right: var(--ead-spacing-lg) !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--ead-spacing-sm) !important;
}

.ead-toast {
    display: flex !important;
    align-items: center !important;
    gap: var(--ead-spacing-md) !important;
    padding: var(--ead-spacing-md) var(--ead-spacing-lg) !important;
    background: var(--ead-gray-800) !important;
    color: #fff !important;
    border-radius: var(--ead-radius-md) !important;
    box-shadow: var(--ead-shadow-lg) !important;
    min-width: 280px !important;
    max-width: 400px !important;
    transform: translateX(120%) !important;
    opacity: 0 !important;
    transition: transform var(--ead-transition), opacity var(--ead-transition) !important;
}

.ead-toast--visible {
    transform: translateX(0) !important;
    opacity: 1 !important;
}

.ead-toast--success {
    background: var(--ead-success) !important;
}

.ead-toast--error {
    background: var(--ead-error) !important;
}

.ead-toast--warning {
    background: var(--ead-warning) !important;
    color: var(--ead-gray-900) !important;
}

.ead-toast--info {
    background: var(--ead-info) !important;
}

.ead-toast__icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

.ead-toast__message {
    flex: 1 !important;
    font-size: var(--ead-font-size-sm) !important;
    line-height: 1.4 !important;
}

.ead-toast__close {
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    color: currentColor !important;
    opacity: 0.7 !important;
    cursor: pointer !important;
    transition: opacity var(--ead-transition-fast) !important;
}

.ead-toast__close:hover {
    opacity: 1 !important;
}

@media (max-width: 768px) {
    .ead-toast-container {
        left: var(--ead-spacing-md) !important;
        right: var(--ead-spacing-md) !important;
        bottom: var(--ead-spacing-md) !important;
    }

    .ead-toast {
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* ==========================================
   Components - Tooltip
   ========================================== */
.ead-tooltip {
    position: absolute !important;
    z-index: 9999 !important;
    padding: var(--ead-spacing-xs) var(--ead-spacing-sm) !important;
    background: var(--ead-gray-900) !important;
    color: #fff !important;
    font-size: var(--ead-font-size-xs) !important;
    line-height: 1.4 !important;
    border-radius: var(--ead-radius-sm) !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    transform: scale(0.95) !important;
    transition: opacity var(--ead-transition-fast), transform var(--ead-transition-fast) !important;
    pointer-events: none !important;
}

.ead-tooltip--visible {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* ==========================================
   Components - Modal
   ========================================== */
.ead-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--ead-spacing-lg) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity var(--ead-transition), visibility var(--ead-transition) !important;
}

.ead-modal--open,
.ead-modal.is-open {
    opacity: 1 !important;
    visibility: visible !important;
}

.ead-modal__backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
}

.ead-modal__content {
    position: relative !important;
    background: #fff !important;
    border-radius: var(--ead-radius-lg) !important;
    box-shadow: var(--ead-shadow-lg) !important;
    max-width: 500px !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    transform: scale(0.95) translateY(-10px) !important;
    transition: transform var(--ead-transition) !important;
}

.ead-modal--open .ead-modal__content {
    transform: scale(1) translateY(0) !important;
}

.ead-modal__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: var(--ead-spacing-lg) !important;
    border-bottom: 1px solid var(--ead-gray-200) !important;
}

.ead-modal__title {
    font-size: var(--ead-font-size-lg) !important;
    font-weight: 600 !important;
    color: var(--ead-gray-900) !important;
    margin: 0 !important;
}

.ead-modal__close {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    color: var(--ead-gray-400) !important;
    cursor: pointer !important;
    border-radius: var(--ead-radius-md) !important;
    transition: background var(--ead-transition-fast), color var(--ead-transition-fast) !important;
}

.ead-modal__close:hover {
    background: var(--ead-gray-100) !important;
    color: var(--ead-gray-600) !important;
}

.ead-modal__body {
    padding: var(--ead-spacing-lg) !important;
}

.ead-modal__footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: var(--ead-spacing-sm) !important;
    padding: var(--ead-spacing-md) var(--ead-spacing-lg) !important;
    border-top: 1px solid var(--ead-gray-200) !important;
    background: var(--ead-gray-50) !important;
}

/* ==========================================
   Components - Progress Bar
   ========================================== */
.ead-progress {
    height: 8px !important;
    background: var(--ead-gray-200) !important;
    border-radius: var(--ead-radius-full) !important;
    overflow: hidden !important;
}

.ead-progress__bar {
    height: 100% !important;
    background: linear-gradient(90deg, var(--ead-primary) 0%, var(--ead-accent) 100%) !important;
    border-radius: var(--ead-radius-full) !important;
    transition: width var(--ead-transition) !important;
}

.ead-progress--sm {
    height: 4px !important;
}

.ead-progress--lg {
    height: 12px !important;
}

/* ==========================================
   Components - Icon (SVG)
   ========================================== */
.ead-icon {
    width: 1em !important;
    height: 1em !important;
    fill: currentColor !important;
    flex-shrink: 0 !important;
}

.ead-icon--sm {
    width: 16px !important;
    height: 16px !important;
}

.ead-icon--md {
    width: 20px !important;
    height: 20px !important;
}

.ead-icon--lg {
    width: 24px !important;
    height: 24px !important;
}

/* ==========================================
   Form Controls (alias)
   ========================================== */
.ead-form-control {
    width: 100% !important;
    padding: var(--ead-spacing-sm) var(--ead-spacing-md) !important;
    font-family: inherit !important;
    font-size: var(--ead-font-size-base) !important;
    line-height: 1.5 !important;
    color: var(--ead-gray-900) !important;
    background: #fff !important;
    border: 1px solid var(--ead-gray-300) !important;
    border-radius: var(--ead-radius-md) !important;
    transition: border-color var(--ead-transition-fast), box-shadow var(--ead-transition-fast) !important;
}

.ead-form-control:focus {
    outline: none !important;
    border-color: var(--ead-primary) !important;
    box-shadow: 0 0 0 3px var(--ead-primary-50) !important;
}

.ead-form-control--error {
    border-color: var(--ead-error) !important;
}

.ead-field-error {
    display: block !important;
    margin-top: var(--ead-spacing-xs) !important;
    font-size: var(--ead-font-size-sm) !important;
    color: var(--ead-error) !important;
}

/* ==========================================
   Admin Header (Filtros e Busca)
   ========================================== */
.zillesg-ead-frontend .ead-admin-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: var(--ead-spacing-md) !important;
    margin-bottom: var(--ead-spacing-lg) !important;
}

.zillesg-ead-frontend .ead-admin-header__filters {
    display: flex !important;
    gap: var(--ead-spacing-sm) !important;
    flex-wrap: wrap !important;
}

.zillesg-ead-frontend .ead-admin-header__search {
    min-width: 250px !important;
}

.zillesg-ead-frontend .ead-filter-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--ead-spacing-sm) !important;
    padding: var(--ead-spacing-sm) var(--ead-spacing-lg) !important;
    background: var(--ead-white) !important;
    border: 1px solid var(--ead-gray-300) !important;
    border-radius: var(--ead-radius-md) !important;
    color: var(--ead-gray-600) !important;
    font-size: var(--ead-font-size-sm) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all var(--ead-transition-fast) !important;
}

.zillesg-ead-frontend .ead-filter-btn:hover {
    background: var(--ead-gray-50) !important;
    border-color: var(--ead-gray-400) !important;
    color: var(--ead-gray-700) !important;
    text-decoration: none !important;
}

.zillesg-ead-frontend .ead-filter-btn--active {
    background: var(--ead-primary) !important;
    border-color: var(--ead-primary) !important;
    color: var(--ead-white) !important;
}

.zillesg-ead-frontend .ead-filter-btn--active:hover {
    background: var(--ead-primary-dark) !important;
    border-color: var(--ead-primary-dark) !important;
    color: var(--ead-white) !important;
}

.zillesg-ead-frontend .ead-filter-btn svg {
    width: 16px !important;
    height: 16px !important;
}

/* ==========================================
   Tables
   ========================================== */
.zillesg-ead-frontend .ead-table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.zillesg-ead-frontend .ead-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: var(--ead-font-size-sm) !important;
}

.zillesg-ead-frontend .ead-table th,
.zillesg-ead-frontend .ead-table td {
    padding: var(--ead-spacing-md) !important;
    text-align: left !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--ead-gray-200) !important;
}

.zillesg-ead-frontend .ead-table thead th {
    background: var(--ead-gray-50) !important;
    color: var(--ead-gray-700) !important;
    font-weight: 600 !important;
    font-size: var(--ead-font-size-xs) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
}

.zillesg-ead-frontend .ead-table--hover tbody tr:hover {
    background: var(--ead-gray-50) !important;
}

.zillesg-ead-frontend .ead-table__actions-col {
    width: 150px !important;
    text-align: right !important;
}

.zillesg-ead-frontend .ead-table__actions {
    display: flex !important;
    gap: var(--ead-spacing-xs) !important;
    justify-content: flex-end !important;
}

.zillesg-ead-frontend .ead-table__empty {
    text-align: center !important;
    padding: var(--ead-spacing-2xl) !important;
    color: var(--ead-gray-500) !important;
}

.zillesg-ead-frontend .ead-table__empty-icon {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto var(--ead-spacing-md) !important;
    color: var(--ead-gray-300) !important;
}

.zillesg-ead-frontend .ead-table__empty p {
    margin: 0 !important;
}

/* User cell in table */
.zillesg-ead-frontend .ead-user-cell {
    display: flex !important;
    align-items: center !important;
    gap: var(--ead-spacing-md) !important;
}

.zillesg-ead-frontend .ead-user-cell__info {
    display: flex !important;
    flex-direction: column !important;
}

.zillesg-ead-frontend .ead-user-cell__name {
    font-weight: 500 !important;
    color: var(--ead-gray-900) !important;
}

.zillesg-ead-frontend .ead-user-cell__role {
    font-size: var(--ead-font-size-xs) !important;
    color: var(--ead-gray-500) !important;
}

/* Avatar */
.zillesg-ead-frontend .ead-avatar {
    border-radius: var(--ead-radius-full) !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.zillesg-ead-frontend .ead-avatar--sm {
    width: 40px !important;
    height: 40px !important;
}

.zillesg-ead-frontend .ead-avatar--sm img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Badge danger */
.zillesg-ead-frontend .ead-badge--danger {
    background: var(--ead-error-light) !important;
    color: #991b1b !important;
}

.zillesg-ead-frontend .ead-badge--info {
    background: var(--ead-info-light) !important;
    color: #1e40af !important;
}

/* Text utilities */
.zillesg-ead-frontend .ead-text-muted {
    color: var(--ead-gray-500) !important;
}

/* ==========================================
   Checkboxes
   ========================================== */
.zillesg-ead-frontend .ead-checkbox-group {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--ead-spacing-sm) !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    padding: var(--ead-spacing-sm) !important;
    border: 1px solid var(--ead-gray-200) !important;
    border-radius: var(--ead-radius-md) !important;
    background: var(--ead-gray-50) !important;
}

.zillesg-ead-frontend .ead-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: var(--ead-spacing-sm) !important;
    cursor: pointer !important;
}

.zillesg-ead-frontend .ead-checkbox input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--ead-primary) !important;
    cursor: pointer !important;
}

.zillesg-ead-frontend .ead-checkbox__label {
    font-size: var(--ead-font-size-sm) !important;
    color: var(--ead-gray-700) !important;
}

/* ==========================================
   Modal text
   ========================================== */
.zillesg-ead-frontend .ead-modal__text {
    margin: 0 0 var(--ead-spacing-lg) !important;
    color: var(--ead-gray-600) !important;
}

.zillesg-ead-frontend .ead-modal__text strong {
    color: var(--ead-gray-900) !important;
}

/* ==========================================
   Admin Users specific
   ========================================== */
.zillesg-ead-frontend .ead-admin-users {
    min-height: 400px !important;
}

/* Links in tables */
.zillesg-ead-frontend .ead-table a {
    color: var(--ead-primary) !important;
    text-decoration: none !important;
}

.zillesg-ead-frontend .ead-table a:hover {
    text-decoration: underline !important;
}

/* ==========================================
   Responsive - Admin
   ========================================== */
@media (max-width: 768px) {
    .zillesg-ead-frontend .ead-admin-header {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .zillesg-ead-frontend .ead-admin-header__search {
        min-width: 100% !important;
    }

    .zillesg-ead-frontend .ead-filter-btn span:not(.ead-badge) {
        display: none !important;
    }

    .zillesg-ead-frontend .ead-table__actions .ead-btn span {
        display: none !important;
    }
}