/* =========================================================
   theme.css — Design Tokens & Theme System
   Projenin tüm renk, yazı tipi ve boyut değişkenleri
   burada tanımlanır. Dark mode (varsayılan) + Light mode.
   ========================================================= */

/* =========================================================
   DARK MODE — Varsayılan Değişkenler
   ========================================================= */
:root {
    /* Arkaplan Renkleri */
    --bg-main: #0B0E14; /* En derin katman — sayfa arka planı */
    --bg-panel: #11151C; /* Orta panel arka planı               */
    --bg-card: #181C25; /* Kart ve eleman arka planı           */
    --bg-card-hover: #1E2430; /* Kart hover durumu                   */

    /* Metin Renkleri */
    --text-primary: #FFFFFF;
    --text-secondary: #8C93A1;
    --text-muted: #5E6678;

    /* Marka ve Vurgu Renkleri */
    --brand-primary: #10B981; /* Yeşil — butonlar, aktif durumlar */
    --brand-primary-hover: #0CA370;
    --brand-warning: #F59E0B;
    --brand-danger: #ff0000;
    --accent-blue: #3B82F6;

    --color-purple: #A745F3;

    /* Kenarlık */
    --border-color: rgba(255, 255, 255, 0.05);

    /* Düzen Boyutları */
    --sidebar-width: 250px;
    --right-sidebar-width: 320px;

    /* Yazı Tipi */
    --font-main: 'Inter', sans-serif;
}

/* =========================================================
   LIGHT MODE — [data-theme="light"] Üzerine Yazma
   ========================================================= */
[data-theme="light"] {
    /* Arkaplan */
    --bg-main: #F4F7FE; /* Yumuşak açık mavi-gri   */
    --bg-panel: #FFFFFF; /* İç paneller saf beyaz   */
    --bg-card: #FFFFFF; /* Kartlar saf beyaz        */
    --bg-card-hover: #F8FAFC;

    /* Metin */
    --text-primary: #1E293B; /* Slate 800 */
    --text-secondary: #64748B; /* Slate 500 */
    --text-muted: #94A3B8; /* Slate 400 */

    /* Kenarlık */
    --border-color: rgba(0, 0, 0, 0.05);
}

/* =========================================================
   LIGHT — Gölgeler & Derinlik
   ========================================================= */
[data-theme="light"] .sidebar-left {
    box-shadow: 1px 0 10px rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .stat-card,
[data-theme="light"] .access-card,
[data-theme="light"] .project-card,
[data-theme="light"] .action-btn {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .stat-card:hover,
[data-theme="light"] .project-card:hover,
[data-theme="light"] .access-card:hover,
[data-theme="light"] .action-btn:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.08);
}

/* =========================================================
   LIGHT — Arka Plan Opaklık Düzeltmeleri
   (Dark modda rgba(255,255,255,x) → Light modda rgba(0,0,0,x))
   ========================================================= */
[data-theme="light"] .menu-item:hover:not(.active) {
    background-color: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .menu-item.active {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--brand-primary);
}

