/* ============================================
   DARK MODE STYLES - MUST OVERRIDE EVERYTHING
   ============================================ */

/* Dark Mode CSS Variables */
html[data-theme="dark"] {
    --bs-body-bg: #1e1e2d !important;
    --bs-body-color: #a3a4cc !important;
    --bs-card-bg: #27293d !important;
    --bs-border-color: #2f3349 !important;
    --bs-heading-color: #d9dae6 !important;
    --bs-link-color: #696cff !important;
    --bs-link-hover-color: #5f61e6 !important;
    --bs-secondary-bg: #2b2c40 !important;
}

/* ============================================
   BODY & LAYOUT
   ============================================ */

html[data-theme="dark"] body,
html[data-theme="dark"] body * {
    color: var(--bs-body-color);
}

html[data-theme="dark"] body {
    background-color: var(--bs-body-bg) !important;
}

html[data-theme="dark"] .layout-wrapper,
html[data-theme="dark"] .layout-container,
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .container-xxl,
html[data-theme="dark"] .container-fluid {
    background-color: transparent !important;
}

/* ============================================
   CARDS - MOST IMPORTANT
   ============================================ */

html[data-theme="dark"] .card,
html[data-theme="dark"] div.card,
html[data-theme="dark"] section.card,
html[data-theme="dark"] article.card,
html[data-theme="dark"] .row .card,
html[data-theme="dark"] .col .card,
html[data-theme="dark"] [class*="col-"] .card,
html[data-theme="dark"] .row > div > .card,
html[data-theme="dark"] .row > [class*="col-"] > .card,
html[data-theme="dark"] .col-lg-3 .card,
html[data-theme="dark"] .col-lg-6 .card,
html[data-theme="dark"] .col-lg-12 .card,
html[data-theme="dark"] .col-md-6 .card,
html[data-theme="dark"] .col-md-12 .card,
html[data-theme="dark"] .mb-4 .card {
    background: #27293d !important;
    background-color: #27293d !important;
    border-color: #2f3349 !important;
}

html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
    background: #27293d !important;
    background-color: #27293d !important;
    border-color: #2f3349 !important;
    color: #a3a4cc !important;
}

html[data-theme="dark"] .card-title,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-header h5,
html[data-theme="dark"] .card-header h6 {
    color: #d9dae6 !important;
}

/* Card içindeki tüm text elementler */
html[data-theme="dark"] .card span:not(.badge):not(.avatar-initial),
html[data-theme="dark"] .card p:not(.badge),
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .card h4,
html[data-theme="dark"] .card h5,
html[data-theme="dark"] .card h6,
html[data-theme="dark"] .card .fw-semibold {
    color: #a3a4cc !important;
}

/* Utility class'larla birlikte kullanılan card'lar */
html[data-theme="dark"] .card.h-100,
html[data-theme="dark"] .h-100 > .card,
html[data-theme="dark"] div[class*="mb-"].card,
html[data-theme="dark"] div[class*="mt-"].card {
    background: #27293d !important;
    background-color: #27293d !important;
}

/* Card içindeki tüm div'ler */
html[data-theme="dark"] .card > div,
html[data-theme="dark"] .card .d-flex,
html[data-theme="dark"] .card .row,
html[data-theme="dark"] .card [class*="col-"],
html[data-theme="dark"] .card .card-body > div,
html[data-theme="dark"] .card .align-items-end {
    background-color: transparent !important;
}

/* Card'ın kendisi için ekstra agresif kurallar */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card[class] {
    background: #27293d !important;
    background-color: #27293d !important;
    border: 1px solid #2f3349 !important;
}

/* ============================================
   WHITE BACKGROUND OVERRIDES
   ============================================ */

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] div[class*="bg-white"],
html[data-theme="dark"] .bg-light {
    background-color: var(--bs-card-bg) !important;
}

/* ============================================
   FORMS
   ============================================ */

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] input.form-control,
html[data-theme="dark"] select.form-select {
    background-color: #2b2c40 !important;
    background: #2b2c40 !important;
    border-color: #2f3349 !important;
    color: #a3a4cc !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: #2b2c40 !important;
    background: #2b2c40 !important;
    border-color: #696cff !important;
    color: #a3a4cc !important;
    box-shadow: 0 0 0 0.25rem rgba(105, 108, 255, 0.25);
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] input::placeholder {
    color: #6d6d80 !important;
}

