/*DESIGN TOKENS*/
:root {
    /* Marka renkleri */
    --clr-energy   : #F59E0B;
    --clr-risk     : #EF4444;
    --clr-predict  : #A855F7;
    --clr-env      : #3B82F6;
    --clr-success  : #10B981;

    /* Arka plan */
    --bg-body      : #141414;
    --bg-body-grad : none;

    /* Yüzey */
    --surface-glass      : rgba(20,20,23,0.60);
    --surface-glass-blur : 20px;
    --surface-glass-bdr  : rgba(255,255,255,0.20);
    --surface-glass-shd  : 0 8px 32px 0 rgba(0,0,0,0.30);

    --surface-soft       : rgba(255,255,255,0.03);
    --surface-soft-bdr   : rgba(255,255,255,0.08);

    --surface-sidebar    : #0a0a0a;
    --surface-sidebar-bdr: rgba(255,255,255,0.05);

    --surface-input      : #f1f3f4;
    --surface-input-focus: #ffffff;
    --input-text         : #1f2937;

    /* Metin */
    --txt-primary  : #e2e8f0;
    --txt-secondary: #cbd5e1;   /* slate-300 */
    --txt-muted    : #94a3b8;   /* slate-400 */
    --txt-faint    : #64748b;   /* slate-500 */
    --txt-strong   : #ffffff;
    --device-warning-txt: #fbbf24;

    /* Logo */
    --logo-dark-display : block;
    --logo-light-display: none;

    /* Izgara filtresi */
    --grid-filter   : none;
    --canvas-filter : none;

    /* Popup (Leaflet) */
    --popup-bg  : rgba(20,20,20,0.95);
    --popup-txt : white;
    --popup-bdr : rgba(255,255,255,0.1);

    /* Nav aktif */
    --nav-active-bg : rgba(255,255,255,0.08);
    --nav-active-bdr: rgba(255,255,255,0.10);
    --nav-active-shd:
        inset 0 1px 1px rgba(255,255,255,0.05),
        inset 0 0 0 1px rgba(245,158,11,0.25),
        0 0 25px rgba(245,158,11,0.25);
    --nav-active-txt: white;
    --nav-hover-bg  : transparent;

    /* Report */
    --report-hover-bg    : rgba(255,255,255,0.08);
    --report-active-bg   : linear-gradient(90deg,rgba(245,158,11,0.15),transparent);
    --report-active-bdr  : #F59E0B;
    --ai-box-bg          : radial-gradient(circle at top left,rgba(59,130,246,0.15),transparent 70%);
    --ai-box-bdr         : rgba(59,130,246,0.2);
    --ai-box-shd         : 0 0 30px -10px rgba(59,130,246,0.2);

    /* Toast */
    --toast-bg : rgba(20,20,23,0.60);
    --toast-bdr: rgba(239,68,68,0.4);
    --toast-shd: 0 10px 40px -10px rgba(239,68,68,0.25);

    /* History modal */
    --history-bg  : rgba(255,255,255,0.03);
    --history-bdr : transparent;

    /* Fault/predict items */
    --fault-bg  : transparent;
    --fault-bdr : rgba(226,232,240,0);

    /* Scrollbar */
    --scroll-track: rgba(255,255,255,0.02);
    --scroll-thumb: rgba(255,255,255,0.10);

    --transition-theme: background-color 0.4s ease,
                        background-image  0.4s ease,
                        color             0.4s ease,
                        border-color      0.4s ease,
                        box-shadow        0.4s ease;
}