[data-theme="light"] .stat-progress,
[data-theme="light"] .progress-wrap .progress {
    background-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .project-img-wrapper {
    background-color: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .add-new-project {
    border: 1px dashed rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .add-new-project:hover {
    background-color: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .add-new-content button,
[data-theme="light"] .stat-icon:not(.bg-opacity),
[data-theme="light"] .shortcut,
[data-theme="light"] .icon-link:hover,
[data-theme="light"] .action-btn {
    background-color: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .add-new-project:hover button {
    background-color: rgba(0, 0, 0, 0.1);
}

/* =========================================================
   LIGHT — Timeline
   ========================================================= */
[data-theme="light"] .timeline::before {
    background-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .timeline-item .event::before {
    border-color: var(--bg-main);
}

/* =========================================================
   LIGHT — Mobil Menü Butonu
   ========================================================= */
[data-theme="light"] .menu-toggle-btn {
    background-color: var(--bg-card);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .menu-toggle-btn:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* =========================================================
   LIGHT — Hero Banner (Koyu arka plan korunur, metin beyaz)
   ========================================================= */
[data-theme="light"] .hero-banner .hero-title,
[data-theme="light"] .hero-banner .hero-subtitle,
[data-theme="light"] .hero-banner .greeting {
    color: #FFFFFF !important;
}

[data-theme="light"] .hero-banner .hero-subtitle {
    opacity: 0.8;
}

/* =========================================================
   LIGHT — Offcanvas Üst Kenarlık
   ========================================================= */
[data-theme="light"] .offcanvas-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* =========================================================
   LIGHT — Profil Dropdown
   ========================================================= */
[data-theme="light"] .custom-dropdown-menu {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .custom-dropdown-menu .dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.03);
    color: var(--text-primary);
}

[data-theme="light"] .custom-dropdown-menu .dropdown-item.text-danger:hover {
    background-color: rgba(239, 68, 68, 0.1);
    color: #DC2626;
}

/* =========================================================
   LIGHT — Profil Kartı
   ========================================================= */
[data-theme="light"] .profile-card {
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
}

[data-theme="light"] .profile-card input {
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
}

[data-theme="light"] textarea {
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    background-color: rgba(237, 237, 237, 0.25) !important;
    color: black !important;
}

[data-theme="light"] textarea::placeholder{
    color: #373737 !important;
}

/* =========================================================
   LIGHT — Fikir & Araştırma (Ideas) Kartları
   ========================================================= */
[data-theme="light"] .idea-card {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .idea-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .idea-card::before {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0) 100%);
}

[data-theme="light"] .idea-status {
    background-color: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .idea-tag {
    background-color: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .idea-tag:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .btn-icon-small {
    background-color: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .btn-icon-small:hover {
    background-color: var(--brand-primary);
    color: white;
}

/* =========================================================
   LIGHT — Stat Mini Kartlar
   ========================================================= */
[data-theme="light"] .stat-mini-card {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .alert-message{
    color: #10b981;
}

[data-theme="dark"] .web-title, h2{
    color: white;
}

[data-theme="light"] .web-title, h2{
    color: green;
}

/* =========================================================
   ADDITIONAL VARIABLES FOR ALL PAGES (P&ID, Logs, Add Plan)
   ========================================================= */
:root {
    --bg-body: #1a1d21;
    --bg-panel-light: #212529;
    --border-color-light: #333333;
    --bg-active: rgba(255, 255, 255, 0.05);
    --transition-speed: 0.2s;
}

[data-theme="light"] {
    --bg-body: #F4F7FE;
    --bg-panel-light: #FFFFFF;
    --border-color-light: rgba(0, 0, 0, 0.08);
    --bg-active: rgba(0, 0, 0, 0.05);
}

/* =========================================================
   LIGHT MODE OVERRIDES FOR P&ID, LOGS, PLAN PAGES
   ========================================================= */
/* Genel Buton ve Arkaplanlar */
[data-theme="light"] body {
    background-color: var(--bg-body) !important;
}

[data-theme="light"] .icon-link, 
[data-theme="light"] button[onclick="window.close()"],
[data-theme="light"] #themeToggle {
    background-color: var(--bg-panel-light) !important;
    border-color: var(--border-color-light) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .icon-link:hover, 
[data-theme="light"] button[onclick="window.close()"]:hover,
[data-theme="light"] #themeToggle:hover {
    background-color: var(--bg-active) !important;
}

/* Dropdown & Modals */
[data-theme="light"] .modal-container,
[data-theme="light"] #allLogsModal .modal-container,
[data-theme="light"] #projectDropdown,
[data-theme="light"] #searchResultsDropdown,
[data-theme="light"] #excelDropdown,
[data-theme="light"] #emojiPickerDropdown,
[data-theme="light"] .dropdown-menu,
[data-theme="light"] .logs-full-container {
    background-color: var(--bg-panel-light) !important;
    border-color: var(--border-color-light) !important;
    color: var(--text-primary) !important;
}

/* Form Elemanları */
[data-theme="light"] .logs-filter-select, 
[data-theme="light"] .form-select, 
[data-theme="light"] .form-input, 
[data-theme="light"] .form-textarea,
[data-theme="light"] #equipmentSearch,
[data-theme="light"] .chat-input {
    background-color: var(--bg-body) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color-light) !important;
}

/* Dropdown Butonları */
[data-theme="light"] .project-item-btn,
[data-theme="light"] #exportAllExcel,
[data-theme="light"] #exportSelectedExcel {
    color: var(--text-primary) !important;
    border-color: var(--border-color-light) !important;
}

[data-theme="light"] .project-item-btn:hover,
[data-theme="light"] #exportAllExcel:hover,
[data-theme="light"] #exportSelectedExcel:hover {
    background-color: var(--bg-active) !important;
}

/* P&ID SVG Light Mode Renkleri */
[data-theme="light"] text[fill="#e6edf3"] {
    fill: #1E293B !important;
}
[data-theme="light"] text[fill="#8b949e"] {
    fill: #64748B !important;
}
[data-theme="light"] path[fill="#14181c"] {
    fill: #FFFFFF !important;
}
[data-theme="light"] .minimap-svg rect[fill="#e6edf3"],
[data-theme="light"] .minimap-svg circle[fill="#e6edf3"] {
    fill: #1E293B !important;
}