/* Valura v1.5 WLE - Custom Design System Styles */

:root {
    /* Brand Colors - Reference: DesignRules.md */
    --brand-primary-light: #4d5970;
    --brand-primary: #1D3E76;
    --brand-primary-dark: #102542;
    --brand-accent: #81A1C1;
    --brand-text-anthracite: #575757;

    /* Radzen Override Tokens (Commented out to allow themes like dark modes to apply their own colors)
    --rz-primary: var(--brand-primary);
    --rz-primary-dark: var(--brand-primary-dark);
    --rz-primary-light: var(--brand-accent);
    --rz-text-color: var(--brand-text-anthracite);
    */

    /* Shape Language */
    --rz-border-radius: 4px;
    /* Small/Interactive */
    --rz-card-border-radius: 8px;
    /* Large/Containers */

    /* Typography */
    --rz-text-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --brand-header-font-family: 'Playfair Display', Georgia, "Times New Roman", serif;
}

/* Base Body Styles */
body {
    font-family: var(--rz-text-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography Hierarchy */
h1,
h2,
.brand-header {
    font-family: var(--brand-header-font-family);
    color: #000000;
    margin-bottom: 1.5rem;
}

/* Layout Spacing Rules */
.v-container-gap {
    gap: 24px !important;
    /* Minimum gap between major UI blocks */
}

/* Section Margin */
.v-section-margin {
    margin-bottom: 1.5rem;
    /* 24px whitespace */
}

/* White Label Infrastructure - Logical Properties for RTL Support */
.v-flex-start {
    display: flex;
    justify-content: flex-start;
    padding-inline-start: 1rem;
}

.v-margin-start {
    margin-inline-start: 1rem;
}

/* Button & Input Enhancements */
.rz-button,
.rz-textbox,
.rz-dropdown {
    border-radius: var(--rz-border-radius) !important;
}

/* Custom Login Layout Enhancements */
.login-card {
    border-radius: var(--rz-card-border-radius);
    box-shadow: 0 8px 16px rgba(16, 37, 66, 0.1);
    background: var(--rz-base-background);
    padding: 2.5rem;
}

.login-header-logo {
    max-height: 60px;
    margin-bottom: 2rem;
}

/* Split Login Layout */
.v-login-layout {
    display: flex;
    width: 100vw;
    height: 100vh;
    background-color: var(--rz-base-background-color);
    overflow: hidden;
}

.v-login-visual {
    flex: 0 0 50%;
    background: linear-gradient(135deg, var(--brand-primary-light) 0%, var(--brand-primary) 25%, var(--brand-primary-dark) 65%, var(--rz-black) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem;
    position: relative;
    color: white;
}

.v-login-visual::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
    background-size: 24px 24px;
    pointer-events: none;
}

.v-login-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background-color: #eFeFeFaa !important;
}

.v-login-tram-1 {
    background: linear-gradient(135deg, #FFFFFF 0%, #FCFCFC 25%, #F0F0F0 45%, #EAEAEA 65%, #FFFFFF 100%);
    margin-top: -4rem;
    width: 100%;
    padding: 3rem;
    box-shadow: 2px 2px 10px white;
    border-radius: 10px;
}

.v-login-tram-2 {
    flex: 0 0 50%;
    background: linear-gradient(-135deg, var(--rz-primary-light) 0%, var(--rz-primary) 25%, var(--rz-primary-dark) 65%, var(--rz-black) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem;
    position: relative;
    color: white;
}

/* Login Body - Form içeriği merkezlensin */
.v-login-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.v-login-button {
    background-color: var(--brand-primary-dark) !important;
    color: #FFFFFF !important;
}

/* Visual Area Copyright (Mavi alan) */
.v-visual-copyright {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.75rem;
    margin-top: 2rem;
    letter-spacing: 0.5px;
}

/* Login Footer (Beyaz alan - alt kısım) */
.v-login-footer {
    bottom: 0;
    padding: 1rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
}

.v-login-footer-dark {
    position: absolute;
    color: white;
    margin-bottom: 2rem;
    text-align: center;
    border-top: 1px solid grey;
}

/* Footer Link Stilleri */
.v-footer-link {
    color: var(--rz-text-disabled-color);
    font-size: 0.75rem;
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.v-footer-link:hover {
    color: var(--rz-primary);
    text-decoration: underline;
}

.v-footer-link:focus {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.v-brand-logo-large {
    width: 240px;
    margin-bottom: 3rem;
}

.v-visual-text {
    font-family: var(--brand-header-font-family);
    max-width: 520px;
    text-align: center;
    line-height: 1.3;
    color: #FFFFFF !important;
}

.v-visual-text2 {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 1rem;
    margin-top: 2rem;
    letter-spacing: 0.5px;
}

/* Desktop Only Constraint (1366px min) */
@media (max-width: 1365px) {
    .v-login-layout {
        min-width: 1366px;
        overflow-x: auto;
    }
}

.v-chat-message-text {
    font-family: var(--rz-text-font-family);
    font-size: smaller !important;
    line-height: 1.4;
    color: var(--rz-text-color);
}






/* ==========================================================================
   Fütüristik Blazor Reconnect Modal (Özel Tasarım)
   ========================================================================== */

/* 1. Önizleme Sayfaları için Serbest Gösterim (Örn: /component-tests sayfasında her şey görünür) */
div.components-reconnect-container .components-reconnect-first-attempt-visible,
div.components-reconnect-container .components-reconnect-repeated-attempt-visible,
div.components-reconnect-container .components-reconnect-failed-visible,
div.components-reconnect-container .components-pause-visible,
div.components-reconnect-container .components-resume-failed-visible,
div.components-reconnect-container .components-rejoining-animation {
    display: block !important;
}

div.components-reconnect-container button.components-reconnect-failed-visible,
div.components-reconnect-container button.components-pause-visible {
    display: inline-flex !important;
}

/* 2. Gerçek Modal İçinde Varsayılan Olarak Gizleme (Blazor akışına uyum için) */
dialog#components-reconnect-modal .components-reconnect-first-attempt-visible,
dialog#components-reconnect-modal .components-reconnect-repeated-attempt-visible,
dialog#components-reconnect-modal .components-reconnect-failed-visible,
dialog#components-reconnect-modal .components-pause-visible,
dialog#components-reconnect-modal .components-resume-failed-visible,
dialog#components-reconnect-modal .components-rejoining-animation {
    display: none !important;
}

/* 3. Gerçek Reconnect Durumlarında Tetiklenen Gösterim Kuralları */
dialog#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
dialog#components-reconnect-modal.components-reconnect-show .components-rejoining-animation {
    display: block !important;
}

dialog#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
dialog#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation {
    display: block !important;
}

dialog#components-reconnect-modal.components-reconnect-paused .components-pause-visible {
    display: block !important;
}

dialog#components-reconnect-modal.components-reconnect-paused button.components-pause-visible {
    display: inline-flex !important;
}

