body,
html {
    transition: background-color .3s, color .3s
}

:root {
    --font-heading: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #FAF9F6;
    --bg-card: #ffffff;
    --bg-hover: #e9ecef;
    --text-primary: #333333;
    --text-secondary: #444444;
    --text-tertiary: #666666;
    --text-inverse: #ffffff;
    --text-muted: #999999;
    --color-primary: #5a67d8;
    --color-primary-hover: #4c51bf;
    --color-secondary: #764ba2;
    --color-accent: #b523eb;
    --color-warning: #b8860b;
    --color-warning-text: #f5f5f5;
    --color-danger: #c53030;
    --color-danger-text: #ffffff;
    --color-success: #15803d;
    --color-success-text: #ffffff;
    --border-color: #ddd;
    --border-light: #e9ecef;
    --shadow-sm: rgba(0, 0, 0, 0.08);
    --shadow-md: rgba(0, 0, 0, 0.15);
    --shadow-lg: rgba(0, 0, 0, 0.2);
    --gradient-primary: linear-gradient(90deg, #b523eb 0%, #5759c7 100%);
    --gradient-hero: linear-gradient(90deg, rgba(181, 35, 235, 0.9) 0%, rgba(87, 89, 199, 0.9) 100%);
    --gradient-content: linear-gradient(180deg, #f8f9ff 0%, #dea4f1 100%);
    --gradient-sidebar: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-profile: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --alert-success-bg: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    --alert-success-text: #155724;
    --alert-success-border: #c3e6cb;
    --alert-error-bg: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    --alert-error-text: #721c24;
    --alert-error-border: #f5c6cb;
    --alert-info-bg: #d1ecf1;
    --alert-info-text: #0c5460;
    --alert-warning-bg: #fff3cd;
    --alert-warning-text: #856404
}

.dark-mode {
    --bg-primary: #0F111A;
    --bg-secondary: #1A1D2B;
    --bg-tertiary: #1A1D2B;
    --bg-card: #252938;
    --bg-hover: #2D3548;
    --text-primary: #E2E8F0;
    --text-secondary: #CBD5E1;
    --text-tertiary: #94A3B8;
    --text-inverse: #0F111A;
    --text-muted: #64748B;
    --color-primary: #818CF8;
    --color-primary-hover: #A5B4FC;
    --color-secondary: #C084FC;
    --color-accent: #C084FC;
    --color-warning: #fbbf24;
    --color-warning-text: #0F111A;
    --color-danger: #f87171;
    --color-danger-text: #0F111A;
    --color-success: #4ade80;
    --color-success-text: #0F111A;
    --border-color: #334155;
    --border-light: #475569;
    --shadow-sm: rgba(0, 0, 0, 0.3);
    --shadow-md: rgba(0, 0, 0, 0.4);
    --shadow-lg: rgba(0, 0, 0, 0.5);
    --gradient-primary: linear-gradient(90deg, #c084fc 0%, #818cf8 100%);
    --gradient-hero: linear-gradient(90deg, rgba(192, 132, 252, 0.8) 0%, rgba(129, 140, 248, 0.8) 100%);
    --gradient-content: linear-gradient(180deg, #1A1D2B 0%, #252938 100%);
    --gradient-sidebar: linear-gradient(135deg, #818CF8 0%, #C084FC 100%);
    --gradient-profile: linear-gradient(135deg, #818CF8 0%, #C084FC 100%);
    --alert-success-bg: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.2) 100%);
    --alert-success-text: #86EFAC;
    --alert-success-border: rgba(34, 197, 94, 0.3);
    --alert-error-bg: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
    --alert-error-text: #FCA5A5;
    --alert-error-border: rgba(239, 68, 68, 0.3);
    --alert-info-bg: rgba(59, 130, 246, 0.2);
    --alert-info-text: #93C5FD;
    --alert-warning-bg: rgba(245, 158, 11, 0.2);
    --alert-warning-text: #FCD34D
}

@media (prefers-color-scheme:dark) {
    :root:not(.light-mode) {
        --bg-primary: #0F111A;
        --bg-secondary: #1A1D2B;
        --bg-tertiary: #1A1D2B;
        --bg-card: #252938;
        --bg-hover: #2D3548;
        --text-primary: #E2E8F0;
        --text-secondary: #CBD5E1;
        --text-tertiary: #94A3B8;
        --text-inverse: #0F111A;
        --text-muted: #64748B;
        --color-primary: #818CF8;
        --color-primary-hover: #A5B4FC;
        --color-secondary: #C084FC;
        --color-accent: #C084FC;
        --border-color: #334155;
        --border-light: #475569;
        --shadow-sm: rgba(0, 0, 0, 0.3);
        --shadow-md: rgba(0, 0, 0, 0.4);
        --shadow-lg: rgba(0, 0, 0, 0.5);
        --gradient-primary: linear-gradient(90deg, #c084fc 0%, #818cf8 100%);
        --gradient-hero: linear-gradient(90deg, rgba(192, 132, 252, 0.8) 0%, rgba(129, 140, 248, 0.8) 100%);
        --gradient-content: linear-gradient(180deg, #1A1D2B 0%, #252938 100%);
        --gradient-sidebar: linear-gradient(135deg, #818CF8 0%, #C084FC 100%);
        --gradient-profile: linear-gradient(135deg, #818CF8 0%, #C084FC 100%);
        --alert-success-bg: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.2) 100%);
        --alert-success-text: #86EFAC;
        --alert-success-border: rgba(34, 197, 94, 0.3);
        --alert-error-bg: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
        --alert-error-text: #FCA5A5;
        --alert-error-border: rgba(239, 68, 68, 0.3);
        --alert-info-bg: rgba(59, 130, 246, 0.2);
        --alert-info-text: #93C5FD;
        --alert-warning-bg: rgba(245, 158, 11, 0.2);
        --alert-warning-text: #FCD34D
    }
}

input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=text],
input[type=time],
input[type=url],
select,
textarea {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color)
}

input[type=date]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=text]:focus,
input[type=time]:focus,
input[type=url]:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary);
    outline-color: var(--color-primary)
}

.dark-mode .article-meta,
.dark-mode .article-meta-home,
.dark-mode .btn-read-more,
.dark-mode .create-action-btn,
.dark-mode .latest-articles .title,
.dark-mode .page-header-with-action .title {
    color: #f5f5f5
}

.dark-mode .admin-zone .btn-delete,
.dark-mode .admin-zone .btn-delete:hover,
.dark-mode .admin-zone .btn-view,
.dark-mode .admin-zone .btn-view:hover,
.dark-mode .article-actions .btn-delete,
.dark-mode .article-actions .btn-delete:hover,
.dark-mode .btn-apply-action,
.dark-mode .btn-apply-action:hover,
.dark-mode .btn-delete,
.dark-mode .btn-delete:hover,
.dark-mode .btn-group-register,
.dark-mode .btn-group-register:hover,
.dark-mode .btn-individual-register,
.dark-mode .btn-individual-register:hover,
.dark-mode .btn-success,
.dark-mode .btn-success:hover,
.dark-mode .btn-unblock,
.dark-mode .btn-unblock:hover,
.dark-mode .btn-view,
.dark-mode .btn-view:hover,
.dark-mode .create-action-btn,
.dark-mode .create-action-btn:hover {
    color: #f5f5f5 !important
}

.dark-mode .admin-zone .btn-edit,
.dark-mode .admin-zone .btn-edit:hover,
.dark-mode .article-actions .btn-edit,
.dark-mode .article-actions .btn-edit:hover,
.dark-mode .btn-edit,
.dark-mode .btn-edit:hover {
    background-color: #b8860b !important;
    color: #f5f5f5 !important
}

.dark-mode .fc-col-header-cell,
body {
    background-color: var(--bg-secondary)
}

.dark-mode .fc-daygrid-day-top,
body {
    color: var(--text-primary)
}

.dark-mode .fc-theme-standard .fc-scrollgrid,
.dark-mode .fc-theme-standard td,
.dark-mode .fc-theme-standard th {
    border-color: var(--border-color)
}

.dark-mode .fc-col-header-cell {
    color: var(--text-primary)
}

.dark-mode .fc-daygrid-day {
    background-color: var(--bg-card)
}

.dark-mode .fc-daygrid-day-number,
.dark-mode .fc-daygrid-day-number a,
.dark-mode .fc-daygrid-day-top a,
.dark-mode .fc-list,
.dark-mode .fc-list-day *,
.dark-mode .fc-list-day-cushion,
.dark-mode .fc-list>*,
.dark-mode .fc-timegrid-axis-cushion,
.dark-mode .fc-timegrid-col-header-cell-cushion,
.dark-mode .fc-timegrid-slot-label,
.dark-mode .fc-toolbar-title {
    color: var(--text-primary) !important
}

.dark-mode .fc-day-today {
    background-color: var(--bg-hover) !important
}

.dark-mode .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    color: var(--color-primary) !important;
    font-weight: 700
}

