/* ═══════════════════════════════════════════════
   FLATMANAGER — STANDARD DARK MODE
   Palette inspired by GitHub Dark / Linear / VS Code
   Background:  #0d1117
   Surface:     #161b22
   Surface-2:   #21262d
   Border:      #30363d
   Text-1:      #e6edf3
   Text-2:      #8b949e
   Text-3:      #6e7781
═══════════════════════════════════════════════ */

/* ── Root & Body ── */
html.dark,
html.dark body {
    background-color: #0d1117 !important;
    color: #e6edf3 !important;
}

/* ── Backgrounds ── */
html.dark [class*="bg-white"]      { background-color: #161b22 !important; }
html.dark [class*="bg-slate-50"]   { background-color: #0d1117 !important; }
html.dark [class*="bg-slate-100"]  { background-color: #161b22 !important; }
html.dark [class*="bg-gray-100"]   { background-color: #0d1117 !important; }
html.dark [class*="bg-gray-50"]    { background-color: #161b22 !important; }

/* ── Keep dark sidebars/headers as-is but deeper ── */
html.dark [class*="bg-slate-900"]  { background-color: #010409 !important; }
html.dark [class*="bg-slate-800"]  { background-color: #0d1117 !important; }

/* ── Text ── */
html.dark [class*="text-slate-900"],
html.dark [class*="text-slate-800"],
html.dark [class*="text-gray-900"],
html.dark [class*="text-gray-800"] { color: #e6edf3 !important; }

html.dark [class*="text-slate-700"],
html.dark [class*="text-gray-700"] { color: #cdd9e5 !important; }

html.dark [class*="text-slate-600"],
html.dark [class*="text-gray-600"] { color: #adbac7 !important; }

html.dark [class*="text-slate-500"],
html.dark [class*="text-gray-500"] { color: #8b949e !important; }

html.dark [class*="text-slate-400"],
html.dark [class*="text-gray-400"] { color: #6e7781 !important; }

/* ── Borders ── */
html.dark [class*="border-slate-200"],
html.dark [class*="border-slate-100"],
html.dark [class*="border-gray-200"],
html.dark [class*="border-gray-100"] { border-color: #30363d !important; }

html.dark [class*="divide-slate"],
html.dark [class*="divide-gray"]     { border-color: #21262d !important; }

/* ── Inputs ── */
html.dark input:not([type="checkbox"]):not([type="radio"]),
html.dark textarea,
html.dark select {
    background-color: #0d1117 !important;
    border-color: #30363d !important;
    color: #e6edf3 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #6e7781 !important; }
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
    border-color: #388bfd !important;
    box-shadow: 0 0 0 3px rgba(56,139,253,0.15) !important;
}

/* ── Tables ── */
html.dark thead,
html.dark [class*="bg-slate-50"][class*="border-b"],
html.dark [class*="bg-gray-50"] {
    background-color: #161b22 !important;
}
html.dark tbody tr { border-color: #21262d !important; }
html.dark tbody tr:hover { background-color: #1c2128 !important; }

/* ── Modals ── */
html.dark [id$="Modal"] > div,
html.dark [id$="modal"] > div {
    background-color: #161b22 !important;
    border-color: #30363d !important;
}

/* ── Amber / warning boxes ── */
html.dark [class*="bg-amber-50"] {
    background-color: #1a1300 !important;
    border-color: #5a3e00 !important;
}
html.dark [class*="text-amber-800"] { color: #d4a017 !important; }
html.dark [class*="text-amber-700"] { color: #c69010 !important; }

/* ── Blue info boxes ── */
html.dark [class*="bg-blue-50"] {
    background-color: #051526 !important;
    border-color: #0c2d4e !important;
}
html.dark [class*="text-blue-700"] { color: #58a6ff !important; }
html.dark [class*="text-blue-800"] { color: #79b8ff !important; }

/* ── Rose / error boxes ── */
html.dark [class*="bg-rose-50"] {
    background-color: #160b0b !important;
    border-color: #4a1010 !important;
}

/* ── Emerald / success boxes ── */
html.dark [class*="bg-emerald-50"] {
    background-color: #071a0f !important;
    border-color: #0d3320 !important;
}

/* ── Nav links hover ── */
html.dark [class*="nav-link"]:hover {
    background-color: #21262d !important;
    color: #e6edf3 !important;
}

/* ── Shadows ── */
html.dark [class*="shadow"] {
    box-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
}

/* ── Login glass card ── */
html.dark .glass-effect {
    background: rgba(22, 27, 34, 0.98) !important;
    border-color: #30363d !important;
}

/* ── Stat cards with colored left borders — keep accent, darken bg ── */
html.dark .border-l-4 { background-color: #161b22 !important; }

/* ── Content editable (lease editor) ── */
html.dark [contenteditable="true"] {
    background-color: #0d1117 !important;
    color: #e6edf3 !important;
}

/* ══════════════════════════════════════════════
   TOGGLE PILL STYLES
══════════════════════════════════════════════ */
#theme-pill {
    position: relative;
    width: 56px;
    height: 28px;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    background-color: #e2e8f0;
    transition: background-color 0.3s ease;
    padding: 0;
    flex-shrink: 0;
}
#theme-knob {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    background: white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ── Lease agreement table ── */
html.dark #leaseEditor,
html.dark #viewLeaseContent {
    background-color: #0d1117 !important;
    color: #e6edf3 !important;
}

html.dark #leaseEditor table,
html.dark #viewLeaseContent table {
    border-color: #30363d !important;
}

html.dark #leaseEditor td,
html.dark #leaseEditor th,
html.dark #viewLeaseContent td,
html.dark #viewLeaseContent th {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    color: #e6edf3 !important;
}

/* Label cells (first column) */
html.dark #leaseEditor td:first-child,
html.dark #viewLeaseContent td:first-child {
    background-color: #1c2128 !important;
    color: #58a6ff !important;
}
/* ── Status buttons — keep accent colors in dark mode ── */

/* Paid / Emerald */
html.dark [class*="bg-emerald-100"] { background-color: #071a0f !important; }
html.dark [class*="text-emerald-700"] { color: #3fb950 !important; }
html.dark [class*="bg-emerald-600"] { background-color: #238636 !important; }
html.dark [class*="bg-emerald-600"]:hover { background-color: #2ea043 !important; }

/* Pending / Amber */
html.dark [class*="bg-amber-100"] { background-color: #1a1300 !important; }
html.dark [class*="text-amber-700"] { color: #d4a017 !important; }
html.dark [class*="bg-amber-600"] { background-color: #9e6a03 !important; }
html.dark [class*="bg-amber-600"]:hover { background-color: #b07d04 !important; }

/* Late / Rose */
html.dark [class*="bg-rose-100"] { background-color: #160b0b !important; }
html.dark [class*="text-rose-700"] { color: #f85149 !important; }
html.dark [class*="bg-rose-600"] { background-color: #b91c1c !important; }
html.dark [class*="bg-rose-600"]:hover { background-color: #dc2626 !important; }

/* Partial / Blue */
html.dark [class*="bg-blue-100"] { background-color: #051526 !important; }
html.dark [class*="text-blue-700"] { color: #58a6ff !important; }
html.dark [class*="bg-blue-600"] { background-color: #1158d4 !important; }
html.dark [class*="bg-blue-600"]:hover { background-color: #1d6ae5 !important; }

/* ── Universal button hover transitions ── */
html.dark button,
html.dark [class*="rounded-xl"],
html.dark [class*="rounded-2xl"],
html.dark [class*="rounded-lg"] {
    transition: background-color 0.2s ease, color 0.2s ease, 
                transform 0.15s ease, box-shadow 0.2s ease !important;
}

html.dark button:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
}

html.dark button:active {
    transform: scale(0.97);
    filter: brightness(0.95);
}

/* ── Status badge pills (in tables/cards) ── */
html.dark [class*="bg-emerald-50"][class*="text-emerald-"] {
    background-color: #071a0f !important;
    color: #3fb950 !important;
    border: 1px solid #238636 !important;
}
html.dark [class*="bg-rose-50"][class*="text-rose-"] {
    background-color: #160b0b !important;
    color: #f85149 !important;
    border: 1px solid #b91c1c !important;
}
html.dark [class*="bg-amber-50"][class*="text-amber-"] {
    background-color: #1a1300 !important;
    color: #d4a017 !important;
    border: 1px solid #9e6a03 !important;
}
html.dark [class*="bg-blue-50"][class*="text-blue-"] {
    background-color: #051526 !important;
    color: #58a6ff !important;
    border: 1px solid #1158d4 !important;
}
/* ── Property modal Save & Cancel buttons ── */
html.dark #propModal .bg-slate-900 {
    background-color: #238636 !important;
    color: #ffffff !important;
}
html.dark #propModal .bg-slate-900:hover {
    background-color: #2ea043 !important;
}

html.dark #propModal .text-slate-400 {
    color: #8b949e !important;
    background-color: #21262d !important;
    border-radius: 1rem;
}
html.dark #propModal .text-slate-400:hover {
    background-color: #30363d !important;
    color: #e6edf3 !important;
}

/* ── Settings modal buttons too ── */
html.dark #settingsModal .bg-blue-600 {
    background-color: #1158d4 !important;
}
html.dark #settingsModal .bg-blue-600:hover {
    background-color: #1d6ae5 !important;
}
html.dark #settingsModal .bg-rose-50 {
    background-color: #160b0b !important;
}
html.dark #settingsModal .text-rose-600 {
    color: #f85149 !important;
}
html.dark #settingsModal .bg-rose-50:hover {
    background-color: #4a1010 !important;
}
/* ── Tenant portal lease content ── */
html.dark #lease-content-display {
    background-color: #0d1117 !important;
    border-color: #30363d !important;
    color: #e6edf3 !important;
}

html.dark #lease-content-display table {
    border-color: #30363d !important;
    width: 100%;
}

html.dark #lease-content-display td,
html.dark #lease-content-display th {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    color: #e6edf3 !important;
}

/* Label column (first td) */
html.dark #lease-content-display td:first-child {
    background-color: #1c2128 !important;
    color: #58a6ff !important;
}

/* Title and subtitle */
html.dark #lease-content-display h1,
html.dark #lease-content-display h2,
html.dark #lease-content-display h3,
html.dark #lease-content-display p,
html.dark #lease-content-display strong {
    color: #e6edf3 !important;
}

/* Any inline light backgrounds in the lease HTML */
html.dark #lease-content-display [style*="background"] {
    background-color: #161b22 !important;
}
html.dark #lease-content-display [style*="color"] {
    color: #e6edf3 !important;
}