dialog#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
    display: block !important;
}

dialog#components-reconnect-modal.components-reconnect-failed button.components-reconnect-failed-visible {
    display: inline-flex !important;
}

dialog#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible {
    display: block !important;
}

/* 4. Dialog Base Container & Cam Efekti (Glassmorphism) */
#components-reconnect-modal {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    width: 22rem !important;
    max-width: 90vw !important;
    padding: 2.25rem 1.75rem 1.75rem 1.75rem !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 30px var(--rz-primary) !important;
    margin: auto !important;
    opacity: 0;
    transform: translateY(15px) scale(0.95);
    transition: display 0.4s allow-discrete, overlay 0.4s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity 0.4s both !important;
}

#components-reconnect-modal[open] {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    animation: components-reconnect-modal-slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

#components-reconnect-modal::backdrop {
    background-color: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

#components-reconnect-button,
#components-resume-button {
    visibility: visible !important;
    display: inline-block !important;
}

/* 5. İçerik Düzeni (Layout) */
.components-reconnect-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.5rem !important;
    width: 100% !important;
}

.reconnect-hud-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-bottom: 0.75rem !important;
    margin-bottom: 0.25rem !important;
}

.hud-status-indicator {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: var(--rz-primary) !important;
    box-shadow: 0 0 10px var(--rz-primary) !important;
    animation: indicator-blink 1.5s ease-in-out infinite !important;
}

#components-reconnect-modal.components-reconnect-failed .hud-status-indicator,
#components-reconnect-modal.components-reconnect-resume-failed .hud-status-indicator {
    background-color: #f87171 !important;
    box-shadow: 0 0 10px #f87171 !important;
}

#components-reconnect-modal.components-reconnect-paused .hud-status-indicator {
    background-color: #fbbf24 !important;
    box-shadow: 0 0 10px #fbbf24 !important;
}

