/* VzFITW Custom Theme – modern, seriös und professionell im Blau-Schema */

:root {
    --brand-blue: #0d4f8b;
    --brand-blue-dark: #0b3f74;
    --brand-cyan: #1da9de;
    --surface: #101c36;
    --surface-muted: #12284f;
    --surface-soft: #101c36;
    --surface-alt: #101c36;
    --text: #e4e7f1;
    --text-muted: #8a97b0;
    --border: rgba(255, 255, 255, 0.10);
    --shadow: 0 20px 50px rgba(13, 79, 139, 0.08);
    --sidebar-background: #101c36;
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-input-background: #f4f8fd;
    --sidebar-input-border: #d8e3ef;
    --sidebar-input-focus: #0d4f8b;
    --sidebar-label: #65738a;
    --sidebar-help: #65738a;
}

body, .rz-application, .rz-main, .rz-content, .layout-video-card {
    background: var(--surface) !important;
    color: var(--text) !important;
}

.rz-card, .RadzenCard, .rz-dialog, .rz-sidebar, .rz-panel-menu, .rz-header, .rz-footer {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
}

.rz-menuitem, .rz-panelmenu .rz-menuitem, .rz-sidebar .rz-menuitem {
    color: var(--text) !important;
}

.rz-menuitem a, .rz-panelmenu .rz-menuitem a, .rz-sidebar .rz-menuitem a {
    color: var(--text) !important;
}

.rz-menuitem:hover, .rz-panelmenu .rz-menuitem:hover, .rz-sidebar .rz-menuitem:hover {
    background: rgba(29, 169, 222, 0.08) !important;
}

.layout-video-subtitle-text {
    background: var(--surface-muted) !important;
    color: var(--text) !important;
    border-radius: 10px;
    padding: 0.65em 1em;
    min-height: 3.5em;
    max-height: 3.5em;
    overflow: hidden;
    font-size: 1.1em;
}

.rz-button, .RadzenButton, button {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-cyan)) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rz-button:hover, .RadzenButton:hover, button:hover {
    background: linear-gradient(135deg, var(--brand-blue-dark), #128dc3) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(13, 79, 139, 0.18) !important;
}

.rz-button:focus, .RadzenButton:focus, button:focus {
    box-shadow: 0 0 0 0.2rem rgba(29, 169, 222, 0.25) !important;
}

.rz-footer, .footer {
    color: var(--text-muted) !important;
    background: var(--surface-alt) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text) !important;
}

input, select, textarea, .form-control, .rz-input {
    background: var(--surface-muted) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}

input:focus, select:focus, textarea:focus, .form-control:focus, .rz-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(29, 169, 222, 0.2) !important;
}

.login-container, .rz-dialog, .rz-card {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 40px rgba(13, 79, 139, 0.08) !important;
}

a, a:visited {
    color: var(--brand-blue) !important;
}
a:hover {
    color: var(--brand-cyan) !important;
}

.rz-dialog .rz-dialog-title, .rz-dialog .rz-dialog-header {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-cyan)) !important;
    color: #fff !important;
}

.rz-dialog .rz-dialog-content {
    background: var(--surface) !important;
}