[data-theme="light"] {
    /*Arka Plan ve Kutular*/
    --bg-body           : #f1f3f4;
    --bg-body-grad      : none;
    --surface-glass     : #ffffff; 
    --surface-soft      : #ffffff; 
    --surface-glass-bdr : rgba(0, 0, 0, 0.12); 
    --surface-soft-bdr  : rgba(0, 0, 0, 0.04);
    --surface-glass-shd : 0 8px 20px -6px rgba(0, 0, 0, 0.1), 0 4px 8px -4px rgba(0, 0, 0, 0.06);

    --toast-bg : rgba(255, 255, 255, 0.95);
    --toast-bdr: rgba(239, 68, 68, 0.2);
    --toast-shd: 0 20px 40px -12px rgba(0, 0, 0, 0.15);

    --surface-sidebar    : #ffffff;
    --surface-sidebar-bdr: #e2e8f0;

    /*Yazı Renkleri*/
    --txt-strong   : #0f172a;
    --txt-primary  : #334155;
    --txt-secondary: #475569;
    --txt-muted    : #475569;
    --txt-faint    : #64748b;
    --device-warning-txt: #b45309;

    /*Logo ve Diğerleri */
    --logo-dark-display : none;
    --logo-light-display: block;
    --grid-filter       : invert(1) opacity(0.15);
    --canvas-filter     : invert(1) opacity(0.30);
    --nav-active-bg     : #f8fafc;
    --nav-active-bdr    : #e2e8f0;
    --nav-active-txt    : #0f172a;
}
[data-theme="light"] .glass-hero {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);
}

[data-theme="light"] .nav-item span{
    color: #0f172a;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background-color : var(--bg-body);
    background-image : var(--bg-body-grad);
    color            : var(--txt-primary);
    transition       : var(--transition-theme);
}

body,
.glass-panel,
.glass-soft,
.glass-hero,
.selection-sidebar,
.login-modern,
.history-item,
.ai-insight-box,
aside {
    transition: var(--transition-theme);
}

.device-warning {
    color: var(--device-warning-txt);
}

/*SCROLLBAR*/
::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: var(--scroll-track); }
::-webkit-scrollbar-thumb   { background: var(--scroll-thumb); border-radius: 10px; }
.touch-scroll               { -webkit-overflow-scrolling: touch; overflow-y: auto; }

/*ARKAPLAN KATMANLARI*/
.grid-bg {
    position        : absolute;
    inset           : 0;
    z-index         : 0;
    pointer-events  : none;
    background-size : 50px 50px;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
    mask-image      : radial-gradient(circle at center, black 40%, transparent 100%);
    animation       : gridMove 60s linear infinite;
    /* Token üzerinden tema geçişi — !important gerekmez */
    filter          : var(--grid-filter);
}

@keyframes gridMove {
    0%   { transform: perspective(500px) rotateX(0deg) translateY(0);    }
    100% { transform: perspective(500px) rotateX(0deg) translateY(50px); }
}

#canvas-bg {
    position      : fixed;
    inset         : 0;
    width         : 100%;
    height        : 100%;
    z-index       : 0;
    pointer-events: none;
    filter        : var(--canvas-filter);
}

html:not([data-theme="light"]) .grid-bg,
html:not([data-theme="light"]) #canvas-bg,
[data-theme="light"] #canvas-bg,
[data-theme="dark"] .grid-bg,
[data-theme="dark"] #canvas-bg {
    display: none;
}

/*GLASSMORPHISM YÜZEYLERİ*/
.glass-panel {
    background        : var(--surface-glass);
    backdrop-filter   : blur(var(--surface-glass-blur));
    -webkit-backdrop-filter: blur(var(--surface-glass-blur));
    border            : 1px solid var(--surface-glass-bdr);
    box-shadow        : var(--surface-glass-shd);
}

.glass-soft {
    background      : var(--surface-soft);
    backdrop-filter : blur(10px);
    border          : 1px solid var(--surface-soft-bdr);
}

.glass-hero {
    background   : rgba(245,158,11,0.08);
    backdrop-filter: blur(20px);
    border       : 1px solid rgba(245,158,11,0.35);
    box-shadow   : 0 0 0 1px rgba(245,158,11,0.15), 0 30px 80px -20px rgba(245,158,11,0.45);
}

/*HOVER KARTLARI*/
.hover-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-card:hover {
    transform   : translateY(-3px);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow  : 0 12px 24px -10px rgba(0,0,0,0.1);
}

.card-hover:hover {
    transform : translateY(-3px);
    box-shadow: 0 15px 30px -10px rgba(0,0,0,0.1);
}