@keyframes indicator-blink {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

.hud-title {
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.15em !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-weight: 700 !important;
}

/* 6. Radar & Nabız Dairesi Görselleri */
.reconnect-visual-container {
    position: relative !important;
    width: 130px !important;
    height: 130px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Dalgalanan Neon Halkalar */
.reconnect-pulse-ring {
    position: absolute !important;
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    border: 2px solid var(--rz-primary) !important;
    opacity: 0;
    animation: pulseRing 2.4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite !important;
    pointer-events: none !important;
    display: block;
}

.reconnect-pulse-ring.delay-1 {
    animation-delay: 0.8s !important;
}

.reconnect-pulse-ring.delay-2 {
    animation-delay: 1.6s !important;
}

dialog#components-reconnect-modal.components-reconnect-failed .reconnect-pulse-ring,
dialog#components-reconnect-modal.components-reconnect-resume-failed .reconnect-pulse-ring,
dialog#components-reconnect-modal.components-reconnect-paused .reconnect-pulse-ring {
    animation: none;
    display: none;
}

@keyframes pulseRing {
    0% {
        transform: scale(0.65);
        opacity: 0;
    }

    15% {
        opacity: 0.4;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

/* Dönen Radar Göstergesi */
.components-rejoining-animation {
    position: relative !important;
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    background: rgba(30, 41, 59, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.radar-sweep {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    background: conic-gradient(from 0deg, transparent 40%, var(--rz-primary) 100%) !important;
    opacity: 0.25 !important;
    animation: radar-sweep-rotation 1.8s linear infinite !important;
    pointer-events: none !important;
}

.radar-dot {
    position: absolute !important;
    width: 6px !important;
    height: 6px !important;
    background-color: var(--rz-primary) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 12px var(--rz-primary) !important;
    top: 25% !important;
    left: 25% !important;
    animation: radar-ping 1.8s ease-out infinite !important;
}

.radar-core {
    position: absolute !important;
    width: 10px !important;
    height: 10px !important;
    background-color: var(--rz-primary) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 15px var(--rz-primary) !important;
    z-index: 2 !important;
}

@keyframes radar-sweep-rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes radar-ping {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* 7. Durum İkonları */
.reconnect-status-icon {
    width: 52px !important;
    height: 52px !important;
    z-index: 10 !important;
    filter: drop-shadow(0 0 10px currentColor) !important;
}

.reconnect-status-icon.icon-error {
    color: #f87171 !important;
    animation: iconShake 0.6s cubic-bezier(.36, .07, .19, .97) both !important;
}

.reconnect-status-icon.icon-pause {
    color: #fbbf24 !important;
    animation: iconPulse 2s ease-in-out infinite !important;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

@keyframes iconShake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-3px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(3px, 0, 0);
    }
}

/* 8. Tipografi & Yazı Düzenleri */
.reconnect-content-wrapper {
    text-align: center !important;
    width: 100% !important;
}

.reconnect-title {
    margin: 0 0 0.5rem 0 !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #f8fafc !important;
    letter-spacing: -0.01em !important;
    font-family: inherit !important;
}

.reconnect-title.text-danger {
    color: #f87171 !important;
}

.reconnect-title.text-warning {
    color: #fbbf24 !important;
}

.reconnect-desc {
    margin: 0 !important;
    font-size: 0.9rem !important;
    color: #94a3b8 !important;
    line-height: 1.5 !important;
}

.countdown-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 26px !important;
    height: 26px !important;
    padding: 0 6px !important;
    background: linear-gradient(135deg, var(--rz-primary) 0%, rgba(30, 41, 59, 0.8) 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    margin: 0 0.25rem !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 9. Lazer Tarama Çizgisi */
.reconnect-progress-container {
    width: 100% !important;
    margin-top: -0.25rem !important;
}

.reconnect-progress-bar {
    width: 100% !important;
    height: 4px !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    position: relative !important;
}

.reconnect-progress-scanner {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: 40% !important;
    background: linear-gradient(90deg, transparent, var(--rz-primary), transparent) !important;
    animation: sweep-progress 1.6s ease-in-out infinite !important;
}

@keyframes sweep-progress {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(250%);
    }
}

/* 10. Aksiyon Butonları */
.reconnect-actions-wrapper {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 0.75rem !important;
}

.reconnect-actions-wrapper .rz-button {
    flex: 1 !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0.65rem 1rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    font-size: 0.9rem !important;
    transition: all 0.25s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.reconnect-actions-wrapper .rz-button:hover {
    box-shadow: 0 0 15px var(--rz-primary) !important;
    transform: translateY(-1px) !important;
}

.button-icon {
    flex-shrink: 0 !important;
    margin-right: 0.5rem !important;
    vertical-align: middle !important;
}

/* 11. Modal Açılış ve Kapanış Süzülme Animasyonları */
@keyframes components-reconnect-modal-slideUp {
    0% {
        transform: translateY(15px) scale(0.95);
        opacity: 0;
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(15px) scale(0.95);
    }
}

/* 12. Resizable Sidebar & AI Chat Drag Handle */
.v-resizable-sidebar {
    position: relative !important;
}

.v-sidebar-resize-handle {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    cursor: ew-resize;
    z-index: 1000;
    background-color: transparent;
    transition: background-color 0.2s ease, border-left 0.2s ease;
    border-left: 1px solid transparent;
}

.v-sidebar-resize-handle:hover,
.v-sidebar-resize-handle.active {
    background-color: rgba(29, 62, 118, 0.15);
    border-left: 2px solid var(--rz-primary);
}