html[data-theme="dark"] .input-group-text {
    background-color: #2b2c40 !important;
    background: #2b2c40 !important;
    border-color: #2f3349 !important;
    color: #a3a4cc !important;
}

html[data-theme="dark"] .form-label {
    color: #a3a4cc !important;
}

html[data-theme="dark"] .form-text {
    color: #6d6d80 !important;
}

/* Select dropdown options */
html[data-theme="dark"] select option {
    background-color: #2b2c40 !important;
    background: #2b2c40 !important;
    color: #a3a4cc !important;
}

html[data-theme="dark"] select option:hover,
html[data-theme="dark"] select option:checked,
html[data-theme="dark"] select option:focus {
    background-color: #696cff !important;
    background: #696cff !important;
    color: #ffffff !important;
}

html[data-theme="dark"] select optgroup {
    background-color: #2b2c40 !important;
    background: #2b2c40 !important;
    color: #d9dae6 !important;
}

/* Multi-select listbox */
html[data-theme="dark"] select[multiple],
html[data-theme="dark"] select[size] {
    background-color: #2b2c40 !important;
    background: #2b2c40 !important;
    border-color: #2f3349 !important;
    color: #a3a4cc !important;
}

/* Tailwind CSS style forms */
html[data-theme="dark"] input[class*="border-gray"],
html[data-theme="dark"] select[class*="border-gray"],
html[data-theme="dark"] textarea[class*="border-gray"],
html[data-theme="dark"] .bg-white {
    background-color: #27293d !important;
    background: #27293d !important;
    border-color: #2f3349 !important;
    color: #a3a4cc !important;
}

html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-900 {
    color: #a3a4cc !important;
}

html[data-theme="dark"] .text-gray-500 {
    color: #6d6d80 !important;
}

/* ============================================
   MODALS
   ============================================ */

html[data-theme="dark"] .modal-content {
    background-color: #27293d !important;
    background: #27293d !important;
    color: #a3a4cc !important;
    border-color: #2f3349 !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    background-color: rgba(255, 255, 255, 0.02) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: #2f3349 !important;
}

html[data-theme="dark"] .modal-body {
    background-color: #27293d !important;
    background: #27293d !important;
    color: #a3a4cc !important;
}

html[data-theme="dark"] .modal-title {
    color: #d9dae6 !important;
}

html[data-theme="dark"] .modal-body p,
html[data-theme="dark"] .modal-body span,
html[data-theme="dark"] .modal-body div {
    color: #a3a4cc !important;
}

html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Modal içindeki form elementleri */
html[data-theme="dark"] .modal .form-control,
html[data-theme="dark"] .modal .form-select,
html[data-theme="dark"] .modal input,
html[data-theme="dark"] .modal textarea,
html[data-theme="dark"] .modal select {
    background-color: #2b2c40 !important;
    background: #2b2c40 !important;
    border-color: #2f3349 !important;
    color: #a3a4cc !important;
}

html[data-theme="dark"] .modal select option {
    background-color: #2b2c40 !important;
    background: #2b2c40 !important;
    color: #a3a4cc !important;
}

/* Modal backdrop */
html[data-theme="dark"] .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

html[data-theme="dark"] .modal-backdrop.show {
    opacity: 0.8 !important;
}

/* ============================================
   TABLES
   ============================================ */