/*ANİMASYONLAR*/
@keyframes energyPulse {
    0%,100% { box-shadow: 0 0 0 rgba(245,158,11,0.2); }
    50%      { box-shadow: 0 0 40px rgba(245,158,11,0.6); }
}
.hero-energy { animation: energyPulse 6s ease-in-out infinite; }

@keyframes shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0;    }
}

.chart-loading {
    position        : absolute;
    inset           : 0;
    background      : linear-gradient(
        90deg,
        rgba(255,255,255,0.03) 25%,
        rgba(255,255,255,0.08) 37%,
        rgba(255,255,255,0.03) 63%
    );
    background-size : 400% 100%;
    animation       : shimmer 1.4s ease infinite;
    backdrop-filter : blur(6px);
    border-radius   : 1.5rem;
    z-index         : 20;
}

/*VIEW GEÇİŞ MOTORU*/
.view-section {
    position        : absolute;
    inset           : 0;
    width           : 100%;
    height          : 100%;
    background-color: transparent;
    z-index         : 10;
    transition      : opacity 0.6s ease, transform 0.6s ease;
}

.view-hidden {
    opacity       : 0        !important; /* [ZORUNLU] JS geçiş motoru override */
    pointer-events: none     !important; /* [ZORUNLU] Gizli görünüm tıklama engeli */
    transform     : scale(1.1) translateY(20px);
    filter        : blur(10px);
    z-index       : -1       !important; /* [ZORUNLU] z-index yarışını kazanmak için */
    display       : none     !important; /* [ZORUNLU] Ekran okuyucudan gizlemek için */
}

.view-active {
    opacity       : 1        !important; /* [ZORUNLU] JS geçiş motoru override */
    pointer-events: all      !important; /* [ZORUNLU] Aktif görünüm etkileşimi */
    transform     : scale(1) translateY(0);
    filter        : blur(0);
    z-index       : 100      !important; /* [ZORUNLU] Diğer view-section'ların üstünde */
    display       : flex     !important; /* [ZORUNLU] Tailwind hidden utility'yi ezer */
}

/*NAVİGASYON*/
.nav-item.active {
    background  : var(--nav-active-bg);
    border-color: var(--nav-active-bdr);
    box-shadow  : var(--nav-active-shd);
    color       : var(--nav-active-txt);
}

.nav-item:hover {
    background: var(--nav-hover-bg);
}

/*LOGO GÖSTERİM*/
.dark-logo  { display: var(--logo-dark-display);  }
.light-logo { display: var(--logo-light-display); }

/*SEÇİM SIDEBAR*/
.selection-sidebar {
    background  : var(--surface-sidebar);
    border-right: 1px solid var(--surface-sidebar-bdr);
}

.selection-sidebar h1,
.selection-sidebar h3 {
    color: var(--txt-strong);
}

/*TAHMIN & ARIZA ÖĞELERİ */
.predict-item i {
    transform : translateX(-4px);
    opacity   : 1;
    transition: color .3s ease, filter .3s ease;
}
.predict-item:hover i { filter: drop-shadow(0 0 6px currentColor); }

.fault-item {
    background-color: var(--surface-glass);
    border-color: var(--surface-glass-bdr);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.fault-item:hover {
    background-color: var(--surface-soft);
}

/*HARİTA*/
#map-container    { height: 100%; width: 100%; background: transparent !important; }
.leaflet-container{ background: transparent !important; width: 100%; height: 100%; }

.pulse-marker {
    width     : 14px; height: 14px; border-radius: 50%;
    background: var(--clr-energy);
    border    : 2px solid white;
    box-shadow: 0 0 0 0 rgba(245,158,11,0.7);
    animation : pulse-orange 2s infinite;
    cursor    : pointer;
}
.pulse-marker.blue   { background: var(--clr-env);     box-shadow: 0 0 0 0 rgba(59,130,246,0.7);  animation: pulse-blue   2s infinite; }
.pulse-marker.purple { background: var(--clr-predict);  box-shadow: 0 0 0 0 rgba(168,85,247,0.7); animation: pulse-purple 2s infinite; }

@keyframes pulse-orange { 0%   { box-shadow: 0 0 0 0 rgba(245,158,11,0.7); }
                          70%  { box-shadow: 0 0 0 12px rgba(245,158,11,0); }
                          100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } }
