/* ==========================================================================
   DonusumPR Theme Variables — light + dark
   Ortak renk paleti, hardcoded renkler yerine bu variable'ları kullan.
   ========================================================================== */

:root,
html[data-theme='light'] {
    /* Yüzey */
    --dp-bg:           #ffffff;
    --dp-bg-subtle:    #f8fafc;
    --dp-surface:      #ffffff;
    --dp-surface-2:    #f1f5f9;
    --dp-surface-3:    #e2e8f0;

    /* Metin */
    --dp-text:         #1e293b;
    --dp-text-muted:   #64748b;
    --dp-text-subtle:  #667085;

    /* Border */
    --dp-border:       #e2e8f0;
    --dp-border-strong:#cbd5e1;

    /* Brand & Accent */
    --dp-primary:      #285d77;
    --dp-success:      #047857;
    --dp-warning:      #92400e;
    --dp-danger:       #dc2626;
    --dp-info:         #17627d;

    /* Shadow */
    --dp-shadow-sm:    0 1px 2px 0 rgba(15, 23, 42, 0.06);
    --dp-shadow:       0 4px 12px -4px rgba(15, 23, 42, 0.1);
    --dp-shadow-lg:    0 12px 24px -8px rgba(15, 23, 42, 0.18);

    /* Hover overlay */
    --dp-hover-overlay: rgba(15, 23, 42, 0.04);
}

html[data-theme='dark'] {
    --dp-bg:           #23313b;
    --dp-bg-subtle:    #1e293b;
    --dp-surface:      #1e293b;
    --dp-surface-2:    #334155;
    --dp-surface-3:    #475569;

    --dp-text:         #e2e8f0;
    --dp-text-muted:   #94a3b8;
    --dp-text-subtle:  #64748b;

    --dp-border:       #334155;
    --dp-border-strong:#475569;

    --dp-primary:      #60a5fa;
    --dp-success:      #34d399;
    --dp-warning:      #fbbf24;
    --dp-danger:       #f87171;
    --dp-info:         #22d3ee;

    --dp-shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --dp-shadow:       0 4px 12px -4px rgba(0, 0, 0, 0.5);
    --dp-shadow-lg:    0 12px 24px -8px rgba(0, 0, 0, 0.6);

    --dp-hover-overlay: rgba(255, 255, 255, 0.06);
}

.unit-cell-area--share {
    color: #546e7a;
    opacity: 0.8;
}

.unit-cell-owner--private,
.unit-cell-ghost-text {
    color: #94a3b8;
}

.unit-cell-ghost-text {
    font-style: italic;
}

.unit-cell-owner--claim {
    color: #8a5b12;
    font-weight: 600;
}

.schema-legend-inline {
    font-size: 11px;
}

.schema-legend-swatch {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 3px;
}

.schema-legend-swatch--owner-home {
    background: #dbeafe;
    border: 1px solid #93c5fd;
}

.schema-legend-swatch--owner-shop {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
}

.schema-legend-swatch--storage {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
}

.schema-legend-swatch--unassigned {
    background: #fef9c3;
    border: 1px solid #fde047;
}

/* ==========================================================================
   Smooth theme transition — ani renk değişimi yerine 200ms fade.
   ========================================================================== */
html[data-theme] body {
    transition: background-color 0.2s ease, color 0.2s ease;
}

html[data-theme] .card,
html[data-theme] .modal-content,
html[data-theme] .dropdown-menu,
html[data-theme] .list-group-item,
html[data-theme] .table {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme] body,
    html[data-theme] .card,
    html[data-theme] .modal-content,
    html[data-theme] .dropdown-menu,
    html[data-theme] .list-group-item,
    html[data-theme] .table {
        transition: none;
    }
}

/* ==========================================================================
   Generic dark mode coverage — eksik kalan hardcoded renk'lere
   defansif override'lar. Component-level CSS'lerinde dark mode varsa onlar
   öncelikli (specificity); buradaki kurallar global fallback.
   ========================================================================== */

html[data-theme='dark'] {
    color-scheme: dark;
}

/* Bootstrap utility class overrides — sıkça kullanılan light bg'ler */
html[data-theme='dark'] .bg-light {
    background-color: var(--dp-surface) !important;
    color: var(--dp-text);
}
html[data-theme='dark'] .bg-white {
    background-color: var(--dp-surface) !important;
}
html[data-theme='dark'] .text-dark {
    color: var(--dp-text) !important;
}
html[data-theme='dark'] .text-muted {
    color: var(--dp-text-muted) !important;
}
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(--dp-border) !important;
}

