/* Dark Mode Variables & Overrides */
body.dark-mode {
    --white: #1e293b;
    /* Dark Slate */
    --light-gray: #0f172a;
    /* Darker Slate */
    --gray: #94a3b8;
    --dark-gray: #cbd5e1;
    --black: #f8fafc;
    /* Invert black to white-ish */
    --primary-color: #3b82f6;
    /* High contrast blue */

    background-color: var(--light-gray);
    color: var(--black);
}

/* Header */
body.dark-mode .app-header {
    background-color: #0f172a;
    border-bottom-color: #334155;
    color: #f1f5f9;
}

/* Menu Toggle (Hamburger) */
body.dark-mode .menu-toggle {
    color: #f1f5f9;
}

body.dark-mode .menu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .app-title .title-text .main-title {
    color: #f1f5f9;
}

body.dark-mode .app-title img {
    border-color: rgba(255, 255, 255, 0.1);
}

/* User Name Button & Dropdown */
body.dark-mode .user-name-button {
    background: rgba(30, 41, 59, 0.8);
    border-color: #334155;
}

body.dark-mode .user-name-button:hover,
body.dark-mode .user-name-button.active {
    background: #0F4C75;
    border-color: #0F4C75;
}

body.dark-mode .user-name-button span {
    color: #f1f5f9;
}

body.dark-mode .user-name-button .user-unit {
    color: #94a3b8;
}