@keyframes pulse-blue   { 0%   { box-shadow: 0 0 0 0 rgba(59,130,246,0.7); }
                          70%  { box-shadow: 0 0 0 12px rgba(59,130,246,0); }
                          100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); } }
@keyframes pulse-purple { 0%   { box-shadow: 0 0 0 0 rgba(168,85,247,0.7); }
                          70%  { box-shadow: 0 0 0 12px rgba(168,85,247,0); }
                          100% { box-shadow: 0 0 0 0 rgba(168,85,247,0); } }

.leaflet-popup-content-wrapper {
    background     : var(--surface-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border         : 1px solid var(--surface-glass-bdr);
    border-radius  : 16px;
    box-shadow     : 0 12px 40px -10px rgba(0,0,0,0.25);
    padding        : 6px;
}
.leaflet-popup-tip {
    background: var(--surface-glass);
    border: 1px solid var(--surface-glass-bdr);
    border-top: none;
    border-left: none;
}
.leaflet-popup-content { margin: 14px 20px; color: var(--txt-strong); }
.leaflet-popup-content strong { font-size: 15px; letter-spacing: 0.2px; }

.leaflet-popup-close-button { color: var(--txt-muted); top: 12px; right: 12px; transition: color 0.2s; }
.leaflet-popup-close-button:hover { color: var(--txt-strong); background: transparent; }

[data-theme="light"] #plant-list-container > div {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    border-radius: 12px;
}
[data-theme="light"] #plant-list-container > div h3 { color: #0f172a; font-weight: 600; }
[data-theme="light"] #plant-list-container > div p { color: #64748b; }

/*RAPORLAR*/
.report-item {
    border    : 1px solid transparent;
    transition: all 0.2s ease;
}
.report-item:hover  { background: var(--report-hover-bg); transform: translateX(5px); }
.report-item.active {
    background  : var(--report-active-bg);
    border-left : 3px solid var(--report-active-bdr);
}

.ai-insight-box {
    background: var(--ai-box-bg);
    border    : 1px solid var(--ai-box-bdr);
    box-shadow: var(--ai-box-shd);
}

/*CHART TOOLTIP*/
#chartjs-tooltip {
    opacity      : 1;
    position     : absolute;
    background   : rgba(0,0,0,0.8);
    color        : white;
    border-radius: 8px;
    pointer-events: none;
    transform    : translate(-50%, 0);
    transition   : all .1s ease;
    border       : 1px solid rgba(255,255,255,0.1);
}

/*MODALLAR*/
#history-modal,
#analysis-modal {
    opacity       : 0;
    visibility    : hidden;
    pointer-events: none;
    transition    : opacity 0.3s ease, visibility 0.3s ease;
}
#history-modal[data-open="true"],
#analysis-modal[data-open="true"] {
    opacity       : 1;
    visibility    : visible;
    pointer-events: all;
}

#history-modal {
    display        : flex;
    align-items    : center;
    justify-content: center;
}
#history-modal .glass-panel {
    width       : 90%;
    max-width   : 700px;
    max-height  : 90vh;
    border-radius: 1.5rem;
    display     : flex;
    flex-direction: column;
    overflow    : hidden;
}
#history-modal .modal-header,
#history-modal .modal-footer {
    padding        : 1rem 1.5rem;
    border-bottom  : 1px solid rgba(255,255,255,0.1);
    display        : flex;
    justify-content: space-between;
    align-items    : center;
}
#history-modal .modal-footer {
    border-bottom: none;
    border-top   : 1px solid rgba(255,255,255,0.1);
}

#history-list-container {
    flex      : 1;
    overflow-y: auto;
    padding   : 1rem 1.5rem;
}

/*GEÇMİŞ ÖĞELERİ*/
.history-item {
    display         : flex;
    gap             : 1rem;
    padding         : 0.75rem;
    background-color: var(--history-bg);
    border          : 1px solid var(--history-bdr);
    border-radius   : 1rem;
    margin-bottom   : 0.5rem;
}