/* Card+modal — Bootstrap 5.3 data-bs-theme zaten halleder ama defensive */
html[data-theme='dark'] .card {
    background-color: var(--dp-surface);
    color: var(--dp-text);
    border-color: var(--dp-border);
}
html[data-theme='dark'] .card-header,
html[data-theme='dark'] .card-footer {
    background-color: var(--dp-bg-subtle);
    border-color: var(--dp-border);
}

/* Form controls */
html[data-theme='dark'] .form-control,
html[data-theme='dark'] .form-select {
    background-color: var(--dp-surface-2);
    color: var(--dp-text);
    border-color: var(--dp-border);
}
html[data-theme='dark'] .form-control::placeholder {
    color: var(--dp-text-subtle);
}
html[data-theme='dark'] .form-control:focus,
html[data-theme='dark'] .form-select:focus {
    background-color: var(--dp-surface-2);
    color: var(--dp-text);
    border-color: var(--dp-primary);
}

/* Dropdowns */
html[data-theme='dark'] .dropdown-menu {
    background-color: var(--dp-surface);
    border-color: var(--dp-border);
}
html[data-theme='dark'] .dropdown-item {
    color: var(--dp-text);
}
html[data-theme='dark'] .dropdown-item:hover,
html[data-theme='dark'] .dropdown-item:focus {
    background-color: var(--dp-surface-2);
    color: var(--dp-text);
}
html[data-theme='dark'] .dropdown-header {
    color: var(--dp-text-muted);
}
html[data-theme='dark'] .dropdown-divider {
    border-top-color: var(--dp-border);
}

/* Tables */
html[data-theme='dark'] .table {
    --bs-table-color: var(--dp-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--dp-border);
    --bs-table-striped-color: var(--dp-text);
    --bs-table-striped-bg: var(--dp-bg-subtle);
    --bs-table-hover-color: var(--dp-text);
    --bs-table-hover-bg: var(--dp-surface-2);
    color: var(--dp-text);
    border-color: var(--dp-border);
}
html[data-theme='dark'] .table-light {
    --bs-table-color: var(--dp-text);
    --bs-table-bg: var(--dp-bg-subtle);
    --bs-table-border-color: var(--dp-border);
}

/* List groups */
html[data-theme='dark'] .list-group-item {
    background-color: var(--dp-surface);
    color: var(--dp-text);
    border-color: var(--dp-border);
}

/* Modal */
html[data-theme='dark'] .modal-content {
    background-color: var(--dp-surface);
    color: var(--dp-text);
    border-color: var(--dp-border);
}
html[data-theme='dark'] .modal-header,
html[data-theme='dark'] .modal-footer {
    border-color: var(--dp-border);
}

/* Nav tabs/pills */
html[data-theme='dark'] .nav-tabs {
    border-bottom-color: var(--dp-border);
}
html[data-theme='dark'] .nav-tabs .nav-link {
    color: var(--dp-text-muted);
}
html[data-theme='dark'] .nav-tabs .nav-link:hover {
    border-color: var(--dp-border);
    color: var(--dp-text);
}
html[data-theme='dark'] .nav-tabs .nav-link.active {
    background-color: var(--dp-surface);
    color: var(--dp-text);
    border-color: var(--dp-border) var(--dp-border) var(--dp-surface);
}

/* Badge subtle variants — Bootstrap 5.3 default'ları dark için yeterli */

/* Alerts */
html[data-theme='dark'] .alert-light {
    background-color: var(--dp-surface);
    color: var(--dp-text);
    border-color: var(--dp-border);
}

/* Buttons — outline-secondary etc. */
html[data-theme='dark'] .btn-outline-secondary {
    color: var(--dp-text-muted);
    border-color: var(--dp-border-strong);
}
html[data-theme='dark'] .btn-outline-secondary:hover {
    background-color: var(--dp-surface-2);
    color: var(--dp-text);
}
html[data-theme='dark'] .btn-light {
    background-color: var(--dp-surface-2);
    color: var(--dp-text);
    border-color: var(--dp-border);
}
html[data-theme='dark'] .btn-light:hover {
    background-color: var(--dp-surface-3);
    color: var(--dp-text);
}

/* Text muted variants */
html[data-theme='dark'] .text-secondary {
    color: var(--dp-text-muted) !important;
}

/* Body itself */
html[data-theme='dark'] body {
    background-color: var(--dp-bg);
    color: var(--dp-text);
}

/* Inputgroup-text */
html[data-theme='dark'] .input-group-text {
    background-color: var(--dp-bg-subtle);
    color: var(--dp-text-muted);
    border-color: var(--dp-border);
}

/* Navbar quick theme toggle button */
html[data-theme='dark'] [data-bs-toggle="dropdown"][aria-label="Tema seçimi"] {
    background: rgba(255,255,255,0.08) !important;
    color: var(--dp-text);
}