body.dark-mode .user-dropdown {
    background-color: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

body.dark-mode .user-dropdown a {
    color: #cbd5e1;
}

body.dark-mode .user-dropdown a:hover {
    background-color: #0F4C75;
    color: #f1f5f9;
}

body.dark-mode .user-dropdown hr {
    border-top-color: #334155;
}

/* Sidebar */
body.dark-mode .sidebar {
    background-color: #1e293b;
    border-right-color: #334155;
}

body.dark-mode .sidebar-header {
    border-bottom-color: #334155;
}

body.dark-mode .search-box input {
    background-color: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

body.dark-mode .search-box i {
    color: #94a3b8;
}

body.dark-mode .user-item {
    background-color: #1e293b;
    border-color: #334155;
}

body.dark-mode .user-item:hover {
    background-color: #334155;
    border-color: #475569;
}

body.dark-mode .user-item.active {
    background-color: #0F4C75;
    border-color: #0F4C75;
}

body.dark-mode .user-item-name {
    color: #f1f5f9;
}

body.dark-mode .user-item-birim {
    color: #94a3b8;
}

body.dark-mode .user-item.active .user-item-birim,
body.dark-mode .user-item.active:hover .user-item-birim {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Group Items in Sidebar */
body.dark-mode .group-item {
    background-color: #064e3b !important;
    /* Dark Green */
    border-left-color: #10b981 !important;
    border-color: #065f46;
}

body.dark-mode .group-item:hover {
    background-color: #065f46 !important;
    border-left-color: #34d399 !important;
}

body.dark-mode .group-item.active {
    background-color: #10b981 !important;
    /* Bright Green for Active */
    border-left-color: #34d399 !important;
}

body.dark-mode .group-item .user-name {
    color: #ecfdf5 !important;
}

body.dark-mode .group-item .user-status {
    color: #a7f3d0 !important;
}

body.dark-mode .group-item.active .user-name,
body.dark-mode .group-item.active .user-status {
    color: #ffffff !important;
}

/* Chat Area */
body.dark-mode .chat-area {
    background-color: #020617;
}

body.dark-mode .chat-area::before {
    filter: invert(1);
    opacity: 0.05;
}

body.dark-mode .chat-header {
    background-color: #1e293b;
    border-bottom-color: #334155;
}

body.dark-mode .chat-user-name {
    color: #f1f5f9;
}

/* Chat Search Toggle Button - Turkuaz zemin, beyaz mercek */
body.dark-mode .chat-search-toggle {
    background-color: #1b8bb4 !important;
    background: #1b8bb4 !important;
    color: #ffffff !important;
    border: 1px solid #1b8bb4 !important;
}

/* Hover'da tam tersi: beyaz zemin, turkuaz mercek */
body.dark-mode .chat-search-toggle:hover {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #1b8bb4 !important;
    border-color: #1b8bb4 !important;
    box-shadow: 0 3px 10px rgba(27, 139, 180, 0.4) !important;
    transform: scale(1.05) !important;
}

/* Arama çubuğu açıldığında (active) */
body.dark-mode .chat-search-toggle.active {
    background-color: #157a9e !important;
    background: #157a9e !important;
    color: #ffffff !important;
    border-color: #157a9e !important;
}

/* Chat Search Bar - Arama Çubuğu Dark Mode */
body.dark-mode .chat-search-bar .search-input-wrapper {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
}

body.dark-mode .chat-search-bar .search-input-wrapper.active {
    background: #0f172a !important;
    background-color: #0f172a !important;
    border-color: #1b8bb4 !important;
}

body.dark-mode .chat-search-bar .search-input-wrapper i {
    color: #94a3b8 !important;
}

body.dark-mode .chat-search-bar .search-input-wrapper input {
    background: transparent !important;
    color: #f1f5f9 !important;
}

body.dark-mode .chat-search-bar .search-input-wrapper input::placeholder {
    color: #64748b !important;
}

/* Arama Navigasyon Butonları Dark Mode */
body.dark-mode .chat-search-bar .search-nav-btn {
    color: #1b8bb4 !important;
}

body.dark-mode .chat-search-bar .search-nav-btn:hover {
    color: #22a8d0 !important;
}

body.dark-mode .chat-search-bar .search-nav-btn:disabled {
    color: #475569 !important;
}

/* Arama Sonuçları Dropdown Dark Mode */
body.dark-mode .search-results-dropdown {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .search-results-dropdown .search-result-item {
    border-bottom-color: #334155 !important;
}

body.dark-mode .search-results-dropdown .search-result-item:hover {
    background: #334155 !important;
}

body.dark-mode .search-results-dropdown .result-text {
    color: #f1f5f9 !important;
}

body.dark-mode .search-results-dropdown .result-meta,
body.dark-mode .search-results-dropdown .result-sender,
body.dark-mode .search-results-dropdown .result-time {
    color: #94a3b8 !important;
}

body.dark-mode .search-results-dropdown .no-results {
    color: #94a3b8 !important;
}


/* Chat Messages */
body.dark-mode .message-content {
    background-color: #1e293b;
    color: #f1f5f9;
    border: 1px solid #334155;
}

body.dark-mode .message.sent .message-content {
    background-color: #2c2d2e;
    border-color: #2c2d2e;
    color: #ffffff;
}

body.dark-mode .message-time {
    color: #94a3b8;
}

/* Chat Input Area */
body.dark-mode .message-input-container {
    background-color: #1e293b;
    border-top: 1px solid #334155;
}

body.dark-mode .message-input-wrapper {
    background-color: #0f172a;
    border: 1px solid #334155;
    box-shadow: none;
}

body.dark-mode #message-input {
    background-color: transparent;
    color: #f1f5f9;
}

body.dark-mode #message-input::placeholder {
    color: #64748b;
}

body.dark-mode .attachment-btn,
body.dark-mode .emoji-btn {
    background-color: #334155;
    color: #cbd5e1;
}

body.dark-mode .attachment-btn:hover,
body.dark-mode .emoji-btn:hover {
    background-color: #475569;
    color: #f1f5f9;
}

/* Attachments Menu & Emoji Dropdown */
body.dark-mode .attachment-menu,
body.dark-mode .emoji-dropdown {
    background-color: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

body.dark-mode .attachment-menu-item {
    color: #cbd5e1;
}

body.dark-mode .attachment-menu-item:hover {
    background-color: #334155;
    color: #f1f5f9;
}

/* Emoji Dropdown Internals */
body.dark-mode .emoji-search-container {
    border-bottom-color: #334155;
}

body.dark-mode .emoji-search-input {
    background-color: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

body.dark-mode .emoji-search-input:focus {
    border-color: var(--primary-color);
}

body.dark-mode .emoji-categories {
    border-bottom-color: #334155;
}

body.dark-mode .emoji-category-btn {
    color: #94a3b8;
}

body.dark-mode .emoji-category-btn:hover,
body.dark-mode .emoji-item:hover {
    background-color: #334155;
}

body.dark-mode .emoji-category-btn.active {
    background-color: var(--primary-color);
    color: #ffffff;
}

/* File Items in Chat */
body.dark-mode .message-content .file-item {
    background-color: #0f172a;
    border-color: #334155;
}

body.dark-mode .message-content .file-item:hover {
    background-color: #334155;
    border-color: #3b82f6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.dark-mode .file-name {
    color: #f1f5f9;
}

body.dark-mode .file-details {
    color: #94a3b8;
}

body.dark-mode .message.sent .message-content .file-item {
    background-color: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .message.sent .message-content .file-item:hover {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
}

body.dark-mode .message.sent .file-name {
    color: #ffffff;
}

body.dark-mode .message.sent .file-details {
    color: rgba(255, 255, 255, 0.8);
}

body.dark-mode .file-item-icon {
    background-color: #ffffff;
    /* White background for visibility */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 4px;
    min-width: 36px;
    min-height: 36px;
}

body.dark-mode .file-item-icon.document i {
    font-size: 1.5rem;
    color: #2b579a;
    /* Word blue color */
}

body.dark-mode .file-item-icon.excel i {
    font-size: 1.5rem;
    color: #217346;
    /* Excel green color */
}

body.dark-mode .file-icon.pdf,
body.dark-mode .file-item-icon.pdf {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

body.dark-mode .file-icon.pdf i,
body.dark-mode .file-item-icon.pdf i {
    font-size: 1.5rem;
    color: #b30b00 !important;
    /* PDF red color */
}

/* PowerPoint */
body.dark-mode .file-icon.powerpoint,
body.dark-mode .file-item-icon.powerpoint {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

body.dark-mode .file-icon.powerpoint i,
body.dark-mode .file-item-icon.powerpoint i {
    font-size: 1.5rem;
    color: #d24726 !important;
    /* PowerPoint orange-red color */
}

/* Video */
body.dark-mode .file-icon.video,
body.dark-mode .file-item-icon.video {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

body.dark-mode .file-icon.video i,
body.dark-mode .file-item-icon.video i {
    font-size: 1.5rem;
    color: #7c3aed !important;
    /* Video purple color */
}

/* Audio */
body.dark-mode .file-icon.audio,
body.dark-mode .file-item-icon.audio {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

body.dark-mode .file-icon.audio i,
body.dark-mode .file-item-icon.audio i {
    font-size: 1.5rem;
    color: #059669 !important;
    /* Audio green color */
}

/* Archive (zip, rar, etc.) */
body.dark-mode .file-icon.archive,
body.dark-mode .file-item-icon.archive {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

body.dark-mode .file-icon.archive i,
body.dark-mode .file-item-icon.archive i {
    font-size: 1.5rem;
    color: #d97706 !important;
    /* Archive amber/orange color */
}

/* Other files */
body.dark-mode .file-icon.other,
body.dark-mode .file-item-icon.other {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

body.dark-mode .file-icon.other i,
body.dark-mode .file-item-icon.other i {
    font-size: 1.5rem;
    color: #64748b !important;
    /* Other gray color */
}


/* Dashboard */
body.dark-mode .dashboard-content {
    background-color: transparent;
}

body.dark-mode .welcome-section .welcome-user-info {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-color: #334155;
}

body.dark-mode .welcome-name {
    color: #f1f5f9;
}

/* Dashboard Cards */
body.dark-mode .dashboard-card {
    background-color: #1e293b;
    border: 1px solid #334155;
}

body.dark-mode .dashboard-card h3 {
    color: #f1f5f9;
}

body.dark-mode .dashboard-card p {
    color: #94a3b8;
}

/* Dashboard Buttons */
body.dark-mode .card-button {
    background-color: #0f172a;
    color: #cbd5e1;
    border: 1px solid #334155;
    transition: all 0.2s ease;
}

body.dark-mode .card-button:hover {
    background-color: #334155;
    color: #f1f5f9;
    border-color: #475569;
}

body.dark-mode .card-button i {
    color: var(--primary-color);
}

/* Statistics */
body.dark-mode .stat-item {
    background-color: #1e293b;
    border: 1px solid #334155;
    box-shadow: none;
}

body.dark-mode .stat-item:hover {
    background-color: #334155;
    border-color: #475569;
}

body.dark-mode .stat-label {
    color: #94a3b8;
}

body.dark-mode .stat-number {
    color: #f1f5f9;
}

/* Modals */
body.dark-mode .modal-content {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border: 1px solid #334155 !important;
}

body.dark-mode .modal-header {
    border-bottom-color: #334155 !important;
}

body.dark-mode .modal-header h2,
body.dark-mode .modal-header h3,
body.dark-mode .modal-header h4 {
    color: #f1f5f9 !important;
}

body.dark-mode .close,
body.dark-mode .modal-close,
body.dark-mode .modal-header .close,
body.dark-mode .modal-header .modal-close {
    color: #ffffff !important;
    opacity: 0.9 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

body.dark-mode .close:hover,
body.dark-mode .modal-close:hover,
body.dark-mode .modal-header .close:hover,
body.dark-mode .modal-header .modal-close:hover {
    color: #ef4444 !important;
    opacity: 1 !important;
}

body.dark-mode .modal-body {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

body.dark-mode .info-card {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}

body.dark-mode .info-card h4 {
    color: #f1f5f9 !important;
    border-bottom-color: #334155 !important;
}

body.dark-mode .info-label {
    color: #94a3b8 !important;
}

body.dark-mode .info-value {
    color: #f1f5f9 !important;
}

body.dark-mode .form-control,
body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .form-group textarea {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

body.dark-mode .form-group label {
    color: #cbd5e1 !important;
}

/* Create Group Modal Specifics */
body.dark-mode .group-members-list,
body.dark-mode .selected-members,
body.dark-mode .current-members-list {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}

body.dark-mode .group-member-item {
    border-bottom-color: #334155;
}

body.dark-mode .group-member-item:hover {
    background-color: #334155;
}

body.dark-mode .group-member-item.selected {
    background-color: rgba(15, 76, 117, 0.4);
    border-color: #0F4C75;
    color: #f1f5f9;
}

body.dark-mode .group-member-item.selected:hover {
    background-color: rgba(15, 76, 117, 0.6);
}

body.dark-mode .members-selection-column h4,
body.dark-mode .selected-members-column h4,
body.dark-mode .selected-members-section h4,
body.dark-mode .section-header h4 {
    color: #cbd5e1;
    border-bottom-color: #334155;
}

body.dark-mode .group-member-name,
body.dark-mode .current-member-name {
    color: #f1f5f9;
}

body.dark-mode .group-member-unit,
body.dark-mode .current-member-unit {
    color: #94a3b8;
}

body.dark-mode .no-members-selected,
body.dark-mode .no-members {
    background-color: transparent;
    border-color: #334155;
    color: #64748b;
}

body.dark-mode .group-member-checkbox {
    border-color: #475569;
}

body.dark-mode .current-member-item {
    border-bottom-color: #334155;
}

/* Attachment Modal Specifics - Dark Mode */
body.dark-mode .attachment-area .drag-drop-area {
    background-color: #1e293b;
    border-color: #475569;
    color: #94a3b8;
}

body.dark-mode .attachment-area .drag-drop-area:hover,
body.dark-mode .attachment-area .drag-drop-area.dragover {
    background-color: #0F4C75;
    border-color: #334155;
    color: #ffffff;
}

body.dark-mode .attachment-message-area textarea {
    background-color: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

body.dark-mode .attachment-message-area textarea:focus {
    border-color: var(--primary-color);
}

/* Forward Modal Specifics */
body.dark-mode .forward-users-list,
body.dark-mode .forward-selected-users {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}

body.dark-mode #forward-modal .modal-header {
    background: #1e293b !important;
    border-bottom-color: #334155 !important;
}

body.dark-mode #forward-modal .modal-content,
body.dark-mode #forward-modal .modal-body,
body.dark-mode #forward-modal .forward-container {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

body.dark-mode .forward-actions {
    background: #1e293b !important;
    border-top-color: #334155 !important;
}

/* User Items in Dark Mode */
body.dark-mode .forward-user-item,
body.dark-mode .forward-selected-user-item {
    background-color: #0f172a !important;
    border-bottom-color: #334155 !important;
}

body.dark-mode .forward-user-item:hover,
body.dark-mode .forward-selected-user-item:hover {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

body.dark-mode .forward-user-item.selected {
    background-color: rgba(15, 76, 117, 0.4) !important;
    border-left-color: #0F4C75 !important;
}

body.dark-mode .forward-selected-user-item {
    background-color: rgba(15, 76, 117, 0.4) !important;
    border-left: 4px solid #0F4C75 !important;
    border-bottom-color: #334155 !important;
}

/* Text Colors */
body.dark-mode .forward-user-name {
    color: #f8fafc !important;
    /* Whiter text */
    font-weight: 500;
}

body.dark-mode .forward-user-birim {
    color: #94a3b8 !important;
    /* Lighter gray */
}

/* Selected User Text Colors */
body.dark-mode .forward-selected-user-name {
    color: #f8fafc !important;
    /* Bright White */
    font-weight: 500;
}

body.dark-mode .forward-selected-user-birim {
    color: #94a3b8 !important;
    /* Light Gray */
}

/* Section Headers */
body.dark-mode .forward-users-section h4,
body.dark-mode .forward-selected-section h4 {
    color: #cbd5e1 !important;
}

/* Custom Scrollbar for Dark Mode */
body.dark-mode ::-webkit-scrollbar-track {
    background: #0f172a;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #334155;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

body.dark-mode #forward-send-btn {
    background-color: #0F4C75 !important;
    border-color: #0F4C75 !important;
    color: #ffffff;
}

body.dark-mode #forward-send-btn:hover {
    background-color: #165b8a !important;
    border-color: #165b8a !important;
}

body.dark-mode .forward-selected-user-remove {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

body.dark-mode .forward-selected-user-remove:hover {
    background: rgba(239, 68, 68, 0.4);
}

/* =====================================================
   Modern Theme Toggle - Day/Night Cycle Switch
   ===================================================== */

/* Ana toggle container */
.theme-toggle-btn {
    position: relative;
    background: linear-gradient(135deg, #87CEEB 0%, #4A90D9 50%, #2E5A88 100%);
    border: none;
    cursor: pointer;
    width: 60px;
    height: 30px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    padding: 3px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    margin-right: 15px;
    overflow: hidden;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

/* Gündüz modu - gökyüzü arka planı */
.theme-toggle-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #87CEEB 0%, #4A90D9 50%, #2E5A88 100%);
    opacity: 1;
    transition: opacity 0.5s ease;
    border-radius: 30px;
}

/* Bulut efektleri - gündüz */
.theme-toggle-btn::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 6px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    top: 8px;
    left: 8px;
    box-shadow:
        15px 2px 0 rgba(255, 255, 255, 0.6),
        30px -1px 0 rgba(255, 255, 255, 0.4);
    transition: all 0.5s ease;
    opacity: 1;
}

/* Güneş/Ay ikonu için wrapper */
.theme-toggle-btn .toggle-icon-wrapper {
    position: relative;
    width: 24px;
    height: 24px;
    background: linear-gradient(145deg, #FFD700 0%, #FFA500 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    box-shadow:
        0 0 20px rgba(255, 215, 0, 0.6),
        0 0 40px rgba(255, 165, 0, 0.3);
    transform: translateX(0);
}

/* Güneş ışınları */
.theme-toggle-btn .toggle-icon-wrapper::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    background: transparent;
    border-radius: 50%;
    box-shadow:
        0 -8px 0 2px rgba(255, 215, 0, 0.4),
        0 8px 0 2px rgba(255, 215, 0, 0.4),
        -8px 0 0 2px rgba(255, 215, 0, 0.4),
        8px 0 0 2px rgba(255, 215, 0, 0.4),
        -5px -5px 0 2px rgba(255, 215, 0, 0.3),
        5px -5px 0 2px rgba(255, 215, 0, 0.3),
        -5px 5px 0 2px rgba(255, 215, 0, 0.3),
        5px 5px 0 2px rgba(255, 215, 0, 0.3);
    animation: sunRays 3s ease-in-out infinite;
    transition: opacity 0.5s ease;
}

@keyframes sunRays {

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

    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* İkon stilleri */
.theme-toggle-btn i {
    font-size: 12px;
    color: #fff;
    z-index: 3;
    transition: all 0.3s ease;
}

.theme-toggle-btn span {
    display: none;
}

/* Hover efekti - Light mode */
.theme-toggle-btn:hover {
    transform: scale(1.05);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.theme-toggle-btn:hover .toggle-icon-wrapper {
    box-shadow:
        0 0 25px rgba(255, 215, 0, 0.8),
        0 0 50px rgba(255, 165, 0, 0.5);
}

/* =====================================================
   Dark Mode - Gece Gökyüzü Stili
   ===================================================== */

body.dark-mode .theme-toggle-btn {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #2c5282 100%);
}

body.dark-mode .theme-toggle-btn::before {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #2c5282 100%);
    opacity: 1;
}

/* Yıldızlar - Gece */
body.dark-mode .theme-toggle-btn::after {
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    top: 6px;
    left: 12px;
    box-shadow:
        8px 4px 0 0 rgba(255, 255, 255, 0.8),
        18px 2px 0 0 rgba(255, 255, 255, 0.6),
        25px 8px 0 0 rgba(255, 255, 255, 0.7),
        5px 12px 0 0 rgba(255, 255, 255, 0.5),
        32px 5px 0 0 rgba(255, 255, 255, 0.4),
        15px 15px 0 0 rgba(255, 255, 255, 0.6);
    animation: twinkle 2s ease-in-out infinite alternate;
}

@keyframes twinkle {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* Ay - toggle sağa kayar */
body.dark-mode .theme-toggle-btn .toggle-icon-wrapper {
    background: linear-gradient(145deg, #f0f0f0 0%, #d4d4d4 100%);
    transform: translateX(28px);
    box-shadow:
        inset -4px -2px 0 rgba(200, 200, 200, 0.8),
        0 0 15px rgba(255, 255, 255, 0.4),
        0 0 30px rgba(200, 200, 240, 0.2);
}

/* Ay krateri efekti */
body.dark-mode .theme-toggle-btn .toggle-icon-wrapper::before {
    box-shadow: none;
    background: radial-gradient(circle at 6px 8px, rgba(180, 180, 180, 0.5) 2px, transparent 2px),
        radial-gradient(circle at 14px 6px, rgba(160, 160, 160, 0.4) 1.5px, transparent 1.5px),
        radial-gradient(circle at 10px 14px, rgba(170, 170, 170, 0.3) 1px, transparent 1px);
    animation: none;
    width: 24px;
    height: 24px;
    opacity: 1;
}

body.dark-mode .theme-toggle-btn i {
    color: #1e293b;
}

/* Hover efekti - Dark mode */
body.dark-mode .theme-toggle-btn:hover .toggle-icon-wrapper {
    box-shadow:
        inset -4px -2px 0 rgba(200, 200, 200, 0.8),
        0 0 20px rgba(255, 255, 255, 0.6),
        0 0 40px rgba(200, 200, 240, 0.4);
}

/* =====================================================
   Mobil Toggle Stilleri
   ===================================================== */

/* Mobil header'daki toggle */
.mobile-nav-btn.theme-toggle-btn {
    width: 50px;
    height: 26px;
    margin-right: 8px;
}

.mobile-nav-btn.theme-toggle-btn .toggle-icon-wrapper {
    width: 20px;
    height: 20px;
}

.mobile-nav-btn.theme-toggle-btn i {
    font-size: 10px;
}

body.dark-mode .mobile-nav-btn.theme-toggle-btn .toggle-icon-wrapper {
    transform: translateX(22px);
}

/* Mobil menüdeki toggle (hamburger menü içinde) */
.theme-toggle-btn.mobile-menu-item {
    width: 100%;
    height: 44px;
    border-radius: 8px;
    background: linear-gradient(135deg, #87CEEB 0%, #4A90D9 100%);
    padding: 8px 12px;
    justify-content: flex-start;
    gap: 12px;
}

.theme-toggle-btn.mobile-menu-item .toggle-icon-wrapper {
    flex-shrink: 0;
}

.theme-toggle-btn.mobile-menu-item span {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

body.dark-mode .theme-toggle-btn.mobile-menu-item {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
}

body.dark-mode .theme-toggle-btn.mobile-menu-item .toggle-icon-wrapper {
    transform: translateX(0);
}

/* =====================================================
   Animasyonlar
   ===================================================== */

/* Geçiş animasyonu */
@keyframes toggleSlide {
    0% {
        transform: translateX(0) scale(1);
    }

    50% {
        transform: translateX(14px) scale(0.9);
    }

    100% {
        transform: translateX(28px) scale(1);
    }
}

@keyframes toggleSlideBack {
    0% {
        transform: translateX(28px) scale(1);
    }

    50% {
        transform: translateX(14px) scale(0.9);
    }

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

/* Active state animasyonu */
.theme-toggle-btn:active .toggle-icon-wrapper {
    transform: scale(0.9);
}

body.dark-mode .theme-toggle-btn:active .toggle-icon-wrapper {
    transform: translateX(28px) scale(0.9);
}

/* Header Radio Dark Mode */
body.dark-mode .header-radio-player {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .header-radio-player:hover {
    background: rgba(30, 41, 59, 0.8);
}

body.dark-mode .header-radio-btn {
    color: var(--text-secondary);
}

body.dark-mode .header-radio-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

body.dark-mode .radio-equalizer.mini .bar {
    background-color: var(--accent-color);
}

/* Radio Playlist Dropdown Dark Mode */
body.dark-mode .radio-playlist-dropdown {
    background: #1e293b;
    /* Fallback */
    background: rgba(30, 41, 59, 0.98);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

body.dark-mode .radio-station-item.minimal-text {
    color: #f1f5f9 !important;
    /* Force Light Text */
}

body.dark-mode .radio-station-item.minimal-text:hover {
    background-color: transparent !important;
    color: #38bdf8 !important;
    /* Light Blue on hover */
}

body.dark-mode .radio-station-item.minimal-text.active {
    background-color: transparent !important;
    color: #38bdf8 !important;
    /* Light Blue for active state in dark mode */
    font-weight: 700;
}

body.dark-mode .radio-playlist-dropdown::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

/* Loading Modal Dark Mode Adjustments */
body.dark-mode .loading-container {
    background-color: transparent;
    color: #f1f5f9;
}

body.dark-mode .loading-spinner {
    border-color: rgba(59, 130, 246, 0.3);
    border-top-color: #3b82f6;
}

body.dark-mode .loading-text,
body.dark-mode .loading-status {
    color: #cbd5e1;
}

body.dark-mode .loading-percentage {
    color: #f1f5f9;
}

body.dark-mode .loading-progress {
    background-color: #334155;
}

body.dark-mode .loading-progress-bar {
    background-color: #3b82f6;
}

/* Fix for light background on drag over in dark mode */
body.dark-mode .drag-drop-area.dragover {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-color: #3b82f6 !important;
    color: #f1f5f9 !important;
}

/* Ensure modal content background is correct in loading modal */
body.dark-mode #loading-modal .modal-content {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border: 1px solid #334155 !important;
}

/* Ensure attachment modal header background is uniform in dark mode */
body.dark-mode #attachment-modal .modal-header {
    background-color: #1e293b !important;
    background-image: none !important;
    border-bottom-color: #334155 !important;
}

/* Deleted Message Styles */
.message.deleted .message-content {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border: 1px dashed rgba(0, 0, 0, 0.1);
    box-shadow: none !important;
}

.message.deleted .message-text {
    font-style: italic;
    color: #64748b !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.message.deleted .message-text i {
    font-size: 14px;
    opacity: 0.7;
}

/* Dark Mode Specifics for Deleted Messages */
body.dark-mode .message.deleted .message-content {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .message.deleted .message-text {
    color: #94a3b8 !important;
}

/* Override for Sent Messages that are deleted */
.message.sent.deleted .message-content,
body.dark-mode .message.sent.deleted .message-content {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    background-image: none !important;
}

/* Mobile Header Title - Dark Mode */
body.dark-mode .mobile-main-title {
    color: #f1f5f9 !important;
}

body.dark-mode .mobile-subtitle {
    color: #94a3b8 !important;
}

/* Birim Grubu Oluşturma - Dark Mode */
body.dark-mode .unit-group-section {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-color: #334155;
}

body.dark-mode .unit-group-section:hover {
    border-color: #0F4C75;
    background: linear-gradient(135deg, #0F4C75 0%, #1e293b 100%);
}

body.dark-mode .unit-group-btn {
    border-color: #0F4C75;
    color: #f1f5f9;
    background: transparent;
}

body.dark-mode .unit-group-btn:hover {
    background: #0F4C75;
    color: white;
    border-color: #0F4C75;
}

body.dark-mode .unit-group-description {
    color: #94a3b8;
}

/* Mesaj Badge - Dark Mode */
body.dark-mode .user-item-badge {
    color: #ffffff !important;
    /* Kırmızı daire içinde beyaz yazı */
}

body.dark-mode .hidden-user-item .user-item-badge {
    color: #ffffff !important;
    /* Gizli kullanıcılar için de beyaz yazı */
}

/* =====================================================
   Mobil Hamburger Menü - Dark Mode
   ===================================================== */

/* Hamburger Dropdown Arka Plan */
body.dark-mode .mobile-hamburger-dropdown {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-left-color: #334155 !important;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5) !important;
}

/* Kullanıcı Bilgi Alanı - Turkuaz Vurgulu */
body.dark-mode .mobile-user-info {
    background: linear-gradient(135deg, #1b8bb4 0%, #0e6b8a 100%) !important;
    border-bottom-color: #1b8bb4 !important;
    border-radius: 8px !important;
    margin: 0.25rem !important;
    padding: 0.625rem 0.75rem !important;
}

body.dark-mode .mobile-user-info:hover {
    background: linear-gradient(135deg, #22a8d0 0%, #1b8bb4 100%) !important;
    transform: scale(1.02) !important;
}

body.dark-mode .mobile-user-avatar {
    border-color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .mobile-user-details span {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Menü Öğeleri */
body.dark-mode .mobile-menu-items {
    background: transparent !important;
}

body.dark-mode .mobile-menu-item {
    color: #e2e8f0 !important;
    background: transparent !important;
}

body.dark-mode .mobile-menu-item:hover {
    background: #334155 !important;
    color: #ffffff !important;
}

body.dark-mode .mobile-menu-item i {
    color: #1b8bb4 !important;
}

body.dark-mode .mobile-menu-item:hover i {
    color: #22a8d0 !important;
}

body.dark-mode .mobile-menu-item span {
    color: inherit !important;
}

/* Menü Ayırıcı */
body.dark-mode .mobile-menu-divider {
    border-top-color: #334155 !important;
}

/* Çıkış Butonu - Kırmızı Vurgulu */
body.dark-mode .mobile-logout-item {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    margin: 0.5rem 0.25rem 0.25rem 0.25rem !important;
}

body.dark-mode .mobile-logout-item:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    transform: scale(1.02) !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
}

body.dark-mode .mobile-logout-item i {
    color: #ffffff !important;
}

body.dark-mode .mobile-logout-item span {
    color: #ffffff !important;
}

/* =====================================================
   Sohbet Mesajlarındaki Linkler - Dark Mode
   ===================================================== */

/* Tüm mesajlardaki linkler için genel koyu mod stili */
body.dark-mode .message-text a {
    color: #fbbf24 !important;
    /* Parlak sarı/altın - koyu arka planda çok belirgin */
    text-decoration: underline !important;
    text-decoration-color: rgba(251, 191, 36, 0.6) !important;
    text-underline-offset: 2px !important;
}

body.dark-mode .message-text a:hover {
    color: #22c55e !important;
    /* Yeşil hover */
    text-decoration-color: #22c55e !important;
}

/* Gelen mesajlardaki linkler - koyu modda daha belirgin */
body.dark-mode .message.received .message-text a {
    color: #fbbf24 !important;
    /* Parlak sarı/altın - koyu arka planda çok belirgin */
    text-decoration: underline !important;
    text-decoration-color: rgba(251, 191, 36, 0.6) !important;
    text-underline-offset: 2px !important;
}

body.dark-mode .message.received .message-text a:hover {
    color: #22c55e !important;
    /* Yeşil hover */
    text-decoration-color: #22c55e !important;
}

/* Gönderilen mesajlardaki linkler - koyu modda */
body.dark-mode .message.sent .message-text a {
    color: #fbbf24 !important;
    /* Parlak sarı/altın */
    text-decoration: underline !important;
    text-decoration-color: rgba(251, 191, 36, 0.6) !important;
    text-underline-offset: 2px !important;
}

body.dark-mode .message.sent .message-text a:hover {
    color: #22c55e !important;
    text-decoration-color: #22c55e !important;
}

/* Alternatif seçici - mesaj içeriği için */
body.dark-mode .message-content .message-text a {
    color: #fbbf24 !important;
    /* Parlak sarı/altın */
    text-decoration: underline !important;
    text-decoration-color: rgba(251, 191, 36, 0.6) !important;
}

body.dark-mode .message.sent .message-content .message-text a {
    color: #fbbf24 !important;
    /* Parlak sarı/altın */
    text-decoration-color: rgba(251, 191, 36, 0.6) !important;
}

body.dark-mode .message.sent .message-content .message-text a:hover {
    color: #22c55e !important;
    /* Yeşil hover */
    text-decoration-color: #22c55e !important;
}

/* Genel hover stilleri - tüm mesaj linkleri için */
body.dark-mode .message-content .message-text a:hover {
    color: #22c55e !important;
    /* Yeşil hover */
    text-decoration-color: #22c55e !important;
}