.history-item .date-box {
    min-width    : 60px;
    text-align   : center;
    border-right : 1px solid rgba(255,255,255,0.1);
    padding-right: 0.75rem;
}
.history-item .date-box .day   { font-size: 1.1rem; font-weight: bold; color: var(--txt-strong); }
.history-item .date-box .month { font-size: 0.7rem;  color: var(--txt-muted); text-transform: uppercase; }
.history-item .date-box .time  { font-size: 0.65rem; color: var(--txt-faint); }
.history-item .content         { flex: 1; }
.history-item .content h4      { font-size: 0.9rem; font-weight: 600; color: var(--txt-strong); margin-bottom: 0.25rem; }
.history-item .content p       { font-size: 0.8rem;  color: var(--txt-muted); }

/*Toast*/
#toast-notification .glass-panel {
    background: var(--toast-bg);
    border    : 1px solid var(--toast-bdr);
    box-shadow: var(--toast-shd);
}
#toast-notification h4 { transition: color 0.2s ease; }

/*Login*/
.login-modern {
    background: transparent;
    border    : none;
    box-shadow: none;
}

[data-theme="light"] .login-modern {
    background: transparent;
    border    : none;
    box-shadow: none;
}

.input-modern {
    background-color: #f1f3f4;
    border          : 1px solid transparent;
    color           : #1f2937;
    transition      : background-color 0.2s ease, border-color 0.2s ease;
}

.input-modern:focus {
    background-color: #ffffff;
    border-color    : #D579EF;
    outline         : none;
}

.register-modern .text-center > p.text-xs.pt-5 {
    color: #64748b;
}

.password-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 220px;
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 18px 40px -16px rgba(15, 23, 42, 0.55);
    color: #e2e8f0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 30;
}

.password-tooltip::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 18px;
    width: 12px;
    height: 12px;
    background: inherit;
    border-left: 1px solid rgba(148, 163, 184, 0.2);
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    transform: rotate(45deg);
}

.password-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

.password-tooltip-title {
    margin: 0 0 0.45rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #cbd5e1;
}

.password-tooltip-rule {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 12px;
    color: #94a3b8;
}

.password-tooltip-rule + .password-tooltip-rule {
    margin-top: 0.32rem;
}

.password-tooltip-rule i {
    font-size: 11px;
    color: #64748b;
}

.password-tooltip-rule.is-valid {
    color: #86efac;
}

.password-tooltip-rule.is-valid i {
    color: #22c55e;
    transform: scale(1.05);
}

[data-theme="light"] .password-tooltip {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(148, 163, 184, 0.26);
    box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.22);
    color: #334155;
}

[data-theme="light"] .password-tooltip-title {
    color: #334155;
}

[data-theme="light"] .password-tooltip-rule {
    color: #475569;
}

[data-theme="light"] .password-tooltip-rule i {
    color: #64748b;
}

[data-theme="light"] .password-tooltip-rule.is-valid {
    color: #166534;
    font-weight: 600;
}

[data-theme="light"] .password-tooltip-rule.is-valid i {
    color: #16a34a;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.weather-impact-tooltip {
    background: rgba(10, 15, 26, 0.92);
    color: var(--txt-muted);
    box-shadow: 0 18px 42px -18px rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .weather-impact-tooltip {
    background: rgba(255, 255, 255, 0.98);
    color: #334155;
    border-color: rgba(148, 163, 184, 0.24);
    box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.18);
}

@media (max-width: 767px) {
    .weather-impact-tooltip {
        width: 145px;
        max-width: 145px;
        font-size: 9px;
        line-height: 1.3;
        padding: 6px 8px;
    }

    .password-tooltip {
        top: calc(100% + 8px);
        right: auto;
        left: 0;
        width: 100%;
        max-width: 100%;
    }

    .password-tooltip::before {
        top: -6px;
        left: 22px;
        right: auto;
        border-left: 1px solid rgba(148, 163, 184, 0.2);
        border-top: 1px solid rgba(148, 163, 184, 0.2);
        transform: rotate(45deg);
    }
}