html[data-theme="dark"] .table {
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

html[data-theme="dark"] .table thead th {
    color: var(--bs-heading-color) !important;
    border-color: var(--bs-border-color) !important;
}

html[data-theme="dark"] .table tbody td {
    border-color: var(--bs-border-color) !important;
}

html[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* ============================================
   LISTS
   ============================================ */

html[data-theme="dark"] .list-group-item {
    background-color: transparent !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

/* ============================================
   DROPDOWNS
   ============================================ */

html[data-theme="dark"] .dropdown-menu {
    background-color: var(--bs-card-bg) !important;
    border-color: var(--bs-border-color) !important;
}

html[data-theme="dark"] .dropdown-item {
    color: var(--bs-body-color) !important;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: var(--bs-heading-color) !important;
}

/* ============================================
   NAVIGATION & MENU
   ============================================ */

html[data-theme="dark"] .bg-menu-theme {
    background-color: #27293d !important;
}

html[data-theme="dark"] .layout-navbar {
    background-color: #27293d !important;
}

html[data-theme="dark"] .menu-link {
    color: #a3a4cc !important;
}

html[data-theme="dark"] .menu-item.active > .menu-link {
    background-color: rgba(105, 108, 255, 0.16) !important;
    color: #696cff !important;
}

html[data-theme="dark"] .app-brand-text {
    color: var(--bs-heading-color) !important;
}

html[data-theme="dark"] .navbar .form-control {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: transparent !important;
    color: var(--bs-body-color) !important;
}

/* ============================================
   BADGES
   ============================================ */

html[data-theme="dark"] .badge.bg-label-primary {
    background-color: rgba(105, 108, 255, 0.16) !important;
    color: #696cff !important;
}

html[data-theme="dark"] .badge.bg-label-secondary {
    background-color: rgba(163, 164, 204, 0.16) !important;
    color: #a3a4cc !important;
}

html[data-theme="dark"] .badge.bg-label-success {
    background-color: rgba(113, 221, 55, 0.16) !important;
    color: #71dd37 !important;
}

html[data-theme="dark"] .badge.bg-label-danger {
    background-color: rgba(255, 76, 81, 0.16) !important;
    color: #ff4c51 !important;
}

html[data-theme="dark"] .badge.bg-label-warning {
    background-color: rgba(255, 171, 0, 0.16) !important;
    color: #ffab00 !important;
}

html[data-theme="dark"] .badge.bg-label-info {
    background-color: rgba(3, 195, 236, 0.16) !important;
    color: #03c3ec !important;
}

html[data-theme="dark"] .badge.bg-label-dark {
    background-color: rgba(67, 89, 113, 0.16) !important;
    color: #8592a3 !important;
}

/* ============================================
   AVATARS
   ============================================ */

html[data-theme="dark"] .avatar-initial {
    background-color: rgba(105, 108, 255, 0.16) !important;
    color: #696cff !important;
}

/* ============================================
   ALERTS
   ============================================ */

html[data-theme="dark"] .alert {
    border-color: var(--bs-border-color) !important;
}

html[data-theme="dark"] .alert-success {
    background-color: rgba(113, 221, 55, 0.12) !important;
    border-color: rgba(113, 221, 55, 0.2) !important;
    color: #71dd37 !important;
}

html[data-theme="dark"] .alert-danger {
    background-color: rgba(255, 76, 81, 0.12) !important;
    border-color: rgba(255, 76, 81, 0.2) !important;
    color: #ff4c51 !important;
}

html[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 171, 0, 0.12) !important;
    border-color: rgba(255, 171, 0, 0.2) !important;
    color: #ffab00 !important;
}

html[data-theme="dark"] .alert-info {
    background-color: rgba(3, 195, 236, 0.12) !important;
    border-color: rgba(3, 195, 236, 0.2) !important;
    color: #03c3ec !important;
}

/* ============================================
   BUTTONS
   ============================================ */

/* Primary Button */
html[data-theme="dark"] .btn-primary {
    background-color: #696cff !important;
    border-color: #696cff !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus,
html[data-theme="dark"] .btn-primary:active {
    background-color: #5f61e6 !important;
    border-color: #5f61e6 !important;
    color: #ffffff !important;
}

/* Secondary Button */
html[data-theme="dark"] .btn-secondary {
    background-color: #8592a3 !important;
    border-color: #8592a3 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-secondary:focus,
html[data-theme="dark"] .btn-secondary:active {
    background-color: #788393 !important;
    border-color: #788393 !important;
    color: #ffffff !important;
}

/* Success Button */
html[data-theme="dark"] .btn-success {
    background-color: #71dd37 !important;
    border-color: #71dd37 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-success:hover,
html[data-theme="dark"] .btn-success:focus,
html[data-theme="dark"] .btn-success:active {
    background-color: #66c732 !important;
    border-color: #66c732 !important;
    color: #ffffff !important;
}

/* Danger Button */
html[data-theme="dark"] .btn-danger {
    background-color: #ff3e1d !important;
    border-color: #ff3e1d !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-danger:hover,
html[data-theme="dark"] .btn-danger:focus,
html[data-theme="dark"] .btn-danger:active {
    background-color: #e6381a !important;
    border-color: #e6381a !important;
    color: #ffffff !important;
}

/* Warning Button */
html[data-theme="dark"] .btn-warning {
    background-color: #ffab00 !important;
    border-color: #ffab00 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-warning:hover,
html[data-theme="dark"] .btn-warning:focus,
html[data-theme="dark"] .btn-warning:active {
    background-color: #e69a00 !important;
    border-color: #e69a00 !important;
    color: #ffffff !important;
}

/* Info Button */
html[data-theme="dark"] .btn-info {
    background-color: #03c3ec !important;
    border-color: #03c3ec !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-info:hover,
html[data-theme="dark"] .btn-info:focus,
html[data-theme="dark"] .btn-info:active {
    background-color: #03b0d4 !important;
    border-color: #03b0d4 !important;
    color: #ffffff !important;
}

/* Outline Buttons */
html[data-theme="dark"] .btn-outline-primary {
    color: #696cff !important;
    border-color: #696cff !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-primary:focus,
html[data-theme="dark"] .btn-outline-primary:active {
    background-color: #696cff !important;
    border-color: #696cff !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-outline-secondary {
    color: #8592a3 !important;
    border-color: #8592a3 !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:focus,
html[data-theme="dark"] .btn-outline-secondary:active {
    background-color: #8592a3 !important;
    border-color: #8592a3 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-outline-success {
    color: #71dd37 !important;
    border-color: #71dd37 !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .btn-outline-success:hover,
html[data-theme="dark"] .btn-outline-success:focus,
html[data-theme="dark"] .btn-outline-success:active {
    background-color: #71dd37 !important;
    border-color: #71dd37 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-outline-danger {
    color: #ff3e1d !important;
    border-color: #ff3e1d !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .btn-outline-danger:hover,
html[data-theme="dark"] .btn-outline-danger:focus,
html[data-theme="dark"] .btn-outline-danger:active {
    background-color: #ff3e1d !important;
    border-color: #ff3e1d !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-outline-warning {
    color: #ffab00 !important;
    border-color: #ffab00 !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .btn-outline-warning:hover,
html[data-theme="dark"] .btn-outline-warning:focus,
html[data-theme="dark"] .btn-outline-warning:active {
    background-color: #ffab00 !important;
    border-color: #ffab00 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-outline-info {
    color: #03c3ec !important;
    border-color: #03c3ec !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .btn-outline-info:hover,
html[data-theme="dark"] .btn-outline-info:focus,
html[data-theme="dark"] .btn-outline-info:active {
    background-color: #03c3ec !important;
    border-color: #03c3ec !important;
    color: #ffffff !important;
}

/* ============================================
   PAGINATION
   ============================================ */

html[data-theme="dark"] .pagination .page-link {
    background-color: var(--bs-card-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

html[data-theme="dark"] .pagination .page-link:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--bs-heading-color) !important;
}

html[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: #696cff !important;
    border-color: #696cff !important;
}

/* ============================================
   TEXT & HEADINGS
   ============================================ */

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .h1,
html[data-theme="dark"] .h2,
html[data-theme="dark"] .h3,
html[data-theme="dark"] .h4,
html[data-theme="dark"] .h5,
html[data-theme="dark"] .h6 {
    color: var(--bs-heading-color) !important;
}

html[data-theme="dark"] .text-muted {
    color: #6d6d80 !important;
}

html[data-theme="dark"] .text-dark {
    color: #d9dae6 !important;
}

html[data-theme="dark"] .text-body {
    color: #a3a4cc !important;
}

html[data-theme="dark"] a {
    color: #696cff !important;
}

html[data-theme="dark"] a:hover {
    color: #5f61e6 !important;
}

html[data-theme="dark"] .card a.text-body {
    color: #d9dae6 !important;
}

html[data-theme="dark"] .card a.text-body:hover {
    color: #696cff !important;
}

/* ============================================
   BORDERS & SHADOWS
   ============================================ */

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end {
    border-color: var(--bs-border-color) !important;
}

html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow-lg {
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] hr {
    border-color: var(--bs-border-color) !important;
    opacity: 0.5;
}

/* ============================================
   BREADCRUMB
   ============================================ */

html[data-theme="dark"] .breadcrumb-item {
    color: var(--bs-body-color) !important;
}

html[data-theme="dark"] .breadcrumb-item.active {
    color: var(--bs-heading-color) !important;
}

html[data-theme="dark"] .breadcrumb-item a {
    color: var(--bs-link-color) !important;
}

/* ============================================
   FOOTER
   ============================================ */

html[data-theme="dark"] .content-footer {
    background-color: transparent !important;
    color: var(--bs-body-color) !important;
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */

.theme-toggle {
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    transform: scale(1.1);
}

.theme-toggle i {
    transition: transform 0.3s ease;
}

.theme-toggle:hover i {
    transform: rotate(20deg);
}