.dark-mode .fc-day-other .fc-daygrid-day-top {
    opacity: .5
}

.dark-mode .fc-button-group button {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--text-inverse) !important
}

.dark-mode .fc-list-table,
.dark-mode .fc-list-table td {
    border-color: var(--border-color) !important
}

.dark-mode .fc-button-group button:hover {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important
}

.dark-mode .fc-list-day,
.dark-mode .fc-timegrid-axis,
.dark-mode .fc-timegrid-col-header,
.dark-mode .fc-timegrid-col-header-cell {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important
}

.dark-mode .fc-list,
.dark-mode .fc-timegrid-col {
    background-color: var(--bg-card) !important
}

.dark-mode .fc-daygrid-event,
.dark-mode .fc-event,
.dark-mode .fc-event-main,
.dark-mode .fc-event-main-frame,
.dark-mode .fc-event-time,
.dark-mode .fc-event-title,
.dark-mode .fc-event-title-container,
.dark-mode .fc-list-event,
.dark-mode .fc-list-event *,
.dark-mode .fc-list-event td *,
.dark-mode .fc-list-event-time,
.dark-mode .fc-list-event-title,
.dark-mode .fc-list-event:hover *,
.dark-mode .fc-list-event:hover .fc-list-event-time,
.dark-mode .fc-list-event:hover .fc-list-event-title,
.dark-mode .fc-list-event:hover td,
.dark-mode .fc-list-event:hover td *,
.dark-mode .fc-timegrid-event,
.dark-mode .fc-timegrid-event .fc-event-main,
.dark-mode .fc-timegrid-event .fc-event-time,
.dark-mode .fc-timegrid-event .fc-event-title,
.dark-mode .fc-timegrid-event-short {
    color: var(--text-inverse) !important
}

.dark-mode .fc-list-event:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
}

.dark-mode .fc-list-table {
    color: var(--text-primary) !important
}

.dark-mode .fc-list-table th {
    color: var(--text-primary) !important;
    background-color: var(--bg-secondary) !important
}

.dark-mode .fc-list-event td,
.dark-mode .fc-list-event:hover td {
    color: var(--text-inverse) !important;
    background-color: inherit !important
}

.dark-mode .fc-list-table th {
    background-color: var(--bg-secondary) !important
}

.dark-mode .fc-daygrid-event:hover,
.dark-mode .fc-event:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5)
}

.dark-mode .fc-timegrid-event-short:hover,
.dark-mode .fc-timegrid-event:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .5)
}